/* =====================================================================
   Ninan's Steakhouse - V2 "THE EDITORIAL FILM" design system
   Synthesis of three concepts the client liked:
     A Cinematic (The Jane)   - full-bleed immersive frames, slow motion
     B Editorial (Son+Daven)  - ruled hairlines, numbered sections, grid
     C Narrative (Attica)     - chaptered scroll-reveal storytelling
   = a magazine editorial spine, punctuated by full-bleed cinematic
     frames, revealed as a chaptered scroll.

   DISTINCT from V1 (which is near-black + gold + Cormorant + chapter
   rail + butcher-chart steer). V2 is warm CHARCOAL + BONE/CREAM +
   EMBER-COPPER + OXBLOOD, Fraunces + Archivo + mono, with a real
   dark/light rhythm: dark cinematic frames, CREAM editorial spreads
   for the Menu and the Anatomy. No build step. No en/em dashes.

   Layers:
     1. tokens        - OKLCH palette, type scale, spacing, motion
     2. base / reset  - element defaults, focus rings, selection
     3. primitives    - kicker, hairlines, numbered sections, buttons,
                        veg/non-veg markers, nutritionist seal
     4. header        - editorial masthead (brand + order + reserve)
     5. hero          - full-bleed film + Ken Burns fallback
     6. surfaces      - dark cinematic frame + cream editorial spread
     7. anatomy       - the signature interactive cross-section
     8. menu          - dish list + trust block
     9. branches      - editorial register (featured + numbered)
    10. reserve       - inline booking form + confirmation
    11. footer
    12. dialogs       - staff passcode + PMS overlay
    13. reveals + responsive + reduced-motion
   ===================================================================== */

/* ============ 1. TOKENS ============ */
:root{
  /* ---- palette, defined in OKLCH ----
     warm charcoal base (never pure #000), bone/cream surfaces,
     ember-copper + oxblood as the lead accents. */
  --charcoal:oklch(0.18 0.012 40);      /* ~#14100f base */
  --charcoal-2:oklch(0.22 0.014 42);    /* raised dark panel */
  --charcoal-3:oklch(0.27 0.016 44);    /* hairline-on-dark base */
  --char-deep:oklch(0.13 0.010 38);     /* deepest letterbox */

  --bone:oklch(0.93 0.018 80);          /* ~#f2ece1 text on dark */
  --bone-78:oklch(0.93 0.018 80 / .78);
  --bone-58:oklch(0.93 0.018 80 / .58);
  --bone-38:oklch(0.93 0.018 80 / .38);
  --line:oklch(0.93 0.018 80 / .16);    /* hairline on dark */
  --field-border:oklch(0.93 0.018 80 / .42); /* input edges, WCAG 1.4.11 >=3:1 */
  --line-soft:oklch(0.93 0.018 80 / .09);

  --cream:oklch(0.95 0.016 82);         /* cream editorial spread surface */
  --cream-2:oklch(0.92 0.018 80);       /* raised cream panel */
  --ink:oklch(0.22 0.016 44);           /* text on cream (>=4.5:1) */
  --ink-70:oklch(0.22 0.016 44 / .72);
  --ink-46:oklch(0.30 0.016 44 / .74); /* lifted to clear WCAG AA 4.5:1 on cream for functional labels */
  --line-ink:oklch(0.22 0.016 44 / .20);/* hairline on cream */
  --line-ink-soft:oklch(0.22 0.016 44 / .10);

  --ember:oklch(0.62 0.135 48);         /* ~#c0612e ember-copper accent */
  --ember-soft:oklch(0.62 0.135 48 / .40);
  --ember-bright:oklch(0.70 0.140 52);  /* hover lift */
  --oxblood:oklch(0.40 0.110 22);       /* ~#6e1f24 deep oxblood accent */
  --oxblood-bright:oklch(0.46 0.120 22);

  /* markers + status, kept legible on both surfaces */
  --veg:oklch(0.58 0.130 150);          /* green square */
  --nonveg:oklch(0.45 0.140 25);        /* maroon/red square */
  --ok:oklch(0.70 0.130 150);
  --warn:oklch(0.74 0.120 75);
  --err-dark:oklch(0.74 0.130 35);      /* error text on dark */
  --err-light:oklch(0.48 0.150 28);     /* error text on cream */

  /* ---- type families ---- */
  --serif:'Fraunces',Georgia,'Times New Roman',serif; /* display, variable */
  --grotesk:'Archivo','Helvetica Neue',system-ui,-apple-system,sans-serif;
  --mono:'Spline Sans Mono','JetBrains Mono',ui-monospace,monospace;

  /* ---- type scale (fluid, >=1.25 steps) ---- */
  --t-masthead:clamp(42px,9vw,148px);
  --t-h2:clamp(38px,5.4vw,82px);
  --t-h3:clamp(26px,3vw,40px);
  --t-h4:clamp(20px,2vw,26px);
  --t-lead:clamp(20px,2.2vw,27px);
  --t-body:clamp(15.5px,1.25vw,17.5px);
  --t-small:clamp(13px,1vw,14px);
  --t-label:12px;
  --t-mono:12px;

  /* optical sizing + weights for Fraunces variable axes */
  --fr-soft:0;     /* SOFT axis off for crisp editorial serifs */
  --fr-wonk:0;     /* WONK axis off */

  /* ---- spacing + rhythm ---- */
  --pad-x:clamp(22px,5.2vw,84px);
  --pad-y:clamp(78px,12vh,148px);
  --gutter:clamp(20px,3vw,48px);
  --maxw:1360px;
  --measure:66ch;

  /* ---- motion ---- ease-out, 150-400ms, no bounce */
  --ease:cubic-bezier(.22,.61,.36,1);     /* crisp UI ease-out */
  --ease-cine:cubic-bezier(.16,.84,.44,1);/* slow luxurious */
  --t-fast:150ms;
  --t-ui:240ms;
  --t-slow:380ms;
  --t-cine:1.1s;

  /* ---- doneness interior color, recooked live by site.js ---- */
  --done-core:oklch(0.50 0.150 22);   /* default medium-rare pink-red */
  --done-edge:oklch(0.36 0.060 40);   /* seared crust edge */

  /* ---- Edible Factor accent (verification + discovery layer) ----
     brand indigo #4f4dd6 + periwinkle #a3a2ff, kept as the EF signature
     so the integration reads as a real partner layer, harmonized with the
     warm charcoal / cream surfaces. */
  --ef-indigo:#4f4dd6;
  --ef-indigo-bright:#6664e6;
  --ef-peri:#a3a2ff;
  --ef-indigo-12:oklch(0.50 0.20 277 / .12);
  --ef-indigo-22:oklch(0.50 0.20 277 / .22);
  --ef-peri-soft:oklch(0.74 0.13 282 / .42);

  color-scheme:dark;
}

/* ============ 2. BASE / RESET ============ */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
/* Lenis smooth-scroll (vendored): Lenis owns scrolling when active */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
body{
  background:var(--charcoal);
  color:var(--bone);
  font-family:var(--grotesk);
  font-size:16px;
  line-height:1.6;
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,select,textarea,button{font-family:inherit;}
ul,ol{list-style:none;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:560;line-height:1.02;
  font-optical-sizing:auto;letter-spacing:-.01em;
  font-variation-settings:'SOFT' var(--fr-soft),'WONK' var(--fr-wonk);}
::selection{background:var(--ember);color:var(--char-deep);}

:focus{outline:none;}
:focus-visible{
  outline:2px solid var(--ember-bright);
  outline-offset:3px;
  border-radius:2px;
}
/* focus ring legible on the cream spreads too */
.spread :focus-visible,.spread-scope :focus-visible{
  outline-color:var(--oxblood-bright);
}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:200;
  background:var(--bone);color:var(--ink);
  padding:10px 16px;border-radius:3px;font-weight:600;
  font-size:14px;transition:top var(--t-ui) var(--ease);
}
.skip-link:focus-visible{top:14px;}

.wrap{max-width:var(--maxw);margin:0 auto;
  padding-left:var(--pad-x);padding-right:var(--pad-x);}

/* ============ 3. PRIMITIVES ============ */

/* kicker / micro-label - mono, tracked, the editorial register mark */
.kicker{
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ember);
  font-weight:500;
  display:inline-flex;align-items:center;gap:10px;
}
/* RULE: never a decorative leading hairline before an eyebrow/label, any
   design. It reads as an off-brand em-dash. The mono-caps label stands alone. */
.spread .kicker,.spread-scope .kicker{color:var(--oxblood);}

/* ruled hairline - the editorial signature rule */
.rule{height:1px;background:var(--line);border:0;width:100%;}
.spread .rule,.spread-scope .rule{background:var(--line-ink);}
.rule-soft{background:var(--line-soft);}

/* numbered section header - big mono numeral + ruled hairline */
.sec-head{
  display:grid;
  grid-template-columns:1fr;
  align-items:baseline;
  gap:clamp(16px,3vw,40px);
  padding-top:26px;
  border-top:1px solid var(--line);
  margin-bottom:clamp(30px,4vw,52px);
}
.spread .sec-head,.spread-scope .sec-head{border-top-color:var(--line-ink);}
.sec-no{
  font-family:var(--mono);
  font-size:clamp(13px,1.1vw,15px);
  letter-spacing:.2em;
  color:var(--bone-58);
  font-weight:500;
  padding-top:.35em;
}
.spread .sec-no,.spread-scope .sec-no{color:var(--ink-46);}
.sec-titles{max-width:24ch;}
.sec-head h2{font-size:var(--t-h2);}
.sec-head .kicker{margin-bottom:18px;}
.sec-head em{font-style:italic;color:var(--ember);}
.spread .sec-head em{color:var(--oxblood);}
/* User directive: heading emphasis reads uniform - no italic, no colour shift, no weight jump */
h1 em,h2 em,h3 em,h4 em{font-style:normal !important;color:inherit !important;font-weight:inherit !important;}

.lead{
  font-size:var(--t-lead);
  line-height:1.42;
  color:var(--bone-78);
  font-weight:400;
  max-width:var(--measure);
  letter-spacing:-.005em;
}
.spread .lead,.spread-scope .lead{color:var(--ink-70);}
.body-copy{font-size:var(--t-body);color:var(--bone-78);max-width:var(--measure);}
.spread .body-copy,.spread-scope .body-copy{color:var(--ink-70);}
.body-copy + .body-copy{margin-top:1.1em;}

/* ---- section opener: standfirst deck fills the head's right column ---- */
.sec-head.has-deck{
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:start;
  column-gap:clamp(20px,3.4vw,56px);
}
.sec-head.has-deck .sec-titles{align-self:start;}
.sec-deck{
  align-self:end;            /* settle at the foot of the tall headline */
  max-width:40ch;
  display:flex;flex-direction:column;gap:16px;
}
.sec-deck .lead{margin:0;max-width:none;}
.deck-meta{
  font-family:var(--mono);
  font-size:clamp(11px,.85vw,12.5px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone-58);
  display:flex;align-items:center;gap:12px;
  margin:0;
}
.spread .deck-meta,.spread-scope .deck-meta{color:var(--ink-46);}

/* Section openers with a side deck stack to one column before the two narrow
   columns crowd and the deck overflows into the grid below. */
@media(max-width:820px){
  .sec-head.has-deck{grid-template-columns:1fr;row-gap:clamp(20px,5vw,32px);}
  .sec-head.has-deck .sec-titles{max-width:none;}
  .sec-head.has-deck .sec-deck{align-self:start;max-width:54ch;}
}

/* ---- buttons, full state sets ---- */
.btn{
  --b-bg:var(--ember);
  --b-fg:var(--char-deep);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:0 26px;
  background:var(--b-bg);color:var(--b-fg);
  font-family:var(--grotesk);font-size:14px;font-weight:640;
  letter-spacing:.02em;
  border-radius:3px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform var(--t-fast) var(--ease),
             background var(--t-ui) var(--ease),
             box-shadow var(--t-ui) var(--ease),
             opacity var(--t-ui) var(--ease);
  text-align:center;
}
.btn:hover{background:var(--ember-bright);transform:translateY(-1px);
  box-shadow:0 8px 24px -12px var(--ember-soft);}
.btn:active{transform:translateY(0) scale(.985);}
.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;
  background:var(--ember);
}
.btn-ghost{
  --b-bg:transparent;--b-fg:var(--bone);
  border-color:var(--line);
}
.btn-ghost:hover{background:oklch(0.93 0.018 80 / .06);border-color:var(--bone-38);
  box-shadow:none;color:var(--bone);}
.spread .btn-ghost,.spread-scope .btn-ghost{--b-fg:var(--ink);border-color:var(--line-ink);}
.spread .btn-ghost:hover,.spread-scope .btn-ghost:hover{
  background:oklch(0.22 0.016 44 / .05);border-color:var(--ink-46);color:var(--ink);}
.btn-ox{--b-bg:var(--oxblood);--b-fg:var(--bone);}
.btn-ox:hover{background:var(--oxblood-bright);box-shadow:0 8px 24px -12px oklch(0.40 0.110 22 / .5);}

/* text link with animated rule */
.tlink{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember);font-weight:500;
  padding-bottom:3px;position:relative;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(.35);transform-origin:left;
  transition:transform var(--t-ui) var(--ease);opacity:.7;
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1);opacity:1;}
.tlink svg{width:14px;height:14px;transition:transform var(--t-ui) var(--ease);}
.tlink:hover svg{transform:translateX(3px);}
.spread .tlink,.spread-scope .tlink{color:var(--oxblood);}

/* ---- veg / non-veg markers (Indian convention) ---- */
.mark{
  width:15px;height:15px;flex:0 0 auto;
  border:1.5px solid currentColor;border-radius:2px;
  display:inline-grid;place-items:center;
}
.mark::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.mark-veg{color:var(--veg);}
.mark-nonveg{color:var(--nonveg);}
.mark-sq{ /* square dot variant */
  width:15px;height:15px;border:1.5px solid currentColor;border-radius:2px;
  display:inline-block;position:relative;flex:0 0 auto;
}
.mark-sq::before{content:"";position:absolute;inset:3px;background:currentColor;border-radius:1px;}

/* ---- nutritionist seal (restrained, not a sticker) ---- */
.seal{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ember);
  border:1px solid var(--ember-soft);
  border-radius:999px;padding:4px 11px 4px 9px;
  white-space:nowrap;line-height:1;max-width:100%;
}
.seal svg{width:13px;height:13px;flex:0 0 auto;}
.spread .seal,.spread-scope .seal{color:var(--oxblood);border-color:oklch(0.40 0.110 22 / .4);}
.seal-mini{ /* per-dish, tighter */
  gap:5px;padding:3px 8px;font-size:9.5px;border-radius:999px;
}

/* pill / tag */
.tag{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-58);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px;
}
.spread .tag,.spread-scope .tag{color:var(--ink-46);border-color:var(--line-ink);}

/* ============ 4. HEADER (editorial masthead) ============ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:oklch(0.18 0.012 40 / .72);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:background var(--t-slow) var(--ease),
             border-color var(--t-slow) var(--ease);
}
.site-header[data-scrolled="true"]{
  background:oklch(0.16 0.012 40 / .92);
  border-bottom-color:var(--line);
}
.sh-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:14px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{
  display:inline-flex;flex-direction:column;line-height:1;
}
.brand b{
  font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em;
  color:var(--bone);font-optical-sizing:auto;
}
.brand b em{font-style:italic;color:var(--ember);}
.brand-logo{height:54px;width:auto;display:block;}
.brand small{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-58);margin-top:5px;
}
.sh-nav{display:flex;align-items:center;gap:10px;}
.order-group{display:flex;align-items:center;gap:6px;
  padding-right:12px;margin-right:4px;border-right:1px solid var(--line);}
.order-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-58);margin-right:4px;}
.order-btn{
  min-height:38px;padding:0 14px;border-radius:3px;
  border:1px solid var(--line);background:transparent;color:var(--bone);
  font-size:13px;font-weight:600;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:7px;
  transition:border-color var(--t-ui) var(--ease),
             background var(--t-ui) var(--ease),transform var(--t-fast) var(--ease);
}
.order-btn:hover{border-color:var(--ember);background:oklch(0.62 0.135 48 / .1);transform:translateY(-1px);}
.order-btn:active{transform:translateY(0);}
.order-btn svg{width:14px;height:14px;}
.sh-nav .btn{min-height:38px;padding:0 18px;font-size:13px;}
.sh-link{
  font-size:13px;font-weight:560;color:var(--bone-78);padding:8px 4px;
  letter-spacing:.01em;position:relative;
  transition:color var(--t-ui) var(--ease);
}
.sh-link:hover{color:var(--bone);}
@media(max-width:880px){
  .order-lbl,.brand small{display:none;}
}
@media(max-width:600px){
  .order-group{display:none;} /* order links live in footer + below hero on mobile */
}

/* ============ 5. HERO (full-bleed cinematic open) ============ */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--char-deep);
  isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;}
.hero-media video,.hero-fallback{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Ken Burns living treatment of steak.png when no hero.mp4 is present.
   To go live: drop assets/hero.mp4 in place; site.js detects the <source>
   load and hides this fallback. */
.hero-fallback{
  position:absolute;inset:0;
  background:center/cover no-repeat var(--char-deep);
  animation:kenburns 26s var(--ease-cine) infinite alternate;
  transform-origin:60% 40%;
}
@keyframes kenburns{
  from{transform:scale(1.04) translate3d(0,0,0);}
  to{transform:scale(1.18) translate3d(-2.5%,-1.5%,0);}
}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    /* veil at the very top so the light nav text stays legible */
    linear-gradient(180deg, oklch(0.10 0.010 38 / .45) 0%, oklch(0.10 0.010 38 / 0) 16%),
    /* floor at the bottom for the sub-line and CTAs */
    linear-gradient(0deg, oklch(0.07 0.010 38 / .58) 0%, oklch(0.07 0.010 38 / 0) 30%),
    /* primary: strong dark behind the LEFT text column, fading to the bright dish on the right */
    linear-gradient(100deg,
      oklch(0.07 0.010 38 / .94) 0%,
      oklch(0.07 0.010 38 / .88) 34%,
      oklch(0.07 0.010 38 / .62) 56%,
      oklch(0.07 0.010 38 / .18) 74%,
      oklch(0.07 0.010 38 / 0) 88%);
}
.hero-inner{
  position:relative;z-index:1;width:100%;
  max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad-x) clamp(56px,9vh,108px);
}
.hero-kicker{margin-bottom:24px;color:var(--bone);}
.hero h1{
  font-size:var(--t-masthead);
  font-weight:560;
  letter-spacing:-.02em;
  max-width:15ch;
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;
  text-shadow:0 2px 18px oklch(0.06 0.010 38 / .85), 0 1px 2px oklch(0.06 0.010 38 / .7);
}
.hero h1 em{font-style:italic;font-weight:540;color:var(--ember);}
.hero-foot{
  margin-top:clamp(26px,4vh,42px);
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;
  border-top:1px solid var(--line);padding-top:24px;
}
.hero-sub{font-size:var(--t-body);color:var(--bone-78);max-width:42ch;}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:12px;}
.scroll-cue{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-58);
}
.scroll-cue svg{width:14px;height:14px;animation:nudge 2.4s var(--ease) infinite;}
@keyframes nudge{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}

/* ---- live fire: a canvas ember field (site.js initHeroFire) sits between the
        hero image and the headline; the ::after is a CSS-only warm ambient glow
        so the open still breathes if JS/canvas is unavailable. screen-blended. ---- */
.hero-fire{
  position:absolute;inset:0;z-index:0;display:block;pointer-events:none;
  opacity:0;transition:opacity 1.4s var(--ease-cine);mix-blend-mode:screen;
}
.hero-fire.lit{opacity:1;}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:0;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 126%, oklch(0.62 0.135 48 / .26), oklch(0.40 0.110 22 / .07) 44%, transparent 70%);
  mix-blend-mode:screen;animation:emberbreath 7.5s var(--ease-cine) infinite alternate;
}
@keyframes emberbreath{from{opacity:.58;}to{opacity:1;}}
@media(prefers-reduced-motion:reduce){
  .hero-fire{transition:none;opacity:1;}
  .hero::after{animation:none;opacity:.82;}
}

/* mobile order shelf below hero */
.order-shelf{
  display:none;gap:10px;padding:16px var(--pad-x);
  border-bottom:1px solid var(--line);background:var(--charcoal-2);
}
.order-shelf .order-btn{flex:1;justify-content:center;}
@media(max-width:600px){.order-shelf{display:flex;}}

/* ============ 6. SURFACES (dark frame + cream spread) ============ */
.section{padding-top:var(--pad-y);padding-bottom:var(--pad-y);position:relative;}

/* full-bleed cinematic frame - dark, immersive, slow */
.cine{
  position:relative;overflow:hidden;background:var(--char-deep);
  min-height:88svh;display:flex;align-items:center;isolation:isolate;
}
.cine-media{position:absolute;inset:0;z-index:-2;overflow:hidden;}
.cine-media .kb{
  position:absolute;inset:0;background:center/cover no-repeat;
  animation:kenburns 30s var(--ease-cine) infinite alternate;
}
.cine-scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, oklch(0.13 0.010 38 / .88) 0%, oklch(0.13 0.010 38 / .5) 48%, oklch(0.13 0.010 38 / .2) 100%);
}
.cine-inner{
  position:relative;z-index:1;width:100%;max-width:var(--maxw);
  margin:0 auto;padding:clamp(60px,10vh,120px) var(--pad-x);
}
.cine h2{font-size:var(--t-h2);max-width:18ch;}
.cine h2 em{font-style:italic;color:var(--ember);}
.cine .lead{margin-top:24px;}
.cine-statement{
  font-family:var(--serif);font-weight:340;
  font-size:clamp(30px,4.4vw,62px);line-height:1.08;letter-spacing:-.015em;
  max-width:18ch;font-optical-sizing:auto;color:var(--bone);
}
.cine-statement em{font-style:italic;color:var(--ember);font-weight:520;}

/* CREAM editorial spread - the light, magazine surface (menu + anatomy) */
.spread{
  background:var(--cream);color:var(--ink);
  position:relative;
}
.spread h1,.spread h2,.spread h3,.spread h4{color:var(--ink);}
.spread .section-pad{padding-top:var(--pad-y);padding-bottom:var(--pad-y);}
/* notch transitions between dark and cream */
.notch-top{height:0;}
.spread::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--ember);opacity:.5;
}

/* editorial asymmetric grid helper */
.grid-ed{display:grid;gap:var(--gutter);grid-template-columns:repeat(12,1fr);}
.col-7{grid-column:span 7;}
.col-5{grid-column:span 5;}
.col-6{grid-column:span 6;}
.col-8{grid-column:span 8;}
.col-4{grid-column:span 4;}
@media(max-width:880px){
  .col-7,.col-5,.col-6,.col-8,.col-4{grid-column:1 / -1;}
}

/* WHY block - editorial 3-up with hairlines */
.why-grid{display:grid;gap:var(--gutter);
  grid-template-columns:repeat(3,1fr);margin-top:8px;}
.why-item{padding-top:22px;border-top:1px solid var(--line);}
.why-item .wn{font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  color:var(--ember);display:block;margin-bottom:14px;}
.why-item h3{font-size:var(--t-h4);margin-bottom:10px;}
.why-item p{font-size:var(--t-small);color:var(--bone-78);}
@media(max-width:760px){.why-grid{grid-template-columns:1fr;}}

/* nutritionist trust block (works on both surfaces via scope class) */
.trust{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);
  align-items:start;padding:clamp(26px,3.4vw,40px);
  border:1px solid var(--line);border-radius:5px;
  background:oklch(0.22 0.014 42 / .5);
}
.trust-seal{
  width:clamp(64px,7vw,88px);height:clamp(64px,7vw,88px);flex:0 0 auto;
  color:var(--ember);
}
.trust h3{font-size:var(--t-h3);margin-bottom:12px;}
.trust h3 em{font-style:italic;color:var(--ember);}
.trust p{font-size:var(--t-body);color:var(--bone-78);max-width:54ch;}
.trust .seal{margin-top:18px;}
.spread .trust,.spread-scope .trust{
  background:var(--cream-2);border-color:var(--line-ink);
}
.spread-scope .trust-seal{color:var(--oxblood);}
@media(max-width:600px){.trust{grid-template-columns:1fr;}}

/* ============ 7. ANATOMY (signature interactive) ============ */
/* Presented as an editorial anatomy diagram on the CREAM spread.
   Left: the interactive cross-section + controls. Right: aria-live
   side panel (character / how to eat / matching dish). */
.anatomy{
  display:grid;gap:clamp(28px,4vw,64px);
  grid-template-columns:1.15fr 0.85fr;align-items:start;
}
@media(max-width:980px){.anatomy{grid-template-columns:1fr;}}

.an-stage{
  position:relative;
  border:1px solid var(--line-ink);border-radius:6px;
  background:
    radial-gradient(120% 80% at 50% 36%, var(--cream-2), var(--cream) 70%);
  padding:clamp(20px,3vw,38px);
  overflow:hidden;
}
/* faint editorial grid backdrop behind the diagram */
.an-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-ink-soft) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line-ink-soft) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(120% 90% at 50% 40%,#000,transparent 78%);
}
.an-figure{position:relative;z-index:1;aspect-ratio:1/1;width:100%;}
.an-figure svg{width:100%;height:100%;overflow:visible;}

/* live recolor of the interior - JS drives --done-core / --done-edge */
.an-interior{transition:fill var(--t-slow) var(--ease-cine);}
.an-marbling{transition:opacity var(--t-slow) var(--ease-cine);}

/* hairline callout labels */
.an-callout text{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--ink-70);
}
.an-callout line,.an-callout circle{stroke:var(--ink-46);stroke-width:1;}
.an-callout circle{fill:var(--oxblood);stroke:none;}

/* doneness marker badge floating on the figure */
.an-recmark{
  position:absolute;z-index:2;top:14px;right:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--oxblood);
  border:1px solid oklch(0.40 0.110 22 / .4);background:var(--cream);
  padding:5px 10px;border-radius:999px;
}

/* ---- doneness stepper control ---- */
.an-controls{margin-top:clamp(20px,2.6vw,30px);position:relative;z-index:2;}
.ctl-label{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:12px;
}
.ctl-label .l{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-46);}
.ctl-label .v{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink);}
.ctl-label .v b{font-style:normal;font-weight:600;}

.stepper{
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
}
.step-btn{
  width:44px;height:44px;border-radius:4px;
  border:1px solid var(--line-ink);background:var(--cream-2);color:var(--ink);
  display:grid;place-items:center;
  transition:border-color var(--t-ui) var(--ease),background var(--t-ui) var(--ease),
             transform var(--t-fast) var(--ease);
}
.step-btn:hover{border-color:var(--oxblood);background:var(--cream);transform:translateY(-1px);}
.step-btn:active{transform:translateY(0) scale(.96);}
.step-btn:disabled{opacity:.38;cursor:not-allowed;transform:none;}
.step-btn svg{width:18px;height:18px;}

/* the 5-stop track */
.done-track{
  position:relative;height:44px;display:flex;align-items:center;
  padding:0 4px;
}
.done-stops{display:flex;width:100%;justify-content:space-between;position:relative;z-index:1;}
.done-stops::before{
  content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,
    oklch(0.50 0.150 22),   /* rare red */
    oklch(0.58 0.110 28),
    oklch(0.55 0.075 38),
    oklch(0.45 0.045 50),
    oklch(0.36 0.020 60));  /* well done brown */
  border-radius:2px;opacity:.85;
}
.done-stop{
  width:18px;height:18px;border-radius:50%;
  border:2px solid var(--ink-46);background:var(--cream);
  position:relative;z-index:1;
  transition:transform var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease),
             background var(--t-ui) var(--ease);
}
.done-stop[aria-current="true"]{
  border-color:var(--oxblood);background:var(--oxblood);transform:scale(1.34);
}
.done-stop:hover{border-color:var(--oxblood);}

/* ---- cut selector ---- */
.an-cuts{margin-top:26px;}
.an-cuts .ctl-label{margin-bottom:10px;}
.cut-list{display:flex;flex-wrap:wrap;gap:8px;}
.cut-btn{
  min-height:40px;padding:0 15px;border-radius:3px;
  border:1px solid var(--line-ink);background:transparent;color:var(--ink-70);
  font-size:13px;font-weight:560;letter-spacing:.01em;
  transition:border-color var(--t-ui) var(--ease),color var(--t-ui) var(--ease),
             background var(--t-ui) var(--ease),transform var(--t-fast) var(--ease);
}
.cut-btn:hover{border-color:var(--oxblood);color:var(--ink);transform:translateY(-1px);}
.cut-btn:active{transform:translateY(0);}
.cut-btn[aria-pressed="true"]{
  background:var(--oxblood);color:var(--bone);border-color:var(--oxblood);
}

/* ---- side panel (aria-live) ---- */
.an-panel{
  border-top:2px solid var(--ink);padding-top:22px;
  position:sticky;top:96px;
}
@media(max-width:980px){.an-panel{position:static;}}
.an-panel .pn{font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--oxblood);margin-bottom:14px;}
.an-panel h3{font-size:var(--t-h3);margin-bottom:6px;}
.an-panel .an-sub{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-46);margin-bottom:18px;}
.an-rows{display:grid;gap:0;margin:18px 0;}
.an-row{display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:13px 0;border-top:1px solid var(--line-ink);}
.an-row dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-46);padding-top:2px;}
.an-row dd{font-size:var(--t-small);color:var(--ink-70);line-height:1.5;}
.an-dish{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:18px;padding:16px 18px;border-radius:5px;
  background:var(--cream-2);border:1px solid var(--line-ink);
  transition:border-color var(--t-ui) var(--ease),transform var(--t-fast) var(--ease);
}
.an-dish:hover{border-color:var(--oxblood);transform:translateY(-1px);}
.an-dish .dn{font-family:var(--serif);font-size:19px;color:var(--ink);}
.an-dish .dp{font-family:var(--mono);font-size:13px;color:var(--oxblood);letter-spacing:.04em;}
.an-dish .da{font-size:11px;color:var(--ink-46);font-family:var(--mono);
  letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:6px;}
.an-dish .da svg{width:13px;height:13px;}

/* how to choose / eat micro notes */
.an-notes{display:grid;gap:14px;margin-top:24px;grid-template-columns:1fr 1fr;}
.an-note{padding-top:16px;border-top:1px solid var(--line-ink);}
.an-note b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--oxblood);margin-bottom:8px;font-weight:600;}
.an-note p{font-size:13px;color:var(--ink-70);}
@media(max-width:560px){.an-notes{grid-template-columns:1fr;}}

/* ============ 8. MENU (dish list + preview) ============ */
.menu-cats{display:grid;gap:clamp(34px,4vw,56px);}
.menu-cat > .cat-head{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
  padding-bottom:16px;border-bottom:2px solid var(--ink);margin-bottom:6px;
}
.cat-head h3{font-size:var(--t-h3);}
.cat-head .cat-no{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--oxblood);}
.cat-head .cat-meta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-46);}

.dish{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--line-ink);
  scroll-margin-top:96px;
}
.dish .d-mark{padding-top:5px;}
.dish .d-main{min-width:0;}
.dish .d-name{font-family:var(--serif);font-size:clamp(19px,2vw,23px);
  color:var(--ink);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.dish .d-flag{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--oxblood);
  border:1px solid oklch(0.40 0.110 22 / .35);border-radius:999px;padding:2px 8px;}
.dish .d-meta{display:flex;align-items:center;gap:14px;margin-top:7px;flex-wrap:wrap;}
.dish .d-kcal{font-family:var(--mono);font-size:11px;color:var(--ink-46);letter-spacing:.06em;}
.dish .d-price{font-family:var(--mono);font-size:clamp(15px,1.5vw,17px);
  color:var(--ink);white-space:nowrap;letter-spacing:.02em;}
.dish .d-price .cur{color:var(--ink-46);font-size:.78em;}

/* on the dark home preview, dishes invert */
.preview-list .dish{border-bottom-color:var(--line);}
.preview-list .dish .d-name{color:var(--bone);}
.preview-list .dish .d-kcal{color:var(--bone-58);}
.preview-list .dish .d-price{color:var(--bone);}
.preview-list .cat-head{border-bottom-color:var(--bone);}

.steak-note{font-family:var(--mono);font-size:11px;color:var(--ink-46);
  letter-spacing:.04em;margin-top:14px;display:flex;align-items:center;gap:8px;}
.spread-scope .steak-note,.preview-list .steak-note{color:var(--bone-58);}

/* ============ 9. BRANCHES (editorial register) ============ */
/* "Where the grill lives" plays a steak-grill video behind a dark scrim */
#branches{position:relative;overflow:hidden;isolation:isolate;}
.branch-bg{position:absolute;inset:0;z-index:-2;background:var(--char-deep);}
.branch-bg video{width:100%;height:100%;object-fit:cover;display:block;}
.branch-scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, oklch(0.09 0.012 40 / .82) 0%, oklch(0.09 0.012 40 / .76) 42%, oklch(0.11 0.034 46 / .80) 100%),
    radial-gradient(130% 120% at 14% 28%, oklch(0.09 0.012 40 / .55), transparent 60%);
}
#branches > .wrap{position:relative;z-index:1;text-shadow:0 1px 14px oklch(0.07 0.012 40 / .6);}
@media(prefers-reduced-motion:reduce){ .branch-bg video{display:none;} }
.branch-featured{
  display:grid;grid-template-columns:1.3fr 1fr;gap:var(--gutter);
  align-items:end;padding-bottom:clamp(28px,3.4vw,44px);
  border-bottom:2px solid var(--line);margin-bottom:clamp(28px,3.4vw,44px);
}
.bf-tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;}
.branch-featured h3{font-size:clamp(34px,4.6vw,64px);line-height:1.02;}
.branch-featured h3 em{font-style:italic;color:var(--ember);}
.bf-addr{font-size:var(--t-body);color:var(--bone-78);margin-top:14px;max-width:36ch;}
.bf-side{font-size:var(--t-small);color:var(--bone-78);}
.bf-side .seal{margin-bottom:14px;}

.branch-list{display:grid;gap:0;}
.branch-row{
  display:grid;grid-template-columns:1fr auto;gap:clamp(14px,2vw,30px);
  align-items:baseline;padding:20px 0;border-top:1px solid var(--line);
  transition:padding-left var(--t-ui) var(--ease);
}
.branch-row:hover{padding-left:8px;}
.branch-row .br-no{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--bone-58);}
.branch-row .br-name{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);color:var(--bone);}
.branch-row .br-area{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--bone-58);}
.branch-coda{
  margin-top:clamp(26px,3.4vw,42px);padding:clamp(22px,3vw,34px);
  border:1px dashed var(--ember-soft);border-radius:5px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.branch-coda .bc-l{display:flex;flex-direction:column;gap:6px;}
.branch-coda .kicker{margin-bottom:4px;}
.branch-coda h4{font-size:var(--t-h4);color:var(--bone);}
.branch-coda p{font-size:var(--t-small);color:var(--bone-78);}
@media(max-width:760px){.branch-featured{grid-template-columns:1fr;}}

/* real address + maps wiring on branches */
.bf-loc{font-size:var(--t-small);color:var(--bone-78);margin-top:14px;max-width:34ch;line-height:1.5;}
.bf-hours{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-58);margin-top:8px;}
.br-main{display:flex;flex-direction:column;gap:5px;min-width:0;}
.br-addr{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--bone-58);
  line-height:1.45;max-width:46ch;}
.br-map{
  display:inline-flex;align-items:center;gap:6px;align-self:center;white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember);text-decoration:none;transition:color var(--t-ui) var(--ease),gap var(--t-ui) var(--ease);
}
.br-map svg{width:13px;height:13px;}
.br-map:hover{color:var(--bone);gap:9px;}
.branch-featured .br-map{margin-top:16px;align-self:start;}
@media(max-width:760px){
  .branch-row{grid-template-columns:1fr auto;row-gap:8px;}
}

/* ============ TESTIMONIALS ============ */
.quotes{display:grid;gap:var(--gutter);grid-template-columns:repeat(3,1fr);margin-top:8px;}
.quote{padding-top:24px;border-top:1px solid var(--line);}
.quote blockquote{font-family:var(--serif);font-style:italic;
  font-size:clamp(19px,1.9vw,23px);line-height:1.32;color:var(--bone);margin-bottom:16px;}
.quote figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-58);}
@media(max-width:760px){.quotes{grid-template-columns:1fr;}}

/* ============ 10. RESERVE (inline booking form) ============ */
.reserve-grid{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:clamp(30px,4vw,64px);align-items:start;}
.reserve-grid>*{min-width:0;}
@media(max-width:880px){.reserve-grid{grid-template-columns:minmax(0,1fr);}}
.reserve-aside .lead{margin-bottom:24px;}
.reserve-aside .seal{margin-bottom:16px;white-space:normal;border-radius:14px;text-align:left;}

.form{display:grid;gap:18px;}
.frow{display:grid;gap:18px;grid-template-columns:1fr 1fr;}
@media(max-width:560px){.frow{grid-template-columns:1fr;}}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-78);}
.field .req{color:var(--ember);}
.field input,.field select,.field textarea{
  min-height:46px;padding:11px 14px;
  background:var(--charcoal-2);color:var(--bone);
  border:1px solid var(--field-border);border-radius:4px;
  font-size:15px;
  transition:border-color var(--t-ui) var(--ease),background var(--t-ui) var(--ease);
}
.field textarea{min-height:92px;resize:vertical;line-height:1.5;}
.field input::placeholder,.field textarea::placeholder{color:var(--bone-58);}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--bone-38);}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  border-color:var(--ember);outline-offset:1px;background:var(--charcoal-3);}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{border-color:var(--err-dark);}
.field-err{font-size:12px;color:var(--err-dark);min-height:0;
  display:none;align-items:center;gap:6px;}
.field[data-invalid="true"] .field-err{display:flex;}
.field-err svg{width:13px;height:13px;flex:0 0 auto;}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px;}
.form-note{font-size:12px;color:var(--bone-58);max-width:40ch;}

/* confirmation card (inline, not a modal) */
.confirm{
  border:1px solid var(--ember-soft);border-radius:6px;padding:clamp(24px,3vw,38px);
  background:oklch(0.22 0.014 42 / .6);
}
.confirm[hidden]{display:none;}
.confirm .ok-badge{display:inline-flex;align-items:center;gap:9px;color:var(--ok);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;}
.confirm .ok-badge svg{width:16px;height:16px;}
.confirm h3{font-size:var(--t-h3);margin-bottom:10px;}
.confirm h3 em{font-style:italic;color:var(--ember);}
.confirm dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:18px 0;
  font-size:14px;}
.confirm dt{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-58);}
.confirm dd{color:var(--bone);}
.confirm-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;}

/* ============ 9b. CAREERS (editorial register) ============ */
/* A compact cinematic open for sub-pages, then the open-roles register:
   a featured lead role + a numbered list of further roles (not a uniform
   card grid), the "what we look for" trio, and an application form. */
.subhero{
  position:relative;overflow:hidden;background:var(--char-deep);
  min-height:62svh;display:flex;align-items:flex-end;isolation:isolate;
}
.subhero .cine-media{position:absolute;inset:0;z-index:-2;overflow:hidden;}
.subhero .cine-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg, oklch(0.13 0.010 38 / .3) 0%, oklch(0.13 0.010 38 / .14) 40%, oklch(0.13 0.010 38 / .82) 100%),
    linear-gradient(90deg, oklch(0.13 0.010 38 / .6) 0%, oklch(0.13 0.010 38 / 0) 58%);
}
.subhero-inner{
  position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad-x) clamp(48px,8vh,92px);
}
.subhero .kicker{margin-bottom:22px;color:var(--bone);}
.subhero h1{
  font-size:clamp(46px,8vw,116px);font-weight:340;letter-spacing:-.02em;max-width:16ch;
  font-variation-settings:'opsz' 144,'SOFT' 0,'WONK' 0;
}
.subhero h1 em{font-style:italic;font-weight:540;color:var(--ember);}
.subhero-sub{
  margin-top:clamp(22px,3.4vh,36px);border-top:1px solid var(--line);padding-top:22px;
  font-size:var(--t-body);color:var(--bone-78);max-width:52ch;
}

/* featured lead role - the one we are hiring loudest for */
.role-featured{
  display:grid;grid-template-columns:1.35fr 1fr;gap:var(--gutter);align-items:start;
  padding:clamp(26px,3.4vw,42px);
  border:1px solid var(--ember-soft);border-radius:6px;
  background:oklch(0.22 0.014 42 / .5);
}
.role-featured .rf-tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;}
.role-featured h3{font-size:clamp(30px,4vw,52px);line-height:1.04;}
.role-featured h3 em{font-style:italic;color:var(--ember);}
.role-featured .rf-meta{
  display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:16px;
}
.role-featured .rf-body{font-size:var(--t-body);color:var(--bone-78);margin-top:16px;max-width:46ch;}
.role-featured .rf-side{display:flex;flex-direction:column;gap:14px;}
.role-featured .rf-side h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember);font-weight:500;}
.role-featured .rf-list{display:grid;gap:9px;}
.role-featured .rf-list li{font-size:var(--t-small);color:var(--bone-78);
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;}
.role-featured .rf-list li svg{width:15px;height:15px;color:var(--ember);margin-top:3px;flex:0 0 auto;}
.role-featured .rf-cta{margin-top:6px;}
@media(max-width:760px){.role-featured{grid-template-columns:1fr;}}

/* numbered register of further roles - editorial rows, not a grid */
.role-list{display:grid;gap:0;margin-top:clamp(26px,3.4vw,44px);}
.role-row{
  display:grid;grid-template-columns:1fr auto auto;
  gap:clamp(14px,2.4vw,32px);align-items:center;
  padding:clamp(20px,2.6vw,30px) 0;border-top:1px solid var(--line);
  transition:padding-left var(--t-ui) var(--ease);
}
.role-row:last-child{border-bottom:1px solid var(--line);}
.role-row:hover,.role-row:focus-within{padding-left:8px;}
.role-row .rr-no{font-family:var(--mono);font-size:13px;letter-spacing:.16em;color:var(--bone-58);}
.role-row .rr-main{min-width:0;}
.role-row .rr-name{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);color:var(--bone);line-height:1.06;}
.role-row .rr-desc{font-size:var(--t-small);color:var(--bone-78);margin-top:7px;max-width:52ch;}
.role-row .rr-type{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-58);white-space:nowrap;}
.role-row .rr-apply{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);
  white-space:nowrap;padding:6px 2px;position:relative;
  transition:color var(--t-ui) var(--ease);
}
.role-row .rr-apply svg{width:14px;height:14px;transition:transform var(--t-ui) var(--ease);}
.role-row .rr-apply:hover svg,.role-row .rr-apply:focus-visible svg{transform:translateX(3px);}
@media(max-width:760px){
  .role-row{grid-template-columns:1fr;gap:6px 16px;}
  .role-row .rr-type{grid-column:1;}
  .role-row .rr-apply{grid-column:1;justify-self:start;}
}

/* "what we look for" trio - editorial hairline cards */
.look-grid{display:grid;gap:var(--gutter);grid-template-columns:repeat(3,1fr);margin-top:8px;}
.look-item{padding-top:22px;border-top:1px solid var(--line);}
.look-item .ln{font-family:var(--mono);font-size:12px;letter-spacing:.18em;
  color:var(--ember);display:block;margin-bottom:14px;}
.look-item h3{font-size:var(--t-h4);margin-bottom:10px;}
.look-item p{font-size:var(--t-small);color:var(--bone-78);}
@media(max-width:760px){.look-grid{grid-template-columns:1fr;}}

/* ============ 11. FOOTER ============ */
.site-footer{
  background:var(--char-deep);border-top:1px solid var(--line);
  padding:clamp(56px,8vh,96px) 0 40px;
}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,60px);}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:36px;}}
.foot-brand b{font-family:var(--serif);font-size:30px;color:var(--bone);}
.foot-logo{height:84px;width:auto;display:block;}
.foot-brand b em{font-style:italic;color:var(--ember);}
.foot-brand p{font-size:var(--t-small);color:var(--bone-58);margin-top:12px;max-width:32ch;}
.foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ember);margin-bottom:16px;font-weight:500;}
.foot-col ul{display:grid;gap:11px;}
.foot-col a,.foot-col span{font-size:14px;color:var(--bone-78);
  transition:color var(--t-ui) var(--ease);}
.foot-col a:hover{color:var(--bone);}
.foot-outlet{display:flex;flex-direction:column;}
.foot-outlet b{color:var(--bone);font-weight:600;font-size:14px;}
.foot-outlet small{font-size:11px;color:var(--bone-58);font-family:var(--mono);letter-spacing:.06em;}
.foot-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(40px,6vh,68px);padding-top:24px;border-top:1px solid var(--line);
}
.foot-bar small,.foot-bar a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--bone-58);}
.foot-bar a:hover{color:var(--ember);}
.staff-link{display:inline-flex;align-items:center;gap:7px;}
.staff-link svg{width:13px;height:13px;}
.dot-sep{padding:0 8px;color:var(--bone-38);}

/* studio credit */
.gw-credit{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;padding:20px 0 6px;}
.gw-credit__a{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:inherit;opacity:.62;transition:opacity .3s;text-decoration:none;}
.gw-credit__a:hover{opacity:1;}
.gw-credit__nb{display:block;border-radius:6px;}
.gw-credit__gw{display:block;}
.gw-credit__dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.35;}

/* ============ 12. DIALOGS (staff passcode + PMS) ============ */
dialog{
  border:none;padding:0;color:var(--bone);background:transparent;max-width:min(94vw,860px);
}
dialog::backdrop{background:oklch(0.10 0.010 38 / .74);backdrop-filter:blur(4px);}
.dlg{
  background:var(--charcoal-2);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 30px 80px -30px oklch(0.05 0 0 / .8);overflow:hidden;
}
.dlg-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;border-bottom:1px solid var(--line);
}
.dlg-head .kicker{margin:0;}
.dlg-head h3{font-size:var(--t-h4);}
.dlg-close{
  width:40px;height:40px;border-radius:4px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--bone-78);
  transition:border-color var(--t-ui) var(--ease),color var(--t-ui) var(--ease);
}
.dlg-close:hover{border-color:var(--bone-38);color:var(--bone);}
.dlg-close svg{width:18px;height:18px;}
.dlg-body{padding:24px;max-height:72vh;overflow:auto;}

/* passcode */
.pass-form{display:grid;gap:12px;max-width:360px;}
.pass-form label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-78);}
.pass-form input{
  min-height:46px;padding:11px 14px;background:var(--charcoal);color:var(--bone);
  border:1px solid var(--line);border-radius:4px;font-size:15px;letter-spacing:.1em;
  transition:border-color var(--t-ui) var(--ease);
}
.pass-form input:hover{border-color:var(--bone-38);}
.pass-form input:focus-visible{border-color:var(--ember);}
.pass-form .field-err{display:none;margin-top:-4px;}
.pass-form[data-invalid="true"] input{border-color:var(--err-dark);}
.pass-form[data-invalid="true"] .field-err{display:flex;}
.pass-form .btn{margin-top:4px;}

/* PMS booking list */
.pms-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:20px;}
.pms-toolbar .cnt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-58);}
.pms-list{display:grid;gap:14px;}
.pms-card{
  border:1px solid var(--line);border-radius:6px;padding:18px 20px;
  background:var(--charcoal);
}
.pms-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.pms-card .who{font-family:var(--serif);font-size:21px;color:var(--bone);}
.pms-card .meta{font-family:var(--mono);font-size:11px;color:var(--bone-58);
  letter-spacing:.06em;margin-top:6px;display:flex;flex-wrap:wrap;gap:10px;}
.pms-status{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--bone-58);}
.pms-status[data-s="confirmed"]{color:var(--ok);border-color:oklch(0.70 0.130 150 / .4);}
.pms-status[data-s="declined"]{color:var(--err-dark);border-color:oklch(0.74 0.130 35 / .4);}
.pms-card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.pms-card-actions .btn{min-height:40px;padding:0 16px;font-size:13px;}
.pms-empty{text-align:center;padding:48px 20px;color:var(--bone-58);}
.pms-empty svg{width:40px;height:40px;margin:0 auto 16px;color:var(--bone-38);}
.pms-note{font-size:12px;color:var(--bone-58);font-size:13px;}

/* ============ 13. REVEALS + RESPONSIVE + REDUCED-MOTION ============ */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--t-slow) var(--ease-cine),transform var(--t-slow) var(--ease-cine);}
.reveal.in{opacity:1;transform:none;}
.reveal-cine{opacity:0;transform:translateY(34px) scale(1.012);
  transition:opacity var(--t-cine) var(--ease-cine),transform var(--t-cine) var(--ease-cine);}
.reveal-cine.in{opacity:1;transform:none;}
/* stagger children 30-50ms */
[data-stagger] > *{opacity:0;transform:translateY(16px);
  transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);}
[data-stagger].in > *{opacity:1;transform:none;}
[data-stagger].in > *:nth-child(1){transition-delay:0ms;}
[data-stagger].in > *:nth-child(2){transition-delay:40ms;}
[data-stagger].in > *:nth-child(3){transition-delay:80ms;}
[data-stagger].in > *:nth-child(4){transition-delay:120ms;}
[data-stagger].in > *:nth-child(5){transition-delay:160ms;}
[data-stagger].in > *:nth-child(6){transition-delay:200ms;}

/* chapter progress (top reading bar) */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:101;
  background:transparent;pointer-events:none;}
.progress i{display:block;height:100%;width:0;background:var(--ember);
  transform-origin:left;transition:width 90ms linear;}

/* responsive type tightening */
@media(min-width:761px) and (max-width:1024px){
  .why-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:900px){
  .sec-head.has-deck{grid-template-columns:1fr;align-items:start;row-gap:14px;}
  .sec-deck{align-self:start;max-width:var(--measure);}
}
@media(max-width:768px){
  .sec-head{grid-template-columns:1fr;gap:6px;}
  .sec-no{padding-top:0;}
  .hero h1{max-width:13ch;}
}
@media(max-width:375px){
  :root{--pad-x:18px;}
}

/* utility */
.center{text-align:center;}
.mt-xl{margin-top:clamp(40px,6vh,72px);}
.mt-l{margin-top:clamp(26px,3.4vw,42px);}
.mt-m{margin-top:24px;}
.muted{color:var(--bone-58);}
.spread .muted,.spread-scope .muted{color:var(--ink-46);}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.todo{outline:1px dashed var(--ember-soft);outline-offset:3px;} /* CONTENT-TODO visual hint, harmless */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .hero-fallback,.cine-media .kb{animation:none !important;transform:scale(1.06);}
  .reveal,.reveal-cine,[data-stagger] > *{opacity:1 !important;transform:none !important;}
  .scroll-cue svg{animation:none !important;}
}

/* ============ 14. MOTION ENRICHMENT (tilt, parallax, heat-haze) ============ */
/* All driven by site.js and gated there on reduceMotion + pointer:fine.
   These rules only set up the 3D context and the haze surface; the transforms
   themselves are written inline per frame by JS. */

/* 3D tilt context. JS writes perspived rotateX/Y inline; here we only flatten
   the back-face and keep children on the same 3D plane so the tilt reads as a
   single solid card, not a stack of flat layers. */
.preview-list .dish{
  transform-style:preserve-3d;
  transition:box-shadow var(--t-ui) var(--ease);
  will-change:auto;
}
.preview-list .dish:hover{
  box-shadow:0 24px 60px -32px oklch(0.13 0.010 38 / .85);
}
.cine{transform-style:preserve-3d;}
.cine-inner{transform-style:preserve-3d;transition:transform var(--t-ui) var(--ease-cine);}

/* Heat-haze seam: a thin warm band straddling a dark -> cream notch. The
   canvas of rising ember motes is masked to fade at both edges so it reads as
   heat coming off the seam, not a hard rectangle. Sits above the spread
   background but under its content. */
.heat-haze{
  position:absolute;left:0;right:0;top:0;height:120px;
  transform:translateY(-60px);
  z-index:0;pointer-events:none;overflow:hidden;
  mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),
                     linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),
             linear-gradient(180deg,#000 0%,#000 55%,transparent 100%);
}
.heat-haze canvas{display:block;width:100%;height:100%;}
.spread{position:relative;} /* ensure the seam band positions against the spread */

@media(prefers-reduced-motion:reduce){
  /* JS already skips tilt/parallax under reduced motion; null any inline 3D
     context-related transitions and neutralise the haze band. */
  .cine-inner{transition:none !important;}
  .heat-haze{opacity:.5;}
}
@media(pointer:coarse){
  /* touch devices: no cursor tilt, drop the 3D context + hover shadow */
  .preview-list .dish,.cine,.cine-inner{transform-style:flat;}
  .preview-list .dish:hover{box-shadow:none;}
}

/* ============ 15. DISH THUMBNAILS (real PetPooja photography) ============ */
/* Dishes are normally a 3-col grid (marker / body / price). When a dish
   carries a real photo we slot a small rounded thumb between the marker and
   the body, keeping the editorial rhythm. Thumb sizes only, never heroes. */
.dish.has-thumb{grid-template-columns:auto auto 1fr auto;}
.d-thumb{
  width:clamp(58px,8vw,76px);height:clamp(58px,8vw,76px);
  flex:0 0 auto;border-radius:6px;overflow:hidden;
  border:1px solid var(--line-ink);
  background:var(--cream-2);
  align-self:center;
}
.d-thumb img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* on the dark home preview the thumb border + backing invert */
.preview-list .d-thumb{border-color:var(--line);background:var(--charcoal-3);}
@media(max-width:560px){
  .dish.has-thumb{grid-template-columns:auto auto 1fr;}
  .dish.has-thumb .d-price{grid-column:2 / -1;justify-self:start;margin-top:6px;}
}

/* small starter accent cards (garlic bread + spiced meat chunks). These fill
   the blank space under the preview steak list without stretching the photos. */
.preview-starters{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);
  margin-top:clamp(26px,3.2vw,40px);
}
.starter-card{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;
  padding:14px;border:1px solid var(--line);border-radius:7px;
  background:oklch(0.22 0.014 42 / .45);
}
.starter-card .sc-thumb{
  width:clamp(74px,10vw,96px);height:clamp(74px,10vw,96px);
  flex:0 0 auto;border-radius:6px;overflow:hidden;border:1px solid var(--line);
}
.starter-card .sc-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.starter-card .sc-cat{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ember);margin-bottom:6px;display:block;
}
.starter-card h4{font-family:var(--serif);font-size:clamp(18px,2vw,22px);
  color:var(--bone);font-weight:520;line-height:1.1;}
.starter-card .sc-kcal{font-family:var(--mono);font-size:11px;
  color:var(--bone-58);letter-spacing:.04em;margin-top:6px;display:inline-block;}
@media(max-width:680px){.preview-starters{grid-template-columns:1fr;}}

/* ============ 16. EDIBLE FACTOR INTEGRATION ============ */
/* The EF wordmark. Rendered in mono caps so it sits inside the site's
   typographic system; the period is periwinkle, "factor" is EF indigo. */
.ef-wordmark{
  font-family:'Space Grotesk',Archivo,system-ui,sans-serif;font-weight:600;letter-spacing:0;
  font-size:1em;line-height:1;white-space:nowrap;
  color:#fff;
}
.ef-wordmark .dot,.ef-wordmark .factor{color:inherit;}
/* keep it legible on the cream surfaces (menu nutritionist block) */
.spread .ef-wordmark,.spread-scope .ef-wordmark,body.menu-page .trust .ef-wordmark{color:var(--ink);}

/* per-dish affordance: a small "Nutrition on EF" deep-link beside the kcal */
/* named-steak hyperlinks (EF palette) - the dish name itself links to the
   Edible Factor guest menu. Periwinkle on dark, indigo on the cream pages. */
.steak-link{
  color:var(--ef-peri);text-decoration:none;text-underline-offset:3px;
  transition:color var(--t-ui) var(--ease);
}
.steak-link:hover,.steak-link:focus-visible{color:#fff;text-decoration:underline;}
.spread .steak-link,.spread-scope .steak-link,body.menu-page .steak-link{color:var(--ef-indigo);}
.spread .steak-link:hover,.spread-scope .steak-link:hover,body.menu-page .steak-link:hover{color:var(--ef-indigo-bright);}

.ef-dish-link{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:500;
  color:var(--ef-peri);
  border:1px solid var(--ef-peri-soft);border-radius:999px;
  padding:3px 9px;line-height:1;white-space:nowrap;
  transition:background var(--t-ui) var(--ease),
             border-color var(--t-ui) var(--ease),
             color var(--t-ui) var(--ease);
}
.ef-dish-link svg{width:11px;height:11px;flex:0 0 auto;
  transition:transform var(--t-ui) var(--ease);}
.ef-dish-link:hover,.ef-dish-link:focus-visible{
  background:var(--ef-indigo-12);border-color:var(--ef-peri);color:var(--ef-peri);
}
.ef-dish-link:hover svg{transform:translateX(2px);}
/* on the cream menu spread, deepen for contrast */
.spread-scope .ef-dish-link,.spread .ef-dish-link{
  color:var(--ef-indigo);border-color:var(--ef-indigo-22);
}
.spread-scope .ef-dish-link:hover,.spread .ef-dish-link:hover{
  background:var(--ef-indigo-12);border-color:var(--ef-indigo);color:var(--ef-indigo);
}

/* the dedicated, branded EF verification block */
.ef-verify{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(20px,3vw,38px);align-items:center;
  margin-top:clamp(34px,4.4vw,56px);
  padding:clamp(24px,3.2vw,40px);
  border:1px solid var(--ef-indigo-22);border-radius:8px;
  background:
    radial-gradient(140% 120% at 0% 0%, var(--ef-indigo-12), transparent 60%),
    oklch(0.22 0.014 42 / .55);
}
.ef-verify::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--ef-indigo),var(--ef-peri));
  opacity:.9;
}
.ef-mark{
  width:clamp(48px,5.4vw,64px);height:clamp(48px,5.4vw,64px);flex:0 0 auto;
  border-radius:13px;overflow:hidden;
  border:1px solid var(--ef-peri-soft);
}
.ef-mark img{width:100%;height:100%;display:block;}
.ef-vb .kicker{margin-bottom:10px;color:var(--ef-peri);}
.ef-vb h3{font-size:var(--t-h3);line-height:1.05;margin-bottom:9px;}
.ef-vb h3 .ef-wordmark{font-size:.72em;vertical-align:baseline;}
.ef-vb p{font-size:var(--t-small);color:var(--bone-78);max-width:56ch;}
.ef-verify .btn{
  --b-bg:var(--ef-indigo);--b-fg:#fff;border-color:transparent;
}
.ef-verify .btn:hover{
  background:var(--ef-indigo-bright);
  box-shadow:0 8px 24px -12px var(--ef-peri-soft);
}
/* on the cream menu spread, swap the dark backing for cream-2 */
.spread-scope .ef-verify,.spread .ef-verify{
  background:
    radial-gradient(140% 120% at 0% 0%, var(--ef-indigo-12), transparent 60%),
    var(--cream-2);
  border-color:var(--ef-indigo-22);
}
.spread-scope .ef-vb p,.spread .ef-vb p{color:var(--ink-70);}
@media(max-width:820px){
  .ef-verify{grid-template-columns:auto 1fr;gap:18px;}
  .ef-verify .btn{grid-column:1 / -1;justify-self:start;}
}