/* =====================================================================================================
   BOBA NOVA  V2  -  DESIGN SYSTEM
   -----------------------------------------------------------------------------------------------------
   One cafe, two rooms. The MENU BOARD (dark forest green, cream lettering, gold prices, monospaced
   letters) and the STORE (warm white, sage counter, wicker tan) share one small set of tokens.
   Every rule below is built from the values in this block. Change a value here and it changes everywhere.

   COLOR    forest / forest-deep / ink      the darks (forest = the menu board green)
            cream / white                   the lights (cream = the board's lettering, and the page)
            sage / sage-tint                the store's fluted counter
            gold                            prices, selected states and small details only
            tan / tan-soft                  wicker, a warm secondary neutral
            peach                           a rare accent
   TYPE     Rubik      display: headings, buttons, the wordmark (real weights 600 / 700 / 800 / 900, tracking never tighter than -0.04em)
            Space Mono the menu board: category names, prices, labels (real weights 400 / 700)
            Figtree    body copy (real weights 400 / 500 / 600)
            Scale      hero 40-72 / h1 36-56 / h2 28-40 / h3 22 / lead 18 / body 16 / small 14 / label 12
   SPACE    4  8  12  16  24  32  48  64  96   (--s-1 ... --s-9)
   RADIUS   8 (small)  16 (medium)  28 (large)  pill (buttons and chips only)
   BORDER   one hairline: 1px, 14% ink on light, 18% cream on dark
   MOTION   120ms press / 200ms hover / 320ms entrance, ease-out; only transform, opacity and color move
   WIDTHS   container 1200  /  narrow reading column 736  /  gutter 16 to 32
   LAYERS   content 0 to 3 (inside one component), sticky bars 30, dock 45, header 50, cookie notice 70; sheets and viewers use
            the browser's top layer, so they need no number
   ===================================================================================================== */

@font-face { font-family: "Rubik"; src: url("../fonts/rubik-latin-wght.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-latin-wght.woff2") format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/space-mono-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* Fallback faces. Until a web font arrives the browser shows a system font; these re-scale Arial and Courier New to each web
   font's average letter width and its ascent / descent (measured from the real files), so lines break in the same places and the
   page does not jump when the fonts load. If a device has none of the named fonts the normal system fallback is used instead. */
@font-face { font-family: "Rubik Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); font-weight: 300 599; size-adjust: 104%; ascent-override: 90.4%; descent-override: 24.0%; line-gap-override: 0%; }
@font-face { font-family: "Rubik Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 600 699; size-adjust: 100.5%; ascent-override: 93.5%; descent-override: 24.9%; line-gap-override: 0%; }
@font-face { font-family: "Rubik Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 700 799; size-adjust: 102%; ascent-override: 92.2%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: "Rubik Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 800 849; size-adjust: 105%; ascent-override: 89.5%; descent-override: 23.8%; line-gap-override: 0%; }
@font-face { font-family: "Rubik Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 850 900; size-adjust: 107.5%; ascent-override: 87.4%; descent-override: 23.3%; line-gap-override: 0%; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); font-weight: 300 449; size-adjust: 101%; ascent-override: 94.1%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo"); font-weight: 450 599; size-adjust: 102%; ascent-override: 93.1%; descent-override: 24.5%; line-gap-override: 0%; }
@font-face { font-family: "Figtree Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold"); font-weight: 600 900; size-adjust: 96%; ascent-override: 99.0%; descent-override: 26.0%; line-gap-override: 0%; }
@font-face { font-family: "Space Mono Fallback"; src: local("Courier New"), local("Courier"), local("Liberation Mono"), local("Cousine"); font-weight: 400; size-adjust: 102%; ascent-override: 109.8%; descent-override: 35.3%; line-gap-override: 0%; }
@font-face { font-family: "Space Mono Fallback"; src: local("Courier New Bold"), local("Courier-Bold"), local("CourierNewPS-BoldMT"), local("Liberation Mono Bold"), local("Cousine Bold"); font-weight: 700; size-adjust: 102%; ascent-override: 109.8%; descent-override: 35.3%; line-gap-override: 0%; }

:root {
  /* color */
  --forest: #17582d;
  --forest-deep: #0f3d20;
  --ink: #12281b;
  --ink-soft: #3f5748;
  --cream: #f6f0df;
  --white: #ffffff;
  --sage: #6f9a72;
  --sage-tint: #e3ebdb;
  --sage-glow: #eef4e8;     /* the lighter centre of a picture box: a soft spotlight, never a second colour */
  --gold: #e6d08b;
  --tan: #c9a877;
  --tan-soft: #ecdcc0;
  --peach: #f3cdb4;
  --logo-green: #347825;   /* the green of the logo disc: the one place it is used on its own is the hover fill on dark buttons */

  /* lines and overlays: the ink and the cream at set strengths, so a component never invents its own colour */
  --hairline: rgb(18 40 27 / 0.14);
  --hairline-dark: rgb(246 240 223 / 0.18);
  --forest-line: rgb(23 88 45 / 0.5);           /* a thin green outline (the menu key card) */
  --line-strong: rgb(18 40 27 / 0.32);          /* the outline of a secondary button or a chip */
  --line-dark-strong: rgb(246 240 223 / 0.5);   /* the same on a dark surface */
  --ground: rgb(24 52 32 / 0.22);                /* the soft contact shadow under a cup or plate */
  --wash: rgb(18 40 27 / 0.07);                 /* hover and pressed fill on a light surface */
  --wash-dark: rgb(246 240 223 / 0.12);         /* hover fill on a dark surface */
  --cream-70: rgb(246 240 223 / 0.74);
  --cream-92: rgb(246 240 223 / 0.92);          /* cream that lets a little of the page show through (sticky bars, light text on dark) */
  --focus: var(--forest);

  /* the drink icon system marks only the exceptions: a red crossed-out mug = caffeine free, a milk bottle = dairy by default.
     Light-surface values here; dark surfaces (the footer, the hero) switch to the lighter pair below. */
  --caf-yes: #1d7a36;
  --caf-no: #c23b2b;
  --dairy: #3f5748;
  --caf-yes-on-dark: #86e09b;
  --caf-no-on-dark: #ff8f80;

  /* type */
  --font-display: "Rubik", "Rubik Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "Space Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display-hero-weight: 900;   /* the headline is set as heavy and tight as the lettering on the menu boards */
  --display-hero-tracking: -0.04em;
  --fs-hero: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  --fs-h1: clamp(2.25rem, 1.55rem + 3vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  --fs-h3: 1.375rem;
  --fs-lead: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* space */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2rem);
  --sec-y: clamp(3rem, 2rem + 4.2vw, 6rem);
  --sec-y-tight: clamp(2.5rem, 1.7rem + 3.2vw, 4rem);

  /* shape */
  --r-sm: 0.5rem;
  --r-md: 1rem;
  --r-lg: 1.75rem;
  --r-pill: 999px;

  /* layout */
  --container: 75rem;
  --measure: 38rem;
  --header-h: 3.75rem;

  /* motion */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --shadow-float: 0 12px 40px rgb(8 28 16 / 0.28);
}

@media (min-width: 64rem) {
  :root { --header-h: 4.5rem; }
}

/* PHONES: the same scale, a notch smaller. Headings come down about 12%, body copy about 6%, section padding about 17%, and the
   header 13%, so the page feels less zoomed in without anything becoming small. */
@media (max-width: 47.99rem) {
  :root {
    --fs-hero: clamp(1.5rem, 1.05rem + 2.1vw, 2.125rem);
    --fs-h1: clamp(1.875rem, 1.35rem + 2.7vw, 3.5rem);
    --fs-h2: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    --fs-h3: 1.2rem;
    --fs-lead: 1.03rem;
    --fs-body: 0.9375rem;
    --fs-small: 0.84rem;
    --sec-y: clamp(2.5rem, 1.6rem + 2.4vw, 6rem);
    --sec-y-tight: clamp(2rem, 1.4rem + 2vw, 4rem);
    --header-h: 3.25rem;
  }
}

/* ---------------------------------------------------------------------------------------------------
   BASE: reset, document, type
   --------------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  color-scheme: light;
  scrollbar-gutter: stable;   /* the page does not shift sideways when a sheet or viewer locks the scrolling */
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}
@media (max-width: 63.99rem) {
  /* keep a keyboard-focused control from sliding under the fixed bottom dock */
  html { scroll-padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; }
html.is-locked { overflow: hidden; }

img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
/* controls respond at once (no double-tap-zoom wait) and a long press does not select their labels; ordinary links stay selectable */
button, a, summary, [role="button"] { touch-action: manipulation; }
button, [role="button"], summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* a scrolled dialog or side-scrolling row never drags the page (or the back-swipe) along with it */
dialog { overscroll-behavior: contain; }
.season__row, .crepes, .cat-nav__scroll, .chips { overscroll-behavior-x: contain; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { padding: 0; list-style: none; }
address { font-style: normal; }
[hidden] { display: none !important; }

::selection { background: var(--gold); color: var(--forest-deep); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--cream);
  color: var(--forest-deep);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; --focus: var(--forest); }

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

/* ---------------------------------------------------------------------------------------------------
   TYPE
   Display (Rubik) tightens as it grows; labels (Space Mono) open up as they shrink. Body stays at 0.
   --------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
h4 { font-size: var(--fs-body); line-height: 1.3; letter-spacing: 0; }
p { text-wrap: pretty; }

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); max-width: var(--measure); }
.small { font-size: var(--fs-small); line-height: 1.5; }
.muted { color: var(--ink-soft); }

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.label--star { display: inline-flex; align-items: center; gap: var(--s-2); }
.label--star svg { width: 0.875rem; height: 0.875rem; flex: none; color: var(--gold); }

/* ---------------------------------------------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(46rem + 2 * var(--gutter)); }

.sec { padding-block: var(--sec-y); }
.sec--tight { padding-block: var(--sec-y-tight); }
.sec--top-flush { padding-top: 0; }

/* surfaces: the same cafe in its two rooms */
.surface-dark, .surface-deep, .on-dark { --focus: var(--gold); --caf-yes: var(--caf-yes-on-dark); --caf-no: var(--caf-no-on-dark); --dairy: var(--cream); }
.surface-dark { background: var(--forest); color: var(--cream); }
.surface-deep { background: var(--forest-deep); color: var(--cream); }

/* the drink icon system (see the tokens): one size everywhere */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--caf-yes { color: var(--caf-yes); }
.ico--caf-no { color: var(--caf-no); }
.ico--dairy { color: var(--dairy); }
.surface-sage { background: var(--sage-tint); }
.surface-tan {
  background-color: var(--tan-soft);
  /* faint woven texture, a nod to the wicker pendant lights */
  background-image:
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.22) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgb(120 85 40 / 0.05) 0 2px, transparent 2px 9px);
}

/* ---------------------------------------------------------------------------------------------------
   COMPONENTS: buttons (primary, secondary), text link, round icon button
   One height, one radius, one weight. Press = a quick 3% shrink. Hover only where hover exists.
   --------------------------------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--forest);
  --btn-fg: var(--cream);
  --btn-bd: transparent;
  --btn-bg-hover: var(--forest-deep);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3rem;
  padding: 0 var(--s-5);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.12s var(--ease);
}
.btn svg { width: 1.125rem; height: 1.125rem; flex: none; transition: transform 0.2s var(--ease); }
.btn:active { transform: scale(0.97); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
  --btn-bg-hover: var(--wash);
}
.btn--sm { min-height: 2.5rem; padding: 0 var(--s-4); font-size: var(--fs-small); }
@media (max-width: 47.99rem) {
  /* phones: a slightly lower, narrower button (still a 44px target) */
  .btn { min-height: 2.75rem; padding: 0 var(--s-4); font-size: var(--fs-body); }
  .btn--sm { min-height: 2.5rem; padding: 0 var(--s-3); }
  .btn--fx { --fx-pad: var(--s-4); }
}
.btn--sm::after { content: ""; position: absolute; inset: -0.25rem 0; } /* 48px touch area, 40px look */
.btn--block { width: 100%; }

.surface-dark .btn--primary, .surface-deep .btn--primary, .on-dark .btn--primary {
  --btn-bg: var(--cream);
  --btn-fg: var(--forest-deep);
  --btn-bg-hover: var(--white);
}
.surface-dark .btn--secondary, .surface-deep .btn--secondary, .on-dark .btn--secondary {
  --btn-fg: var(--cream);
  --btn-bd: var(--line-dark-strong);
  --btn-bg-hover: var(--wash-dark);
}

/* ---- the interactive hover button: used only for the major desktop calls to action (Order now, See the menu) ----
   Rest: the label. Hover (or keyboard focus) on a device that can hover: the label slides out to the right, the same label with an
   arrow slides in from the right, and a small shape grows to fill the button, all in about 300 ms. On touch there is no hover to
   depend on: the extra layers are not drawn and the button is a normal one with the usual press state.
   --fx-fill = the shape that grows; --fx-fg-hover = the text colour once it has grown. */
.btn--fx { --fx-fill: var(--cream); --fx-fg-hover: var(--forest-deep); --btn-bd: var(--btn-bg); --fx-pad: var(--s-5); }
.btn--sm.btn--fx { --fx-pad: var(--s-4); }
.btn--fx .fx__reveal, .btn--fx .fx__dot { display: none; }
.btn--primary.btn--fx { --btn-bd: var(--forest); }
.btn--secondary.btn--fx { --fx-fill: var(--forest); --fx-fg-hover: var(--cream); --btn-bd: var(--line-strong); }
.surface-dark .btn--primary.btn--fx, .surface-deep .btn--primary.btn--fx, .on-dark .btn--primary.btn--fx { --fx-fill: var(--logo-green); --fx-fg-hover: var(--cream); --btn-bd: var(--cream); }
.surface-dark .btn--secondary.btn--fx, .surface-deep .btn--secondary.btn--fx, .on-dark .btn--secondary.btn--fx { --fx-fill: var(--cream); --fx-fg-hover: var(--forest-deep); --btn-bd: var(--line-dark-strong); }
@media (hover: hover) and (pointer: fine) {
  .btn--fx { overflow: hidden; isolation: isolate; }
  .btn--fx .fx__label { display: inline-block; padding-left: 1rem; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }   /* room for the small shape that sits before the label */
  .btn--fx .fx__reveal {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    color: var(--fx-fg-hover);
    opacity: 0;
    transform: translateX(3rem);
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
    pointer-events: none;
    white-space: nowrap;
  }
  .btn--fx .fx__dot {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background: var(--fx-fill);
    clip-path: circle(0.25rem at calc(var(--fx-pad) + 0.25rem) 50%);
    transition: clip-path 0.3s var(--ease);
    pointer-events: none;
  }
  .btn.btn--fx:hover, .btn.btn--fx:focus-visible { background: var(--btn-bg); }
  .btn--fx:hover .fx__label, .btn--fx:focus-visible .fx__label { transform: translateX(3rem); opacity: 0; }
  .btn--fx:hover .fx__reveal, .btn--fx:focus-visible .fx__reveal { transform: none; opacity: 1; }
  .btn--fx:hover .fx__dot, .btn--fx:focus-visible .fx__dot { clip-path: circle(150% at calc(var(--fx-pad) + 0.25rem) 50%); }
  .btn.btn--fx:hover svg { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn--fx .fx__label, .btn--fx .fx__reveal, .btn--fx .fx__dot { transition-duration: 0.01ms; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  color: var(--forest);
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
}
.link-arrow svg { width: 1.125rem; height: 1.125rem; transition: transform 0.2s var(--ease); }
.surface-dark .link-arrow, .surface-deep .link-arrow, .on-dark .link-arrow { color: var(--cream); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), transform 0.12s var(--ease);
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 1.375rem; height: 1.375rem; }

.social-link {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  color: inherit;
  transition: background-color 0.2s var(--ease), transform 0.12s var(--ease);
}
.social-link svg { width: 1.25rem; height: 1.25rem; }
.social-link:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--btn-bg-hover); }
  .btn:hover svg { transform: translate(2px, -2px); }
  .link-arrow:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
  .link-arrow:hover svg { transform: translateX(3px); }
  .icon-btn:hover, .social-link:hover { background: var(--wash-dark); }
  .surface-sage .social-link:hover, .sheet .social-link:hover { background: var(--wash); }
}

/* ---------------------------------------------------------------------------------------------------
   CHROME: header, mobile menu sheet, footer, mobile dock, cookie banner
   The header is the same forest green as the menu board on every page, so nothing switches theme.
   --------------------------------------------------------------------------------------------------- */
.site-header {
  --focus: var(--gold);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--cream);
  background: transparent;
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-solid {
  background: rgb(15 61 32 / 0.92);
  box-shadow: 0 1px 0 var(--hairline-dark);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
}
.site-header__bar { display: flex; align-items: center; gap: var(--s-4); height: 100%; }

.brand { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; margin-right: auto; text-decoration: none; }
.brand__mark { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
@media (max-width: 63.99rem) { .brand__mark { width: 2.25rem; height: 2.25rem; } }
.brand__word {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
@media (max-width: 47.99rem) { .brand__word { letter-spacing: 0.14em; } }
.brand__word span { color: var(--gold); }

.site-nav { display: none; align-items: center; gap: var(--s-1); }
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  color: rgb(246 240 223 / 0.86);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.site-nav a[aria-current="page"] { color: var(--cream); }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: 0.4rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

.site-header__tools { display: none; align-items: center; gap: var(--s-3); }

/* the social icons arrive here once the homepage info strip has scrolled away */
.nav-social {
  display: flex;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.9);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
}
.nav-social.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

.menu-toggle { margin-right: calc(-1 * var(--s-2)); }

@media (min-width: 64rem) {
  .site-nav { display: flex; }
  .site-header__tools { display: flex; }
  .menu-toggle { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: var(--cream); background: var(--wash-dark); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header.is-solid { background: var(--forest-deep); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---- mobile menu sheet (a native <dialog>, so focus is trapped and Escape works) ---- */
.nav-sheet {
  --focus: var(--gold);
  position: fixed;
  inset: 0 0 0 auto;
  width: min(22rem, 90vw);
  max-width: none;
  height: auto;                       /* inset: 0 stretches it to the visible screen, however the browser bars move */
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--forest);
  color: var(--cream);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s var(--ease), overlay 0.32s allow-discrete, display 0.32s allow-discrete;
}
.nav-sheet[open] { display: flex; flex-direction: column; transform: none; }
@starting-style { .nav-sheet[open] { transform: translateX(100%); } }
.nav-sheet::backdrop {
  background: rgb(8 28 16 / 0.55);
  opacity: 0;
  transition: opacity 0.32s var(--ease), overlay 0.32s allow-discrete, display 0.32s allow-discrete;
}
.nav-sheet[open]::backdrop { opacity: 1; }
@starting-style { .nav-sheet[open]::backdrop { opacity: 0; } }

.nav-sheet__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-inline: var(--gutter); flex: none; }
.nav-sheet__top .icon-btn { margin-right: calc(-1 * var(--s-2)); }
.nav-sheet__nav { display: grid; padding: var(--s-4) var(--gutter) var(--s-5); }
.nav-sheet__nav a {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  border-bottom: 1px solid var(--hairline-dark);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.nav-sheet__nav a[aria-current="page"] { color: var(--gold); }
.nav-sheet__foot { display: grid; gap: var(--s-4); margin-top: auto; padding: var(--s-5) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); }
.nav-sheet__phone { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 2.75rem; font-family: var(--font-mono); font-weight: 700; text-decoration: none; }
.nav-sheet__phone svg { width: 1.125rem; height: 1.125rem; color: var(--gold); }
.nav-sheet__social { display: flex; gap: var(--s-1); margin-left: calc(-1 * var(--s-3)); }
.nav-sheet__hours { color: var(--cream-70); font-size: var(--fs-small); }

/* ---- footer ---- */
.site-footer { padding: var(--s-7) 0 calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 63.99rem) { .site-footer { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)); } }  /* room for the dock */
.site-footer__grid { display: grid; gap: var(--s-6); }
.site-footer__brand { display: grid; gap: var(--s-4); align-content: start; }
.site-footer__tag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); color: var(--cream-70); }
.site-footer__tag svg { width: 0.625rem; height: 0.625rem; color: var(--gold); }
.site-footer__social { display: flex; gap: var(--s-1); margin-left: calc(-1 * var(--s-3)); }
.site-footer__col-title { margin-bottom: var(--s-3); color: var(--cream-70); }
.site-footer__visit { display: grid; gap: var(--s-1); }
.site-footer__visit a { display: inline-flex; align-items: center; justify-self: start; min-height: 2.75rem; text-decoration: none; }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); align-content: start; }
.site-footer__nav a, .site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  text-decoration: none;
}
.site-footer__nav svg, .site-footer__link svg { width: 0.9375rem; height: 0.9375rem; color: var(--gold); }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-5);
  margin-top: var(--s-5);
  padding-top: var(--s-2);
  border-top: 1px solid var(--hairline-dark);
  color: var(--cream-70);
  font-size: var(--fs-small);
}
.site-footer__legal a, .site-footer__legal button { display: inline-flex; align-items: center; min-height: 2.75rem; margin-inline: calc(-1 * var(--s-2)); padding-inline: var(--s-2); text-decoration: none; }
.site-footer__legal p { margin-right: auto; }

@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: 1.1fr 1fr 1fr; gap: var(--s-7); }
}
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover, .site-footer__legal button:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* ---- mobile dock: a small floating island with Menu, Order and Call ----
   Hidden while the home page's own hero buttons are on screen; after that it stays available. While the page is moving it
   COMPRESSES to three icons; once scrolling has stopped for a moment it EXPANDS and the words come back. Only the pill's width and
   height, the icons' offset and the words' opacity change, over a quarter of a second. Every cell stays at least 44px tall. ---- */
.dock {
  --focus: var(--gold);
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  width: min(calc(100% - 2 * var(--gutter)), 19.5rem);
  height: 3.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: var(--r-pill);
  background: rgb(15 61 32 / 0.94);
  color: var(--cream);
  box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  transform: translate(-50%, 0);
  transition: width 0.28s var(--ease), height 0.28s var(--ease), transform 0.32s var(--ease), opacity 0.24s var(--ease);
}
.dock.is-compact { width: 10.5rem; height: 2.75rem; }
/* tucked away: off screen, and out of the tab order once the slide has finished */
.dock.is-hidden, html[data-consent-banner] .dock {
  transform: translate(-50%, calc(100% + 1.5rem + env(safe-area-inset-bottom, 0px)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.32s var(--ease), opacity 0.24s var(--ease), visibility 0s linear 0.32s;
}
.dock__item {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  margin-block: -0.25rem;           /* the cell reaches the edge of the pill, so the whole pill height is the touch target */
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s var(--ease), transform 0.12s var(--ease);
}
.dock__item svg { grid-area: 1 / 1; width: 1.25rem; height: 1.25rem; transform: translateY(-0.5rem); transition: transform 0.28s var(--ease); }
.dock__item span { grid-area: 1 / 1; align-self: end; margin-bottom: 0.4rem; transition: opacity 0.18s var(--ease), transform 0.28s var(--ease); }
.dock.is-compact .dock__item svg { transform: none; }
.dock.is-compact .dock__item span { opacity: 0; transform: translateY(0.25rem); }
.dock__item:active { transform: scale(0.95); }
.dock__item--order { background: var(--cream); color: var(--forest-deep); margin-block: 0; min-height: 2.5rem; align-self: center; }
.dock.is-compact .dock__item--order { min-height: 2.25rem; }
.dock__item--order svg { transform: translateY(-0.45rem); }
.dock.is-compact .dock__item--order svg { transform: none; }
.dock__item--order span { margin-bottom: 0.3rem; }
.dock__item--order::after { content: ""; position: absolute; inset: -0.25rem 0; }   /* the cream pill is 36px tall; its touch area is 44px */
@media (min-width: 64rem) { .dock { display: none; } }
@media (prefers-reduced-transparency: reduce) { .dock { background: var(--forest-deep); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .dock, .dock__item svg, .dock__item span { transition-duration: 0.01ms; }
  .dock.is-hidden, html[data-consent-banner] .dock { transform: translate(-50%, 0); }
}

/* ---- cookie and advertising choices (js/consent.js builds this; it really drives Google's consent signals) ---- */
.consent {
  position: fixed;
  z-index: 70;
  left: var(--s-3);
  right: var(--s-3);
  bottom: calc(var(--s-3) + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: var(--s-3);
  max-width: 26rem;
  padding: var(--s-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow-float);
}
.consent:focus { outline: none; }
.consent__text { font-size: var(--fs-small); line-height: 1.45; }
.consent__text strong { font-family: var(--font-display); font-weight: 700; }
.consent__text a { font-weight: 600; text-underline-offset: 3px; }
.consent__status { font-size: var(--fs-small); color: var(--ink-soft); }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.consent__actions .btn { min-height: 2.75rem; font-size: var(--fs-small); }
@media (min-width: 40rem) {
  .consent { left: var(--s-5); right: auto; bottom: var(--s-5); width: 24rem; }
}

/* ---------------------------------------------------------------------------------------------------
   HOME: the hero and the info strip

   ONE video element, never swapped, moved or restarted. Two presentations of it:

   PHONES, TABLETS AND SMALL WINDOWS (the default below)
     The video fills the first screen. A small block of words sits low on it, over a modest neutral shade. Nothing is pinned, nothing
     is locked and nothing changes size while you scroll: the page just scrolls. The only effect is that the video's two bottom corners
     grow rounder over the first stretch of scrolling (--hero-r, written by assets/js/hero-scroll.js).
     The hero is one SMALL-viewport screen tall (svh). That unit never changes when a phone's browser bar slides away, so nothing
     resizes or jumps.

   WIDE WINDOWS WITH A MOUSE OR TRACKPAD
     The words on the left, a portrait, reel-shaped frame (9 wide to 14 high) on the right. With motion allowed the page opens with the
     same video filling the whole first screen, and AS YOU SCROLL it shrinks and rounds into the frame, step by step, with the scroll:
     one custom property, --p (0 = fills the screen, 1 = in the frame), follows how far the page has scrolled over a short runway.
     The hero is one screen plus that runway tall and its stage is position: sticky. That is ordinary browser scrolling: nothing is
     locked, intercepted, rewritten or snapped. assets/js/hero-scroll.js only eases the displayed value toward the scroll position (so a
     big trackpad flick still plays as a short, visible change instead of a jump).
     The frame is laid out where it ends up. The open state is that same box scaled up and moved until it covers the screen: transform
     only, from --hero-k / --hero-dx / --hero-dy, which the script measures. The rounded corners are a clip-path on the frame, so they
     scale along with it and simply come into view as it shrinks.
     Without JavaScript, or with "reduce motion" switched on, --p stays 1 and the hero is simply the framed composition.
   --------------------------------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--forest-deep);   /* the colour behind the video's rounded corners, the same as the strip just below */
  color: var(--cream);
  --p: 1;
  --hero-k: 1;
  --hero-dx: 0px;
  --hero-dy: 0px;
  --hero-r: 1.75rem;
}
.hero__stage { position: relative; isolation: isolate; display: flex; height: 100svh; min-height: 31rem; max-height: 58rem; overflow: hidden; overflow: clip; }

.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding-top: calc(var(--header-h) + var(--s-3));
  padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
}

/* the video fills the whole stage */
.hero__slot { position: absolute; inset: 0; z-index: 0; }
.hero__media { position: absolute; inset: 0; transform-origin: 50% 50%; }
.hero__frame { position: absolute; inset: 0; background: var(--forest-deep); clip-path: inset(0 round 0 0 var(--hero-r) var(--hero-r)); }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; pointer-events: none; }
/* a neutral (never green) shade that only holds the words up: it is strongest at the bottom edge and gone by the middle of the screen.
   It belongs to the stage, so it is clipped to the same rounded bottom corners as the video. */
.hero__shade { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(5 11 7 / 0.7), rgb(5 11 7 / 0.32) 24%, rgb(5 11 7 / 0) 46%); clip-path: inset(0 round 0 0 var(--hero-r) var(--hero-r)); }
/* a short neutral strip behind the header so the logo and menu button read over any frame of the footage */
.hero__topshade { position: absolute; z-index: 2; inset: 0 0 auto; height: 6rem; pointer-events: none; background: linear-gradient(to bottom, rgb(5 11 7 / 0.55), rgb(5 11 7 / 0)); }

.hero__copy { position: relative; z-index: 3; max-width: 24rem; }
.hero__title {
  font-size: var(--fs-hero);
  font-weight: var(--display-hero-weight);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-shadow: 0 1px 14px rgb(5 11 7 / 0.35);
}
.hero__lead { margin-top: var(--s-2); max-width: 22rem; font-size: 0.9375rem; line-height: 1.4; color: var(--cream-92); text-shadow: 0 1px 10px rgb(5 11 7 / 0.4); }
.hero__lead-more { display: none; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.hero__actions .btn { min-height: 2.75rem; }
.hero__orbit, .hero__sticker { display: none; }

/* ---- tablets and large phones: a little more room for the words ---- */
@media (min-width: 40rem) {
  .hero__copy { max-width: 30rem; }
  .hero__lead { font-size: var(--fs-lead); max-width: 26rem; }
  .hero__lead-more { display: inline; }
}

/* ---- desktop: words and a reel-shaped frame side by side. The frame's size is the first draft's: a little under three quarters of
        the screen's height, never more than 40.5rem tall, 9 wide to 14 high. ---- */
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  .hero { background: var(--forest); }
  .hero__stage { height: 100svh; min-height: 34rem; max-height: none; }
  .hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s-8);
    padding-top: calc(var(--header-h) + var(--s-6));
    padding-bottom: var(--s-8);
  }
  .hero__copy { grid-column: 1; grid-row: 1; max-width: 38rem; }
  .hero__title { font-size: clamp(2.5rem, 1rem + 3.4vw, 4.25rem); line-height: 0.98; letter-spacing: var(--display-hero-tracking); text-shadow: none; }
  .hero__lead { margin-top: var(--s-4); max-width: 27rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--cream-70); text-shadow: none; }
  .hero__actions { gap: var(--s-3); margin-top: var(--s-5); }

  /* the frame's place in the layout (the script measures it) */
  .hero__slot {
    position: relative;
    inset: auto;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    height: clamp(26rem, calc(100svh - var(--header-h) - 9rem), 40.5rem);
    aspect-ratio: 9 / 14;
  }
  .hero__media {
    transform:
      translate(calc(var(--hero-dx) * (1 - var(--p))), calc(var(--hero-dy) * (1 - var(--p))))
      scale(calc(1 + (var(--hero-k) - 1) * (1 - var(--p))));
  }
  .hero__frame { clip-path: inset(0 round var(--r-lg)); }
  /* the left-hand shade holds the words up while the video fills the screen; it fades out as the frame settles */
  .hero__shade { z-index: 2; opacity: calc(1 - var(--p)); clip-path: none; background: linear-gradient(90deg, rgb(5 11 7 / 0.74) 0%, rgb(5 11 7 / 0.5) 40%, rgb(5 11 7 / 0) 70%); }
  .hero__topshade { opacity: max(0, calc(1 - var(--p) * 4)); }
  .hero__orbit {
    display: block;
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -16rem;
    width: 64rem;
    color: var(--cream);
    opacity: calc(0.13 * clamp(0, (var(--p) - 0.55) * 3, 1));
    transform: translateY(-50%);
    pointer-events: none;
  }
  .hero__sticker {
    position: absolute;
    z-index: 3;
    left: -2.5rem;
    bottom: 3.5rem;
    display: grid;
    place-content: center;
    gap: 0.125rem;
    width: 5.75rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--gold);
    color: var(--forest-deep);
    text-align: center;
    transform: rotate(-10deg);
    opacity: clamp(0, calc((var(--p) - 0.6) * 3), 1);
    box-shadow: 0 8px 22px rgb(8 28 16 / 0.35);
  }
  .hero__sticker .label { letter-spacing: 0.12em; }
  .hero__sticker strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }

  /* motion allowed (class added by the script in the page head, so the very first paint is right): the page opens with the video filling the
     screen. The hero is one screen plus a runway tall; its stage stays in view (position: sticky) while --p follows the scroll over the runway. */
  .hero-morph .hero { --p: 0; --hero-travel: min(75svh, 40rem); height: calc(100svh + var(--hero-travel)); }
  .hero-morph .hero__stage { position: sticky; top: 0; }
  .hero-morph .hero.is-animating .hero__media { will-change: transform; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__sticker { transform: none; }
}

/* ---- the info strip: three small labelled facts. Hours get the gold, like a price on the board. ---- */
.info-rail { padding-block: var(--s-5) calc(var(--r-lg) + var(--s-5)); }
.info-rail__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.info-units { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: var(--s-4) var(--s-7); margin: 0; }
.info-unit { display: grid; gap: 0.25rem; min-width: 0; }
.info-unit dt { color: var(--cream-70); }
.info-unit dd { margin: 0; font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 700; line-height: 1.3; }
.info-unit dd a { text-decoration: none; }
.info-unit--hours dd { color: var(--gold); }
.info-unit--phone, .info-rail__social { display: none; }
.info-city { display: none; }

@media (min-width: 48rem) {
  .info-units { grid-template-columns: repeat(3, auto); gap: var(--s-4) 0; }
  .info-unit { padding-inline: var(--s-6); }
  .info-unit:first-child { padding-left: 0; }
  .info-unit + .info-unit { border-left: 1px solid var(--hairline-dark); }
  .info-unit--phone { display: grid; }
  .info-city { display: inline; }
}
@media (min-width: 64rem) {
  .info-rail { padding-top: var(--s-5); }
  .info-rail__social { display: flex; gap: 2px; margin-right: calc(-1 * var(--s-3)); }
}
@media (hover: hover) and (pointer: fine) {
  .info-unit dd a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* ---- the cream "sheet" that rises over the bottom edge of the info strip ---- */
.sheet {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--r-lg));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--cream);
}

/* ---------------------------------------------------------------------------------------------------
   HOME: drink of the month, seasonal sips (the green moment), crepes, find your drink, the shop, visit
   --------------------------------------------------------------------------------------------------- */
.sec-head { margin-bottom: var(--s-6); }
.sec-head p { margin-top: var(--s-2); max-width: 36rem; color: var(--ink-soft); }

/* ---- drink of the month ----------------------------------------------------------------------------------------------
   A sage panel holds the words; the cup is taller than the panel and stands across its edge, so the featured drink breaks out of
   the box instead of living inside it. The panel is its own layer (it clips only its own decoration), the cup is never clipped.
   The section keeps room above it for the part of the cup that rises past the panel. ---- */
.sec--dotm { padding-top: calc(var(--sec-y-tight) + 2.75rem); padding-bottom: var(--sec-y-tight); }
.sec--dotm > .container { container-type: inline-size; }
.dotm {
  --cup-rise: 3.25rem;           /* how far the cup stands above the panel */
  --cup-x: 0px;                  /* the cup box's horizontal anchor (see the wide-screen rule), its hover lift and its hover scale */
  --cup-lift: 0px;
  --cup-scale: 1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  grid-template-areas: "label media" "title media" "desc desc" "actions actions";
  column-gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) var(--s-4) var(--s-4);
  color: var(--ink);
}
.dotm__panel {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--sage-tint);
  pointer-events: none;
}
.dotm__orbit { position: absolute; right: -6rem; top: 30%; width: 22rem; transform: translateY(-50%); color: var(--forest); opacity: 0.16; }
.dotm__copy { display: contents; }
.dotm .label { position: relative; z-index: 1; grid-area: label; color: var(--forest); }
.dotm .label--star svg { color: var(--forest); }
.dotm__title {
  position: relative;
  z-index: 1;
  grid-area: title;
  margin-top: var(--s-3);
  color: var(--forest-deep);
  font-size: clamp(1.9rem, 1.1rem + 3.8vw, 3.25rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.04em;
}
.dotm__desc { position: relative; z-index: 1; grid-area: desc; margin-top: var(--s-3); max-width: 28rem; color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.5; }
.dotm__actions { position: relative; z-index: 1; grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); }
.dotm__media { position: relative; z-index: 2; grid-area: media; align-self: stretch; min-height: 7rem; pointer-events: none; }
/* the box is where the cup stands; the picture fills it; the soft ground shadow is the box's own ::after */
.dotm__cupbox {
  position: absolute;
  right: 0;
  bottom: -0.25rem;
  height: calc(100% + var(--cup-rise));
  max-width: none;
  transform: translateX(var(--cup-x)) translateY(var(--cup-lift)) scale(var(--cup-scale));
  transform-origin: 50% 100%;
  transition: transform 0.5s var(--ease);
}
.dotm__cupbox::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 14%;
  right: 14%;
  bottom: 0.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(20 50 25 / 0.34), transparent);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.dotm__cup { display: block; width: auto; height: 100%; max-width: none; filter: drop-shadow(0 18px 16px rgb(20 50 25 / 0.28)); transition: filter 0.5s var(--ease); }
/* the drink is PLACED onto the page, once, when the section is meaningfully on screen (about 40% of it; the "reveal" class and data-reveal-at come
   from the page head and assets/js/site.js). It starts a little lower, a little smaller and tipped back a few degrees, as if still behind the
   page, and comes forward into its upright place over about a second while its shadow develops beneath it. The panel answers with it: it
   settles from a hair smaller, its light arrives with the cup and the thin orbit turns into place. No bounce, no loop, nothing keeps moving.
   Only transform, opacity and the individual transform properties change; the cup is never clipped (nothing around it clips). */
.dotm__panel::after {   /* a soft light on the panel, behind where the cup stands */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(30rem 24rem at 80% 58%, rgb(255 255 255 / 0.45), transparent 70%);
  pointer-events: none;
}
.dotm__cup { transform-origin: 50% 90%; }
.reveal .dotm__panel { transition: transform 1.1s var(--ease), opacity 0.8s var(--ease); }
.reveal .dotm__panel::after { transition: opacity 1.3s var(--ease) 0.2s; }
.reveal .dotm__orbit { transition: opacity 1.5s var(--ease) 0.1s, rotate 1.7s var(--ease); }
.reveal .dotm__cup { transition: opacity 0.5s ease-out 0.12s, translate 1.2s var(--ease) 0.12s, scale 1.2s var(--ease) 0.12s, rotate 1.3s var(--ease) 0.12s, filter 0.5s var(--ease); }
.reveal .dotm__cupbox::after { transition: opacity 0.9s var(--ease) 0.42s, transform 1.15s var(--ease) 0.38s; }
.reveal .dotm:not(.is-in) .dotm__panel { transform: scale(0.985); opacity: 0.55; }
.reveal .dotm:not(.is-in) .dotm__panel::after { opacity: 0; }
.reveal .dotm:not(.is-in) .dotm__orbit { opacity: 0; rotate: -14deg; }
.reveal .dotm:not(.is-in) .dotm__cup { opacity: 0; translate: 0 6%; scale: 0.88; rotate: -5deg; }
.reveal .dotm:not(.is-in) .dotm__cupbox::after { opacity: 0; transform: scaleX(0.45); }
/* A mouse or trackpad (never a touch screen: no sticky hover) gets an answer. Resting the pointer on the block nudges the cup; resting it
   on the cup itself brings the drink forward: it rises, grows a hair and its shadow deepens, and the panel answers a moment later (a soft
   light gathers behind the cup and the thin orbit turns a few degrees). Nothing floats, loops, bounces or tilts; it all settles back the
   same way when the pointer leaves. Only transform, opacity, filter and the individual rotate property change. */
.dotm__panel::before {   /* the light that gathers behind the cup on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(24rem 20rem at 78% 62%, rgb(255 255 255 / 0.6), transparent 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .dotm:hover { --cup-lift: -0.3rem; --cup-scale: 1.018; }
  .dotm__cupbox { pointer-events: auto; }
  .dotm__cupbox:hover { --cup-lift: -0.7rem; --cup-scale: 1.045; }
  .dotm__cupbox:hover .dotm__cup { filter: drop-shadow(0 30px 24px rgb(20 50 25 / 0.4)); }
  .dotm:has(.dotm__cupbox:hover) .dotm__panel::before { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dotm:has(.dotm__cupbox:hover) .dotm__orbit { rotate: 6deg; }
}

@media (min-width: 48rem) {
  .sec--dotm { padding-top: calc(var(--sec-y-tight) + 6rem); }
  .dotm {
    --cup-rise: 0px;
    --dotm-pad: var(--s-6);        /* the panel's left padding (the right side has none: the cup column runs to the edge) */
    --dotm-gap: var(--s-5);
    --cup-col: 0.9fr;              /* the cup's column, next to the words' 1fr */
    --cup-share: 0.2368;           /* half of the cup column, as a share of the grid's free width = 0.9 / 1.9 / 2 */
    --cup-h: 26rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--cup-col));
    grid-template-areas: "label media" "title media" "desc media" "actions media";
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--dotm-gap);
    min-height: 24rem;
    padding: var(--s-6) 0 var(--s-6) var(--dotm-pad);
  }
  /* the panel stops at the middle of the cup's column: the cup straddles its right edge, half on the panel, half on the page */
  .dotm__panel { inset: 0 calc((100% - var(--dotm-pad) - var(--dotm-gap)) * var(--cup-share)) 0 0; }
  .dotm__title { font-size: clamp(2.5rem, 0.9rem + 4.4vw, 3.5rem); }
  .dotm__desc { margin-top: var(--s-4); }
  .dotm__actions { align-self: end; margin-top: var(--s-5); }
  .dotm__media { min-height: 0; }
  /* the cup is sized from the width of its section (container units), so it always rises above the panel but never reaches the
     edge of the screen: at most a few pixels wider than its column, centred on it */
  .dotm { --cup-x: -50%; }
  .dotm__cupbox { left: 50%; right: auto; bottom: -1.75rem; height: var(--cup-h); max-height: none; }
  .dotm__orbit { right: auto; left: 38%; top: 50%; width: 34rem; }
}
@supports (width: 1cqw) {
  @media (min-width: 48rem) { .dotm { --cup-h: clamp(24rem, 66cqw, 36rem); } }
}
@media (min-width: 64rem) {
  .dotm {
    --dotm-pad: var(--s-7);
    --dotm-gap: var(--s-6);
    --cup-col: 0.68fr;
    --cup-share: 0.2024;           /* 0.68 / 1.68 / 2 */
    --cup-h: 33rem;
    min-height: 28rem;
    padding-block: var(--s-7);
  }
  .dotm__title { font-size: clamp(3rem, 0.2rem + 6.4vw, 6rem); }
  .dotm__desc { margin-top: var(--s-5); }
  .dotm__actions { margin-top: var(--s-6); }
  .dotm__orbit { width: 38rem; }
}
@supports (width: 1cqw) {
  @media (min-width: 64rem) { .dotm { --cup-h: clamp(28rem, 58cqw, 36rem); } }
}

/* ---- seasonal sips: the green brand moment ---------------------------------------------------------------------------
   The same markup has three presentations.
   PLAIN      "reduce motion", no JavaScript, a very short window: three cups standing free on the green, each a link to the menu (a vertical list on
              a phone, a row of three from tablet width). Where a pointer can hover, a cream card materialises behind the drink you point at.
              With motion welcome each drink also takes ONE small entrance as it scrolls into view (the "reveal" class).
   SEQUENCE   html.season-seq (motion welcome, on a phone as on a computer): the section is one screen plus a runway tall and its stage is
              sticky, so one drink stays on screen at a time: the cup, its name and its line move together. ONE deliberate scroll or swipe
              moves to the next drink (assets/js/seasonal.js; the first and last drink hand the next gesture straight back to the page).
              Same look on every screen size; only the arrangement changes (one column on a phone, two from 64rem). ---- */
.sec--season { position: relative; overflow: hidden; overflow: clip; padding-bottom: var(--s-7); }
.sec--season::before {  /* warm light behind the row */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60rem 28rem at 50% 62%, rgb(243 205 180 / 0.1), transparent 70%);
}
.season { position: relative; }
.season__stage { position: relative; }
.season__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-5); }
.season__title {
  font-size: clamp(2.375rem, 0.9rem + 5.8vw, 5rem);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.04em;
}
.season__row {
  display: flex;
  gap: var(--s-4);
  margin: 0 calc(-1 * var(--gutter));
  padding: var(--s-2) var(--gutter) var(--s-4);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.season__row::-webkit-scrollbar { display: none; }
.season__item { flex: 0 0 min(72%, 16rem); scroll-snap-align: start; }
.season__card {
  --focus: var(--gold);
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  height: 100%;
  padding: var(--s-4) var(--s-3) var(--s-5);
  border-radius: var(--r-lg);
  color: var(--cream);
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s var(--ease);
}
.season__card:active { transform: scale(0.98); }
.season__card::before {   /* the card that appears */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 24% 0 0;
  border-radius: inherit;
  background: var(--cream);
  box-shadow: 0 22px 40px -20px rgb(2 14 7 / 0.6);
  opacity: 0;
  transform: translateY(0.75rem) scale(0.95);
  transition: opacity 0.22s var(--ease), transform 0.28s var(--ease);
}
.season__cup { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 14.5rem; }
.season__cup::before {     /* the drink's own light behind it: matcha green, toffee gold, spiced peach */
  content: "";
  position: absolute;
  z-index: 0;
  inset: -8% -26% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow, rgb(243 205 180 / 0.26)), transparent 78%);
  opacity: 0.9;
  pointer-events: none;
}
.season__cup::after {     /* a soft contact shadow so the cup sits on the green instead of floating */
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -0.25rem;
  height: 0.9rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(2 14 7 / 0.45), transparent);
  z-index: 0;
}
.season__cup img { position: relative; z-index: 1; width: auto; height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 14px 12px rgb(2 14 7 / 0.4)); transition: transform 0.28s var(--ease); }
.season__item:nth-child(1) { --glow: rgb(160 214 126 / 0.30); }       /* matcha */
.season__item:nth-child(2) { --glow: rgb(230 190 110 / 0.32); }       /* toffee */
.season__item:nth-child(3) { --glow: rgb(244 178 138 / 0.32); }       /* spiced chai */
.season__text { display: contents; }                       /* in the plain list the words are laid out by the card itself */
.season__name { margin-top: var(--s-4); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; transition: color 0.2s var(--ease); }
.season__desc { margin-top: var(--s-2); max-width: 21rem; color: var(--cream-92); font-size: var(--fs-small); line-height: 1.45; transition: color 0.2s var(--ease); }   /* brighter than the usual soft cream: each drink's glow sits behind this line */
.season__num, .season__ticks, .season__ring { display: none; }     /* only the sequence uses these */

@media (max-width: 47.99rem) {
  .season__row { display: grid; gap: 0; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .season__item { flex: none; }
  .season__item + .season__item { border-top: 1px solid var(--hairline-dark); }
  .season__card { grid-template-columns: 6.25rem minmax(0, 1fr); column-gap: var(--s-4); align-items: center; justify-items: start; height: auto; padding: var(--s-4) 0; border-radius: 0; text-align: left; }
  .season__cup { grid-row: 1 / span 2; width: 6.25rem; height: 9rem; }
  .season__name { align-self: end; margin-top: 0; font-size: 1.1rem; }
  .season__desc { align-self: start; margin-top: var(--s-1); max-width: none; }
}
@media (min-width: 48rem) {
  .season__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding: var(--s-4) 0 var(--s-2); overflow: visible; }
  .season__item { flex: none; }
  .season__cup { height: 19rem; }
}
@media (hover: hover) and (pointer: fine) {
  .season__card:hover::before, .season__card:focus-visible::before { opacity: 1; transform: none; }
  .season__card:hover .season__cup img, .season__card:focus-visible .season__cup img { transform: translateY(-0.5rem) scale(1.04); }
  .season__card:hover .season__cup::before, .season__card:focus-visible .season__cup::before { opacity: 0; }
  .season__card:hover .season__name, .season__card:focus-visible .season__name { color: var(--forest-deep); }
  .season__card:hover .season__desc, .season__card:focus-visible .season__desc { color: var(--ink-soft); }
  .season__card:focus-visible { outline-offset: 4px; }
}

/* ---- the one-time entrance of each drink (everywhere the sequence is off, motion welcome): the cup rises a little, grows to size and
        straightens, then the words settle in just behind it. Only transform, opacity and the individual transform properties move. ---- */
.reveal:not(.season-seq) .season__cup img {
  transition: transform 0.28s var(--ease), opacity 0.6s var(--ease), translate 0.95s var(--ease), scale 0.95s var(--ease), rotate 0.95s var(--ease);
  transition-delay: 0s, calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms);
  transform-origin: 50% 90%;
}
.reveal:not(.season-seq) .season__item:not(.is-in) .season__cup img { opacity: 0; translate: 0 2rem; scale: 0.9; rotate: -5deg; }
.reveal:not(.season-seq) .season__cup::before { transition: opacity 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 120ms); }
.reveal:not(.season-seq) .season__item:not(.is-in) .season__cup::before { opacity: 0; }
.reveal:not(.season-seq) .season__name, .reveal:not(.season-seq) .season__desc {
  transition: color 0.2s var(--ease), opacity 0.6s var(--ease), translate 0.85s var(--ease);
  transition-delay: 0s, calc(var(--i, 0) * 80ms + 120ms), calc(var(--i, 0) * 80ms + 120ms);
}
.reveal:not(.season-seq) .season__item:not(.is-in) .season__name, .reveal:not(.season-seq) .season__item:not(.is-in) .season__desc { opacity: 0; translate: 0 0.875rem; }

/* ---- the sequence (html.season-seq): the same stage on a phone and on a computer ----
   The section is one screen plus a runway tall and its stage is sticky, so the stage stays on screen while you step through the drinks.
   Scrolling through the runway does not scrub anything: assets/js/seasonal.js turns ONE deliberate scroll or swipe into ONE step, and
   parks the page inside the runway so that the next gesture outward leaves the section at once. One column on a phone (the cup above the
   words); two columns from 64rem (the words on the left, the cup on the right). ---- */
.season-seq .sec--season { padding-block: 0; }
.season-seq .sec--season::before { display: none; }
.season-seq .season { --seq-run: 100svh; height: calc(100svh + var(--seq-run)); }
.season-seq .season__stage {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: var(--s-2);
  height: 100svh;
  min-height: 0;
  padding-top: calc(var(--header-h) + var(--s-3));
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));          /* the phone dock floats over the bottom edge */
}
.season-seq .season__stage::before {    /* the warm light, part of the stage so it stays behind the featured drink the whole time */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -60vw;                       /* wider than the column, so the light is never cut off at its edge (the section clips what spills past the screen) */
  pointer-events: none;
  background: radial-gradient(34rem 26rem at 50% 40%, rgb(243 205 180 / 0.1), transparent 70%);
}
.season-seq .season__ring { display: block; position: absolute; z-index: -1; right: -11rem; top: 36%; width: 30rem; color: var(--cream); opacity: 0.1; translate: 0 -50%; pointer-events: none; transform-origin: 50% 50%; }
.season-seq .season__head { gap: var(--s-1) var(--s-4); margin-bottom: 0; }
.season-seq .season__title { font-size: clamp(2rem, 1.1rem + 3.6vw, 2.75rem); }
.season-seq .season__row { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); position: relative; min-height: 0; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
.season-seq .season__item { grid-area: 1 / 1; min-height: 0; flex: none; border-top: 0; }     /* (the plain list's divider would show through the stack) */
.season-seq .season__card {
  display: grid;
  grid-template: minmax(0, 1fr) auto / minmax(0, 1fr);      /* the row may not grow past the stage: a tall picture shrinks to fit a short window */
  row-gap: var(--s-3);
  align-items: center;
  justify-items: stretch;
  height: 100%;
  padding: 0;
  border-radius: 0;
  text-align: left;
  pointer-events: none;                  /* in the sequence the words and the cup are not buttons: the heading link and the number buttons are */
}
.season-seq .season__card::before { display: none; }
.season-seq .season__text { grid-row: 2; display: grid; justify-items: start; align-content: start; gap: var(--s-2); will-change: transform, opacity; }
.season-seq .season__num { display: block; color: var(--gold); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; }
.season-seq .season__num i { font-style: normal; opacity: 0.6; }
.season-seq .season__name { align-self: auto; margin: 0; font-size: clamp(1.875rem, 1.15rem + 3.3vw, 2.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.035em; }
.season-seq .season__desc { align-self: auto; margin: 0; max-width: 26rem; color: var(--cream-92); font-size: var(--fs-body); line-height: 1.45; }
.season-seq .season__cup { --pr: 1; grid-row: 1; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; width: 100%; height: 100%; min-height: 0; }
.season-seq .season__cup::before {      /* the drink's own light behind it */
  content: "";
  position: absolute;
  inset: 0 6%;
  background: radial-gradient(closest-side, var(--glow, rgb(243 205 180 / 0.28)), transparent 78%);
  opacity: var(--pr);
}
.season-seq .season__cup::after { left: 30%; right: 30%; bottom: 1%; height: 1.4rem; opacity: var(--pr); transform: scaleX(calc(0.55 + 0.45 * var(--pr))); }
.season-seq .season__cup img { grid-area: 1 / 1; height: 94%; max-width: 100%; transform-origin: 50% 88%; will-change: transform, opacity; transition: none; }
/* before the script's first frame (and if it never runs) only the first drink shows, so nothing is ever stacked on top of each other */
.season-seq .season__item:not(:first-child) .season__cup img, .season-seq .season__item:not(:first-child) .season__text { opacity: 0; }
.season-seq .season__ticks { display: flex; align-items: center; gap: var(--s-5); }
.season-seq .season__tick { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; padding: 0 var(--s-1); color: var(--cream-70); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.14em; }
.season-seq .season__tick[aria-current="true"] { color: var(--gold); }
.season-seq .season__tick-bar { position: relative; display: block; width: 3.5rem; height: 0.25rem; overflow: hidden; border-radius: 99px; background: rgb(246 240 223 / 0.2); }
.season-seq .season__tick-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
@media (min-width: 64rem) {
  .season-seq .season__stage { row-gap: var(--s-3); padding-top: calc(var(--header-h) + var(--s-5)); padding-bottom: var(--s-4); }
  .season-seq .season__stage::before { background: radial-gradient(56rem 34rem at calc(50% + 17rem) 56%, rgb(243 205 180 / 0.1), transparent 70%); }
  .season-seq .season__ring { right: -14rem; top: 52%; width: 56rem; }
  .season-seq .season__head { gap: var(--s-3) var(--s-5); }
  .season-seq .season__title { font-size: clamp(2.25rem, 1rem + 4.2vw, 4.25rem); }
  .season-seq .season__card { grid-template: minmax(0, 1fr) / minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-7); row-gap: 0; }
  .season-seq .season__text { grid-column: 1; grid-row: 1; align-content: center; gap: var(--s-3); }
  .season-seq .season__name { font-size: clamp(2.25rem, 1rem + 3.6vw, 4.25rem); line-height: 0.98; }
  .season-seq .season__desc { max-width: 24rem; color: var(--cream-70); font-size: var(--fs-lead); line-height: 1.5; }
  .season-seq .season__cup { grid-column: 2; }
  .season-seq .season__ticks { gap: var(--s-6); }
}
/* the shortest phones (a small screen with the browser's bars showing): a little less type, so the cup keeps its room */
@media (max-width: 63.99rem) and (max-height: 40rem) {
  .season-seq .season__stage { padding-top: calc(var(--header-h) + var(--s-2)); padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); row-gap: var(--s-1); }
  .season-seq .season__title { font-size: 1.75rem; }
  .season-seq .season__card { row-gap: var(--s-2); }
  .season-seq .season__name { font-size: 1.6rem; }
  .season-seq .season__desc { font-size: 0.8125rem; line-height: 1.4; }
}
@media (hover: hover) and (pointer: fine) {
  .season-seq .season__tick:hover { color: var(--cream); }
  .season-seq .season__tick[aria-current="true"]:hover { color: var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  .season__card::before, .season__cup img { transition: opacity 0.2s linear; }
}

/* ---- crepes: plates on a wicker-toned surface ---- */
.crepes {
  display: flex;
  gap: var(--s-5);
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) var(--s-2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.crepes::-webkit-scrollbar { display: none; }
.crepe { flex: 0 0 min(80%, 20rem); scroll-snap-align: start; }
.crepe__plate { display: grid; place-items: center; aspect-ratio: 3 / 2; }
.crepe__plate img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 12px rgb(80 50 20 / 0.26)); transition: transform 0.32s var(--ease); }
.crepe__name { margin-top: var(--s-3); }
.crepe__desc { margin-top: var(--s-2); max-width: 24rem; color: var(--ink-soft); font-size: var(--fs-small); }
@media (max-width: 47.99rem) {
  .crepes { display: grid; gap: var(--s-4); margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .crepe { flex: none; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--s-4); align-items: center; }
  .crepe:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .crepe__plate { grid-column: 1; grid-row: 1 / span 2; transform-origin: 100% 50%; transform: rotate(-3deg) scale(1.06); }
  .crepe__name { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; font-size: 1.1rem; }
  .crepe__desc { grid-column: 2; grid-row: 2; align-self: start; margin-top: var(--s-1); }
  .crepe:nth-child(even) .crepe__plate { grid-column: 2; transform-origin: 0% 50%; transform: rotate(2.5deg) scale(1.06); }
  .crepe:nth-child(even) .crepe__name, .crepe:nth-child(even) .crepe__desc { grid-column: 1; text-align: right; }
  .crepe:nth-child(even) .crepe__desc { margin-left: auto; }
}
@media (min-width: 48rem) {
  .crepes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin: 0; padding: 0; overflow: visible; }
  .crepe { flex: none; }
}
@media (hover: hover) and (pointer: fine) {
  .crepe:hover .crepe__plate img { transform: translateY(-6px) rotate(-1deg); }
}

/* ---- find your drink: one cup per category, all the same height, each a real link (the whole cup and label is the target) ---- */
.find__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4) var(--s-6); }
.find__head p { margin-top: var(--s-3); max-width: 30rem; color: var(--ink-soft); }
/* phones: one swipeable row (the next cup peeks in, so it reads as scrollable) */
.lineup {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-5) calc(-1 * var(--gutter)) 0;
  padding: var(--s-2) var(--gutter) var(--s-3);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.lineup::-webkit-scrollbar { display: none; }
.lineup > li { flex: 0 0 5.25rem; min-width: 0; scroll-snap-align: start; }
.lineup__item { display: grid; justify-items: center; align-content: end; gap: var(--s-3); height: 100%; padding: var(--s-2) var(--s-1) var(--s-3); border-radius: var(--r-md); text-decoration: none; transition: transform 0.12s var(--ease); }
.lineup__item:active { transform: scale(0.96); }
.lineup__cup { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 8rem; }
.lineup__cup img { width: auto; height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px rgb(20 45 25 / 0.24)); transition: transform 0.3s var(--ease); }
.lineup__name { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; line-height: 1.25; text-align: center; text-transform: uppercase; }
@media (min-width: 40rem) {
  .lineup { flex-wrap: wrap; justify-content: center; gap: var(--s-5) 0; margin-inline: 0; padding: 0; overflow: visible; margin-top: var(--s-7); }
  .lineup > li { flex: 0 0 20%; }
  .lineup__cup { height: 11rem; }
}
@media (min-width: 64rem) {
  .lineup > li { flex-basis: 11.1111%; }
  .lineup__cup { height: 13rem; }
}
@media (hover: hover) and (pointer: fine) {
  .lineup__item:hover .lineup__cup img { transform: translateY(-8px); }
  .lineup__item:hover .lineup__name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
}

/* ---- the shop: a short note beside a few real pictures ---- */
.shop { display: grid; gap: var(--s-5) var(--s-8); align-items: center; }
.shop .lead { margin-top: var(--s-4); }
.shop__links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin-top: var(--s-5); }
/* a fixed arrangement: one tall picture on the left, two squares stacked on the right, one gap everywhere */
.shop-photos { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--s-3); aspect-ratio: 1.26; }
.shop-photos figure { margin: 0; overflow: hidden; border-radius: var(--r-md); background: var(--sage-tint); }
.shop-photos img { width: 100%; height: 100%; object-fit: cover; }
.shop-photos__main { grid-row: 1 / span 2; }
.shop-photos[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; aspect-ratio: 1.5; }
.shop-photos[data-count="2"] .shop-photos__main { grid-row: auto; }
.shop-photos[data-count="1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; aspect-ratio: 4 / 3; }
.shop-photos[data-count="1"] .shop-photos__main { grid-row: auto; }
@media (min-width: 64rem) {
  .shop { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); }
  .shop .shop-photos { justify-self: end; width: 100%; }
}

/* the optional "From our community" strip (empty until photos are listed in data.js) */
.photo-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.photo-strip li { min-width: 0; }
.photo-strip figure { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--r-md); background: var(--sage-tint); }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; }
.photo-strip figcaption { padding-top: var(--s-2); color: var(--ink-soft); font-size: var(--fs-small); }
@media (min-width: 64rem) { .photo-strip--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- visit + order ---- */
.visit { display: grid; gap: var(--s-6) var(--s-8); align-items: center; }
.visit__list { display: grid; gap: var(--s-4); margin: var(--s-5) 0 0; }
.visit__item { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.visit__item dt { color: var(--forest); }
.visit__item dd { margin: 0; }
.visit__phone { font-family: var(--font-mono); font-weight: 700; }
.visit__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.visit__photo { margin: 0; aspect-ratio: 4 / 3; max-width: 24rem; overflow: hidden; border-radius: var(--r-lg); background: var(--sage); }
.visit__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) {
  .visit { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .visit__photo { aspect-ratio: 4 / 5; justify-self: end; width: 100%; }
}

.hours { display: grid; gap: var(--s-1); }
.hours__row { display: flex; justify-content: space-between; gap: var(--s-4); }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; }
.hours__note { margin-top: var(--s-2); color: var(--ink-soft); font-size: var(--fs-small); }
.hours__fallback { font-weight: 600; }

/* ---------------------------------------------------------------------------------------------------
   MENU PAGE: a clean, compact list you can scan and open, on the cream page.
   One column of categories. Each is a disclosure: a short header (name, one gold price, a chevron) that opens to its drinks in
   two columns. A jump list follows you (a bar under the header on phones, a list down the left on wide screens). Every drink is a
   small square picture, its name and only the exceptions: a red crossed-out mug = caffeine free, a milk bottle = dairy by default.
   No descriptions in the list; the larger photo and the details open when a drink is tapped.
   --------------------------------------------------------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-block: var(--s-5) var(--s-3); }
.page-head h1 { font-size: var(--fs-h1); }
@media (min-width: 48rem) { .page-head { padding-block: var(--s-6) var(--s-4); } }

.menu-layout { padding-bottom: var(--s-8); }
.menu-main { min-width: 0; }

/* the jump list: phones = a sticky bar of chips under the header */
.cat-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  margin-inline: calc(-1 * var(--gutter));
  background: var(--cream-92);
  border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
.cat-nav__scroll {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-2) var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
}
.cat-nav__scroll::-webkit-scrollbar { display: none; }
.cat-nav__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--s-4);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  scroll-snap-align: center;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.cat-nav__link:active { transform: scale(0.97); }
.cat-nav__link[aria-current="true"] { background: var(--forest); color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .cat-nav__link:hover { background: var(--wash); }
  .cat-nav__link[aria-current="true"]:hover { background: var(--forest-deep); }
}
@media (prefers-reduced-transparency: reduce) { .drink-dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-transparency: reduce) { .cat-nav { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* wide screens: the jump list becomes a quiet column down the left that stays in view */
@media (min-width: 64rem) {
  .menu-layout { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  .cat-nav {
    top: calc(var(--header-h) + var(--s-5));
    margin-inline: 0;
    background: none;
    border-bottom: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .cat-nav__scroll {
    flex-direction: column;
    gap: 2px;
    max-height: calc(100svh - var(--header-h) - var(--s-7));
    padding: 0;
    overflow-x: visible;
    overflow-y: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .cat-nav__link { min-height: 2.75rem; padding: 0 var(--s-4); scroll-snap-align: none; }
}

/* the key: a small labelled card ahead of the list, so the two icons are explained before anyone starts browsing */
.menu-key {
  margin: var(--s-4) 0 var(--s-5);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border: 1.5px solid var(--forest-line);
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 0.55);
}
.menu-key__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.menu-key__title { color: var(--forest); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; }
.menu-key__items { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.menu-key__items li { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; }
.menu-key__icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border: 1px solid var(--hairline); border-radius: 50%; background: var(--white); }
.menu-key__hint { margin-top: var(--s-2); color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.4; }
.menu-note { max-width: 30rem; margin-top: var(--s-5); color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.5; }

/* one category: a disclosure */
.cat-list { border-top: 2px solid var(--ink); }
.cat { border-bottom: 1px solid var(--hairline); scroll-margin-top: calc(var(--header-h) + 4.25rem); }
.cat__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 4.25rem;
  padding: var(--s-3) 0;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cat__head::-webkit-details-marker { display: none; }
.cat__head:active .cat__chev { transform: scale(0.92); }   /* the control answers the press at once */
.cat[open] > .cat__head:active .cat__chev { transform: rotate(180deg) scale(0.92); }
.cat__head::marker { content: ""; }
.cat__name { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-decoration: underline 0.4rem transparent; text-underline-offset: -0.15rem; text-decoration-skip-ink: none; transition: text-decoration-color 0.9s var(--ease); }
.cat.is-target .cat__name { text-decoration-color: var(--gold); transition-duration: 0.12s; }   /* a brief gold marker under the name you jumped to */
.cat__price { margin-left: auto; padding: 0.2rem 0.65rem; border-radius: var(--r-pill); background: var(--gold); color: var(--forest-deep); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 700; line-height: 1.3; }
.cat__chev { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--wash); color: var(--forest); transition: transform 0.3s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease); }
.cat__chev svg { width: 1.125rem; height: 1.125rem; }
.cat[open] > .cat__head .cat__chev { transform: rotate(180deg); background: var(--forest); color: var(--cream); }
.cat__body { padding: 0 0 var(--s-5); }
@media (hover: hover) and (pointer: fine) {
  .cat__head:hover .cat__chev { background: var(--hairline); }
  .cat[open] > .cat__head:hover .cat__chev { background: var(--forest-deep); }
}
@media (min-width: 64rem) { .cat { scroll-margin-top: calc(var(--header-h) + var(--s-4)); } }

/* the drinks inside: two columns where there is room */
.cat__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--s-7); margin: 0; padding: 0; list-style: none; }
.cat__list > li { border-bottom: 1px solid var(--hairline); }
.cat__list > li:last-child { border-bottom: 0; }
/* two columns once the list itself is wide enough (measured on the list's own width, so the side list on a laptop does not squeeze it) */
.menu-main { container: menu / inline-size; }
@container menu (min-width: 40rem) {
  .cat__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat__list > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }   /* the last row has two drinks when the count is even */
}

/* a drink: a square picture box, the name, then only the exceptions. Every box is the same size; every cup is centred in it,
   stands on the same baseline, is fully visible (contain), and never reaches the edge of its box. */
.item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 4.75rem;
  padding: var(--s-2) 0;
  border-radius: var(--r-md);
  color: var(--ink);
  text-align: left;
  transition: background-color 0.2s var(--ease), transform 0.12s var(--ease);
}
button.item:active { transform: scale(0.99); background: var(--wash); }
.item__thumb { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); flex: none; width: 4rem; height: 4rem; padding: 0.3125rem 0.25rem 0.25rem; overflow: hidden; border-radius: var(--r-md); background: var(--sage-tint); }
.item__thumb img { width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center bottom; }
.item__name { flex: 0 1 auto; min-width: 0; font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; }
.item__icons { display: inline-flex; align-items: center; gap: 0.375rem; margin-left: 0.5rem; vertical-align: -0.25rem; white-space: nowrap; }   /* rides at the end of the name, even when the name wraps */
.item__icons .ico { width: 1.25rem; height: 1.25rem; }
.item__price { flex: none; margin-left: auto; padding-left: var(--s-2); color: var(--forest); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 700; }
.item--plain { min-height: 2.5rem; padding-block: var(--s-1); font-size: var(--fs-small); cursor: default; }
@media (min-width: 48rem) {
  .item__thumb { width: 4.5rem; height: 4.5rem; }
}
@media (hover: hover) and (pointer: fine) { button.item:hover { background: var(--wash); } }

.cat__sub { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px dashed var(--hairline); }
.cat__sub-label { color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase; }
.cat__list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); }
.cat__list--cols > li, .cat__list--cols > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.cat__list--cols .item--plain { width: auto; padding-inline: 0; }
.cat__list--quiet { margin-top: var(--s-2); }
.cat__list--quiet .item--plain { color: var(--ink-soft); }
@container menu (min-width: 40rem) { .cat__list--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* phones: the whole menu a notch smaller (about 8%), every control still a 44px target */
@media (max-width: 47.99rem) {
  .page-head { padding-block: var(--s-4) var(--s-2); }
  .cat-nav__scroll { padding-block: 0.375rem; }
  .cat-nav__link { position: relative; min-height: 2.5rem; padding: 0 var(--s-3); }
  .cat-nav__link::after { content: ""; position: absolute; inset: -0.25rem 0; }       /* the touch area stays 44px+ tall */
  .cat { scroll-margin-top: calc(var(--header-h) + 3.75rem); }
  .cat__head { min-height: 3.75rem; padding-block: var(--s-2); gap: var(--s-2); }
  .cat__price { padding: 0.15rem 0.55rem; font-size: 0.8125rem; }
  .cat__chev { width: 2rem; height: 2rem; }
  .cat__chev svg { width: 1rem; height: 1rem; }
  .cat__body { padding-bottom: var(--s-4); }
  .item { min-height: 4.375rem; gap: var(--s-3); }
  .item__thumb { width: 3.625rem; height: 3.625rem; }
  .item__icons .ico { width: 1.125rem; height: 1.125rem; }
  .menu-key { margin-top: var(--s-3); padding: var(--s-3); }
}

/* ---- the larger photo for a drink (a native <dialog>) ---- */
.drink-dialog {
  --focus: var(--forest);
  position: fixed;
  width: min(calc(100vw - 2 * var(--s-4)), 46rem);
  max-width: none;
  max-height: min(88svh, 40rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  overflow: auto;
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translateY(1rem) scale(0.98);
  transition: opacity 0.24s var(--ease), transform 0.32s var(--ease), overlay 0.32s allow-discrete, display 0.32s allow-discrete;
}
.drink-dialog[open] { opacity: 1; transform: none; }
@starting-style { .drink-dialog[open] { opacity: 0; transform: translateY(1rem) scale(0.98); } }
.drink-dialog::backdrop {
  background: rgb(8 28 16 / 0.6);
  opacity: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 0.3s var(--ease), overlay 0.3s allow-discrete, display 0.3s allow-discrete;
}
.drink-dialog[open]::backdrop { opacity: 1; }
@starting-style { .drink-dialog[open]::backdrop { opacity: 0; } }
.drink-dialog__close { position: absolute; top: var(--s-2); right: var(--s-2); z-index: 2; background: var(--cream-92); color: var(--ink); }
.drink-detail { display: grid; }
.drink-detail__media { display: grid; place-items: center; min-height: 15rem; padding: var(--s-6) var(--s-5) var(--s-5); background: var(--sage-tint); }
.drink-detail__media img { width: auto; max-width: 100%; max-height: 20rem; filter: drop-shadow(0 14px 14px rgb(20 45 25 / 0.26)); }
.drink-detail__body { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-6); }
.drink-detail__body .label { color: var(--forest); }
.drink-detail__title { font-size: var(--fs-h2); }
.drink-detail__price { display: inline-block; justify-self: start; padding: 0.15rem 0.65rem; border-radius: var(--r-pill); background: var(--gold); color: var(--forest-deep); font-family: var(--font-mono); font-size: var(--fs-small); font-weight: 700; }
.drink-detail__desc { color: var(--ink-soft); }
.drink-detail__facts { display: grid; gap: var(--s-2); padding: 0; list-style: none; font-size: var(--fs-small); }
.drink-detail__facts li { display: flex; align-items: center; gap: var(--s-2); }
.fact-dot { width: 0.375rem; height: 0.375rem; margin: 0 0.375rem; flex: none; border-radius: 50%; background: var(--tan); }
.drink-detail__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
@media (min-width: 40rem) {
  .drink-detail { grid-template-columns: 0.9fr 1.1fr; }
  .drink-detail__media { min-height: 100%; padding: var(--s-6); }
  .drink-detail__body { padding: var(--s-7) var(--s-6) var(--s-6); }
}
@media (max-width: 39.99rem) {
  .drink-dialog { width: 100%; max-height: 92svh; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(100%); }
  @starting-style { .drink-dialog[open] { transform: translateY(100%); } }
  .drink-detail__actions { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (prefers-reduced-motion: reduce) {
  .drink-dialog, .nav-sheet { transform: none; transition: opacity 0.2s linear, overlay 0.2s allow-discrete, display 0.2s allow-discrete; }
  .nav-sheet:not([open]) { opacity: 0; }
  .cat__chev, .cat__name { transition: none; }
}

/* ---------------------------------------------------------------------------------------------------
   SMALL SHARED PIECES
   --------------------------------------------------------------------------------------------------- */
.page-top { padding-top: var(--header-h); }
.page-intro { padding-block: var(--s-6) var(--s-5); }
.page-intro .lead { margin-top: var(--s-3); }
.page-head__aside { display: flex; align-items: center; gap: var(--s-4); color: var(--ink-soft); }
.page-head__aside .small { display: none; }
@media (min-width: 40rem) { .page-head__aside .small { display: block; } }

.flip { transform: scaleX(-1); }
.link-inline { display: inline; min-height: 0; padding: 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }

.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------------------------------------------------------------------------------------------------
   OTHER PAGES: gallery, order, about, contact, FAQ, legal text, 404, closing call-to-action
   --------------------------------------------------------------------------------------------------- */

/* ---- gallery: filters, one section per menu category, and a viewer ----
   The board is a run of sections that borrow the menu's own heading (a name in the menu's type and a link to that part of the menu).
   Product pictures are all drawn alike: one pale green box per drink, every cup the same height, standing on the same baseline,
   centred, with its name under the box and nothing else around it (no card, no border). The café photographs are another kind of picture
   and get a band of their own, as plain photographs. Which numbers place a cup is written once, as --g-h (cup height) and --g-base (baseline),
   in percent of the box; each picture's own empty margins (--l --r --t --b, from GALLERY_FIT in data.js) are measured, so a file's
   transparent padding never decides where its cup lands. */
.gallery-lead { max-width: 34rem; margin: 0; padding-bottom: var(--s-5); color: var(--ink-soft); }
@media (max-width: 47.99rem) { .gallery-lead { padding-bottom: var(--s-4); font-size: var(--fs-body); } }
.gallery-filters {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: var(--cream-92);
  border-bottom: 1px solid var(--hairline);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
}
.gallery-sub { padding-top: var(--s-3); scroll-margin-top: calc(var(--header-h) + 3.5rem); }

/* the filter: five short chips that share the width on a phone; the chosen one is the filled green chip */
.chips { display: flex; gap: 0.375rem; margin-inline: calc(-1 * var(--gutter)); padding: var(--s-2) var(--gutter); overflow-x: auto; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips--sub { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
.chip {
  position: relative;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.25rem;
  padding: 0 0.5rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.12s var(--ease);
}
.chip::after { content: ""; position: absolute; inset: -0.25rem 0; }   /* the touch area stays 44px tall */
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { border-color: var(--forest); background: var(--forest); color: var(--gold); }
.chip--sm { flex: none; padding: 0 var(--s-3); }
@media (min-width: 40rem) {
  .chips { gap: var(--s-2); }
  .chip { flex: none; padding: 0 var(--s-4); letter-spacing: 0.08em; }
  .chip--sm { padding: 0 var(--s-3); }
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { background: var(--wash); }
  .chip[aria-pressed="true"]:hover { background: var(--forest-deep); }
}

/* the board */
.g-board { padding-bottom: var(--s-7); scroll-margin-top: calc(var(--header-h) + 3.5rem); }
.g-board.ends-in-band { padding-bottom: 0; }
.g-sec { padding-block: var(--s-5); }
.g-sec[hidden] { display: none; }
.g-sec__head { display: flex; align-items: center; gap: var(--s-3); min-height: 3.5rem; padding-block: var(--s-2) var(--s-4); border-top: 2px solid var(--ink); }
.g-sec__title { margin: 0; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.g-sec__link { margin-left: auto; font-size: var(--fs-small); }
.g-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40rem) {
  .g-grid--drinks, .g-grid--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
}
@media (min-width: 48rem) { .g-grid--feature { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); } }
@media (min-width: 64rem) { .g-grid--drinks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .g-grid--drinks { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* a tile: a picture box with its name under it */
.g-tile { scroll-margin-top: 3.5rem; }   /* a tile reached with the keyboard stops below the sticky filter bar, not under it */
.g-tile__btn { display: grid; align-content: start; gap: var(--s-2); width: 100%; text-align: left; }
.g-tile__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-md); background: var(--sage-tint); transition: transform 0.15s var(--ease); }
.g-tile__btn:active .g-tile__media { transform: scale(0.98); }
.g-tile__media img { position: absolute; display: block; transition: transform 0.25s var(--ease); }
.g-tile__cap { display: grid; justify-items: start; gap: 0.25rem; padding-inline: 0.125rem; }
.g-tile__name { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.005em; text-wrap: balance; }
.g-tile__tag { padding: 0.125rem 0.5rem; border-radius: var(--r-pill); background: var(--gold); color: var(--forest-deep); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.02em; }
@media (min-width: 48rem) { .g-tile__name { font-size: var(--fs-body); } }

/* product pictures (cups): the cup is --g-h tall, stands on --g-base, is centred; a soft shadow on the baseline anchors it */
.g-tile--product .g-tile__media { --g-h: 78; --g-base: 10; background: radial-gradient(85% 65% at 50% 42%, var(--sage-glow), var(--sage-tint)); }
.g-tile--product .g-tile__media::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(var(--g-base) * 1%);
  width: 54%;
  height: 7%;
  translate: -50% 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ground), transparent);
  pointer-events: none;
}
.g-tile--product .g-tile__media img {
  --l: 0.04; --r: 0.04; --t: 0.028; --b: 0.028;                   /* typical margins; the picture's own measurements replace these */
  --hi: calc(var(--g-h) / (1 - var(--t) - var(--b)));             /* the picture's height (% of the box) that makes the cup itself --g-h tall */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: auto;
  max-width: none;
  height: calc(var(--hi) * 1%);
  bottom: calc((var(--g-base) - var(--b) * var(--hi)) * 1%);
  translate: calc((var(--r) - var(--l)) * 50%) 0;                 /* a cup that sits a little to one side of its file is moved back to the middle */
}
/* crêpes: wide plates in a wider box, the plate itself --g-w wide, centred both ways */
.g-grid--wide .g-tile__media { --g-w: 80; aspect-ratio: 4 / 3; }
.g-grid--wide .g-tile--product .g-tile__media::before { display: none; }
.g-grid--wide .g-tile--product .g-tile__media img {
  top: 0;
  bottom: 0;
  height: auto;
  width: calc(var(--g-w) / (1 - var(--l) - var(--r)) * 1%);
  translate: calc((var(--r) - var(--l)) * 50%) calc((var(--b) - var(--t)) * 50%);
  filter: drop-shadow(0 8px 8px var(--ground));
}

/* café photographs: plain photographs, no printed captions, in a warm band of their own */
.g-sec--cafe { padding-block: var(--s-6); background: var(--tan-soft); }
.g-grid--cafe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.g-tile--photo .g-tile__btn { display: block; }
.g-tile--photo .g-tile__media img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-grid--cafe .g-tile--lead { grid-column: 1 / -1; }
.g-grid--cafe .g-tile--lead .g-tile__media { aspect-ratio: 1; }
@media (min-width: 40rem) {
  .g-grid--cafe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
  .g-grid--cafe .g-tile--lead { grid-column: span 2; grid-row: span 2; }   /* the café itself is the big picture; the four small ones fill the rest */
  .g-grid--cafe .g-tile--lead .g-tile__btn, .g-grid--cafe .g-tile--lead .g-tile__media { height: 100%; }
  .g-grid--cafe .g-tile--lead .g-tile__media { aspect-ratio: auto; }
}
.gallery-empty { padding-block: var(--s-8); color: var(--ink-soft); text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .g-tile--product .g-tile__btn:hover .g-tile__media img { transform: translateY(-6px); }
  .g-tile--photo .g-tile__btn:hover .g-tile__media img { transform: scale(1.04); }
}

.lightbox {
  --focus: var(--gold);
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(6 22 12 / 0.98);
  color: var(--cream);
  opacity: 0;
  transition: opacity 0.24s var(--ease), overlay 0.24s allow-discrete, display 0.24s allow-discrete;
}
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; opacity: 1; }
@starting-style { .lightbox[open] { opacity: 0; } }
.lightbox::backdrop { background: transparent; }
.lightbox__stage { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: calc(var(--header-h) / 2 + var(--s-5)) var(--gutter) var(--s-4); }
.lightbox__img { width: auto; height: auto; max-width: min(100%, 64rem); max-height: 100%; object-fit: contain; border-radius: var(--r-md); }
.lightbox__img.is-product { padding: var(--s-5); background: var(--sage-tint); filter: none; }
.lightbox__bar { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); }
.lightbox__text { display: grid; flex: 1 1 auto; min-width: 0; gap: 0.125rem; }
.lightbox__name { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.lightbox__sub { color: var(--cream-70); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lightbox__link { flex: none; }
@media (max-width: 39.99rem) {
  .lightbox__bar { flex-wrap: wrap; row-gap: var(--s-1); }
  .lightbox__link { order: 3; flex-basis: 100%; justify-content: center; }   /* the link gets a row of its own on a phone */
}
.lightbox__close { position: absolute; top: var(--s-3); right: var(--gutter); }
.lightbox .icon-btn { background: var(--wash-dark); }
@media (hover: hover) and (pointer: fine) { .lightbox .icon-btn:hover { background: rgb(246 240 223 / 0.24); } }

/* ---- order page ---- */
.order-hero { display: grid; gap: var(--s-7) var(--s-8); align-items: center; }
.order-hero .lead { margin-top: var(--s-4); }
.order-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.order-options { margin-top: var(--s-7); border-top: 1px solid var(--hairline); }
.order-options h2 { margin-top: var(--s-5); font-size: var(--fs-h3); }
.order-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 3.5rem;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
}
.order-option svg { width: 1.125rem; height: 1.125rem; color: var(--forest); transition: transform 0.2s var(--ease); }
.order-notes { display: grid; gap: var(--s-2); margin-top: var(--s-5); color: var(--ink-soft); font-size: var(--fs-small); }
.counter { overflow: hidden; border-radius: var(--r-lg); background: var(--sage-tint); }
.counter__cups { display: flex; align-items: flex-end; justify-content: center; gap: var(--s-5); padding: var(--s-7) var(--s-5) var(--s-6); }
.counter__cups img { width: auto; height: 15rem; max-width: 30%; object-fit: contain; filter: drop-shadow(0 12px 12px rgb(20 45 25 / 0.28)); }
.counter__cups img:nth-child(2) { height: 18rem; }
@media (min-width: 48rem) { .order-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
@media (hover: hover) and (pointer: fine) { .order-option:hover svg { transform: translate(2px, -2px); } .order-option:hover { color: var(--forest); } }

/* ---- about: the shop first, then what we make, then what else is in the shop ---- */
.about { display: grid; gap: var(--s-6) var(--s-8); align-items: center; }
.about__copy > * + * { margin-top: var(--s-4); }
.about__copy .label { color: var(--forest); }
.about__copy .lead { color: var(--ink); }
.about__media { order: -1; position: relative; }
.about__photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: var(--sage); }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
/* the same round gold "Est." sticker as on the home hero, set on the corner of the photo */
.sticker { display: grid; place-content: center; gap: 0.125rem; width: 5.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--gold); color: var(--forest-deep); text-align: center; transform: rotate(-10deg); box-shadow: 0 8px 22px rgb(8 28 16 / 0.35); }
.sticker .label { letter-spacing: 0.12em; }
.sticker strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.about__sticker { position: absolute; left: var(--s-4); bottom: var(--s-4); }
.about-shop { display: grid; gap: var(--s-6) var(--s-7); }
.about-shop h2 { font-size: var(--fs-h3); }
.about-shop p { margin-top: var(--s-2); max-width: var(--measure); color: var(--ink-soft); }
.about-shop .link-arrow { font-weight: 600; }
.about-shop__bunny { display: grid; gap: var(--s-4); align-content: start; }
.about-shop__photo { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg); background: var(--tan-soft); }
.about-shop__photo img { width: 100%; height: 100%; object-fit: cover; }
.about-shop__loyalty { display: grid; align-content: center; padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); background: var(--forest); color: var(--cream); }
.about-shop__loyalty p { color: var(--cream-70); }
.stamps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); max-width: 26rem; margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.stamps li { display: grid; place-items: center; aspect-ratio: 1; border: 1.5px dashed var(--line-dark-strong); border-radius: 50%; color: transparent; }
.stamps li svg { width: 42%; height: 42%; }
.stamps li.is-on { border-color: var(--gold); background: var(--gold); color: var(--forest-deep); }
@media (min-width: 48rem) {
  .about-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .about-shop__loyalty { padding: var(--s-7) var(--s-6); }
}
@media (min-width: 64rem) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .about__sticker { left: -1.75rem; bottom: 3rem; }
  .about__media { order: 0; }
  .about__photo { aspect-ratio: 4 / 5; }
}

/* ---- contact: Instagram first, then the phone and the visit details ---- */
.contact { display: grid; gap: var(--s-6) var(--s-8); align-items: start; }
.contact__primary { display: grid; justify-items: start; gap: var(--s-4); padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); }
.contact__primary h2 { font-size: var(--fs-h2); line-height: 1.05; }
.contact__handle { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; color: var(--gold); font-family: var(--font-display); font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-decoration: none; overflow-wrap: anywhere; }
.contact__handle svg { width: 1.75rem; height: 1.75rem; flex: none; }
.contact__primary-note { max-width: 26rem; color: var(--cream-70); }
.contact__rows { border-top: 2px solid var(--ink); }
.contact__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--hairline); }
.contact__row > div, .contact__row > p { min-width: 0; }
.contact__row .label { margin-bottom: var(--s-1); color: var(--forest); }
.contact__row address { font-style: normal; }
.contact__row--stack { display: block; }
.contact__row--stack .label { margin-bottom: var(--s-2); }
.contact__row--stack > p:not(.label) { max-width: var(--measure); }
.contact__phone { display: inline-flex; align-items: center; min-height: 2.75rem; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; text-decoration: none; }
.contact__social, .contact__apps { display: grid; margin: 0; padding: 0; list-style: none; }
.contact__social a, .contact__apps a { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 2.75rem; font-weight: 600; text-decoration: none; }
.contact__social svg { width: 1.25rem; height: 1.25rem; }
.contact__apps svg { width: 1rem; height: 1rem; color: var(--forest); }
.contact__social .muted { font-weight: 400; }
@media (min-width: 56rem) {
  .contact { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .contact__primary { position: sticky; top: calc(var(--header-h) + var(--s-5)); padding: var(--s-7) var(--s-6); }
}
@media (hover: hover) and (pointer: fine) { .contact__social a:hover, .contact__apps a:hover, .contact__phone:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } .contact__handle:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } }

/* ---- FAQ (native <details>: works without JavaScript) ---- */
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 3.5rem; padding-block: var(--s-3); cursor: pointer; list-style: none; font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; line-height: 1.3; }
.faq__q::-webkit-details-marker { display: none; }
.faq__chev { width: 1.125rem; height: 1.125rem; flex: none; color: var(--forest); transition: transform 0.25s var(--ease); }
.faq__item[open] .faq__chev { transform: rotate(90deg); }
.faq__a { padding: 0 var(--s-6) var(--s-4) 0; max-width: var(--measure); color: var(--ink-soft); }

/* ---- legal text ---- */
.legal { max-width: 44rem; }
.legal__updated { margin-top: var(--s-3); color: var(--ink-soft); font-size: var(--fs-small); }
.legal__body { margin-top: var(--s-6); }
.legal__body > p:first-child { font-size: var(--fs-lead); }
.legal__body section { margin-top: var(--s-7); scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.legal__body h2 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.legal__body p + p { margin-top: var(--s-3); }
.legal__body a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* ---- closing call to action ---- */
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-7); padding-block: var(--s-8); }
.cta-band h2 { max-width: 28rem; }
.cta-band p { margin-top: var(--s-3); max-width: 28rem; color: var(--cream-70); }
/* the same band on a cream page (the end of the Menu page) */
.cta-band.cta-band--light { margin-top: var(--s-7); padding-block: var(--s-6) var(--s-8); border-top: 1px solid var(--hairline); }
.cta-band.cta-band--light p { color: var(--ink-soft); }

/* ---- 404 ---- */
.notfound { display: grid; justify-items: start; gap: var(--s-5); padding-block: var(--s-9); }
.notfound h1 { max-width: 20rem; }

/* ---------------------------------------------------------------------------------------------------
   MOTION AND CONTRAST PREFERENCES: keep the state changes, drop the travel
   --------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) { .gallery-filters { background: var(--cream); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .sticker { transform: none; }
  .btn svg, .link-arrow svg, .order-option svg, .faq__chev, .crepe__plate img, .lineup__cup img, .g-tile__media img { transition: none; transform: none !important; }
  .nav-social { transform: none; transition: opacity 0.2s linear, visibility 0s linear 0.2s; }
  .nav-social.is-visible { transition-delay: 0s; }
  .btn:active, .icon-btn:active, .social-link:active, .dock__item:active, button.item:active, .chip:active, .g-tile__btn:active .g-tile__media { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --hairline: rgb(18 40 27 / 0.5); --hairline-dark: rgb(246 240 223 / 0.55); --cream-70: rgb(246 240 223 / 0.92); --cream-92: rgb(246 240 223 / 0.98); --line-strong: rgb(18 40 27 / 0.7); --line-dark-strong: rgb(246 240 223 / 0.75); --ink-soft: #243a2c; }
  .btn--secondary { --btn-bd: currentColor; }
}
@media print {
  .site-header, .dock, .consent, .skip-link { display: none !important; }
  body { background: #fff; }
}