/* BOOM בורגר: פחם, גחלת ולהבה */
:root {
  --coal: #000000;
  --panel: #130c08;
  --panel-2: #1c120c;
  --ember: #ff5a1f;
  --flame: #ffb547;
  --bun: #e39a4c;
  --bone: #f4ece2;
  --ash: #a39790;
  --line: rgba(255, 140, 70, .22);
  --line-2: rgba(255, 180, 110, .45);
  --glow: 0 0 .5em rgba(255, 120, 40, .55), 0 0 1.4em rgba(255, 90, 31, .35);

  --f-num: "Barlow Condensed", "Karantina", sans-serif;
  --f-disp: "Karantina", "Barlow Condensed", sans-serif;
  --f-text: "IBM Plex Sans Hebrew", system-ui, sans-serif;

  --gut: clamp(16px, 4vw, 56px);
  --bar-h: 64px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--coal); overflow-x: clip; }   /* the page never drifts sideways on a phone */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--coal); color: var(--bone);
  font: 400 17px/1.65 var(--f-text);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

.skip { position: fixed; top: 8px; right: 8px; z-index: 100; background: var(--ember); color: #000; padding: 10px 16px; font-weight: 600; transform: translateY(-160%); transition: transform .2s; }
.skip:focus { transform: none; }

/* ---------- HUD frame ---------- */
.hud { position: fixed; inset: 0; z-index: 30; pointer-events: none; transition: opacity .6s; }
.hud__c { position: absolute; width: 26px; height: 26px; border: 1.5px solid var(--line-2); }
.hud__c--tr { top: calc(var(--bar-h) + 8px); right: 14px; border-width: 1.5px 1.5px 0 0; }
.hud__c--tl { top: calc(var(--bar-h) + 8px); left: 14px; border-width: 1.5px 0 0 1.5px; }
.hud__c--br { bottom: 14px; right: 14px; border-width: 0 1.5px 1.5px 0; }
.hud__c--bl { bottom: 14px; left: 14px; border-width: 0 0 1.5px 1.5px; }
.hud__ruler { position: absolute; left: 60px; right: 60px; bottom: 20px; height: 8px;
  background: repeating-linear-gradient(90deg, rgba(255,180,110,.35) 0 1px, transparent 1px 12px); opacity: .5;
  -webkit-mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.hud__ruler span { position: absolute; top: -4px; right: 0; transform: translateX(calc(var(--prog, 0) * (120px - 100vw))); width: 2px; height: 16px; background: var(--ember); box-shadow: var(--glow); }
.hud__meta { position: absolute; bottom: 34px; font: 600 12px/1 var(--f-num); letter-spacing: .08em; color: var(--ash); }
.hud__meta b { color: var(--flame); font-weight: 700; }
.hud__meta--a { right: 44px; }
.hud__meta--b { left: 44px; direction: ltr; }
.hud__meta--b span { color: var(--flame); }
body.is-after .hud { opacity: .35; }

/* ---------- Top bar ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--bar-h); display: flex; align-items: center; gap: 24px; padding: 0 var(--gut);
  background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,0)); transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.bar.is-solid { background: rgba(8, 5, 3, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--line); }
.bar__mark { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.bar__boom { font: italic 800 30px/0.9 var(--f-num); letter-spacing: .02em; color: var(--bone); text-shadow: var(--glow); }
.bar__sub { font: 500 11px/1.3 var(--f-text); color: var(--flame); letter-spacing: .04em; }
.nav { margin-inline-start: auto; }
.nav ol { display: flex; gap: clamp(10px, 1.6vw, 26px); }
.nav a { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; font-size: 14px; color: rgba(244,236,226,.78); padding: 6px 0; position: relative; transition: color .2s; }
.nav a span { font: 600 12px var(--f-num); color: var(--ember); }
.nav a:hover, .nav a.is-here { color: var(--bone); }
.nav a.is-here::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--ember); box-shadow: var(--glow); }
.bar__tools { display: flex; align-items: center; gap: 8px; }
.sound, .cart, .menu-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--line); background: rgba(19,12,8,.6); border-radius: 19px; transition: border-color .2s, background .2s; }
.sound:hover, .cart:hover, .menu-btn:hover { border-color: var(--line-2); }
.sound svg, .cart svg { width: 20px; height: 20px; fill: none; stroke: var(--bone); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sound__body { fill: var(--bone); stroke: none; }
.sound__mute { display: none; stroke: var(--ember); }
.sound[aria-pressed="false"] .sound__wave { display: none; }
.sound[aria-pressed="false"] .sound__mute { display: inline; }
.sound__label { font-size: 13px; }
.sound.is-ask { border-color: var(--ember); animation: ask 1.4s var(--ease) infinite; }
@keyframes ask { 50% { box-shadow: 0 0 0 6px rgba(255,90,31,.18); } }
.cart b { font: 700 14px var(--f-num); min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 9px; background: var(--ember); color: #000; }
.cart.is-bump { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.18); } }
.menu-btn { display: none; width: 42px; padding: 0; justify-content: center; flex-direction: column; gap: 5px; }
.menu-btn i { display: block; width: 18px; height: 1.5px; background: var(--bone); transition: transform .3s; }
.menu-btn[aria-expanded="true"] i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Film (part 1) ---------- */
/* the film's real length is set by app.js; until then it already pushes part 2 far down, so its lazy images wait */
.film { position: relative; height: 2400vh; }
.film__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.film__stick { background: #000; }
/* a tiny canvas stretched to full screen is its own blur: no CSS filter, nothing to recompute */
#ambient { position: absolute; inset: -6%; width: 112%; height: 112%; display: block; image-rendering: auto; }
.film__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 55% at 50% 100%, rgba(255, 90, 31, .22), transparent 70%), radial-gradient(90% 80% at 50% 50%, transparent 40%, rgba(0,0,0,.6)); }
#stage { position: absolute; display: block; transform: translateZ(0);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 90%, transparent);
  mask-composite: intersect; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.flash { position: absolute; inset: 0; pointer-events: none; opacity: var(--fl, 0);
  background: radial-gradient(60% 60% at 50% 50%, rgba(255, 245, 225, .95), rgba(255, 150, 60, .55) 45%, rgba(255, 90, 31, 0) 80%); mix-blend-mode: screen; }
.lb { position: absolute; left: 0; right: 0; height: 12vh; background: #000; pointer-events: none; transform: scaleY(var(--lb, .35)); }
.lb--t { top: 0; transform-origin: top; }
.lb--b { bottom: 0; transform-origin: bottom; }
.kin { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: .02em; pointer-events: none; perspective: 1000px; visibility: hidden;
  font: italic 800 clamp(110px, 18vw, 300px)/1 var(--f-num); color: #fff3e4; direction: ltr; letter-spacing: -.01em;
  text-shadow: 0 0 .04em #fff, 0 0 .18em rgba(255, 160, 70, .9), 0 0 .5em rgba(255, 90, 31, .6); }
.kin--he { direction: rtl; font: 700 clamp(100px, 15vw, 250px)/1 var(--f-disp); }
.kin.is-on { visibility: visible; }
.kin span { display: inline-block; opacity: 0; transform-style: preserve-3d; will-change: transform, opacity; }
.film__scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55)),
    linear-gradient(270deg, rgba(0,0,0,calc(var(--scrim-side, .35) * .9)) 0%, transparent 38%),
    linear-gradient(0deg, rgba(0,0,0,.55) 0%, transparent 28%); }
.film__grain { position: absolute; inset: 0; pointer-events: none; opacity: .05;
  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='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.ov { position: absolute; inset: 0; pointer-events: none; padding: calc(var(--bar-h) + 6vh) var(--gut) 12vh; opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s; }
.ov.is-on { opacity: var(--cut, 1); visibility: visible; transition: opacity .35s; }
.ov a, .ov button { pointer-events: auto; }

/* Chapter title: big charred number + word */
.ch { position: absolute; top: calc(var(--bar-h) + 5vh); right: var(--gut); display: flex; align-items: baseline; gap: .18em;
  font: 700 clamp(52px, 7.4vw, 120px)/.85 var(--f-disp); color: var(--bone); text-shadow: 0 2px 30px rgba(0,0,0,.6);
  transform: translateY(var(--ch-y, 0)); opacity: var(--ch-o, 1); }
.ch b { font: italic 800 .62em/1 var(--f-num); color: var(--flame); text-shadow: var(--glow); }
.ch span { font: 600 .45em/1 var(--f-num); color: var(--ember); letter-spacing: -.05em; }

.card { position: absolute; right: var(--gut); max-width: 340px; padding: 18px 20px 18px 22px; font-size: 15.5px; line-height: 1.55; color: rgba(244,236,226,.86);
  background: linear-gradient(90deg, rgba(12,7,4,.55), rgba(12,7,4,.9)); border-right: 2px solid var(--ember);
  opacity: 0; transform: translateY(var(--dy, 20px)); will-change: opacity, transform; }
.card b { display: block; font: 700 30px/1.05 var(--f-disp); color: var(--bone); margin-bottom: 4px; }
.card--side { top: 46vh; }
.card--side + .card--side { top: 46vh; }

/* Hero */
.ov--hero { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(7vh + 84px); }
.ov__kicker { font-size: 15px; color: var(--flame); margin-bottom: 8px; }
.hero__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .14em; line-height: .78; }
.hero__title { max-width: 46vw; }
.hero__boom { font: italic 800 clamp(96px, 12.5vw, 210px)/.78 var(--f-num); color: var(--bone); letter-spacing: -.01em;
  text-shadow: 0 0 .06em rgba(255, 200, 140, .9), 0 0 .3em rgba(255, 90, 31, .55), 0 .05em .5em rgba(0,0,0,.6); direction: ltr; }
.hero__slash { font: 700 clamp(46px, 7vw, 110px)/1 var(--f-num); color: var(--ember); }
.hero__word { font: 700 clamp(64px, 8vw, 136px)/.8 var(--f-disp); color: var(--bone); }
.hero__lede { max-width: min(30em, 34vw); margin-top: 18px; font-size: clamp(16px, 1.4vw, 19px); color: rgba(244,236,226,.84); }
.hero__cue { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; color: var(--ash); }
.hero__cue i { width: 1.5px; height: 46px; background: linear-gradient(var(--ember), transparent); position: relative; overflow: hidden; }
.hero__cue i::after { content: ""; position: absolute; inset: 0; background: var(--flame); animation: drip 1.8s var(--ease) infinite; }
@keyframes drip { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.is-intro .ov--hero > * { opacity: 0; transform: translateY(26px); }
.is-entering .ov--hero > * { transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.is-entering .ov--hero > :nth-child(2) { transition-delay: .12s; }
.is-entering .ov--hero > :nth-child(3) { transition-delay: .3s; }
.is-entering .ov--hero > :nth-child(4) { transition-delay: .6s; }

/* Chapter 2: layer list lights up as each one lands */
.stack { position: absolute; left: var(--gut); bottom: 13vh; display: flex; flex-direction: column-reverse; gap: 6px; }
.stack li { font: 600 15px/1 var(--f-text); color: rgba(244,236,226,.28); padding: 7px 14px 7px 0; border-left: 2px solid rgba(255,140,70,.15); padding-left: 14px; transition: color .25s, border-color .25s, text-shadow .25s; }
.stack li.is-lit { color: var(--bone); border-color: var(--ember); text-shadow: 0 0 14px rgba(255,120,40,.5); }

/* Chapter 4: callouts like the mockup */
.callouts { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.callouts line { stroke: rgba(255, 190, 130, .7); stroke-width: 1.2; stroke-dasharray: var(--len) var(--len); stroke-dashoffset: calc(var(--len) * (1 - var(--d, 0))); }
.callouts circle { fill: var(--ember); filter: drop-shadow(0 0 4px var(--ember)); opacity: var(--d, 0); }
.layers { position: absolute; inset: 0; }
.layers li { position: absolute; left: var(--gut); top: var(--y, 50%); transform: translateY(-50%) translateX(calc((1 - var(--d, 0)) * -14px)); opacity: var(--d, 0);
  font: 700 22px/1 var(--f-disp); color: var(--bone); white-space: nowrap; }
.layers small { display: block; font: 400 12px/1.3 var(--f-text); color: var(--ash); margin-top: 3px; }
.temp { position: absolute; right: var(--gut); top: 48vh; text-align: right; }
.temp b { font: italic 800 clamp(64px, 8vw, 128px)/.85 var(--f-num); color: var(--flame); text-shadow: var(--glow); }
.temp span { font: 700 clamp(28px, 3vw, 46px)/1 var(--f-num); color: var(--ember); }
.temp small { display: block; font-size: 13px; color: var(--ash); margin-top: 6px; }

/* Chapter 5: brand on the lid + finale */
.stamp { position: absolute; left: var(--sx, 44%); top: var(--sy, 40%); width: var(--sw, 24%); transform: translate(-50%, -50%) perspective(900px) rotateX(var(--srx, 48deg)) scale(var(--ss, .9));
  text-align: center; opacity: var(--so, 0); mix-blend-mode: screen; }
.stamp span { display: block; font: italic 800 clamp(40px, 7vw, 120px)/.9 var(--f-num); color: #ffd9b0; text-shadow: 0 0 .15em var(--ember), 0 0 .5em rgba(255,90,31,.6); letter-spacing: .02em; }
.stamp i { display: block; font-style: normal; font-size: clamp(10px, 1vw, 15px); letter-spacing: .5em; color: var(--ember); margin-top: .3em; }
.finale { position: absolute; right: var(--gut); bottom: 13vh; max-width: 440px; padding: 22px 24px; background: rgba(8,5,3,.84); border-right: 2px solid var(--ember); opacity: var(--fo, 0); transform: translateY(calc((1 - var(--fo, 0)) * 24px)); }
.finale__line { font: 700 clamp(34px, 3.6vw, 56px)/1 var(--f-disp); margin-bottom: 18px; }
.finale__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.finale:not(.is-live) a { pointer-events: none; }

/* Readout + rail + loader */
.readout { position: absolute; right: var(--gut); bottom: 11vh; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 6px; opacity: var(--ro, 0); transition: opacity .3s; }
.readout b { font: italic 800 clamp(44px, 5vw, 78px)/.9 var(--f-num); color: var(--bone); text-shadow: var(--glow); font-variant-numeric: tabular-nums; }
.readout span, .temp span, .odo__u, .grill__meter span { direction: ltr; unicode-bidi: isolate; }
.readout span { font: 700 22px/1 var(--f-num); color: var(--ember); }
.readout small { grid-column: 1 / -1; font-size: 12.5px; color: var(--ash); }
.readout__bar { grid-column: 1 / -1; display: block; height: 2px; width: 180px; background: rgba(255,140,70,.18); margin-top: 8px; }
.readout__bar i { display: block; height: 100%; width: calc(var(--rp, 0) * 100%); background: var(--ember); box-shadow: var(--glow); }

.rail { position: absolute; left: var(--gut); top: calc(var(--bar-h) + 6vh); display: flex; flex-direction: column; gap: 10px; opacity: var(--rail-o, 0); transition: opacity .4s; }
.rail li { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ash); direction: ltr; }
.rail li button { direction: rtl; min-width: 64px; padding: 4px 0; border: 0; background: none; font: inherit; color: inherit; text-align: right; cursor: pointer; transition: color .2s; }
.rail li button:hover { color: var(--flame); }
.rail li i { width: 54px; height: 2px; background: rgba(255,140,70,.18); position: relative; }
.rail li i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--ember); }
.rail li.is-on button { color: var(--bone); }
.rail { pointer-events: auto; z-index: 3; }

/* Play the whole film */
.play { margin-top: 22px; align-self: flex-start; }
.play svg, .filmctl svg { width: 18px; height: 18px; fill: currentColor; }
.filmctl { position: absolute; z-index: 4; left: 50%; bottom: 7vh; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: 21px; background: rgba(8, 5, 3, .7); color: var(--bone); font: 600 14px var(--f-text); }
.filmctl:hover { border-color: var(--flame); }
.skipfilm { position: absolute; z-index: 4; right: var(--gut); bottom: 7vh; display: inline-flex; align-items: center; height: 42px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 21px; background: rgba(8, 5, 3, .55); color: rgba(244, 236, 226, .85); font: 500 14px var(--f-text); text-decoration: none; transition: border-color .2s, color .2s; }
.skipfilm:hover { border-color: var(--flame); color: var(--bone); }
.skipfilm.is-gone { opacity: 0; pointer-events: none; transition: opacity .4s; }
.readout { bottom: 17vh !important; }
.skipfilm::after { content: ""; width: 8px; height: 8px; margin-inline-start: 10px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.filmctl .i-play, .filmctl.is-paused .i-pause { display: none; }
.filmctl.is-paused .i-play { display: inline; }

/* Every layer: hotspots, spotlight and the layer card */
.hots { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.hots.is-on { opacity: 1; }
.hots button { position: absolute; left: var(--x); top: var(--y); width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; padding: 0;
  border: 2px solid #ffd2a6; background: radial-gradient(circle, #fff3e4 0 22%, rgba(255, 90, 31, .55) 30%, rgba(255, 90, 31, .15) 70%);
  box-shadow: 0 0 0 0 rgba(255, 140, 60, .7), 0 0 18px rgba(255, 90, 31, .8); cursor: pointer; pointer-events: none; animation: hot 1.8s var(--ease) infinite; transition: transform .25s var(--ease), opacity .3s; }
.hots.is-on button { pointer-events: auto; }
.hots button:nth-child(odd) { animation-delay: .5s; }
.hots button:hover, .hots button:focus-visible { transform: scale(1.35); }
.hots.is-focus button { opacity: 0; pointer-events: none; }
@keyframes hot { 70% { box-shadow: 0 0 0 16px rgba(255, 140, 60, 0), 0 0 18px rgba(255, 90, 31, .8); } 100% { box-shadow: 0 0 0 0 rgba(255, 140, 60, 0), 0 0 18px rgba(255, 90, 31, .8); } }
.spot { position: absolute; inset: 0; pointer-events: none; opacity: var(--spot-o, 0);
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), transparent 0, transparent 9vh, rgba(0, 0, 0, .78) 30vh); }
.layers li { cursor: pointer; pointer-events: auto; }
.layers li:hover { color: var(--flame); }
.lcard { position: absolute; z-index: 5; right: var(--gut); top: 50%; width: min(340px, 86vw); padding: 14px 14px 18px; pointer-events: auto;
  background: linear-gradient(180deg, rgba(28, 18, 12, .96), rgba(12, 7, 4, .96)); border: 1px solid var(--line-2); border-radius: 8px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 50px -10px rgba(255, 90, 31, .45);
  transform: translateY(-50%) perspective(1000px) rotateY(var(--ry, -75deg)) translateZ(var(--tz, -120px)); transform-origin: left center; opacity: 0;
  transition: transform .7s var(--ease), opacity .4s; }
.lcard.is-open { --ry: 0deg; --tz: 0px; opacity: 1; }
.lcard img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 5px; margin-bottom: 10px; }
.lcard b { font: italic 800 40px/1 var(--f-num); color: transparent; -webkit-text-stroke: 1.2px var(--flame); }
.lcard h3 { font: 700 34px/1 var(--f-disp); margin: 2px 0 6px; }
.lcard p { font-size: 15px; color: rgba(244, 236, 226, .82); }
.lcard__x { position: absolute; top: 20px; left: 20px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .6); color: var(--bone); font-size: 20px; line-height: 1; z-index: 1; }
.ov.is-layer .temp { opacity: 0; transition: opacity .3s; }

/* Part 2: cards tilt toward the cursor; a layer card opens on click */
.dish, .cut { transform-style: preserve-3d; }
.tilt { transition: transform .5s var(--ease); }
.cut { cursor: pointer; transition: transform .5s var(--ease); transform: perspective(900px) rotateX(var(--tiltx, 0deg)) rotateY(var(--tilty, 0deg)); }
.cut figure { transition: transform .6s var(--ease), box-shadow .6s; }
.cut p { max-height: 4.8em; overflow: hidden; transition: max-height .6s var(--ease), color .3s; }
.cut.is-open figure { transform: translateZ(40px) scale(1.04); box-shadow: 0 30px 60px -20px rgba(255, 90, 31, .6); }
.cut.is-open p { max-height: 20em; color: var(--bone); }
.cut.is-open > b { -webkit-text-stroke-color: #fff; text-shadow: var(--glow); }
.loader { position: absolute; left: 50%; bottom: 3.6vh; transform: translateX(-50%); width: 220px; text-align: center; font-size: 12px; color: var(--ash); transition: opacity .5s; }
.loader i { display: block; height: 2px; width: calc(var(--lp, 0) * 100%); background: var(--ember); margin: 0 auto 6px; box-shadow: var(--glow); }
.loader.is-done { opacity: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; font: 600 16px var(--f-text); text-decoration: none; border-radius: 4px; border: 1px solid transparent; transition: transform .2s var(--ease), box-shadow .3s, background .2s, border-color .2s; }
.btn--fire { background: linear-gradient(180deg, #ff7a3a, var(--ember)); color: #140600; box-shadow: 0 0 0 1px rgba(255,180,110,.4) inset, 0 10px 34px -10px rgba(255,90,31,.8); }
.btn--fire:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,200,140,.6) inset, 0 16px 44px -10px rgba(255,90,31,1); }
.btn--ghost { border-color: var(--line-2); background: rgba(0,0,0,.4); color: var(--bone); }
.btn--ghost:hover { border-color: var(--flame); }
.btn--line { height: 44px; width: 100%; border-color: var(--line-2); background: transparent; color: var(--flame); font-size: 15px; }
.btn--line:hover { background: rgba(255,90,31,.12); border-color: var(--ember); color: var(--bone); }
.btn--line.is-added { background: var(--ember); color: #140600; border-color: var(--ember); }
.btn--wide { width: 100%; }

/* ---------- Part 2 ---------- */
.after { position: relative; z-index: 2; background: var(--coal); }
.after::before { content: ""; position: absolute; inset: -30vh 0 auto; height: 30vh; background: linear-gradient(transparent, var(--coal)); pointer-events: none; }
.sec { position: relative; padding: clamp(80px, 12vh, 140px) var(--gut); }
.sec__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 40px; margin-bottom: clamp(32px, 5vh, 56px); }
.h2 { display: flex; align-items: baseline; gap: .16em; font: 700 clamp(48px, 6.2vw, 100px)/.85 var(--f-disp); }
.h2 b { font: italic 800 .6em/1 var(--f-num); color: var(--flame); text-shadow: var(--glow); }
.h2 span { font: 600 .44em/1 var(--f-num); color: var(--ember); }
.sec__note { color: var(--ash); max-width: 32em; }

/* Big title with a burnt echo behind it */
.mega { position: relative; font: italic 800 clamp(80px, 13vw, 220px)/.8 var(--f-num); color: var(--bone); text-shadow: var(--glow); }
.mega span { font: 700 .62em/1 var(--f-disp); font-style: normal; color: var(--flame); text-shadow: none; }
.mega::before { content: attr(data-echo); position: absolute; inset: 0 auto auto 0; color: transparent; -webkit-text-stroke: 1px rgba(255,140,70,.35); transform: translate(calc(var(--echo, 0) * -1px), calc(var(--echo, 0) * .6px)); pointer-events: none; text-shadow: none; }
.mega--center { text-align: center; }
.mega--center::before { inset: 0 0 auto; }

/* 01 Menu */
.menu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); perspective: 1400px; }
.dish { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column;
  transform: translate3d(0, var(--my, 0), 0) scale(var(--ms, 1)) rotateX(calc(var(--mr, 0deg) + var(--tiltx, 0deg))) rotateY(var(--tilty, 0deg)); filter: blur(var(--mb, 0px)); opacity: var(--mo, 1); transition: border-color .3s; will-change: transform, filter; }
.dish:hover { border-color: var(--line-2); }
.dish__img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.dish__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.dish:hover .dish__img img { transform: scale(1.06); }
.dish__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--panel) 0%, transparent 45%); }
.dish__tag { position: absolute; top: 12px; right: 12px; z-index: 1; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 3px; background: rgba(0,0,0,.6); border: 1px solid var(--line-2); color: var(--flame); }
.dish__body { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; margin-top: -26px; position: relative; }
.dish h3 { font: 700 38px/1 var(--f-disp); }
.dish__price { position: absolute; left: 20px; top: 4px; font: 600 15px var(--f-text); color: var(--ash); }
.dish__price b { font: 800 34px/1 var(--f-num); color: var(--flame); }
.dish p:not(.dish__price) { font-size: 15px; color: rgba(244,236,226,.78); flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 12.5px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 20px; color: var(--ash); }

/* 02 Builder */
.build__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(18px, 3vw, 44px); align-items: start; }
.step { border: 0; padding: 0; margin: 0 0 30px; }
.step legend { display: flex; gap: 12px; align-items: baseline; font: 700 30px/1 var(--f-disp); margin-bottom: 14px; padding: 0; }
.step legend b { font: 700 13px var(--f-text); color: var(--ember); }
.bases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.base, .top { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease); }
.base:hover, .top:hover { border-color: var(--line-2); }
.base input, .top input { position: absolute; opacity: 0; pointer-events: none; }
.base:has(input:checked), .top:has(input:checked) { border-color: var(--ember); background: linear-gradient(180deg, rgba(255,90,31,.14), var(--panel)); box-shadow: 0 0 0 1px var(--ember) inset, 0 0 24px -8px rgba(255,90,31,.7); }
.base:has(input:focus-visible), .top:has(input:focus-visible) { outline: 2px solid var(--flame); outline-offset: 3px; }
.base__img { aspect-ratio: 1; border-radius: 3px; overflow: hidden; margin-bottom: 8px; background: #000; }
.base__img img { width: 100%; height: 100%; object-fit: cover; }
.base b, .top b { font: 700 22px/1.1 var(--f-disp); }
.base small, .top small { font-size: 12.5px; color: var(--ash); }
.tops { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.top { flex-direction: row; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; }
.top__img { width: 52px; height: 52px; flex: none; border-radius: 3px; background: var(--img) center / cover no-repeat, #000; }
.top__img--glyph { display: grid; place-items: center; background: radial-gradient(circle at 50% 70%, rgba(255,90,31,.5), var(--panel-2) 70%); }
.top__img--glyph::after { content: attr(data-g); font: 700 26px/1 var(--f-disp); color: var(--flame); }
.top small { margin-inline-start: auto; }
.top b { font-size: 20px; }
.build__view { position: sticky; top: calc(var(--bar-h) + 20px); display: flex; flex-direction: column; gap: 16px; }
.view { position: relative; aspect-ratio: 4 / 3.2; border-radius: 6px; overflow: hidden; background: radial-gradient(60% 70% at 50% 100%, rgba(255,90,31,.25), #000 70%); border: 1px solid var(--line); }
.view img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, transform 1s var(--ease), filter .6s; }
.view.is-swap img { opacity: 0; transform: scale(1.08); filter: brightness(2) blur(6px); }
.view__letter { position: absolute; inset: 0; display: grid; place-items: center; font: italic 800 clamp(160px, 22vw, 320px)/1 var(--f-num); color: #ffe6c8; opacity: 0; pointer-events: none;
  text-shadow: 0 0 .05em #fff, 0 0 .2em var(--flame), 0 0 .5em var(--ember), 0 0 1em rgba(255,90,31,.6); transform: scale(.9); }
.view.is-swap .view__letter { animation: letter .9s var(--ease); }
@keyframes letter { 0% { opacity: 0; transform: scale(.82); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }
.view__beam { position: absolute; inset: -20% 30% 40%; background: linear-gradient(180deg, rgba(255,220,180,.35), transparent); filter: blur(30px); transform: skewX(-12deg); pointer-events: none; mix-blend-mode: screen; }
.sum { padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 6px; }
.sum__name { font: 700 34px/1 var(--f-disp); }
.sum__list { font-size: 14px; color: var(--ash); min-height: 1.5em; }
.sum__total { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 10px; color: var(--ash); }
.sum__total span { margin-inline-end: auto; }
.sum__total b { font: 800 54px/1 var(--f-num); color: var(--flame); text-shadow: var(--glow); }

/* 03 Numbers */
.numbers__top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: clamp(50px, 8vh, 90px); }
.bracket { position: relative; padding: 14px; }
.bracket::before, .bracket::after { content: ""; position: absolute; width: 34px; height: 34px; border: 2px solid var(--ember); }
.bracket::before { top: 0; right: 0; border-width: 2px 2px 0 0; }
.bracket::after { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.bracket img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.bracket figcaption { position: absolute; bottom: 24px; right: 26px; font: 600 13px var(--f-num); letter-spacing: .06em; color: var(--flame); background: rgba(0,0,0,.6); padding: 3px 8px; }
.odos { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.odos li { padding: 26px 22px 0 0; border-right: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.odos li:first-child { border-right: 0; padding-right: 0; }
.odo { display: inline-flex; direction: ltr; font: italic 800 clamp(64px, 7vw, 116px)/1 var(--f-num); color: var(--bone); text-shadow: var(--glow); height: 1em; overflow: hidden; }
.odo .d { display: inline-block; height: 1em; overflow: hidden; }
.odo .d > span { display: flex; flex-direction: column; transform: translateY(0); transition: transform 1.8s cubic-bezier(.16, .84, .2, 1); }
.odo .d > span > i { font-style: italic; height: 1em; line-height: 1; }
.odo__u { font: 700 26px var(--f-num); color: var(--ember); }
.odos b { flex-basis: 100%; font: 700 24px/1.2 var(--f-disp); margin-top: 8px; }
.odos small { color: var(--ash); font-size: 14px; }

/* 04 Grill: pinned image + live embers */
.grill { padding: 0; height: 220vh; }
.grill__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.grill__bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; transform: scale(calc(1.02 + var(--gp, 0) * .12)) translateY(calc(var(--gp, 0) * -3%)); filter: brightness(calc(.45 + var(--gp, 0) * .45)) saturate(1.1); }
.grill__stick::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 55%, transparent), linear-gradient(0deg, #000 0%, transparent 30%); pointer-events: none; }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.grill__copy { position: absolute; z-index: 2; right: var(--gut); top: 50%; transform: translateY(-50%); max-width: 520px; }
.grill__big { font: 700 clamp(90px, 12vw, 200px)/.8 var(--f-disp); margin: 18px 0; text-shadow: 0 0 40px rgba(255,90,31,.4); }
.grill__txt { color: rgba(244,236,226,.84); max-width: 26em; }
.grill__meter { position: absolute; z-index: 2; left: var(--gut); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.grill__meter b { font: italic 800 clamp(70px, 8vw, 130px)/.9 var(--f-num); color: var(--flame); text-shadow: var(--glow); font-variant-numeric: tabular-nums; }
.grill__meter span { font: 700 26px var(--f-num); color: var(--ember); }
.grill__meter > i { width: 3px; height: 32vh; background: rgba(255,140,70,.18); position: relative; margin-top: 10px; }
.grill__meter > i > i { position: absolute; inset: auto 0 0; height: calc(var(--gp, 0) * 100%); background: linear-gradient(0deg, var(--ember), var(--flame)); box-shadow: var(--glow); }

/* Ticker */
.ticker { border-block: 1px solid var(--line); overflow: hidden; padding: 18px 0; background: var(--panel); }
.ticker__run { display: flex; gap: 48px; width: max-content; animation: run 34s linear infinite; }
.ticker span { font: 700 clamp(34px, 4vw, 60px)/1 var(--f-disp); white-space: nowrap; color: rgba(244,236,226,.9); }
.ticker span:nth-child(even) { font: italic 800 clamp(30px, 3.6vw, 54px)/1 var(--f-num); color: transparent; -webkit-text-stroke: 1px var(--ember); }
@keyframes run { to { transform: translateX(50%); } }

/* 05 Layers: pinned horizontal scroll */
.layers-sec { padding: 0; }
.hs__stick { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--bar-h) + 20px) 0 40px; }
.hs__stick .sec__head { padding: 0 var(--gut); margin-bottom: 28px; }
.echo { position: relative; }
.echo::after { content: attr(data-echo); position: absolute; right: 0; top: 100%; font: 700 1em/.85 var(--f-disp); color: transparent; -webkit-text-stroke: 1px rgba(255,140,70,.28); transform: translateX(calc(var(--echo, 0) * 1px)); pointer-events: none; }
.hs__track { display: flex; gap: 20px; padding: 0 var(--gut); width: max-content; transform: translate3d(var(--hx, 0px), 0, 0); will-change: transform; }
.cut { position: relative; width: clamp(260px, 26vw, 380px); flex: none; }
.cut figure { aspect-ratio: 3 / 3.6; border-radius: 6px; background: var(--img) center / cover no-repeat, #000; border: 1px solid var(--line); position: relative; overflow: hidden; }
.cut figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent 50%); }
.cut > b { position: absolute; top: 12px; left: 16px; font: italic 800 64px/1 var(--f-num); color: transparent; -webkit-text-stroke: 1.2px var(--flame); }
.cut h3 { font: 700 34px/1 var(--f-disp); margin: -54px 16px 0; position: relative; }
.cut p { font-size: 14.5px; color: var(--ash); margin: 22px 2px 0; max-width: 30em; }
.hs__progress { margin: 26px var(--gut) 0; height: 2px; background: rgba(255,140,70,.16); }
.hs__progress i { display: block; height: 100%; width: calc(var(--hp, 0) * 100%); margin-inline-start: 0; background: var(--ember); box-shadow: var(--glow); }

/* 06 Day */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.timeline::before { content: ""; position: absolute; top: 14px; right: 0; left: 0; height: 1px; background: linear-gradient(270deg, var(--ember), var(--line) 70%); }
.timeline li { position: relative; padding-top: 44px; }
.timeline li::before { content: ""; position: absolute; top: 9px; right: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ember); box-shadow: var(--glow); }
.timeline time { position: absolute; top: 0; right: 22px; font: 700 20px/1.2 var(--f-num); color: var(--flame); }
.timeline figure { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 16px; }
.timeline img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); transition: transform 1.2s var(--ease); }
.timeline li:hover img { transform: scale(1.05); }
.timeline h3 { font: 700 34px/1 var(--f-disp); margin-bottom: 6px; }
.timeline p { font-size: 15px; color: var(--ash); }

/* 07 Reserve */
.reserve { text-align: center; }
.reserve__note { color: var(--ash); max-width: 38em; margin: 26px auto 44px; }
.book { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 0 auto; text-align: right; }
.book__cal, .book__side { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 22px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__head b { font: 700 28px/1 var(--f-disp); }
.cal__head button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; font-size: 20px; line-height: 1; }
.cal__head button:hover:not(:disabled) { border-color: var(--ember); }
.cal__head button:disabled { opacity: .3; cursor: default; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal__dow span { font-size: 12px; color: var(--ash); padding-bottom: 6px; }
.cal__grid button { aspect-ratio: 1; border: 1px solid transparent; border-radius: 4px; background: rgba(255,255,255,.02); font: 600 17px var(--f-num); }
.cal__grid button:hover:not(:disabled) { border-color: var(--line-2); }
.cal__grid button:disabled { color: rgba(244,236,226,.2); background: transparent; cursor: default; }
.cal__grid button[aria-pressed="true"] { background: var(--ember); color: #140600; box-shadow: 0 0 20px -4px var(--ember); }
.cal__grid .is-today { border-color: var(--line-2); }
.slots { border: 0; padding: 0; margin: 0 0 16px; }
.slots legend, .guests > span, .field > span { font-size: 13px; color: var(--ash); margin-bottom: 8px; padding: 0; }
#slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#slots p { grid-column: 1 / -1; font-size: 14px; }
#slots button { height: 38px; border: 1px solid var(--line); border-radius: 4px; background: transparent; font: 600 16px var(--f-num); }
#slots button:hover { border-color: var(--line-2); }
#slots button[aria-pressed="true"] { background: var(--ember); border-color: var(--ember); color: #140600; }
.guests { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.guests > span { margin: 0 0 0 auto; }
.guests button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; font-size: 20px; }
.guests output { font: 800 28px var(--f-num); min-width: 32px; text-align: center; color: var(--flame); }
.field { display: block; margin-bottom: 12px; }
.field > span { display: block; margin-bottom: 4px; }
.field input { width: 100%; height: 46px; padding: 0 12px; background: #0a0604; border: 1px solid var(--line); border-radius: 4px; color: var(--bone); font: 16px var(--f-text); }
.field input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(255,90,31,.2); }
.field input[aria-invalid="true"] { border-color: #ff3b3b; }
.err { display: block; font-style: normal; font-size: 13px; color: #ff8a7a; margin-top: 4px; }
.book__pick { font-size: 14px; color: var(--flame); margin: 4px 0 12px; min-height: 1.6em; }

/* Footer */
/* The showcase pitch: "want a site like this?" */
.pitch { padding-top: clamp(60px, 10vh, 120px); }
.pitch__card { position: relative; max-width: 980px; margin: 0 auto; padding: clamp(36px, 6vw, 72px) clamp(22px, 5vw, 64px); text-align: center; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: 18px;
  background: radial-gradient(90% 70% at 50% 0%, rgba(255, 90, 31, .28), transparent 65%), radial-gradient(60% 60% at 50% 120%, rgba(255, 140, 60, .18), transparent 70%), linear-gradient(180deg, #170d07, #0b0604);
  box-shadow: 0 40px 120px -40px rgba(255, 90, 31, .55), inset 0 1px 0 rgba(255, 200, 150, .12); }
.pitch__card::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(255, 110, 40, .16), transparent 30%); animation: pitchspin 9s linear infinite; pointer-events: none; }
@keyframes pitchspin { to { transform: rotate(1turn); } }
.pitch__card > * { position: relative; }
.pitch__eyebrow { display: inline-block; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 20px; font: 600 13px/1 var(--f-text); color: var(--flame); letter-spacing: .02em; margin-bottom: 18px; }
.pitch__title { font: 700 clamp(46px, 7.4vw, 104px)/.95 var(--f-disp); color: var(--bone); margin-bottom: 18px; }
.pitch__title span { color: transparent; background: linear-gradient(180deg, #ffd2a0, var(--ember)); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 40px rgba(255, 110, 40, .35); }
.pitch__lede { max-width: 34em; margin: 0 auto 26px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: rgba(244, 236, 226, .85); }
.pitch__pts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; }
.pitch__pts li { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 15px; color: var(--bone); }
.pitch__pts b { font: italic 800 15px/1 var(--f-num); color: var(--ember); }
.pitch__btn { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 30px; border-radius: 30px; background: linear-gradient(180deg, #2bd06b, #1fa855); color: #fff; font: 700 18px var(--f-text); text-decoration: none;
  box-shadow: 0 14px 40px -10px rgba(31, 168, 85, .8), inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .2s var(--ease), box-shadow .3s; animation: pitchpulse 2.4s var(--ease) infinite; }
.pitch__btn:hover { transform: translateY(-2px) scale(1.02); }
.pitch__btn svg { width: 26px; height: 26px; fill: #fff; }
@keyframes pitchpulse { 0%, 100% { box-shadow: 0 14px 40px -10px rgba(31, 168, 85, .8), 0 0 0 0 rgba(43, 208, 107, .45); } 60% { box-shadow: 0 14px 40px -10px rgba(31, 168, 85, .8), 0 0 0 14px rgba(43, 208, 107, 0); } }
.pitch__by { margin-top: 18px; font-size: 13px; color: var(--ash); }
.pitch__by b { color: var(--bone); letter-spacing: .02em; }
.foot__credit { margin-top: 10px; font-size: 13px; color: var(--ash); }
.foot__credit b { color: var(--bone); }
.foot__credit a { color: var(--flame); }
.foot { padding: 70px var(--gut) 40px; border-top: 1px solid var(--line); overflow: hidden; }
.foot__boom { font: italic 800 clamp(120px, 27vw, 460px)/.75 var(--f-num); color: transparent; -webkit-text-stroke: 1px rgba(255,140,70,.3); direction: ltr; text-align: center; margin-bottom: 40px; }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; font-size: 15px; color: rgba(244,236,226,.8); }
.foot__cols b { display: block; font: 700 22px/1.2 var(--f-disp); color: var(--flame); margin-bottom: 4px; }
.foot__small { margin-top: 44px; font-size: 12.5px; color: var(--ash); }

/* Drawer, WhatsApp float, toast */
[hidden] { display: none !important; }
.drawer { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.6); display: flex; justify-content: flex-start; }
.drawer__panel { width: min(420px, 92vw); height: 100%; background: var(--panel); border-left: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; gap: 14px; animation: slide .4s var(--ease); }
@keyframes slide { from { transform: translateX(-100%); } }
.drawer header { display: flex; justify-content: space-between; align-items: center; }
.drawer h2 { font: 700 34px/1 var(--f-disp); }
.drawer header button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 22px; }
#cartList { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
#cartList li { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; }
#cartList li div { flex: 1; }
#cartList li b { display: block; font: 700 22px/1.1 var(--f-disp); }
#cartList li small { color: var(--ash); font-size: 13px; }
#cartList li em { font: 800 24px var(--f-num); font-style: normal; color: var(--flame); }
#cartList li button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; }
.drawer__empty { color: var(--ash); }
.drawer__total { display: flex; align-items: baseline; gap: 8px; color: var(--ash); }
.drawer__total span { margin-inline-end: auto; }
.drawer__total b { font: 800 44px var(--f-num); color: var(--flame); }
.wa { position: fixed; z-index: 45; left: 18px; bottom: 56px; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 20px 0 14px; border-radius: 27px; background: #1fa855; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; box-shadow: 0 10px 30px -8px rgba(31,168,85,.7); transition: transform .2s var(--ease); }
.wa:hover { transform: translateY(-2px); }
.wa svg { width: 28px; height: 28px; fill: #fff; }
.toast { position: fixed; z-index: 70; left: 50%; bottom: 120px; transform: translate(-50%, 20px); padding: 12px 20px; background: var(--bone); color: #140600; font-weight: 600; border-radius: 4px; opacity: 0; transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Warm light pooling behind each part-2 section, like the grill is just off-frame */
.menu { background: radial-gradient(55% 45% at 85% 8%, rgba(255, 90, 31, .13), transparent 70%); }
.build { background: radial-gradient(50% 50% at 18% 40%, rgba(255, 140, 50, .11), transparent 70%), radial-gradient(40% 40% at 90% 90%, rgba(255, 90, 31, .08), transparent 70%); }
.numbers { background: radial-gradient(60% 50% at 70% 30%, rgba(255, 110, 40, .12), transparent 70%); }
.day { background: radial-gradient(70% 40% at 50% 0%, rgba(255, 90, 31, .1), transparent 70%); }
.reserve { background: radial-gradient(60% 45% at 50% 20%, rgba(255, 120, 40, .16), transparent 70%), radial-gradient(80% 40% at 50% 100%, rgba(255, 90, 31, .1), transparent 70%); }
.dish, .sum, .book__cal, .book__side, .base, .top { box-shadow: 0 30px 60px -40px rgba(255, 90, 31, .35); }
.dish__img img, .timeline img, .base__img img, .bracket img { filter: contrast(1.06) saturate(1.15); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav { position: fixed; inset: var(--bar-h) 0 auto; background: rgba(8,5,3,.96); border-bottom: 1px solid var(--line); padding: 10px var(--gut) 20px; transform: translateY(-120%); transition: transform .4s var(--ease); margin: 0; z-index: -1; }
  .nav.is-open { transform: none; }
  .nav ol { flex-direction: column; gap: 0; }
  .nav a { font-size: 22px; padding: 10px 0; font-family: var(--f-disp); }
  .menu-btn { display: inline-flex; }
  .bar__tools { margin-inline-start: auto; }
  .menu__grid { grid-template-columns: 1fr 1fr; }
  .build__grid, .numbers__top, .book { grid-template-columns: 1fr; }
  .build__view { position: static; order: -1; }
  .odos { grid-template-columns: 1fr 1fr; }
  .odos li:nth-child(3) { border-right: 0; padding-right: 0; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  :root { --bar-h: 58px; }
  body { font-size: 16px; }
  .sound__label { display: none; }
  .sound { padding: 0 10px; position: relative; }
  /* when the phone hasn't allowed sound yet, the ask shows as a bubble under the button */
  .sound.is-ask .sound__label { display: block; position: absolute; top: calc(100% + 8px); right: 50%; transform: translateX(50%); white-space: nowrap;
    padding: 7px 12px; border-radius: 16px; background: var(--ember); color: #000; font: 600 13px/1 var(--f-text); box-shadow: 0 6px 20px -6px rgba(255, 90, 31, .8); pointer-events: none; }
  /* HUD: small corners and the live readings tucked under the top bar */
  .hud__c { width: 16px; height: 16px; }
  .hud__c--tr, .hud__c--tl { top: calc(var(--bar-h) + 6px); }
  .hud__c--tr { right: 10px; } .hud__c--tl { left: 10px; }
  .hud__c--br, .hud__c--bl { bottom: 10px; }
  .hud__meta { top: calc(var(--bar-h) + 9px); bottom: auto; font-size: 10px; }
  .hud__meta--a { right: 32px; } .hud__meta--b { left: 32px; }
  .lcard { top: auto; bottom: 7vh; left: var(--gut); right: var(--gut); width: auto; transform-origin: center bottom;
    transform: perspective(1000px) rotateX(var(--ry, -75deg)) translateZ(var(--tz, -120px)); }
  .lcard img { aspect-ratio: 16 / 7; }
  .play { align-self: stretch; }
  .hero__title { max-width: none; }
  .hero__lede { max-width: none; font-size: 15px; }
  /* phone film: cinema-wide frame in the middle, words above, cards and controls below */
  /* Phone film, top to bottom: chapter title (right) + live number (left) · the frame · one card · the controls row.
     Nothing shares a spot, so nothing overlaps. */
  /* the frame runs past both sides of the screen: one soft top/bottom edge is all it needs (no composited double mask) */
  #stage { -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-composite: source-over;
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-composite: add; }
  .ov { padding-top: calc(var(--bar-h) + 2vh); }
  .ch { font-size: 44px; top: calc(var(--bar-h) + 3vh); }
  .kin { font-size: clamp(76px, 24vw, 140px); }
  .kin--he { font-size: clamp(70px, 21vw, 130px); }
  .readout, .temp { top: calc(var(--bar-h) + 3vh); bottom: auto !important; right: auto; left: var(--gut); text-align: left; }
  .readout b, .temp b { font-size: 40px; }
  .readout span, .temp span { font-size: 18px; }
  .readout small, .temp small { font-size: 11.5px; margin-top: 2px; }
  .readout__bar { width: 110px; margin-top: 5px; }
  .card { left: var(--gut); right: var(--gut); max-width: none; top: auto !important; bottom: calc(7vh + 58px); padding: 14px 16px; font-size: 14.5px; line-height: 1.5; background: rgba(12, 7, 4, .86); }
  .card b { font-size: 24px; }
  /* build chapter: the live layer list takes the card's place, two columns */
  .ov[data-k="4"] .card { display: none; }
  .stack { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; left: var(--gut); right: var(--gut); top: auto; bottom: calc(7vh + 58px); transform: none; }
  .stack li { font-size: 14px; padding: 6px 10px; }
  /* every layer: the names sit on the right, with callout lines to their layer */
  .layers li { left: auto; right: var(--gut); font-size: 13px; transform: translateY(-50%) translateX(calc((1 - var(--d, 0)) * 14px));
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9); }
  .layers small { display: none; }
  .hots::after { content: "הקישו על נקודה כדי להכיר את השכבה"; position: absolute; left: 50%; bottom: calc(7vh + 64px); transform: translateX(-50%);
    white-space: nowrap; padding: 8px 14px; border-radius: 20px; background: rgba(12, 7, 4, .85); border: 1px solid var(--line-2);
    font: 500 13px/1 var(--f-text); color: var(--bone); transition: opacity .3s; }
  .hots.is-focus::after { opacity: 0; }
  /* chapter rail: a slim tappable row along the bottom */
  .rail { top: auto; bottom: 30px; left: 84px; right: var(--gut); flex-direction: row; gap: 6px; }
  .rail li { flex: 1; flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  .rail li button { min-width: 0; padding: 2px 0; font-size: 10px; text-align: center; }
  .rail li i { width: auto; }
  .hud__ruler { display: none; }
  .filmctl { width: 42px; padding: 0; justify-content: center; }
  .filmctl span { display: none; }
  .skipfilm { padding: 0 14px; font-size: 13px; }
  .finale { left: var(--gut); right: var(--gut); max-width: none; bottom: calc(7vh + 58px); padding: 16px; }
  .finale__line { font-size: 30px; margin-bottom: 12px; }
  .finale__btns > * { flex: 1 1 auto; justify-content: center; }
  .stamp span { font-size: clamp(28px, 9vw, 60px); }
  .lcard { bottom: calc(7vh + 58px); padding: 10px 10px 12px; }
  .lcard img { aspect-ratio: 5 / 2; margin-bottom: 6px; }
  .lcard b { font-size: 26px; }
  .lcard h3 { font-size: 26px; margin: 0 0 4px; }
  .lcard p { font-size: 14px; line-height: 1.45; }
  .lcard__x { top: 16px; left: 16px; }
  /* the layers sit close together on a phone: smaller dots so each one stays tappable on its own */
  .hots button { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
  .menu__grid, .odos, .timeline, .foot__cols { grid-template-columns: 1fr; }
  .odos li { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
  .bases { gap: 8px; }
  .tops { grid-template-columns: 1fr; }
  .grill__copy { left: var(--gut); top: auto; bottom: 10vh; transform: none; }
  .grill__meter { top: calc(var(--bar-h) + 30px); transform: none; flex-direction: row; }
  .grill__meter > i { display: none; }
  .wa span { display: none; }
  .wa { padding: 0; width: 54px; justify-content: center; bottom: 20px; }
  #slots { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}