/* GLUT Feuerküche
   Layout: cellar dark, iron-condensed display type, one ember accent used like real embers:
   rare and hot. Full-bleed fire hero, pinned horizontal menu, a playable coal bed.
   Deliberately single dark theme. */

@font-face{font-family:"Shoulders";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/big-shoulders-display-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Shoulders";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Shoulders";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/big-shoulders-display-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Shoulders";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/big-shoulders-display-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/instrument-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/instrument-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/instrument-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JB Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JB Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark;
  --soot:#15100C;        /* canvas: cold soot */
  --panel:#1E1712;       /* charred oak */
  --brick:#2A1D16;
  --ash:#EFE6DA;         /* ink: pale ash */
  --ash-muted:#A99A88;
  --line:rgba(239,230,218,.12);
  --ember:#FF5B22;       /* accent: live ember, CTA and heat only */
  --ember-muted:#7C2D12;
  --flame:#FFC46B;

  --f-display:"Shoulders","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --f-body:"Instrument","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JB Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --fs-hero:clamp(3.6rem,11vw,12.5rem);
  --fs-h2:clamp(2.8rem,7vw,7rem);
  --fs-h3:clamp(1.7rem,2.6vw,2.5rem);
  --fs-lede:clamp(1.05rem,1.25vw,1.25rem);
  --fs-mono:.72rem;

  --gutter:clamp(16px,4vw,60px);
  --head-h:72px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --badge-lane:4.5rem;   /* bottom strip kept free for the ELYX demo pill (bottom left, 16px) */
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--soot);color:var(--ash);font-family:var(--f-body);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea,output{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
::selection{background:var(--ember);color:var(--soot)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ember);color:var(--soot);padding:.7rem 1rem;border-radius:6px;text-decoration:none;transition:top .2s}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}

.wrap{width:100%;max-width:1520px;margin-inline:auto;padding-inline:var(--gutter)}
.mono,.eyebrow{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;font-weight:400}
.eyebrow{color:var(--ash-muted);display:flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px 2px rgba(255,91,34,.55)}
.muted{color:var(--ash-muted)}
.h2{font-family:var(--f-display);font-weight:800;font-size:var(--fs-h2);line-height:.92;letter-spacing:-.005em;text-transform:uppercase;text-wrap:balance}
.line-mask{padding-bottom:.1em;margin-bottom:-.1em}

/* ambient: a slow ember glow breathing up from the floor. It drifts -6% to 6% and breathes
   .55 / 1 / .7 over 64 s; main.js steps it a few times per second (a 60 fps CSS animation on this
   full-screen layer recomposited every layer above it on every frame) */
.amb{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(70% 45% at 50% 108%,rgba(255,91,34,.16),rgba(124,45,18,.07) 45%,transparent 70%);opacity:.55;transform:translate3d(-6%,0,0);will-change:transform,opacity}
.grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,.foot{position:relative;z-index:1}
main{overflow-x:clip}

/* intro */
.intro{display:none}
.js .intro{position:fixed;inset:0;z-index:150;background:#0E0A08;display:grid;place-content:center;justify-items:center;gap:1rem;animation:introFailsafe 0s 3.4s forwards}
@keyframes introFailsafe{to{visibility:hidden;opacity:0}}
.intro__ember{width:12px;height:12px;border-radius:50%;background:var(--flame);box-shadow:0 0 18px 6px rgba(255,91,34,.8),0 0 60px 20px rgba(255,91,34,.35)}
.intro__word{font-family:var(--f-display);font-weight:800;font-size:clamp(5rem,18vw,13rem);line-height:.86;display:flex;overflow:hidden;padding-bottom:.04em;color:var(--ash)}
.intro__word span{display:inline-block}
.intro__sub{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ash-muted)}

/* header */
.head{position:fixed;left:0;right:0;top:0;z-index:60;display:flex;align-items:center;gap:2rem;height:calc(var(--head-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;transition:background .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.head.is-solid{background:rgba(21,16,12,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.head.is-hidden{transform:translateY(-110%)}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;margin-right:auto;font-family:var(--f-display);font-weight:800;font-size:1.9rem;letter-spacing:.04em;line-height:1}
/* breathing ember: the dim state sits underneath, the bright state fades in and out on top
   (opacity only, so it runs on the compositor instead of repainting the header every frame) */
.brand__dot,.live-dot{position:relative;border-radius:50%;background:#C8421A;box-shadow:0 0 5px 1px rgba(255,91,34,.4)}
.brand__dot::after,.live-dot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ember);box-shadow:0 0 12px 3px rgba(255,91,34,.6);animation:breathe 3.2s ease-in-out infinite}
.brand__dot{width:9px;height:9px}
@keyframes breathe{50%{opacity:0}}
.nav{display:flex;gap:1.8rem}
.nav a{text-decoration:none;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;position:relative;padding:.4rem 0;color:var(--ash)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ember);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1);transform-origin:left}
.menu-btn{display:none;align-items:center;gap:.6rem;background:none;border:0;padding:.6rem 0;min-height:44px;cursor:pointer}
.menu-btn__bars{width:22px;height:8px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:transform .4s var(--ease)}
.menu-btn[aria-expanded="true"] .menu-btn__bars{transform:scaleY(.2)}
.menu-btn__label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.mnav{position:fixed;inset:0;z-index:55;background:var(--soot);padding:calc(var(--head-h) + env(safe-area-inset-top,0px) + 2rem) var(--gutter) var(--badge-lane);display:flex;flex-direction:column;justify-content:space-between}
.mnav nav{display:flex;flex-direction:column}
.mnav nav a{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,12vw,3.6rem);line-height:1;text-decoration:none;padding:.5rem 0;border-bottom:1px solid var(--line)}
.mnav .mnav__cta{color:var(--ember);border-bottom:0;margin-top:1rem}
.mnav__meta{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ash-muted)}

/* buttons */
.btn{--bg:var(--ash);--fg:var(--soot);display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.85rem 1.6rem;border-radius:4px;border:1px solid var(--bg);background:var(--bg);color:var(--fg);text-decoration:none;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .4s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease)}
.btn span{position:relative;z-index:1;pointer-events:none}
.btn::before{content:"";position:absolute;inset:0;background:var(--flame);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);z-index:0}
.btn:hover::before{transform:scaleY(1)}
.btn--ember{--bg:var(--ember);--fg:#1A0E08;box-shadow:0 0 0 rgba(255,91,34,0)}
.btn--ember:hover{box-shadow:0 8px 40px -6px rgba(255,91,34,.6)}
.btn--ghost{--bg:transparent;--fg:var(--ash);border-color:var(--line)}
.btn--ghost:hover{color:var(--soot)}
.btn--sm{min-height:44px;padding:.6rem 1.15rem;font-size:.72rem}
.btn--wide{width:100%}
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;text-decoration:none;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line);transition:border-color .3s}
.link-arrow:hover{border-color:var(--ember)}

/* photo slots + designed fallback: a painted ember bed */
.ph{position:relative;overflow:hidden;background:radial-gradient(60% 40% at 40% 85%,rgba(255,91,34,.55),rgba(124,45,18,.35) 40%,transparent 70%),radial-gradient(30% 20% at 70% 90%,rgba(255,196,107,.35),transparent 70%),linear-gradient(#120D0A,#1E1410)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.is-missing img{display:none}

/* 1 HERO */
.hero{position:relative;min-height:max(640px,min(100svh,1000px));display:grid;overflow:hidden;isolation:isolate}
.hero__ph{position:absolute;inset:0;z-index:-2}
.hero__ph img{object-position:32% 60%}
.hero__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,10,8,.55) 0%,rgba(14,10,8,0) 38%),linear-gradient(0deg,rgba(14,10,8,.82) 0%,rgba(14,10,8,0) 34%)}
.hero__sparks{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero__content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) min(390px,34%);grid-template-rows:auto auto 1fr;gap:1.5rem 3rem;padding-block:calc(var(--head-h) + clamp(1.5rem,4vw,3.5rem)) clamp(2rem,4vw,3.5rem)}
.hero__eyebrow{grid-column:1/-1}
.hero__title{grid-column:1/-1;grid-row:2;align-self:start;font-family:var(--f-display);font-weight:800;font-size:var(--fs-hero);line-height:.84;text-transform:uppercase;letter-spacing:-.01em;max-width:9ch}
.hero__title>span{display:block}
.hero__title-hot{color:var(--ember);text-shadow:0 0 40px rgba(255,91,34,.35)}
.hero__aside{grid-column:2;grid-row:2;display:grid;gap:1.3rem;align-self:end;justify-self:end;padding-bottom:.4rem}
.hero__lede{font-size:var(--fs-lede);color:var(--ash)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}
.hero__hours{color:var(--ash-muted);display:flex;align-items:center;gap:.6rem}
.live-dot{width:7px;height:7px;flex:none}
.live-dot::after{box-shadow:0 0 8px 2px rgba(255,91,34,.6);animation-duration:2.4s}

/* 2 MANIFEST */
.manifest{padding-block:clamp(6rem,14vw,13rem);display:grid;gap:2rem}
.manifest__text{font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,4.6vw,4.6rem);line-height:1.04;text-transform:uppercase;letter-spacing:.005em;max-width:24ch;text-wrap:pretty;color:var(--ash)}
.manifest__text b{font-weight:800;color:var(--ember)}
.motion .manifest__text .w{color:#4A3B31;transition:color .5s var(--ease),text-shadow .6s var(--ease)}
.motion .manifest__text .w.is-lit{color:var(--ash)}
.motion .manifest__text b .w{color:#4A3B31}
.motion .manifest__text b .w.is-lit{color:var(--ember);text-shadow:0 0 28px rgba(255,91,34,.5)}

/* 3 KITCHEN */
.kitchen{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,7vw,8rem);align-items:center;padding-block:clamp(3rem,8vw,7rem)}
.kitchen__fig{display:grid;gap:.8rem}
.kitchen__ph{aspect-ratio:1122/1402;max-width:560px}
.kitchen__ph img{transform:scale(1.12)}
.kitchen__fig figcaption{color:var(--ash-muted)}
.kitchen__body{display:grid;gap:1.6rem;min-width:0}
.kitchen__text{font-size:var(--fs-lede);max-width:44ch;color:var(--ash)}
.facts{display:grid;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--ember);padding-top:.2rem}

/* 4 MENU */
.menu{position:relative;padding-top:clamp(4rem,8vw,7rem)}
.menu__pin{position:relative}
.menu__track{display:flex;gap:clamp(1rem,2vw,2rem);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.5rem;scrollbar-width:thin}
.menu__intro,.dish{flex:none;scroll-snap-align:start}
.menu__intro{width:min(420px,80vw);display:grid;align-content:center;gap:1.4rem;padding-right:2rem}
.menu__lede{color:var(--ash);max-width:32ch;font-size:var(--fs-lede)}
.menu__total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.9rem 0;max-width:340px}
.menu__total .mono{color:var(--ash-muted)}
.menu__total b{font-family:var(--f-display);font-weight:800;font-size:2.2rem;line-height:1;color:var(--ember)}
.menu__demo{color:var(--ash-muted)}
.dish{width:min(440px,82vw);display:grid;grid-template-rows:auto 1fr;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}
/* every course: its photo, cropped with CSS only, and the heat it is cooked at as the lead figure.
   Without a photo the figure sits on the brick glow, which is the designed fallback. */
.dish__visual{aspect-ratio:4/3.4;position:relative;overflow:hidden;background:radial-gradient(70% 60% at 50% 100%,rgba(255,91,34,.28),transparent 70%),var(--brick)}
.dish__visual img{width:100%;height:100%;object-fit:cover}
.dish__visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(14,10,8,.78) 0%,rgba(14,10,8,.34) 30%,rgba(14,10,8,0) 56%),linear-gradient(0deg,rgba(30,23,18,.92) 0%,rgba(30,23,18,0) 26%)}
.dish__img--ember{transform:scale(2.2);transform-origin:86% 90%}
.dish__img--plate{transform:scale(1.9);transform-origin:62% 86%}
.dish__img--steak{object-position:28% 62%;transform:scale(1.9);transform-origin:26% 64%}
.dish__img--apricot{object-position:50% 16%}
.dish__temp{position:absolute;left:clamp(1.1rem,1.6vw,1.4rem);top:clamp(1rem,1.6vw,1.4rem);z-index:1;display:grid;justify-items:start;gap:.15rem;pointer-events:none}
.dish__temp small{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--flame);padding-left:.15em}
.dish__temp b{font-family:var(--f-display);font-weight:800;font-size:clamp(4.4rem,6.4vw,7rem);line-height:.86;color:transparent;-webkit-text-stroke:1.5px rgba(255,91,34,.9);background:linear-gradient(0deg,rgba(255,91,34,.8),rgba(255,196,107,.12) 62%);-webkit-background-clip:text;background-clip:text;white-space:nowrap;filter:drop-shadow(0 2px 16px rgba(14,10,8,.55))}
.dish__body{display:flex;flex-direction:column;gap:.6rem;padding:1.4rem 1.4rem 1.6rem;position:relative}
.dish__n{color:var(--ember)}
.dish h3{font-family:var(--f-display);font-weight:800;font-size:var(--fs-h3);line-height:.95;text-transform:uppercase}
.dish p{color:var(--ash-muted);font-size:.98rem;max-width:36ch}
.dish__price{font-family:var(--f-display);font-weight:500;font-size:1.6rem;margin-top:auto;padding-top:.4rem}
.menu__progress{display:none}
.menu__swipe{padding:1rem var(--gutter) 0;color:var(--ash-muted)}
@media (min-width:901px){.menu__swipe{display:none}}
@media (min-width:901px){
  .motion .menu__track{overflow:visible;scroll-snap-type:none;padding-bottom:0}
  .motion .menu{padding-top:0}
  .motion .menu__pin{height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .motion .menu__track{will-change:transform;width:max-content}
  .motion .menu__progress{display:block;position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--badge-lane);height:1px;background:var(--line)}
  .motion .menu__progress span{position:absolute;inset:0;background:var(--ember);transform-origin:left;transform:scaleX(0)}
  .motion .dish{height:min(74svh,620px);width:min(420px,30vw);grid-template-rows:58% 1fr}
  .motion .dish__visual{aspect-ratio:auto}
}

/* 5 VAULT (quiet) */
.vault{position:relative;padding-top:clamp(5rem,10vw,9rem)}
.vault__ph{aspect-ratio:1672/941;max-height:86svh;width:100%}
.vault__ph img{transform-origin:70% 60%}
.vault__body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.6rem 4rem;padding-block:clamp(2.5rem,5vw,4.5rem) clamp(5rem,10vw,9rem);align-items:end}
.vault__body .eyebrow{grid-column:1/-1}
.vault__title{font-family:var(--f-display);font-weight:500;font-size:clamp(2.4rem,5.4vw,5.4rem);line-height:.95;text-transform:uppercase;text-wrap:balance}
.vault__text{color:var(--ash-muted);font-size:var(--fs-lede);max-width:40ch}
.vault__facts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:1rem 3.5rem;border-top:1px solid var(--line);padding-top:1.4rem}
.vault__facts div{display:grid;gap:.2rem}
.vault__facts dt{color:var(--ash-muted)}
.vault__facts dd{font-family:var(--f-display);font-weight:500;font-size:2.4rem;line-height:1;font-variant-numeric:tabular-nums}

/* 6 FIRE (participation) */
.fire{position:relative;padding-top:clamp(4rem,8vw,7rem);background:linear-gradient(180deg,transparent,#0E0A08 18%)}
.fire__head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.4rem 4rem;align-items:end;margin-bottom:2.2rem}
.fire__head .eyebrow{grid-column:1/-1}
.fire__intro{color:var(--ash);font-size:var(--fs-lede);max-width:36ch}
.fire__stage{position:relative;height:min(82svh,760px);min-height:520px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:pointer;background:radial-gradient(80% 60% at 50% 100%,#5A1C0B,#1B0F0A 55%,#0E0A08)}
.fire__gl,.fire__sparks{position:absolute;inset:0;width:100%;height:100%;display:block}
.fire__hud{position:absolute;left:var(--gutter);right:var(--gutter);top:1.6rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.2rem 2.4rem;align-items:start;pointer-events:none}
.fire__read{display:grid;gap:.15rem}
.fire__read .mono{color:#CDBFAE}
.fire__read b{font-family:var(--f-display);font-weight:800;font-size:clamp(3.6rem,8vw,7rem);line-height:.9;font-variant-numeric:tabular-nums;text-shadow:0 0 40px rgba(255,91,34,.45)}
.fire__hand{color:var(--flame)}
.fire__scale{grid-column:1/-1;position:relative;height:4px;border-radius:4px;background:linear-gradient(90deg,#4A2414,#B53A14 40%,#FF5B22 65%,#FFC46B 90%,#FFF0D2);opacity:.9;max-width:720px}
.fire__scale i{position:absolute;top:-6px;width:2px;height:16px;background:var(--ash);left:0;box-shadow:0 0 8px rgba(239,230,218,.7)}
.fire__dishes{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.6rem}
.fire__dishes li{display:grid;gap:.1rem;padding:.6rem .9rem;border:1px solid rgba(239,230,218,.16);border-radius:4px;background:rgba(14,10,8,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:.95rem;transition:border-color .4s,background .4s,color .4s,box-shadow .4s}
.fire__dishes li .mono{color:var(--ash-muted);font-size:.64rem}
.fire__dishes li.is-on{border-color:var(--ember);background:rgba(255,91,34,.16);box-shadow:0 0 24px -4px rgba(255,91,34,.5)}
.fire__dishes li.is-on .mono{color:var(--flame)}
.fire__btn{position:absolute;left:50%;bottom:clamp(2.4rem,5vw,3.4rem);transform:translateX(-50%);width:140px;height:140px;border-radius:50%;border:1px solid rgba(255,91,34,.7);background:rgba(14,10,8,.74);box-shadow:0 0 40px -6px rgba(255,91,34,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:background .3s,border-color .3s,scale .3s var(--ease)}
.fire__btn-label{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;text-align:center;pointer-events:none}
.fire__btn-ring{position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--ember);clip-path:inset(0 0 100% 0);transition:clip-path .2s linear;pointer-events:none}
/* press feedback on `scale`, so it neither fights nor is overridden by the GSAP reveal on `transform` */
.fire__btn.is-held{background:rgba(255,91,34,.22);border-color:var(--ember);scale:.95}
.fire__hint{position:absolute;left:50%;bottom:.7rem;transform:translateX(-50%);color:#E3D6C6;font-size:.62rem;background:rgba(14,10,8,.7);padding:.3rem .6rem;border-radius:3px;width:max-content;max-width:calc(100% - 2rem);text-align:center}
.fire__note{color:var(--ash-muted);padding-block:1.4rem 0;font-size:.92rem;max-width:none}

/* 7 BOOK (arrival) */
.book{padding-block:clamp(6rem,12vw,11rem) clamp(5rem,10vw,9rem);display:grid;gap:clamp(2.5rem,5vw,4rem)}
.book__head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1.4rem 4rem;align-items:end}
.book__head .eyebrow{grid-column:1/-1}
.book__title{font-family:var(--f-display);font-weight:800;font-size:clamp(3.2rem,10vw,10rem);line-height:.86;text-transform:uppercase}
.book__title>span{display:block}
.book__title .hot{color:var(--ember);text-shadow:0 0 50px rgba(255,91,34,.3)}
.book__lede{color:var(--ash-muted);font-size:var(--fs-lede);max-width:38ch}
.book__cards{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(1rem,2.5vw,2rem);align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:clamp(1.3rem,3vw,2.4rem)}
.card--form{display:grid;gap:1.3rem}
.card--done{display:grid;gap:1rem}
.card--done:focus{outline:none}
.card--done .mono{color:var(--ember)}
.done__big{font-family:var(--f-display);font-weight:800;font-size:clamp(2.6rem,5vw,4.2rem);line-height:.9;text-transform:uppercase}
.done__demo{color:var(--flame)!important}
.card--done .btn{justify-self:start}
.card--info{display:grid;gap:1.6rem;background:transparent}
.card--info .mono{color:var(--ember);margin-bottom:.4rem}
.card--info p:not(.mono){color:var(--ash)}
.field{display:grid;gap:.45rem;min-width:0;border:0;padding:0;margin:0}
.field label,.field legend,.field__label{font-family:var(--f-mono);font-size:var(--fs-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ash-muted);padding:0}
.field legend{margin-bottom:.45rem}
.opt{text-transform:none;letter-spacing:0}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem}
.field input,.field textarea{width:100%;min-height:50px;padding:.8rem 1rem;border:1px solid var(--line);border-radius:4px;background:#140F0B;transition:border-color .3s,box-shadow .3s}
.field textarea{resize:vertical;min-height:80px}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px rgba(255,91,34,.18)}
.field input::-webkit-calendar-picker-indicator{filter:invert(.85)}
.field__err{display:none;color:#FF9C7A;font-size:.86rem}
.is-invalid .field__err,.field__err.is-shown{display:block}
.is-invalid input{border-color:#FF7A50}
.stepper{display:grid;grid-template-columns:50px 1fr 50px;border:1px solid var(--line);border-radius:4px;background:#140F0B;min-height:50px}
.stepper button{background:none;border:0;cursor:pointer;font-size:1.3rem;min-height:48px;transition:color .3s,background .3s}
.stepper button:hover{color:var(--ember);background:rgba(255,91,34,.08)}
.stepper button:disabled{opacity:.3;cursor:default}
.stepper output{display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:1.6rem;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;position:relative}
.chips input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.chips label{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;text-transform:none;color:var(--ash);min-height:44px;display:inline-flex;align-items:center;padding:.5rem .95rem;border:1px solid var(--line);border-radius:4px;cursor:pointer;background:#140F0B;transition:background .3s,color .3s,border-color .3s;font-variant-numeric:tabular-nums}
.chips label:hover{border-color:rgba(255,91,34,.5)}
.chips input:checked+label{background:var(--ember);color:#1A0E08;border-color:var(--ember)}
.chips input:focus-visible+label{outline:2px solid var(--flame);outline-offset:3px}
.check{display:grid;grid-template-columns:24px 1fr;gap:.8rem;align-items:start;cursor:pointer;font-size:.95rem}
.check input{width:20px;height:20px;margin:.15rem 0 0;accent-color:var(--ember)}

/* FOOTER */
.foot{padding-block:clamp(3rem,6vw,5rem) var(--badge-lane);border-top:1px solid var(--line);overflow:hidden}
.foot__mark{font-family:var(--f-display);font-weight:800;font-size:clamp(7rem,31vw,30rem);line-height:.78;letter-spacing:-.01em;background:linear-gradient(0deg,#FF5B22 0%,#B53A14 30%,#2A1D16 75%);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:2.5rem}
.foot__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;color:var(--ash)}
.foot .muted{font-size:.9rem}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);color:var(--ash-muted);font-size:.88rem}

/* CURSOR */
.cursor{display:none}
@media (pointer:fine){
  .has-cursor .cursor{display:block;position:fixed;left:0;top:0;z-index:180;pointer-events:none}
  .cursor__ring{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid rgba(239,230,218,.45);border-radius:50%;display:grid;place-items:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s}
  .cursor__dot{position:fixed;left:0;top:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--ember);box-shadow:0 0 10px 3px rgba(255,91,34,.6)}
  .cursor__label{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#1A0E08;opacity:0;transition:opacity .3s}
  .cursor.is-hover .cursor__ring{width:62px;height:62px;margin:-31px 0 0 -31px;border-color:var(--ember);background:rgba(255,91,34,.1)}
  .cursor.is-drag .cursor__ring{width:78px;height:78px;margin:-39px 0 0 -39px;background:var(--ember);border-color:var(--ember)}
  .cursor.is-drag .cursor__label{opacity:1}
}

/* RESPONSIVE */
@media (max-width:1100px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
}
@media (max-width:900px){
  :root{--head-h:64px}
  .head{gap:1rem}
  .head__cta{display:none}
  .hero{min-height:max(620px,100svh)}
  .hero__ph img{object-position:30% 50%}
  .hero__content{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto}
  .hero__title{grid-row:2}
  .hero__aside{grid-column:1;grid-row:4;justify-self:stretch}
  .hero__content{padding-bottom:var(--badge-lane)}
  .hero__shade{background:linear-gradient(180deg,rgba(14,10,8,.6) 0%,rgba(14,10,8,0) 40%),linear-gradient(0deg,rgba(14,10,8,.95) 0%,rgba(14,10,8,.6) 30%,rgba(14,10,8,0) 55%)}
  .kitchen{grid-template-columns:1fr}
  .kitchen__ph{max-width:460px}
  .vault__body,.fire__head,.book__head{grid-template-columns:1fr}
  .fire__stage{height:auto;min-height:640px}
  .fire__hud{grid-template-columns:1fr}
  .fire__dishes li{flex:1 1 140px}
  /* hint (two lines on phones) sits above the demo lane, the button and its progress ring clear the hint */
  .fire__btn{bottom:calc(var(--badge-lane) + 3rem)}
  .fire__hint{bottom:calc(var(--badge-lane) - .9rem)}
  .book__cards{grid-template-columns:minmax(0,1fr)}
  .field-row{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .fire__btn{width:116px;height:116px}
  .facts div{grid-template-columns:5.5rem 1fr}
}
@media (prefers-reduced-motion:reduce){
  .amb{opacity:1;transform:none}
  .brand__dot::after,.live-dot::after{animation:none}
  *,*::before,*::after{transition-duration:.01ms!important}
}