/*
Theme Name: Maria Gordon
Theme URI: https://maria-gordon-illustration.com
Description: Bespoke theme for Maria Gordon Illustration, built by Alden Fine Print & Co. Reasoning and gotchas live in docs/ inside this theme; the code itself is deliberately comment-free.
Author: Alden Fine Print & Co.
Author URI: https://aldenfineprint.com
Version: 0.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: mg-theme
*/

:root {
    --mg-paper:     #ffffff;
    --mg-ink:       #26262a;
    --mg-ink-soft:  #6d6d76;
    --mg-line:      rgba(38, 38, 42, .13);
    --mg-field:     #e6e5e2;

    --mg-red:       #b81f1f;

    --mg-black:     #08080a;

    --mg-deep:      #22160e;
    --mg-grey-text: #9a9aa2;
    --mg-grey-dim:  #6e6e77;

    --mg-serif: 'Cormorant Garamond', 'Times New Roman', Times, serif;
    --mg-fell:  'IM Fell English', 'Cormorant Garamond', Georgia, serif;

    --mg-bar-h: 4.75rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

html.mg-nav-locked,
html.mg-nav-locked body {
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background: var(--mg-paper);
    color: var(--mg-ink);
    font-family: var(--mg-serif);
    font-weight: 400;
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

button {
    font-family: inherit;
}

mark {
    background: transparent;
    color: inherit;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.mg-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: .75rem 1.25rem;
    background: var(--mg-ink);
    color: var(--mg-paper);
    text-decoration: none;
}

.mg-skip:focus {
    left: 0;
}

/* Phone: one bar — mark on the left, controls on the right. It used to be the
   desktop arrangement shrunk: a big centred logo with the buttons on a second
   row under it, which spent about a fifth of a phone screen before the page
   had said anything. From 48em the centred stack returns, and that is the one
   place in this file besides the nav panel where a desktop rule properly
   undoes the base. */
.mg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--mg-line);
}

/* No script, no off-canvas panel — the menu is in the flow, and a full nav
   list crammed into the right-hand half of a flex row is not a fallback. It
   goes back under the mark, centred, the way it was. One rule, because the
   compact padding and logo read perfectly well centred too. */
.mg-header:not(.is-enhanced) {
    display: block;
    text-align: center;
}

.mg-header:not(.is-enhanced) .mg-nav {
    margin-top: 1.25rem;
}

/* Logged in, on a phone: Rank Math parks a floating badge in the top right
   corner, over the header bar, and lands on the Menu button. Only the phone
   header is affected — from 48em the controls are a centred row well below
   the corner — so the room is made here and nowhere else. `logged-in` rather
   than `admin-bar`: the badge appears whether or not the bar is showing. */
@media (max-width: 47.9375em) {
    body.logged-in .mg-header {
        padding-right: 4.15rem;
    }
}

/* The same corner, the same badge, and the two panels that open over the whole
   viewport put their close button in it. No media query: the badge is fixed to
   the viewport at every width, so the × has to clear it at every width. The
   phone's nav bar is `display: none` from 48em anyway; the search bar is the
   one that needed this on a desktop too.

   The nav bar's selector is spelled out to `.mg-header.is-enhanced .mg-nav__bar`
   because that is how its own `padding` is written — three classes, which
   `body.logged-in .mg-nav__bar` (two classes and an element) loses to. Count
   before shortening it. */
body.logged-in .mg-header.is-enhanced .mg-nav__bar,
body.logged-in .mg-search__bar {
    padding-right: 4.15rem;
}

.mg-header__logo {
    display: inline-block;
    line-height: 0;
}

.mg-header__logo img {
    width: auto;
    /* Lands the bar within a pixel or two of --mg-bar-h, which is the height
       of the menu and search panels that open over it. */
    height: 48px;
}

.mg-nav {
    margin-top: 0;
}

.mg-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .7rem;
    border: 1px solid var(--mg-line);
    background: transparent;
    color: var(--mg-ink);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-indent: .16em;
    cursor: pointer;

    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Drawn rather than three borders on a span: it has to match the search
   glyph beside it, which is an SVG on the same stroke weight. */
.mg-nav__toggle-icon {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.mg-nav__bar {
    display: none;
}

.mg-nav__panel {
    margin-top: 1.25rem;
}

.mg-header.is-enhanced .mg-nav__panel {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--mg-paper);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .34s cubic-bezier(.4, 0, .2, 1), visibility .34s;
}

.mg-header.is-enhanced.is-open .mg-nav__panel {
    transform: none;
    visibility: visible;
}

/* The menu and the search overlay are `inset: 0` — the viewport, admin bar
   included, so the bar sat over the panel's own bar and took the close button
   with it. WordPress's own heights: 46px at 782px and below, where the bar is
   `position: fixed`, and 32px above it. The submenu is separately fixed and
   measured from the same top, so it carries the offset too. */
body.admin-bar .mg-header.is-enhanced .mg-nav__panel,
body.admin-bar .mg-search {
    top: 46px;
}

/* Only below 48em. Above it the submenu is not a full-screen panel at all but
   an absolutely positioned dropdown on `top: 100%`, and this selector outranks
   the rule that says so — five classes to its four. Keep it in the query. */
@media (max-width: 47.9375em) {
    body.admin-bar .mg-header.is-enhanced .mg-nav__list .sub-menu {
        top: calc(var(--mg-bar-h) + 46px);
    }
}

/* The panel is `position: static` from 48em, so only the search overlay is
   still measuring from the viewport up here. */
@media (min-width: 783px) {
    body.admin-bar .mg-search {
        top: 32px;
    }
}

.mg-header.is-enhanced .mg-nav__bar {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 var(--mg-bar-h);
    height: var(--mg-bar-h);
    padding: 0 1.25rem;
    background: var(--mg-paper);
    border-bottom: 1px solid var(--mg-line);
}

.mg-nav__bar-logo {
    line-height: 0;
}

.mg-nav__bar-logo img {
    width: auto;
    height: 42px;
}

/* Both closes, one icon. They used to be `×` at 2rem in Cormorant — a
   serif multiplication sign, which is small for its point size, sits off the
   optical centre of its button, and looked nothing like the search glyph
   beside it. Same viewBox, same 1.7 stroke and same 1.3rem as
   `.mg-search__icon`, so the pair cannot drift apart again. */
.mg-close__icon {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.mg-nav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--mg-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


.mg-nav__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2.25rem 1.5rem 4rem;
}

.mg-nav__list,
.mg-nav__list .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mg-nav__list a {
    display: block;
    padding: .7rem 0;
    font-size: 1.25rem;
    text-align: center;
    text-decoration: none;
    letter-spacing: .04em;
    transition: color .25s ease;
}

.mg-nav__list a:hover,
.mg-nav__list a:focus-visible {
    color: var(--mg-ink-soft);
}

/* Where you are, in the nav and nowhere else — italic *and* underlined, the
   same pair the active product tab wears. Italic alone was too quiet to find
   at a glance in a list of small caps.

   Five selectors for one idea, because "current" has that many spellings:
   WordPress's own two for the page you are on, its two for the section you are
   inside (the posts page on a single post, a parent whose child is current),
   and ours for the sections it cannot work out at all — the shop, and every
   custom post type. See `mg_nav_section_class()` in functions.php. */
.mg-nav__list .current-menu-item > a,
.mg-nav__list .current_page_item > a,
.mg-nav__list .current-menu-ancestor > a,
.mg-nav__list .current_page_parent > a,
.mg-nav__list .mg-nav__item--section > a {
    font-style: italic;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .3em;
}

.mg-header.is-enhanced .mg-nav__list > li.menu-item-has-children > a::after {
    content: '\203A';
    margin-left: .5rem;
    color: var(--mg-ink-soft);
}

.mg-header.is-enhanced .mg-nav__list .sub-menu {
    position: fixed;
    top: var(--mg-bar-h);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 1.25rem 1.5rem 4rem;
    background: var(--mg-paper);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s cubic-bezier(.4, 0, .2, 1), visibility .32s;
}

.mg-header.is-enhanced .mg-nav__list > li.is-open > .sub-menu {
    transform: none;
    visibility: visible;
}

.mg-nav__back button {
    display: block;
    width: 100%;
    padding: .7rem 0;
    border: 0;
    background: transparent;
    color: var(--mg-ink-soft);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    text-indent: .2em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mg-nav__viewall {
    margin-bottom: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--mg-line);
}

.mg-nav__viewall a {
    font-style: italic;
    color: var(--mg-ink-soft);
}

.mg-nav__list .menu-ig-mobile > a,
.mg-nav__list .menu-ig-desktop > a {
    position: relative;
    width: 1.6rem;
    height: 1.6rem;
    margin: .7rem auto;
    padding: 0;
    overflow: hidden;
    text-indent: -999em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='3.2' y='3.2' width='17.6' height='17.6' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='17.1' cy='6.9' r='1.15' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Crect x='3.2' y='3.2' width='17.6' height='17.6' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='17.1' cy='6.9' r='1.15' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mg-nav__list .menu-ig-desktop {
    display: none;
}

.mg-header.is-enhanced .mg-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

/* Phone: not in the header. Search already has a control inside the menu —
   `.mg-search-toggle--bar`, in the panel's own bar — so carrying a second one
   out here made the header two buttons wide for a function most visitors are
   not looking for on arrival. It costs a tap; the header gets its width back
   and MENU stops competing with a glyph beside it. Shown again from 48em,
   where it sits in the horizontal nav and there is room for both. */
.mg-search-toggle {
    display: none;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mg-ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mg-header.is-search-ready .mg-search-toggle {
    visibility: visible;
}

.mg-search__icon {
    width: 1.3rem;
    height: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
}

.mg-search-toggle--bar {
    display: none;
}

.mg-header.is-enhanced .mg-search-toggle--bar {
    display: inline-flex;
    margin-left: auto;
    margin-right: -.35rem;
}

.mg-search {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    /* Grey ground, white field. The overlay is one big empty page otherwise,
       and on white paper a white search box has nothing to be a box against —
       the reader has to infer where to type from a single underline. */
    background: var(--mg-field);
    opacity: 0;
    visibility: hidden;
    transition: opacity .26s ease, visibility .26s;
}

.mg-search[hidden] {
    display: none;
}

.mg-search.is-open {
    opacity: 1;
    visibility: visible;
}

.mg-search__bar {
    /* Positioned and stacked for the same reason `.mg-nav__bar` is: the close
       button has to be the topmost thing in the overlay, above anything the
       body below it might grow into. Its twin in the menu has carried
       `z-index: 3` from the start; this one did not, and the × was reported
       not closing on a phone. */
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 var(--mg-bar-h);
    height: var(--mg-bar-h);
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--mg-line);
}

/* The mark stays put when the search overlay opens. It used to vanish — the
   overlay covers the header and put nothing back — so searching from the menu
   meant watching the site's only piece of identity disappear. Same height as
   the menu panel's logo, because the two bars sit in the same place and a
   visitor moves straight between them. */
.mg-search__logo {
    line-height: 0;
}

.mg-search__logo img {
    width: auto;
    height: 42px;
}

.mg-search__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -.5rem;
    border: 0;
    background: transparent;
    color: var(--mg-ink);
    cursor: pointer;
    /* No double-tap-to-zoom wait on this one — a close button that answers a
       third of a second late reads as a close button that did not answer. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}


.mg-search__body {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3.5rem 1.5rem 4rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mg-search__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    width: 100%;
    max-width: 34rem;
}

.mg-search__field {
    width: 100%;
    padding: .75rem 1rem;
    border: 1px solid var(--mg-line);
    border-radius: 0;
    background: var(--mg-paper);
    color: var(--mg-ink);
    font-family: var(--mg-serif);
    font-size: 1.6rem;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.mg-search__field:focus {
    outline: none;
    border-color: var(--mg-ink);
}

.mg-search__field::placeholder {
    color: var(--mg-ink-soft);
}

.mg-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.mg-search__submit {
    padding: .7rem 1.4rem;
    background: var(--mg-ink);
    border: 1px solid var(--mg-ink);
    color: var(--mg-paper);
    font-family: var(--mg-serif);
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-indent: .16em;
    cursor: pointer;
}

.mg-results {
    max-width: 52rem;
    margin-inline: auto;
}

.mg-results__header {
    margin: 0 0 2.75rem;
    text-align: center;
}

.mg-results__title {
    margin: 0;
    font-size: clamp(1.5rem, 6vw, 2.2rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: .01em;
}

.mg-results__count {
    margin: .6rem 0 0;
    color: var(--mg-ink-soft);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    text-indent: .2em;
}

.mg-results__form {
    display: flex;
    gap: .75rem;
    align-items: stretch;
    justify-content: center;
    max-width: 28rem;
    margin: 1.75rem auto 0;
}

.mg-results__field {
    flex: 1 1 auto;
    min-width: 0;
    padding: .55rem .75rem;
    border: 1px solid var(--mg-line);
    border-radius: 0;
    background: var(--mg-paper);
    color: var(--mg-ink);
    font-family: var(--mg-serif);
    font-size: 1rem;
    -webkit-appearance: none;
    appearance: none;
}

.mg-results__field:focus {
    outline: none;
    border-color: var(--mg-ink);
}

.mg-results__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.mg-results__submit {
    flex: 0 0 auto;
    padding: .55rem 1.2rem;
    background: var(--mg-ink);
    border: 1px solid var(--mg-ink);
    color: var(--mg-paper);
    font-family: var(--mg-serif);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-indent: .16em;
    cursor: pointer;
}

.mg-results__list {
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}

.mg-result + .mg-result {
    border-top: 1px solid var(--mg-line);
}

.mg-result__link {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1.1rem;
    align-items: start;
    padding: 1.5rem 0;
    text-decoration: none;
    color: inherit;
}

.mg-result__link--flat {
    grid-template-columns: 1fr;
}

.mg-result__frame {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--mg-field);
    border: 1px solid var(--mg-line);
}

.mg-result__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.mg-result__body {
    display: block;
    min-width: 0;
}

.mg-result__label {
    display: block;
    margin-bottom: .35rem;
    color: var(--mg-ink-soft);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    text-indent: .2em;
}

.mg-result__title {
    display: block;
    font-size: 1.15rem;
    line-height: 1.3;
}

.mg-result__meta {
    display: block;
    margin-top: .3rem;
    color: var(--mg-ink-soft);
    font-size: .85rem;
    font-style: italic;
}

.mg-result__excerpt {
    display: block;
    margin-top: .5rem;
    color: var(--mg-ink-soft);
    font-size: .92rem;
    line-height: 1.55;
}

@media (hover: hover) {
    .mg-result__link:hover .mg-result__title {
        font-style: italic;
    }

    .mg-result__link:hover .mg-result__image {
        transform: scale(1.03);
    }
}

.mg-results__empty {
    max-width: 26rem;
}

.mg-results__hint {
    margin: .9rem 0 0;
    color: var(--mg-ink-soft);
    font-size: .92rem;
}

@media (min-width: 48em) {
    .mg-result__link {
        grid-template-columns: 6rem 1fr;
        gap: 1.75rem;
        padding: 1.9rem 0;
    }

    .mg-result__link--flat {
        grid-template-columns: 1fr;
    }

    .mg-result__title {
        font-size: 1.35rem;
    }
}

.mg-main {
    flex: 1 0 auto;
    padding: 1.25rem;
}

.mg-field {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55vh;
    padding: 3rem 1.25rem;
    background: var(--mg-field);
    text-align: center;
}

.mg-field__text {
    margin: 0;
    font-family: var(--mg-fell);
    font-style: italic;
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    letter-spacing: .04em;
    color: var(--mg-ink-soft);
}

.mg-footer {
    flex-shrink: 0;
    background-color: var(--mg-deep);
    color: #eee7db;
}

.mg-footer__banner {
    height: 150px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
}

.mg-footer__row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 1.25rem 2rem;
    text-align: center;
}

.mg-footer--slim .mg-footer__row {
    border-top: 1px solid rgba(255, 255, 255, .15);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.mg-footer__legal {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.mg-footer__legal li {
    display: inline;
}

.mg-footer__legal li:not(:last-child)::after {
    content: '\00b7';
    margin: 0 .6em;
    opacity: .6;
}

.mg-footer__legal a {
    color: inherit;
    text-decoration: none;
    opacity: .85;
}

.mg-footer__legal a:hover,
.mg-footer__legal a:focus-visible {
    opacity: 1;
}

.mg-footer__line {
    margin: 0;
    font-size: .85rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
}

/* The site name is on the copyright line on a phone and again from 64em, and
   hidden in the band between. That is not indecision: from 48em the footer row
   turns horizontal, and across a tablet "© 2026 Maria Gordon Illustration"
   and the legal links share one line and collide. In the phone's centred
   column there is a whole line for it. */
.mg-footer__line-name {
    display: inline;
}

/* "My Account" on its own line under the other two — three uppercase links
   with middle dots between them do not fit one phone line, and what came back
   was a two-line block broken wherever the words happened to run out.
   Breaking it deliberately is the difference between a rag and a shape.
   The dot before it goes with it; a separator at the end of a line is
   pointing at nothing. */
@media (max-width: 47.9375em) {
    .mg-footer__legal li:last-child {
        display: block;
        margin-top: .55rem;
    }

    .mg-footer__legal li:nth-last-child(2)::after {
        content: none;
    }

    .mg-footer__line {
        font-size: .78rem;
    }
}

.mg-signup {
    max-width: 34rem;
    margin: 0 auto 2.5rem;
    padding: 2.5rem 1rem 0;
    border-top: 1px solid var(--mg-line);
    text-align: center;
}

.mg-signup--inline {
    margin: 0 auto 1.5rem;
    padding: 0;
    border-top: none;
}

/* Homepage: the inline signup gets the same standoff as the features rule,
   so the form isn't crowded by the copy that introduces it. */
.mg-home__intro .mg-signup--inline {
    padding-top: 4rem;
}

.mg-signup__heading {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: .01em;
}

.mg-signup__blurb {
    margin: .5rem 0 1.5rem;
    color: var(--mg-ink-soft);
}

.mg-signup__row {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

@media (min-width: 30em) {
    .mg-signup__row {
        flex-direction: row;
    }

    .mg-signup__field {
        flex: 1 1 auto;
    }
}

.mg-signup__field {
    min-width: 0;
    padding: .7rem .85rem;
    background: var(--mg-paper);
    border: 1px solid var(--mg-line);
    color: var(--mg-ink);
    font-family: var(--mg-serif);
    font-size: 1rem;
}

.mg-signup__field:focus-visible {
    outline: none;
    border-color: var(--mg-ink);
}

.mg-signup__submit {
    padding: .7rem 1.4rem;
    background: var(--mg-ink);
    border: 1px solid var(--mg-ink);
    color: var(--mg-paper);
    font-family: var(--mg-serif);
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    cursor: pointer;
}

@media (hover: hover) {
    .mg-signup__submit:hover {
        background: var(--mg-paper);
        color: var(--mg-ink);
    }
}

.mg-subscribe-button {
    display: inline-block;
    padding: .7rem 1.4rem;
    background: var(--mg-ink);
    border: 1px solid var(--mg-ink);
    color: var(--mg-paper);
    font-family: var(--mg-serif);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    cursor: pointer;
}

@media (hover: hover) {
    .mg-subscribe-button:hover {
        background: var(--mg-paper);
        color: var(--mg-ink);
    }
}

.mg-signup__inner .mg-subscribe-button {
    display: inline-block;
}

.mg-signup__form-wrap--desktop-only {
    display: none;
}

@media (min-width: 64em) {
    .mg-signup__inner .mg-subscribe-button {
        display: none;
    }

    .mg-signup__form-wrap--desktop-only {
        display: block;
    }
}

.mg-signup__frame {
    display: none;
}

/* Explicit: .mg-modal's own display:flex outranks the UA [hidden] rule. */
.mg-modal[hidden] {
    display: none;
}

.mg-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.mg-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.mg-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 30rem;
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    padding: 2.5rem 1.75rem;
    background: var(--mg-paper);
    border: 1px solid var(--mg-line);
    text-align: center;
}

.mg-modal__close {
    position: absolute;
    top: .5rem;
    right: .75rem;
    padding: .5rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mg-ink-soft);
    cursor: pointer;
}

.mg-modal__close:hover,
.mg-modal__close:focus-visible {
    color: var(--mg-ink);
}

.mg-modal-open {
    overflow: hidden;
}

.mg-footer-note {
    max-width: 34rem;
    margin: 0 auto 2.5rem;
    padding: 2.5rem 1.25rem 0;
    border-top: 1px solid var(--mg-line);
    text-align: center;
}

.mg-footer-note__heading {
    margin: 0 0 .75rem;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: .01em;
}

.mg-footer-note__text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--mg-ink-soft);
}

.mg-footer-note__cta {
    display: inline-block;
    margin-top: .5rem;
    color: var(--mg-ink);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.mg-footer-note__social {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    color: var(--mg-ink);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.mg-footer-note__social-icon {
    width: 14px;
    height: 14px;
}

.mg-footer-note__button {
    display: inline-block;
    margin-top: 1.75rem;
    padding: .7rem 1.4rem;
    background: var(--mg-ink);
    border: 1px solid var(--mg-ink);
    color: var(--mg-paper);
    font-family: var(--mg-serif);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-decoration: none;
}

@media (hover: hover) {
    .mg-footer-note__button:hover {
        background: var(--mg-paper);
        color: var(--mg-ink);
    }
}

.mg-footer-columns {
    background: var(--mg-field);
}

.mg-footer-columns .mg-signup,
.mg-footer-columns .mg-footer-note {
    margin: 0 auto;
    padding-bottom: 2.5rem;
}

@media (min-width: 48em) {
    /* Back to the centred stack: mark above, menu below. Undoing the phone's
       flex row is unavoidable — the two are different arrangements of one
       markup tree, not one arrangement at two sizes. */
    .mg-header {
        display: block;
        padding: 2.75rem 2rem 1.75rem;
        text-align: center;
    }

    .mg-header__logo img {
        height: 148px;
    }

    .mg-nav {
        margin-top: 2.5rem;
    }

    .mg-nav__toggle,
    .mg-header.is-enhanced .mg-nav__bar {
        display: none;
    }

    .mg-search-toggle {
        display: inline-flex;
    }

    .mg-header.is-enhanced .mg-nav {
        margin-top: 2.5rem;
        gap: 0 1.75rem;
    }

    .mg-header.is-enhanced .mg-nav .mg-nav__panel {
        margin-top: 0;
    }

    .mg-header.is-enhanced .mg-search-toggle {
        order: 1;
        width: 1.75rem;
        height: 1.75rem;
    }

    .mg-search-toggle .mg-search__icon {
        width: 1.15rem;
        height: 1.15rem;
    }

    .mg-search__body {
        align-items: center;
        padding: 0 2rem 8vh;
    }

    .mg-search__field {
        font-size: 2.4rem;
    }

    .mg-header.is-enhanced .mg-nav__panel,
    .mg-header.is-enhanced.is-open .mg-nav__panel {
        position: static;
        z-index: auto;
        display: block;
        margin-top: 1.25rem;
        transform: none;
        visibility: visible;
        transition: none;
    }

    .mg-header.is-enhanced .mg-nav__scroll {
        overflow: visible;
        padding: 0;
    }

    .mg-header.is-enhanced .mg-nav__list > li.menu-item-has-children > a::after {
        content: none;
    }

    .mg-nav__back,
    .mg-nav__viewall {
        display: none;
    }

    .mg-nav__list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0 2.25rem;
    }

    .mg-nav__list > li {
        position: relative;
    }

    .mg-nav__list > li > a {
        padding: .5rem 0;
        font-size: .9rem;
        text-transform: uppercase;
        letter-spacing: .18em;
        text-indent: .18em;
    }

    .mg-header.is-enhanced .mg-nav__list .sub-menu,
    .mg-nav__list .sub-menu {
        position: absolute;
        top: 100%;
        right: auto;
        bottom: auto;
        left: 50%;
        z-index: 20;
        min-width: 12rem;
        padding: .75rem 0;
        background: var(--mg-paper);
        border: 1px solid var(--mg-line);
        overflow: visible;
        transform: translateX(-50%) translateY(.4rem);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }

    .mg-header.is-enhanced .mg-nav__list > li:hover > .sub-menu,
    .mg-header.is-enhanced .mg-nav__list > li:focus-within > .sub-menu,
    .mg-nav__list > li:hover > .sub-menu,
    .mg-nav__list > li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

    .mg-nav__list .sub-menu a {
        padding: .45rem 1.25rem;
        font-size: .95rem;
        text-align: left;
        white-space: nowrap;
    }

    .mg-nav__list .menu-ig-mobile {
        display: none;
    }

    .mg-nav__list .menu-ig-desktop {
        display: block;
    }

    .mg-nav__list .menu-ig-desktop > a {
        width: 1.15rem;
        height: 1.15rem;
        margin: 0;
    }

    .mg-main {
        padding: 2.5rem 2rem;
    }

    .mg-field {
        min-height: 60vh;
    }

    .mg-footer-columns {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    /* The divider between columns, inset from the row's actual top/bottom
       edges rather than a border on .mg-footer-note's own box: a border
       runs the full height of the box it's drawn on, which — combined with
       align-items: start meaning that box is only as tall as its own
       content — made the line's length depend on which column's copy was
       longer, and always touch the top exactly where the column's own text
       padding began (so raising that padding for legibility never moved
       the line). Positioned against .mg-footer-columns itself instead, so
       its length is independent of both columns' content and padding. */
    .mg-footer-columns::before {
        content: '';
        position: absolute;
        top: 2rem;
        bottom: 2rem;
        left: 50%;
        width: 1px;
        background: var(--mg-line);
    }

    .mg-footer-columns--single::before {
        display: none;
    }

    .mg-footer-columns .mg-signup,
    .mg-footer-columns .mg-footer-note {
        max-width: none;
        margin: 0;
        padding: 2.5rem 2rem;
        border-top: none;
    }

    .mg-footer-columns .mg-signup__inner,
    .mg-footer-columns .mg-footer-note__inner {
        max-width: 26rem;
        margin: 0 auto;
    }

    .mg-footer-columns .mg-footer-note:only-child {
        grid-column: 1 / -1;
    }

    .mg-footer__banner {
        height: auto;
        aspect-ratio: 1700 / 300;
        background-size: 100% 100%;
    }

    .mg-footer__row {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: 1.5rem;
        padding: 1.5rem 2rem;
    }

    .mg-footer__legal {
        text-align: left;
    }

    .mg-footer__line {
        text-align: right;
    }

    /* See the note on the base rule: this band is the one place the name does
       not fit beside the links. */
    .mg-footer__line-name {
        display: none;
    }
}

@media (min-width: 64em) {
    .mg-nav__list {
        gap: 0 2.75rem;
    }

    .mg-main {
        padding: 3.5rem 2.5rem;
    }

    .mg-footer__row {
        padding: 1.5rem 2.5rem;
    }

    .mg-footer__line-name {
        display: inline;
    }
}

.mg-entry,
.mg-home__intro {
    max-width: 46rem;
    margin: 0 auto 3.5rem;
}

/* The journal index had no heading at all — every other archive on the site
   names itself. Same shape as `.mg-press__header` and the rest, at the 46rem
   the list below it uses rather than their wider measure. */
.mg-blog__header {
    max-width: 46rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.mg-blog__title {
    margin: 0;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .01em;
}

@media (max-width: 47.9375em) {
    .mg-blog__header {
        text-align: left;
    }

    .mg-blog__title {
        font-size: clamp(2rem, 12vw, 3rem);
        font-weight: 600;
    }
}

.mg-entry__title {
    margin: 0 0 1.5rem;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .01em;
    text-align: center;
}

/* Phone: ranged left and a weight heavier. A centred line of light Cormorant
   is a poster, and it works at 2.4rem with a page around it; at the 1.6rem
   floor, in a column the width of a hand, it reads as a caption for the thing
   underneath rather than as the name of the page. Left-ranged it starts where
   every other line of the page starts, and 600 is the heaviest weight loaded.

   **Every page heading on the site wears this**, not just this one: the
   journal index above, and Shop / Press / Commissions further down the file,
   with Exhibitions in css/exhibitions.css. All six share one base shape —
   clamp(1.6rem, 6vw, 2.4rem) at 400 — and one phone shape. Change either and
   change all of them; that is what "the page title" means here. */
@media (max-width: 47.9375em) {
    .mg-entry__title {
        /* Sized to sit level with the 48px mark in the header above it — the
           two are the only large things on a phone screen and they were two
           different sizes. The base clamp bottomed out at its 1.6rem floor on
           every phone, because 6vw of 375px is smaller than that; 12vw is the
           number that actually tracks the viewport at this width. */
        font-size: clamp(2rem, 12vw, 3rem);
        font-weight: 600;
        text-align: left;
    }
}

.mg-entry__byline {
    margin: -1rem 0 1.5rem;
    font-family: var(--mg-fell);
    font-style: italic;
    font-size: .9rem;
    color: var(--mg-ink-soft);
    text-align: center;
}

@media (max-width: 47.9375em) {
    .mg-entry__byline {
        text-align: left;
    }
}

.mg-entry--list .mg-entry__title {
    margin-bottom: .4rem;
    font-size: clamp(1.4rem, 4vw, 1.9rem);
    text-align: left;
}

.mg-entry--list .mg-entry__title a {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .mg-entry--list .mg-entry__title a:hover {
        font-style: italic;
    }
}

.mg-entry__meta {
    margin: 0 0 1.75rem;
    font-family: var(--mg-fell);
    font-style: italic;
    color: var(--mg-ink-soft);
}

.mg-entry--list + .mg-entry--list {
    padding-top: 2.5rem;
    border-top: 1px solid var(--mg-line);
}

.mg-entry__image {
    display: block;
    margin: 0 0 2rem;
}

.mg-entry__image img {
    display: block;
    width: 100%;
}

.mg-entry__content > *:first-child {
    margin-top: 0;
}

.mg-entry__content > *:last-child {
    margin-bottom: 0;
}

.mg-entry__more {
    margin: 1.25rem 0 0;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .16em;
}

.mg-entry__more a {
    text-decoration: none;
    border-bottom: 1px solid var(--mg-line);
}

.mg-contact {
    max-width: 26rem;
    margin: 2.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--mg-line);
    text-align: center;
}

/* No rule above the social links on a phone. On a wide page it separates two
   columns' worth of content from the block that follows; on a phone
   everything is already one column and the line only cut a short page in
   half. The padding it was holding open becomes margin, so the spacing is
   unchanged. */
@media (max-width: 47.9375em) {
    .mg-contact {
        margin-top: 3rem;
        padding-top: 0;
        border-top: 0;
    }
}

.mg-contact__socials {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mg-contact__social {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mg-fell);
    font-style: italic;
    font-size: clamp(1.2rem, 4vw, 1.5rem);
    color: var(--mg-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--mg-line);
}

.mg-contact__social-icon {
    width: .9em;
    height: .9em;
    flex: none;
}

.mg-contact__or {
    margin: 1.25rem 0 0;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mg-ink-soft);
}

.mg-contact-form {
    max-width: 26rem;
    margin: 2.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--mg-line);
}

.mg-contact + .mg-contact-form {
    margin-top: 2rem;
    padding-top: 0;
    border-top: 0;
}

.mg-contact-form__heading {
    margin: 0 0 1.5rem;
    font-size: .8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--mg-ink-soft);
    text-align: center;
}

.mg-contact-form__notice {
    margin: 0 0 1.5rem;
    padding: .85rem 1rem;
    border: 1px solid var(--mg-line);
    font-size: .9rem;
    line-height: 1.5;
}

.mg-contact-form__notice--error {
    border-color: var(--mg-ink);
}

.mg-contact-form__field {
    margin: 0 0 1.25rem;
}

.mg-contact-form__field label {
    display: block;
    margin-bottom: .35rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--mg-ink-soft);
}

.mg-contact-form__optional {
    text-transform: none;
    letter-spacing: normal;
}

.mg-contact-form__field input,
.mg-contact-form__field textarea {
    display: block;
    width: 100%;
    padding: .75rem 1rem;
    font-family: var(--mg-serif);
    font-size: 1rem;
    color: var(--mg-ink);
    background: var(--mg-paper);
    border: 1px solid var(--mg-line);
}

.mg-contact-form__field textarea {
    resize: vertical;
}

.mg-contact-form__honeypot,
.mg-commission-cta__honeypot {
    position: absolute;
    left: -5000px;
}

.mg-contact-form__actions {
    margin: 0;
    text-align: center;
}

.mg-contact-form__actions button {
    display: inline-block;
    padding: .75rem 1.5rem;
    border: 1px solid var(--mg-ink);
    background: none;
    color: var(--mg-ink);
    font-family: var(--mg-serif);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-indent: .16em;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}

.mg-contact-form__actions button:hover,
.mg-contact-form__actions button:focus-visible {
    background-color: var(--mg-ink);
    color: var(--mg-paper);
}

/* The frame around the Subscribe page's form. The form inside it is
   `mg_render_subscribe_form()`'s — the same one the footer strip and the modal
   use — so `.mg-subscribe__label`, `__field` and `__submit` are gone with the
   hand-built copy they styled. `.mg-subscribe__honeypot` below stays: the
   shared field renderer still prints it. */
.mg-subscribe__form {
    max-width: 26rem;
    margin: 2.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--mg-line);
    text-align: center;
}

.mg-subscribe__honeypot {
    position: absolute;
    left: -5000px;
}

.mg-main .navigation.pagination {
    max-width: 46rem;
    margin: 0 auto;
    padding-top: 2rem;
    border-top: 1px solid var(--mg-line);
    text-align: center;
}

.mg-main .navigation.pagination .page-numbers {
    display: inline-block;
    padding: .35rem .7rem;
    text-decoration: none;
    color: var(--mg-ink-soft);
}

.mg-main .navigation.pagination .page-numbers.current {
    color: var(--mg-ink);
    font-style: italic;
}

.mg-statement {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
    font-size: 1.0625rem;
    color: var(--mg-ink-soft);
}

.mg-statement h2 {
    margin: 0 0 1rem;
    font-size: .82rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mg-ink-soft);
}

.mg-statement p {
    margin: 0 0 .9rem;
}

.mg-statement p:last-child {
    margin-bottom: 0;
}

.mg-statement--tab {
    margin-top: 0;
    padding-top: 0;
}

/* Standing on its own above the product meta, the statement had nothing to
   tell it apart from the description it follows — same measure, same column,
   one blank line between. A hairline box says "this is a different kind of
   thing" without adding another rule across the page. Only the inline variant:
   the tab already has a panel around it, and the archive one closes a page
   rather than sitting inside a column. */
.mg-statement--inline {
    padding: 1.25rem 1.35rem 1.35rem;
    /* Dashed, like the archive statement's own top rule: this is an aside
       about how the work reaches you, not a panel the page is built from, and
       a solid box claimed more structure than that. */
    border: 1px dashed var(--mg-line);
    border-radius: 8px;
}

.mg-statement--archive {
    max-width: 46rem;
    margin: 1rem auto 0;
    padding-bottom: .5rem;
    border-top: 1px dashed var(--mg-line);
}

.woocommerce-pagination[hidden] {
    display: none !important;
}

.infinite-scroll-sentinel {
    height: 1px;
}

.mg-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    height: 3.5rem;
    margin: 1rem 0 2rem;
    opacity: 0;
    transition: opacity .3s ease;
}

.mg-loading.is-active {
    opacity: 1;
}

.mg-loading span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mg-ink-soft);
}

.mg-loading.is-active span {
    animation: mg-breathe 1.4s ease-in-out infinite;
}

.mg-loading.is-active span:nth-child(2) { animation-delay: .18s; }
.mg-loading.is-active span:nth-child(3) { animation-delay: .36s; }

@keyframes mg-breathe {
    0%, 80%, 100% { opacity: .25; transform: scale(.8); }
    40%           { opacity: 1;   transform: scale(1); }
}

.woocommerce ul.products li.product.mg-item-entering {
    opacity: 0;
    transform: translateY(12px);
}

.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.woocommerce div.product form.cart div.quantity {
    margin: 0;
}

.woocommerce div.product form.variations_form.cart {
    display: block;
}

.woocommerce ul.products.mg-masonry-grid {
    position: relative;
    opacity: 0;
    transition: opacity .25s ease;
}

.woocommerce ul.products.mg-masonry-grid.mg-masonry-ready {
    opacity: 1;
}

.woocommerce ul.products.mg-masonry-grid {
    --mg-cols: 2;
    --mg-gutter: 3%;
}

.woocommerce ul.products.mg-masonry-grid .grid-sizer,
.woocommerce ul.products.mg-masonry-grid li.product {
    width: calc((100% - (var(--mg-gutter) * (var(--mg-cols) - 1))) / var(--mg-cols)) !important;
}

.woocommerce ul.products.mg-masonry-grid .gutter-sizer {
    width: var(--mg-gutter);
}

.woocommerce ul.products.mg-masonry-grid li.product {
    margin-right: 0 !important;
    float: none !important;
    transition: transform .3s ease, opacity .3s ease;
}

/* Two up on the phone, but a category tile is not a product tile: it is a
   wide 2/1 banner (see the rules further down) and stays the full width of
   the row. Masonry spans it across both columns of its own accord.
   `!important` only because the width rule above already carries one to beat
   WooCommerce's own — this is the same declaration at a higher count, not a
   specificity dodge. */
@media (max-width: 47.9375em) {
    .woocommerce ul.products.mg-masonry-grid li.product.product-category {
        width: 100% !important;
    }
}

@media (min-width: 48em) {
    .woocommerce ul.products.mg-masonry-grid {
        --mg-gutter: 3%;
        --mg-cols: 3;
    }

    .woocommerce ul.products.mg-masonry-grid.columns-1 { --mg-cols: 1; }
    .woocommerce ul.products.mg-masonry-grid.columns-2 { --mg-cols: 2; }
    .woocommerce ul.products.mg-masonry-grid.columns-3 { --mg-cols: 3; }
    .woocommerce ul.products.mg-masonry-grid.columns-4 { --mg-cols: 4; }
    .woocommerce ul.products.mg-masonry-grid.columns-5 { --mg-cols: 5; }
    .woocommerce ul.products.mg-masonry-grid.columns-6 { --mg-cols: 6; }
}

.woocommerce ul.products li.product.product-category a {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.woocommerce ul.products li.product.product-category img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0;
    transition: transform .3s ease;
}

.woocommerce ul.products li.product.product-category a:hover img {
    transform: scale(1.03);
}

.woocommerce ul.products li.product.product-category a::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 55%),
        rgba(0, 0, 0, .12);
    pointer-events: none;
    transition: opacity .3s ease;
}

.woocommerce ul.products li.product.product-category .woocommerce-loop-category__title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    margin: 0;
    padding: 1.1rem 1rem 1.25rem;
    color: #fff;
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-align: center;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

@media (max-width: 47.9375em) {
    .woocommerce ul.products li.product.product-category img {
        aspect-ratio: 2 / 1;
    }

    .woocommerce ul.products li.product.product-category a::after {
        background: rgba(0, 0, 0, .22);
    }

    .woocommerce ul.products li.product.product-category .woocommerce-loop-category__title {
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        padding: 1rem;
    }
}

.woocommerce ul.products li.product.product-category {
    margin-bottom: 3.5rem;
}

@media (max-width: 47.9375em) {
    .woocommerce ul.products li.product.product-category {
        margin-bottom: 1.5rem;
    }
}

.woocommerce ul.products li.product.product-category .count {
    display: none;
}

body.tax-product_cat.term-16 ul.products li.product .price {
    display: none !important;
}

.mg-category-grid {
    display: grid;
    grid-template-columns: repeat(var(--mg-cat-cols, 3), 1fr);
    gap: 24px;
    margin: 0 0 40px;
}

.mg-category-grid__item {
    display: block;
    text-decoration: none;
    color: inherit;
}

.mg-category-grid__image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.mg-category-grid__item:hover .mg-category-grid__image {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
}

.mg-category-grid__name {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 18px;
    letter-spacing: .02em;
}

@media (max-width: 767px) {
    .mg-category-grid {
        grid-template-columns: 1fr;
    }
}

.mg-events {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.mg-event {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: start;
}

.mg-event:not(:last-child) {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.mg-event--past .mg-event__image img {
    filter: saturate(.85);
}

.mg-event--past .mg-event__dates {
    color: #777;
}

.mg-event__image {
    display: block;
    overflow: hidden;
    border-radius: 6px;
}

.mg-event__image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .3s ease;
}

.mg-event__image:hover img {
    transform: scale(1.03);
}

.mg-event__title {
    margin: 0 0 6px;
    font-size: 24px;
    line-height: 1.25;
}

.mg-event__dates {
    margin: 0 0 4px;
    font-weight: 600;
    letter-spacing: .02em;
}

.mg-event__venue {
    margin: 0 0 12px;
    color: #666;
}

.mg-event__excerpt {
    margin-bottom: 12px;
}

.mg-event__link {
    margin: 0;
}

.mg-events-empty {
    color: #666;
    font-style: italic;
}

@media (max-width: 767px) {
    .mg-event {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mg-event__title {
        font-size: 20px;
    }
}

.mg-press {
    max-width: 72rem;
    margin-inline: auto;
}

.mg-press__header {
    margin: 0 0 2.5rem;
    text-align: center;
}

.mg-press__title {
    margin: 0;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .01em;
}

.mg-press-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.25rem;
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}

@media (min-width: 48em) {
    .mg-press-grid {
        gap: 3rem 2rem;
    }
}

@media (min-width: 64em) {
    .mg-press-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 3.5rem 2.25rem;
    }
}

.mg-press-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

.mg-press-item__frame {
    display: block;
    margin-bottom: 1.1rem;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--mg-field);
    border: 1px solid var(--mg-line);
}

.mg-press-item__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

@media (hover: hover) {
    .mg-press-item:hover .mg-press-item__image {
        transform: scale(1.03);
    }

    .mg-press-item:hover .mg-press-item__title {
        font-style: italic;
    }
}

.mg-press-item:focus-visible {
    outline: 2px solid var(--mg-ink);
    outline-offset: 4px;
}

.mg-press-item__title {
    display: block;
    font-size: 1.05rem;
    line-height: 1.35;
    letter-spacing: .01em;
}

.mg-press-item__date {
    display: block;
    margin-top: .3rem;
    font-family: var(--mg-fell);
    font-style: italic;
    font-size: .85rem;
    color: var(--mg-ink-soft);
}

.mg-press .navigation.pagination {
    max-width: none;
}

.mg-press-single__frame {
    padding: 1.75rem 1.75rem 1.5rem;
    border: 1px solid var(--mg-line);
    border-radius: 12px;
}

.mg-press-single__permission {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--mg-line);
    font-family: var(--mg-fell);
    font-style: italic;
    font-size: .9rem;
    color: var(--mg-ink-soft);
}

.mg-press-single__source {
    margin: 1.25rem 0 0;
    font-family: var(--mg-fell);
    font-style: italic;
    font-size: .9rem;
    color: var(--mg-ink-soft);
}

.mg-press-single__source-link {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    color: var(--mg-ink);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.mg-press-single__source-icon {
    width: .85em;
    height: .85em;
    flex: none;
}

.mg-commissions {
    max-width: 72rem;
    margin-inline: auto;
}

.mg-commissions__header {
    margin: 0 0 2.5rem;
    text-align: center;
}

.mg-commissions__title {
    margin: 0;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .01em;
}

.mg-commissions__intro {
    max-width: 46rem;
    margin: 0 auto 3.5rem;
}

.mg-commissions__heading {
    margin: 0 0 1.75rem;
    font-size: .85rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--mg-ink-soft);
    text-align: center;
}

.mg-commissions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 0 0 2.5rem;
}

@media (min-width: 48em) {
    .mg-commissions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 64em) {
    .mg-commissions-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.75rem;
    }
}

.mg-commission-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

.mg-commission-item__frame {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--mg-ink);
}

.mg-commission-item__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.mg-commission-item__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 55%),
        rgba(0, 0, 0, .12);
    pointer-events: none;
}

.mg-commission-item__title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 1.1rem .85rem 1.25rem;
    color: #fff;
    font-size: .8rem;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-align: center;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

@media (min-width: 48em) {
    .mg-commission-item__title {
        font-size: .95rem;
        padding: 1.1rem 1rem 1.25rem;
    }
}

@media (hover: hover) {
    .mg-commission-item:hover .mg-commission-item__image {
        transform: scale(1.03);
    }
}

.mg-commission-item:focus-visible {
    outline: 2px solid var(--mg-ink);
    outline-offset: 4px;
}

.mg-commissions .navigation.pagination {
    max-width: none;
}

.mg-commission-cta {
    margin: 4.5rem 0 0;
    background: var(--mg-field);
    border: 1px solid rgba(38, 38, 42, .22);
    border-radius: 8px;
    color: var(--mg-ink);
}

.mg-commission-cta__inner {
    max-width: 40rem;
    margin-inline: auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

@media (min-width: 48em) {
    .mg-commission-cta__inner {
        padding: 4rem 2.5rem;
    }
}

.mg-commission-cta__title {
    margin: 0 0 1rem;
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .01em;
}

.mg-commission-cta__copy {
    margin: 0 auto 2rem;
    max-width: 34rem;
    color: var(--mg-ink);
}

.mg-commission-cta__form {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    text-align: left;
}

.mg-commission-cta__row {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

@media (min-width: 34em) {
    .mg-commission-cta__row {
        flex-direction: row;
    }

    .mg-commission-cta__row .mg-commission-cta__field {
        flex: 1 1 0;
    }
}

.mg-commission-cta__field {
    min-width: 0;
    padding: .75rem .9rem;
    background: var(--mg-paper);
    border: 1px solid var(--mg-line);
    color: var(--mg-ink);
    font-family: var(--mg-serif);
    font-size: 1rem;
}

.mg-commission-cta__field--brief {
    resize: vertical;
}

.mg-commission-cta__field::placeholder {
    color: var(--mg-ink-soft);
    opacity: 1;
}

.mg-commission-cta__field:focus-visible {
    outline: none;
    border-color: var(--mg-ink);
}

.mg-commission-cta__submit {
    align-self: flex-start;
    margin-top: .5rem;
    padding: .75rem 1.6rem;
    background: var(--mg-paper);
    border: 1px solid var(--mg-ink);
    color: var(--mg-ink);
    font-family: var(--mg-serif);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-indent: .16em;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

@media (hover: hover) {
    .mg-commission-cta__submit:hover {
        background: var(--mg-ink);
        color: var(--mg-paper);
    }
}

.mg-commission-cta__notice {
    margin: 0 0 1.25rem;
    padding: .85rem 1rem;
    background: var(--mg-paper);
    border: 1px solid var(--mg-line);
    font-size: .9rem;
    line-height: 1.5;
    text-align: left;
}

.mg-commission-cta__notice--error {
    border-color: var(--mg-ink);
}

.mg-commission-cta__notice a {
    color: inherit;
}

.mg-entry__content > .mg-commission-cta {
    margin-top: 3.5rem;
}

/* Previous / next — journal posts and press singles.
   Two columns from 34em; a missing neighbour leaves its side empty rather than
   letting the survivor drift to the middle, so "Next" always reads from the
   right whether or not there is a "Previous". */
/* The block that closes a single post — see inc/post-nav.php.
   68rem, the pre-footer row's measure and not the article's 46rem, which is
   the whole reason it is printed by the template rather than appended to
   `the_content`: the two blocks stack, and a narrow one above a wide one read
   as a mistake rather than as a hierarchy.

   One hairline, at the top, marking where the piece ends and the furniture
   begins. There used to be three — a border above, a border below, and a 1px
   `gap` over a `--mg-line` background drawing a divider between the pair. That
   last trick also meant a post with only one neighbour showed a bare grey
   rectangle where the missing link would have been, which is what it looked
   like: a bug. Cells have no background now, so an empty one is empty. */
.mg-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1.5rem 1.5rem;
    max-width: 68rem;
    margin: 0 auto;
    padding-top: 2.25rem;
    border-top: 1px solid var(--mg-line);
}

.mg-post-nav__link {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    color: var(--mg-ink);
    text-decoration: none;
}

/* Column 2 even when it is the only one there, so "next" is always on the
   right — which is the only thing making it read as forward. */
.mg-post-nav__link--next {
    grid-column: 2;
    text-align: right;
}

.mg-post-nav__label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-indent: .16em;
    color: var(--mg-ink-soft);
}

.mg-post-nav__link--prev .mg-post-nav__label::before {
    content: '\2190\00a0\00a0';
}

.mg-post-nav__link--next .mg-post-nav__label::after {
    content: '\00a0\00a0\2192';
}

.mg-post-nav__title {
    font-family: var(--mg-serif);
    font-size: 1.15rem;
    line-height: 1.25;
}

@media (hover: hover) {
    .mg-post-nav__link:hover .mg-post-nav__title {
        text-decoration: underline;
        text-underline-offset: .18em;
    }
}

.mg-post-nav__link:focus-visible {
    outline: 2px solid var(--mg-ink);
    outline-offset: 4px;
}

/* The way back out — the last thing on the page, under the tile row rather
   than inside the nav, so it is a sibling of both and carries the same 68rem.
   This is now the only one on the site: an exhibition used to have its own
   `.mg-exhibit__return-link`, and both that markup and its rules are gone —
   four post types, one control, one place it is styled. */
.mg-post-return {
    max-width: 68rem;
    margin: 3rem auto 2rem;
    text-align: center;
}

.mg-post-return__link {
    color: var(--mg-ink-soft);
    font-family: var(--mg-fell);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    text-indent: .18em;
    text-decoration: none;
    border-bottom: 1px solid var(--mg-line);
    padding-bottom: 2px;
    transition: color .15s ease, border-color .15s ease;
}

.mg-post-return__link:hover {
    color: var(--mg-ink);
    border-color: var(--mg-ink);
}

/* Phone: two arrows, nothing else. Two titles at 1.15rem serif under every
   article was most of a screenful spent on a control the reader has not asked
   for yet; the arrow carries the same meaning at a tenth the height. The word
   goes, the label's own arrow pseudo-element stays — re-declared here without
   its trailing nbsp padding, which only existed to hold the arrow off the word
   that is now hidden. */
@media (max-width: 47.9375em) {
    .mg-post-nav {
        gap: 1rem;
        padding-top: 1.75rem;
    }

    .mg-post-nav__word,
    .mg-post-nav__title {
        display: none;
    }

    .mg-post-nav__label {
        font-size: 1.15rem;
        letter-spacing: 0;
        text-indent: 0;
        color: var(--mg-ink);
    }

    .mg-post-nav__link--prev .mg-post-nav__label::before {
        content: '\2190';
    }

    .mg-post-nav__link--next .mg-post-nav__label::after {
        content: '\2192';
    }
}

.mg-continue-shopping {
    display: inline-block;
    margin-top: 100px;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
}

.mg-continue-shopping:hover {
    background-color: #005a87;
}

.mmp-original-panel {
    margin: 0 0 1.75rem;
    padding: 1.25rem;
    border: 1px solid var(--mg-line);
    border-radius: 8px;
    background: var(--mg-paper);
}

.mmp-original-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 0 0 .75rem;
}

.mmp-original-panel__title {
    margin: 0;
}

.mmp-original-panel p {
    margin: 0 0 .75rem;
}

.woocommerce div.product .mmp-original-panel form.cart {
    margin: 0;
}

.woocommerce div.product .mmp-original-panel p.price,
.woocommerce div.product .mmp-original-panel form.cart div.quantity {
    display: none;
}

.woocommerce div.product .mmp-original-panel form.cart .button {
    display: block;
    flex: 1 1 100%;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.mmp-buy-original-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: .8rem 1.6rem;
    border: 1px solid var(--mg-ink);
    border-radius: 0;
    background-color: var(--mg-ink);
    color: var(--mg-paper);
    font-family: var(--mg-serif);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-indent: .16em;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}

.mmp-buy-original-button:hover,
.mmp-buy-original-button:focus-visible {
    background-color: transparent;
    color: var(--mg-ink);
}

.mg-exhibit-hold {
    margin: 0 0 1.75rem;
    padding: 1.25rem;
    border: 1px solid var(--mg-line);
    border-radius: 8px;
    background: var(--mg-paper);
}

.mg-exhibit-hold__message {
    margin: 0 0 .75rem;
}

.single-product .woocommerce-notices-wrapper {
    margin: 0 !important;
}

.single-product .maria_original_sold_icon {
    position: absolute;
    z-index: 999;
    right: 30px;
    margin-top: 15px;
    display: block;
}

#scarves-featured-image .wp-post-image {
    display: block;
    margin: 0 auto;
    width: auto !important;
    max-height: 50vh !important;
}

.single-product .tm-extra-product-options-totals .tm-options-totals {
    display: none !important;
}

.single-product .tm-extra-product-options-totals .tm-final-totals {
    font-size: 1.4em;
    text-align: center !important;
}

.single-product div.product form.cart .button {
    display: block;
}

.single-product .buy-the-scarf form.cart .button {
    display: inline-block !important;
    margin: 0 !important;
}

.woocommerce-checkout #add_payment_method #payment ul.payment_methods,
.woocommerce-cart #payment ul.payment_methods,
.woocommerce-checkout #payment ul.payment_methods {
    display: block !important;
}

.woocommerce-checkout .ppc-button-wrapper {
    max-width: 600px !important;
    margin: 0 auto !important;
    padding-top: 30px;
}

.mg-shop {
    max-width: 72rem;
    margin-inline: auto;
}

body.woocommerce-account {
    background: var(--mg-deep);
    color: var(--mg-paper);
}

body.woocommerce-account .mg-header {
    background: var(--mg-deep);
    border-bottom-color: rgba(255, 255, 255, .18);
}

body.woocommerce-account .mg-header__logo img,
body.woocommerce-account .mg-nav__bar-logo img,
body.woocommerce-account .mg-search__logo img {
    filter: invert(1);
}

body.woocommerce-account .mg-nav__toggle {
    border-color: rgba(255, 255, 255, .28);
    color: var(--mg-paper);
}

body.woocommerce-account .mg-nav__close,
body.woocommerce-account .mg-search-toggle,
body.woocommerce-account .mg-search__close,
body.woocommerce-account .mg-search__field {
    color: var(--mg-paper);
}

body.woocommerce-account .mg-search {
    background: var(--mg-deep);
}

body.woocommerce-account .mg-search__bar,
body.woocommerce-account .mg-search__field {
    border-color: rgba(255, 255, 255, .18);
}

/* The field is a white box on every other page. Here the text on it is white,
   so the box has to go back to being the dark ground it is drawn on. */
body.woocommerce-account .mg-search__field {
    background: transparent;
}

body.woocommerce-account .mg-search__field:focus {
    border-color: var(--mg-paper);
}

body.woocommerce-account .mg-search__field::placeholder {
    color: var(--mg-grey-text);
}

body.woocommerce-account .mg-search__submit {
    background: var(--mg-paper);
    border-color: var(--mg-paper);
    color: var(--mg-deep);
}

body.woocommerce-account .mg-header.is-enhanced .mg-nav__panel,
body.woocommerce-account .mg-header.is-enhanced .mg-nav__bar,
body.woocommerce-account .mg-header.is-enhanced .mg-nav__list .sub-menu,
body.woocommerce-account .mg-nav__list .sub-menu {
    background: var(--mg-deep);
    border-color: rgba(255, 255, 255, .18);
}

body.woocommerce-account .mg-nav__list a:hover,
body.woocommerce-account .mg-nav__list a:focus-visible,
body.woocommerce-account .mg-nav__back button,
body.woocommerce-account .mg-nav__viewall a,
body.woocommerce-account .mg-header.is-enhanced .mg-nav__list > li.menu-item-has-children > a::after {
    color: var(--mg-grey-text);
}

body.woocommerce-account .mg-nav__viewall {
    border-bottom-color: rgba(255, 255, 255, .18);
}

body.woocommerce-account .mg-entry {
    max-width: 60rem;
    padding: 1rem 0 2rem;
}

@media (min-width: 48em) {
    body.woocommerce-account .mg-entry {
        padding: 1.5rem 0 3rem;
    }
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin: 0 0 2rem;
    padding: 0 0 1.5rem;
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

body.woocommerce-account .woocommerce-MyAccount-navigation a {
    display: inline-block;
    color: var(--mg-grey-text);
    text-decoration: none;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
    color: var(--mg-paper);
}

body.woocommerce-account .woocommerce-MyAccount-content a,
body.woocommerce-account .woocommerce-Address-title a {
    color: var(--mg-paper);
}

body.woocommerce-account address {
    color: var(--mg-grey-text);
    font-style: normal;
}

body.woocommerce-account form .form-row label,
body.woocommerce-account .woocommerce-MyAccount-content label {
    color: var(--mg-grey-text);
}

body.woocommerce-account form .input-text,
body.woocommerce-account form select,
body.woocommerce-account form textarea {
    min-width: 0;
    padding: .75rem .9rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .28);
    color: var(--mg-paper);
    font-family: var(--mg-serif);
    font-size: 1rem;
}

body.woocommerce-account form .input-text::placeholder {
    color: var(--mg-grey-dim);
    opacity: 1;
}

body.woocommerce-account form .input-text:focus-visible,
body.woocommerce-account form select:focus-visible,
body.woocommerce-account form textarea:focus-visible {
    outline: none;
    border-color: var(--mg-paper);
}

body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce input.button,
body.woocommerce-account a.button,
body.woocommerce-account button.button,
body.woocommerce-account input.button {
    background: var(--mg-paper);
    border-color: var(--mg-paper);
    color: var(--mg-ink);
}

@media (hover: hover) {
    body.woocommerce-account .woocommerce a.button:hover,
    body.woocommerce-account .woocommerce button.button:hover,
    body.woocommerce-account .woocommerce input.button:hover,
    body.woocommerce-account a.button:hover,
    body.woocommerce-account button.button:hover,
    body.woocommerce-account input.button:hover {
        background: transparent;
        color: var(--mg-paper);
    }
}

body.woocommerce-account table.woocommerce-orders-table,
body.woocommerce-account table.shop_table {
    color: var(--mg-paper);
}

body.woocommerce-account table.woocommerce-orders-table th,
body.woocommerce-account table.woocommerce-orders-table td,
body.woocommerce-account table.shop_table th,
body.woocommerce-account table.shop_table td {
    border-color: rgba(255, 255, 255, .15);
}

body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-info {
    background: rgba(255, 255, 255, .06);
    border: none;
    border-left: 3px solid var(--mg-paper);
    color: var(--mg-paper);
}

body.woocommerce-account .woocommerce-message a.button,
body.woocommerce-account .woocommerce-error a.button,
body.woocommerce-account .woocommerce-info a.button {
    background: var(--mg-paper);
    color: var(--mg-ink);
}

.mg-shop__header {
    margin: 0 0 2.5rem;
    text-align: center;
}

.mg-shop__title {
    margin: 0;
    font-size: clamp(1.6rem, 6vw, 2.4rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .01em;
}

/* Shop, Press and Commissions read the same way `.mg-entry__title` does on a
   phone: ranged left, one weight heavier, sized to the mark in the header.
   Set on the header rather than on the title, so the intro or description
   under it moves with it — a left-ranged heading over a centred paragraph is
   worse than either alone. Exhibitions is the fourth of these and lives in
   css/exhibitions.css, in that sheet's own phone block.

   Down here on purpose: all three `text-align: center` rules are one class
   deep and so is this, so source order is the only thing deciding, and the
   last of them is immediately above. */
@media (max-width: 47.9375em) {
    .mg-shop__header,
    .mg-press__header,
    .mg-commissions__header {
        text-align: left;
    }

    .mg-shop__title,
    .mg-press__title,
    .mg-commissions__title {
        font-size: clamp(2rem, 12vw, 3rem);
        font-weight: 600;
    }
}

.mg-shop__intro {
    max-width: 46rem;
    margin: 1.25rem auto 0;
    color: var(--mg-ink-soft);
}

.mg-shop__intro > :first-child {
    margin-top: 0;
}

.mg-shop__intro > :last-child {
    margin-bottom: 0;
}

.woocommerce .woocommerce-breadcrumb {
    margin: -.5rem 0 1.75rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--mg-ink-soft);
    text-align: left;
}

.woocommerce .woocommerce-breadcrumb a {
    text-decoration: none;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    float: none;
    margin: 0 0 1rem;
    text-align: center;
    font-size: .85rem;
    color: var(--mg-ink-soft);
}

.woocommerce .woocommerce-result-count {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .75rem;
}

.woocommerce .woocommerce-ordering {
    margin-bottom: 2.75rem;
}

.woocommerce ul.products {
    clear: both;
}

.woocommerce .woocommerce-ordering select {
    font-family: var(--mg-serif);
    font-size: .9rem;
    padding: .4rem .6rem;
    border: 1px solid var(--mg-line);
    background: var(--mg-paper);
    color: var(--mg-ink);
}

.woocommerce ul.products {
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce ul.products li.product {
    position: relative;
    margin-bottom: 2.75rem;
    text-align: center;
}

.woocommerce ul.products li.product a {
    text-decoration: none;
}

.woocommerce ul.products li.product img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 .9rem;
    /* Most of the work is photographed against white or near-white, and without
       this the picture bleeds into the page. Lighter than --mg-line: this has to
       stop the paper from running on, not draw a frame around the work. */
    border: 1px solid rgba(38, 38, 42, .06);
    transition: opacity .3s ease;
}

.woocommerce ul.products li.product a:hover img {
    opacity: .88;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0;
    padding: 0;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: .02em;
    color: var(--mg-ink);
}

/* The print's original has sold. Deliberately not the Sold badge MMP keeps off
   this archive — the print itself is still for sale. See inc/shop-archive.php. */
.mg-original-sold-dot {
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-left: .1rem;
    border-radius: 50%;
    background: var(--mg-red);
    /* Centred on the lowercase, not hung off the baseline. */
    vertical-align: middle;
    position: relative;
    top: -.06em;
}

.woocommerce ul.products li.product .price {
    display: block;
    margin-top: .3rem;
    font-size: .95rem;
    color: var(--mg-ink-soft);
}

.woocommerce ul.products li.product .price del {
    opacity: .6;
    margin-right: .4rem;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    display: none;
}

/* Two tiles to a row on the phone (--mg-cols: 2), so the label and the gap
   under it come down to match. Must stay below the rules it overrides: same
   class count, source order decides. */
@media (max-width: 47.9375em) {
    .woocommerce ul.products li.product {
        margin-bottom: 1.75rem;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: .92rem;
    }

    .woocommerce ul.products li.product .price {
        font-size: .85rem;
    }
}

.woocommerce ul.products li.product.mg-sold-item img {
    filter: grayscale(100%);
    opacity: .7;
    transition: filter .3s ease, opacity .3s ease;
}

.mg-sold-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: inline-block;
    padding: .4rem .9rem;
    background: var(--mg-ink);
    color: var(--mg-paper);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    text-indent: .18em;
    white-space: nowrap;
    pointer-events: none;
    transition: background-color .25s ease;
}

.woocommerce ul.products li.product:hover .mg-sold-badge {
    background: var(--mg-red);
}

.woocommerce ul.products li.product:hover .mg-in-exhibit-badge {
    background: var(--mg-ink);
}

.mg-sold-badge .mg-badge-hover-text {
    display: none;
}

.woocommerce ul.products li.product.mg-print-sold-item:hover .mg-sold-badge .mg-badge-default-text {
    display: none;
}

.woocommerce ul.products li.product.mg-print-sold-item:hover .mg-sold-badge .mg-badge-hover-text {
    display: inline;
}

.woocommerce ul.products li.product.mg-print-sold-item:hover img {
    filter: none;
    opacity: 1;
}

.woocommerce .related.products li.product .price {
    display: none;
}

.woocommerce .related.products li.product a:hover .woocommerce-loop-product__title {
    font-style: italic;
}

.woocommerce .related.products li.product img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border: 1px solid var(--mg-line);
}

.mg-originals-featured {
    margin: 0 0 3.5rem;
    padding: 0;
    list-style: none;
}

.woocommerce ul.products.mg-originals-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

/* Woo's clearfix becomes a grid ITEM and eats a column. Any future grid
   product list needs these two lines. */
.woocommerce ul.products.mg-originals-featured::before,
.woocommerce ul.products.mg-originals-featured::after {
    content: none;
}

.woocommerce ul.products.mg-originals-featured li.product {
    width: auto;
    margin: 0;
    float: none;
}

@media (min-width: 48em) {
    .woocommerce ul.products.mg-originals-featured {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        gap: 3%;
    }
}

.woocommerce ul.products.mg-originals-featured li.product img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.woocommerce ul.products.mg-originals-featured li.product .woocommerce-loop-product__title {
    font-size: 1.25rem;
}

.mg-originals__heading {
    margin: 0 0 1.75rem;
    font-size: .8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .18em;
    text-indent: .18em;
    color: var(--mg-ink-soft);
    text-align: center;
}

.mg-originals__empty {
    margin: 0 0 3rem;
    font-family: var(--mg-fell);
    font-style: italic;
    color: var(--mg-ink-soft);
    text-align: center;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit {
    display: inline-block;
    padding: .8rem 1.6rem;
    border: 1px solid var(--mg-ink);
    border-radius: 0;
    background: transparent;
    color: var(--mg-ink);
    font-family: var(--mg-serif);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .16em;
    text-indent: .16em;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
    background: var(--mg-ink);
    color: var(--mg-paper);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--mg-ink);
    color: var(--mg-paper);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: transparent;
    color: var(--mg-ink);
}

.woocommerce button.button:disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button:disabled[disabled] {
    opacity: .35;
    padding: .8rem 1.6rem;
}

.woocommerce div.product .button.alt.disabled,
.woocommerce div.product .button.alt.disabled:hover,
.woocommerce div.product .button.alt.disabled:focus {
    background: var(--mg-ink-soft);
    border-color: var(--mg-ink-soft);
    color: var(--mg-paper);
    opacity: 1;
    cursor: not-allowed;
}

.woocommerce div.product .product_title {
    margin: 0 0 1.1rem;
    font-size: clamp(1.5rem, 6.5vw, 2.1rem);
    font-weight: 400;
    line-height: 1.2;
}

.woocommerce div.product .woocommerce-product-gallery {
    margin: 0 0 2rem;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--mg-line);
}

/* Thumbs stay on ONE row and scroll; a second row of stragglers looked broken. */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
    --mg-thumb-gap: .6rem;
    --mg-thumb-visible: 4;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--mg-thumb-gap);
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

.woocommerce div.product .images.woocommerce-product-gallery .flex-control-thumbs li {
    flex: 0 0 calc((100% - (var(--mg-thumb-visible) - 1) * var(--mg-thumb-gap)) / var(--mg-thumb-visible));
    margin: 0;
    scroll-snap-align: start;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    opacity: .55;
    transition: opacity .25s ease;
    cursor: pointer;
}

.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs img:hover {
    opacity: 1;
}

/* The wrapper is added by js/product-gallery.js; without it the row still scrolls. */
.mg-gallery-thumbs {
    position: relative;
    margin-top: 2.5rem;
}

.woocommerce div.product .mg-gallery-thumbs .flex-control-thumbs {
    margin-top: 0;
}

.mg-gallery-thumbs::before,
.mg-gallery-thumbs::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 3rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.mg-gallery-thumbs::before {
    left: 0;
    background: linear-gradient(to right, var(--mg-paper), rgba(255, 255, 255, 0));
}

.mg-gallery-thumbs::after {
    right: 0;
    background: linear-gradient(to left, var(--mg-paper), rgba(255, 255, 255, 0));
}

.mg-gallery-thumbs.is-scrollable:not(.is-start)::before,
.mg-gallery-thumbs.is-scrollable:not(.is-end)::after {
    opacity: 1;
}

.mg-gallery-thumbs__nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid var(--mg-line);
    border-radius: 50%;
    background: var(--mg-paper);
    color: var(--mg-ink);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%);
    transition: opacity .25s ease, visibility .25s ease, border-color .25s ease;
}

.mg-gallery-thumbs__nav svg {
    width: 1rem;
    height: 1rem;
}

.mg-gallery-thumbs__nav--prev {
    left: -.4rem;
}

.mg-gallery-thumbs__nav--next {
    right: -.4rem;
}

.mg-gallery-thumbs.is-scrollable:hover .mg-gallery-thumbs__nav,
.mg-gallery-thumbs.is-scrollable:focus-within .mg-gallery-thumbs__nav {
    opacity: 1;
    visibility: visible;
}

.mg-gallery-thumbs__nav:hover {
    border-color: var(--mg-ink-soft);
}

.mg-gallery-thumbs.is-start .mg-gallery-thumbs__nav--prev,
.mg-gallery-thumbs.is-end .mg-gallery-thumbs__nav--next {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* No hover, no arrows: leave a sliver of the next thumb showing so the row reads as swipeable. */
@media (hover: none) {
    .woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
        --mg-thumb-visible: 4.25;
    }
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    margin: 0 0 1.75rem;
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--mg-ink);
}

.woocommerce div.product .woocommerce-product-details__short-description {
    margin-bottom: 1.75rem;
    color: var(--mg-ink-soft);
}

.woocommerce div.product form.cart {
    margin: 0 0 2rem;
}

.woocommerce div.product form.cart div.quantity {
    margin-right: .75rem;
}

.woocommerce div.product form.cart .qty {
    width: 4rem;
    padding: .7rem .4rem;
    border: 1px solid var(--mg-line);
    font-family: var(--mg-serif);
    text-align: center;
}

/* `.product_meta` has no rules here any more, and no markup either: the row is
   unhooked in inc/product-tags.php. SKU is a stock code, tags are the pills,
   and the category is `.mg-product-category` at the foot of the page. */

/* The last thing before the footer, and the plainest way onward. Third in a
   row of three — related products, then tags, then this — so it is quiet on
   purpose; the same control as "Back to journal" and "Back to all
   exhibitions", which is the whole point: one shape for "here is the list
   this came from", wherever the reader meets it. */
.mg-product-category {
    width: 100%;
    margin: 0 0 2.5rem;
    text-align: center;
}

.mg-product-category__link {
    color: var(--mg-ink-soft);
    font-family: var(--mg-fell);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    text-indent: .18em;
    text-decoration: none;
    border-bottom: 1px solid var(--mg-line);
    padding-bottom: 2px;
    transition: color .15s ease, border-color .15s ease;
}

.mg-product-category__link:hover {
    color: var(--mg-ink);
    border-color: var(--mg-ink);
}

/* Justified, not centred, and not flex — at every width. A centred cloud
   gives every line a ragged edge on both sides, and thirty short pills ragged
   twice over read as spilled type rather than as a list. Real justification
   needs inline-block pills in a block container with a collapsible space
   between them, which is what the newline mg_render_product_tag_pills() writes
   after each <li> is for. `gap` has no meaning outside flex, so the row rhythm
   is the item's own margin. */
.mg-tag-pills {
    width: 100%;
    margin-top: 2.25rem;
    margin-bottom: 2.5rem;
    text-align: left;
}

.mg-tag-pills__list {
    display: block;
    text-align: justify;
    /* The last line has nothing to justify against — stretching it strands two
       pills at opposite edges of the page. */
    text-align-last: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mg-tag-pills__list li {
    display: inline-block;
    margin-bottom: .35rem;
}

.mg-tag-pill {
    display: inline-block;
    padding: .25rem .6rem;
    background: transparent;
    color: var(--mg-grey-text);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-decoration: none;
    border: 1px solid var(--mg-line);
    border-radius: 4px;
    transition: border-color .15s ease, color .15s ease;
}

.mg-tag-pill:hover {
    border-color: var(--mg-grey-text);
    color: var(--mg-ink);
}

.mg-tag-pills__more {
    display: none;
}

/* Only the overflow toggle is phone-shaped now — the justified layout above is
   every width. Every hiding rule here is gated on .is-ready (set by
   js/product-tags.js): no script, no hiding. Never move this into an ungated
   rule. */
@media (max-width: 767px) {
    .mg-tag-pills.is-ready .mg-tag-pills__item--overflow {
        display: none;
    }

    /* inline-block, not block: these rejoin the justified run rather than
       each taking a line of their own. */
    .mg-tag-pills.is-ready.is-expanded .mg-tag-pills__item--overflow {
        display: inline-block;
    }

    .mg-tag-pills.is-ready .mg-tag-pills__more {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        margin: .9rem 0 0;
        padding: .25rem .6rem;
        border: 1px solid var(--mg-line);
        border-radius: 4px;
        background: transparent;
        color: var(--mg-grey-text);
        font-family: inherit;
        font-size: .68rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        cursor: pointer;
    }
}

.mg-tag-pills__more-icon {
    width: .42rem;
    height: .42rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-.12em) rotate(45deg);
    transition: transform .2s ease;
}

.mg-tag-pills.is-expanded .mg-tag-pills__more-icon {
    transform: translateY(.06em) rotate(-135deg);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    margin: 0 0 1.5rem;
    padding: 0 0 .75rem;
    border-bottom: 1px solid var(--mg-line);
    list-style: none;
    text-align: center;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    display: inline-block;
    margin: 0 .75rem;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 0;
    font-size: .82rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--mg-ink-soft);
    text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--mg-ink);
    font-style: italic;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    /* Clear of the strip's own rule below it — near the text it belongs to the
       word, near the rail it looks like a mistake in the rail. */
    text-underline-offset: .4em;
}

/* Or the browser draws its own blue one, which is the only blue on the page. */
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
    outline: 2px solid var(--mg-ink);
    outline-offset: 4px;
}

/* Unstacked tabs — the phone. js/product-tabs.js adds .mg-tabs-stacked and the
   row headings; with no script neither class nor heading exists and the tabs
   stay tabs, which is the fallback that matters.

   The heading is written into the panel at every width and hidden here rather
   than added and removed on rotation — one render location, and a phone turned
   sideways changes nothing but which rules match.

   `--own` marks a heading the panel printed for itself (WooCommerce's
   Additional Information; the statement tab). Those were always visible and
   stay visible — only the ones the script added are hidden off the phone. */
.mg-tab-row__title:not(.mg-tab-row__title--own) {
    display: none;
}

@media (max-width: 767px) {
    .woocommerce div.product .woocommerce-tabs.mg-tabs-stacked ul.tabs {
        display: none;
    }

    /* WooCommerce's own tab script hides every panel but the active one with an
       inline `display: none`, and nothing short of !important reaches past an
       inline style. This is that case — not a specificity race.

       A box each rather than rules between them: the same hairline the
       standalone statement wears, for the same reason. Three panels separated
       by lines read as one block chopped up; three boxes read as three things,
       which is what they are. */
    .woocommerce div.product .woocommerce-tabs.mg-tabs-stacked .wc-tab {
        display: block !important;
        margin: 0 0 .9rem;
        padding: 1.25rem 1.35rem 1.35rem;
        border: 1px dashed var(--mg-line);
        border-radius: 8px;
    }

    .woocommerce div.product .woocommerce-tabs.mg-tabs-stacked .wc-tab:last-child {
        margin-bottom: 0;
    }

    /* A panel that brought its own h2 wears the same label styling, so the
       rows read as one list however each one was built.

       Spelled out this far because WooCommerce styles tab headings as
       `.woocommerce div.product .woocommerce-tabs .panel h2` — four classes and
       two elements. A plain `.mg-tabs-stacked .mg-tab-row__title` is two
       classes and loses. Count before shortening this. */
    .woocommerce div.product .woocommerce-tabs.mg-tabs-stacked .wc-tab .mg-tab-row__title {
        display: block;
        margin: 0 0 .8rem;
        font-size: .78rem;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: .14em;
        color: var(--mg-ink-soft);
    }

    .mg-tabs-stacked .wc-tab > *:last-child,
    .mg-tabs-stacked .wc-tab > *:last-child > *:last-child {
        margin-bottom: 0;
    }
}

.mg-inline-description {
    margin-top: .5rem;
}

.mg-inline-description h2 {
    margin: 0 0 1rem;
    font-size: .82rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--mg-ink-soft);
}

.mg-inline-description p {
    margin: 0 0 1.1rem;
}

.mg-inline-description p:last-child {
    margin-bottom: 0;
}

.mg-inline-description ul,
.mg-inline-description ol {
    margin: 0 0 1.1rem;
    padding-left: 1.35rem;
}

.mg-inline-description li {
    margin-bottom: .5rem;
}

.mg-inline-description li:last-child {
    margin-bottom: 0;
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
    margin: 0 0 1.75rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--mg-line);
    font-size: 1.2rem;
    font-weight: 400;
    text-align: center;
    letter-spacing: .04em;
}

@media (min-width: 48em) {
    .mg-shop__header {
        margin-bottom: 3rem;
    }

    .woocommerce .woocommerce-breadcrumb {
        margin-top: -1.5rem;
    }

    .woocommerce div.product {
        display: grid;
        /* minmax(0, …), not a bare fr: the gallery's min-content eats the row. */
        grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
        gap: 3rem;
        align-items: start;
    }

    .woocommerce div.product .images.woocommerce-product-gallery {
        grid-column: 1;
        width: 100%;
        float: none;
        margin-bottom: 0;
    }

    .woocommerce div.product .summary.entry-summary {
        grid-column: 2;
        width: 100%;
        float: none;
        margin: 0;
    }

    .woocommerce div.product .woocommerce-tabs,
    .woocommerce div.product .related,
    .woocommerce div.product .upsells,
    .woocommerce div.product .mg-tag-pills,
    .woocommerce div.product .mg-product-category {
        grid-column: 1 / -1;
    }

    /* On top of the grid's 3rem row gap. That gap is the gutter between the
       gallery and the summary beside it, and at the same measure below them
       the tab strip read as the last line of the summary rather than as the
       start of something else. The phone needs none of this — there the tabs
       are unstacked rows with their own rules between them. */
    .woocommerce div.product .woocommerce-tabs {
        margin-top: 2.5rem;
    }
}

@media (min-width: 64em) {
    .woocommerce .woocommerce-breadcrumb {
        margin-top: -2.25rem;
    }
}

body.mg-holding-page {
    background: var(--mg-black);
    color: var(--mg-grey-text);
    font-weight: 300;
}

.mg-holding {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 12vh 7vw;
    text-align: center;
}

.mg-holding::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
                transparent 30%,
                rgba(0, 0, 0, .72) 100%);
}

.mg-holding__inner {
    position: relative;
    z-index: 4;
    max-width: 46rem;
}

.mg-holding__name {
    margin: 0;
    font-size: clamp(1.5rem, 5.2vw, 3rem);
    font-weight: 300;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .3em;
    text-indent: .3em;
    color: var(--mg-grey-text);
}

.mg-holding__mark {
    display: block;
    margin: 2.1rem 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--mg-grey-dim);
}

.mg-holding__message {
    margin: 0;
    font-family: var(--mg-fell);
    font-style: italic;
    font-size: clamp(1.05rem, 2.4vw, 1.3rem);
    line-height: 1.85;
    letter-spacing: .015em;
    color: var(--mg-grey-dim);
}

.mg-holding__message + .mg-holding__message {
    margin-top: 1.1rem;
}

@media (min-width: 48em) {
    .mg-holding__name {
        letter-spacing: .42em;
        text-indent: .42em;
    }

    .mg-holding__mark {
        margin: 3.1rem 0;
    }
}

@keyframes mg-emerge {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(7px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: blur(0);
    }
}

.mg-holding__name,
.mg-holding__mark,
.mg-holding__message {
    opacity: 0;
    animation: mg-emerge 2.4s cubic-bezier(.22, .61, .36, 1) forwards;
}

.mg-holding__name    { animation-delay: .25s; }
.mg-holding__mark    { animation-delay: .95s; }
.mg-holding__message { animation-delay: 1.35s; }

.mg-holding__torch {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    width: 40rem;
    height: 40rem;
    margin: -20rem 0 0 -20rem;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: screen;
    background: radial-gradient(closest-side,
                rgba(236, 231, 218, .085) 0%,
                rgba(236, 231, 218, .038) 38%,
                rgba(236, 231, 218, .012) 62%,
                transparent 78%);
    opacity: 0;
    transition: opacity 1.2s ease-out;
    will-change: transform;
}

.mg-holding__torch.is-lit {
    opacity: 1;
}

.mg-holding__dark {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    animation: mg-wake 4s 2.6s ease-out forwards;
}

@keyframes mg-wake {
    to {
        opacity: 1;
    }
}

.mg-eyes {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: mg-lurk var(--lurk, 30s) var(--wake, 0s) infinite;
}

.mg-eyes__pair {
    display: flex;
    gap: calc(9px * var(--s));
    opacity: calc(.42 + var(--lit, .1) * .58);
    transition: opacity .5s ease-out;
}

.mg-eyes--side,
.mg-eyes--far {
    display: none;
}

@media (min-width: 48em) {
    .mg-eyes--side {
        display: block;
    }
}

@media (min-width: 64em) {
    .mg-eyes--far {
        display: block;
    }
}

@keyframes mg-lurk {
    0% {
        opacity: 0;
    }
    17% {
        opacity: 1;
    }
    38% {
        opacity: 1;
    }
    39.5%, 100% {
        opacity: 0;
    }
}

.mg-eyes--sudden {
    animation-name: mg-lurk-sudden;
}

@keyframes mg-lurk-sudden {
    0%, 24% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    44% {
        opacity: 1;
    }
    70%, 100% {
        opacity: 0;
    }
}

.mg-eye {
    display: grid;
    place-items: center;
    width: calc(15px * var(--s));
    height: calc(9px * var(--s));
    border-radius: 50%;
    background: rgba(228, 223, 209, .92);
    box-shadow: 0 0 calc(11px * var(--s)) rgba(228, 223, 209, .3);
    animation: mg-blink var(--blink, 8s) var(--delay, 0s) infinite;
}

.mg-eye__pupil {
    width: calc(5.5px * var(--s));
    height: calc(5.5px * var(--s));
    border-radius: 50%;
    background: var(--mg-black);
    transform: translate(calc(var(--px, 0) * var(--s) * 1px),
                         calc(var(--py, 0) * var(--s) * 1px));
    transition: transform .28s ease-out;
}

@keyframes mg-blink {
    0%, 93%, 100% {
        transform: scaleY(1);
    }
    95.5% {
        transform: scaleY(.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mg-holding__name,
    .mg-holding__mark,
    .mg-holding__message {
        opacity: 1;
        animation: none;
    }

    .mg-holding__dark,
    .mg-eyes {
        opacity: 1;
        animation: none;
    }

    .mg-eye {
        animation: none;
    }

    .mg-eye__pupil {
        transition: none;
    }

    .mg-header.is-enhanced .mg-nav__panel,
    .mg-header.is-enhanced .mg-nav__list .sub-menu,
    .mg-search {
        transition: none;
    }

    .mg-loading.is-active span {
        animation: none;
        opacity: .6;
    }

    .woocommerce ul.products li.product.mg-item-entering {
        opacity: 1;
        transform: none;
    }
}