/* =============================================
   NAV OVERLAY

   The burger opens a full-screen menu dealt as a hand of cards.

     open   the burger's outer bars cross and three cat heads rise from the
            bottom edge, ears first: yellow, pink, then the purple that stays
            as the menu's ground. 400ms in, as the purple takes the page, the
            cards deal up from below and fan out
     close  the cards drop back into the deck, the heads sink in the reverse
            order, and the overlay leaves the layout once the last pair of
            ears has cleared the bottom edge (820ms)

   Stacking: `.site-header` owns the context, `.container` sits at 2 and the
   overlay at 1, so the bar and the burger stay on top of the menu and stay
   clickable.
   ============================================= */

.site-header {
    z-index: 1000;
}

.site-header .container {
    position: relative;
    z-index: 2;
}

.site-header__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    margin-left: auto;
}

/* Scroll is held while the menu is up. Lenis is stopped alongside this in
   nav-overlay.js, since `overflow` alone does nothing to a smooth-scroll
   runner.

   The lock sits on the root, not on `body`. A stopped Lenis already hides the
   root's overflow, and once both are hidden `body` no longer propagates its
   own to the viewport: it becomes a scroll container in its own right, parked
   at 0. The sticky header then has `body` as its scrollport rather than the
   viewport, so it sticks to the top of the *document*, off-screen for anyone
   who opened the menu part-way down the page, which is the bar going missing.

   Touch gestures ignore an overflow lock, so vertical panning is turned off
   for the duration as well. Pinch-zoom is left alone. The menu's own scroller
   is unaffected: touch-action is only intersected up to the nearest element
   that can scroll. */
html.nav-open {
    overflow: hidden;
}

body.nav-open {
    touch-action: pan-x pinch-zoom;
}

/* ---------------------------------------------
   BURGER

   One button that morphs, opening and closing both. It can stay put because
   `.container` is stacked above the curtain, so the bars are still on top of
   the menu and still clickable once it is up.

   Three plain rounded bars: `::before` and `::after` are the outer pair and
   `.site-burger__bar` the middle one. All three hang off the button's centre
   line, so the outer pair only has to drop its `translate` to land on it.

   The morph is two-stage, and the stages swap order by direction: opening, the
   outer bars slide together and only then cross; closing, they uncross first
   and walk back apart after. Doing both at once is what reads as a lurch: the
   two halves of the movement fight for the same 300ms and the bars scissor
   through each other on the diagonal. The middle bar fades out while they
   converge and back in as they part.

   `translate` and `rotate` are set as their own properties rather than as one
   `transform`, which is the whole trick here: a single `transform` can only
   carry one duration and one delay for the pair. They compose in the same
   order the shorthand did, so the landed cross is unchanged. The second stage
   of each direction carries a little overshoot, so the bars settle rather than
   stop dead.
   --------------------------------------------- */
.site-burger {
    --burger-box: 40px;   /* tap target */
    --burger-width: 24px; /* bar length */
    --burger-bar: 2px;    /* thickness */
    --burger-gap: 7px;    /* centre to centre */

    position: relative;
    flex: 0 0 auto;
    width: var(--burger-box);
    height: var(--burger-box);
    /* The bars sit centred in a roomier box. Pulling the box out by the
       difference puts the bars, not the box, on the bar's padding edge, the
       same inset the logo has on the other side. */
    margin-inline-end: calc((var(--burger-width) - var(--burger-box)) / 2);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-dark-purple);
    cursor: pointer;
    transition: color 0.3s;
}

.site-burger::before,
.site-burger::after,
.site-burger__bar {
    position: absolute;
    top: 50%;
    right: calc((100% - var(--burger-width)) / 2);
    display: block;
    width: var(--burger-width);
    height: var(--burger-bar);
    margin-top: calc(var(--burger-bar) / -2);
    border-radius: 999px;
    background-color: currentColor;
}

.site-burger::before,
.site-burger::after {
    content: "";
    /* Resting state, so this is the closing run: uncross, then spread. A
       transition always takes the timing of the state it heads *to*, the same
       way the curtain's delays reverse below. */
    transition:
        rotate 0.24s cubic-bezier(0.65, 0, 0.35, 1),
        translate 0.3s cubic-bezier(0.34, 1.28, 0.64, 1) 0.16s;
}

.site-burger::before { translate: 0 calc(-1 * var(--burger-gap)); }
.site-burger::after  { translate: 0 var(--burger-gap); }

/* Shorter than the outer pair and hung off the right edge, drawn out to full
   length on hover. Back in as the outer pair starts to part. */
.site-burger__bar {
    width: calc(var(--burger-width) * 0.6);
    transition:
        opacity 0.16s linear 0.16s,
        width 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

@media (hover: hover) and (pointer: fine) {
    .site-burger:hover {
        color: var(--color-primary);
    }

    .site-burger:hover .site-burger__bar {
        width: var(--burger-width);
    }
}

.site-burger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.site-burger:focus-visible .site-burger__bar {
    width: var(--burger-width);
}

.site-burger.is-open {
    color: var(--color-primary);
}

/* Opening run: converge, then cross. */
.site-burger.is-open::before,
.site-burger.is-open::after {
    transition:
        translate 0.24s cubic-bezier(0.65, 0, 0.35, 1),
        rotate 0.3s cubic-bezier(0.34, 1.28, 0.64, 1) 0.16s;
}

.site-burger.is-open::before { translate: 0 0; rotate: 45deg;  }
.site-burger.is-open::after  { translate: 0 0; rotate: -45deg; }

/* Gone by the time the cross starts. */
.site-burger.is-open .site-burger__bar {
    opacity: 0;
    transition-delay: 0s;
}

@media (min-width: 992px) {
    .site-burger {
        --burger-box: 44px;
        --burger-width: 28px;
        --burger-gap: 8px;
    }
}

/* ---------------------------------------------
   OVERLAY
   --------------------------------------------- */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Live as soon as it opens, so a click mid-rise lands on the menu rather than
   on the page going under it, and dead again the moment it starts to close. */
.nav-overlay.is-open {
    pointer-events: auto;
}

/* ---------------------------------------------
   CURTAIN

   Each head is a viewport-tall body with the ears outline standing on top of
   it. Parked, the whole thing waits below the bottom edge; landed, the body
   covers the screen and the ears are above it, out of sight. The part in
   between is what people see: ears first, then shoulders, then colour.

   The three are sized and centred differently so their ears never line up,
   and each is still wide enough for its body to cover the full width. A
   transition always takes the timing of the state it heads *to*, so the open
   order lives on `.is-open` and the close order on the resting rule: the last
   head up is the first one down.
   --------------------------------------------- */
.nav-overlay__curtain {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.nav-overlay__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.nav-overlay__head {
    --head-w: 110vw;
    --head-x: 50%;
    /* The ears outline's own height at this width (viewBox 119 x 74). */
    --head-cap: calc(var(--head-w) * 74 / 119);

    position: absolute;
    top: 0;
    left: calc(var(--head-x) - var(--head-w) / 2);
    width: var(--head-w);
    height: 100%;
    background: var(--head-fill);
    color: var(--head-fill);
    transform: translate3d(0, calc(100% + var(--head-cap)), 0);
    transition: transform 0.62s cubic-bezier(0.35, 0, 0.3, 1) var(--head-close);
    will-change: transform;
}

.nav-overlay.is-open .nav-overlay__head {
    transform: translate3d(0, 0, 0);
    transition: transform 0.75s cubic-bezier(0.3, 0, 0.15, 1) var(--head-open);
}

.nav-overlay__head--1 { --head-fill: var(--color-accent-01); --head-w: 126vw; --head-x: 40%; --head-open: 0s;    --head-close: 0.14s; }
.nav-overlay__head--2 { --head-fill: var(--color-accent-02); --head-w: 126vw; --head-x: 60%; --head-open: 0.08s; --head-close: 0.07s; }
.nav-overlay__head--3 { --head-fill: var(--color-primary);   --head-w: 110vw; --head-x: 50%; --head-open: 0.16s; --head-close: 0s;    }

/* The outline runs on below its viewBox, so the rough filter never frays the
   edge that meets the body, and a pixel of overlap keeps a fractional offset
   from opening a seam there. */
.nav-overlay__head > svg {
    position: absolute;
    left: 0;
    bottom: calc(100% - 1px);
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 119 / 74;
    fill: currentColor;
}

/* The ground's texture rides up with it: the brand's light grid behind the
   hand, and a grain plate. One 160px tile, rasterised once and repeated, so
   the filter cost does not scale with the viewport. */
.nav-overlay__grid {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(62rem, 140vmin);
    aspect-ratio: 1;
    translate: -50% -50%;
    background: url("../../../../uploads/meowgical/images/shared/grid-brand-light.avif") center / contain no-repeat;
    opacity: 0.42;
}

.nav-overlay__grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    opacity: 0.4;
}

/* ---------------------------------------------
   MENU
   --------------------------------------------- */
.nav-overlay__wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    /* The top clears the bar floating over the menu. */
    padding: clamp(6.75rem, 14vh, 9rem) var(--container-pad) clamp(1.25rem, 4vh, 2.5rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.nav-overlay__wrapper::-webkit-scrollbar {
    display: none;
}

.nav-overlay__hand {
    /* One card's width drives the whole hand: overlap, fan, type and the
       sparks around it. Capped on height as well, so a short laptop still
       fits the fan and the note under it. */
    --card-w: clamp(10.5rem, min(17vw, 35vh), 18rem);

    position: relative;
    display: flex;
    flex: 1 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.nav-overlay__menu {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0;
    /* Room for the outer cards' dip. */
    padding: 0 0 calc(var(--card-w) * 0.2);
    list-style: none;
    counter-reset: nav-card;
}

/* ---------------------------------------------
   THE HAND

   `--i` and `--n` come from nav-overlay.js. `--c` is the card's distance from
   the middle of the hand, so the middle card stands straight and the rest
   rotate and dip away from it on both sides.

   Parked, every card is stacked under the middle of the hand, below the fold.
   Dealing is one transition per card, staggered by `--i`, with a little
   overshoot so each one lands rather than stops. Closing sends them back to
   the deck, last card first.
   --------------------------------------------- */
.nav-overlay__menu > li {
    --c: calc(var(--i, 0) - (var(--n, 1) - 1) / 2);

    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: var(--card-w);
    margin-inline: calc(var(--card-w) * -0.06);
    counter-increment: nav-card;
    transform-origin: 50% 100%;
    transform: translate3d(calc(var(--c) * -88%), 110vh, 0) rotate(calc(var(--c) * -6deg));
    transition: transform 0.45s cubic-bezier(0.5, 0, 0.75, 0.2) calc((var(--n, 1) - 1 - var(--i, 0)) * 0.03s);
}

.nav-overlay.is-active .nav-overlay__menu > li {
    transform: translate3d(0, calc(var(--c) * var(--c) * var(--card-w) * 0.045), 0) rotate(calc(var(--c) * 4.5deg));
    transition: transform 0.8s cubic-bezier(0.3, 1.3, 0.5, 1) calc(var(--i, 0) * 0.06s);
}

.nav-overlay__menu > li > a {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 5 / 7;
    padding: calc(var(--card-w) * 0.075);
    border-radius: calc(var(--card-w) * 0.1);
    background: var(--card-fill, var(--color-white));
    box-shadow:
        0 1.5rem 3rem rgba(22, 20, 74, 0.3),
        0 0.25rem 0.75rem rgba(22, 20, 74, 0.16),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
    color: var(--color-dark-purple);
    text-decoration: none;
    transform-origin: 50% 100%;
    transition:
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        translate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-overlay__menu > li > a:hover {
    color: var(--color-dark-purple);
}

.nav-overlay__menu > li:nth-child(4n + 1) { --card-fill: var(--color-accent-01); }
.nav-overlay__menu > li:nth-child(4n + 2) { --card-fill: var(--color-accent-02); }
.nav-overlay__menu > li:nth-child(4n + 3) { --card-fill: var(--color-white); }
.nav-overlay__menu > li:nth-child(4n + 4) { --card-fill: var(--color-secondary); }

/* Picking a card: it rises out of the hand and stands up straight, and its
   neighbours lean away to give it room. */
@media (hover: hover) and (pointer: fine) {
    .nav-overlay__menu > li:hover {
        z-index: 3;
    }

    .nav-overlay__menu > li:hover > a {
        transform: translateY(calc(var(--card-w) * -0.12)) rotate(calc(var(--c) * -4.5deg)) scale(1.06);
    }

    .nav-overlay__menu > li:has(~ li:hover) > a {
        translate: calc(var(--card-w) * -0.08) 0;
    }

    .nav-overlay__menu > li:hover ~ li > a {
        translate: calc(var(--card-w) * 0.08) 0;
    }
}

.nav-overlay__menu > li:focus-within {
    z-index: 3;
}

.nav-overlay__menu > li > a:focus-visible {
    outline: 3px solid var(--color-accent-01);
    outline-offset: 4px;
    transform: translateY(calc(var(--card-w) * -0.12)) rotate(calc(var(--c) * -4.5deg)) scale(1.06);
}

/* ---------------------------------------------
   CARD
   --------------------------------------------- */
.nav-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.nav-card__index::before {
    content: counter(nav-card, decimal-leading-zero);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
}

/* The brand's arrow-upright, cut out of a dark disc. It turns to point at the
   page once the card is picked. */
.nav-card__arrow {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: max(1.75rem, calc(var(--card-w) * 0.15));
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-dark-purple);
    color: var(--color-accent-01);
    transition:
        rotate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.3s;
}

.nav-card__arrow::before {
    content: "";
    width: 55%;
    aspect-ratio: 1;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 6c0-.55.45-1 1-1h10a1 1 0 0 1 1 1v10a1 1 0 1 1-2 0V8.41L6.71 18.71a1 1 0 0 1-1.42-1.42L15.59 7H8c-.55 0-1-.45-1-1Z'/%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'%3E%3Cpath d='M7 6c0-.55.45-1 1-1h10a1 1 0 0 1 1 1v10a1 1 0 1 1-2 0V8.41L6.71 18.71a1 1 0 0 1-1.42-1.42L15.59 7H8c-.55 0-1-.45-1-1Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.nav-card__art {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-block: 0.35rem 0.5rem;
}

.nav-card__art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: 50% 85%;
}

.nav-card__label {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, calc(var(--card-w) * 0.115), 1.9rem);
    font-weight: var(--fw-bold);
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

/* The page you are on carries the badge's four-point star. */
.nav-overlay__menu > .current-menu-item > a .nav-card__label::after {
    content: "";
    display: inline-block;
    width: 0.7em;
    aspect-ratio: 1;
    margin-left: 0.25em;
    background: currentColor;
    vertical-align: 0.05em;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 459 459'%3E%3Cpath d='M215.6 8.2c6-11 21.8-11 27.8 0l39.9 73c21.8 39.9 54.6 72.7 94.5 94.5l73 39.9c11 6 11 21.8 0 27.8l-73 39.9c-39.9 21.8-72.7 54.6-94.5 94.5l-39.9 73c-6 11-21.8 11-27.8 0l-39.9-73c-21.8-39.9-54.6-72.7-94.5-94.5l-73-39.9c-11-6-11-21.8 0-27.8l73-39.9c39.9-21.8 72.7-54.6 94.5-94.5l39.9-73Z'/%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 459 459'%3E%3Cpath d='M215.6 8.2c6-11 21.8-11 27.8 0l39.9 73c21.8 39.9 54.6 72.7 94.5 94.5l73 39.9c11 6 11 21.8 0 27.8l-73 39.9c-39.9 21.8-72.7 54.6-94.5 94.5l-39.9 73c-6 11-21.8 11-27.8 0l-39.9-73c-21.8-39.9-54.6-72.7-94.5-94.5l-73-39.9c-11-6-11-21.8 0-27.8l73-39.9c39.9-21.8 72.7-54.6 94.5-94.5l39.9-73Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
    .nav-overlay__menu > li:hover .nav-card__arrow {
        rotate: 45deg;
        background-color: var(--color-primary);
    }

    .nav-overlay__menu > li:hover .nav-card__art img {
        animation: nav-card-wiggle 0.7s cubic-bezier(0.36, 0, 0.3, 1);
    }
}

.nav-overlay__menu > li > a:focus-visible .nav-card__arrow {
    rotate: 45deg;
    background-color: var(--color-primary);
}

@keyframes nav-card-wiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%      { transform: rotate(-6deg) scale(1.06); }
    55%      { transform: rotate(4deg) scale(1.06); }
    80%      { transform: rotate(-2deg) scale(1.03); }
}

/* Sub-items read as chips under their parent's card. On phones main.js turns
   the parent into a toggle for them, so there they wait for `is-open`. */
.nav-overlay__menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.nav-overlay__menu ul a {
    display: inline-flex;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--fw-semibold);
}

.nav-overlay__menu ul a:hover,
.nav-overlay__menu ul a:focus-visible {
    background: var(--color-accent-01);
    color: var(--color-dark-purple);
}

@media (max-width: 768px) {
    .nav-overlay__menu > li:not(.is-open) > ul {
        display: none;
    }
}

/* ---------------------------------------------
   SPARKS

   The badge's four-point star, three times over, popping in once the hand
   has landed and twinkling while it is up.
   --------------------------------------------- */
.nav-overlay__spark {
    position: absolute;
    width: var(--spark-size);
    aspect-ratio: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 459 459'%3E%3Cpath fill='%23ffd861' d='M215.6 8.2c6-11 21.8-11 27.8 0l39.9 73c21.8 39.9 54.6 72.7 94.5 94.5l73 39.9c11 6 11 21.8 0 27.8l-73 39.9c-39.9 21.8-72.7 54.6-94.5 94.5l-39.9 73c-6 11-21.8 11-27.8 0l-39.9-73c-21.8-39.9-54.6-72.7-94.5-94.5l-73-39.9c-11-6-11-21.8 0-27.8l73-39.9c39.9-21.8 72.7-54.6 94.5-94.5l39.9-73Z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
    scale: 0;
    rotate: -90deg;
    transition: scale 0.2s ease-in, rotate 0.2s ease-in;
}

.nav-overlay.is-active .nav-overlay__spark {
    scale: 1;
    rotate: 0deg;
    transition:
        scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--spark-delay),
        rotate 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--spark-delay);
    animation: nav-spark-twinkle var(--spark-beat) ease-in-out calc(var(--spark-delay) + 0.9s) infinite;
}

.nav-overlay__spark--1 { --spark-size: 2.25rem; --spark-delay: 0.55s; --spark-beat: 3.2s; left: max(0px, 50% - var(--card-w) * 2.72); top: calc(50% - var(--card-w) * 0.8); }
.nav-overlay__spark--2 { --spark-size: 1.5rem;  --spark-delay: 0.7s;  --spark-beat: 2.6s; left: min(100% - var(--spark-size), 50% + var(--card-w) * 2.62); top: calc(50% + var(--card-w) * 0.25); }
.nav-overlay__spark--3 { --spark-size: 1.1rem;  --spark-delay: 0.85s; --spark-beat: 3.8s; left: calc(50% + var(--card-w) * 1.05); top: calc(50% - var(--card-w) * 1.05); }

@keyframes nav-spark-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(0.72) rotate(45deg); }
}

/* ---------------------------------------------
   FOOT
   --------------------------------------------- */
.nav-overlay__foot {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    width: min(100%, 30rem);
    margin-top: clamp(0.75rem, 2.5vh, 1.75rem);
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.2s, transform 0s 0.2s;
}

.nav-overlay.is-active .nav-overlay__foot {
    opacity: 1;
    transform: none;
    transition:
        opacity 0.5s 0.4s,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

.nav-overlay__note {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem 0.6rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-family: var(--font-body);
    font-size: var(--text-copy);
    line-height: var(--lh-copy);
    text-align: center;
}

.nav-overlay__note a {
    color: var(--color-accent-01);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.nav-overlay__note a:hover {
    color: var(--color-white);
}

/* The bar keeps its own CTA above 900px. */
.nav-overlay .nav-overlay__cta {
    display: none;
}

/* ---------------------------------------------
   PHONES AND SMALL TABLETS

   No room to fan five cards, so the hand is dealt as a stack of tickets:
   full width, tilted alternately, each mascot peeking over its ticket's top
   edge.
   --------------------------------------------- */
@media (max-width: 900px) {
    .nav-overlay__wrapper {
        padding-top: calc(var(--space-sm) + 72px + clamp(1.75rem, 4.5vh, 2.75rem));
    }

    /* One cell, exactly the size of the stack, so the spark can be placed
       against the stack itself rather than against the whole hand. */
    .nav-overlay__hand {
        display: grid;
        grid-template-columns: min(100%, 30rem);
        align-content: center;
        justify-content: center;
    }

    .nav-overlay__menu {
        grid-area: 1 / 1 / 2 / 2;
        flex-direction: column;
        align-items: stretch;
        gap: clamp(1rem, 2.6vh, 1.4rem);
        width: 100%;
        padding: 0;
    }

    .nav-overlay__menu > li {
        --tilt: -1.4deg;

        width: auto;
        margin: 0;
        transform: translate3d(0, 110vh, 0) rotate(calc(var(--tilt) * 5));
    }

    .nav-overlay__menu > li:nth-child(even) {
        --tilt: 1.2deg;
    }

    .nav-overlay.is-active .nav-overlay__menu > li {
        transform: translate3d(0, 0, 0) rotate(var(--tilt));
        transition: transform 0.75s cubic-bezier(0.3, 1.25, 0.5, 1) calc(var(--i, 0) * 0.05s);
    }

    .nav-overlay__menu > li > a {
        flex-direction: row;
        align-items: center;
        gap: 0.9rem;
        aspect-ratio: auto;
        min-height: 4.25rem;
        padding: 0.5rem 0.75rem 0.5rem 0.85rem;
        border-radius: 1.125rem;
    }

    .nav-overlay__menu > li > a:active {
        transform: scale(0.98);
    }

    .nav-card__top {
        display: contents;
    }

    .nav-card__index {
        display: none;
    }

    /* The negative top margin takes the mascot out of the row's height, so
       it stands up past the ticket's edge instead of stretching the ticket. */
    .nav-card__art {
        flex: 0 0 4.75rem;
        order: -1;
        align-self: flex-end;
        height: 4.75rem;
        margin: -1.6rem 0 -0.2rem;
    }

    .nav-card__label {
        flex: 1 1 auto;
        font-size: clamp(1.35rem, 1rem + 1.8vw, 1.75rem);
    }

    .nav-card__arrow {
        order: 1;
        width: 2.25rem;
    }

    /* Sharing the stack's cell makes that cell its containing block, so it
       sits just above the top ticket's raised corner wherever the stack is. */
    .nav-overlay__spark--1 {
        --spark-size: 1.75rem;

        grid-area: 1 / 1 / 2 / 2;
        top: auto;
        right: 0.75rem;
        bottom: calc(100% + 0.5rem);
        left: auto;
    }

    .nav-overlay__spark--2,
    .nav-overlay__spark--3 {
        display: none;
    }

    .nav-overlay .nav-overlay__cta {
        display: inline-flex;
        width: 100%;
    }
}

/* A short phone: slimmer tickets and gaps so the stack, the email and the
   CTA fit without a scroll. The note gives up its lead-in, and the spark,
   which only has the gap under the bar to sit in, is left out. */
@media (max-width: 900px) and (max-height: 740px) {
    .nav-overlay__menu {
        gap: 0.75rem;
    }

    .nav-overlay__menu > li > a {
        min-height: 3.75rem;
    }

    .nav-card__art {
        flex-basis: 4.25rem;
        height: 4.25rem;
    }

    .nav-overlay__note span,
    .nav-overlay__spark--1 {
        display: none;
    }
}

/* A phone on its side: two columns, with the email and the CTA side by side
   under them. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
    .nav-overlay__hand {
        grid-template-columns: min(100%, 44rem);
    }

    .nav-overlay__menu {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-overlay__foot {
        flex-direction: row;
        justify-content: center;
        gap: 1.5rem;
        width: min(100%, 44rem);
    }

    .nav-overlay .nav-overlay__cta {
        width: auto;
    }
}

/* ---------------------------------------------
   REDUCED MOTION

   The states still change, since the menu has to open, but nothing travels.
   --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .site-burger,
    .site-burger::before,
    .site-burger::after,
    .site-burger__bar,
    .nav-overlay__head,
    .nav-overlay__menu > li,
    .nav-overlay__menu > li > a,
    .nav-card__arrow,
    .nav-overlay__spark,
    .nav-overlay__foot {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    .nav-card__art img,
    .nav-overlay__spark {
        animation: none !important;
    }
}