/* ============================================================
   TRAPPANYAKI LLC — luxury-street hibachi
   Charcoal / fire-red / gold · Cinzel + Archivo, self-hosted
   ============================================================ */

/* ============================================================
   SELF-HOSTED TYPE
   Same-origin woff2, latin subset, one variable file per family.
   No third-party request, no render-blocking stylesheet, no FOUT
   dance, and nothing leaks to a font CDN on every visit.
   ============================================================ */
@font-face{
  font-family:'Cinzel';font-style:normal;
  font-weight:700 900;
  font-display:swap;
  src:url('cinzel.woff2') format('woff2-variations'),
      url('cinzel.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:'Archivo';font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('archivo.woff2') format('woff2-variations'),
      url('archivo.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{
  --char-900:#08080a;
  --char-850:#0b0b0d;
  --char-800:#101014;
  --char-700:#16161b;
  --char-600:#1e1e24;

  --red:#c1121f;
  /* Lifted from #e63329. The old value measured 4.40:1 on the menu cards and
     4.27:1 on the specialty rows — just under the 4.5 body-text floor, on the
     accent colour that recurs most. This clears both at 4.79 and 4.64. */
  --red-hot:#e8433a;
  --red-deep:#7a0b12;

  --gold:#d8b45a;
  --gold-lt:#f2dfa6;

  --bone:#f4f1ea;
  --ash:#9a978f;
  --ash-dim:#88867f;

  /* Both faces are self-hosted and same-origin, so the fallbacks are a genuine
     edge case rather than the common path: a serif behind the serif, the
     platform stack behind the grotesque. */
  --display:'Cinzel', Georgia, serif;
  --sans:'Archivo', system-ui, -apple-system, sans-serif;


  /* Type scale. Nine steps replacing 26 crowded one-off values; adjacent
     steps sit at least .06rem apart so each can actually carry a job. */
  --fs-micro:.58rem;    --fs-meta:.62rem;     --fs-label:.68rem;
  --fs-caption:.74rem;  --fs-body-sm:.8rem;   --fs-body:.88rem;
  --fs-body-lg:.95rem;  --fs-subtitle:1.05rem;--fs-title:1.18rem;

  /* Light text on near-black needs a little more air and tracking than the
     same face would want on white. */
  --lh-prose:1.68;      --ls-prose:.004em;

  /* type tokens */
  --display-lg-size:96px;   --display-lg-lh:96px;     --display-lg-ls:-0.025em;
  --body-md-size:10.4px;    --body-md-lh:15.6px;      --body-md-ls:0.2769em;
  --label-md-size:16px;     --label-md-lh:24px;       --label-md-ls:normal;

  /* exponential ease-out: confident arrival, no bounce */
  --icon-plus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");

  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-inout:cubic-bezier(0.77,0,0.175,1);
}

*,*::before,*::after{box-sizing:border-box;}
/* The UA rule for [hidden] is display:none, which any author display wins
   against - .btn{display:inline-flex} was overriding it and leaving the
   Pay on Square button on screen before an order had ever been sent. */
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--char-900);
  color:var(--bone);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:900;letter-spacing:.02em;line-height:1.05;}
p{margin:0;}
ul,ol,dl{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;cursor:pointer;}

section[id]{scroll-margin-top:88px;}

.container{width:min(1200px,92vw);margin-inline:auto;}
.container--narrow{width:min(860px,92vw);}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--red);color:#fff;padding:.7rem 1.1rem;font-weight:700;
}
.skip-link:focus{left:1rem;top:1rem;}

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

/* Browser surfaces — selection, caret, scrollbar. Defaults belong to no
   design system; these come from the palette. */
::selection{background:var(--red);color:#fff;}
::-moz-selection{background:var(--red);color:#fff;}
html{scrollbar-color:var(--char-600) var(--char-900);scrollbar-width:thin;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--char-900);}
::-webkit-scrollbar-thumb{
  background:var(--char-600);border-radius:99px;
  border:3px solid var(--char-900);
}
::-webkit-scrollbar-thumb:hover{background:#2a2a32;}
input,textarea{caret-color:var(--red-hot);}


/* ---------- shared bits ---------- */
.section-title{
  font-size:clamp(2.3rem,5.8vw,3.9rem);
  text-transform:uppercase;
  letter-spacing:.01em;
}
.section-lede{color:var(--ash);max-width:52ch;margin:1.1rem auto 0;line-height:var(--lh-prose);letter-spacing:var(--ls-prose);}
.section-header{text-align:center;margin-bottom:4.2rem;padding-top:1.4rem;}
.gold-divider{
  width:82px;height:2px;margin:1.2rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.9rem;border:1px solid transparent;border-radius:2px;
  font-weight:800;font-size:var(--fs-body-sm);letter-spacing:.18em;text-transform:uppercase;
  transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s,box-shadow .25s;
}
.btn-primary{background:var(--red);color:#fff;}

.btn-ghost{border-color:rgba(244,241,234,.28);color:var(--bone);background:transparent;}

.btn-block{width:100%;}

.pulse{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--red-hot);box-shadow:0 0 0 3px rgba(230,51,41,.18);
}

.reveal{opacity:0;transition:opacity .2s var(--ease);}
.reveal.is-in{opacity:1;}

/* ============================================================
   NAV
   ============================================================ */
.navbar{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:.4rem 0;
  transition:background .25s,backdrop-filter .25s,border-color .25s;
  border-bottom:1px solid transparent;
}
.navbar.is-stuck{
  background:rgba(8,8,10,.86);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom-color:rgba(244,241,234,.08);
  padding:.3rem 0;
}
.nav-container{
  width:min(1320px,94vw);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand-link{display:flex;align-items:center;gap:.9rem;}
.brand-logo{
  width:104px;height:auto;flex:none;
  filter:drop-shadow(0 2px 10px rgba(193,18,31,.35));
  transition:filter .25s;
}
.navbar.is-stuck .brand-logo{width:92px;}

.brand-sub{
  font-size:var(--fs-micro);letter-spacing:.3em;color:var(--ash);
  padding-left:.9rem;border-left:1px solid rgba(244,241,234,.16);
}

.nav-links{display:flex;align-items:center;gap:1.8rem;}
.nav-link{
  font-size:var(--fs-caption);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
  position:relative;padding:.3rem 0;transition:color .25s;
}
.nav-link::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease);
}

.nav-btn{
  background:var(--red);color:#fff;padding:.7rem 1.3rem;border-radius:2px;
  font-size:var(--fs-caption);font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s,transform .25s;
}

.mobile-toggle{display:none;background:none;border:0;padding:.4rem;}
.mobile-toggle .bar{display:block;width:24px;height:2px;background:var(--bone);margin:5px 0;transition:transform .3s,opacity .3s;}
.mobile-toggle.is-open .bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mobile-toggle.is-open .bar:nth-child(2){opacity:0;}
.mobile-toggle.is-open .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============================================================
   THE TAKE — scrubbed one-shot
   ============================================================ */
.take{position:relative;background:var(--char-900);}
.take-track{height:460vh;position:relative;}
.take-stage{
  height:100vh;height:100dvh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  perspective:1200px;
}
.stage-glow{
  position:absolute;inset:-20%;
  background:
    radial-gradient(48% 42% at 50% 58%, rgba(230,51,41,.10), transparent 72%),
    radial-gradient(60% 50% at 18% 20%, rgba(216,180,90,.07), transparent 70%),
    var(--char-900);
}

.rig{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;will-change:transform;
}
.tray{
  position:relative;width:min(46vh,340px);height:min(64vh,470px);
  transform-style:preserve-3d;will-change:transform,opacity;
}
.tray-shadow{
  position:absolute;left:50%;top:58%;width:130%;height:60%;
  transform:translate(-50%,0) rotateX(72deg);
  background:radial-gradient(closest-side,rgba(0,0,0,.85),transparent 72%);
  filter:blur(14px);
}
.tray-body{
  position:absolute;inset:0;border-radius:16px;overflow:hidden;
  background:#0d0d0f;
  box-shadow:
    inset 0 0 0 6px #131316,
    inset 0 0 40px rgba(0,0,0,.9),
    0 40px 90px -30px rgba(0,0,0,.95);
}
.tray-face{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:opacity,transform;
}
/* empty tray interior — what the layers land into */
.tray-floor{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg,#131317,#0a0a0c 62%,#08080a);
}
.tray-floor::after{
  content:'';position:absolute;inset:7% 6%;border-radius:10px;
  box-shadow:inset 0 2px 12px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.04);
}

/* the layer stack — lives outside .tray-body so it can hang above the rim */
.plate{
  position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;
}
.pl{
  position:absolute;left:50%;top:50%;width:106%;height:auto;
  transform:translate(-50%,-50%);
  will-change:transform,opacity;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.75));
}
/* cropped hard into the tray so the counter never shows */
.tray-face--macro{opacity:0;transform:scale(1.6);object-position:50% 46%;filter:saturate(1.12) contrast(1.06);}
.tray-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 92% at 50% 46%, transparent 42%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.88) 100%),
    linear-gradient(180deg,rgba(0,0,0,.35),transparent 26%,transparent 72%,rgba(0,0,0,.45));
}
.tray-gloss{
  position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 34%,rgba(255,235,200,.42) 47%,rgba(255,255,255,.16) 52%,transparent 64%);
  mix-blend-mode:screen;opacity:.45;will-change:transform,opacity;
}
.tray-rim{
  position:absolute;inset:0;border-radius:16px;pointer-events:none;
  box-shadow:inset 0 0 0 2px rgba(230,51,41,.35), inset 0 0 26px rgba(230,51,41,.12);
  will-change:opacity;
}

.tray-lid{
  position:absolute;inset:-8px -8px auto -8px;height:calc(100% + 16px);
  border-radius:20px;
  background:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 42%,rgba(255,255,255,.11));
  border:1px solid rgba(255,255,255,.26);
  transform-origin:50% 100%;
  will-change:transform,opacity;
}
.lid-sheen{
  position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 58%);
  opacity:.5;
}
.lid-lip{
  position:absolute;inset:auto 0 0 0;height:12px;border-radius:0 0 20px 20px;
  background:linear-gradient(90deg,rgba(216,180,90,.1),rgba(216,180,90,.65),rgba(216,180,90,.1));
}

.steam{position:absolute;left:50%;bottom:56%;width:200px;height:280px;transform:translateX(-50%);opacity:0;will-change:opacity;}

/* will-change promotes each of these to its own compositor layer and holds it
   for the whole session — twelve layers still resident while someone reads the
   FAQ. The take needs them while it is on screen and never again, so the hint
   is withdrawn whenever the stage is out of view. Scrolling back in restores it
   before the first frame, because the observer fires ahead of the scroll
   handler. */
.take-stage:not(.is-running) .rig,
.take-stage:not(.is-running) .tray,
.take-stage:not(.is-running) .tray-face,
.take-stage:not(.is-running) .tray-gloss,
.take-stage:not(.is-running) .tray-rim,
.take-stage:not(.is-running) .tray-lid,
.take-stage:not(.is-running) .steam,
.take-stage:not(.is-running) .pl{
  will-change:auto;
}
.steam span{
  position:absolute;bottom:0;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.5),transparent 72%);
  filter:blur(9px);
  animation:rise 6s linear infinite;
}
.steam span:nth-child(1){left:6%;animation-delay:0s;}
.steam span:nth-child(2){left:26%;animation-delay:.9s;}
.steam span:nth-child(3){left:46%;animation-delay:1.8s;}
.steam span:nth-child(4){left:64%;animation-delay:2.6s;}
.steam span:nth-child(5){left:20%;animation-delay:3.4s;}
.steam span:nth-child(6){left:78%;animation-delay:4.2s;}
@keyframes rise{
  0%{transform:translateY(0) scale(.5);opacity:0;}
  22%{opacity:.7;}
  100%{transform:translateY(-260px) scale(1.9);opacity:0;}
}

.take-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .6s var(--ease);
}
.take-stage.has-video .take-video{opacity:1;}
.take-stage.has-video .rig{opacity:0;}

/* HUD */
.take-hud{
  position:relative;z-index:5;width:min(1320px,94vw);height:100%;
  display:grid;grid-template-rows:auto 1fr auto;padding:8rem 0 2.2rem;pointer-events:none;
}
.take-hud a,.take-hud button{pointer-events:auto;}
/* keeps the chapter copy legible once the shot pushes into macro */
.hud-scrim{
  position:absolute;inset:-2rem -8vw;pointer-events:none;opacity:0;z-index:-1;
  background:linear-gradient(100deg,rgba(8,8,10,.94) 0%,rgba(8,8,10,.8) 34%,rgba(8,8,10,.28) 58%,transparent 78%);
  transition:opacity .3s linear;
}
.hud-top{display:flex;justify-content:space-between;align-items:center;
  font-size:var(--fs-meta);letter-spacing:.34em;color:var(--ash-dim);text-transform:uppercase;}
.hud-mark{
  font-family:var(--display);letter-spacing:.42em;color:var(--ash);
  font-size:var(--fs-meta);font-weight:400;line-height:1.6;margin:0;
}

.chapters{position:relative;align-self:center;max-width:min(560px,86vw);}
.chapter{
  position:absolute;top:50%;left:0;transform:translateY(-38%);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.chapter.is-live{opacity:1;visibility:visible;transform:translateY(-50%);}
.ch-index{
  display:inline-block;font-size:var(--fs-meta);font-weight:800;letter-spacing:.4em;color:var(--red-hot);
  border-left:2px solid var(--red);padding-left:.7rem;margin-bottom:1rem;
}
.ch-title{
  font-size:clamp(2.6rem,8vw,5.4rem);line-height:.92;text-transform:uppercase;
  text-shadow:0 18px 50px rgba(0,0,0,.7);
}
.ch-line{margin-top:1rem;color:var(--ash);max-width:38ch;font-size:var(--fs-subtitle);}

.hud-bottom{display:flex;flex-direction:column;gap:.7rem;}
.rail{position:relative;height:2px;background:rgba(244,241,234,.14);}
.rail-fill{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--red),var(--red-hot),var(--gold));}
.rail-tick{position:absolute;top:-3px;width:1px;height:8px;background:rgba(244,241,234,.3);}
.hud-meta{display:flex;justify-content:space-between;font-size:var(--fs-meta);letter-spacing:.3em;color:var(--ash-dim);text-transform:uppercase;}
.hud-count b{color:var(--bone);}
.take-actions{display:flex;gap:.9rem;margin-top:1.6rem;flex-wrap:wrap;}

/* ============================================================
   SPEC LEDGER
   ============================================================ */
/* This panel used to be black ink on red. It read well but it could not be made
   accessible: the red sits at 0.078 relative luminance, so even pure black tops
   out at 2.56:1 — under the 3:1 large-text floor and nowhere near the 4.5:1 body
   floor. Lightening the red enough to carry dark ink would have meant giving up
   the brand colour, so the ink flipped instead. Bone on this red measures
   7.3:1, and the black chip on .ledger-val now reads as the accent rather than
   the ground, which keeps the stamped-document character. */
.ledger{
  position:relative;padding:6rem 0 6.4rem;
  background:linear-gradient(160deg,var(--red) 0%,#a30f1a 58%,var(--red-deep) 100%);
  color:var(--bone);
}
.ledger::before,.ledger::after{
  content:'';position:absolute;left:0;right:0;height:12px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 10px,transparent 10px 20px);
}
.ledger::before{top:0;} .ledger::after{bottom:0;}
.ledger-head{max-width:52ch;margin-bottom:3rem;}
.ledger-title{font-size:clamp(2.15rem,5.1vw,3.35rem);text-transform:uppercase;color:var(--bone);letter-spacing:.01em;}
.ledger-sub{margin-top:.9rem;color:rgba(244,241,234,.86);font-weight:700;}
.ledger-rows{border-top:1px solid rgba(244,241,234,.26);}
.ledger-row{
  display:grid;grid-template-columns:170px 1fr auto;gap:1.2rem;align-items:center;
  padding:1.15rem 0;border-bottom:1px solid rgba(244,241,234,.26);
  transition:background .24s,transform .24s var(--ease),opacity .24s var(--ease);
}

.ledger-row dt{
  font-family:var(--display);font-weight:900;font-size:var(--fs-body);letter-spacing:.24em;color:var(--bone);
}
.ledger-row dd{margin:0;color:rgba(244,241,234,.86);font-size:var(--fs-body-lg);font-weight:400;}
.ledger-val{
  font-weight:800;font-size:var(--fs-caption);letter-spacing:.16em;
  background:#0a0a0b;color:var(--gold-lt);padding:.4rem .8rem;border-radius:2px;white-space:nowrap;
}

/* ============================================================
   MENU
   ============================================================ */
.menu-section{padding:8rem 0;background:var(--char-850);}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;}
.menu-card{
  background:var(--char-800);border:1px solid rgba(244,241,234,.07);
  border-radius:3px;overflow:hidden;position:relative;
  transition:transform .24s var(--ease),border-color .24s,box-shadow .24s,opacity .2s var(--ease);
}
.menu-card::after{
  content:'';position:absolute;inset:0;border-radius:3px;pointer-events:none;
  box-shadow:inset 0 -2px 0 0 var(--red);opacity:0;transition:opacity .24s;
}

.card-image-wrapper{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000;}
.card-img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease),filter .3s;filter:saturate(.95) contrast(1.05);}

.card-tag{
  position:absolute;top:.9rem;left:.9rem;
  background:var(--red);color:#fff;font-size:var(--fs-micro);font-weight:800;letter-spacing:.2em;
  padding:.4rem .7rem;border-radius:2px;
}
.gold-tag{background:var(--gold);color:#0a0a0b;}
.drop-tag{background:#0a0a0b;color:var(--gold-lt);border:1px solid var(--gold);}
.card-body{padding:1.5rem 1.4rem 1.7rem;}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;}
.card-title{font-size:var(--fs-title);text-transform:uppercase;}
.card-price{font-weight:800;color:var(--gold);white-space:nowrap;font-size:var(--fs-body-lg);}
.card-subtext{color:var(--red-hot);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;margin-top:.5rem;font-weight:700;}

/* real menu pricing */
.price-list{margin-top:1.1rem;display:flex;flex-direction:column;gap:.1rem;}
.price-list li{
  display:flex;align-items:baseline;gap:.6rem;
  padding:.42rem 0;border-bottom:1px dotted rgba(244,241,234,.1);
  font-size:var(--fs-body);
}
.price-list li:last-child{border-bottom:0;}
.price-list li span{color:var(--bone);}
.price-list li b{
  margin-left:auto;color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.price-head{
  font-family:var(--sans);font-size:var(--fs-meta);font-weight:800;letter-spacing:.28em;text-transform:uppercase;
  color:var(--red-hot);margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(244,241,234,.1);
}
.specialty{margin-top:1.4rem;display:flex;flex-direction:column;gap:.5rem;}
.specialty-row{
  display:flex;align-items:center;gap:1rem;
  background:rgba(193,18,31,.08);border:1px solid rgba(193,18,31,.35);border-radius:3px;
  padding:.8rem 1rem;
}
.specialty-name{display:block;font-family:var(--display);font-weight:900;font-size:var(--fs-body-lg);text-transform:uppercase;}
.specialty-sub{display:block;color:var(--ash-dim);font-size:var(--fs-caption);margin-top:.2rem;}
.specialty-row b{margin-left:auto;color:var(--red-hot);font-size:var(--fs-subtitle);font-weight:800;white-space:nowrap;}
.card-fine{margin-top:1rem;color:var(--ash-dim);font-size:var(--fs-caption);line-height:1.5;line-height:var(--lh-prose);letter-spacing:var(--ls-prose);}

/* ============================================================
   TICKER
   ============================================================ */
.ticker-section{background:var(--char-900);padding:5rem 0 6.5rem;border-top:1px solid rgba(244,241,234,.06);}

.ticker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;}
.tick{
  background:linear-gradient(180deg,var(--char-800),var(--char-850));
  border:1px solid rgba(244,241,234,.07);border-radius:3px;padding:1.5rem 1.4rem;
  display:flex;flex-direction:column;gap:.5rem;position:relative;overflow:hidden;
  transition:opacity .2s var(--ease);
}
.tick::before{content:'';position:absolute;top:0;left:0;width:34px;height:2px;background:var(--red);}
.tick-label{font-size:var(--fs-meta);letter-spacing:.24em;color:var(--ash-dim);text-transform:uppercase;font-weight:700;}
.tick-num{
  font-family:var(--display);font-weight:900;font-size:clamp(2.1rem,4.4vw,2.9rem);line-height:1;
  color:var(--bone);font-variant-numeric:tabular-nums;
}
.tick-num small{font-size:.5em;color:var(--ash);}
.tick-num--red{color:var(--red-hot);}
.tick-foot{font-size:var(--fs-label);color:var(--ash-dim);display:flex;align-items:center;gap:.45rem;}
.ticker-note{margin-top:1.2rem;font-size:var(--fs-caption);color:var(--ash-dim);letter-spacing:.02em;line-height:var(--lh-prose);letter-spacing:var(--ls-prose);}

/* ============================================================
   BREAKDOWN
   ============================================================ */
.breakdown{padding:8rem 0;background:var(--char-850);}
.breakdown-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;}
.bd-card{
  background:var(--char-800);border:1px solid rgba(244,241,234,.07);border-radius:3px;padding:2rem 1.8rem;
  transition:opacity .2s var(--ease);
}
.bd-title{font-size:var(--fs-body);letter-spacing:.22em;text-transform:uppercase;}
.bd-note{color:var(--ash-dim);font-size:var(--fs-body);margin-top:.6rem;line-height:var(--lh-prose);letter-spacing:var(--ls-prose);}
/* Component lists. These replaced percentage bars: the page should not imply
   measurements nobody took. */
.spec-list{margin-top:1.6rem;display:flex;flex-direction:column;}
.spec-list li{
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding:.72rem 0;border-bottom:1px dotted rgba(244,241,234,.1);
}
.spec-list li:last-child{border-bottom:0;}
.spec-list li::before{
  content:'';flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--red);transform:translateY(-2px);
}
.spec-list--gold li::before{background:var(--gold);}
.spec-name{font-size:var(--fs-body-lg);color:var(--bone);font-weight:700;}
.spec-note{margin-left:auto;font-size:var(--fs-caption);color:var(--ash-dim);text-align:right;line-height:var(--lh-prose);letter-spacing:var(--ls-prose);}

/* ============================================================
   BUILDER
   ============================================================ */
.builder{padding:8rem 0;background:var(--char-900);}
.builder-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:2rem;align-items:start;}
.builder-sub{
  font-size:var(--fs-label);letter-spacing:.28em;color:var(--red-hot);text-transform:uppercase;
  margin:2.2rem 0 1rem;font-family:var(--sans);font-weight:800;
}
.builder-main > .builder-sub:first-child{margin-top:0;}

.plate-list{display:flex;flex-direction:column;gap:.7rem;}
.plate-row{
  display:grid;grid-template-columns:1fr auto auto;gap:1.2rem;align-items:center;
  background:var(--char-800);border:1px solid rgba(244,241,234,.07);border-radius:3px;
  padding:1.05rem 1.2rem;transition:border-color .3s,background .3s;
}
.plate-row.is-picked{border-color:rgba(193,18,31,.55);background:linear-gradient(90deg,rgba(193,18,31,.09),var(--char-800) 42%);}
.plate-name{display:block;font-weight:700;font-size:var(--fs-body-lg);}
.plate-desc{display:block;color:var(--ash-dim);font-size:var(--fs-body-sm);margin-top:.2rem;line-height:var(--lh-prose);letter-spacing:var(--ls-prose);}
.plate-price{font-weight:800;color:var(--gold);font-size:var(--fs-body-lg);}
.stepper{display:flex;align-items:center;gap:.2rem;background:var(--char-700);border-radius:2px;padding:.25rem;}
.step{
  width:30px;height:30px;border:0;background:transparent;color:var(--ash);
  font-size:var(--fs-subtitle);line-height:1;border-radius:2px;
  transition:background .2s,color .2s,transform .1s var(--ease);
}
/* A press should feel pressed. 100ms, because feedback slower than the finger
   reads as lag rather than as response. */
.step:not(:disabled):active{transform:scale(.88);background:rgba(193,18,31,.22);color:var(--bone);}
.step:disabled{opacity:.3;cursor:not-allowed;}
.step-qty{
  min-width:26px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums;color:var(--bone);
}
/* The count confirms the tap even when the finger is covering the button. */
.step-qty.is-bumped{animation:qty-tick .22s var(--ease);}
@keyframes qty-tick{
  0%{transform:translateY(0);color:var(--bone);}
  40%{transform:translateY(-2px);color:var(--gold-lt);}
  100%{transform:translateY(0);color:var(--bone);}
}

.addon-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.6rem;}
.addon-list label{
  display:flex;align-items:center;gap:.7rem;cursor:pointer;
  background:var(--char-800);border:1px solid rgba(244,241,234,.07);border-radius:3px;padding:.85rem 1rem;
  font-size:var(--fs-body);transition:border-color .25s,background .25s;
}

.addon-list input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:17px;height:17px;border:1px solid rgba(244,241,234,.28);border-radius:2px;
  background:var(--char-700);position:relative;transition:background .2s,border-color .2s;
}
.addon-list input:checked{background:var(--red);border-color:var(--red);}
.addon-list input:checked::after{
  content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.addon-list b{margin-left:auto;color:var(--gold);font-size:var(--fs-body-sm);}
.addon-list label.is-on{border-color:rgba(193,18,31,.5);background:rgba(193,18,31,.07);}

.slot-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.6rem;}
.slot{cursor:pointer;position:relative;}
.slot input{position:absolute;opacity:0;pointer-events:none;}
.slot span{
  display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem;
  background:var(--char-800);border:1px solid rgba(244,241,234,.07);border-radius:3px;
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);
  transition:border-color .25s,color .25s,background .25s;
}
.slot span b{font-family:var(--display);font-size:var(--fs-subtitle);letter-spacing:.04em;color:var(--bone);}
.slot input:checked + span{border-color:var(--red);background:rgba(193,18,31,.09);color:var(--bone);}
.slot input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px;}

/* step 4 — who's ordering */
.who{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
/* Announced, never drawn. Used for the one spoken summary of the batch — see
   the note on #batch-status in index.html. clip-path rather than display:none,
   which assistive tech skips entirely. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.field{display:flex;flex-direction:column;gap:.45rem;}
.field--wide{grid-column:1 / -1;}
.field-label{
  font-size:var(--fs-meta);font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim);
}
.field-label em{font-style:normal;font-weight:700;letter-spacing:.1em;opacity:.7;}
.field input{
  background:var(--char-800);border:1px solid rgba(244,241,234,.09);border-radius:3px;
  padding:.9rem 1rem;color:var(--bone);font:inherit;font-size:var(--fs-body-lg);
  transition:border-color .25s,background .25s;
}
.field input::placeholder{color:var(--ash-dim);}
/* These three fields used to drop the outline entirely and signal focus with a
   1px border swap, while every other control on the site gets a 2px gold ring.
   The border change is worth keeping — it reads well for mouse users — but the
   ring comes back for keyboard, so tabbing into the order form looks like
   tabbing anywhere else. */
.field input:focus{border-color:var(--gold);background:var(--char-700);}
.field input:focus:not(:focus-visible){outline:none;}
.field input.is-bad{border-color:var(--red-hot);}

.receipt-msg{
  margin:.2rem 0 .9rem;font-size:var(--fs-body-sm);line-height:1.45;
}
.receipt-msg.is-ok{color:var(--gold-lt);}
.receipt-msg.is-warn{color:var(--red-hot);}
.btn-gold{background:var(--gold);color:#0a0a0b;}

.builder-receipt{position:sticky;top:110px;}
.receipt-inner{
  background:linear-gradient(180deg,var(--char-800),var(--char-850));
  border:1px solid rgba(244,241,234,.1);border-radius:3px;padding:1.8rem 1.6rem;
  box-shadow:0 40px 90px -50px rgba(0,0,0,1);
}
.receipt-eyebrow{
  display:block;font-size:var(--fs-meta);letter-spacing:.32em;color:var(--gold);font-weight:800;text-transform:uppercase;
  padding-bottom:1.1rem;border-bottom:1px dashed rgba(244,241,234,.16);
}
.cap-wrap{margin:1.2rem 0 1.3rem;}
.cap-bar{height:6px;background:rgba(244,241,234,.1);border-radius:99px;overflow:hidden;}
/* The fill travels toward the cap rather than jumping to it: the batch filling
   up is the one piece of state the whole builder is organised around, and a
   snap reads as a redraw instead of as progress. */
.cap-bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--red),var(--red-hot));
  transition:width .42s var(--ease),background .3s;
}
.cap-bar.is-full i{background:linear-gradient(90deg,var(--gold),var(--gold-lt));}
/* Hitting 8 is the moment the batch closes. The bar says so once, then rests. */
.cap-bar.is-full{box-shadow:0 0 0 1px rgba(212,175,55,.35);}
.cap-text{margin-top:.6rem;font-size:var(--fs-caption);color:var(--ash);letter-spacing:.04em;line-height:var(--lh-prose);letter-spacing:var(--ls-prose);}
.cap-text b{color:var(--bone);}
.cap-warn{margin-top:.5rem;font-size:var(--fs-caption);color:var(--gold-lt);font-weight:700;}
.cap-warn:not([hidden]){animation:cap-close .34s var(--ease) both;}
@keyframes cap-close{
  from{opacity:0;transform:translateY(-3px);}
  to{opacity:1;transform:none;}
}

.receipt-lines{display:flex;flex-direction:column;gap:.55rem;min-height:3.5rem;}
.receipt-lines li{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-body);color:var(--ash);}
.receipt-lines li b{color:var(--bone);font-weight:700;}
/* Only lines that just arrived animate. Re-running this on every repaint would
   make the whole receipt twitch each time a quantity ticks. */
.receipt-lines li.is-new{animation:line-in .3s var(--ease) both;}
@keyframes line-in{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:none;}
}
.receipt-empty{color:var(--ash-dim);font-style:italic;}
.receipt-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px dashed rgba(244,241,234,.16);
  font-size:var(--fs-label);letter-spacing:.28em;color:var(--ash-dim);text-transform:uppercase;
}
.receipt-total b{
  font-family:var(--display);font-size:2rem;color:var(--gold);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
/* The total is the number the customer is actually deciding on. When it moves,
   it says so — brightening rather than sliding, so the digits stay readable
   mid-change and the baseline never shifts. */
.receipt-total b.is-bumped{animation:total-tick .28s var(--ease);}
@keyframes total-tick{
  0%{color:var(--gold);}
  35%{color:var(--gold-lt);text-shadow:0 0 18px rgba(212,175,55,.45);}
  100%{color:var(--gold);text-shadow:none;}
}
.receipt-slot{font-size:var(--fs-caption);color:var(--ash-dim);margin:.7rem 0 1.3rem;}
.receipt-slot span{color:var(--bone);font-weight:700;}
.receipt-inner .btn{margin-bottom:.6rem;}
.receipt-fine{font-size:var(--fs-label);color:var(--ash-dim);margin-top:.6rem;text-align:center;line-height:var(--lh-prose);letter-spacing:var(--ls-prose);}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding:8rem 0;background:var(--char-850);}
.faq-list{display:flex;flex-direction:column;gap:.6rem;}
.faq-item{
  background:var(--char-800);border:1px solid rgba(244,241,234,.07);border-radius:3px;
  transition:border-color .3s;
}
.faq-item[open]{border-color:rgba(193,18,31,.45);}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.15rem 1.3rem;
  font-weight:700;font-size:var(--fs-body-lg);display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
/* Drawn icon, not a typed plus sign: one stroke weight, one cap style. */
.faq-item summary::after{
  content:'';flex:none;width:15px;height:15px;background:var(--red-hot);
  -webkit-mask:var(--icon-plus) center/contain no-repeat;
          mask:var(--icon-plus) center/contain no-repeat;
  transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-body{padding:0 1.3rem 1.3rem;color:var(--ash);font-size:var(--fs-body-lg);max-width:70ch;line-height:var(--lh-prose);letter-spacing:var(--ls-prose);}
.faq-body a{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px;}

/* ============================================================
   GRILL-PLATE FOOTER
   ============================================================ */
.grill-footer{position:relative;background:var(--char-900);padding-top:5rem;overflow:hidden;}
.grill-plate{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,8,10,.94),rgba(8,8,10,.99)),
    repeating-linear-gradient(92deg,#151519 0 2px,#0e0e12 2px 7px);
}
.grill-heat{
  position:absolute;left:50%;top:-6%;width:140%;height:46%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(230,51,41,.34),rgba(193,18,31,.08) 60%,transparent 78%);
  filter:blur(28px);opacity:.8;
}
.grill-scrape{
  position:absolute;inset:0;opacity:.35;
  background:repeating-linear-gradient(97deg,transparent 0 26px,rgba(255,255,255,.035) 26px 27px);
}
.footer-grid{
  position:relative;display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem;
  padding-bottom:3rem;border-bottom:1px solid rgba(244,241,234,.08);
}
.footer-logo{width:min(260px,80%);height:auto;filter:drop-shadow(0 4px 18px rgba(193,18,31,.3));}
.footer-tagline{font-family:var(--display);color:var(--gold);margin-top:1rem;font-size:var(--fs-subtitle);}
.footer-foot{color:var(--ash-dim);font-size:var(--fs-body-sm);margin-top:.9rem;max-width:50ch;line-height:var(--lh-prose);letter-spacing:var(--ls-prose);}
.footer-col h4{
  font-family:var(--sans);font-size:var(--fs-meta);letter-spacing:.3em;color:var(--ash-dim);
  text-transform:uppercase;margin-bottom:1rem;font-weight:800;
}
.footer-col a{display:block;color:var(--ash);font-size:var(--fs-body);padding:.3rem 0;transition:color .25s,transform .25s;}

.footer-status{display:flex;align-items:center;gap:.55rem;font-size:var(--fs-body);color:var(--bone);font-weight:700;}
.footer-note{color:var(--ash-dim);font-size:var(--fs-body-sm);margin-top:.6rem;}
.footer-base{
  position:relative;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.6rem 0 2rem;font-size:var(--fs-label);letter-spacing:.16em;color:var(--ash-dim);text-transform:uppercase;
}

/* ============================================================
   HOVER — gated. A tap on a touch screen leaves an ungated :hover
   stuck until you tap elsewhere, so pointer-fine devices only.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--red-hot);transform:translateY(-2px);box-shadow:0 12px 34px -12px rgba(230,51,41,.75);}
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold-lt);transform:translateY(-2px);}
  .brand-link:hover .brand-logo{filter:drop-shadow(0 2px 16px rgba(230,51,41,.6));}
  .nav-link:hover{color:var(--bone);}
  .nav-link:hover::after{transform:scaleX(1);}
  .nav-btn:hover{background:var(--red-hot);transform:translateY(-1px);}
  .ledger-row:hover{background:rgba(0,0,0,.09);transform:translateX(.8rem);}
  .menu-card:hover{transform:translateY(-3px);border-color:rgba(216,180,90,.42);}
  .menu-card:hover::after{opacity:1;}
  .menu-card:hover .card-img{transform:scale(1.03);}
  .step:hover:not(:disabled){background:var(--red);color:#fff;}
  .addon-list label:hover{border-color:rgba(216,180,90,.4);}
  .btn-gold:hover{background:var(--gold-lt);transform:translateY(-2px);}
  .footer-col a:hover{color:var(--red-hot);transform:translateX(3px);}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  .builder-grid{grid-template-columns:1fr;}
  .who{grid-template-columns:1fr;}
  .builder-receipt{position:static;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .ledger-row{grid-template-columns:1fr;gap:.4rem;}
  .ledger-val{justify-self:start;}
}
@media (max-width:820px){
  .nav-links{
    position:fixed;inset:0 0 auto 0;flex-direction:column;align-items:flex-start;gap:1.4rem;
    background:rgba(8,8,10,.97);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    padding:6.2rem 8vw 2.4rem;transform:translateY(-100%);transition:transform .4s var(--ease);
    border-bottom:1px solid rgba(244,241,234,.08);
  }
  .nav-links.is-open{transform:none;}
  .nav-link{font-size:1rem;}
  .mobile-toggle{display:block;z-index:2;}
  .take-track{height:400vh;}
  /* the stack sits over the copy on narrow screens — ground it from the bottom */
  .hud-scrim{
    background:linear-gradient(180deg,rgba(8,8,10,.55) 0%,rgba(8,8,10,.82) 42%,rgba(8,8,10,.94) 100%);
  }
  .brand-logo{width:96px;}
  .navbar.is-stuck .brand-logo{width:84px;}
  .take-hud{padding-top:7rem;}
  .tray{width:min(40vh,250px);height:min(56vh,350px);}
}
/* Touch targets. The visual size stays as designed; an invisible pseudo
   element widens the hit area to the 44px WCAG 2.5.5 / Apple HIG minimum.
   The steppers are how an order gets placed - they must not be fiddly. */
@media (pointer:coarse){
  .step{position:relative;}
  .step::after{
    content:'';position:absolute;left:50%;top:50%;
    width:44px;height:44px;transform:translate(-50%,-50%);
  }
  .mobile-toggle{min-width:44px;min-height:44px;}
  .faq-item summary{min-height:44px;}
}

@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
  .plate-row{grid-template-columns:1fr auto;row-gap:.7rem;}
  .plate-price{grid-column:1;grid-row:2;align-self:center;}
  .stepper{grid-column:2;grid-row:2;}
  .brand-sub{display:none;}
  .ch-line{font-size:var(--fs-body-lg);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rig,.tray,.tray-face,.pl,.tray-gloss,.tray-rim,.tray-lid,.steam{will-change:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .take-track{height:auto;}
  .take-stage{position:relative;height:auto;min-height:100vh;min-height:100dvh;padding:7rem 0 3rem;}
  .chapter{position:relative;top:auto;opacity:1;visibility:visible;transform:none;margin-bottom:2rem;}
  .chapters{max-width:none;}
  .reveal{opacity:1;transform:none;}

  /* The blanket rule above removes movement, which is right — but it would also
     silence the builder, and someone who asked for less motion still needs to
     know their tap registered. These are the same three confirmations, rebuilt
     without travel: colour only, no transform, no shifting baseline. */
  .cap-bar i{transition:width .001ms,background .28s !important;}
  .receipt-total b.is-bumped{animation:total-tick-flat .4s steps(1) !important;}
  @keyframes total-tick-flat{0%,55%{color:var(--gold-lt);}100%{color:var(--gold);}}
  .step-qty.is-bumped{animation:qty-tick-flat .4s steps(1) !important;}
  @keyframes qty-tick-flat{0%,55%{color:var(--gold-lt);}100%{color:var(--bone);}}
  .step:not(:disabled):active{transform:none;background:rgba(193,18,31,.3);color:var(--bone);}
  .receipt-lines li.is-new{animation:none;}
  .cap-warn:not([hidden]){animation:none;}
}