/* EGORA BURGER: premium brutalism
   Grid lines are real gaps: a cell grid with gap:1px on a line-coloured parent.
   Rule: never fade or clip a grid CELL itself (the line colour would show through);
   reveal its contents instead. */

:root {
  --bg: #111111;
  --ink: #F2EDE4;
  --ink-soft: #A39B8F;
  --line: rgba(242, 237, 228, 0.3);
  --accent: #FFB000;
  --accent-ink: #111111;
  --crust: #7A4523;

  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --nav-h: 56px;
  --gutter: clamp(16px, 2.2vw, 36px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --snap: cubic-bezier(0.8, 0, 0.1, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-display);
  font-stretch: 100%;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* grain: fixed, non-interactive, never on a scrolling layer */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }
b { font-weight: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html { scrollbar-color: #5a5650 var(--bg); scrollbar-width: thin; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 8px; top: 8px; z-index: 200;
  padding: 10px 14px; background: var(--accent); color: var(--accent-ink);
  font: 700 13px/1 var(--f-mono); text-transform: uppercase;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* ---------- type primitives ---------- */
.cond {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 62%;
  text-transform: uppercase;
}
.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 56px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font: 700 13px/1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 90ms linear, color 90ms linear, border-color 90ms linear;
}
.btn::after {
  content: "";
  width: 10px; height: 10px;
  background: currentColor;
  flex: none;
}
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .btn--accent:hover { background: var(--ink); border-color: var(--ink); color: var(--accent-ink); }
}
.btn--xl { min-height: 72px; padding: 0 26px; font-size: 15px; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav__brand {
  display: flex; align-items: center;
  padding: 0 var(--gutter);
  border-right: 1px solid var(--line);
}
.lockup { display: block; height: 38px; width: auto; overflow: visible; }
.lockup text, .foot__mark text { fill: var(--ink); font-family: var(--f-display); font-weight: 900; }
.lockup__a { font-size: 51px; font-stretch: 62%; font-variation-settings: "wdth" 62; }
.lockup__b { font-size: 24.5px; font-stretch: 125%; font-variation-settings: "wdth" 125; }
.nav__links { display: flex; }
.nav__links a, .nav__cta {
  display: flex; align-items: center;
  padding: 0 clamp(14px, 1.6vw, 26px);
  border-right: 1px solid var(--line);
  font: 500 12px/1 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 90ms linear, color 90ms linear;
}
.nav__cta { border-right: 0; border-left: 1px solid var(--line); font-weight: 700; }
.nav__cta:not(.nav__cta--ghost) { background: var(--accent); color: var(--accent-ink); border-left-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover, .nav__cta--ghost:hover { background: var(--accent); color: var(--accent-ink); }
  .nav__cta:not(.nav__cta--ghost):hover { background: var(--ink); }
}

/* ---------- hero ---------- */
.hero { position: relative; height: 620vh; }
.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__static { display: none; }

.wm { margin: 0; font-weight: 900; text-transform: uppercase; line-height: 0.78; pointer-events: none; }
.wm__a, .wm__b { position: absolute; display: block; will-change: transform; white-space: nowrap; }
.wm__a {
  left: -0.045em;
  top: calc(var(--nav-h) + 44px);
  font-size: min(13vw, 26svh);
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  letter-spacing: -0.01em;
}
.wm__b {
  right: -0.05em;
  bottom: calc(64px + 3vh);
  font-size: min(6vw, 12svh);
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
  letter-spacing: -0.02em;
}
.wm__in { display: block; clip-path: inset(0 0 0 0); }
.js .hero:not(.is-ready) .wm__in { clip-path: inset(0 0 100% 0); }
.js .hero.is-ready .wm__in { transition: clip-path 0.7s var(--snap); }
.js .hero.is-ready .wm__b .wm__in { transition-delay: 0.09s; }

.hero__tag {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--nav-h) + 44px + min(13vw, 26svh) * 0.8 + 18px);
  margin: 0;
  display: flex; flex-direction: column;
  font: 500 13px/1.5 var(--f-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  transition: opacity 0.12s linear;
}
.js .hero:not(.is-loaded) .hero__tag,
.hero.is-scrolled .hero__tag { opacity: 0; }

/* statements: hard clip reveals, instant cut out */
.stmt {
  position: absolute;
  top: 50%;
  left: var(--gutter);
  width: 34vw;
  transform: translateY(-46%);
  pointer-events: none;
}
.stmt--2 { left: auto; right: var(--gutter); text-align: right; }
.stmt__big {
  margin: 0;
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  font-size: clamp(64px, 8.4vw, 190px);
  line-height: 0.84;
  letter-spacing: -0.005em;
}
.stmt--3 .stmt__big { font-size: clamp(60px, 7.4vw, 170px); }
.stmt__big .ln, .stmt__sub .ln, .hero__ready .ln { display: block; }
.stmt mark, .close mark {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0 0.05em;
}
.stmt__sub {
  margin: 22px 0 0;
  font: 500 13px/1.5 var(--f-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 32ch;
}
.stmt--2 .stmt__sub { margin-left: auto; }
.stmt .ln, .hero__ready .ln, .hero__btns .btn { clip-path: inset(0 100% 0 0); }
.stmt.is-on .ln, .hero__cta.is-on .ln, .hero__cta.is-on .btn {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.38s var(--snap);
}
.stmt.is-on .ln:nth-child(2), .hero__cta.is-on .ln:nth-child(2) { transition-delay: 0.06s; }
.stmt.is-on .ln:nth-child(3), .hero__cta.is-on .ln:nth-child(3) { transition-delay: 0.12s; }
.stmt.is-on .stmt__sub .ln { transition-delay: 0.16s; }
.stmt--2 .ln { clip-path: inset(0 0 0 100%); }

.hero__cta {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  width: min(24vw, 440px);
  visibility: hidden;
}
.hero__cta.is-on { visibility: visible; }
.hero__ready {
  margin: 0 0 28px;
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  font-size: clamp(56px, 6.2vw, 140px);
  line-height: 0.84;
}
.hero__ready .ln:last-child { color: var(--accent); }
.hero__btns { display: grid; gap: 10px; }
.hero__cta.is-on .btn:nth-child(1) { transition-delay: 0.18s; }
.hero__cta.is-on .btn:nth-child(2) { transition-delay: 0.24s; }

/* HUD */
.hud {
  position: absolute;
  inset: var(--nav-h) 0 0 0;
  pointer-events: none;
  font: 500 11px/1.4 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.hud b { color: var(--ink); font-weight: 700; }
.hud__stages {
  position: absolute; right: var(--gutter); top: 9px;
  display: flex; margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--line);
}
.hud__stages li { padding: 5px 10px; border-left: 1px solid var(--line); }
.hud__stages li:first-child { border-left: 0; }
.hud__stages li.is-on { background: var(--accent); color: var(--accent-ink); }
.hud__stages li.is-on b { color: var(--accent-ink); }
.hud__bl, .hud__br {
  position: absolute; bottom: 22px;
  display: flex; gap: 22px;
}
.hud__bl { left: var(--gutter); }
.hud__br { right: var(--gutter); }
.hud__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  border-top: 1px solid var(--line);
}
.hud__bar i {
  position: absolute; left: 0; top: -1px; height: 3px; width: 100%;
  background: var(--accent);
  transform-origin: 0 0;
  transform: scaleX(0);
}
.hud__bar em { position: absolute; top: -7px; width: 1px; height: 7px; background: var(--ink-soft); }
.js .hero:not(.is-loaded) .hud__stages { visibility: hidden; }

/* loader */
.loader {
  position: absolute;
  left: var(--gutter);
  bottom: calc(64px + 3vh);
  display: flex; flex-direction: column; gap: 10px;
  font-family: var(--f-mono);
  text-transform: uppercase;
}
.loader__num {
  font-weight: 700;
  font-size: clamp(88px, 13vw, 240px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.loader__num small { font-size: 0.4em; letter-spacing: 0; color: var(--accent); }
.loader__label { font-size: 12px; letter-spacing: 0.1em; color: var(--ink-soft); }
.no-js .loader, .hero.is-loaded .loader { display: none; }

/* no-js and reduced motion: a still, not a scrub */
.no-js .hero, .rm .hero { height: auto; }
.no-js .hero__stage, .rm .hero__stage { position: relative; }
.no-js .hero__canvas, .rm .hero__canvas { display: none; }
.no-js .hero__static, .rm .hero__static { display: block; position: absolute; inset: 0; }
.no-js .hero__static img, .rm .hero__static img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 60%; }
.no-js .stmt, .rm .stmt, .no-js .hud__bar, .rm .hud__bar { display: none; }
.no-js .hero__cta, .rm .hero__cta { visibility: visible; top: auto; bottom: calc(64px + 3vh); transform: none; }
.no-js .hero__cta .ln, .no-js .hero__cta .btn, .rm .hero__cta .ln, .rm .hero__cta .btn { clip-path: none; }
.no-js .hero__ready, .rm .hero__ready { display: none; }
.rm .wm__b { bottom: auto; top: calc(var(--nav-h) + 44px + min(13vw, 26svh) * 0.8 + 120px); }

/* ---------- ticker (the one marquee) ---------- */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: relative;
  z-index: 2;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: tick 42s linear infinite;
}
.ticker span {
  display: flex; align-items: center;
  padding: 14px 0;
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1;
  white-space: nowrap;
}
.ticker span::after {
  content: "";
  width: 0.34em; height: 0.34em;
  margin: 0 0.7em;
  background: var(--accent);
}
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- sections: the cell grid ---------- */
.sec {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.sec > * { background: var(--bg); min-width: 0; }

.sec__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 96px);
  padding: clamp(24px, 3vw, 48px) var(--gutter) clamp(28px, 3.4vw, 56px);
}
.num {
  display: block;
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  font-size: clamp(120px, 15vw, 290px);
  line-height: 0.74;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  font-variant-numeric: tabular-nums;
}
.h2 {
  margin: 0;
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  font-size: clamp(48px, 5.2vw, 104px);
  line-height: 0.86;
  letter-spacing: -0.005em;
}

/* 01 story */
.story {
  grid-template-areas:
    "head head head head head grill grill grill grill grill grill grill"
    "facts facts facts facts facts grill grill grill grill grill grill grill"
    "note note note note note note note room room room room room";
}
.story .sec__head { grid-area: head; }
.story__grill { grid-area: grill; position: relative; }
.story__grill img { width: 100%; height: 100%; object-fit: cover; min-height: 520px; }
.story__facts {
  grid-area: facts;
  margin: 0;
  padding: 0 var(--gutter) clamp(28px, 3vw, 48px);
  display: grid;
  gap: 28px;
  align-content: end;
}
.story__facts div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.story__facts dt {
  font: 700 12px/1.6 var(--f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.story__facts dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); max-width: 46ch; }
.story__room { grid-area: room; }
.story__room img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.story__note {
  grid-area: note;
  margin: 0;
  padding: var(--gutter);
  display: flex; align-items: flex-end;
  font-weight: 800;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  font-size: clamp(28px, 2.6vw, 48px);
  line-height: 0.95;
}
.story__note span { max-width: 22ch; }

/* 02 ingredients (signature: crosshair) */
.ingr {
  grid-template-areas:
    "head head head head head plate plate plate plate plate plate plate"
    "list list list list list plate plate plate plate plate plate plate";
}
.ingr .sec__head { grid-area: head; }
.ingr__plate { grid-area: plate; padding: var(--gutter); }
.ingr__frame {
  position: sticky;
  top: calc(var(--nav-h) + var(--gutter));
  overflow: hidden;
  border: 1px solid var(--line);
}
.ingr__frame img { width: 100%; height: auto; }
.ingr__list { grid-area: list; list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ingr__list li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas: "n name" "n d";
  column-gap: 8px;
  padding: 16px var(--gutter) 18px;
  border-top: 1px solid var(--line);
  cursor: crosshair;
  outline-offset: -3px;
  transition: background-color 80ms linear, color 80ms linear;
}
.ingr__n { grid-area: n; font: 700 13px/1.9 var(--f-mono); color: var(--ink-soft); }
.ingr__name {
  grid-area: name;
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  font-size: clamp(34px, 3.2vw, 60px);
  line-height: 0.9;
}
.ingr__d { grid-area: d; margin-top: 8px; font: 400 13px/1.5 var(--f-mono); color: var(--ink-soft); }
.ingr__list li.is-on { background: var(--accent); color: var(--accent-ink); }
.ingr__list li.is-on .ingr__n, .ingr__list li.is-on .ingr__d { color: var(--accent-ink); }

.xh { position: absolute; inset: 0; pointer-events: none; --x: 6.4; --y: 13.5; --w: 24.7; --h: 40.7; }
.xh__v, .xh__h, .xh__c {
  position: absolute; inset: 0;
  transition: transform 0.28s var(--snap);
}
.xh__v { transform: translateX(calc((var(--x) + var(--w) / 2) * 1%)); }
.xh__h { transform: translateY(calc((var(--y) + var(--h) / 2) * 1%)); }
.xh__v::before, .xh__h::before { content: ""; position: absolute; background: rgba(242, 237, 228, 0.55); }
.xh__v::before { left: 0; top: 0; bottom: 0; width: 1px; }
.xh__h::before { left: 0; right: 0; top: 0; height: 1px; }
.xh__c::before { content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--accent); }
.xh__c--tl { transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)); }
.xh__c--tr { transform: translate(calc((var(--x) + var(--w) - 100) * 1%), calc(var(--y) * 1%)); }
.xh__c--bl { transform: translate(calc(var(--x) * 1%), calc((var(--y) + var(--h) - 100) * 1%)); }
.xh__c--br { transform: translate(calc((var(--x) + var(--w) - 100) * 1%), calc((var(--y) + var(--h) - 100) * 1%)); }
.xh__c--tl::before { left: 0; top: 0; border-top-width: 2px; border-left-width: 2px; }
.xh__c--tr::before { right: 0; top: 0; border-top-width: 2px; border-right-width: 2px; }
.xh__c--bl::before { left: 0; bottom: 0; border-bottom-width: 2px; border-left-width: 2px; }
.xh__c--br::before { right: 0; bottom: 0; border-bottom-width: 2px; border-right-width: 2px; }
.xh__label {
  position: absolute;
  inset: 0;
  transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%));
  transition: transform 0.28s var(--snap);
}
.xh__label b, .xh__label span {
  position: absolute; left: 0;
  padding: 3px 7px;
  font: 700 11px/1.3 var(--f-mono);
  letter-spacing: 0.06em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.xh__label b { top: -42px; background: var(--accent); color: var(--accent-ink); }
.xh__label span { top: -23px; background: var(--bg); color: var(--ink); font-weight: 500; }

/* 03 menu */
.menu { grid-template-areas: "head head head head head head head head head head head head" "grid grid grid grid grid grid grid grid grid grid grid grid"; }
.menu .sec__head { grid-area: head; flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: clamp(24px, 4vw, 80px); }
.menu__grid {
  grid-area: grid;
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}
.dish { background: var(--bg); display: flex; flex-direction: column; min-width: 0; }
.dish--lead { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.dish__top, .dish__info { transition: background-color 90ms linear, color 90ms linear; }
.dish__top {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px var(--gutter) 0;
}
.dish__n {
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  font-size: clamp(56px, 5.2vw, 104px);
  line-height: 0.8;
  font-variant-numeric: tabular-nums;
}
.dish__price {
  font: 700 clamp(24px, 2.2vw, 40px)/1 var(--f-mono);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.dish img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.dish--lead img { aspect-ratio: auto; height: 0; flex: 1 1 auto; min-height: 380px; object-position: 50% 58%; }
.dish__info { padding: 0 var(--gutter) 22px; }
.dish__name {
  margin: 0 0 10px;
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  font-size: clamp(34px, 3vw, 56px);
  line-height: 0.9;
}
.dish__d { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 44ch; }
.dish--lead .dish__n { font-size: clamp(96px, 10vw, 200px); }
.dish--lead .dish__price { font-size: clamp(40px, 4.2vw, 80px); }
.dish--lead .dish__name { font-size: clamp(48px, 5.4vw, 104px); }
.dish--lead .dish__d { font-size: 17px; }
@media (hover: hover) and (pointer: fine) {
  .dish:hover .dish__top, .dish:hover .dish__info { background: var(--accent); color: var(--accent-ink); }
  .dish:hover .dish__d { color: var(--accent-ink); }
  .dish:hover .dish__info { padding-top: 14px; margin-top: -14px; }
}

/* 04 sides */
.sides {
  grid-template-areas:
    "head head head head head pics pics pics pics pics pics pics"
    "list list list list list pics pics pics pics pics pics pics";
}
.sides .sec__head { grid-area: head; }
.sides__list {
  grid-area: list;
  width: 100%;
  border-collapse: collapse;
  align-self: stretch;
}
.sides__list tr { border-top: 1px solid var(--line); }
.sides__list th, .sides__list td { padding: 18px 0; vertical-align: baseline; }
.sides__list th {
  padding-left: var(--gutter);
  text-align: left;
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  font-size: clamp(28px, 2.4vw, 44px);
  line-height: 0.95;
  width: 42%;
}
.sides__list td { font-size: 14px; line-height: 1.45; color: var(--ink-soft); padding-right: 16px; }
.sides__list .price {
  padding-right: var(--gutter);
  text-align: right;
  white-space: nowrap;
  font: 700 clamp(20px, 1.8vw, 30px)/1 var(--f-mono);
  color: var(--ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.sides__pics {
  grid-area: pics;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
.sides__pics figure { background: var(--bg); overflow: hidden; }
.sides__pics img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.sides__fries { grid-row: 1 / span 2; }

/* 05 visit */
.visit {
  grid-template-areas:
    "head head head head head photo photo photo photo photo photo photo"
    "info info info info info photo photo photo photo photo photo photo"
    "map map map map map map map map transit transit transit transit";
}
.visit .sec__head { grid-area: head; }
.visit__photo { grid-area: photo; }
.visit__photo img { width: 100%; height: 100%; object-fit: cover; min-height: 480px; }
.visit__info { grid-area: info; padding: 0 var(--gutter) var(--gutter); display: grid; gap: 28px; align-content: end; }
.visit__info address {
  font-style: normal;
  font: 500 15px/1.6 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hours { width: 100%; border-collapse: collapse; font: 500 15px/1 var(--f-mono); font-variant-numeric: tabular-nums; text-transform: uppercase; }
.hours tr { border-top: 1px solid var(--line); }
.hours tr:last-child { border-bottom: 1px solid var(--line); }
.hours th { text-align: left; font-weight: 500; color: var(--ink-soft); padding: 13px 0; }
.hours td { text-align: right; font-weight: 700; padding: 13px 0; }
.visit__book { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 40ch; }
.visit__book a, .foot a, .visit__transit a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .visit__book a:hover, .foot a:hover { background: var(--accent); color: var(--accent-ink); text-decoration-color: var(--accent-ink); }
}
.visit__map { grid-area: map; padding: var(--gutter); }
.visit__map svg { display: block; width: 100%; height: auto; }
.map__streets path { fill: none; stroke: rgba(242, 237, 228, 0.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.map__streets .map__main { stroke: var(--ink-soft); stroke-width: 2; }
.map__labels text { font: 500 11px var(--f-mono); letter-spacing: 0.12em; fill: var(--ink-soft); }
.map__labels .map__muted { fill: #7d766c; }
.map__pin rect { fill: var(--accent); }
.map__pin path { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.map__pin text { font: 700 13px var(--f-mono); letter-spacing: 0.08em; fill: var(--ink); }
.visit__transit {
  grid-area: transit;
  margin: 0;
  padding: var(--gutter);
  display: flex; align-items: flex-end;
  font-weight: 800;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  font-size: clamp(26px, 2.4vw, 44px);
  line-height: 0.95;
}

/* 06 close */
.close {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.close__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; }
.close__inner {
  position: relative;
  padding: calc(var(--nav-h) + var(--gutter)) var(--gutter) var(--gutter);
  display: grid;
  justify-items: end;
  text-align: right;
  gap: 18px;
}
.num--close { position: absolute; left: var(--gutter); top: calc(var(--nav-h) + var(--gutter)); }
.close__h {
  margin: 0;
  font-weight: 900;
  font-stretch: 62%;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  font-size: clamp(72px, 11vw, 240px);
  line-height: 0.86;
  letter-spacing: -0.01em;
}
.close__h span, .close__p span {
  display: block;
  width: fit-content;
  margin-left: auto;
  background: var(--bg);
  padding: 0.02em 0.08em 0;
}
.close__h span + span { color: var(--accent); }
.close__p { margin: 0; font: 500 14px/1.5 var(--f-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.close__p span { padding: 8px 12px; }
.close__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.btn--solid { background: var(--bg); }

/* 07 footer */
.foot { background: var(--bg); }
.foot__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.foot__grid > div { background: var(--bg); padding: var(--gutter); }
.foot__k {
  margin: 0 0 14px;
  font: 700 11px/1 var(--f-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.foot p { margin: 0; font-size: 15px; line-height: 1.6; max-width: 38ch; }
.foot__social { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.foot__mark { display: block; width: 100%; height: auto; padding: clamp(20px, 3vw, 48px) var(--gutter) 0; }
.foot__mark .lockup__a, .foot__mark .lockup__b { font-size: 133px; }
.foot__base {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 18px var(--gutter) 22px;
  border-top: 1px solid var(--line);
  font: 500 12px/1 var(--f-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.foot .foot__base { margin: 0; max-width: none; }

/* ---------- reveals (contents only, never grid cells) ---------- */
.js [data-reveal]:not([data-reveal="wipe"]) {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.45s var(--ease) var(--d, 0ms), transform 0.6s var(--ease) var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="wipe"] img { clip-path: inset(0 0 100% 0); transition: clip-path 0.85s var(--snap) var(--d, 0ms); }
.js [data-reveal="wipe"].is-in img { clip-path: inset(0 0 0 0); }

/* ---------- reduced motion: fewer, gentler ---------- */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .xh__v, .xh__h, .xh__c, .xh__label { transition: none; }
}
.rm [data-reveal]:not([data-reveal="wipe"]) { transform: none; transition: opacity 0.3s linear; }
.rm [data-reveal="wipe"] img { clip-path: none; }

/* ---------- tablet ---------- */
@media (max-width: 1199px) {
  .menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dish--lead { grid-column: 1 / span 2; grid-row: auto; }
  .dish--lead img { height: auto; aspect-ratio: 16 / 9; min-height: 0; }
  .menu__grid .dish:last-child { grid-column: 1 / span 2; }
  .menu__grid .dish:last-child img { aspect-ratio: 16 / 9; }
}

/* ---------- phone / small tablet ---------- */
@media (max-width: 899px) {
  .sec { grid-template-columns: minmax(0, 1fr); }
  .story { grid-template-areas: "head" "grill" "facts" "room" "note"; }
  .story__grill img { min-height: 0; aspect-ratio: 4 / 3; }
  .story__facts { padding-top: var(--gutter); }
  .story__facts div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ingr { grid-template-areas: "head" "plate" "list"; }
  .ingr__plate { position: sticky; top: var(--nav-h); z-index: 3; padding: 12px var(--gutter); border-bottom: 1px solid var(--line); }
  .ingr__frame { position: relative; top: 0; }
  .ingr__list li { padding-top: 22px; padding-bottom: 22px; }
  .menu { grid-template-areas: "head" "grid"; }
  .menu .sec__head { flex-direction: column; align-items: flex-start; }
  .sides { grid-template-areas: "head" "list" "pics"; }
  .sides__list th { width: auto; }
  .visit { grid-template-areas: "head" "photo" "info" "map" "transit"; }
  .visit__photo img { min-height: 0; aspect-ratio: 4 / 3; }
  .visit__info { padding-top: var(--gutter); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  :root { --nav-h: 52px; }
  .hide-sm { display: none !important; }
  .nav { grid-template-columns: auto 1fr auto; }
  .nav__links { justify-content: flex-end; }
  .nav__links a { border-right: 0; border-left: 1px solid var(--line); }
  .lockup { height: 34px; }

  .hero { height: 500vh; }
  .wm__a { font-size: 23vw; top: calc(var(--nav-h) + 40px); left: -0.04em; }
  .wm__b { font-size: 9.6vw; bottom: auto; top: calc(var(--nav-h) + 40px + 23vw * 0.8 + 10px); right: auto; left: var(--gutter); }
  .hero__tag { top: auto; bottom: 40px; font-size: 12px; }
  .stmt, .stmt--2 {
    top: calc(var(--nav-h) + 44px);
    left: var(--gutter); right: var(--gutter);
    width: auto;
    transform: none;
    text-align: left;
  }
  .stmt__big, .stmt--3 .stmt__big { font-size: 15.5vw; }
  .stmt__sub { margin-top: 12px; font-size: 11.5px; }
  .stmt--2 .stmt__sub { margin-left: 0; }
  .stmt--2 .ln { clip-path: inset(0 100% 0 0); }
  .hero__cta {
    top: calc(var(--nav-h) + 44px); bottom: 26px;
    left: var(--gutter); right: var(--gutter);
    width: auto;
    transform: none;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .hero__ready { font-size: 14vw; margin: 0; }
  .hero__btns { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero__btns .btn { padding: 0 14px; font-size: 12px; gap: 12px; }
  .hud { font-size: 10px; }
  .hud__stages li { padding: 4px 7px; }
  .hud__stages li:not(.is-on) span { display: none; }
  .loader { bottom: 48px; }
  .no-js .hero__cta, .rm .hero__cta { top: auto; bottom: 26px; }
  .no-js .hero__static img, .rm .hero__static img { object-position: 50% 62%; }
  .rm .wm__b { top: calc(var(--nav-h) + 40px + 23vw * 0.8 + 10px); }
  .rm .hero__tag { display: none; }

  .num { font-size: 34vw; }
  .h2 { font-size: 13.4vw; }
  .sec__head { gap: 22px; }
  .dish--lead, .menu__grid .dish:last-child { grid-column: auto; }
  .menu__grid { grid-template-columns: minmax(0, 1fr); }
  .dish--lead .dish__n { font-size: 26vw; }
  .dish--lead .dish__name { font-size: 12vw; }
  .dish img, .menu__grid .dish:last-child img { aspect-ratio: 4 / 3; }
  .sides__list th { font-size: 8.4vw; }
  .sides__list td:not(.price) { display: none; }
  .sides__pics { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .sides__fries { grid-row: auto; grid-column: 1 / span 2; }
  .close { align-items: end; }
  .close__bg { object-position: 40% 50%; }
  .close__inner { justify-items: start; text-align: left; padding-top: calc(var(--nav-h) + 40vh); }
  .num--close { position: static; }
  .close__h { font-size: 19vw; }
  .close__h span, .close__p span { margin-left: 0; }
  .close__btns { justify-content: flex-start; width: 100%; display: grid; grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__base { flex-direction: column; }
}