/* ==========================================================================
   Avanti Restaurant - "Forward": a chaptered road.
   --------------------------------------------------------------------------
   THE PALETTE CONTRACT
   The ten colours in content.theme drive everything. js/render.js applyTheme()
   writes them, and every value derived from them (muted text, small accent
   text, the label on a button, the cheese on the pizza), as CSS variables.
   The block below is only the FALLBACK, so the page is already correct before
   render.js runs and with JavaScript off. It is the Paper and Tomato preset.
   Nothing outside :root may contain a colour literal.

   Three fixed things are NOT theme colours and applyTheme never writes them:
     --brand-red / --brand-white / --brand-key   the Avanti logo, which keeps its
                                                 own red on every preset
     the OVER-IMAGE palette                      measured against a fixed scrim,
                                                 because a photo does not get
                                                 lighter when the page does
   ========================================================================== */

:root {
  /* ---- theme: the ten keys (fallback = Paper and Tomato) ---------------- */
  --bg: #FBF6EE;   --bg2: #F3EADB;  --bg3: #E9DCC7;  --text: #1E1512;
  --flame: #B11116; --flame2: #D8342B;
  --petal: #23364F; --petal2: #3F5C80;
  --ivory: #1E1512; --ink: #FBF6EE;

  /* ---- derived by applyTheme (fallback values for the preset above) ----- */
  --bg-rgb: 251 246 238;   --bg2-rgb: 243 234 219;  --bg3-rgb: 233 220 199;
  --text-rgb: 30 21 18;
  --flame-rgb: 177 17 22;  --flame2-rgb: 216 52 43;
  --petal-rgb: 35 54 79;   --petal2-rgb: 63 92 128;
  --ivory-rgb: 30 21 18;   --ink-rgb: 251 246 238;
  --muted: #5F534B;         /* body-secondary text on bg, >= 4.5:1 */
  --accent-3: #B11116;      /* accent as small text on bg/bg2/bg3, >= 4.5:1 */
  --petal-3: #23364F;       /* second colour as small text on bg */
  --on-flame: #FFFFFF;      /* label on the solid accent, measured on BOTH ends */
  --ivory-text: #FBF6EE;    /* = ink, the foreground for the inverted band */
  --ivory-muted: #C9BDB3;   /* secondary text on the inverted band */
  --ivory-accent: #F0645F;  /* accent as small text on the inverted band */
  --ivory-line: rgb(var(--ink-rgb) / .22);
  --cheese: #F7EEDF;        /* pale end of the pizza, from the lightest theme colour */

  /* ---- the logo: fixed brand identity, never themed ---------------------- */
  --brand-red: #B11116;
  --brand-white: #FFFFFF;
  --brand-key: #000000;

  /* ---- OVER-IMAGE palette: fixed, measured against a fixed dark scrim ---- */
  --scrim-rgb: 20 12 10;
  --onimg: #FFFFFF;
  --onimg-70: rgb(255 255 255 / .78);
  --accent-onimg: #FF8A80;
  --petal-onimg: #BFD3EE;

  /* ---- tokens built from the above -------------------------------------- */
  --line: rgb(var(--text-rgb) / .16);
  --line-strong: rgb(var(--text-rgb) / .5);
  --shadow: 0 30px 60px -34px rgb(var(--text-rgb) / .42);
  --mesh-1: rgb(var(--flame-rgb) / .11);
  --mesh-2: rgb(var(--petal-rgb) / .10);
  --mesh-3: rgb(var(--flame2-rgb) / .09);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --f-display: "Bricolage Grotesque", "Bricolage Fallback", "Arial Narrow", Arial, sans-serif;
  --f-body: "Instrument Sans", "Instrument Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --hh: 60px;                                   /* fixed header height */
  --gut: clamp(20px, 5.4vw, 72px);              /* outer gutter */
  --pl: var(--gut);                             /* left padding (route gutter on wide) */
  --pr: var(--gut);
}
@media (min-width: 720px)  { :root { --hh: 68px; --pl: 76px; } }
@media (min-width: 1024px) { :root { --pl: 112px; --pr: 84px; } }
@media (min-width: 1200px) { :root { --pr: 156px; } }

/* Size-adjusted fallbacks so the swap to the web fonts does not move the page. */
@font-face { font-family: "Bricolage Fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Fallback"; src: local("Arial"); size-adjust: 101%; ascent-override: 93%; descent-override: 25%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hh) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 clamp(1rem, .96rem + .18vw, 1.125rem)/1.62 var(--f-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 3px solid var(--accent-3); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--flame); color: var(--on-flame); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   Atmosphere: slow gradient mesh + grain. transform only.
   ========================================================================== */
.mesh { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mesh::before {
  content: ""; position: absolute; inset: -30%;
  background:
    radial-gradient(38% 34% at 20% 26%, var(--mesh-1), transparent 70%),
    radial-gradient(34% 40% at 80% 22%, var(--mesh-2), transparent 70%),
    radial-gradient(44% 36% at 64% 84%, var(--mesh-3), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.page { position: relative; z-index: 1; }

/* ==========================================================================
   The logo. One set of traced paths, drawn many times with <use>.
   ========================================================================== */
.av-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.av-k { fill: var(--brand-key);   stroke: var(--brand-key);   stroke-width: var(--sw-k, 0); stroke-linejoin: round; }
.av-w { fill: var(--brand-white); stroke: var(--brand-white); stroke-width: var(--sw-w, 0); stroke-linejoin: round; }
.av-r { fill: var(--brand-red);   stroke: var(--brand-red);   stroke-width: var(--sw-r, 0); stroke-linejoin: round; }
.mark { display: block; width: 100%; height: auto; aspect-ratio: 1324 / 731; overflow: visible; }

/* ==========================================================================
   Header, route line, chapter index
   ========================================================================== */
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; padding: 10px 16px; background: var(--flame); color: var(--on-flame); font-weight: 600; border-radius: 8px; transition: top .2s var(--ease); }
.skip:focus { top: 10px; }

.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hh);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 var(--gut);
  background: rgb(var(--bg-rgb) / .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__mark { display: block; width: clamp(74px, 20vw, 92px); flex: none; }
.hdr__ch { flex: 1; min-width: 0; font: 500 .78rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr__ch b { color: var(--accent-3); font-weight: 500; }
.hdr__call { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font: 600 .9rem/1 var(--f-body); text-decoration: none; background: var(--flame); color: var(--on-flame); }
@media (min-width: 1024px) { .hdr__ch { display: none; } .hdr { justify-content: space-between; padding-right: calc(var(--pr) + 16px); } }
.fx .hdr__mark { opacity: 0; transition: opacity .5s var(--ease); }
.fx.go .hdr__mark { opacity: 1; }

/* Route line. Under 720px it becomes a thin progress bar on the header edge. */
.route { position: fixed; z-index: 40; left: 22px; top: var(--hh); bottom: 0; width: 26px; display: none; pointer-events: none; }
.route svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route__ghost { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route__path { fill: none; stroke: var(--flame); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.route__tick { position: absolute; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); }
.route__tick.is-past { background: var(--flame); border-color: var(--flame); }
.route__head { position: absolute; left: 50%; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--flame); box-shadow: 0 0 0 5px rgb(var(--flame-rgb) / .2); }
@media (min-width: 720px) { .route { display: block; } }
.bar { position: fixed; z-index: 55; left: 0; right: 0; top: var(--hh); height: 3px; background: var(--flame); transform-origin: 0 50%; transform: scaleX(0); }
@media (min-width: 720px) { .bar { display: none; } }

.index { position: fixed; z-index: 45; right: 14px; top: 50%; transform: translateY(-50%); display: none; }
.index ol { display: grid; gap: 4px; justify-items: end; }
.index a { background: rgb(var(--bg-rgb) / .78); display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 0 8px; font: 500 .74rem/1 var(--f-mono); letter-spacing: .06em; text-decoration: none; color: var(--muted); border-radius: 6px; }
.index a b { font-weight: 500; }
.index a span { display: none; text-transform: uppercase; }
.index a[aria-current="true"] { color: var(--accent-3); }
.index a[aria-current="true"] span { display: inline; }
.index a:hover { color: var(--text); }
@media (min-width: 1024px) { .index { display: block; } }
@media (max-width: 1199px) { .index a[aria-current="true"] span { display: none; } }
.index.on-ivory a { color: var(--ivory-muted); background: rgb(var(--ivory-rgb) / .78); }
.index.on-ivory a[aria-current="true"] { color: var(--ivory-accent); }

/* ==========================================================================
   Chapters: each one a viewport tall.
   ========================================================================== */
.chapter { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--hh) + 36px) var(--pr) 72px var(--pl); scroll-margin-top: 0; }
.chapter > * { position: relative; min-width: 0; }
.eyebrow { font: 500 .78rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-3); }
.ch-no { display: inline-flex; align-items: baseline; gap: 12px; margin-bottom: clamp(14px, 3vw, 28px); }
.ch-no b { font: 500 .78rem/1 var(--f-mono); letter-spacing: .1em; color: var(--accent-3); }
.ch-no::after { content: ""; width: 56px; height: 1px; background: var(--line-strong); align-self: center; }
.ch-title { font: 800 clamp(2.5rem, 8.2vw, 7.4rem)/.9 var(--f-display); font-stretch: 80%; letter-spacing: -.012em; text-wrap: balance; }
.ch-title:focus { outline: none; }
.lede { max-width: 34rem; color: var(--muted); }
.muted { color: var(--muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 600 1rem/1 var(--f-body); text-decoration: none; transition: transform .35s var(--ease), background-color .25s; will-change: transform; }
.btn--solid { background: linear-gradient(105deg, var(--flame2), var(--flame)); color: var(--on-flame); box-shadow: 0 16px 34px -18px rgb(var(--flame-rgb) / .7); }
.btn--line { border: 1.5px solid var(--line-strong); color: var(--text); background: rgb(var(--bg-rgb) / .5); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- 01 hero ------------------------------------------------------------ */
.hero { display: grid; align-content: center; gap: clamp(18px, 3.6vw, 40px); overflow: clip; padding-bottom: 56px; }
.hero__head { max-width: 100%; }
.hero__h { font: 800 clamp(3.7rem, 15.4vw, 13.5rem)/.84 var(--f-display); font-stretch: 80%; letter-spacing: -.012em; margin-top: 14px; }
.hero__h .accent { color: var(--accent-3); }
.hero__body { display: grid; gap: 26px; max-width: 30rem; }
.hero__logo { width: min(88vw, 620px); margin-left: -4px; transform-origin: 30% 70%; }
.hero__logo .mark { transform: rotate(var(--tilt, 0deg)); transition: transform .2s linear; filter: drop-shadow(0 22px 26px rgb(var(--text-rgb) / .16)); }
@media (min-width: 900px) {
  .hero { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto 1fr; column-gap: 24px; align-content: stretch; }
  .hero__head { grid-column: 1 / 13; grid-row: 1; }
  .hero__body { grid-column: 1 / 6; grid-row: 2; align-self: end; }
  .hero__logo { grid-column: 6 / 13; grid-row: 2; align-self: end; justify-self: end; width: min(54vw, 760px); margin: 0 calc(var(--pr) * -.6) 0 0; }
}
.fx .hero__logo { opacity: 0; transform: rotate(-4deg) translateY(24px); }
.fx.go .hero__logo { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .9s var(--ease); }
.fx [data-rise-h] { opacity: 0; transform: translateY(16px); }
.fx.go [data-rise-h] { opacity: 1; transform: none; transition: opacity .8s var(--ease) calc(var(--i, 0) * 90ms + 500ms), transform .8s var(--ease) calc(var(--i, 0) * 90ms + 500ms); }

/* ---- 02 the name -------------------------------------------------------- */
.name { display: grid; align-content: center; gap: clamp(20px, 4vw, 44px); }
.dict { display: grid; gap: 10px; }
.dict__term { font: 800 clamp(5rem, 24vw, 22rem)/.78 var(--f-display); font-stretch: 80%; letter-spacing: -.02em; color: var(--accent-3); margin-left: -.04em; }
.dict__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; font: 500 .8rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dict__mean { font: 700 clamp(1.7rem, 5.6vw, 4.2rem)/1 var(--f-display); font-stretch: 84%; letter-spacing: -.02em; max-width: 14ch; }
.name__cols { display: grid; gap: 28px; align-items: end; }
.since { font: 800 clamp(2.6rem, 9.6vw, 8.6rem)/.86 var(--f-display); font-stretch: 80%; letter-spacing: -.012em; }
.name__body { max-width: 28rem; color: var(--muted); }
@media (min-width: 900px) {
  .name__cols { grid-template-columns: 7fr 4fr; column-gap: 8vw; }
  .name__body { justify-self: end; padding-bottom: .6em; }
}
.fx [data-wipe] { clip-path: inset(-12% 100% -12% -2%); }
.fx [data-wipe].is-in { clip-path: inset(-12% -2% -12% -2%); transition: clip-path 1s var(--ease) .1s; }

/* ---- 03 the pinned pizza act ------------------------------------------- */
.pz { --pz-len: 520vh; --wd: min(86vw, 420px); padding: 0; min-height: 0; }
.pz__stage { position: relative; padding: calc(var(--hh) + 36px) var(--pr) 56px var(--pl); overflow: clip; }
.pz__top { display: grid; gap: 14px; }
.pz__names { margin-top: clamp(16px, 4vw, 40px); display: grid; gap: clamp(22px, 4vw, 34px); max-width: 44rem; }
.pz__item { display: grid; gap: 10px; }
.pz__name { font: 800 clamp(2.6rem, 11.5vw, 8.4rem)/.9 var(--f-display); font-stretch: 80%; letter-spacing: -.012em; }
.pz__note { color: var(--muted); max-width: 26rem; }
.pz__price { font: 500 .85rem/1.3 var(--f-mono); letter-spacing: .06em; color: var(--accent-3); }
.pz__price:empty { display: none; }
.pz__count { font: 500 .9rem/1 var(--f-mono); letter-spacing: .1em; color: var(--muted); }
.pz__count b { color: var(--accent-3); font-weight: 500; }
.pz__hint { font: 500 .74rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.pz__wheel { width: min(74vw, 320px); margin-top: 28px; }
.pz__ptr, .pz__foot { display: none; }
/* No-JS and reduced motion: one static pizza beside a plain list. */
@media (min-width: 900px) {
  .pz:not(.pz--pin) .pz__stage { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 6vw; align-items: start; }
  .pz:not(.pz--pin) .pz__top { grid-column: 1 / -1; }
  .pz:not(.pz--pin) .pz__wheel { width: min(36vw, 440px); margin: 0; justify-self: end; grid-column: 2; grid-row: 2; }
  .pz:not(.pz--pin) .pz__names { grid-column: 1; grid-row: 2; margin-top: 0; }
}
.pz-svg { width: 100%; height: auto; overflow: visible; }
.pz-crust { fill: var(--bg3); stroke: var(--text); stroke-width: 2.2; }
.pz-rim { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.pz-sauce { fill: var(--flame); stroke: var(--text); stroke-width: 1.4; }
.pz-cheese { fill: var(--cheese); stroke: var(--text); stroke-width: 1.4; stroke-linejoin: round; }
.pz-cuts line { stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
.pz-hub { fill: var(--bg); stroke: var(--text); stroke-width: 1.4; }
.tp { stroke: var(--text); stroke-width: 1.1; stroke-linejoin: round; }
.tp-red { fill: var(--flame); } .tp-warm { fill: var(--flame2); } .tp-navy { fill: var(--petal); }
.tp-tan { fill: var(--bg3); } .tp-ring { fill: none; stroke: var(--petal); stroke-width: 2.6; }
.tl { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tl-red { stroke: var(--flame); } .tl-warm { stroke: var(--flame2); }
.pz-s { transition: opacity .5s var(--ease); }

/* The pinned act: sticky stage inside a tall wrapper. */
.pz--pin { height: var(--pz-len); }
.pz--pin .pz__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.pz--pin .pz__wheel { position: absolute; margin-top: 0; z-index: 0; width: var(--wd); aspect-ratio: 1; left: 50%; top: calc(var(--hh) + 22px); margin-left: calc(var(--wd) / -2); }
.pz--pin .pz__spin { width: 100%; height: 100%; will-change: transform; }
.pz--pin .pz__ptr { display: block; position: absolute; left: -6px; top: 50%; width: 22px; height: 28px; margin-top: -14px; background: var(--flame); clip-path: polygon(0 0, 100% 50%, 0 100%); z-index: 2; }
.pz--pin .pz-s { opacity: .42; } .pz--pin .pz-s.is-on { opacity: 1; }
.pz--pin .pz__names { position: absolute; z-index: 1; left: var(--pl); right: var(--pr); top: calc(var(--hh) + 22px + var(--wd) + 24px); margin: 0; display: grid; overflow: hidden; padding-block: .08em .2em; }
.pz--pin .pz__item { grid-area: 1 / 1; opacity: 0; transform: translateY(112%); transition: transform .75s var(--ease), opacity .45s var(--ease); }
.pz--pin .pz__item.is-on { opacity: 1; transform: none; }
.pz--pin .pz__item.is-past { opacity: 0; transform: translateY(-112%); }
.pz--pin .pz__top { position: absolute; left: var(--pl); right: var(--pr); top: calc(var(--hh) + 6px); z-index: 2; }
.pz--pin .pz__foot { display: flex; position: absolute; left: var(--pl); right: var(--pr); bottom: 22px; justify-content: flex-start; align-items: baseline; gap: 28px; z-index: 2; }
.pz-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
@media (max-width: 899px) {
  .pz--pin { --pz-len: 430vh; --wd: min(74vw, 40vh, 340px); }
  .pz--pin .pz__stage { padding-top: calc(var(--hh) + 10px); }
  @supports (height: 100svh) { .pz--pin { --pz-len: 430svh; --wd: min(74vw, 40svh, 340px); } }
  .pz--pin .pz__name { font-size: clamp(2.3rem, 12.5vw, 4rem); }
  .pz--pin .pz__note { font-size: .98rem; }
}
@media (min-width: 900px) {
  .pz--pin { --wd: min(112vh, 70vw); }
  @supports (height: 100svh) { .pz--pin { --wd: min(112svh, 70vw); } }
  .pz--pin .pz__wheel { left: auto; right: calc(var(--wd) * -.43); top: 50%; margin: calc(var(--wd) / -2) 0 0 0; }
  .pz--pin .pz__names { right: auto; width: calc(100% - var(--wd) * .57 - var(--pl) - 40px); top: 50%; transform: translateY(-50%); }
  .pz--pin .pz__name { font-size: clamp(3.2rem, 8.2vw, 8.8rem); }
}
@media (max-width: 899px) { .pz--pin .pz__top { display: grid; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* ---- 04 menu ledger ------------------------------------------------------ */
.menu { display: grid; align-content: start; gap: clamp(20px, 4vw, 44px); }
.menu__head { display: grid; gap: 10px; max-width: 46rem; }
.ledger { border-top: 1px solid var(--line-strong); }
.ledger__row { border-bottom: 1px solid var(--line-strong); }
.ledger__btn { width: 100%; display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: baseline; gap: 10px; padding: 14px 0; min-height: 44px; }
.ledger__n { font: 500 .78rem/1 var(--f-mono); letter-spacing: .08em; color: var(--accent-3); }
.ledger__t { font: 800 clamp(1.9rem, 6.4vw, 4.6rem)/.98 var(--f-display); font-stretch: 80%; letter-spacing: -.012em; transition: transform .5s var(--ease); }
.ledger__c { font: 500 .74rem/1 var(--f-mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; white-space: nowrap; }
.ledger__ic { display: none; }
.js .ledger__btn:hover .ledger__t { transform: translateX(10px); }
.ledger__panel { display: grid; grid-template-rows: 1fr; }
.js .ledger__panel { grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.js .ledger__row.is-open .ledger__panel { grid-template-rows: 1fr; }
.ledger__in { overflow: hidden; min-height: 0; }
.ledger__list { display: grid; gap: 12px 40px; padding: 4px 0 22px 3.2rem; }
@media (min-width: 720px) { .ledger__list { grid-template-columns: repeat(2, 1fr); } }
.dish { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
.dish__top { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.dish__name { font: 600 1.1rem/1.3 var(--f-body); }
.dish__price { font: 500 .9rem/1 var(--f-mono); color: var(--accent-3); white-space: nowrap; }
.dish__price:empty { display: none; }
.dish__desc { color: var(--muted); font-size: .96rem; }
.dish__desc:empty { display: none; }
.menu__more { display: grid; gap: 12px; }
.menu__more p { font: 700 clamp(1.3rem, 3.6vw, 2.3rem)/1.22 var(--f-display); font-stretch: 84%; letter-spacing: -.015em; }
.menu__more p span { color: var(--muted); }
.menu__more p span:not(:last-child)::after { content: "/"; margin: 0 .5em; color: var(--accent-3); }
.menu__note { color: var(--muted); max-width: 34rem; }
.menu__note:empty { display: none; }

/* ---- 05 experience ------------------------------------------------------- */
.exp { display: grid; align-content: center; gap: clamp(28px, 6vw, 72px); }
.exp .ch-title { font-size: clamp(1.6rem, 4vw, 3rem); }
.exp__row { display: grid; gap: 12px; }
.exp__t { font: 800 clamp(3.2rem, 14vw, 12rem)/.84 var(--f-display); font-stretch: 80%; letter-spacing: -.015em; }
.exp__t .hl { position: relative; display: inline-block; }
.exp__t { padding-bottom: .16em; }
.exp__t .hl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: .09em; background: var(--flame); }
.exp__p { max-width: 27rem; color: var(--muted); }
.fx .exp__t .hl::after { clip-path: inset(0 100% 0 0); }
.fx .exp__row.is-in .hl::after { clip-path: inset(0); transition: clip-path .9s var(--ease) .3s; }
@media (min-width: 900px) {
  .exp__row { grid-template-columns: 7fr 4fr; align-items: end; column-gap: 6vw; }
  .exp__row:nth-of-type(3) { margin-left: 12vw; grid-template-columns: 4fr 7fr; }
  .exp__row:nth-of-type(4) { margin-left: 4vw; }
  .exp__row:nth-of-type(3) .exp__p { order: -1; justify-self: end; }
  .exp__p { padding-bottom: .8em; }
}
[data-par] { will-change: transform; }

/* ---- 06 voices: the inverted band --------------------------------------- */
.voices { background: var(--ivory); color: var(--ink); }
.voices .eyebrow, .voices .ch-no b { color: var(--ivory-accent); }
.voices .ch-no::after { background: var(--ivory-line); }
.voices .muted, .voices .lede { color: var(--ivory-muted); }
.voices__head { display: grid; gap: 16px; margin-bottom: clamp(26px, 5vw, 56px); }
.voices__sum { font: 500 clamp(.95rem, 2.4vw, 1.15rem)/1.4 var(--f-mono); letter-spacing: .02em; color: var(--ink); max-width: 44rem; }
.rv-grid { display: grid; gap: 18px; }
.rv { display: grid; align-content: start; gap: 12px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--ivory-line); border-radius: 4px; background: rgb(var(--ink-rgb) / .05); }
.rv__rate { font: 500 .78rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory-accent); }
.rv__title { font: 700 clamp(1.25rem, 2.6vw, 1.7rem)/1.1 var(--f-display); font-stretch: 84%; letter-spacing: -.01em; }
.rv__title:empty, .rv__rate:empty { display: none; }
.rv__text { font-size: 1.02rem; color: var(--ink); }
.rv__by { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--ivory-line); }
.rv__by b { font: 600 1rem/1.2 var(--f-body); }
.rv__by span { font: 500 .74rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ivory-muted); }
.voices__foot { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; margin-top: clamp(24px, 4vw, 44px); color: var(--ivory-muted); font-size: .95rem; }
.voices__foot a { color: var(--ivory-accent); font-weight: 600; text-underline-offset: 4px; }
@media (min-width: 720px) {
  .rv-grid { grid-template-columns: repeat(12, 1fr); gap: 22px; align-items: start; }
  .rv:nth-child(6n+1) { grid-column: 1 / 8; }
  .rv:nth-child(6n+2) { grid-column: 8 / 13; margin-top: 56px; }
  .rv:nth-child(6n+3) { grid-column: 2 / 8; }
  .rv:nth-child(6n+4) { grid-column: 8 / 13; margin-top: 28px; }
  .rv:nth-child(6n+5) { grid-column: 1 / 7; }
  .rv:nth-child(6n+6) { grid-column: 7 / 13; margin-top: 64px; }
}
.fx .rv { opacity: 0; transform: translateY(26px); }
.fx .rv.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease) calc(var(--i, 0) * 60ms), transform .7s var(--ease) calc(var(--i, 0) * 60ms); }

/* ---- 07 visit + footer ---------------------------------------------------- */
.visit { display: grid; align-content: start; gap: clamp(28px, 5vw, 56px); padding-bottom: 40px; }
.visit__phone { display: block; font: 800 clamp(2.4rem, 10.4vw, 9rem)/.92 var(--f-display); font-stretch: 80%; letter-spacing: -.012em; text-decoration: none; word-break: break-word; }
.visit__phone:hover { color: var(--accent-3); }
.visit__cols { display: grid; gap: 30px; }
.vblock { display: grid; gap: 8px; align-content: start; }
.vblock dt, .vblock__h { font: 500 .76rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-3); }
.vblock dd { font-size: 1.08rem; }
.vblock a { text-underline-offset: 4px; }
.hours { white-space: pre-line; }
.services { display: grid; gap: 6px; }
.services li { padding-left: 18px; position: relative; }
.services li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--flame); }
.social { display: flex; flex-wrap: wrap; gap: 10px; }
.social a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-weight: 600; }
@media (min-width: 900px) { .visit__cols { grid-template-columns: repeat(3, 1fr); column-gap: 5vw; } }

.foot { position: relative; z-index: 1; background: var(--ivory); color: var(--ink); padding: clamp(40px, 8vw, 96px) var(--pr) 44px var(--pl); display: grid; gap: 32px; overflow: clip; }
.foot__close { font: 800 clamp(2.6rem, 10vw, 9rem)/.88 var(--f-display); font-stretch: 80%; letter-spacing: -.015em; }
.foot__mark { width: min(78vw, 340px); }
.foot__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; }
.foot__small { color: var(--ivory-muted); font: 500 .76rem/1.5 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.foot a { color: var(--ivory-accent); }
.foot :focus-visible { outline-color: var(--ivory-accent); }

/* ==========================================================================
   Split words, rises. Hidden states exist only under .fx (set by main.js), so
   with JavaScript off, or reduced motion on, the final state is what you see.
   ========================================================================== */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .04em .14em; margin: -.06em -.04em -.14em; }
.wi { display: inline-block; will-change: transform; }
.fx .split .wi { transform: translateY(112%); }
.fx .split.is-in .wi { transform: none; transition: transform .8s var(--ease) calc(var(--i, 0) * 40ms); }

/* ==========================================================================
   Opening animation: the logo drawing itself inside a panel that lifts away.
   The layer only exists when the head script adds html.intro-on.
   ========================================================================== */
.intro { display: none; }
.intro-on .intro { display: grid; position: fixed; inset: 0; z-index: 100; place-items: center; align-content: center; gap: 22px; padding: 24px; background: var(--bg); transition: transform .5s var(--ease); }
.intro-lift .intro { transform: translateY(-101%); }
.intro__mark { width: min(78vw, 560px); }
.intro__mark use { stroke-dasharray: 1; stroke-dashoffset: 1.002; fill-opacity: 0; transition: stroke-dashoffset .78s var(--ease), fill-opacity .26s linear; }
.intro__mark .d-r { --sw-r: 6; transition-delay: .12s, 0s; }
.intro__mark .d-k { --sw-k: 9; transition-delay: .18s, 0s; }
.intro__mark .d-w { --sw-w: 7; transition-delay: .24s, 0s; }
.intro-run .intro__mark use { stroke-dashoffset: 0; }
.intro-fill .intro__mark use { fill-opacity: 1; stroke-width: 0; transition: fill-opacity .26s linear, stroke-width .26s linear; }
.intro__line { overflow: hidden; padding: .1em .2em .25em; font: 500 .82rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.intro__line span { display: block; transform: translateY(120%); transition: transform .5s var(--ease); }
.intro-fill .intro__line span { transform: none; }

/* Touch: text links in Visit and the reviews footer get a 44px hit area. */
@media (pointer: coarse), (max-width: 760px) {
  .vblock dd a, .voices__foot a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ==========================================================================
   Reduced motion: nothing is hidden, nothing drifts, nothing pins.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mesh::before { animation: none; }
  .intro { display: none !important; }
  * { scroll-behavior: auto !important; }
  .btn { transition: none; }
  .ledger__t, .js .ledger__panel { transition: none; }
}
@media print { .mesh, .grain, .route, .bar, .index, .hdr, .intro { display: none !important; } }