/* ============================================================
   THE POUR HOUSE — design system
   Gold-standard base · neon accents · iOS-style liquid glass
   ============================================================ */

:root{
  /* gold standard core */
  --bg:#0b0a08; --bg2:#121008; --surface:#171410;
  --line:rgba(200,162,75,.22);
  --gold:#c8a24b; --gold-bright:#e8cd8a;
  --cream:#f2e9d8; --muted:#a59a85;
  /* neon accents (from neon-noir) */
  --pink:#ff2e88; --violet:#8b5cf6;
  --neon-grad:linear-gradient(92deg,var(--pink),var(--violet));
  /* glass */
  --glass-bg:rgba(23,19,13,.42);
  --glass-bg-strong:rgba(18,15,10,.6);
  --ease:cubic-bezier(.22,1,.36,1);
  /* brand face: LTC Octic Gothic via Dean's Adobe Fonts web project
     (use.typekit.net/lgn7yvt.css); Rajdhani is the fallback. The same
     stack drives both the display layer and the label layer — the
     brand is the typeface. */
  --label-font:"ltc-octic-gothic-two","ltc-octic-gothic-one","Rajdhani",'Manrope',sans-serif;
  --display-font:"ltc-octic-gothic-two","ltc-octic-gothic-one","Rajdhani",'Manrope',sans-serif;
  /* fluid space scale — scales continuously with the viewport, so any
     aspect ratio lands on a sensible rhythm (no breakpoint jumps) */
  --space-xs:clamp(10px,.4vw + 8px,16px);
  --space-s:clamp(16px,1vw + 12px,26px);
  --space-m:clamp(22px,2.2vw + 12px,44px);
  --space-l:clamp(36px,4.2vw + 18px,76px);
  --space-xl:clamp(60px,6.5vw + 28px,116px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--cream);font-family:'Manrope',sans-serif;font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* headlines wear the brand gothic, in caps, as a display face should.
   The liquid-gold em words stay Fraunces italic — the signature lockup */
h1,h2,h3,h4{font-family:var(--display-font);font-weight:700;line-height:1.12;
  text-transform:uppercase;letter-spacing:.04em}
.serif{font-family:'Fraunces',serif;font-weight:400}
/* .wrap is the query container — components below adapt to ITS width,
   not the device, so folded/split/odd viewports just work */
.wrap{width:min(1200px,92vw);margin-inline:auto;container-type:inline-size;container-name:wrap}
/* the label layer wears the gothic; headlines stay Fraunces */
.kicker,.eyebrow,.nav-links,.nav-menu-in a,.badge,.card .when,.serve-chip,.tag,
.tchip b,.hero-meta .chip,.step,.hrow span:first-child{font-family:var(--label-font)}
/* when the real Octic Gothic has loaded (html.octic via JS), use its
   native 400 cut — no synthetic bolding fuzz */
html.octic .kicker,html.octic .eyebrow,html.octic .nav-links a,html.octic .nav-menu-in a,
html.octic .badge,html.octic .card .when,html.octic .serve-chip,html.octic .tag,
html.octic .tchip b,html.octic .hero-meta .chip,html.octic .step,
html.octic .hrow span:first-child,
html.octic h1,html.octic h2,html.octic h3,html.octic h4,html.octic .btn{font-weight:400}
html.octic .neon-text{font-style:normal}
section{position:relative}
::selection{background:rgba(255,46,136,.35);color:#fff}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}

/* ---------- ambient backdrop (gives the glass something to refract) ---------- */
.ambient{position:fixed;inset:0;z-index:-3;pointer-events:none;background:
  radial-gradient(46% 38% at 12% 8%, rgba(200,162,75,.13), transparent 70%),
  radial-gradient(40% 34% at 88% 18%, rgba(139,92,246,.10), transparent 70%),
  radial-gradient(44% 40% at 78% 92%, rgba(255,46,136,.07), transparent 70%),
  radial-gradient(38% 34% at 8% 86%, rgba(200,162,75,.08), transparent 70%)}

/* ============================================================
   LIQUID GLASS
   Base: backdrop blur+saturate (all modern browsers).
   Enhanced: html.lg-refract → SVG displacement map gives the
   non-linear iOS lens refraction at edges (Chromium).
   ============================================================ */
.glass{position:relative;isolation:isolate;border-radius:22px;background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(1.65);-webkit-backdrop-filter:blur(16px) saturate(1.65);
  box-shadow:0 18px 50px -22px rgba(0,0,0,.65)}
/* specular highlights — light catches top-left, falls off bottom-right */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 1.5px 1.5px 0 -0.5px rgba(255,255,255,.22),
             inset -1px -1px 0 -0.5px rgba(255,255,255,.07),
             inset 0 22px 36px -26px rgba(255,255,255,.16),
             inset 0 -16px 30px -28px rgba(0,0,0,.5)}
/* 1px gradient border — gold with a whisper of neon */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1px;
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 32%,rgba(200,162,75,.3) 58%,rgba(255,46,136,.2) 86%,rgba(139,92,246,.25));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.glass-strong{background:var(--glass-bg-strong)}
.glass-pill{border-radius:999px}
/* lens variant — static feature panels: heavier frost + visible caustics */
.glass-lens{backdrop-filter:blur(20px) saturate(1.75);-webkit-backdrop-filter:blur(20px) saturate(1.75)}
.glass-lens::after,.glass-flat::after,.glass-baked::after{
  background:linear-gradient(115deg,transparent 12%,rgba(255,255,255,.07) 20%,transparent 34%,transparent 58%,rgba(255,255,255,.05) 72%,transparent 86%);
  box-shadow:inset 2px 2px 0 -0.5px rgba(255,255,255,.28),
             inset -1.5px -1.5px 0 -0.5px rgba(255,255,255,.1),
             inset 0 26px 44px -28px rgba(255,255,255,.2),
             inset 0 -18px 34px -30px rgba(0,0,0,.55),
             inset 0 0 44px -16px rgba(255,255,255,.1)}

/* Chromium: true non-linear refraction via displacement map */
html.lg-refract .glass{
  backdrop-filter:url(#lg-refract) blur(3px) saturate(1.7) brightness(1.05);
  -webkit-backdrop-filter:url(#lg-refract) blur(3px) saturate(1.7) brightness(1.05)}
html.lg-refract .glass-pill{
  backdrop-filter:url(#lg-refract-pill) blur(2px) saturate(1.7) brightness(1.06);
  -webkit-backdrop-filter:url(#lg-refract-pill) blur(2px) saturate(1.7) brightness(1.06)}
/* hero/dock ghosts refract; the nav's ghost does NOT — it sits inside
   already-refracting glass, and nested displacement doubles the cost
   of the most expensive element on screen for an invisible rim */
html.lg-refract .hero .btn-ghost,html.lg-refract .dock .btn-ghost{
  backdrop-filter:url(#lg-refract-pill) blur(2px) saturate(1.7) brightness(1.06);
  -webkit-backdrop-filter:url(#lg-refract-pill) blur(2px) saturate(1.7) brightness(1.06)}
/* step pills sit over flat gradients — nothing to refract */
.steps .step,html.lg-refract .steps .step{
  backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(21,17,12,.9)}
html.lg-refract .glass-lens{
  backdrop-filter:url(#lg-refract-strong) blur(2px) saturate(1.85) brightness(1.07);
  -webkit-backdrop-filter:url(#lg-refract-strong) blur(2px) saturate(1.85) brightness(1.07)}

/* perf — refraction stays LIVE while scrolling; only the chromatic
   colour-fringe (3× displacement passes) steps down to the standard
   single-pass lens during motion, and returns at rest */
html.lg-refract.scrolling .glass-lens{
  backdrop-filter:url(#lg-refract) blur(2px) saturate(1.75) brightness(1.06);
  -webkit-backdrop-filter:url(#lg-refract) blur(2px) saturate(1.75) brightness(1.06)}
html.scrolling h1 em,html.scrolling h2 em,html.scrolling .liquid-gold,html.scrolling .score,
html.morphing h1 em,html.morphing h2 em,html.morphing .liquid-gold,html.morphing .score{animation-play-state:paused}

/* ---------- baked glass — tiles whose backdrop never moves ----------
   The backdrop photo is duplicated into .baked-frost and filtered ONCE
   (regular filter:, not backdrop-filter:) — rasterised, cached, zero
   per-frame cost. Refraction included via the same chromatic lens. */
.glass-baked{background:rgba(18,15,10,.82);overflow:hidden} /* fallback tint; overflow clips any filter bleed past the corners */
.glass-baked,html.lg-refract .glass-baked{backdrop-filter:none;-webkit-backdrop-filter:none}
/* canvas snapshot of the exact backdrop region, filtered ONCE */
.baked-frost{position:absolute;inset:0;width:100%;height:100%;z-index:-1;border-radius:inherit;pointer-events:none;
  filter:blur(6px) saturate(1.65) brightness(1.02)}
html.lg-refract .baked-frost{filter:blur(4px) saturate(1.7) brightness(1.04) url(#lg-refract-strong)}

/* flat-backdrop tiles — plain dark sections behind them, nothing to
   refract: solid smoked surface, zero live sampling; gradient border,
   specular and caustics carry the glass look */
.glass-flat,html.lg-refract .glass-flat,html.lg-refract.scrolling .glass-flat{
  backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(21,17,12,.9)}

@media (prefers-reduced-transparency: reduce){
  .glass,.glass-pill,html.lg-refract .glass,html.lg-refract .glass-pill,html.lg-refract .glass-lens{
    backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(20,17,12,.97)}
  .baked-frost{display:none}
  .glass-baked{background:rgba(20,17,12,.97)}
}

/* ---------- nav — floating glass pill ---------- */
nav{position:fixed;top:16px;left:0;right:0;z-index:50}
.nav-inner{width:min(1240px,94vw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px 10px 24px;transition:box-shadow .4s,background .4s}
nav .glass-pill{box-shadow:0 10px 40px -18px rgba(0,0,0,.55)}
nav.scrolled .glass-pill{box-shadow:0 16px 50px -16px rgba(0,0,0,.8)}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand img{height:30px;width:auto}
.nav-links{display:flex;gap:clamp(3px,.8vw,9px);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;position:relative}
.nav-links a{opacity:.78;transition:opacity .25s,color .25s,background .3s;position:relative;padding:7px 12px;border-radius:999px}
.nav-links a:hover{opacity:1;color:var(--gold-bright);background:rgba(200,162,75,.08)}
/* active page — a compact inset liquid-glass lozenge (the iOS selector).
   Static fallback; when JS runs, the .nav-glider below replaces it and
   GLIDES between tabs on click, live glass for the whole journey */
.nav-links a.active,.nav-menu-in a.active{
  opacity:1;color:var(--gold-bright);
  background:linear-gradient(180deg,rgba(200,162,75,.18),rgba(200,162,75,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(200,162,75,.3),inset 0 -6px 12px -8px rgba(0,0,0,.5)}
.nav-links.has-glider a.active{background:none;box-shadow:none}
/* the sliding selector — REAL liquid glass, refraction live the whole
   glide; tiny element, so per-frame cost ≈ a serve-chip */
.nav-glider{position:absolute;left:0;top:0;height:100%;width:100px;border-radius:999px;z-index:-1;
  transform-origin:0 50%;opacity:0;
  background:linear-gradient(180deg,rgba(200,162,75,.18),rgba(200,162,75,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(200,162,75,.3),inset 0 -6px 12px -8px rgba(0,0,0,.5);
  backdrop-filter:blur(8px) saturate(1.5);-webkit-backdrop-filter:blur(8px) saturate(1.5);
  /* transform-ONLY animation (FLIP): the glass never resizes mid-glide,
     so its filter never re-rasters per frame — that was the lag */
  transition:transform .45s cubic-bezier(.55,.06,.18,1),opacity .25s}
html.lg-refract .nav-glider{
  backdrop-filter:url(#lg-refract-pill) blur(2px) saturate(1.7) brightness(1.06);
  -webkit-backdrop-filter:url(#lg-refract-pill) blur(2px) saturate(1.7) brightness(1.06)}
.nav-cta{display:flex;gap:10px;align-items:center}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:2px;background:var(--gold-bright);
  transition:transform .45s cubic-bezier(.34,1.3,.4,1),opacity .3s;
  transition-timing-function:linear(0, 0.001, 0.006, 0.016, 0.034, 0.063, 0.106, 0.167, 0.246, 0.342, 0.45, 0.561, 0.667, 0.759, 0.834, 0.891, 0.932, 0.96, 0.978, 0.989, 0.995, 0.998, 1, 1, 1),ease}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* mobile menu — ONE window. The ribbon itself expands, and the liquid
   glass renders in REAL TIME throughout (the same live lens that runs
   while scrolling). What makes it feel expensive:
   · constant 32px corner radius — identical on the closed pill, so the
     corners never animate, the shape simply grows
   · zero material/filter swaps — one surface, one lens, no hitches
   · one refined spring, deepening elevation, a single light sweep */
nav .glass-pill{border-radius:32px}
.nav-inner{flex-wrap:wrap;contain:paint}
nav.open:not(.morph) .nav-menu{box-shadow:0 26px 70px -26px rgba(0,0,0,.85)} /* blooms after settle */
/* on mobile the bar element carries NO surface of its own — the panel
   provides the glass for both states. The bar keeps only its border
   ring for the closed pill, handing over to the panel's outline */
@media (max-width:960px){
  .nav-inner,html.lg-refract .nav-inner{background:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
  .nav-inner::before,.nav-inner::after{transition:opacity .25s ease}
  nav.open .nav-inner::before,nav.open .nav-inner::after{opacity:0}
  nav:not(.open) .nav-inner::before,nav:not(.open) .nav-inner::after{transition-delay:.5s}
}
/* open = real damped spring (sampled harmonic oscillator, ζ≈0.68 —
   one 5% overshoot, faint counter-dip, long settle: the Apple feel).
   close = quick and calm, no bounce, like iOS dismissals */
/* ONE GLASS BODY — the panel IS the bar. It spans from the top of the
   nav; closed, the clip shows only its top slice (= the pill); open,
   the clip extends down. A seam is geometrically impossible, and the
   reveal is compositor-only over glass rendered once — full live
   displacement, zero per-frame layout/paint/filter work */
.nav-menu{position:absolute;left:0;right:0;margin-inline:auto;width:min(1240px,94vw);
  top:0;z-index:-1;padding:calc(var(--barH,76px) + 8px) 22px 18px;border-radius:32px;
  background:var(--glass-bg);
  clip-path:inset(0 0 calc(100% - var(--barH,76px)) 0 round 32px);
  transition:clip-path 1.4s cubic-bezier(.55,.06,.18,1),box-shadow .4s;
  transition:clip-path 1.4s linear(0, 0.001, 0.006, 0.016, 0.034, 0.063, 0.106, 0.167, 0.246, 0.342, 0.45, 0.561, 0.667, 0.759, 0.834, 0.891, 0.932, 0.96, 0.978, 0.989, 0.995, 0.998, 1, 1, 1),box-shadow .4s}
nav.open .nav-menu{clip-path:inset(0 0 0 0 round 32px)}
/* closed & settled: the visible slice carries its own pill-shaped lens
   (dynamic #lg-refract-bar map) — the full-panel lens takes over the
   moment the morph begins */
html.lg-refract nav:not(.open):not(.morph) .nav-menu{
  backdrop-filter:url(#lg-refract-bar) blur(2px) saturate(1.7) brightness(1.06);
  -webkit-backdrop-filter:url(#lg-refract-bar) blur(2px) saturate(1.7) brightness(1.06)}
/* links leave the accessibility tree while hidden */
.nav-menu-in{visibility:hidden;transition:visibility 1.4s}
nav.open .nav-menu-in{visibility:visible}
/* refraction wave — a LIVE cylindrical lens riding the reveal edge in
   perfect sync, warping the glass (and the links) as the menu pours.
   Active across its full height + a faint light crest so it reads
   over dark backdrops. Exists only while morphing — zero idle cost */
.nav-wave{position:absolute;left:0;right:0;height:90px;top:calc(var(--barH,76px) - 45px);
  pointer-events:none;opacity:0;transform:translateY(0);
  background:linear-gradient(180deg,transparent 18%,rgba(246,231,180,.05) 42%,rgba(255,255,255,.08) 52%,transparent 80%);
  transition:transform 1.4s cubic-bezier(.55,.06,.18,1),opacity .22s;
  transition:transform 1.4s linear(0, 0.001, 0.006, 0.016, 0.034, 0.063, 0.106, 0.167, 0.246, 0.342, 0.45, 0.561, 0.667, 0.759, 0.834, 0.891, 0.932, 0.96, 0.978, 0.989, 0.995, 0.998, 1, 1, 1),opacity .22s}
nav.open .nav-wave{transform:translateY(calc(var(--panelH,480px) - var(--barH,76px)))}
html.lg-refract nav.morph .nav-wave{opacity:1;
  backdrop-filter:url(#lg-wave) blur(1px) saturate(1.65) brightness(1.05);
  -webkit-backdrop-filter:url(#lg-wave) blur(1px) saturate(1.65) brightness(1.05)}
.nav-menu-in{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:16px;text-align:center;
  font-size:15px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;
  background:linear-gradient(180deg,transparent,rgba(8,7,5,.26) 12%,rgba(8,7,5,.32) 88%,transparent)}
.nav-menu-in>a:first-child{margin-top:12px;border-top:1px solid var(--line);padding-top:18px;width:100%}
.nav-menu-in a{padding:7px 0;opacity:.95;text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 14px rgba(0,0,0,.5)}
.nav-menu-in a.active{align-self:center;padding:8px 20px;border-radius:999px}
.nav-menu-in .btn{margin:12px auto 16px;padding:16px 34px;font-size:14px;width:min(100%,360px)}
nav.open .nav-menu-in>*{animation:drip .6s cubic-bezier(.34,1.3,.4,1) both;
  animation-timing-function:linear(0, 0.001, 0.006, 0.016, 0.034, 0.063, 0.106, 0.167, 0.246, 0.342, 0.45, 0.561, 0.667, 0.759, 0.834, 0.891, 0.932, 0.96, 0.978, 0.989, 0.995, 0.998, 1, 1, 1)}
nav.open .nav-menu-in>*:nth-child(1){animation-delay:.25s}
nav.open .nav-menu-in>*:nth-child(2){animation-delay:.37s}
nav.open .nav-menu-in>*:nth-child(3){animation-delay:.49s}
nav.open .nav-menu-in>*:nth-child(4){animation-delay:.61s}
nav.open .nav-menu-in>*:nth-child(5){animation-delay:.73s}
nav.open .nav-menu-in>*:nth-child(6){animation-delay:.85s}
@keyframes drip{from{opacity:0;transform:translateY(-10px)}}
@media (min-width:961px){.nav-menu{display:none}}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 28px;border-radius:999px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;cursor:pointer;border:1px solid var(--gold);
  transition:transform .3s var(--ease),box-shadow .3s,background .3s,color .3s,background-position .6s var(--ease);font-family:var(--label-font)}
/* sheen sweep — light passing over metal */
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.42) 50%,transparent 72%);
  transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn:hover::after{transform:translateX(130%)}
/* liquid gold metal */
.btn-solid{background:linear-gradient(110deg,#8a6a2a,#c8a24b 26%,#f4e3ae 50%,#c8a24b 74%,#8a6a2a);
  background-size:220% 100%;background-position:0% 0;color:#171204;border-color:rgba(244,227,174,.55)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 12px 32px -10px rgba(200,162,75,.6);background-position:95% 0}
/* ghost buttons: LIVE glass only where imagery sits behind them
   (hero, nav, dock) — flat smoked surface everywhere else, where a
   live filter would sample a plain dark backdrop for nothing */
.btn-ghost{color:var(--gold-bright);background:rgba(24,20,14,.88)}
.hero .btn-ghost,nav .btn-ghost,.dock .btn-ghost{background:rgba(23,19,13,.35);
  backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5)}
.btn-ghost:hover{background:rgba(200,162,75,.14)}
.btn-neon{border:1px solid transparent;color:#fff;background:
  linear-gradient(var(--bg2),var(--bg2)) padding-box,var(--neon-grad) border-box;
  /* self-lit glass specular (June 13) — backdrop-independent highlights
     so the pill reads as liquid glass even over the banner's dark corner,
     where there's nothing for the lens to refract. Matches the badge. */
  box-shadow:inset 1.6px 1.6px 0 -0.5px rgba(255,255,255,.34),inset -1.2px -1.2px 0 -0.5px rgba(255,255,255,.08),inset 0 1px 1px rgba(255,255,255,.12),inset 0 -11px 20px -16px rgba(0,0,0,.55)}
.btn-neon:hover{transform:translateY(-2px);box-shadow:0 12px 36px -12px rgba(255,46,136,.6),inset 1.6px 1.6px 0 -0.5px rgba(255,255,255,.34),inset 0 1px 1px rgba(255,255,255,.12),inset 0 -11px 20px -16px rgba(0,0,0,.55);color:#fff}
.btn-sm{padding:11px 22px}

/* ---------- heroes ---------- */
.hero{min-height:max(560px,100svh);display:grid;place-items:center;text-align:center;isolation:isolate;padding:clamp(120px,18svh,170px) 0 var(--space-l);position:relative}
.hero-bg{position:absolute;inset:0;z-index:-2;background-position:center 30%;background-size:cover;filter:saturate(.92) brightness(.85)}
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 50% at 50% 42%, rgba(11,10,8,.25), rgba(11,10,8,.86) 78%),
  linear-gradient(180deg, rgba(11,10,8,.55), rgba(11,10,8,.35) 35%, var(--bg) 96%)}
.hero .motif{width:64px;margin:0 auto 26px;opacity:0;animation:rise 1s var(--ease) .1s forwards;filter:drop-shadow(0 0 18px rgba(200,162,75,.35))}
.kicker{font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-bright);font-weight:700;opacity:0;animation:rise 1s var(--ease) .25s forwards}
.hero h1{font-size:clamp(24px,6.4vw,86px);margin:18px auto 22px;max-width:none;opacity:0;animation:rise 1.1s var(--ease) .4s forwards}
.nowrap{white-space:nowrap}
.h-em{font-style:italic;color:var(--gold-bright)}
.neon-text{background:var(--neon-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.hero p{max-width:54ch;margin:0 auto 38px;color:var(--muted);font-size:17px;opacity:0;animation:rise 1.1s var(--ease) .55s forwards}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;opacity:0;animation:rise 1.1s var(--ease) .7s forwards}
.hero-meta{margin-top:56px;display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center;opacity:0;animation:rise 1.1s var(--ease) .85s forwards}
.hero-meta .chip{padding:12px 22px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cream)}
.hero-meta .chip b{color:var(--gold-bright);font-weight:700}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* subpage hero (shorter) */
.page-hero{min-height:max(440px,62svh);padding:clamp(140px,20svh,190px) 0 var(--space-l)}
.page-hero h1{font-size:clamp(26px,5.2vw,72px)}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line);padding:18px 0;overflow:hidden;background:var(--bg2)}
.marquee-track{display:flex;gap:64px;width:max-content;animation:scroll 36s linear infinite}
.marquee span{font-family:'Fraunces',serif;font-style:italic;font-size:20px;white-space:nowrap;display:flex;align-items:center;gap:64px;
  background:linear-gradient(100deg,#92702c,#c8a24b 22%,#f0dca0 38%,#c8a24b 55%,#92702c 70%,#e8cd8a 88%,#92702c);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.marquee i{font-style:normal;font-size:10px}
.marquee i:nth-of-type(odd){color:var(--pink)}
.marquee i:nth-of-type(even){color:var(--violet)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding:var(--space-xl) 0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-s);margin-bottom:var(--space-l)}
.sec-head h2{font-size:clamp(24px,3.8vw,46px);max-width:20ch}.eyebrow{font-size:11.5px;letter-spacing:.38em;text-transform:uppercase;color:var(--gold);font-weight:700;display:block;margin-bottom:16px}
.sec-head p{max-width:38ch;color:var(--muted);font-size:15.5px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.badge-neon{color:#fff;border:1px solid transparent;background:
  linear-gradient(rgba(15,12,9,.85),rgba(15,12,9,.85)) padding-box,var(--neon-grad) border-box;
  box-shadow:0 0 22px -6px rgba(255,46,136,.45)}
.badge-gold{color:var(--gold-bright);border:1px solid var(--line)}

/* ---------- cards (glass) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-s)}
.card{overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 60px -24px rgba(0,0,0,.8)}
.card .ph{height:250px;overflow:hidden;border-radius:21px 21px 0 0}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .ph img{transform:scale(1.06)}
.card .pad{padding:clamp(20px,2.4vw,30px)}
.card h3{font-size:21px;margin-bottom:6px}
.card .when{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:14px;display:block}
.card p{color:var(--muted);font-size:14.5px}
.card .more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--gold-bright);font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.card .more::after{content:"→";transition:transform .3s}
.card:hover .more::after{transform:translateX(5px)}

/* ---------- signature serves ---------- */
.serves{background:var(--bg2);border-block:1px solid var(--line)}
.serve-row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center;padding:var(--space-l) 0}
.serve-row + .serve-row{border-top:1px solid var(--line)}
.serve-row:nth-child(even) .serve-img{order:2}
.serve-img{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/3.2}
.serve-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.serve-row:hover .serve-img img{transform:scale(1.05)}
.num{font-family:'Fraunces',serif;font-style:italic;font-size:18px;display:block;margin-bottom:14px;
  background:linear-gradient(100deg,#92702c,#c8a24b 35%,#f0dca0 55%,#c8a24b 75%,#92702c);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.serve-row h3{font-size:clamp(20px,3vw,36px);margin-bottom:16px}
.serve-row p{color:var(--muted);max-width:46ch}
.tag{display:inline-block;margin-top:20px;padding:8px 16px;border:1px solid var(--line);border-radius:999px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright)}
/* glass chip floating on imagery */
.serve-chip{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;padding:10px 18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold-bright);background:var(--glass-bg-strong)}
.serve-chip.neon{color:#fff;box-shadow:0 0 26px -6px rgba(255,46,136,.6)}

/* ---------- QR / order ---------- */
.qr{padding:var(--space-xl) 0;text-align:center;background:radial-gradient(50% 60% at 50% 0%, rgba(200,162,75,.13), transparent 70%)}
.qr .motif{width:54px;margin:0 auto 24px;opacity:.9;filter:drop-shadow(0 0 18px rgba(200,162,75,.35))}
.qr h2{font-size:clamp(24px,4vw,50px);max-width:20ch;margin:0 auto 20px}.qr p{color:var(--muted);max-width:52ch;margin:0 auto 36px}
.steps{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.step{padding:13px 24px;font-size:13px;color:var(--cream)}
.step b{color:var(--gold-bright);font-family:'Fraunces',serif;font-style:italic;margin-right:8px}

/* ---------- brunch banner (home) ---------- */
.brunch-banner{margin:0 auto;width:min(1200px,92vw);border-radius:24px;overflow:hidden;position:relative;isolation:isolate;padding:var(--space-l) var(--space-m)}
.brunch-banner .bb-bg{position:absolute;inset:0;z-index:-2;background-position:center;background-size:cover}
.brunch-banner .bb-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg, rgba(11,10,8,.9) 32%, rgba(11,10,8,.5) 70%, rgba(139,92,246,.18))}
.brunch-card{max-width:min(560px,100%);padding:clamp(26px,3.4vw,44px)}
.brunch-card h2{font-size:clamp(22px,3.4vw,42px);margin:14px 0 18px}
.brunch-card p{color:#d8cfbd;max-width:46ch;margin-bottom:14px}
.brunch-card ul{list-style:none;margin:22px 0 34px;display:grid;gap:10px;max-width:46ch}
.brunch-card li{padding-left:26px;position:relative;color:var(--muted);font-size:15px;text-align:left}
.brunch-card li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--neon-grad)}
/* draw-the-eye: a bright neon highlight travels around the brunch pills'
   ring (the badge + the CTA). @property animates the conic angle so the
   hotspot orbits the border; the existing 1px mask keeps it a ring. The
   var() fallback + matching @supports keep a static neon ring where the
   mask/@property aren't supported. Starts once the card is in view. */
@property --tphang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes tphOrbit{to{--tphang:360deg}}
@supports (((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and ((mask-composite:exclude) or (-webkit-mask-composite:xor))){
  .brunch-card .badge-neon::before,.brunch-card .btn-neon::before{
    background:conic-gradient(from var(--tphang,0deg),rgba(255,46,136,.22),#ff2e88 14%,#ffe1ef 26%,#c79bff 40%,rgba(139,92,246,.2) 58%,rgba(255,46,136,.18) 100%)}
  .brunch-banner.in .brunch-card .badge-neon::before,
  .brunch-banner.in .brunch-card .btn-neon::before{animation:tphOrbit 3.4s linear infinite}
}
@media (prefers-reduced-motion:reduce){.brunch-card .badge-neon::before,.brunch-card .btn-neon::before{animation:none}}

/* ---------- reviews ---------- */
.stars{color:var(--gold-bright);letter-spacing:4px}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:var(--space-s)}
.rev{padding:clamp(24px,2.6vw,36px);transition:transform .4s var(--ease)}
.rev:hover{transform:translateY(-6px)}
.rev q{font-family:'Fraunces',serif;font-size:19px;line-height:1.5;display:block;margin:18px 0 22px;quotes:"\201C" "\201D"}
.rev .who{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600}
.rev-bar{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:48px;flex-wrap:wrap}
.score{font-family:'Fraunces',serif;font-size:44px;color:var(--gold-bright)}
.rev-bar small{color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- hours / location ---------- */
.loc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.hours{display:grid;gap:0;border-top:1px solid var(--line)}
.hours-card{border-top:0;padding:22px 26px 6px}
.hrow{display:flex;justify-content:space-between;gap:18px;padding:15px 4px;border-bottom:1px solid var(--line);font-size:15px}
.hrow span:first-child{letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;font-weight:700;color:var(--muted);padding-top:2px}
.hrow.today span{color:var(--gold-bright)}
.hrow.today span:first-child::after{content:"· today";color:var(--pink);margin-left:8px;text-transform:none;letter-spacing:.04em}
.hrow em{font-style:italic;font-family:'Fraunces',serif;color:var(--muted)}
.addr{font-size:17px;line-height:2}
.addr a{color:var(--gold-bright);border-bottom:1px solid var(--line);transition:border-color .3s}
.addr a:hover{border-color:var(--gold-bright)}
.map{margin-top:28px;border-radius:18px;overflow:hidden;border:1px solid var(--line);filter:grayscale(.4) contrast(1.05);aspect-ratio:16/8}
.map iframe{width:100%;height:100%;border:0}

/* ---------- menu page ---------- */
.times-chips{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.tchip{padding:16px 24px;min-width:min(230px,100%)}
.tchip b{display:block;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:4px}
.tchip span{font-size:14px;color:var(--muted)}
.tchip .neon{color:transparent;background:var(--neon-grad);-webkit-background-clip:text;background-clip:text;font-weight:600}
.menu-note{color:var(--muted);font-size:14px;max-width:64ch}
/* structured V11 menu */
.menu-cat{display:flex;align-items:center;gap:18px;margin:54px 0 22px}
.menu-cat h3{font-size:clamp(16px,2vw,22px);letter-spacing:.18em;white-space:nowrap}
.menu-cat::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}
.dish .price{flex-shrink:0;align-self:flex-start;font-family:var(--label-font);font-weight:700;
  color:var(--gold-bright);font-size:16px;letter-spacing:.06em;padding-top:2px}
html.octic .dish .price{font-weight:400}
.diet{display:inline-block;font-style:normal;font-family:var(--label-font);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--line);border-radius:99px;
  padding:2px 7px;margin-left:8px;vertical-align:2px}
.menu-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--space-s);margin-top:54px}
.menu-info .pad{padding:clamp(22px,2.6vw,32px)}
.menu-info h4{font-size:15px;letter-spacing:.18em;margin-bottom:14px;color:var(--gold-bright)}
.menu-info p,.menu-info li{color:var(--muted);font-size:14px}
.menu-info ul{list-style:none;display:grid;gap:6px;columns:auto}
/* open-state: vibrant green + breathing when the bar is alive.
   (.dot.on outranks the gold idle-dot rule that was winning before) */
.chip.live b{color:#62f59a;animation:breathetext 3.4s ease-in-out infinite}
.chip.live .dot.on{background:#44f08a;box-shadow:0 0 12px 2px rgba(68,240,138,.75);animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 20px 5px rgba(68,240,138,.95);transform:scale(1.2)}}
@keyframes breathetext{50%{opacity:.72}}
.dish-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:var(--space-xs) var(--space-m);margin-top:var(--space-m)}
.dish{display:flex;justify-content:space-between;gap:18px;padding:24px;border-radius:18px}
.dish h4{font-family:'Fraunces',serif;font-weight:500;font-size:20px;margin-bottom:4px}
.dish p{color:var(--muted);font-size:14px;max-width:44ch}
.dish .d-tag{flex-shrink:0;align-self:flex-start}
.menu-imgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:var(--space-s);margin-top:var(--space-m)}
.menu-imgs a{border-radius:18px;overflow:hidden;border:1px solid var(--line);transition:transform .4s var(--ease),border-color .4s;display:block}
.menu-imgs a:hover{transform:translateY(-6px);border-color:rgba(200,162,75,.5)}
.menu-imgs img{width:100%;height:auto}
.menu-imgs figcaption{padding:14px 18px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- brunch page ---------- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--space-s);counter-reset:fl}
.flow .f-step{padding:clamp(24px,2.6vw,36px);counter-increment:fl}
.flow .f-step::marker{content:none}
.flow .f-step h3{font-size:19px;margin:14px 0 10px}
.flow .f-step h3::before{content:counter(fl,decimal-leading-zero);display:block;font-family:'Fraunces',serif;font-style:italic;font-size:17px;color:var(--pink);margin-bottom:10px}
.flow .f-step p{color:var(--muted);font-size:14.5px}
.terms{columns:38ch 2;column-gap:var(--space-m);color:var(--muted);font-size:14.5px} /* intrinsic: collapses to 1 col when narrow */
.terms.glass{padding:clamp(24px,3.4vw,44px) clamp(24px,3.4vw,44px) clamp(18px,2.6vw,32px)}
.terms li{break-inside:avoid;list-style:none;padding-left:26px;position:relative;margin-bottom:14px}
.terms li::before{content:"";position:absolute;left:0;top:.65em;width:12px;height:1px;background:var(--gold)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg2);padding:var(--space-l) 0 var(--space-m);margin-top:var(--space-xl)}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:var(--space-m);margin-bottom:var(--space-l)}
.f-grid h4{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.f-grid a,.f-grid p{display:block;color:var(--muted);font-size:14.5px;margin-bottom:10px;transition:color .25s}
.f-grid a:hover{color:var(--gold-bright)}
.f-grid a.social:hover{color:transparent;background:var(--neon-grad);-webkit-background-clip:text;background-clip:text}
.f-logo{height:30px;width:auto;margin-bottom:18px}
.f-bottom{border-top:1px solid var(--line);padding-top:28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;letter-spacing:.08em}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* perf — skip rendering below-fold sections until needed */
.sec,.serves,.qr,footer{content-visibility:auto;contain-intrinsic-size:auto 720px}
/* the marquee animates forever — don't render it offscreen */
.marquee{content-visibility:auto;contain-intrinsic-size:auto 64px}

/* ---------- liquid gold scroll progress ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#92702c,#c8a24b 40%,#f6e7b4 75%,#e8cd8a);
  box-shadow:0 0 12px rgba(200,162,75,.45)}

/* ---------- cursor glint on glass ----------
   pre-painted glow disc moved with transform only (compositor work,
   zero repaints) — clipped by the tile */
.f-step,.tchip,.dish,.rev{overflow:hidden}
.glint{position:absolute;left:0;top:0;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;
  pointer-events:none;z-index:3;opacity:0;transition:opacity .45s;
  transform:translate(-9999px,-9999px);
  background:radial-gradient(circle,rgba(255,255,255,.13),rgba(232,205,138,.05) 42%,transparent 68%)}
/* promote to a GPU layer only while hovered — permanent will-change
   on every disc held ~17 idle compositor layers alive */
.card:hover .glint,.f-step:hover .glint,.tchip:hover .glint,.dish:hover .glint,.rev:hover .glint{opacity:1;will-change:transform}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- component-level adaptation (container queries) ----------
   These react to .wrap's width — works identically whether the cause
   is a phone, a folded rail, a split-screen window or a resized tab */
@container wrap (max-width:700px){
  .serve-row{grid-template-columns:1fr;gap:var(--space-s);padding:var(--space-l) 0}
  .serve-row:nth-child(even) .serve-img{order:0}
}
@container wrap (max-width:760px){
  .loc{grid-template-columns:1fr;gap:var(--space-m)}
}
@container wrap (max-width:640px){
  .sec-head{flex-direction:column;align-items:flex-start}
}

/* ---------- viewport-tied concerns only (nav chrome, dock) ---------- */
@media (max-width:960px){
  .nav-links{display:none}
  .nav-cta .btn-ghost{display:none}
  .burger{display:flex}
  .dock{display:flex}
  body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* ---------- foldables: spanned across two segments ----------
   keep two-column layouts clear of the hinge */
@media (horizontal-viewport-segments: 2){
  .wrap{width:min(1200px,88vw)}
  .serve-row,.loc{column-gap:clamp(80px,14vw,170px)}
}

/* ---------- mobile dock — floating glass action bar ---------- */
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:48;display:none;gap:10px;padding:10px 12px;width:max-content;max-width:94vw}

/* ============================================================
   LIQUID GOLD — molten metallic text, echoing the logo sheen.
   Slow flowing gradient; static bright band under reduced motion.
   ============================================================ */
h1 em,h2 em,.liquid-gold,.score{font-style:italic;font-family:'Fraunces',serif;text-transform:none;letter-spacing:0;
  background:linear-gradient(100deg,#7a5c22 0%,#c8a24b 16%,#f6e7b4 34%,#e8cd8a 46%,#92702c 60%,#c8a24b 74%,#f8ecc0 90%,#c8a24b 100%);
  background-size:240% 100%;background-position:35% 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:goldflow 9s ease-in-out infinite alternate}
@keyframes goldflow{from{background-position:0% 50%}to{background-position:100% 50%}}

/* ============================================================
   CROSS-DOCUMENT VIEW TRANSITIONS — page crossfades on navigation,
   the ribbon stays put, and the selector lozenge GLIDES to the new
   page's tab. Progressive enhancement: unsupported browsers (and
   file:// viewing) just get a normal navigation.
   ============================================================ */
/* ============================================================
   DRAGON BITE MODE — triple-tap the logo. The site turns the
   colour of the drink itself: neon pink/violet, 8 seconds, with
   flames licking around the ribbon. Then it composes itself.
   ============================================================ */
html.dragon{--gold:#ff2e88;--gold-bright:#ff8ad2;--line:rgba(255,46,136,.32)}
html.dragon h1 em,html.dragon h2 em,html.dragon .liquid-gold,html.dragon .score{
  background-image:linear-gradient(100deg,#6b1043 0%,#ff2e88 16%,#ffc4ec 34%,#c79bff 46%,#5b2a8f 60%,#ff2e88 74%,#ffd6f3 90%,#ff2e88 100%)}
html.dragon .btn-solid{background-image:linear-gradient(110deg,#7a1450,#ff2e88 26%,#ffc4ec 50%,#a06bff 74%,#4d2378);border-color:rgba(255,196,236,.55);color:#2a0b1e}
html.dragon .progress i{background:linear-gradient(90deg,#5b2a8f,#ff2e88 40%,#ffc4ec 75%,#c79bff);box-shadow:0 0 12px rgba(255,46,136,.5)}
html.dragon .num,html.dragon .marquee span{
  background-image:linear-gradient(100deg,#5b2a8f,#ff2e88 35%,#ffc4ec 55%,#c79bff 75%,#5b2a8f)}
html.dragon .ambient{background:
  radial-gradient(46% 38% at 12% 8%, rgba(255,46,136,.16), transparent 70%),
  radial-gradient(40% 34% at 88% 18%, rgba(139,92,246,.14), transparent 70%),
  radial-gradient(44% 40% at 78% 92%, rgba(255,46,136,.09), transparent 70%)}
html.dragon .nav-glider,html.dragon .nav-links a.active,html.dragon .nav-menu-in a.active{
  background:linear-gradient(180deg,rgba(255,46,136,.22),rgba(139,92,246,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,46,136,.4),inset 0 -6px 12px -8px rgba(0,0,0,.5)}
/* neon flames around the ribbon — tongues rise from behind the glass */
.dragon-flames{position:absolute;left:50%;transform:translateX(-50%);width:min(1240px,94vw);
  top:-16px;bottom:-14px;z-index:-2;pointer-events:none;filter:blur(7px) saturate(1.35)}
.dragon-flames i{position:absolute;bottom:0;width:34px;border-radius:50% 50% 38% 38%/64% 64% 28% 28%;
  background:radial-gradient(52% 68% at 50% 80%,rgba(255,46,136,.9),rgba(139,92,246,.5) 58%,transparent 76%);
  transform-origin:50% 100%;animation:flick .6s ease-in-out infinite alternate}
.dragon-flames i:nth-child(even){
  background:radial-gradient(52% 68% at 50% 80%,rgba(196,123,255,.85),rgba(255,46,136,.45) 58%,transparent 76%)}
@keyframes flick{
  from{transform:translateY(5px) scaleY(.8) scaleX(.94);opacity:.75}
  to{transform:translateY(-9px) scaleY(1.14) scaleX(1.05);opacity:1}
}

/* ---------- bottomless policy expander (brunch page) ---------- */
.policy-wrap{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .7s cubic-bezier(.55,.06,.18,1)}
.policy-wrap.open{grid-template-rows:1fr}
.policy-clip{min-height:0;overflow:hidden}
.policy-in{margin-top:20px;padding:clamp(24px,3vw,38px)}
.policy-in h3{font-size:19px;margin-bottom:18px}
.policy-scroll{max-height:min(420px,56vh);overflow:auto;padding-right:14px;
  scrollbar-width:thin;scrollbar-color:rgba(200,162,75,.5) transparent}
.policy-scroll::-webkit-scrollbar{width:6px}
.policy-scroll::-webkit-scrollbar-thumb{background:rgba(200,162,75,.45);border-radius:3px}
.policy-scroll ul{list-style:none;display:grid;gap:14px}
.policy-scroll li{color:var(--muted);font-size:14.5px;padding-left:26px;position:relative}
.policy-scroll li::before{content:"";position:absolute;left:0;top:.65em;width:12px;height:2px;background:var(--neon-grad)}
.policy-scroll li b{color:var(--cream);font-weight:700}

/* open-state dot in the hero chip */
.chip .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:9px;vertical-align:1px;background:#7a6a55}
.chip .dot.on{background:var(--gold-bright);box-shadow:0 0 10px 1px rgba(232,205,138,.65);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 16px 3px rgba(232,205,138,.85)}}

@view-transition{navigation:auto}
.nav-inner{view-transition-name:nav-bar}
.dock{view-transition-name:nav-dock}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ============================================================
   LIQUID-GLASS PILLS v2 (Dean, June 12) — badges & neon CTAs get
   the SAME material as the serve-chips: .glass fill + live
   #lg-refract-pill displacement. v1 lesson: the two-layer
   gradient-border background can't go translucent — the neon
   layer sits UNDER the fill, so lowering fill alpha floods the
   whole pill with gradient. The neon ring is now a masked
   ::before overlay instead (paints ONLY the 1px ring, on top).
   Everything gated by @supports — older browsers keep the
   original opaque pills above, contrast never at risk.
   ============================================================ */
@supports (((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and ((mask-composite:exclude) or (-webkit-mask-composite:xor))){
  .badge-neon,.badge-gold,.btn-neon{position:relative;background:var(--glass-bg);
    backdrop-filter:blur(16px) saturate(1.65);-webkit-backdrop-filter:blur(16px) saturate(1.65)}
  html.lg-refract .badge-neon,html.lg-refract .badge-gold,html.lg-refract .btn-neon{
    backdrop-filter:url(#lg-refract-pill) blur(2px) saturate(1.7) brightness(1.06);
    -webkit-backdrop-filter:url(#lg-refract-pill) blur(2px) saturate(1.7) brightness(1.06)}
  /* neon ring — gradient masked down to the border zone only */
  .badge-neon::before,.btn-neon::before{content:"";position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;padding:1px;background:var(--neon-grad);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude}
  @media (prefers-reduced-transparency: reduce){
    .badge-neon,.badge-gold,.btn-neon{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(20,17,12,.97)}
  }
}

/* ============================================================
   RESPONSIVE CTA LABELS (Dean, June 12) — when the ribbon gets
   squeezed, "Book a Table" compacts to "Reserve" and "Order at
   Table" to "Order", so the bar always holds one row. Full
   wording returns on roomy viewports.
   ============================================================ */
.nav-cta .lbl-s{display:none}
@media (max-width:1120px){
  .nav-cta .lbl-f{display:none}
  .nav-cta .lbl-s{display:inline}
}

/* ============================================================
   MENU-PANEL REST PIN (mobile scroll perf, June 12) — closed &
   settled, the panel's box is pinned to the pill's height, so
   its live backdrop lens samples a pill-sized region instead of
   the hidden screen-sized box. Identical pixels (the clip only
   ever showed this slice); JS releases the pin before any morph.
   The pinned box IS the pill, so it wears the plain pill lens —
   the dynamic bar-slice map remains the un-pinned fallback.
   ============================================================ */
@media (max-width:960px){
  nav.rest:not(.open) .nav-menu{height:var(--barH,76px)}
}
html.lg-refract nav.rest:not(.open):not(.morph) .nav-menu{
  backdrop-filter:url(#lg-refract-pill) blur(2px) saturate(1.7) brightness(1.06);
  -webkit-backdrop-filter:url(#lg-refract-pill) blur(2px) saturate(1.7) brightness(1.06)}

/* ============================================================
   MOBILE RIBBON — ONE ROW, ALWAYS (Dean, June 12). The panel is
   a sibling layer now, so the bar no longer needs to wrap (that
   rule was for the old in-pill menu and was stacking the CTAs
   under the brand). Compact brand + Order button to fit ~360px.
   ============================================================ */
.brand .wordmark{height:15px} /* was an inline style; in CSS so mobile can shrink it */
@media (max-width:960px){
  .nav-inner{flex-wrap:nowrap;padding:9px 10px 9px 16px}
  .brand{gap:9px}
  .brand img{height:26px}
  .brand .wordmark{height:13px}
  .nav-cta{gap:7px}
  .nav-cta .btn-sm{padding:9px 15px;font-size:12px;letter-spacing:.1em}
  .burger{padding:8px 6px}
}

/* ============================================================
   MOBILE SCROLL STEP-DOWN (Dean, June 12) — the lens distortion
   is CPU-rastered in Chromium, so live displacement during fast
   scroll caps mobile at ~15-30fps. While html.scrolling (160ms
   debounce, already wired), every live surface drops to plain
   glass blur — full-rate scrolling — and the refraction re-forms
   the moment motion stops. The eye can't track refraction in a
   flick; it CAN study it at rest, where it stays live. Scoped to
   touch devices — desktop keeps refraction during scroll (Dean's
   standing rule).
   ============================================================ */
/* THE NAV RIBBON IS EXEMPT — Dean's rule: the nav pill must refract
   LIVE through the scroll, that's the showcase. Just ONE pill-sized
   lens in motion is affordable; the page-wide chorus of chips/badges/
   lenses — AND the bottom dock (June 13: added here; its refraction
   can't be read mid-flick, so pausing it through the scroll is free
   visually but halves the fixed-lens cost) — step down and re-form at
   rest. */
@media (max-width:960px),(pointer:coarse){
  html.lg-refract.scrolling .glass:not(.nav-menu):not(.nav-inner),
  html.lg-refract.scrolling .glass-lens,
  html.lg-refract.scrolling .hero .btn-ghost,
  html.lg-refract.scrolling .dock .btn-ghost,
  html.lg-refract.scrolling .badge-neon,
  html.lg-refract.scrolling .badge-gold,
  html.lg-refract.scrolling .btn-neon{
    /* June 13 — Dean flagged the old blur(14px) as a visible "frost"
       flash on scroll. Now we drop ONLY the displacement and hold a
       light glass blur that matches each surface's rest state, so the
       lens simply pauses mid-flick (imperceptible) instead of frosting,
       and re-sharpens the instant motion stops. */
    backdrop-filter:blur(3px) saturate(1.7) brightness(1.05);
    -webkit-backdrop-filter:blur(3px) saturate(1.7) brightness(1.05)}
  /* June 14 — also pause the nav pill's live lens during the flick on
     phones (it re-forms the instant scrolling stops). It was the last
     CPU-rastered displacement running every scroll frame on mobile;
     pausing it mid-flick is imperceptible and clears the stutter.
     Desktop is untouched — the ribbon still refracts live through scroll. */
  html.lg-refract.scrolling nav:not(.open) .nav-menu,
  html.lg-refract.scrolling .nav-glider{
    backdrop-filter:blur(3px) saturate(1.7) brightness(1.05);
    -webkit-backdrop-filter:blur(3px) saturate(1.7) brightness(1.05)}
}

/* ============================================================
   HOMEPAGE — CINEMATIC PREMIUM PASS (Dean, June 16)
   GPU-only (transform/opacity) + a static grain texture. Every
   motion is reduced-motion guarded, and NO new live backdrop-
   filters are introduced — the scroll-perf budget tuned earlier
   stays exactly intact.
   ============================================================ */
/* the hero now clips its own slow drift */
.hero{overflow:hidden}
/* slow ken-burns drift — the still photo breathes, cinema-style.
   Stays ≥1.06 scale so an edge can never peek; the hero clips anyway */
@media (prefers-reduced-motion:no-preference){
  .hero-bg{animation:heroDrift 28s ease-in-out infinite alternate;will-change:transform}
}
@keyframes heroDrift{from{transform:scale(1.06)}to{transform:scale(1.14) translate3d(-1.4%,-1%,0)}}
/* filmic grain over the photo, BENEATH the text — static texture,
   zero per-frame cost; soft-light keeps it a whisper */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  mix-blend-mode:soft-light;background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* hero motif — a gentle breathing glow once it has risen in */
@media (prefers-reduced-motion:no-preference){
  .hero .motif{animation:rise 1s var(--ease) .1s forwards,motifGlow 5s ease-in-out 1.3s infinite}
}
@keyframes motifGlow{0%,100%{filter:drop-shadow(0 0 14px rgba(200,162,75,.3))}50%{filter:drop-shadow(0 0 28px rgba(232,205,138,.55))}}
/* scroll cue — a thin gold filament with a light that falls, inviting
   the scroll. Desktop only (the mobile dock owns the bottom edge); it
   fades the instant the page is scrolled (reuses nav.scrolled) */
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:1;display:grid;place-items:center;
  opacity:0;transition:opacity .6s var(--ease);animation:rise 1.1s var(--ease) 1.15s forwards}
.scroll-cue .sc-line{position:relative;width:1.5px;height:48px;border-radius:2px;overflow:hidden;
  background:linear-gradient(rgba(200,162,75,.4),rgba(200,162,75,0))}
.scroll-cue .sc-line i{position:absolute;left:0;top:0;width:100%;height:42%;border-radius:2px;
  background:linear-gradient(var(--gold-bright),rgba(232,205,138,0))}
@media (prefers-reduced-motion:no-preference){.scroll-cue .sc-line i{animation:scDrop 2.4s var(--ease) infinite}}
@keyframes scDrop{0%{transform:translateY(-110%)}55%,100%{transform:translateY(255%)}}
nav.scrolled ~ .hero .scroll-cue{opacity:0;pointer-events:none}
@media (max-width:960px){.scroll-cue{display:none}}