/* =========================================================
   11TREE CAFE — editorial redesign
   ---------------------------------------------------------
   Built from ui-ux-pro-max:
     · style      "Storytelling-Driven" (chapters, scroll reveals)
     · typography "Bold Typography — Inter-Tight Poster"
                  Inter 600-800 UI · JetBrains Mono labels/prices
                  Playfair Display italic ONLY for pull-quotes
                  scale 12/16/22/32/40/56/72 · H1:body >= 5:1
     · landing    editorial hero — full-bleed band + label/headline split
     · ux         sticky nav must not obscure content; reveal offset 8-16px
   Palette is taken from the official logo: royal blue #0129A3 + white.
   The generic restaurant palette (appetizing red on light) is ignored, as is
   the green+gold this used to run — see the token block below.
   ========================================================= */

/* ---------------- Tokens ----------------
   Sampled from the official logo (11Tree_Cafe_Logo.pdf): a royal-blue disc
   with white artwork. The disc measures #0129A3 and that is the anchor for
   everything below. The system is deliberately monochrome — blue and white,
   exactly as the logo is. There is no second hue anywhere. */
:root {
  /* deep blues — the punctuation blocks */
  --deep:      #05144a;
  --deep-2:    #071b5e;
  --deep-3:    #0d2670;
  /* the second light band */
  --tint:      #eef1f8;
  --tint-2:    #dde4f2;

  /* Light-dominant base. The reference runs white for ~80% of its scroll and
     uses solid colour as punctuation, so paper is the default band and the
     blues are the accents. */
  --paper:      #f7f8fc;   /* the page card */
  --ink:        #0a0f1f;
  --ink-2:      #414a63;
  /* Measured, not eyeballed. Every micro-label (.label, .k, footer headings,
     colophon) inherits this, so it has to clear AA on BOTH light bands:
     5.58:1 on paper, 5.2:1 on tint. */
  --ink-3:      #5c6478;

  /* brand */
  --blue:      #0129a3;   /* THE logo blue, sampled from the disc */
  --blue-lite: #2f5bd4;
  --leaf:      #cfe0ff;   /* the logo's leaves are white; this is their tint */
  /* The accent carries prices, section numbers and links. On light bands the
     brand blue itself does the job at 10.71:1 — no second hue needed. On the
     deep bands it flips to a pale blue at 8.41:1. */
  --accent:        #0129a3;
  --accent-bright: #8fb4ff;
  --accent-lite:   #b9cdff;

  /* ink on the deep bands */
  --on-deep:   #eef2fb;
  --on-deep-2: #b9c6e8;
  --on-deep-3: #8fa2d0;
  /* ink on the tint band */
  --on-tint:   #0a0f1f;
  --on-tint-2: #414a63;
  --on-tint-3: #5c6478;

  /* current band — sections flip these. Paper is the default. */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --rule: rgba(10,15,31,.13);
  --accent-ink: #0129a3;

  /* type */
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --quote: "Playfair Display", Georgia, serif;
  /* The display serif is the whole personality of the reference: a
     high-contrast Didone set huge, mixed mid-sentence with the grotesque. */
  --display: "Playfair Display", "Times New Roman", Georgia, serif;

  /* scale (skill-specified, fluid) */
  --t-label: .75rem;                            /* 12 */
  --t-body:  1rem;                              /* 16 */
  --t-sub:   1.375rem;                          /* 22 */
  --t-sec:   clamp(1.5rem, 2.6vw, 2rem);        /* 32 */
  --t-h2:    clamp(2rem, 4.6vw, 2.5rem);        /* 40 */
  --t-h1:    clamp(2.5rem, 6.4vw, 3.5rem);      /* 56 */
  --t-hero:  clamp(3rem, 9vw, 4.5rem);          /* 72 */

  /* rhythm */
  --wrap: 1240px;
  /* Side padding. Raised when the page frame was removed: the frame used to
     add up to 18px of inset, and without it the content ran close to the
     glass between ~1024px and 1240px, where --wrap has stopped constraining
     but there is still plenty of screen. */
  --gutter: clamp(1.35rem, 5vw, 4rem);
  --chapter: clamp(4rem, 9vw, 8rem);            /* 8rem chapter spacing */
  --nav-h: 68px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* main.js still sets data-daypart on <html>, but nothing is themed from it any
   more: the palette is monochrome blue and the brand colour must not drift with
   the clock. The attribute is left in place as a styling hook. Whatever it ends
   up driving, it must never touch --accent — an override there once replaced
   the AA-safe value on every light band and dropped labels to 1.96:1. */

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

html {
  scroll-behavior: smooth;
  /* UX: sticky nav must not obscure anchored content */
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
  /* ⚠️ Horizontal pan lock, and it MUST be here and not only on body.
     `overflow-x: hidden` on body alone does not hold on iOS Safari — the
     document pans via the root element, so an overflowing child still lets
     the page slide sideways. That was the bug: it looked locked on desktop
     and moved on a phone.

     `clip`, not `hidden`: `hidden` turns this into a scroll container, which
     breaks the sticky nav (.nav-bar, position: sticky). `clip` clips without
     creating one. No `hidden` fallback on html for that reason — a browser
     too old for `clip` keeps today's behaviour rather than losing the nav. */
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--ui);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* fallback for browsers without `clip` */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 700; }

/* type-as-hero: tighter tracking the bigger it gets */
.hero-type { font-size: var(--t-hero); font-weight: 800; letter-spacing: -.045em; line-height: .95; }
h1          { font-size: var(--t-h1);  font-weight: 800; letter-spacing: -.038em; line-height: 1.0; }
h2          { font-size: var(--t-h2);  font-weight: 800; letter-spacing: -.032em; line-height: 1.05; }
h3          { font-size: var(--t-sub); font-weight: 700; letter-spacing: -.02em;  line-height: 1.25; }
p { margin: 0 0 1rem; }

/* ---------------- Band system ----------------
   Paper is the default (set on :root); tint is the second light band.
   The deep blues are punctuation blocks and must restate every ink token —
   inheriting the light defaults would put dark text on dark blue. */
.band { background: var(--bg); color: var(--fg); }
.band--tint {
  --bg: var(--tint); --fg: var(--on-tint);
  --fg-2: var(--on-tint-2); --fg-3: #4b5470;
  --rule: rgba(10,15,31,.14);
  --accent: var(--accent-ink);
  --blue-lite: var(--blue);
  --leaf: var(--blue);
}
.band--deep, .band--deep-2, .band--dark {
  --fg: var(--on-deep);
  --fg-2: var(--on-deep-2);
  --fg-3: var(--on-deep-3);
  --rule: rgba(238,242,251,.20);
  --accent: var(--accent-bright);
  --leaf: #cfe0ff;
  --blue-lite: #6f97ee;
  /* A solid brand-blue button disappears against a deep-blue band, so the
     primary CTA inverts to a pale fill with dark text here. */
  --btn-fill: var(--accent-bright);
  --btn-ink: #0a1024;
}
.band--deep   { --bg: var(--deep); }
.band--deep-2 { --bg: var(--deep-2); }
.band--dark    { --bg: var(--deep); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.chapter { padding-block: var(--chapter); }
.measure { max-width: 58ch; }
.center { text-align: center; }
.center .measure { margin-inline: auto; }

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

/* ---------------- Mono labels ---------------- */
.label {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 1rem;
}
.label--accent { color: var(--accent); }
.num {
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--accent);
  letter-spacing: .1em;
}

.lede { font-size: var(--t-sub); line-height: 1.45; color: var(--fg-2); letter-spacing: -.015em; }

/* pull-quote — the ONLY place Playfair italic appears */
.pull {
  font-family: var(--quote);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.25;
  color: var(--accent);
  margin: 0;
}

/* ---------------- Editorial split ---------------- */
/* mono label in a narrow left column, content in a wide right one */
.split {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2.6fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent; border-radius: 2px;
  font: inherit; font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; }

/* A fill, not text — so it takes the bright brand gold on every band. Using
   --accent here put the AA-safe dark gold behind near-black text (2.89:1). */
/* Primary CTA. Defaults to the solid logo blue with white type (11.37:1);
   the deep bands re-point --btn-fill/--btn-ink to a pale fill, because a
   brand-blue button on a brand-blue band has nothing to sit against. */
.btn--accent  { background: var(--btn-fill, var(--blue)); color: var(--btn-ink, #fff); }
.btn--accent:hover { background: var(--btn-fill-hover, var(--blue-lite)); }
.btn--line  { border-color: var(--rule); color: var(--fg); }
.btn--line:hover { border-color: var(--accent); color: var(--accent); }
.btn--solid { background: var(--blue); color: #fff; }
.btn--solid:hover { background: var(--blue-lite); }

/* ---------------- Nav ----------------
   Light nav: in the reference it sits on the white page and the links are a
   small centred row, not a right-aligned stack. */
.nav-bar {
  position: sticky; top: 0; z-index: 80;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(18,20,15,.10);
  color: var(--ink);
}
.nav-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: relative; }

/* The reference sets its wordmark half-grotesque, half-serif-italic
   ("Noodle Bar"). Ours does the same with the two 11TREE brand words. */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.brand img { width: 34px; height: 34px; border-radius: 50%; }
.brand b { font-size: 1.125rem; font-weight: 800; letter-spacing: -.03em; }
.brand b i { font-family: var(--display); font-weight: 400; font-style: italic; letter-spacing: -.01em; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav a {
  font-family: var(--ui); font-size: .8125rem; font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink-2); text-decoration: none;
  transition: color .2s ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a.btn { font-family: var(--ui); letter-spacing: -.01em; padding: .6rem 1.1rem; }
.nav a.btn--accent { color: var(--btn-ink, #fff); }

.nav-toggle {
  display: none; width: 40px; height: 40px; padding: 0;
  border: 1px solid rgba(18,20,15,.2); border-radius: 2px;
  background: transparent; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 16px; height: 1.5px;
  background: var(--ink); transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle span::before { transform: translateY(-5px); }
.nav-toggle span::after  { transform: translateY(3.5px); }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1px); }

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; top: calc(100% + .75rem); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem 1.25rem 1.25rem;
    background: var(--paper); border: 1px solid rgba(18,20,15,.14);
    box-shadow: 0 20px 50px -20px rgba(18,20,15,.25);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: .9rem 0; border-bottom: 1px solid rgba(18,20,15,.1); font-size: 1rem; }
  .nav a.btn { margin-top: 1rem; justify-content: center; border-bottom: none; }
}

/* ---------------- Hero ---------------- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) 0; }
.hero .hero-type { max-width: 14ch; }
.hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 2rem; }
.hero-meta span {
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* full-bleed image band, the editorial signature */
.bleed {
  width: 100%;
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--deep-2);
  position: relative;
}
.bleed img,
.bleed .tile-media { width: 100%; height: 100%; object-fit: cover; }
.bleed--tall { aspect-ratio: 16 / 10; }
@media (max-width: 700px) { .bleed { aspect-ratio: 4 / 3; } }

/* ---------------- Craving index ---------------- */
/* a numbered editorial list, not cards — 01 / name / rule / arrow */
.index { border-top: 1px solid var(--rule); }
.index a {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.1rem, 2.6vw, 1.75rem) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: padding-left .35s var(--ease), color .25s ease;
}
.index a:hover { padding-left: 1rem; color: var(--accent); }
.index .nm { font-size: var(--t-sec); font-weight: 800; letter-spacing: -.03em; }
.index .ct { font-family: var(--mono); font-size: var(--t-label); color: var(--fg-3); letter-spacing: .08em; }
.index .go { width: 20px; height: 20px; color: var(--fg-3); transition: transform .35s var(--ease), color .25s; }
.index a:hover .go { transform: translateX(6px); color: var(--accent); }
@media (max-width: 620px) {
  .index a { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .index .ct { display: none; }
}

/* ---------------- Feature rows ---------------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.feature + .feature { margin-top: var(--chapter); }
.feature:nth-child(even) .feature-media { order: 2; }
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature-media { order: 0; }
}
.feature-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--deep-2); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.feature:hover .feature-media img { transform: scale(1.04); }
.price {
  font-family: var(--mono); font-size: var(--t-sub);
  color: var(--accent); letter-spacing: -.01em; display: block; margin-bottom: .85rem;
}

/* ---------------- Stat strip ---------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; }
.stat b {
  display: block; font-family: var(--mono);
  font-size: clamp(2rem, 4.4vw, 2.75rem); font-weight: 500;
  color: var(--accent); line-height: 1; letter-spacing: -.02em;
}
.stat span {
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3);
  display: block; margin-top: .6rem;
}

/* ---------------- Gallery grid ---------------- */
.grid-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
@media (max-width: 700px) { .grid-photos { grid-template-columns: repeat(2, 1fr); } }
.grid-photos a, .grid-photos figure { margin: 0; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--deep-2); display: block; }
.grid-photos img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .3s; }
.grid-photos a:hover img, .grid-photos figure:hover img { transform: scale(1.06); opacity: .82; }

/* ---------------- Menu ---------------- */
.menu-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--chapter); }
.menu-nav a {
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .08em; text-transform: uppercase;
  padding: .45rem .85rem; border: 1px solid var(--rule); border-radius: 2px;
  color: var(--fg-2); text-decoration: none;
  transition: border-color .2s, color .2s, background-color .2s;
}
.menu-nav a:hover { border-color: var(--accent); color: var(--accent); }

.menu-section { margin-bottom: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: calc(var(--nav-h) + 2rem); }
.menu-section h2 {
  font-size: var(--t-sec);
  padding-bottom: .75rem; margin-bottom: .25rem;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.menu-section h2 .num { flex: none; }
.menu-list { display: grid; }
@media (min-width: 780px) { .menu-list { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); } }
.menu-item {
  display: flex; align-items: baseline; gap: .75rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rule);
}
.menu-item h3 { margin: 0; font-size: var(--t-body); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.menu-item .dots { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-.25em); }
.menu-item .amt { font-family: var(--mono); font-size: var(--t-body); color: var(--accent); }
.menu-item .qty { font-family: var(--mono); font-size: var(--t-label); color: var(--fg-3); }
.veg {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .08em;
  padding: .1rem .35rem; border: 1px solid var(--leaf);
  color: var(--leaf); vertical-align: middle;
}

/* ---------------- Info / hours ---------------- */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: .8125rem;
}
.rows .k { color: var(--fg-3); letter-spacing: .06em; text-transform: uppercase; }
.rows .v { color: var(--fg); }
.rows li.now .k, .rows li.now .v { color: var(--accent); }

address { font-style: normal; color: var(--fg-2); line-height: 1.8; }
address a { color: var(--fg); font-weight: 600; text-decoration: none; }
address a:hover { color: var(--accent); }

.note { font-family: var(--mono); font-size: var(--t-label); color: var(--fg-3); line-height: 1.6; }

/* ---------------- Form ---------------- */
.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field label {
  font-family: var(--mono); font-size: var(--t-label);
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--t-body);
  padding: .8rem .9rem;
  border: 1px solid var(--rule); border-radius: 2px;
  background: transparent; color: var(--fg); width: 100%;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field textarea { resize: vertical; min-height: 96px; }
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }
.form-status { margin-top: 1rem; padding: .85rem 1rem; border: 1px solid var(--rule); font-size: .9rem; }
.form-status[hidden] { display: none; }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--deep); color: var(--on-deep); padding-block: var(--chapter) 2rem; }
.site-footer .wrap { display: grid; gap: 2.5rem; grid-template-columns: 1.6fr repeat(3, 1fr); }
@media (max-width: 820px) { .site-footer .wrap { grid-template-columns: 1fr 1fr; } }
.site-footer h4 {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--on-deep-3);
  margin-bottom: 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { color: rgba(246,241,228,.85); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.colophon {
  max-width: var(--wrap); margin: var(--chapter) auto 0;
  padding: 1.5rem var(--gutter) 0;
  border-top: 1px solid rgba(246,241,228,.16);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-family: var(--mono); font-size: var(--t-label); color: var(--on-deep-3);
}

/* ---------------- Reveals ----------------
   UX guidance: keep the offset 8-16px so it reads as a fade, not a slide. */
[data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity .38s var(--ease), transform .38s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* headline character stagger (vanilla — GSAP SplitText is a paid plugin).
   Characters sit inside a nowrap .word wrapper so lines never break mid-word. */
.split-chars .word { display: inline-block; white-space: nowrap; }
.split-chars .word > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 18ms);
}
.split-chars.is-in .word > span { opacity: 1; transform: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal], .split-chars .word > span { opacity: 1 !important; transform: none !important; }
}

@media print {
  .nav-bar, .site-footer, .hero-actions, .menu-nav, .nav-toggle, .bleed { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal], .split-chars .word > span { opacity: 1 !important; transform: none !important; }
  .menu-item { break-inside: avoid; }
}

/* =========================================================
   EDITORIAL V2 — built from the reference reel
   ---------------------------------------------------------
   Six moves carry the whole design. In order of how much
   they matter:
     1. type mixing   — display serif italic set INSIDE a
                        grotesque caps line, mid-sentence
     2. fan-out hover — one pill becomes a stack of pills,
                        one thumbnail becomes three
     3. scrub list    — grey lines, one black active line,
                        stepped by scroll position
     4. big-menu hover— category goes italic, shifts right,
                        pops its photo and item list
     5. inversion     — paper -> deep green -> paper
     6. page card     — the whole page inset with rounded
                        corners against a warm grey
   ========================================================= */

/* ---------------- 1 · Type mixing ---------------- */
/* The single most identifiable thing in the reference. A grotesque caps
   line with one or two words swapped to display-serif italic. Set at a
   slightly larger size because the serif's x-height is smaller. */
.mix {
  font-family: var(--ui);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-transform: uppercase;
}
.mix i, .mix em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -.015em;
  font-size: 1.18em;
  line-height: .8;
}

/* ---------------- 6 · (was: page card) ----------------
   The reference floats its page on a warm grey with rounded corners. Removed
   at the owner's request — no framing, the page runs edge to edge. The
   `paged` class is gone from the markup; only this note remains so the
   reference's sixth move isn't re-added by mistake. */
body > main { background: var(--paper); }

/* ---------------- Masthead hero ---------------- */
.masthead { padding-block: clamp(2.5rem, 7vw, 6rem) 0; text-align: center; }
/* Masthead lockup — brand line left, badge right.
   The badge is capped against viewport HEIGHT as well as width so the lockup
   and the meta strip stay on one screen. Sizing art by width alone makes it
   grow TALLER on wider screens, which is how it ends up taller than the
   viewport on a short laptop display. */
.masthead { text-align: left; }
.crest-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
/* The badge and its ring share one square box so the ring can sit exactly on
   the badge's edge at any size. */
.masthead .crest {
  margin: 0;
  line-height: 0;
  position: relative;
  width: min(34vw, 34vh, 270px);
}
.masthead .crest img { width: 100%; height: auto; }

/* Drawn around the badge on entrance, then it stays as a thin outer ring.
   Inset slightly past the artwork so it reads as a second ring rather than a
   fringe on the first. */
.crest-ring {
  position: absolute;
  inset: -6.5%;
  width: 113%;
  height: 113%;
  overflow: visible;
  color: var(--blue);
  opacity: .55;
  pointer-events: none;
  /* starts at 12 o'clock and draws clockwise */
  transform: rotate(-90deg);
}
.crest-ring circle { vector-effect: non-scaling-stroke; }

@media (max-width: 640px) {
  .masthead .crest { width: min(60vw, 28vh, 230px); }
}
.crest-quote {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 4.25rem);
  line-height: 1.02;
  /* One step above the 700 that .mix sets. Inter is loaded at 400-800, so 800
     is a real cut, not a synthesised one — check the <link> in index.html
     before going heavier, or the browser will fake it and the letterforms
     will smear. */
  font-weight: 800;
}
.crest-quote .l { display: block; }

@media (max-width: 640px) {
  /* Badge LEFT, quote RIGHT — the same lockup as desktop but mirrored, at the
     owner's request. This used to stack vertically, which kept the badge big
     but pushed the meta strip and the hero video below the fold on a phone.

     Fitting both on one line at 375px is tight, so three things give:
       · the badge caps at 132px instead of 60vw (225px at this width)
       · the quote drops to 7vw, so "SOCIALIZE" — the longest line — still
         clears the column at 320px
       · minmax(0, 1fr) on the text column, because a plain 1fr refuses to
         shrink below its longest word and would push the row wider than the
         screen. That is what would reintroduce the sideways scroll. */
  .crest-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    text-align: left;
    gap: clamp(.75rem, 3.5vw, 1.25rem);
  }
  .masthead .crest { order: -1; width: min(34vw, 132px); }
  .crest-quote { font-size: clamp(1.25rem, 7vw, 2rem); }
}

/* ---------------- Touch targets ----------------
   On a phone every one of these renders well under the 44px that a fingertip
   reliably hits: the footer link lists were 20px tall, the "The full menu →"
   style links 19px, the burger button 40px.

   The fix is a pseudo-element hit area rather than padding, so nothing moves:
   padding on the footer lists would open up their 0.6rem rhythm and padding on
   the inline arrow links would break the tight strip alignment they sit in.
   Same trick already used by .meta-row a.v.

   Only below 700px — on a mouse these are all comfortably clickable, and the
   invisible overlays would only get in the way of text selection. */
@media (max-width: 700px) {
  .site-footer a,
  a.label {
    position: relative;
  }
  .site-footer a::after,
  a.label::after {
    content: "";
    position: absolute;
    /* vertical only: neighbouring footer columns sit close together and a
       horizontal bleed would let one column swallow taps meant for the next.
       -13px, not -12: the arrow links are 19px tall and -12 left them at 43. */
    inset: -13px 0;
  }
  /* The address links are <br>-separated on consecutive lines only ~22px
     apart, so an overlay tall enough to reach 44px overlaps its neighbour by
     18px — and an ambiguous tap is worse than a small one. These get real
     padding instead, which grows the line box and separates them properly. */
  address a {
    display: inline-block;
    padding-block: .7rem;
  }
  /* The big-menu categories are real list rows, so padding is fine here — it
     opens the rhythm rather than breaking an alignment. */
  .bigmenu-list a { min-height: 44px; display: flex; align-items: center; }
  .nav-toggle { width: 44px; height: 44px; }
  .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .roster-row { min-height: 44px; }
}

/* the 3-up meta strip under the masthead */
.meta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-block: 1.25rem;
  text-align: left;
}
.meta-row > div { display: grid; gap: .15rem; align-content: start; justify-items: start; }
.meta-row .k {
  font-size: .6875rem; font-weight: 400; color: var(--fg-3);
  letter-spacing: .01em;
}
.meta-row .v {
  font-size: .8125rem; font-weight: 700; letter-spacing: -.01em; color: var(--fg);
  text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
}
.meta-row a.v:hover { color: var(--accent); }
/* The meta links render 21px tall — the type size is the design. Rather than
   pad them (which would break the tight strip alignment) the hit area is
   extended with a pseudo-element, taking them to 45px without moving a pixel. */
.meta-row a.v { position: relative; }
.meta-row a.v::after { content: ""; position: absolute; inset: -12px -10px; }
/* sits BELOW the link, not inside it — inside, it became a flex item of .v
   and rendered on the same line as the arrow. */
.meta-row .sub-k { font-size: .6875rem; color: var(--fg-3); letter-spacing: 0; }
@media (max-width: 640px) { .meta-row { grid-template-columns: 1fr 1fr; text-align: left; } }

/* ---------------- Statement quote ---------------- */
/* Photo sits BEHIND the type, centred, with the headline split above and
   below it — that overlap is what makes the reference feel printed. */
.statement { position: relative; text-align: center; overflow: hidden; }
.statement .line {
  position: relative; z-index: 1;
  font-size: clamp(1.5rem, 5.4vw, 4rem);
  margin: 0;
}
.statement .line + .line { margin-top: .1em; }

/* ---------------- 2 · Fan-out tiles ---------------- */
.tiles { display: grid; gap: 10px; }
.tiles .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .tiles .row-2 { grid-template-columns: 1fr; } }

.tile {
  position: relative; display: block; overflow: hidden;
  border-radius: 6px; background: var(--tint-2);
  text-decoration: none; color: inherit;
}
.tile img,
.tile .tile-media { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tile:hover img,
.tile:hover .tile-media { transform: scale(1.03); }
/* The poster is the resting state — the video only ever loads on top of it,
   so a tile with no network, no JS or reduced-motion still shows the shot. */
/* Slot-agnostic: the hero uses this today, a .tile could tomorrow. The dark
   background covers the gap between the poster painting and the first frame
   decoding, which otherwise flashes the page colour through. */
.tile-media { display: block; background: var(--deep); }
.tile-media[data-loaded] { animation: video-in .6s var(--ease); }
@keyframes video-in { from { opacity: .55; } to { opacity: 1; } }
.tile--wide { aspect-ratio: 16 / 7; }
.tile--half { aspect-ratio: 4 / 3; }
@media (max-width: 720px) { .tile--wide { aspect-ratio: 4 / 3; } }

/* the pill sits bottom-left; its hidden siblings stack ABOVE it and fan
   out on hover. Each tag is offset a little further and delayed a little
   longer, which is what reads as "fanning" rather than "appearing". */
.pill-stack {
  position: absolute; left: 14px; bottom: 14px;
  display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 6px;
}
.pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-size: .75rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 14px -6px rgba(0,0,0,.4);
}
.pill .go {
  width: 20px; height: 20px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ink); color: var(--paper);
  transition: transform .35s var(--ease);
}
.tile:hover .pill .go { transform: rotate(-45deg); }
.pill svg { width: 11px; height: 11px; }

.pill--tag {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-weight: 500; text-transform: none; letter-spacing: 0;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .45s var(--ease);
  transition-delay: 0ms;
}
.tile:hover .pill--tag,
.tile:focus-visible .pill--tag { opacity: 1; transform: none; }
.tile:hover .pill--tag:nth-of-type(1) { transition-delay: 40ms; }
.tile:hover .pill--tag:nth-of-type(2) { transition-delay: 90ms; }
.tile:hover .pill--tag:nth-of-type(3) { transition-delay: 140ms; }

/* ---------------- 2b · Fan-out roster ---------------- */
/* Numbered rows. On hover the row fills gold, and the single thumbnail
   fans into three overlapping ones. */
.roster { display: grid; gap: 4px; }
.roster .group {
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3);
  margin: clamp(1.25rem, 3vw, 2rem) 0 .6rem;
}
.roster .group:first-child { margin-top: 0; }

.roster-row {
  display: grid;
  /* five children: no / name / count / thumbs / arrow. Four columns put the
     arrow on a second row. */
  grid-template-columns: 4.5rem 1fr auto auto auto;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  padding: .7rem clamp(.75rem, 2vw, 1.25rem);
  border-radius: 8px;
  background: color-mix(in srgb, var(--tint) 55%, transparent);
  text-decoration: none; color: inherit;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
.roster-row .no {
  font-size: .9375rem; font-weight: 400; color: var(--fg-2);
  transition: color .4s var(--ease);
}
.roster-row .nm { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; }
.roster-row .ct { font-size: .75rem; color: var(--fg-3); transition: color .4s var(--ease); }
@media (max-width: 620px) {
  .roster-row { grid-template-columns: 2.5rem 1fr auto auto; gap: .6rem; padding: .6rem .7rem; }
  .roster-row .ct { display: none; }
}

.roster-row:hover, .roster-row:focus-visible {
  background: var(--accent-bright);
  color: #0a0f1f;
}
.roster-row:hover .no, .roster-row:hover .ct,
.roster-row:focus-visible .no, .roster-row:focus-visible .ct { color: rgba(20,24,15,.7); }

/* the thumbnail fan */
.thumbs { display: flex; align-items: center; }
.thumbs img {
  width: 56px; height: 34px; object-fit: cover;
  border-radius: 3px;
  flex: none;
}
/* the two extras start stacked exactly under the first, then slide out */
.thumbs img + img {
  margin-left: -56px;
  opacity: 0;
  transition: margin-left .45s var(--ease), opacity .3s var(--ease);
}
.roster-row:hover .thumbs img + img,
.roster-row:focus-visible .thumbs img + img { margin-left: 4px; opacity: 1; }
.roster-row:hover .thumbs img:nth-of-type(3) { transition-delay: 60ms; }
@media (max-width: 620px) { .thumbs img + img { display: none; } }

.roster-row .arrow {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.roster-row .arrow svg { width: 15px; height: 15px; }
.roster-row:hover .arrow, .roster-row:focus-visible .arrow {
  background: var(--paper); transform: translateX(3px);
}

/* ---------------- Showcase ---------------- */
/* Full-bleed dish photo with the caption dropped into the photo's own
   empty corner — no card, no scrim. */
.showcase { position: relative; overflow: hidden; background: var(--tint); }
.showcase > img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 21 / 9; }
@media (max-width: 800px) { .showcase > img { aspect-ratio: 4 / 3; } }
.showcase .caption {
  position: absolute; right: clamp(1rem, 5vw, 4rem); bottom: clamp(1rem, 5vw, 3rem);
  max-width: 22ch; text-align: left;
}
.showcase .caption h3 {
  margin: 0 0 .3rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #0a0f1f;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
}
.showcase .caption h3 .amt { font-family: var(--display); font-style: italic; font-size: 1.1rem; font-weight: 400; }
.showcase .caption p { margin: 0; font-size: .75rem; line-height: 1.5; color: rgba(20,24,15,.62); }

/* ---------------- 3 · Scrub list ---------------- */
/* All lines grey; the active one goes solid. Stepped by scroll progress. */
.scrub { display: grid; gap: 0; position: relative; }
.scrub .hang {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--fg-2);
  position: absolute; left: -2.5em; top: .1em;
}
.scrub li {
  list-style: none;
  font-size: clamp(1.25rem, 2.9vw, 2rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.45;
  /* The reference dims these to near-invisible. These lines are real copy, so
     the inactive state is held at 3.45:1 — still clearly receded against the
     solid active line, but readable if you never scroll past it. */
  color: color-mix(in srgb, var(--fg) 50%, transparent);
  transition: color .45s var(--ease);
}
.scrub li.is-active { color: var(--fg); font-weight: 700; }
@media (max-width: 620px) { .scrub .hang { position: static; display: block; margin-bottom: .2rem; } }

/* ---------------- 4 · Big-menu hover ---------------- */
.bigmenu { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
@media (max-width: 860px) { .bigmenu { grid-template-columns: 1fr; } }

.bigmenu-list { display: grid; gap: .1rem; }
.bigmenu-list a {
  position: relative;
  display: inline-block;
  width: fit-content;
  font-size: clamp(2rem, 6.4vw, 4.25rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.12;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
  transition: transform .45s var(--ease), font-style .2s, opacity .35s var(--ease);
}
/* the whole list dims so the hovered item is the only one at full strength */
.bigmenu-list:hover a { opacity: .32; }
.bigmenu-list a:hover, .bigmenu-list a:focus-visible {
  opacity: 1;
  font-style: italic;
  transform: translateX(clamp(1.5rem, 4vw, 3rem));
}
/* the photo that pops next to the hovered category */
.bigmenu-list a .peek {
  position: absolute; left: calc(100% + 1rem); top: 50%;
  width: clamp(120px, 14vw, 190px); aspect-ratio: 4 / 3;
  transform: translateY(-50%) scale(.85);
  opacity: 0; pointer-events: none;
  border-radius: 4px; overflow: hidden;
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.bigmenu-list a .peek img { width: 100%; height: 100%; object-fit: cover; }
.bigmenu-list a:hover .peek, .bigmenu-list a:focus-visible .peek {
  opacity: 1; transform: translateY(-50%) scale(1);
}
@media (max-width: 860px) { .bigmenu-list a .peek { display: none; } }

/* the item list on the right, swapped by the hovered category */
.bigmenu-items { padding-top: .75rem; }
.bigmenu-items ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.bigmenu-items li {
  font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--fg);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  transition-delay: calc(var(--i, 0) * 35ms);
}
.bigmenu-items[data-shown] li { opacity: 1; transform: none; }

/* ---------------- 5 · Filmstrip gallery ---------------- */
/* Dark block. Centre frame is taller than its neighbours; a giant ghost
   wordmark sits behind the strip. */
.filmstrip-wrap { position: relative; overflow: hidden; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(4rem, 11vw, 9rem); }
.filmstrip {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.filmstrip::-webkit-scrollbar { display: none; }
.filmstrip figure {
  margin: 0; flex: none;
  width: clamp(150px, 17vw, 215px);
  aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: 4px;
  scroll-snap-align: center;
  transition: transform .5s var(--ease);
}
.filmstrip figure img { width: 100%; height: 100%; object-fit: cover; }
/* the tall centre frame */
.filmstrip figure.lead { aspect-ratio: 3 / 4.7; width: clamp(175px, 20vw, 250px); }
.filmstrip figure:hover { transform: translateY(-6px); }

/* Sits BELOW the strip, overlapping the bottom of the frames — centring it
   on the strip just hid it behind the photos. */
.ghostmark {
  position: absolute; left: 50%; bottom: 4%;
  transform: translateX(-50%);
  z-index: 0; pointer-events: none;
  white-space: nowrap;
  font-size: clamp(3.5rem, 14vw, 11rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  color: rgba(246,241,228,.13);
  user-select: none;
}
.ghostmark i { font-family: var(--display); font-style: italic; font-weight: 400; }


/* ---------------- Stack list (dark) ---------------- */
/* Big city/hours list that fades in as it scrolls, like the services block. */
.stack-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.stack-list li {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 500; letter-spacing: -.035em; line-height: 1.3;
  /* These are the opening hours. A visitor needs to read Tuesday, not only
     today, so the dimmed state stays above 4:1 rather than fading out. */
  color: color-mix(in srgb, var(--fg) 50%, transparent);
  transition: color .5s var(--ease);
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
}
.stack-list li .when {
  font-size: .8125rem; font-weight: 400; letter-spacing: 0;
  color: var(--fg-3);
}
.stack-list li.is-active { color: var(--fg); }
.stack-list li.is-active .when { color: var(--accent); }

/* ---------------- Megatype pre-footer ---------------- */
.megatype {
  text-align: center;
  font-size: clamp(2.25rem, 9.5vw, 7.5rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.02;
  margin: 0;
  text-transform: uppercase;
}
.megatype i { font-family: var(--display); font-style: italic; font-weight: 400; text-transform: none; }

.scroll-cue {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;   /* minimum touch target */
  border: 1px solid var(--rule); color: var(--fg-2);
  text-decoration: none;
  transition: border-color .25s, color .25s, transform .25s var(--ease);
}
.scroll-cue:hover { border-color: var(--accent); color: var(--accent); transform: translateY(3px); }
.scroll-cue svg { width: 16px; height: 16px; }

/* ---------------- Footer ----------------
   The reference ends on white, not black. It framed this as a rounded card;
   the framing is gone with the rest of it, so this is now a plain light band
   with four link columns. */
.site-footer--card {
  background: var(--paper);
  color: var(--ink);
  padding: 0;
}
.site-footer--card .card-inner {
  background: var(--paper);
  padding: clamp(2rem, 5vw, 3.5rem) 0 1.25rem;
  border-top: 1px solid var(--rule);
}
.site-footer--card .wrap { grid-template-columns: 1.7fr repeat(4, 1fr); gap: 2rem; }
@media (max-width: 900px) { .site-footer--card .wrap { grid-template-columns: 1fr 1fr; } }
.site-footer--card h4 { color: var(--ink-3); font-family: var(--ui); letter-spacing: 0; text-transform: none; font-size: .8125rem; }
.site-footer--card a { color: var(--ink-2); }
.site-footer--card a:hover { color: var(--ink); }
.site-footer--card .colophon { border-top-color: rgba(18,20,15,.12); color: var(--ink-3); }
.site-footer--card .lede { font-size: .875rem; }

/* ---------------- Showcase · cutout variant ---------------- */
/* signature-burger.png is a transparent cut-out, not a photo, so it gets
   contained on cream instead of cropped to fill — same framing as the
   reference's cream dish plates. */
.showcase--cutout { background: var(--tint); }
.showcase--cutout > img { object-fit: contain; padding: clamp(1rem, 4vw, 3rem); }
.showcase--cutout .caption h3 { color: var(--on-tint); }
.showcase--cutout .caption h3 .amt { color: var(--accent-ink); }
@media (max-width: 800px) {
  .showcase .caption { position: static; max-width: none; padding: 1.25rem var(--gutter) 2rem; }
}

/* ---------------- The Space two-up ---------------- */
@media (max-width: 820px) {
  .space-grid { grid-template-columns: 1fr !important; }
}

/* the roster group label uses .group inside .wrap too */
.wrap > .group {
  font-size: .6875rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-3);
  margin: clamp(1.5rem, 3.5vw, 2.5rem) 0 .6rem;
}

@media (prefers-reduced-motion: reduce) {
  .pill--tag, .thumbs img + img { opacity: 1 !important; transform: none !important; }
  .thumbs img + img { margin-left: 4px !important; }
}

/* =========================================================
   MOTION SUPPORT (see js/motion.js)
   CSS holds the finished state; GSAP owns the transitions.
   ========================================================= */

/* With GSAP driving, the CSS transitions must be off or both systems
   animate the same opacity and the result stutters. */
.has-gsap [data-reveal],
.has-gsap .split-chars .word > span { transition: none; }

/* Line mask — the inner span slides up out of a clipped outer one.
   Descenders need the extra bottom padding or the mask crops the g and y;
   the matching negative margin keeps the line box the same height. */
.m-line  { display: block; overflow: hidden; }
.m-inner { display: block; padding-bottom: .14em; margin-bottom: -.14em; }

/* Hero overlap: the photo has to pass OVER the headline as it rises. */
.masthead .wrap  { position: relative; z-index: 1; }
.masthead .bleed { position: relative; z-index: 2; }

/* The pre-footer is now two clipped lines rather than one <br>-split line. */
.megatype .l { display: block; }

@media (prefers-reduced-motion: reduce) {
  /* motion.js returns early and paints the finished state, but if it never
     runs at all these keep the masked lines visible. */
  .m-line { overflow: visible; }
  .m-inner { transform: none !important; }
}

/* ---------------- Known for ----------------
   Replaced the pick-a-dish tree. Type-led on purpose: it sits between The
   Space and the gallery, and a third image block there would have been the
   same mistake as the atmosphere band. */
.known-list {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.known-list li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.3fr) auto;
  align-items: baseline;
  gap: clamp(.75rem, 2.5vw, 2rem);
  padding: clamp(1rem, 2.4vw, 1.5rem) 0;
  border-bottom: 1px solid var(--rule);
}
.known-list .n {
  font-family: var(--mono); font-size: var(--t-label);
  color: var(--accent); letter-spacing: .1em;
}
.known-list .nm {
  font-size: clamp(1.0625rem, 2.2vw, 1.5rem);
  font-weight: 700; letter-spacing: -.025em;
}
.known-list .d { font-size: .875rem; color: var(--fg-2); }
.known-list .p {
  font-family: var(--mono); font-size: var(--t-sub);
  color: var(--accent); white-space: nowrap;
}
@media (max-width: 760px) {
  /* the description is the first thing to go — the name and price carry it */
  .known-list li { grid-template-columns: 2.25rem 1fr auto; }
  .known-list .d { display: none; }
}