/* =====================================================================================================
   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: a phone is the main screen, so it gets its own, quieter scale. Against the desktop scale headings come down about 20%
   (about 9% below the first phone scale), the lead line a further 6%, section padding about 22%; body copy stays at 15px (it is
   what people read, so it never shrinks) and nothing falls under 13px. At 390px wide:
     hero 23.4 (was 25.0)   h1 28.6 (was 32.1)   h2 22.2 (was 24.6)   h3 18 (was 19.2)   lead 15.5 (was 16.5)   section padding 34 (was 40) */
@media (max-width: 47.99rem) {
  :root {
    --fs-hero: clamp(1.4rem, 0.95rem + 2.1vw, 2rem);
    --fs-h1: clamp(1.625rem, 1.2rem + 2.4vw, 3.25rem);
    --fs-h2: clamp(1.375rem, 1rem + 1.6vw, 2.25rem);
    --fs-h3: 1.125rem;
    --fs-lead: 0.97rem;
    --fs-body: 0.9375rem;
    --fs-small: 0.84rem;
    --sec-y: clamp(2.125rem, 1.4rem + 2.4vw, 6rem);
    --sec-y-tight: clamp(1.75rem, 1.2rem + 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; }
.crepes, .cat-nav__scroll, .gsearch__sub { 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;
}

/* one line of copy in two wordings (assets/js/render.js, copy()): everywhere the full line, on a phone the shorter one if data.js gives one.
   display: none takes the hidden wording out of the page for a screen reader too, so only the line that is shown is ever read. */
.t-short { display: none; }
@media (max-width: 47.99rem) {
  .t-full { display: none; }
  .t-short { display: inline; }
}

/* ---------------------------------------------------------------------------------------------------
   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); }

/* the "Seasonal" tag beside a name (assets/js/render.js, tagSeason()): a dark green pill, cream letters, a gold star. The price pill is the gold one, so the two never look alike. */
.tag-season { display: inline-flex; align-items: center; gap: 0.3125rem; margin-left: 0.125rem; padding: 0.1875rem 0.625rem 0.1875rem 0.5rem; border-radius: var(--r-pill); background: var(--forest); color: var(--cream); font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; line-height: 1.2; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.tag-season svg { width: 0.625rem; height: 0.625rem; 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 with a smaller label (14.4px; still a 44px target) */
  .btn { min-height: 2.75rem; padding: 0 var(--s-4); font-size: 0.9rem; }
  .btn--sm { min-height: 2.5rem; padding: 0 var(--s-3); font-size: 0.8125rem; }
  .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); }
@media (max-width: 47.99rem) { .link-arrow { font-size: 0.9rem; } }

.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; }

/* phones: the same footer with less air and no tag line (the logo, the visit details, the links and the legal row are what it is for) */
@media (max-width: 47.99rem) {
  .site-footer { padding-top: var(--s-6); padding-bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
  .site-footer__grid { gap: var(--s-5); }
  .site-footer__brand { gap: var(--s-3); }
  .site-footer__tag { display: none; }
  .site-footer__legal { margin-top: var(--s-4); }
}
@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 */
/* PHONES: a smaller, lighter island (about 10% narrower and lower, a softer shadow, slightly more of the page showing through) so it reads
   as a tool floating over the page and never as a fourth section; every cell is still a 44px target */
@media (max-width: 47.99rem) {
  .dock { width: min(calc(100% - 2 * var(--gutter)), 17.5rem); height: 3rem; background: rgb(15 61 32 / 0.9); box-shadow: 0 8px 24px rgb(8 28 16 / 0.22); }
  .dock.is-compact { width: 9.5rem; height: 2.5rem; }
  .dock__item svg { width: 1.125rem; height: 1.125rem; transform: translateY(-0.45rem); }
  .dock__item span { margin-bottom: 0.35rem; }
  .dock__item--order { min-height: 2.25rem; }
  .dock.is-compact .dock__item--order { min-height: 2rem; }
  .dock__item--order svg { transform: translateY(-0.4rem); }
  .dock.is-compact .dock__item svg, .dock.is-compact .dock__item--order svg { transform: none; }
}
@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; }
/* No play button, ever. Safari paints its own big start button over a video it was not allowed to start by itself (an iPhone in Low Power Mode,
   for one); the poster stays up instead and assets/js/hero-video.js starts the footage on the first touch. */
.hero__video::-webkit-media-controls,
.hero__video::-webkit-media-controls-start-playback-button,
.hero__video::-webkit-media-controls-overlay-play-button,
.hero__video::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; opacity: 0; }
/* 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 { 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;
  }

  /* 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; }
}

/* ---- 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 (max-width: 47.99rem) { .info-rail { padding-block: var(--s-4) calc(var(--r-lg) + var(--s-4)); } }

@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); }
@media (max-width: 47.99rem) {
  .sec-head { margin-bottom: var(--s-4); }
  #crepes .sec-head p { display: none; }       /* the three crêpes sit right below the heading and say the same thing */
}

/* ---- 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; }
}
/* phones: still the special one (the panel, the cup standing across its edge, the entrance), with less around it: a smaller title, one short line,
   one button, and a cup about 14% smaller. The "see matcha drinks" link goes (the menu is one tap away in the dock). */
@media (max-width: 47.99rem) {
  .sec--dotm { padding-top: calc(var(--sec-y-tight) + 2.5rem); }
  .dotm { --cup-rise: 3.75rem; grid-template-columns: minmax(0, 1fr) 7.25rem; column-gap: var(--s-3); }
  .dotm__media { min-height: 5.5rem; }                      /* the words set the height; the cup stands taller than the block and rises above the panel */
  .dotm__title { margin-top: var(--s-2); font-size: clamp(1.625rem, 1rem + 2.8vw, 2rem); line-height: 1; }
  .dotm__desc { margin-top: var(--s-2); font-size: var(--fs-body); line-height: 1.45; }
  .dotm__actions { margin-top: var(--s-3); }
  .dotm__actions .link-arrow { display: none; }
}

@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: three drinks on a ring, like a coverflow ---------------------------------------------------------------
   The drink in front is large and fully visible; the other two stand behind it to the left and right, smaller and faded, so it is plain there are more.
   The drink's name is set very large behind the whole group. There is no box: the drinks, the name and two thin arrows sit straight on the green, and
   nothing here scrolls (no strip, no inner scroll box). assets/js/seasonal.js turns the ring and writes only transform and opacity; the numbers that
   shape it are the custom properties on .season__stage below (one place per screen size) and the script reads them from here.
   Before the script runs, the first drink stands in front and the other two behind it, which is also what the first screen of the script draws. ---- */
.sec--season { position: relative; overflow: hidden; overflow: clip; }
.sec--season::before {  /* warm light behind the drinks */
  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__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-3); }
.season__title { font-size: clamp(1.5rem, 1rem + 2.6vw, 3rem); font-weight: 900; line-height: 1; letter-spacing: -0.04em; }
@media (max-width: 47.99rem) { .season__head { flex-wrap: nowrap; align-items: center; margin-bottom: var(--s-2); } .season__head .link-arrow { flex: none; font-size: 0.875rem; } }

.season__stage {
  --side: 0.29;           /* how far the two back drinks stand to each side, as a share of the stage's width */
  --side-scale: 0.74;     /* how large they are (the drink in front is 1) */
  --side-op: 0.32;        /* and how faded */
  --back-scale: 0.6;      /* a drink going round passes behind the others, smaller still */
  --back-op: 0.1;
  --lift: 0.05;           /* the back drinks stand a little higher, as a share of the stage's height */
  --tilt: 8;              /* degrees the back drinks turn toward the middle (0 = they stay flat) */
  --fill: 0.92;           /* how much of the stage width the longer line of the big name fills */
  --stage-h: clamp(22rem, 105vw, 26rem);
  --cup-h: 22rem;
  --name-top: 0.75rem;
  position: relative;
  height: var(--stage-h);
  container-type: size;                  /* the name and the drinks size themselves from the stage */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
@supports (height: 1cqh) { .season__stage { --cup-h: 84cqh; --name-top: 3cqh; } }
@media (min-width: 48rem) {
  .season__stage { --stage-h: clamp(28rem, 70vw, 36rem); --side: 0.3; --fill: 0.9; }
  @supports (height: 1cqh) { .season__stage { --cup-h: 72cqh; --name-top: 5cqh; } }
}
/* the drink in front is about 10% larger here than on a tablet or phone: the stage is 7% taller (so the top of the cup stays where it was, clear of the name behind it) and the two back drinks keep their size */
@media (min-width: 64rem) {
  .season__stage { --stage-h: clamp(32rem, 51.4vw, 42.8rem); --side-scale: 0.672; --lift: 0.047; --fill: 0.88; }
  @supports (height: 1cqh) { .season__stage { --cup-h: 72cqh; --name-top: 1.87cqh; } }
}
/* with the script running: a horizontal drag belongs to the drinks, a vertical one stays with the page (the browser keeps scrolling it) */
.season.is-ready .season__stage { touch-action: pan-y pinch-zoom; cursor: grab; }
.season.is-ready .season__stage.is-dragging { cursor: grabbing; }
.season__stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--r-md); }

/* the light behind the drinks, in the language of the Drink of the Month card: a soft glow, one thin tilted orbit and a small star riding it.
   It is painted on the stage itself and BENEATH the name and the drinks (isolation keeps the two pseudo-elements inside the stage), so it never
   washes over the lettering; it is still, and it follows the stage's size (percentages and container units), so it fits every screen. */
.season__stage {
  isolation: isolate;
  background: radial-gradient(ellipse 42% 50% at 50% 56%, rgb(226 246 198 / 0.36), rgb(190 232 160 / 0.15) 50%, transparent 78%);   /* it has faded out completely before the stage's top and bottom edges, so no straight edge shows */
}
.season__stage::before {                                     /* the orbit: a thin ellipse, turned 7 degrees, fading out toward the lower right */
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 60%;
  width: 98%;
  height: 50%;
  translate: -50% -50%;
  rotate: -7deg;
  border: 1.5px solid rgb(246 240 223 / 0.62);
  border-radius: 50%;
  -webkit-mask-image: conic-gradient(from 200deg, transparent 0, #000 22%, #000 62%, transparent 90%);
  mask-image: conic-gradient(from 200deg, transparent 0, #000 22%, #000 62%, transparent 90%);
  pointer-events: none;
}
@supports (width: 1cqw) {
  .season__stage::after {                                    /* the star, 24 degrees up the orbit's right side (the same four-point star as the card's) */
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(94.43cqw - 1.24cqh);
    top: calc(49.91cqh - 5.46cqw);
    width: 1.5rem;
    height: 1.5rem;
    translate: -50% -50%;
    background: rgb(255 244 205);
    clip-path: polygon(50% 0, 65.8% 34.2%, 100% 50%, 65.8% 65.8%, 50% 100%, 34.2% 65.8%, 0 50%, 34.2% 34.2%);
    pointer-events: none;
  }
}
@media (max-width: 47.99rem) { .season__stage::after { width: 1.25rem; height: 1.25rem; } }

/* the name, very large, behind the drinks: one line of type per two words, every drink's name in the same place, only the one in front showing */
.season__names { position: absolute; inset: 0; z-index: 0; display: grid; justify-items: center; align-content: start; padding-top: var(--name-top); pointer-events: none; }
.season__big {
  grid-area: 1 / 1;
  margin: 0;
  color: rgb(255 250 236);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 11vw, 8.5rem);                       /* sized from the screen's width until container units are known */
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
.season__big:not(:first-child) { opacity: 0; }
.season__big span { display: block; }
@supports (width: 1cqw) { .season__big { font-size: min(9.5rem, calc(var(--fill) * 100cqw / (var(--len) * 0.68))); } }     /* --len is the number of letters in the longer line and 0.68em the widest a letter of this type runs, so the longer line fills --fill of the stage */

/* the drinks: each stands on the stage's floor, centred; the script sets transform, opacity and stacking order (what is written here is the first drink in front, the others behind) */
.season__track { position: absolute; inset: 0; z-index: 1; perspective: 1100px; perspective-origin: 50% 40%; }
.season__slide {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 3;
  height: var(--cup-h);
  translate: -50% 0;
  transform-origin: 50% 100%;
  isolation: isolate;
}
.season__slide:nth-child(2) { z-index: 1; opacity: var(--side-op); transform: translate3d(calc(var(--side) * 100cqw), calc(var(--lift) * -100cqh), 0) rotateY(calc(var(--tilt) * -1deg)) scale(var(--side-scale)); }
.season__slide:nth-child(3) { z-index: 1; opacity: var(--side-op); transform: translate3d(calc(var(--side) * -100cqw), calc(var(--lift) * -100cqh), 0) rotateY(calc(var(--tilt) * 1deg)) scale(var(--side-scale)); }
.season.is-ready .season__slide:not([data-active]) { cursor: pointer; }
.season__slide img { display: block; width: auto; height: 100%; max-width: none; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 18px 14px rgb(2 14 7 / 0.45)); }
.season__slide::before {    /* the drink's own light: matcha green, toffee gold, spiced peach */
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6% -16% -2%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), transparent 80%);
  pointer-events: none;
}
.season__slide::after {     /* a contact shadow, so the cup stands on the green instead of floating */
  content: "";
  position: absolute;
  z-index: -1;
  left: 12%;
  right: 12%;
  bottom: -0.3rem;
  height: 1rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(2 14 7 / 0.55), transparent);
  pointer-events: none;
}
.season__slide:nth-child(1) { --glow: rgb(160 214 126 / 0.34); }       /* matcha */
.season__slide:nth-child(2) { --glow: rgb(230 190 110 / 0.36); }       /* toffee */
.season__slide:nth-child(3) { --glow: rgb(244 178 138 / 0.36); }       /* spiced chai */

/* the two arrows: thin, small and quiet, at the far left and right; the touch area is much larger than the line you see */
.season__arrow {
  position: absolute;
  z-index: 4;
  bottom: calc(var(--cup-h) / 2);
  display: none;
  place-items: center;
  width: 3.25rem;
  height: 7rem;
  translate: 0 50%;
  color: var(--cream);
  opacity: 0.55;
  transition: opacity 0.2s var(--ease);
}
.season.is-ready .season__arrow { display: grid; }
.season__arrow--prev { left: calc(-1 * var(--gutter)); }
.season__arrow--next { right: calc(-1 * var(--gutter)); }
.season__arrow svg { width: 1.625rem; height: 1.625rem; stroke-width: 1.25; }
.season__arrow:focus-visible { opacity: 1; outline: 2px solid var(--gold); outline-offset: -4px; border-radius: var(--r-md); }
.season__arrow:active { opacity: 1; }

/* one short line for the drink in front, and three tiny dots (all three lines share one cell, so the section never changes height) */
.season__foot { display: grid; justify-items: center; gap: var(--s-1); margin-top: var(--s-4); text-align: center; }
.season__lines { display: grid; justify-items: center; }
.season__line { grid-area: 1 / 1; max-width: 26rem; margin: 0; color: var(--cream-92); font-size: var(--fs-lead); line-height: 1.4; }
@media (max-width: 47.99rem) { .season__line { max-width: 20rem; font-size: 1rem; } }
.season__lines .season__line:not(:first-child) { opacity: 0; }
.season__dots { display: none; justify-content: center; }
.season.is-ready .season__dots { display: flex; }
.season__dot { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }        /* a 44px target around a 7px dot */
.season__dot i { display: block; width: 0.4375rem; height: 0.4375rem; border: 1px solid rgb(246 240 223 / 0.55); border-radius: 50%; transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.season__dot[aria-current="true"] i { border-color: var(--gold); background: var(--gold); }

@media (prefers-reduced-motion: no-preference) {
  .season.is-ready .season__slide, .season.is-ready .season__big, .season.is-ready .season__line { will-change: transform, opacity; }
  /* the one-time entrance: the whole group settles in the first time the section is on screen */
  .reveal .season:not(.is-in) .season__stage { opacity: 0; translate: 0 1.5rem; }
  .reveal .season .season__stage { transition: opacity 0.8s var(--ease), translate 1s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  /* a change switches cleanly: the drinks jump to their places (the script) and only the fade stays, short */
  .season.is-ready .season__slide, .season.is-ready .season__big, .season.is-ready .season__line { transition: opacity 0.2s linear; }
}
@media (hover: hover) and (pointer: fine) {
  .season__arrow:hover { opacity: 1; }
  .season__dot:hover i { border-color: var(--cream); }
  .season__dot[aria-current="true"]:hover i { border-color: var(--gold); }
}

/* ---- 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); }
.crepes__more { margin-top: var(--s-5); }
/* phones: the zigzag stays (plate, words, then words, plate), with plates about 11% smaller, a few words under each name and tighter rows;
   every plate is fully in view and the three rows fit on one screen */
@media (max-width: 47.99rem) {
  .crepes { display: grid; gap: var(--s-2); margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .crepe { flex: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--s-3); align-items: center; }
  .crepe:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .crepe__plate { grid-column: 1; grid-row: 1 / span 2; transform-origin: 100% 50%; transform: rotate(-3deg) scale(1.02); }
  .crepe__name { grid-column: 2; grid-row: 1; align-self: end; margin-top: 0; font-size: 1rem; }
  .crepe__desc { grid-column: 2; grid-row: 2; align-self: start; margin-top: var(--s-1); line-height: 1.4; }
  .crepe:nth-child(even) .crepe__plate { grid-column: 2; transform-origin: 0% 50%; transform: rotate(2.5deg) scale(1.02); }
  .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; }
  .crepes__more { margin-top: var(--s-2); }
}
@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; }
/* phones: the heading and one small button share a row; the line under the heading goes; the cups are about 15% smaller */
@media (max-width: 47.99rem) {
  .find__head { flex-wrap: nowrap; align-items: center; gap: var(--s-3); }
  .find__head > div { flex: 1 1 auto; min-width: 0; }
  .find__head p { display: none; }
  .find__head .btn, .find__head .link-arrow { flex: none; }
  .find__head .btn { padding: 0 var(--s-3); font-size: 0.8125rem; }
  .lineup { margin-top: var(--s-3); padding-bottom: var(--s-2); }
  .lineup__item { gap: var(--s-2); }
  .lineup__cup { height: 6.75rem; }
}
@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; }
/* phones: a short line, one link, and a lower picture block */
@media (max-width: 47.99rem) {
  .shop { gap: var(--s-4); }
  .shop .lead { margin-top: var(--s-2); }
  .shop__links { margin-top: var(--s-2); }
  .shop__more { display: none; }
  .shop-photos { aspect-ratio: 1.6; }
  .shop-photos[data-count="2"] { aspect-ratio: 1.8; }
  .shop-photos[data-count="1"] { aspect-ratio: 1.6; }
}
@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; }
/* phones: the details and the two buttons first, the picture as a low band, and no holiday note (it is on the order and contact pages) */
@media (max-width: 47.99rem) {
  .visit { gap: var(--s-5); }
  .visit__list { gap: var(--s-3); margin-top: var(--s-4); }
  .visit__item { grid-template-columns: 4.25rem minmax(0, 1fr); }
  .visit__actions { margin-top: var(--s-4); }
  .visit .hours__note { display: none; }
  .visit__photo { aspect-ratio: 16 / 9; max-width: none; }
  .visit__photo img { object-position: 50% 58%; }
}
@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 14% against the desktop list), 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.5rem; 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-3); }
  .item { min-height: 4.125rem; gap: var(--s-3); }
  .item__thumb { width: 3.375rem; height: 3.375rem; }
  .item__icons .ico { width: 1.125rem; height: 1.125rem; }
  .menu-key { margin: var(--s-3) 0 var(--s-4); padding: var(--s-2) var(--s-3) 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: the search pill and its 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 { display: none; } }          /* the heading, the filters and the pictures say it */
/* ---- the search control: one compact pill that opens into the filters ------------------------------------------------------------
   Closed, it is a small pill ("Search drinks..."). The mouse moving onto it, the field taking the focus (a tap, on a phone) or a filter being reached
   with the keyboard opens it: on a computer the pill widens and the five filters slide out of it one after another; on a phone they unfold under the
   field. It stays just under the header while the page scrolls and is drawn over the pictures, never moving them. The pictures are the results (there is
   no list). Only the pill's width, transform, opacity, a very small blur and a shadow move; with "reduce motion" nothing slides or widens.
   assets/js/gallery.js sets data-open on .gsearch (and data-has-text / data-scoped); everything you see follows from those. ---- */
.gallery-filters {
  position: sticky;
  top: calc(var(--header-h) + 0.5rem);
  z-index: 30;
  height: 3rem;
  margin-bottom: var(--s-4);
  pointer-events: none;                           /* only the pill takes the pointer: the pictures beside it stay reachable */
}
.gsearch {
  --h: 3rem;                                      /* the height of the pill */
  --field: 17.5rem;                               /* the closed pill's width on a computer */
  --chips: 24.5rem;                               /* the room the five filters need beside it */
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  height: 100%;
}
@supports (transition-timing-function: linear(0, 1)) {
  .gsearch { --spring: linear(0, 0.14 4%, 0.42 9%, 0.7 15%, 0.91 21%, 1.03 28%, 1.056 33%, 1.054 38%, 1.022 47%, 1.004 55%, 0.998 65%, 1); }     /* a spring that settles with a hair of overshoot */
}
.gsearch__surface {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: var(--h) auto auto;
  grid-template-areas: "field" "chips" "sub";
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--h) / 2);
  background: rgb(255 255 255 / 0.95);
  box-shadow: 0 1px 2px rgb(18 40 27 / 0.06), 0 4px 14px rgb(18 40 27 / 0.07);
  pointer-events: auto;
  transition: width 0.5s var(--spring), box-shadow 0.3s var(--ease), border-color 0.2s var(--ease);
}
.gsearch[data-open="true"] .gsearch__surface { box-shadow: 0 2px 4px rgb(18 40 27 / 0.06), 0 14px 34px rgb(18 40 27 / 0.16); }
.gsearch__surface:has(.gsearch__input:focus) { border-color: var(--forest); }
@media (min-width: 48rem) {
  .gsearch__surface {
    grid-template-columns: calc(var(--field) - 2px) minmax(var(--chips), 1fr);
    grid-template-rows: var(--h) auto;
    grid-template-areas: "field chips" "sub sub";
    width: var(--field);
  }
  .gsearch[data-open="true"] .gsearch__surface { width: min(100%, calc(var(--field) + var(--chips))); }
}

/* the field: a magnifier, the typed words, a clear button and (closed, with a filter chosen) a small label of what is chosen */
.gsearch__field { position: relative; grid-area: field; display: flex; align-items: center; gap: 0.625rem; min-width: 0; height: var(--h); padding: 0 0.625rem 0 1rem; cursor: text; }
.gsearch__icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--ink-soft); }
.gsearch__input {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;                                /* 16px: a phone does not zoom the page when the field is touched */
  font-weight: 500;
  line-height: 1.2;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
}
.gsearch__input::placeholder { color: var(--ink-soft); opacity: 1; }
.gsearch.is-ready .gsearch__input::placeholder { color: transparent; }                    /* the placeholder is drawn over the field, so it can change with a little movement */
.gsearch__input::-webkit-search-cancel-button, .gsearch__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.gsearch__ph {
  position: absolute;
  left: 2.875rem;
  top: 50%;
  translate: 0 -50%;
  max-width: calc(100% - 4.5rem);
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.15s ease-out, transform 0.22s var(--ease), filter 0.15s ease-out;
}
.gsearch__ph.is-out { opacity: 0; transform: translateY(-0.4em); filter: blur(3px); }
.gsearch__ph.is-pre { opacity: 0; transform: translateY(0.4em); filter: blur(3px); transition: none; }
.gsearch[data-has-text="true"] .gsearch__ph, .gsearch[data-scoped="true"]:not([data-open="true"]) .gsearch__ph { opacity: 0; transition: none; }   /* typed words, or the label of a chosen filter, take its place at once */
.gsearch__clear { order: 3; position: relative; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--wash); color: var(--ink-soft); }
.gsearch__clear[hidden] { display: none; }
.gsearch__clear::after { content: ""; position: absolute; inset: -0.5rem; }              /* the touch area stays 44px */
.gsearch__clear svg { width: 0.875rem; height: 0.875rem; }
.gsearch__scope {                                 /* the chosen filter, as a small label beside the magnifier (not a control: the open pill is where it is changed) */
  order: 1;
  display: none;
  flex: none;
  align-items: center;
  max-width: 9.5rem;
  height: 1.625rem;
  padding: 0 0.625rem;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--forest);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.gsearch[data-scoped="true"]:not([data-open="true"]) .gsearch__scope { display: inline-flex; }

/* the filters: five small chips; they slide out of the pill one after another (--i is a chip's place in the row) */
.gsearch__chips { grid-area: chips; display: flex; align-items: center; min-width: 0; padding-right: 0.625rem; }
.gsearch__chips-in { display: flex; align-items: center; gap: 0.25rem; }
.chip {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.875rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-1.25rem) scale(0.88);
  filter: blur(3px);
  transition: opacity 0.18s ease-out, transform 0.3s var(--ease), filter 0.18s ease-out, background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip::after { content: ""; position: absolute; inset: -0.375rem -0.125rem; }             /* the touch area stays 44px tall */
.chip[aria-pressed="true"] { background: var(--forest); color: var(--gold); }
.chip--sm { min-height: 1.75rem; padding: 0 0.625rem; }
.gsearch[data-open="true"] .chip {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.22s ease-out calc(var(--i, 0) * 45ms + 60ms), transform 0.55s var(--spring) calc(var(--i, 0) * 45ms + 60ms), filter 0.22s ease-out calc(var(--i, 0) * 45ms + 60ms), background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.gsearch[data-open="true"] .chip:active { transform: scale(0.96); transition-duration: 0.1s; transition-delay: 0s; }

/* the drink categories: a second row that unfolds under the filters while Drinks is chosen */
.gsearch__subwrap { grid-area: sub; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.gsearch__subwrap[hidden] { display: none; }
.gsearch__subwrap[data-show="true"] { grid-template-rows: 1fr; }
.gsearch__sub { display: flex; flex-wrap: wrap; gap: 0 0.375rem; min-height: 0; padding: 0 0.75rem; overflow: hidden; box-shadow: inset 0 1px 0 var(--hairline); }
.gsearch__sub .chip { margin-block: 0.5rem; }

/* PHONES: the filters unfold under the field, sharing the width; the drink categories scroll sideways in one row */
@media (max-width: 47.99rem) {
  .gsearch__chips { display: grid; grid-template-rows: 0fr; padding: 0; transition: grid-template-rows 0.35s var(--ease); }
  .gsearch[data-open="true"] .gsearch__chips { grid-template-rows: 1fr; }
  .gsearch__chips-in { gap: 0.25rem; min-height: 0; padding: 0.125rem 0.625rem 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }   /* five chips fit from 360px up; on anything narrower the row slides */
  .gsearch__chips-in .chip { flex: 1 1 auto; min-height: 2rem; padding: 0 0.375rem; margin-bottom: 0.5rem; }
  .gsearch__sub { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
  .gsearch__chips-in::-webkit-scrollbar, .gsearch__sub::-webkit-scrollbar { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover { background: var(--wash); }
  .chip[aria-pressed="true"]:hover { background: var(--forest-deep); }
  .gsearch__clear:hover { background: rgb(18 40 27 / 0.14); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .gsearch__surface { transition: box-shadow 0.2s linear; }
  .gsearch__chips, .gsearch__subwrap { transition: none; }
  .gsearch .chip, .gsearch[data-open="true"] .chip, .gsearch[data-open="true"] .chip:active { transform: none; filter: none; transition: opacity 0.15s linear, background-color 0.2s linear, color 0.2s linear; }
  .gsearch__ph, .gsearch__ph.is-out, .gsearch__ph.is-pre { transform: none; filter: none; transition: none; }
}

/* 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 search pill, not under it */
.g-tile[hidden] { display: none; }
.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; }
.gallery-empty button { color: var(--forest); font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
/* PHONES: made for looking, not reading. Squarer tiles (about 12% lower, so the cups are about 11% smaller and a screen shows more of them),
   13px names, a lower section heading, a drink filter that scrolls sideways in one row (instead of wrapping into four) and a lower café picture. */
@media (max-width: 47.99rem) {
  .g-board { padding-bottom: var(--s-6); }
  .g-sec { padding-block: var(--s-4); }
  .g-sec__head { min-height: 2.75rem; padding-block: var(--s-1) var(--s-3); }
  .g-grid { gap: var(--s-4) 0.625rem; }
  .g-tile__btn { gap: 0.375rem; }
  .g-tile__media { aspect-ratio: 9 / 10; }
  .g-tile__name { font-size: 0.8125rem; }
  .g-sec--cafe { padding-block: var(--s-5); }
  .g-grid--cafe { gap: 0.625rem; }
}
@media (max-width: 39.99rem) { .g-grid--cafe .g-tile--lead .g-tile__media { aspect-ratio: 4 / 3; } }
@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 (max-width: 47.99rem) {          /* phones: the same three cups, about 30% smaller, and tighter gaps between the parts */
  .order-hero { gap: var(--s-5); }
  .order-hero__actions { margin-top: var(--s-4); }
  .order-options { margin-top: var(--s-5); }
  .counter__cups { gap: var(--s-3); padding: var(--s-5) var(--s-4) var(--s-4); }
  .counter__cups img { height: 10.5rem; }
  .counter__cups img:nth-child(2) { height: 12.5rem; }
}
@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%; }
.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__media { order: 0; }
  .about__photo { aspect-ratio: 4 / 5; }
}
/* PHONES: the shop first (a lower picture), the one-line lead and the menu paragraph; the second paragraph (the hours) is one
   section further down, on the closing band */
@media (max-width: 47.99rem) {
  .about { gap: var(--s-4); }
  .about__copy > * + * { margin-top: var(--s-3); }
  .about__copy > p:not(.lead) ~ p { display: none; }
  .about__photo { aspect-ratio: 16 / 10; }
  .about-shop { gap: var(--s-5); }
  .about-shop__photo { aspect-ratio: 16 / 9; }
  .about-shop__loyalty { padding: var(--s-5) var(--s-4); }
  .stamps { margin-bottom: var(--s-4); }
}

/* ---- 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); }
@media (max-width: 47.99rem) {      /* phones: a shorter band, the same two buttons */
  .cta-band { gap: var(--s-4); padding-block: var(--s-6); }
  .cta-band p { margin-top: var(--s-2); }
  .cta-band.cta-band--light { margin-top: var(--s-5); padding-block: var(--s-5) var(--s-6); }
}

/* ---- 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) {
  .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; }
}