:root {
  --black: #050505;
  --ink: #111111;
  --white: #f7f7f3;
  --paper: #e9e9e4;
  --silver: #b9b9b3;
  --line: rgba(255,255,255,.18);
  --display: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body { margin: 0; overflow-x: hidden; background: var(--black); color: var(--white); font-family: var(--body); font-size: 16px; line-height: 1.5; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { max-width: 100%; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 10px 16px; background: white; color: black; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; min-height: 74px; display: flex; align-items: center; justify-content: space-between; padding: 12px clamp(18px, 4vw, 64px); border-bottom: 1px solid var(--line); background: rgba(5,5,5,.76); backdrop-filter: blur(18px); }
.wordmark { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 18px; letter-spacing: -.06em; line-height: .8; }
.wordmark em { display: block; margin-top: 5px; color: var(--silver); font: 700 9px/1 var(--body); letter-spacing: .18em; font-style: normal; }
.mark { width: 41px; height: 41px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; }
.mark svg { width: 29px; fill: none; stroke: white; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 38px); }
nav a { position: relative; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 0; height: 1px; background: white; transition: width .25s; }
nav a:hover::after, nav a:focus-visible::after { width: 100%; }
.nav-cta { padding: 12px 16px; border-radius: 999px; background: var(--white); color: var(--black); }
.nav-cta span { padding-left: 8px; }
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: transparent; }
.nav-toggle span:not(.sr-only) { display: block; width: 18px; height: 1px; margin: 4px auto; background: white; }

.hero { position: relative; min-height: 930px; height: 100svh; max-height: 1080px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(430px, .95fr); align-items: center; padding: 120px clamp(18px, 4vw, 64px) 50px; isolation: isolate; overflow: hidden; }
.hero-grid { position: absolute; inset: 0; z-index: -3; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 7.14vw 7.14vw; mask-image: linear-gradient(to bottom, black 20%, transparent 85%); }
.hero::before { content: ""; position: absolute; z-index: -2; width: 780px; height: 780px; right: -130px; top: 50%; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); transform: translateY(-48%); box-shadow: inset 0 0 120px rgba(255,255,255,.035); }
.hero-copy { position: relative; z-index: 2; max-width: 760px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 34px; height: 1px; background: currentColor; }
.hero h1, .smash-copy h2, .menu-heading h2, .story-copy h2, .reviews-title h2, .visit-card h2 { margin: 0; font-family: var(--display); font-weight: 900; letter-spacing: -.085em; text-transform: uppercase; }
.hero h1 { font-size: clamp(78px, 9vw, 158px); line-height: .76; max-width: 850px; }
.hero h1 span { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.86); }
.hero-intro { max-width: 555px; margin: 38px 0 28px; color: #d2d2ce; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-width: 195px; padding: 15px 18px; border: 1px solid rgba(255,255,255,.85); border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; transition: transform .25s, background .25s, color .25s; }
.button:hover, .button:focus-visible { transform: translateY(-3px); }
.button-light { background: var(--white); color: var(--black); }
.button-ghost { background: transparent; color: var(--white); }
.button-ghost:hover { background: white; color: black; }

.burger-zone { position: relative; align-self: center; perspective: 1200px; min-height: 670px; display: grid; place-items: center; }
.burger-stage { --rx: -5deg; --ry: -8deg; --ex: 0; --px: 0; --py: 0; --sep: clamp(30px, 5.6vmin, 58px); position: relative; z-index: 2; width: min(48vw, 690px); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease-out; }
.burger-stage::before { content: ""; position: absolute; inset: 17%; border-radius: 50%; background: rgba(255,255,255,.16); filter: blur(45px); transform: translateZ(-40px); }

/* --- the layered burger ---------------------------------------------------
   Five slices of one photograph stacked in CSS 3D. At rest they reassemble
   into the original, so the hero looks untouched until something moves.
   --d  each layer's signed distance from the middle of the stack, +2 at the
        crown down to -2 at the heel (written once by script.js)
   --ex 0 -> 1 explode, --px/--py the pointer at -1..1.
   Every bit of motion below is one of those numbers times a distance. */

/* v1 hung a drop-shadow off the single <img>. A filter here would flatten
   the 3D context, and five animated drop-shadows would land on the seams
   and paint dark bands. One gradient ellipse instead, fading out as the
   per-layer contact shadows take over. */
.burger-stage::after {
  content: ""; position: absolute; z-index: 0;
  left: 13%; right: 13%; bottom: 4%; height: 15%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(0,0,0,.72) 0%, rgba(0,0,0,.36) 42%, rgba(0,0,0,.12) 66%, transparent 100%);
  transform: translateZ(-22px);
  opacity: calc(1 - var(--ex) * .8);
  pointer-events: none;
}

/* The float lives on a wrapper now, so each slice keeps its own transform.
   translate/scale reproduce v1's translateZ(60px) scale(1.06) without
   colliding with the keyframes, which own `transform`. The stack is much
   taller parted than closed, so it shrinks a little on the way out. */
.burger-float {
  position: absolute; inset: 0; z-index: 2;
  transform-style: preserve-3d;
  translate: 0 0 60px;
  scale: calc(1.06 - var(--ex) * .26);
  animation: burgerFloat 5.5s ease-in-out infinite;
}
@keyframes burgerFloat { 50% { transform: translateY(-14px); } }

/* Z is zero at rest on purpose: under perspective a non-zero base Z scales
   the layers differently and the reassembled photo shows seams. The parallax
   you get at rest comes from the --px * --d term instead. */
.burger-layer {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  transform: translate3d(
    calc(var(--px) * var(--d) * -7px),
    calc(var(--d) * var(--ex) * var(--sep) * -1 + var(--py) * var(--d) * -4px),
    calc(var(--ex) * var(--d) * 34px)
  );
}
.burger-layer img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  -webkit-user-drag: none; user-select: none;
}

/* --bot is where that slice's cut line sits, read off the asset's own alpha
   at the middle of the image. The four cuts are at different heights and
   they tilt, so a shadow parked at a shared midpoint lands half a gap adrift
   and reads as a smudge. Re-cutting the photo (v2/tools/slice-burger.py)
   moves these. */
.burger-layer:nth-child(1) { --bot: 33%; --slice: url(assets/burger-01-crown.webp); }
.burger-layer:nth-child(2) { --bot: 51%; --slice: url(assets/burger-02-garnish.webp); }
.burger-layer:nth-child(3) { --bot: 65%; --slice: url(assets/burger-03-patty-top.webp); }
.burger-layer:nth-child(4) { --bot: 77%; --slice: url(assets/burger-04-patty-bottom.webp); }

/* The shadow each slice throws onto the one below it. Behind the slice in Z,
   and opacity is the only animated property — it stays at zero until the
   stack actually parts, or the shadow lands on the seam below and paints a
   dark band across a burger that is supposed to look whole. */
.burger-layer::before {
  content: ""; position: absolute;
  left: 13%; right: 13%; top: calc(var(--bot) - 1%); height: 10%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(0,0,0,.74) 0%, rgba(0,0,0,.36) 42%, rgba(0,0,0,.1) 72%, transparent 100%);
  opacity: 0; transform: translateZ(-14px);
  transition: opacity .5s ease;
  pointer-events: none;
}
.burger-stage.is-parted .burger-layer::before { opacity: calc(var(--ex) * .88); }
.burger-layer:last-child::before { display: none; }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; transform: rotate(-15deg); }
.orbit-one { width: 92%; aspect-ratio: 1; }
.orbit-two { width: 72%; aspect-ratio: 1; transform: rotate(25deg); border-style: dashed; opacity: .5; }
.float-tag { position: absolute; z-index: 5; padding: 8px 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; background: rgba(5,5,5,.72); backdrop-filter: blur(8px); font: 800 10px/1 var(--body); letter-spacing: .14em; transform: translateZ(110px); }
.tag-one { left: 0; top: 25%; }
.tag-two { right: 8%; top: 48%; }
.tag-three { left: 9%; bottom: 18%; }
.drag-note { position: absolute; right: 2%; bottom: 3%; color: var(--silver); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero-stamp { position: absolute; left: clamp(18px, 4vw, 64px); bottom: 26px; display: flex; align-items: center; gap: 13px; }
.hero-stamp strong { font: 900 34px/1 var(--display); letter-spacing: -.07em; }
.hero-stamp span { color: var(--silver); font-size: 9px; line-height: 1.55; letter-spacing: .15em; }

.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); color: var(--black); transform: rotate(-1.3deg) scale(1.02); }
.ticker div { width: max-content; display: flex; align-items: center; gap: 26px; padding: 14px 0; animation: ticker 26s linear infinite; font: 900 15px/1 var(--display); letter-spacing: -.03em; }
.ticker i { font-style: normal; font-size: 10px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* --- The Smash ------------------------------------------------------------
   Base layout is v1's: copy, then the stack in flow, then the ingredient
   list. The pinned exploded view further down is an enhancement layered on
   top of it, so a browser without JS (or a reader who has asked for less
   motion) gets a normal section instead of 200svh of scroll leading to a
   burger that never moves.
   `overflow: clip` rather than `hidden` — `hidden` would make this a scroll
   container and the sticky child would never stick. */
.smash-section { position: relative; overflow: clip; background: var(--paper); color: var(--black); }
.smash-sticky { padding: 150px clamp(18px, 6vw, 90px) 190px; }
.section-index { display: flex; gap: 16px; align-items: center; margin-bottom: 70px; }
.section-index span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid currentColor; border-radius: 50%; font: 800 11px/1 var(--body); }
.section-index p { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow.dark { color: #333; }

.smash-layout { position: relative; z-index: 1; }
.smash-copy h2 { max-width: 790px; font-size: clamp(70px, 8.3vw, 145px); line-height: .79; }
.ingredient-stack { display: grid; gap: 0; min-width: 0; margin-top: clamp(24px, 5vh, 52px); }
.ingredient-card { display: grid; grid-template-columns: 42px 1fr; gap: 4px 20px; padding: 26px 0; border-top: 1px solid #aaa; }
.ingredient-card:last-child { border-bottom: 1px solid #aaa; }
.ingredient-card > span { grid-row: 1 / 3; font: 800 12px/1 var(--body); }
.ingredient-card h3 { margin: 0; font: 900 clamp(26px, 3.4vw, 46px)/.95 var(--display); letter-spacing: -.055em; text-transform: uppercase; }
.ingredient-card p { max-width: 480px; margin: 14px 0 0; color: #444; font-size: 17px; }
.burger-zone--smash { min-height: 0; perspective: 1250px; margin: clamp(26px, 6vh, 64px) 0 clamp(4px, 2vh, 22px); }

/* Cards light up as the matching layer lifts. Only while the script is
   driving the stack, so the page still reads normally without JS. */
.smash-section.is-interactive .ingredient-card.is-visible { opacity: .3; transition: opacity .45s ease, border-color .45s ease; }
.smash-section.is-interactive .ingredient-card.is-visible.is-lit { opacity: 1; border-top-color: #111; }
.smash-section.is-interactive .ingredient-card.is-lit:last-child { border-bottom-color: #111; }

.burger-zone--smash .orbit { border-color: rgba(0,0,0,.13); }
.burger-stage--smash { --rx: -4deg; --ry: 6deg; --sep: clamp(20px, 4vmin, 44px); width: min(76vw, 470px); max-width: 100%; }
/* the shadow values above are tuned for the near-black hero; this section
   is paper, so everything comes down */
.burger-stage--smash::before {
  inset: -20%; border-radius: 0; filter: none;
  background: radial-gradient(ellipse 34% 40% at 50% 50%,
    rgba(24,22,18,.34) 0%, rgba(24,22,18,.2) 44%, rgba(24,22,18,.07) 68%, transparent 88%);
  transform: translateZ(-120px);
  scale: calc(1 + var(--ex) * .16);
  opacity: calc(.2 + var(--ex) * .8);
}
.burger-stage--smash::after { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.34) 0%, rgba(0,0,0,.15) 44%, transparent 100%); }
/* Each slice's bottom edge is feathered 30px wide so the stack reassembles
   seamlessly. A feather blends toward whatever is behind it: over the
   near-black hero that reads as shadow, but over this section's paper it
   reads as a bright halo and the parted stack looks lit from underneath.
   Masking a dark gradient to the slice's own alpha puts the underside back
   in shadow without touching the silhouette. */
.burger-stage--smash .burger-layer::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    transparent calc(var(--bot) - 17%),
    rgba(14,10,6,.22) calc(var(--bot) - 11%),
    rgba(14,10,6,.52) calc(var(--bot) - 5%),
    rgba(14,10,6,.76) calc(var(--bot) + 1%),
    rgba(14,10,6,.8) 100%);
  -webkit-mask-image: var(--slice); mask-image: var(--slice);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  opacity: 0; transition: opacity .5s ease;
  pointer-events: none;
}
.burger-stage--smash.is-parted .burger-layer::after { opacity: var(--ex); }
/* and the feather itself is see-through, so the darkness behind it has to be
   wide enough to cover the whole gap rather than just its middle */
.burger-stage--smash .burger-layer::before {
  left: 5%; right: 5%; top: calc(var(--bot) - 3%); height: 15%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(0,0,0,.78) 0%, rgba(0,0,0,.6) 38%, rgba(0,0,0,.28) 66%, rgba(0,0,0,.07) 85%, transparent 100%);
}
.burger-stage--smash.is-parted .burger-layer::before { opacity: var(--ex); }
.burger-stage--smash .burger-layer:last-child::after { display: none; }
.drag-note.dark { right: 0; bottom: 2px; padding: 7px 12px; border: 1px solid rgba(0,0,0,.16); border-radius: 999px; background: rgba(233,233,228,.8); backdrop-filter: blur(7px); color: #55554f; transition: opacity .4s ease; }
.smash-section.is-parted .drag-note.dark { opacity: 0; }

.giant-outline { position: absolute; z-index: 0; bottom: -126px; left: -20px; margin: 0; color: transparent; -webkit-text-stroke: 2px rgba(0,0,0,.13); font: 900 clamp(160px, 25vw, 420px)/1 var(--display); letter-spacing: -.11em; pointer-events: none; }

.menu-section { padding: 150px clamp(18px, 6vw, 90px); }
.menu-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin-bottom: 62px; }
.menu-heading h2 { font-size: clamp(82px, 12vw, 190px); line-height: .72; }
.menu-heading > p { max-width: 330px; margin: 0; color: var(--silver); font-size: 17px; }
.menu-heading strong { color: white; }
.menu-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.menu-tabs button { padding: 11px 17px; border: 1px solid #555; border-radius: 999px; background: transparent; color: var(--white); cursor: pointer; font-size: 13px; font-weight: 800; text-transform: uppercase; transition: background .2s, color .2s; }
.menu-tabs button[aria-selected="true"] { background: white; color: black; border-color: white; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #444; border-left: 1px solid #444; }
.menu-card { min-height: 255px; display: grid; grid-template-columns: 42px 1fr auto; gap: 18px; align-items: start; padding: clamp(24px, 3vw, 42px); border-right: 1px solid #444; border-bottom: 1px solid #444; transition: background .25s, color .25s, transform .25s, opacity .25s; transform-style: preserve-3d; }
.menu-card:hover { background: var(--white); color: var(--black); }
.menu-card.featured { background: var(--white); color: var(--black); }
.menu-card[hidden] { display: none; }
.item-number { padding-top: 7px; color: #888; font: 800 11px/1 var(--body); }
.item-copy h3 { margin: 0; font: 900 clamp(27px, 3.1vw, 48px)/.95 var(--display); letter-spacing: -.06em; text-transform: uppercase; }
.item-copy p { max-width: 470px; margin: 18px 0 0; color: #aaa; font-size: 16px; }
.menu-card:hover .item-copy p, .menu-card.featured .item-copy p { color: #444; }
.price { font: 900 clamp(23px, 2.3vw, 36px)/1 var(--display); letter-spacing: -.06em; }
.price-stack { display: grid; gap: 8px; font-size: clamp(16px, 1.7vw, 24px); text-align: right; }
.bestseller { display: inline-block; margin: 0 0 15px; padding: 5px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.menu-extras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.menu-extras span { flex: 1 1 180px; display: flex; justify-content: space-between; padding: 15px 18px; border: 1px solid #444; border-radius: 999px; font-size: 13px; font-weight: 700; text-transform: uppercase; }

.story-section { position: relative; overflow: hidden; min-height: 930px; background: #101010; }
.story-rail { position: absolute; inset: 0 auto 0 0; width: 72px; display: flex; flex-direction: column; justify-content: space-around; align-items: center; border-right: 1px solid var(--line); color: #777; }
.story-rail span { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 10px/1 var(--body); letter-spacing: .18em; }
.story-inner { padding: 140px clamp(28px, 7vw, 110px) 140px max(110px, 9vw); }
.section-index.light { color: white; }
.story-copy { display: grid; grid-template-columns: minmax(200px, .5fr) minmax(0, 1fr); gap: 30px 5vw; align-items: start; }
.story-copy .eyebrow { margin-top: 15px; }
.story-copy h2 { font-size: clamp(70px, 9.8vw, 160px); line-height: .79; }
.story-copy h2 span { color: transparent; -webkit-text-stroke: 2px white; }
.story-copy > p:last-child { grid-column: 2; max-width: 650px; margin: 20px 0 0; color: #bbb; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.55; }
.story-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 90px; background: #444; border: 1px solid #444; }
.story-numbers div { min-height: 190px; display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 26px; background: #101010; }
.story-numbers strong { font: 900 clamp(54px, 7vw, 110px)/.8 var(--display); letter-spacing: -.08em; }
.story-numbers span { color: #999; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.reviews-section { padding: 150px clamp(18px, 6vw, 90px); background: var(--paper); color: black; }
.reviews-title { display: grid; grid-template-columns: .5fr 1fr; gap: 40px; align-items: start; }
.reviews-title h2 { font-size: clamp(68px, 9.8vw, 160px); line-height: .78; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 90px; }
.review-card { min-height: 370px; display: flex; flex-direction: column; margin: 0; padding: 30px; border: 1px solid #aaa; }
.review-card.inverted { background: var(--black); color: white; border-color: var(--black); transform: translateY(-36px) rotate(1deg); }
.stars { font-size: 13px; letter-spacing: .2em; }
.review-card blockquote { margin: auto 0; font: 800 clamp(22px, 2.3vw, 34px)/1.12 var(--display); letter-spacing: -.045em; }
.review-card figcaption { color: #777; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.visit-section { position: relative; overflow: hidden; min-height: 820px; display: grid; grid-template-columns: 1fr .7fr; align-items: center; gap: 10vw; padding: 120px clamp(18px, 7vw, 110px); border-top: 1px solid var(--line); }
.visit-bg { position: absolute; z-index: 0; left: -3vw; bottom: -13vw; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.1); font: 900 43vw/.7 var(--display); letter-spacing: -.13em; }
.visit-card, .hours-card { position: relative; z-index: 2; }
.visit-card h2 { font-size: clamp(86px, 12vw, 190px); line-height: .76; }
.visit-card address { margin: 32px 0; color: #bbb; font-size: clamp(17px, 1.7vw, 22px); font-style: normal; }
.hours-card { padding: clamp(25px, 4vw, 52px); border: 1px solid #555; background: rgba(12,12,12,.84); backdrop-filter: blur(12px); }
.hours-title { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: white; box-shadow: 0 0 0 5px rgba(255,255,255,.1); }
.hours-card h3 { margin: 0; font: 900 36px/1 var(--display); letter-spacing: -.05em; text-transform: uppercase; }
.hours-card dl { margin: 0 0 28px; border-top: 1px solid #444; }
.hours-card dl div { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid #444; }
.hours-card dt, .hours-card dd { margin: 0; font-weight: 700; }
.hours-card .closed { color: #777; }
.hours-card > a { display: flex; justify-content: space-between; margin-top: 10px; padding: 14px 0; border-bottom: 1px solid #444; text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

footer { display: grid; grid-template-columns: 1fr auto auto auto; gap: 20px 40px; align-items: end; padding: 50px clamp(18px, 4vw, 64px); border-top: 1px solid var(--line); background: black; }
.footer-wordmark { text-decoration: none; font: 900 clamp(42px, 7vw, 100px)/.72 var(--display); letter-spacing: -.09em; }
.footer-wordmark span { display: block; margin-top: 12px; color: #777; font: 800 10px/1 var(--body); letter-spacing: .25em; }
footer p, footer > a:not(.footer-wordmark) { margin: 0; color: #888; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.site-credit { position: relative; padding-bottom: 5px; text-decoration: none; transition: color .25s ease; }
.site-credit strong { color: inherit; font-weight: 900; }
.site-credit::after { content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.site-credit:hover, .site-credit:focus-visible { color: var(--white); }
.site-credit:hover::after, .site-credit:focus-visible::after { transform: scaleX(1); transform-origin: left; }
footer small { grid-column: 1 / -1; color: #555; font-size: 11px; }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }
.reveal[data-delay="4"] { transition-delay: .48s; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* The pin. Only where there is room for two columns, only when a script is
   there to drive it, and only if motion is welcome — outside those, the base
   layout above already reads correctly. */
@media (min-width: 1051px) and (prefers-reduced-motion: no-preference) {
  .js .smash-section { min-height: 200svh; }
  .js .smash-sticky { position: sticky; top: 0; height: 100svh; min-height: 560px; display: flex; align-items: center; padding: max(84px, 9vh) clamp(18px, 6vw, 90px) max(44px, 5.5vh); }

  /* copy and list down the left, the stack on the right — the same reading
     order the hero already sets up */
  .js .smash-layout { width: 100%; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-rows: auto auto; gap: 0 clamp(24px, 4.5vw, 70px); align-content: center; }
  .js .smash-head { grid-column: 1; grid-row: 1; min-width: 0; }
  .js .ingredient-stack { grid-column: 1; grid-row: 2; margin-top: clamp(16px, 3vh, 38px); }
  .js .burger-zone--smash { grid-column: 2; grid-row: 1 / span 2; margin: 0; perspective: 1600px; perspective-origin: 50% 46%; }

  /* every size is capped by height as well as width, so the whole
     composition shrinks to fit a short laptop instead of spilling out of it */
  .js .smash-sticky .section-index { margin-bottom: clamp(14px, 2.6vh, 30px); }
  .js .smash-sticky .section-index span { width: 36px; height: 36px; }
  .js .smash-copy .eyebrow { margin-bottom: clamp(10px, 1.8vh, 20px); }
  .js .smash-copy h2 { font-size: clamp(34px, min(4.6vw, 7.6vh), 84px); }
  .js .ingredient-card { grid-template-columns: 34px 1fr; gap: 2px 16px; padding: clamp(6px, 1.4vh, 17px) 0; }
  .js .ingredient-card > span { font: 800 11px/1.5 var(--body); }
  .js .ingredient-card h3 { font-size: clamp(16px, min(1.85vw, 3.1vh), 29px); }
  .js .ingredient-card p { max-width: 470px; margin-top: 6px; font-size: clamp(12px, min(.95vw, 1.6vh), 15px); line-height: 1.42; }

  .js .burger-stage--smash { --sep: clamp(24px, 4.4vmin, 52px); width: min(40vw, 64vh, 520px); }
  /* sized in its own em so it always shows the same sliver and never climbs
     into the card list */
  .js .giant-outline { bottom: -.58em; left: -1vw; font-size: clamp(90px, 13vw, 220px); -webkit-text-stroke-color: rgba(0,0,0,.12); }
}

/* last release valve: on a genuinely short desktop window the names and the
   burger carry the section on their own */
@media (min-width: 1051px) and (prefers-reduced-motion: no-preference) and (max-height: 660px) {
  .js .smash-sticky .ingredient-card p { display: none; }
}

@media (max-width: 1050px) {
  .site-header nav { position: fixed; top: 73px; left: 0; width: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 18px 22px; background: rgba(5,5,5,.98); border-bottom: 1px solid #333; }
  .site-header nav.is-open { display: flex; }
  nav a { padding: 16px 6px; border-bottom: 1px solid #333; }
  .nav-cta { margin-top: 10px; text-align: center; }
  .nav-toggle { display: block; }
  .hero { height: auto; min-height: 1050px; grid-template-columns: 1fr; padding-top: 150px; }
  .hero::before { width: 720px; height: 720px; right: -220px; top: 58%; }
  .burger-zone { min-height: 590px; margin-top: -20px; }
  .burger-stage { width: min(90vw, 660px); }
  .hero-stamp { bottom: 25px; }
  .story-copy, .reviews-title { grid-template-columns: 1fr; }
  .story-copy > p:last-child { grid-column: 1; }
  .drag-note.dark { right: 2%; bottom: 3%; }
}

@media (max-width: 760px) {
  .site-header { min-height: 67px; }
  .wordmark { font-size: 16px; }
  .mark { width: 36px; height: 36px; }
  .site-header nav { top: 66px; }
  .hero { min-height: 950px; padding-top: 125px; padding-bottom: 95px; }
  .hero h1 { font-size: clamp(65px, 22vw, 106px); }
  .hero-intro { margin-top: 28px; }
  .button { min-width: 0; width: 100%; }
  .burger-zone { min-height: 430px; margin: 5px -20px 0; }
  .burger-stage { width: min(112vw, 540px); }
  .float-tag { font-size: 8px; }
  .tag-one { left: 6%; }
  .tag-two { right: 4%; }
  .drag-note { display: none; }
  .hero-stamp { bottom: 24px; }
  .menu-section, .reviews-section { padding-top: 100px; padding-bottom: 100px; }
  .smash-sticky { padding-top: 100px; padding-bottom: 115px; }
  .burger-stage--smash { width: min(88vw, 420px); }
  .drag-note.dark { display: block; right: 4%; bottom: 1%; }
  .section-index { margin-bottom: 50px; }
  .smash-copy h2, .story-copy h2, .reviews-title h2 { font-size: clamp(58px, 18vw, 92px); }
  .giant-outline { bottom: -35px; }
  .menu-heading { display: block; }
  .menu-heading > p { margin-top: 30px; }
  .menu-heading h2 { font-size: 26vw; }
  .menu-tabs { flex-wrap: nowrap; overflow-x: auto; margin-right: -18px; padding-right: 18px; scrollbar-width: none; }
  .menu-tabs button { flex: 0 0 auto; }
  .menu-grid { grid-template-columns: 1fr; }
  .menu-card { min-height: 220px; grid-template-columns: 26px 1fr auto; padding: 25px 20px; }
  .item-copy p { font-size: 15px; }
  .story-rail { display: none; }
  .story-inner { padding: 100px 18px; }
  .story-copy { gap: 10px; }
  .story-numbers { grid-template-columns: 1fr; margin-top: 60px; }
  .story-numbers div { min-height: 140px; }
  .review-grid { grid-template-columns: 1fr; margin-top: 60px; }
  .review-card { min-height: 300px; }
  .review-card.inverted { transform: rotate(1deg); }
  .visit-section { grid-template-columns: 1fr; gap: 60px; padding-top: 100px; padding-bottom: 100px; }
  .visit-card h2 { font-size: 26vw; }
  footer { grid-template-columns: 1fr; align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .burger-stage { transform: none !important; }
  /* the rule above kills the tilt but not the explode, which rides --ex on
     the children */
  .burger-float { animation: none; scale: 1.06; }
  .burger-layer { transform: none !important; }
  .burger-layer::before, .burger-layer::after { display: none; }
}