/*
 * The phone header and the phone menu (2026-10-14, client request).
 *
 * "The header is not good — make a more advanced and creative menu like desktop, and the
 * menu hiding when scrolling down should be more organised." So below 900px the header
 * now speaks the desktop's language at a phone's size, and the menu is a screen of its
 * own rather than the desktop mega panel squeezed:
 *
 *   BAR    The gold strip; under it the desktop's three parts — the MENU pill on the left,
 *          the logo TAB hanging from the centre, a FLAVOURS pill on the right — floating
 *          over the page as they do at 1440, not a slab. Once the page leaves the top the
 *          strip folds away and the tab is a size smaller; the pills still float, with
 *          no band behind them, as at 1440 (2026-10-16).
 *   SCROLL Down past the top zone, the strip and both pills step away and
 *          only the logo tab stays, pinned at the top centre a size smaller again (the
 *          client: "header items can be hidden, logo should be sticky"); up, the pills
 *          come back. Driven by public/menu/header.js (html[data-su-hdr-away],
 *          html[data-su-hdr-scrolled]), with hysteresis, and never while the menu is open
 *          or focus is in the header. Everything moves by `translate` on the fixed
 *          header, so nothing measured in the page (its height, the logo's box at rest)
 *          changes as it does.
 *   MENU   Full screen, forest ground: the menu opens as a circle from the MENU button,
 *          the pages rise one by one in Lilita out of line masks, THE RANGE slides in as
 *          a row of cans to swipe (the flavour in season first, tagged), then the contact
 *          chips. The design's CLOSE button stays on top of it.
 *
 * ONE sheet for both surfaces: the coded pages link it (components/design/header-mount.tsx),
 * the homepage carries it inline (lib/design-page.ts → window.__SU_HEADER_CSS). Both
 * headers carry the same data-su-* hooks (design-source/.patches/_header.json;
 * tagHeader() in bridge/home.js). The fixed header itself is found as the element whose
 * child is [data-su-utility] — [data-su-hdr] on the homepage, an untagged div on the
 * coded pages.
 *
 * The licence, as the small-screen layers' (components/design/responsive.css):
 *   1. Everything that changes how something LOOKS is below 900px — with ONE exception,
 *      the desktop menu (the last section, 900px and up): the design's mega panel was
 *      replaced at the client's request (2026-10-14, "text overlapped with image… I need
 *      an animated premium mega menu"). It is hidden only while header.js runs
 *      (html[data-su-dmenu-on]), so without the script the design's panel stands.
 *   2. The palette is the brand's own, declared once below with the token layer's
 *      names (packages/config/tailwind-preset.css is not loaded on the homepage).
 *   3. `!important` where the design writes the value inline, as in responsive.css.
 *   4. Under prefers-reduced-motion nothing slides or rises: the menu fades, the bar
 *      appears and disappears.
 */

[data-su-pmenu] { display: none; }
[data-su-dmenu] { display: none; }

@media (max-width: 899px) {
  :root {
    --su-h-forest: var(--color-forest, #16321C);
    --su-h-gold: var(--color-gold, #FFB81C);
    --su-h-cream: var(--color-cream, #F7F3E8);
    --su-h-ink: var(--color-ink, #2D2926);
    --su-h-leaf: var(--color-leaf, #007A33);
    --su-h-ease: cubic-bezier(.2, .8, .2, 1);
    /* The bar: the 30px strip and a 64px row. */
    --su-h-strip: 30px;
    --su-h-row: 64px;
    /* Anchors land clear of the compact bar when it comes back. */
    scroll-padding-top: 72px;
  }

  /* ---------------------------------------------------------------- *
   * The bar
   * ---------------------------------------------------------------- */
  :has(> [data-su-utility]) {
    z-index: 1000 !important;
    padding-top: env(safe-area-inset-top, 0px);
    transition: translate .55s var(--su-h-ease);
  }
  html[data-su-hdr-scrolled] :has(> [data-su-utility]),
  html[data-su-pmenu-open] :has(> [data-su-utility]) {
    translate: 0 calc(-1 * var(--su-h-strip));
  }
  [data-su-utility] { transition: opacity .35s ease; }
  html[data-su-hdr-scrolled] [data-su-utility],
  html[data-su-pmenu-open] [data-su-utility] { opacity: 0; }

  [data-su-row] {
    height: var(--su-h-row) !important;
    gap: 10px !important;
    transition: background-color .45s ease, box-shadow .45s ease;
  }
  /* No band behind the bar while reading: the pills and the tab float over the page
     as they do at 1440, scrolled or not (client request, 2026-10-16: the frosted cream
     band that came back on scrolling up "should be the same behaviour like desktop").
     The layer exists only for the open menu, below. */
  [data-su-row]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
  }
  /* Over the open menu the band turns forest and fades out downward, so the menu's
     own lines scroll away under the CLOSE button rather than meeting it. */
  html[data-su-pmenu-open] [data-su-row]::before {
    opacity: 1;
    inset: 0 0 -18px;
    background: linear-gradient(var(--su-h-forest) 62%, color-mix(in srgb, var(--su-h-forest) 0%, transparent));
  }

  /* The logo tab hangs from the top of the row, as at 1440 — a size for a phone, and a
     size smaller again in the compact bar. */
  [data-su-logo] {
    width: 54px !important;
    height: 84px !important;
    border-radius: 0 0 18px 18px !important;
    transition: width .45s var(--su-h-ease), height .45s var(--su-h-ease) !important;
  }
  [data-su-logo] img {
    height: 70px !important;
    transition: height .45s var(--su-h-ease) !important;
  }
  html[data-su-hdr-scrolled] [data-su-logo],
  html[data-su-pmenu-open] [data-su-logo] { width: 46px !important; height: 68px !important; }
  html[data-su-hdr-scrolled] [data-su-logo] img,
  html[data-su-pmenu-open] [data-su-logo] img { height: 56px !important; }
  /* Reading down the page, the logo is the one part that stays: pinned at the top
     centre, smaller again, narrow enough to sit between a left-aligned kicker's words
     and the edge rather than over them (client request, 2026-10-14). */
  html[data-su-hdr-away]:not([data-su-pmenu-open]) [data-su-logo] {
    width: 36px !important;
    height: 50px !important;
    border-radius: 0 0 12px 12px !important;
  }
  html[data-su-hdr-away]:not([data-su-pmenu-open]) [data-su-logo] img { height: 41px !important; }

  /* The two pills keep the design's glass; only their insides are a touch tighter. */
  [data-su-menupill],
  [data-su-navpill] {
    padding: 3px !important;
    translate: none !important;
    scale: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: translate .5s var(--su-h-ease), opacity .35s ease !important;
  }
  /* …while the MENU and FLAVOURS pills step up and out, and come back on the first
     scroll up. Still in the tab order: Tab into the header brings them back
     (public/menu/header.js). */
  html[data-su-hdr-away]:not([data-su-pmenu-open]) [data-su-menupill],
  html[data-su-hdr-away]:not([data-su-pmenu-open]) [data-su-navpill] {
    translate: 0 -22px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* 44px targets (§2.10), the pills still 50px tall as at 1440. */
  [data-su-menupill] > button { min-height: 44px; gap: 10px !important; padding: 0 14px 0 2px !important; }
  [data-su-navpill] > a { min-height: 44px; box-sizing: border-box; }

  /* The nav pill keeps one link: FLAVOURS, with a gold dot — the range is the one thing
     a visitor most often came for, and ABOUT and CONTACT are a tap away in the menu. */
  [data-su-navpill] > a:not([href="/flavours"]) { display: none !important; }
  [data-su-navpill] > a[href="/flavours"] {
    gap: 9px;
    padding: 0 16px 0 14px !important;
    letter-spacing: .2em !important;
  }
  [data-su-navpill] > a[href="/flavours"]::before {
    content: '';
    width: 7px;
    height: 7px;
    flex: none;
    border-radius: 50%;
    background: var(--su-h-gold);
    box-shadow: 0 0 0 3px rgba(255, 184, 28, .28);
  }
  [data-su-navpill] { transition: opacity .3s ease, visibility 0s linear 0s; }
  html[data-su-pmenu-open] [data-su-navpill] {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none !important;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }

  /* The desktop mega panel does not open on a phone; the menu below does. */
  [data-su-megapanel] { display: none !important; }

  /* The Flavours pages hold their hero clear of the fixed header with a spacer of its
     height (design-source/.patches/flavours.json): the strip and the row. */
  [data-su-chrome-space] { height: calc(var(--su-h-strip) + var(--su-h-row)) !important; }

  /* ---------------------------------------------------------------- *
   * The menu
   * ---------------------------------------------------------------- */
  /* The root only: on the homepage, hiding the body's overflow too sends the export's
     document back to its top. */
  html[data-su-pmenu-open] { overflow: hidden !important; }

  [data-su-pmenu] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(255, 184, 28, .16), rgba(255, 184, 28, 0) 60%),
      radial-gradient(90% 50% at 0% 100%, rgba(0, 122, 51, .38), rgba(0, 122, 51, 0) 70%),
      var(--su-h-forest);
    color: var(--su-h-cream);
    -webkit-tap-highlight-color: transparent;
    visibility: hidden;
    pointer-events: none;
    clip-path: circle(0px at var(--su-pm-x, 40px) var(--su-pm-y, 62px));
    transition: clip-path .5s cubic-bezier(.6, 0, .4, 1), visibility 0s linear .5s;
  }
  html[data-su-pmenu-open] [data-su-pmenu] {
    visibility: visible;
    pointer-events: auto;
    clip-path: circle(150vmax at var(--su-pm-x, 40px) var(--su-pm-y, 62px));
    transition: clip-path .85s var(--su-h-ease), visibility 0s linear 0s;
  }

  .su-pm-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 40% at 80% 18%, rgba(255, 184, 28, .1), rgba(255, 184, 28, 0) 70%);
  }

  .su-pm-inner {
    position: relative;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: calc(env(safe-area-inset-top, 0px) + 92px) var(--gut, 20px) calc(env(safe-area-inset-bottom, 0px) + 26px);
    overflow: hidden;
  }

  .su-pm-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 11px Karla, sans-serif;
    letter-spacing: .26em;
    color: var(--su-h-gold);
  }
  .su-pm-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(247, 243, 232, .16);
    transform-origin: left;
  }
  .su-pm-label b {
    order: 2;
    font: inherit;
    color: rgba(247, 243, 232, .5);
    letter-spacing: .12em;
  }
  .su-pm-label b::before { content: '· '; }

  /* The pages: big, numbered, one rule under each. */
  .su-pm-pages { list-style: none; margin: 6px 0 0; padding: 0; }
  .su-pm-pages li { border-bottom: 1px solid rgba(247, 243, 232, .1); }
  .su-pm-pages a {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 54px;
    padding: 4px 0;
    color: var(--su-h-cream);
    text-decoration: none;
    font-family: 'Lilita One', sans-serif;
    font-size: clamp(32px, 9.6vw, 44px);
    line-height: 1.05;
  }
  .su-pm-n { font: 700 11px Karla, sans-serif; letter-spacing: .12em; color: rgba(255, 184, 28, .8); }
  .su-pm-mask { display: block; overflow: hidden; padding: .04em 0 .08em; }
  .su-pm-word { display: block; }
  .su-pm-pages a > svg {
    color: var(--su-h-gold);
    opacity: .35;
    transition: opacity .25s ease, translate .3s var(--su-h-ease);
  }
  .su-pm-pages a[aria-current] { color: var(--su-h-gold); }
  .su-pm-pages a[aria-current] > svg,
  .su-pm-pages a:active > svg { opacity: 1; translate: 3px -3px; }

  /* THE RANGE: a row of cans to swipe. */
  .su-pm-range { margin-top: 30px; }
  .su-pm-row {
    display: flex;
    gap: 12px;
    margin: 14px calc(-1 * var(--gut, 20px)) 0;
    padding: 4px var(--gut, 20px) 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gut, 20px);
    scrollbar-width: none;
  }
  .su-pm-row::-webkit-scrollbar { display: none; }
  .su-pm-card {
    position: relative;
    flex: 0 0 128px;
    height: 176px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    border-radius: 22px;
    overflow: hidden;
    scroll-snap-align: start;
    color: var(--su-h-cream);
    text-decoration: none;
    border: 1px solid rgba(247, 243, 232, .12);
    background: rgba(247, 243, 232, .06);
    background:
      radial-gradient(85% 62% at 50% 36%, color-mix(in srgb, var(--c, #a86a3c) 58%, transparent), transparent 72%),
      rgba(247, 243, 232, .06);
  }
  .su-pm-card img,
  .su-pm-nocan {
    position: absolute;
    left: 50%;
    top: 12px;
    height: 116px;
    width: auto;
    translate: -50% 0;
    filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .35));
    transition: translate .4s var(--su-h-ease), rotate .4s var(--su-h-ease);
  }
  .su-pm-nocan { width: 46px; border-radius: 10px; background: color-mix(in srgb, var(--c, #a86a3c) 70%, var(--su-h-cream)); }
  .su-pm-card:active img { translate: -50% -4px; rotate: -4deg; }
  .su-pm-name {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Lilita One', sans-serif;
    font-size: 15px;
    line-height: 1.02;
  }
  .su-pm-name i {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--d, var(--su-h-leaf));
    box-shadow: 0 0 0 3px rgba(247, 243, 232, .16);
  }
  .su-pm-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    padding: 4px 8px;
    border-radius: 100px;
    background: var(--su-h-gold);
    color: var(--su-h-ink);
    font: 700 8.5px Karla, sans-serif;
    letter-spacing: .2em;
  }
  .su-pm-card.is-season { border-color: rgba(255, 184, 28, .55); }
  .su-pm-all {
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 14px;
    background: var(--su-h-gold);
    border-color: var(--su-h-gold);
    color: var(--su-h-ink);
  }
  .su-pm-allw { font-family: 'Lilita One', sans-serif; font-size: 22px; line-height: 1; }
  .su-pm-all svg { align-self: flex-end; width: 26px; height: 26px; }

  /* Contact: Site settings' email and phone, and where the brand is. */
  .su-pm-foot {
    position: relative;
    margin-top: auto;
    padding-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .su-pm-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    border-radius: 100px;
    border: 1px solid rgba(247, 243, 232, .22);
    color: var(--su-h-cream);
    text-decoration: none;
    font: 600 14px Karla, sans-serif;
  }
  .su-pm-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .su-pm-chip svg { flex: none; color: var(--su-h-gold); }
  .su-pm-place {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font: 400 13px Karla, sans-serif;
    color: rgba(247, 243, 232, .62);
  }
  .su-pm-place svg { color: var(--su-h-gold); }

  /* The wordmark drawn in outline behind the foot, as the design's heroes set it. */
  .su-pm-ghost {
    position: absolute;
    left: 50%;
    bottom: -0.2em;
    translate: -50% 0;
    font-family: 'Lilita One', sans-serif;
    font-size: 31vw;
    line-height: 1;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 184, 28, .14);
    pointer-events: none;
    user-select: none;
  }

  [data-su-pmenu] a:focus-visible {
    outline: 2px solid var(--su-h-gold);
    outline-offset: 3px;
    border-radius: 10px;
  }
  .su-pm-card:focus-visible { border-radius: 22px; }

  /* ---------------------------------------------------------------- *
   * The entrance: the circle opens, the pages rise in turn, the range
   * slides in, the foot follows. Leaving, everything simply goes.
   * ---------------------------------------------------------------- */
  [data-su-pmenu] .su-pm-word { translate: 0 108%; transition: translate .3s ease; }
  [data-su-pmenu] .su-pm-n,
  [data-su-pmenu] .su-pm-pages a > svg,
  [data-su-pmenu] .su-pm-label,
  [data-su-pmenu] .su-pm-foot,
  [data-su-pmenu] .su-pm-ghost { opacity: 0; transition: opacity .25s ease; }
  [data-su-pmenu] .su-pm-label::after { scale: 0 1; transition: scale .3s ease; }
  [data-su-pmenu] .su-pm-pages li { border-bottom-color: rgba(247, 243, 232, 0); transition: border-color .3s ease; }
  /* The row slides in as one (a card moved on its own would move its snap point); the
     cards fade up in turn inside it. */
  [data-su-pmenu] .su-pm-row { translate: 56px 0; transition: translate .3s ease; }
  [data-su-pmenu] .su-pm-card { opacity: 0; transition: opacity .25s ease; }

  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-word {
    translate: 0 0;
    transition: translate .8s var(--su-h-ease) calc(180ms + var(--i, 0) * 65ms);
  }
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-pages li {
    border-bottom-color: rgba(247, 243, 232, .1);
    transition: border-color .6s ease calc(260ms + var(--i, 0) * 65ms);
  }
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-n,
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-pages a > svg { opacity: 1; transition: opacity .6s ease calc(300ms + var(--i, 0) * 65ms); }
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-pages a > svg { opacity: .35; }
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-pages a[aria-current] > svg { opacity: 1; }
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-label { opacity: 1; transition: opacity .5s ease 140ms; }
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-range .su-pm-label { transition-delay: 460ms; }
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-label::after { scale: 1 1; transition: scale .9s var(--su-h-ease) 220ms; }
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-range .su-pm-label::after { transition-delay: 520ms; }
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-row { translate: 0 0; transition: translate 1.1s var(--su-h-ease) 480ms; }
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-card {
    opacity: 1;
    transition: opacity .7s ease calc(520ms + var(--i, 0) * 70ms);
  }
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-foot { opacity: 1; transition: opacity .6s ease 760ms; }
  html[data-su-pmenu-open] [data-su-pmenu] .su-pm-ghost { opacity: 1; transition: opacity 1.2s ease 600ms; }
}

/* Short phones in landscape: the pages a size down so the range is still in reach. */
@media (max-width: 899px) and (max-height: 500px) {
  .su-pm-pages a { font-size: 28px; min-height: 46px; }
}

/* The MENU word drops below 360px, where it would meet the tab; the button keeps its
   full 40px target. */
@media (max-width: 359px) {
  [data-su-menuword] { display: none !important; }
  [data-su-menupill] > button { padding: 0 !important; }
  [data-su-navpill] > a[href="/flavours"] { padding: 0 12px 0 11px !important; letter-spacing: .14em !important; }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  :has(> [data-su-utility]),
  [data-su-row]::before,
  [data-su-logo],
  [data-su-logo] img { transition: none !important; }
  [data-su-menupill],
  [data-su-navpill] { transition: opacity .2s linear !important; }
  html[data-su-hdr-away]:not([data-su-pmenu-open]) [data-su-menupill],
  html[data-su-hdr-away]:not([data-su-pmenu-open]) [data-su-navpill] { translate: none !important; }

  [data-su-pmenu],
  html[data-su-pmenu-open] [data-su-pmenu] {
    clip-path: none;
    opacity: 0;
    transition: opacity .2s linear, visibility 0s linear .2s;
  }
  html[data-su-pmenu-open] [data-su-pmenu] { opacity: 1; transition: opacity .2s linear, visibility 0s; }
  [data-su-pmenu] *,
  html[data-su-pmenu-open] [data-su-pmenu] * {
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transition: none !important;
  }
  [data-su-pmenu] .su-pm-n,
  [data-su-pmenu] .su-pm-label,
  [data-su-pmenu] .su-pm-foot,
  [data-su-pmenu] .su-pm-ghost,
  [data-su-pmenu] .su-pm-card { opacity: 1 !important; }
  [data-su-pmenu] .su-pm-pages li { border-bottom-color: rgba(247, 243, 232, .1); }
}


/* ==================================================================== *
 * THE DESKTOP MENU (900px and up, 2026-10-14)
 *
 * The phone menu's language at a desktop's size. A forest panel under the header row,
 * between the two pills' outer edges, over a dimmed page:
 *   THE HOUSE   the pages, numbered, in Lilita, rising out of line masks; the current
 *               one gold. Under them the contact chips (Site settings).
 *   THE RANGE   a tidy grid of tinted can cards (the flavour in season first, tagged);
 *               a name is set on one line and sized to fit (header.js, fitText) — never
 *               wrapped, never cut.
 *   FEATURE     the flavour in season, or the one under the pointer: the can in its own
 *               zone above, the name and the link in theirs below — they cannot meet.
 * Opening: the scrim fades, the panel opens as a circle from the MENU pill, the pages
 * rise in turn, the cards rise with their cans a beat behind, the feature card slides in.
 * Under prefers-reduced-motion it simply fades.
 * ==================================================================== */
@property --su-dm-c {
  syntax: '<color>';
  inherits: true;
  initial-value: #a86a3c;
}

@media (min-width: 900px) {
  :root {
    --su-d-forest: var(--color-forest, #16321C);
    --su-d-gold: var(--color-gold, #FFB81C);
    --su-d-cream: var(--color-cream, #F7F3E8);
    --su-d-ink: var(--color-ink, #2D2926);
    --su-d-leaf: var(--color-leaf, #007A33);
    --su-d-ease: cubic-bezier(.2, .8, .2, 1);
  }

  /* The design's panel steps back while this one is in charge. Its open state (inline
     pointer-events) is still what header.js reads. */
  html[data-su-dmenu-on] [data-su-megapanel] { visibility: hidden !important; opacity: 0 !important; }

  /* The page holds still while the menu is open; the header stays above the scrim. */
  html[data-su-dmenu-open] { overflow: hidden !important; scrollbar-gutter: stable; }
  html[data-su-dmenu-open] :has(> [data-su-utility]) { z-index: 1000 !important; }

  [data-su-dmenu] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .55s;
    color: var(--su-d-cream);
    font-family: Karla, sans-serif;
    /* The homepage export sets its own spacing on the body; this menu sets its own. */
    letter-spacing: normal;
    text-transform: none;
  }
  html[data-su-dmenu-open] [data-su-dmenu] {
    visibility: visible;
    pointer-events: auto;
    transition: visibility 0s linear 0s;
  }

  .su-dm-scrim {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--su-d-forest) 42%, transparent);
    -webkit-backdrop-filter: blur(6px) saturate(.9);
    backdrop-filter: blur(6px) saturate(.9);
    opacity: 0;
    transition: opacity .45s ease;
    cursor: pointer;
  }
  html[data-su-dmenu-open] .su-dm-scrim { opacity: 1; transition: opacity .6s ease; }

  .su-dm-panel {
    position: absolute;
    top: var(--su-dm-top, 128px);
    left: var(--su-dm-l, 32px);
    right: var(--su-dm-r, 32px);
    height: min(calc(100vh - var(--su-dm-top, 128px) - 24px), 700px);
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 30px;
    background:
      radial-gradient(70% 70% at 100% 0%, rgba(255, 184, 28, .14), rgba(255, 184, 28, 0) 60%),
      radial-gradient(60% 80% at 0% 100%, rgba(0, 122, 51, .4), rgba(0, 122, 51, 0) 70%),
      var(--su-d-forest);
    box-shadow: 0 50px 90px -40px rgba(10, 24, 13, .7), inset 0 0 0 1px rgba(247, 243, 232, .08);
    clip-path: circle(0px at var(--su-dm-ox, 40px) var(--su-dm-oy, -40px));
    transition: clip-path .5s cubic-bezier(.6, 0, .4, 1);
  }
  html[data-su-dmenu-open] .su-dm-panel {
    clip-path: circle(var(--su-dm-rad, 160vmax) at var(--su-dm-ox, 40px) var(--su-dm-oy, -40px));
    transition: clip-path 1.1s var(--su-d-ease);
  }

  .su-dm-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(40% 50% at calc(70% + var(--mx, 0) * 12%) calc(30% + var(--my, 0) * 12%), rgba(255, 184, 28, .1), rgba(255, 184, 28, 0) 70%);
  }
  .su-dm-ghost {
    position: absolute;
    left: -.04em;
    bottom: -.24em;
    font-family: 'Lilita One', sans-serif;
    font-size: clamp(140px, 17vw, 300px);
    line-height: 1;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 184, 28, .12);
    pointer-events: none;
    user-select: none;
    translate: calc(var(--mx, 0) * -24px) 0;
    transition: translate .8s var(--su-d-ease), opacity 1.2s ease;
  }

  .su-dm-grid {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(210px, .85fr) minmax(0, 2fr) minmax(200px, .8fr);
    gap: clamp(24px, 3vw, 48px);
    padding: clamp(26px, 3.2vw, 44px);
  }
  .su-dm-grid > * { min-width: 0; min-height: 0; }

  .su-dm-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 11px Karla, sans-serif;
    letter-spacing: .26em;
    color: var(--su-d-gold);
    white-space: nowrap;
  }
  .su-dm-label::after {
    content: '';
    order: 3;
    flex: 1;
    height: 1px;
    background: rgba(247, 243, 232, .16);
    transform-origin: left;
  }
  .su-dm-label b {
    order: 2;
    font: inherit;
    color: rgba(247, 243, 232, .5);
    letter-spacing: .12em;
  }
  .su-dm-label b::before { content: '· '; }

  /* THE HOUSE */
  .su-dm-house { display: flex; flex-direction: column; }
  .su-dm-pages { list-style: none; margin: 10px 0 0; padding: 0; }
  .su-dm-pages li { border-bottom: 1px solid rgba(247, 243, 232, .1); }
  .su-dm-pages a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    padding: clamp(4px, .9vh, 9px) 0;
    color: var(--su-d-cream);
    text-decoration: none;
    font-family: 'Lilita One', sans-serif;
    font-size: clamp(26px, min(2.7vw, 5.2vh), 44px);
    line-height: 1.05;
    transition: color .3s ease;
  }
  .su-dm-n { font: 700 11px Karla, sans-serif; letter-spacing: .12em; color: rgba(255, 184, 28, .8); }
  .su-dm-mask { display: block; overflow: hidden; padding: .04em 0 .08em; min-width: 0; }
  .su-dm-word {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    transition: translate .45s var(--su-d-ease);
  }
  .su-dm-pages a > svg {
    color: var(--su-d-gold);
    opacity: .3;
    transition: opacity .3s ease, translate .35s var(--su-d-ease);
  }
  .su-dm-pages a:hover, .su-dm-pages a:focus-visible { color: var(--su-d-gold); }
  .su-dm-pages a:hover .su-dm-word { translate: 10px 0; }
  .su-dm-pages a:hover > svg,
  .su-dm-pages a:focus-visible > svg,
  .su-dm-pages a[aria-current] > svg { opacity: 1; translate: 3px -3px; }
  .su-dm-pages a[aria-current] { color: var(--su-d-gold); }

  .su-dm-foot {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .su-dm-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 14px;
    border-radius: 100px;
    border: 1px solid rgba(247, 243, 232, .2);
    color: var(--su-d-cream);
    text-decoration: none;
    font: 600 13px Karla, sans-serif;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
  }
  .su-dm-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .su-dm-chip svg { flex: none; color: var(--su-d-gold); }
  .su-dm-chip:hover { background: var(--su-d-gold); border-color: var(--su-d-gold); color: var(--su-d-ink); }
  .su-dm-chip:hover svg { color: var(--su-d-ink); }
  .su-dm-place {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font: 400 13px Karla, sans-serif;
    color: rgba(247, 243, 232, .62);
  }
  .su-dm-place svg { color: var(--su-d-gold); flex: none; }

  /* THE RANGE */
  .su-dm-range { display: flex; flex-direction: column; }
  .su-dm-all {
    order: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--su-d-cream);
    text-decoration: none;
    font: 700 11px Karla, sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: color .3s ease;
  }
  .su-dm-all svg { width: 14px; height: 14px; color: var(--su-d-gold); transition: translate .35s var(--su-d-ease); }
  .su-dm-all:hover { color: var(--su-d-gold); }
  .su-dm-all:hover svg { translate: 3px -3px; }

  .su-dm-cards {
    flex: 1;
    min-height: 0;
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows, 3), minmax(0, 1fr));
    gap: 12px;
  }
  .su-dm-card {
    --px: 0;
    --py: 0;
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 12px 12px;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
    color: var(--su-d-cream);
    text-decoration: none;
    border: 1px solid rgba(247, 243, 232, .1);
    background:
      radial-gradient(80% 70% at 50% 42%, color-mix(in srgb, var(--c, #a86a3c) 46%, transparent), transparent 72%),
      rgba(247, 243, 232, .05);
    transition: border-color .35s ease, background-color .35s ease;
  }
  .su-dm-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 60% at calc(50% + var(--px) * 40%) calc(40% + var(--py) * 40%), color-mix(in srgb, var(--c, #a86a3c) 60%, transparent), transparent 70%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
  }
  .su-dm-card:hover, .su-dm-card.is-on { border-color: color-mix(in srgb, var(--c, #a86a3c) 70%, var(--su-d-cream)); }
  .su-dm-card:hover::before, .su-dm-card.is-on::before { opacity: 1; }
  .su-dm-card.is-season { border-color: rgba(255, 184, 28, .5); }

  .su-dm-cimg {
    position: relative;
    flex: 1;
    min-height: 0;
    display: block;
    perspective: 600px;
  }
  .su-dm-cimg img,
  .su-dm-nocan {
    position: absolute;
    left: 50%;
    top: 4%;
    height: 92%;
    width: auto;
    max-width: 90%;
    object-fit: contain;
    translate: -50% 0;
    filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .35));
    transform: rotateY(calc(var(--px) * 18deg)) rotateX(calc(var(--py) * -10deg));
    transition: transform .5s var(--su-d-ease), scale .5s var(--su-d-ease);
  }
  .su-dm-nocan { width: 34%; border-radius: 10px; background: color-mix(in srgb, var(--c, #a86a3c) 70%, var(--su-d-cream)); }
  .su-dm-card:hover .su-dm-cimg img { scale: 1.07; }

  .su-dm-cname {
    position: relative;
    flex: none;
    display: block;
    margin-top: 8px;
    font-family: 'Lilita One', sans-serif;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.1;
    text-align: center;
  }
  .su-dm-cname > span { display: block; white-space: nowrap; overflow: hidden; }
  .su-dm-dot {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--d, var(--su-d-leaf));
    box-shadow: 0 0 0 3px rgba(247, 243, 232, .16);
  }
  /* The last tile of a short row: the whole range, in gold. */
  .su-dm-alltile {
    justify-content: space-between;
    padding: 16px;
    background: var(--su-d-gold);
    border-color: var(--su-d-gold);
    color: var(--su-d-ink);
  }
  .su-dm-alltile::before { display: none; }
  .su-dm-allw {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Lilita One', sans-serif;
    font-size: clamp(18px, 1.7vw, 26px);
    line-height: 1;
  }
  .su-dm-alltile svg { align-self: flex-end; width: 28px; height: 28px; transition: translate .35s var(--su-d-ease); }
  .su-dm-alltile:hover { border-color: var(--su-d-cream); }
  .su-dm-alltile:hover svg { translate: 4px -4px; }
  .su-dm-tag {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 4px 8px;
    border-radius: 100px;
    background: var(--su-d-gold);
    color: var(--su-d-ink);
    font: 700 8.5px Karla, sans-serif;
    letter-spacing: .2em;
    white-space: nowrap;
  }

  /* FEATURE: the picture zone above, the words below — separate, so they never meet. */
  .su-dm-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    overflow: hidden;
    color: var(--su-d-cream);
    text-decoration: none;
    border: 1px solid rgba(247, 243, 232, .12);
    background:
      radial-gradient(90% 60% at 50% 38%, color-mix(in srgb, var(--su-dm-c) 70%, transparent), transparent 75%),
      linear-gradient(180deg, color-mix(in srgb, var(--su-dm-c) 22%, var(--su-d-forest)), color-mix(in srgb, var(--su-d-forest) 88%, #000));
    transition: --su-dm-c .7s ease, border-color .35s ease;
  }
  .su-dm-feature:hover { border-color: rgba(255, 184, 28, .55); }
  .su-dm-fimg {
    position: relative;
    flex: 1;
    min-height: 0;
    display: block;
  }
  .su-dm-fhalo {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 64%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    border: 1px solid rgba(247, 243, 232, .18);
    box-shadow: 0 0 0 18px rgba(247, 243, 232, .04), 0 0 0 40px rgba(247, 243, 232, .025);
  }
  .su-dm-fimg img {
    position: absolute;
    left: 50%;
    top: 7%;
    height: 86%;
    width: auto;
    max-width: 86%;
    object-fit: contain;
    translate: calc(-50% + var(--mx, 0) * 10px) 0;
    filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .4));
    transition: opacity .5s ease, translate .6s var(--su-d-ease), rotate .6s var(--su-d-ease);
  }
  .su-dm-fimg img.is-swap { animation: su-dm-swap .7s var(--su-d-ease) both; }
  .su-dm-fimg img.is-out { opacity: 0; rotate: -6deg; translate: calc(-50% - 24px) 8px; }
  @keyframes su-dm-swap {
    from { opacity: 0; transform: translateY(26px) rotate(6deg) scale(.94); }
    to { opacity: 1; transform: none; }
  }

  .su-dm-ftext {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
    border-top: 1px solid rgba(247, 243, 232, .12);
    background: color-mix(in srgb, var(--su-d-forest) 70%, transparent);
  }
  .su-dm-fkick {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    font: 700 11px Karla, sans-serif;
    letter-spacing: .2em;
    color: rgba(247, 243, 232, .62);
  }
  .su-dm-fkick i { width: 8px; height: 8px; border-radius: 50%; background: var(--su-dm-d, var(--su-d-gold)); box-shadow: 0 0 0 3px rgba(247, 243, 232, .16); }
  .su-dm-fseason {
    padding: 4px 9px;
    border-radius: 100px;
    background: var(--su-d-gold);
    color: var(--su-d-ink);
    font: 700 9px Karla, sans-serif;
    letter-spacing: .22em;
  }
  .su-dm-fname {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Lilita One', sans-serif;
    font-size: clamp(26px, 2.5vw, 40px);
    line-height: 1;
    color: var(--su-d-cream);
  }
  .su-dm-fcta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 10px 16px;
    border-radius: 100px;
    background: var(--su-d-gold);
    color: var(--su-d-ink);
    font: 700 12px Karla, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .su-dm-fcta svg { width: 15px; height: 15px; transition: translate .35s var(--su-d-ease); }
  .su-dm-feature:hover .su-dm-fcta svg { translate: 3px -3px; }
  .su-dm-fkick.is-in, .su-dm-fname.is-in { animation: su-dm-rise .55s var(--su-d-ease) both; }
  @keyframes su-dm-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  [data-su-dmenu] a:focus-visible {
    outline: 2px solid var(--su-d-gold);
    outline-offset: 3px;
    border-radius: 10px;
  }
  .su-dm-card:focus-visible { border-radius: 20px; }
  .su-dm-feature:focus-visible { border-radius: 24px; }

  /* ---------------------------------------------------------------- *
   * The entrance. Leaving, everything simply goes as the circle closes.
   * ---------------------------------------------------------------- */
  [data-su-dmenu] .su-dm-word { translate: 0 110%; transition: translate .3s ease; }
  [data-su-dmenu] .su-dm-n,
  [data-su-dmenu] .su-dm-pages a > svg,
  [data-su-dmenu] .su-dm-label,
  [data-su-dmenu] .su-dm-foot,
  [data-su-dmenu] .su-dm-ghost { opacity: 0; transition: opacity .25s ease; }
  [data-su-dmenu] .su-dm-label::after { scale: 0 1; transition: scale .3s ease; }
  [data-su-dmenu] .su-dm-pages li { border-bottom-color: rgba(247, 243, 232, 0); transition: border-color .3s ease; }
  [data-su-dmenu] .su-dm-card { opacity: 0; translate: 0 34px; transition: opacity .25s ease, translate .3s ease, border-color .35s ease; }
  [data-su-dmenu] .su-dm-cimg { translate: 0 26px; transition: translate .3s ease; }
  [data-su-dmenu] .su-dm-feature { opacity: 0; translate: 40px 0; transition: opacity .25s ease, translate .3s ease, --su-dm-c .7s ease, border-color .35s ease; }

  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-word {
    translate: 0 0;
    transition: translate .85s var(--su-d-ease) calc(200ms + var(--i, 0) * 60ms);
  }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-pages a:hover .su-dm-word { translate: 10px 0; transition: translate .45s var(--su-d-ease); }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-pages li {
    border-bottom-color: rgba(247, 243, 232, .1);
    transition: border-color .6s ease calc(260ms + var(--i, 0) * 60ms);
  }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-n,
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-pages a > svg { opacity: 1; transition: opacity .6s ease calc(320ms + var(--i, 0) * 60ms), translate .35s var(--su-d-ease); }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-pages a:not([aria-current]):not(:hover):not(:focus-visible) > svg { opacity: .3; }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-label { opacity: 1; transition: opacity .5s ease 140ms; }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-range .su-dm-label { transition-delay: 260ms; }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-label::after { scale: 1 1; transition: scale .9s var(--su-d-ease) 200ms; }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-range .su-dm-label::after { transition-delay: 320ms; }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-card {
    opacity: 1;
    translate: 0 0;
    transition: opacity .6s ease calc(300ms + var(--i, 0) * 45ms), translate .9s var(--su-d-ease) calc(300ms + var(--i, 0) * 45ms), border-color .35s ease;
  }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-cimg {
    translate: 0 0;
    transition: translate 1.1s var(--su-d-ease) calc(380ms + var(--i, 0) * 45ms);
  }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-feature {
    opacity: 1;
    translate: 0 0;
    transition: opacity .7s ease 380ms, translate 1s var(--su-d-ease) 380ms, --su-dm-c .7s ease, border-color .35s ease;
  }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-foot { opacity: 1; transition: opacity .6s ease 650ms; }
  html[data-su-dmenu-open] [data-su-dmenu] .su-dm-ghost { opacity: 1; transition: opacity 1.4s ease 500ms, translate .8s var(--su-d-ease); }
}

/* Narrow desktops: the side columns give the range its room, so a long name stays on
   one line at a readable size. */
@media (min-width: 900px) and (max-width: 1140px) {
  .su-dm-grid { grid-template-columns: minmax(180px, .72fr) minmax(0, 2fr) minmax(170px, .7fr); gap: 22px; }
  .su-dm-card { padding: 8px 8px 10px; }
  .su-dm-cards { gap: 10px; }
}

/* Short desktop screens: the pages a size down, the chips tighter. */
@media (min-width: 900px) and (max-height: 640px) {
  .su-dm-pages a { font-size: clamp(22px, 4.6vh, 30px); }
  .su-dm-foot { padding-top: 10px; }
  .su-dm-place { display: none; }
}

@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .su-dm-panel,
  html[data-su-dmenu-open] .su-dm-panel { clip-path: none; transition: none; }
  [data-su-dmenu] { opacity: 0; transition: opacity .2s linear, visibility 0s linear .2s; }
  html[data-su-dmenu-open] [data-su-dmenu] { opacity: 1; transition: opacity .2s linear, visibility 0s; }
  [data-su-dmenu] *,
  html[data-su-dmenu-open] [data-su-dmenu] * {
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  [data-su-dmenu] .su-dm-n,
  [data-su-dmenu] .su-dm-label,
  [data-su-dmenu] .su-dm-foot,
  [data-su-dmenu] .su-dm-ghost,
  [data-su-dmenu] .su-dm-card,
  [data-su-dmenu] .su-dm-feature,
  [data-su-dmenu] .su-dm-pages a > svg { opacity: 1 !important; }
  [data-su-dmenu] .su-dm-label::after { scale: 1 1 !important; }
  [data-su-dmenu] .su-dm-pages li { border-bottom-color: rgba(247, 243, 232, .1); }
  .su-dm-fimg img.is-out { display: none; }
}