/* ==========================================================================
   BURGER SHACK — stylesheet
   Art direction: roadside screen-print. Flat fields, hard edges, 1px rules.
   Type: Anton (signage display) / Archivo (grotesque body) / DM Mono (tickets)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Warm neutral 9-step (never pure gray, never pure black/white) + ONE accent.
   -------------------------------------------------------------------------- */
:root {
  /* warm neutral scale — char to cream */
  --ink-900: #14110e;
  --ink-800: #1c1815;
  --ink-700: #26211c;
  --ink-600: #37302a;
  --ink-500: #544a41;
  --ink-400: #8b7f72;
  --ink-300: #afa391;
  --ink-200: #d5cabb;
  --ink-100: #e9e1d3;
  --ink-050: #f5f0e6;

  /* the one accent — roadside sign ember. Budget: <=5% of the field.
     --ember is the fill/rule color; the two text variants exist because the
     same hue cannot clear 4.5:1 on both the char ground and the cream one. */
  --ember: #da3a17;
  --ember-text: #e2421f;   /* accent text on --ink-900 */
  --ember-ink:  #cf2f0c;   /* accent text on --ink-050 */
  --ember-deep: #cd3414;   /* filled surfaces carrying cream text */

  /* semantic aliases */
  --bg: var(--ink-900);
  --surface: var(--ink-800);
  --line: var(--ink-600);
  --fg: var(--ink-050);
  --fg-dim: var(--ink-300);
  --fg-mute: var(--ink-400);
  --fg-watermark: #67605a;   /* oversized footer wordmark, clears 3:1 */

  /* type */
  --display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* modular scale */
  --t-xs: 0.6875rem;
  --t-sm: 0.8125rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.35rem, 1.9vw, 1.75rem);
  --t-xl: clamp(2rem, 4vw, 3.25rem);
  --t-2xl: clamp(2.75rem, 7vw, 5.5rem);
  --t-3xl: clamp(3.25rem, 11vw, 8.75rem);

  /* 4px space scale */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 64px;  --s9: 96px;  --s10: 144px;

  /* page gutter */
  --gut: clamp(20px, 5vw, 76px);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* height:auto is load-bearing — without it the HTML height attribute wins
   over aspect-ratio and every photo box inflates to its intrinsic size. */
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

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

.skip {
  position: absolute; left: var(--s4); top: -100px;
  background: var(--ink-050); color: var(--ink-900);
  border-left: 3px solid var(--ember);
  padding: var(--s3) var(--s5); z-index: 999;
  font-family: var(--mono); font-size: var(--t-sm);
  text-transform: uppercase; letter-spacing: 0.08em;
  transition: top 0.2s;
}
.skip:focus { top: var(--s4); }

.vh {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. TYPE PRIMITIVES
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 400;               /* Anton ships one weight; it reads as black */
  line-height: 0.86;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.4;
}

.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.eyebrow--rule::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--ember);
  flex: none;
}

.lede {
  font-size: var(--t-lg);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-200);
  max-width: 38ch;
  margin-inline: 0;
}

.prose {
  max-width: 55ch;
  margin-inline: 0;
  color: var(--fg-dim);
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   4. LAYOUT — left-rail, anchored. No centered 1200px box.
   -------------------------------------------------------------------------- */
.section {
  padding: var(--s10) var(--gut);
  position: relative;
}

.section--tight { padding-block: var(--s9); }

.section__head {
  display: grid;
  gap: var(--s5);
  margin-bottom: var(--s8);
}

.section__title {
  font-size: var(--t-xl);
  max-width: 18ch;
}

/* Section counter sits in the rail, mono, small — not a centered stats row. */
.section__index {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-400);
  letter-spacing: 0.18em;
}

/* --------------------------------------------------------------------------
   5. HEADER — opaque, 1px rule. No blur, no glass.
   -------------------------------------------------------------------------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding: var(--s4) var(--gut);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 0.35s ease, border-color 0.35s ease, padding 0.35s ease;
}

.site-head.is-stuck {
  background: var(--ink-900);
  border-bottom-color: var(--line);
  padding-block: var(--s3);
}

.wordmark {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}
.wordmark span { color: var(--ember-text); }

.site-nav {
  display: flex;
  gap: var(--s6);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* underline that wipes in from the left — link, not button */
.nav-link {
  position: relative;
  padding-block: var(--s1);
  color: var(--ink-200);
  transition: color 0.25s;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .nav-link:hover { color: var(--fg); }
  .nav-link:hover::after { transform: scaleX(1); }
}
.nav-link:focus-visible::after,
.nav-link.is-pressed::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   6. BUTTONS — rectangle, 1px border, accent fill sweeps on hover AND touch
   -------------------------------------------------------------------------- */
.btn {
  --btn-fg: var(--fg);
  --btn-line: var(--ink-500);
  --btn-sweep: var(--ember);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s6);
  border: 1px solid var(--btn-line);
  border-radius: 0;
  color: var(--btn-fg);
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transition: color 0.3s ease, border-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* the sweep: a solid field rising from the bottom edge */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-sweep);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
}

.btn__arrow {
  display: inline-block;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .btn:hover { color: var(--ink-050); border-color: var(--btn-sweep); }
  .btn:hover::before { transform: scaleY(1); }
  .btn:hover .btn__arrow { transform: translateX(6px); }
}

/* touch + keyboard parity — JS adds .is-pressed on touchstart */
.btn.is-pressed { color: var(--ink-050); border-color: var(--btn-sweep); }
.btn.is-pressed::before { transform: scaleY(1); }
.btn.is-pressed .btn__arrow { transform: translateX(6px); }
.btn:focus-visible::before { transform: scaleY(1); }
.btn:focus-visible { color: var(--ink-050); }
.btn:active { transform: scale(0.97); }

/* primary — the accent's main claim on the page */
.btn--primary {
  --btn-line: var(--ember-deep);
  background: var(--ember-deep);
  color: var(--ink-050);
  --btn-sweep: var(--ink-050);
}
@media (hover: hover) { .btn--primary:hover { color: var(--ink-900); } }
.btn--primary.is-pressed { color: var(--ink-900); }
.btn--primary:focus-visible { color: var(--ink-900); }

/* on cream sections */
.btn--onlight { --btn-fg: var(--ink-900); --btn-line: var(--ink-300); }
@media (hover: hover) { .btn--onlight:hover { color: var(--ink-050); } }
.btn--onlight.is-pressed { color: var(--ink-050); }

/* text action — underlined link, the constitution's default CTA */
.action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-bottom: var(--s1);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}
.action::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .action:hover::after { transform: scaleX(0); transform-origin: right; }
  .action:hover .btn__arrow { transform: translateX(6px); }
}
.action.is-pressed::after { transform: scaleX(0); }
.action.is-pressed .btn__arrow { transform: translateX(6px); }

/* bag control */
.bag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: var(--s2) var(--s4);
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
@media (hover: hover) { .bag:hover { border-color: var(--ember); } }
.bag__count { color: var(--ember-text); font-variant-numeric: tabular-nums; }
.bag.is-bumped { animation: bagBump 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes bagBump {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.09); border-color: var(--ember); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   7. HERO / ASSEMBLY STAGE
   The section pins; the burger builds while it is held on screen.
   -------------------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  padding: 0 var(--gut);
  display: grid;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--s8);
  align-items: center;
  width: 100%;
  padding-block: 96px var(--s6);
}

.hero__rail {
  display: grid;
  gap: var(--s4);
  justify-items: start;
  max-width: 46ch;
  margin-inline: 0;
}

.hero__title {
  font-size: var(--t-3xl);
  margin-block: var(--s2) var(--s1);
}
.hero__title em {
  font-style: normal;
  color: var(--ember);
  display: block;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s6);
  margin-top: var(--s4);
}

/* live build readout — mono, in the rail, not a centered stat */
.readout {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin-top: var(--s5);
}
.readout__bar {
  width: 128px; height: 1px;
  background: var(--line);
  position: relative;
}
.readout__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--ember);
}
.readout__pct { color: var(--ink-200); font-variant-numeric: tabular-nums; }

/* the stage */
.stage {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
}

.stage__inner {
  position: relative;
  width: 100%;
  max-width: 560px;
}

.stage__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* exploded-state ingredient labels — mono, with 1px leader lines */
.tags {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
  white-space: nowrap;
}
.tag::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--ink-600);
  flex: none;
}
.tag--left { flex-direction: row-reverse; }
.tag--left::before { background: var(--ink-600); }

/* the row that lands in the rail once the stack is complete */
.built {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  width: 100%;
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
  margin-top: var(--s1);
}
.built__name {
  font-family: var(--display);
  font-size: 1.3rem;
  text-transform: uppercase;
  line-height: 1;
}
.built__price {
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--ember-text);
}
.built .btn { margin-left: auto; }

.scroll-cue {
  position: absolute;
  left: var(--gut);
  bottom: var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.scroll-cue__line {
  width: 46px; height: 1px;
  background: var(--ink-600);
  position: relative;
  overflow: hidden;
}
.scroll-cue__line::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--ember);
  animation: cue 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cue {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* --------------------------------------------------------------------------
   8. TICKER
   -------------------------------------------------------------------------- */
.ticker {
  border-block: 1px solid var(--line);
  background: var(--ink-800);
  overflow: hidden;
  padding-block: var(--s4);
}
.ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.ticker__item {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding-right: var(--s6);
  color: var(--ink-100);
  display: flex;
  align-items: center;
  gap: var(--s6);
}
.ticker__item::after {
  content: "";
  width: 9px; height: 9px;
  background: var(--ember);
  flex: none;
}

/* --------------------------------------------------------------------------
   9. SIGNATURES — asymmetric split rows, not an identical card grid
   -------------------------------------------------------------------------- */
.sig {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: center;
  padding-block: var(--s9);
  border-top: 1px solid var(--line);
}
.sig:last-of-type { border-bottom: 1px solid var(--line); }
.sig--flip .sig__media { order: -1; }

.sig__media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.sig__media img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  will-change: transform;
}

.sig__no {
  position: absolute;
  top: 0; left: 0;
  background: var(--ink-900);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s3) var(--s4);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  color: var(--ink-300);
}

.sig__body { display: grid; gap: var(--s4); justify-items: start; }
.sig__name { font-size: var(--t-xl); }
.sig__price {
  font-family: var(--mono);
  font-size: var(--t-md);
  color: var(--ember-text);
}
.sig__desc { max-width: 46ch; color: var(--fg-dim); font-weight: 300; }
.sig__spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.sig__spec li { display: flex; align-items: center; gap: var(--s4); }
.sig__spec li + li::before {
  content: "";
  width: 1px; height: 11px;
  background: var(--ink-600);
}

/* --------------------------------------------------------------------------
   10. MENU BOARD — cream inversion, index/list with dot leaders
   -------------------------------------------------------------------------- */
.board {
  background: var(--ink-050);
  color: var(--ink-900);
}
.board .eyebrow { color: var(--ink-500); }
.board .prose { color: var(--ink-500); }
.board .section__index { color: var(--ink-500); }

.board__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s8) var(--s9);
  align-items: start;
}

.menu-group__label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: var(--s5);
  display: flex;
  justify-content: space-between;
}

.menu-item {
  display: grid;
  gap: var(--s1);
  padding-block: var(--s4);
  border-bottom: 1px solid var(--ink-200);
}
.menu-item__top {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}
.menu-item__name {
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--t-base);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  flex: none;
  max-width: 70%;
}
.menu-item__leader {
  flex: 1 1 auto;
  height: 1px;
  border-bottom: 1px dotted var(--ink-300);
  transform: translateY(-3px);
}
.menu-item__price {
  font-family: var(--mono);
  font-size: var(--t-sm);
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--ink-600);
}
.menu-item__desc {
  font-size: var(--t-sm);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-500);
  max-width: 44ch;
}
.menu-item__tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember-ink);
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Burgers without a photograph get a portrait instead — same screen-print
   language as the hero, composed from one shared ingredient sprite. Reads as
   a deliberate illustration system rather than a missing image. */
.menu-item--illus {
  grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--s2) var(--s4);
  align-items: start;
}
.menu-item__text { display: grid; gap: var(--s1); }
.menu-portrait {
  width: 68px;
  height: auto;
  align-self: center;
}

.combo {
  margin-top: var(--s8);
  border: 1px solid var(--ink-200);
  border-left: 3px solid var(--ember);
  padding: var(--s5) var(--s6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}
.combo__text { max-width: 52ch; }
.combo__text strong { font-weight: 700; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   11. SIDES — full-bleed photo band
   -------------------------------------------------------------------------- */
.sides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--line);
}
.side {
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.side:last-child { border-right: 0; }
.side__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) { .side:hover .side__img { transform: scale(1.06); } }
.side.is-pressed .side__img { transform: scale(1.06); }

.side__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) var(--s5) var(--s6);
  background: var(--ink-900);
}
.side__name {
  font-family: var(--display);
  font-size: 1.35rem;
  text-transform: uppercase;
  line-height: 1;
}
.side__price { font-family: var(--mono); font-size: var(--t-sm); color: var(--ember-text); }
.side__desc {
  padding: 0 var(--s5) var(--s6);
  background: var(--ink-900);
  font-size: var(--t-sm);
  font-weight: 300;
  color: var(--ink-400);
  margin-top: -12px;
}

/* --------------------------------------------------------------------------
   12. VISIT + FOOTER — asymmetric, not four equal columns
   -------------------------------------------------------------------------- */
.visit {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--s8);
  align-items: start;
}
.hours { display: grid; gap: 0; }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--ink-300);
}
.hours__row dt { letter-spacing: 0.1em; text-transform: uppercase; }
.hours__row dd { margin: 0; color: var(--ink-100); font-variant-numeric: tabular-nums; }

.site-foot {
  border-top: 1px solid var(--line);
  padding: var(--s8) var(--gut) var(--s6);
  display: grid;
  gap: var(--s7);
}
.foot__mark {
  font-family: var(--display);
  font-size: clamp(3rem, 15vw, 13rem);
  line-height: 0.8;
  text-transform: uppercase;
  color: var(--fg-watermark);
  letter-spacing: -0.02em;
  overflow: hidden;
}
.foot__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s4);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
  border-top: 1px solid var(--line);
  padding-top: var(--s5);
}

/* --------------------------------------------------------------------------
   13. SCROLL-REVEAL PRIMITIVES (JS adds .is-in)
   -------------------------------------------------------------------------- */
.rise { opacity: 0; transform: translateY(28px); }
.rise.is-in {
  opacity: 1; transform: none;
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.rise[data-d="1"].is-in { transition-delay: 0.09s; }
.rise[data-d="2"].is-in { transition-delay: 0.18s; }
.rise[data-d="3"].is-in { transition-delay: 0.27s; }
.rise[data-d="4"].is-in { transition-delay: 0.36s; }

/* headline lines clip-rise */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translateY(105%);
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-in .line-mask > span,
.line-mask.is-in > span { transform: none; }
.line-mask:nth-child(2) > span { transition-delay: 0.08s; }
.line-mask:nth-child(3) > span { transition-delay: 0.16s; }

/* photo wipe */
.wipe { clip-path: inset(0 0 100% 0); }
.wipe.is-in {
  clip-path: inset(0 0 0% 0);
  transition: clip-path 1.05s cubic-bezier(0.65, 0, 0.35, 1);
}

/* 1px rule draws across */
.rule-draw {
  transform: scaleX(0);
  transform-origin: left;
}
.rule-draw.is-in {
  transform: scaleX(1);
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}

/* --------------------------------------------------------------------------
   14. RESPONSIVE

   One rule governs the hero everywhere: it must not be taller than the
   viewport it pins to. A pinned section taller than the screen hides its own
   bottom — which on a phone is exactly where the burger lives. So the stage
   is capped against viewport HEIGHT (svh), not just width, in every stacked
   layout, and short screens trade type size before they trade the burger.
   -------------------------------------------------------------------------- */

/* ---- stacked layout (tablet portrait and below) ---- */
@media (max-width: 899px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--s5);
    padding-block: 84px var(--s6);
  }
  .hero__rail { max-width: none; }
  .hero__title { font-size: clamp(2.5rem, 8.5vw, 4.25rem); }
  .lede { font-size: 1.02rem; max-width: 44ch; }
  .stage__inner { max-width: min(460px, 34svh); }
  .tag { display: none; }              /* no room beside a centered stage */

  .sig, .visit { grid-template-columns: 1fr; gap: var(--s6); }
  .sig--flip .sig__media { order: 0; }
}

/* ---- two-column widths on a short screen ---- */
@media (min-width: 900px) and (max-height: 900px) {
  .hero__grid { padding-block: 84px var(--s5); }
  .hero__title { font-size: clamp(2.75rem, 8vh, 7rem); }
  .lede { font-size: 1.05rem; max-width: 36ch; }
  .stage__inner { max-width: min(560px, 56svh); }
}

@media (min-width: 900px) and (max-height: 760px) {
  .hero__rail { gap: var(--s3); }
  .hero__grid { padding-block: 76px var(--s4); }
  .lede { display: none; }
  .stage__inner { max-width: min(480px, 52svh); }
}

/* ---- phones ---- */
@media (max-width: 720px) {
  .site-nav { display: none; }
  .section { padding-block: var(--s9); }
  .side { border-right: 0; }
  .scroll-cue { display: none; }
  .foot__meta { flex-direction: column; gap: var(--s2); }

  .hero__grid { padding-block: 72px var(--s5); gap: var(--s4); }
  .hero__rail { gap: var(--s3); }
  .hero .eyebrow { font-size: 10px; letter-spacing: 0.13em; }
  .hero__title { font-size: clamp(2.5rem, 13vw, 3.4rem); }
  .lede { font-size: 0.95rem; line-height: 1.45; max-width: 34ch; }
  .hero__actions { gap: var(--s4); margin-top: var(--s1); }
  .readout { margin-top: var(--s2); }
  .readout__bar { width: 80px; }
  .btn { padding: var(--s3) var(--s5); }
  .built { padding-top: var(--s3); gap: var(--s2) var(--s4); }
  .built .btn { margin-left: 0; width: 100%; justify-content: center; }
  .stage__inner { max-width: min(300px, 31svh); }
}

/* Short phones: the lede is the one thing worth trading for a visible burger. */
@media (max-width: 720px) and (max-height: 780px) {
  .hero .lede { display: none; }
  .hero__grid { padding-block: 64px var(--s4); }
  .stage__inner { max-width: min(300px, 29svh); }
}

/* --------------------------------------------------------------------------
   15. REDUCED MOTION — the burger is delivered assembled, nothing scrubs
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rise, .wipe, .line-mask > span, .rule-draw {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .ticker__track { transform: none !important; }
}



/* --------------------------------------------------------------------------
   17. BAG SHEET — the bag is a preview, and says so
   -------------------------------------------------------------------------- */
.board__note {
  margin-top: var(--s6);
  max-width: 58ch;
  margin-inline: 0;
  font-size: var(--t-sm);
  color: var(--ink-500);
  border-left: 1px solid var(--ink-300);
  padding-left: var(--s4);
}
.board__note-link {
  color: var(--ember-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sheet {
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
  padding: var(--s7);
  max-width: 46ch;
  width: calc(100% - var(--s6));
  margin: auto;                    /* dialog centering, not a layout container */
}
.sheet::backdrop { background: rgba(10, 8, 7, 0.72); }

.sheet__title {
  font-size: var(--t-xl);
  margin: var(--s4) 0 var(--s4);
}
.sheet__body {
  color: var(--ink-200);
  font-weight: 300;
  max-width: 42ch;
  margin-inline: 0;
}
.sheet__count {
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--ink-400);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
  margin-top: var(--s5);
}
.sheet__count span { color: var(--ember-text); }
.sheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s5);
}

/* --------------------------------------------------------------------------
   18. PRINT — people print menus. Give them a clean one, not a screenshot.
   -------------------------------------------------------------------------- */
@media print {
  @page { margin: 13mm; }

  :root { --gut: 0; }

  html, body {
    background: #fff;
    color: #000;
    font-size: 9.5pt;
    line-height: 1.38;
  }

  /* Screen furniture. #signatures and #sides are photo-led sections whose
     content is already on the board — printing them wastes a page each. */
  .site-head, .hero, .ticker, .scroll-cue, .site-foot, .sheet, .skip,
  .board__note, .combo, .btn, .action, .foot__mark,
  #signatures, #sides { display: none !important; }

  /* ScrollTrigger wraps the pinned hero in a .pin-spacer as tall as the pin
     distance. Left alone it prints as blank pages before anything appears. */
  .pin-spacer { display: none !important; }

  main { display: block; }
  .section { padding: 0 !important; }
  .board { background: #fff !important; color: #000 !important; }

  #menu::before {
    content: "BURGER SHACK";
    display: block;
    font-family: var(--display);
    font-size: 28pt;
    letter-spacing: 0.02em;
    line-height: 1;
  }

  #menu .section__head { margin-bottom: 5mm; gap: 1mm; }
  #menu .section__index { display: none !important; }
  #menu .section__title { font-size: 12pt; max-width: none; }
  #menu .prose { font-size: 8.5pt; color: #333 !important; max-width: 70ch; }

  .board__cols { display: block; column-count: 2; column-gap: 9mm; }
  .menu-group { break-inside: avoid; margin-bottom: 5mm; }
  .menu-group__label {
    border-bottom: 0.5pt solid #000;
    color: #000 !important;
    font-size: 7.5pt;
  }

  .menu-item { break-inside: avoid; padding-block: 1.4mm; border-bottom: 0.25pt solid #bbb; }
  /* the portrait column is hidden, so give its space back to the text */
  .menu-item--illus { display: block !important; }
  .menu-portrait, .sprite { display: none !important; }
  .menu-item__name { font-size: 9pt; max-width: none; }
  .menu-item__desc { font-size: 7.5pt; color: #333 !important; }
  .menu-item__price { font-size: 8.5pt; color: #000 !important; }
  .menu-item__leader { border-bottom-color: #999; }
  .menu-item__tag { color: #000 !important; font-weight: 700; font-size: 7pt; }

  /* hours and address belong on a printed menu */
  #visit { display: block; break-inside: avoid; margin-top: 6mm; }
  #visit .visit { display: block; }
  #visit .section__title, #visit .prose, #visit .eyebrow,
  #visit .section__index { display: none !important; }
  #visit .section__head { display: block; margin: 0 !important; }
  #visit p { font-size: 8.5pt; color: #000 !important; }
  .hours { margin-top: 3mm; max-width: 92mm; }
  .hours__row { border-bottom: 0.25pt solid #bbb; font-size: 8pt; padding-block: 0.8mm; }
  .hours__row dt, .hours__row dd { color: #000 !important; }

  .rise, .wipe, .line-mask > span, .rule-draw {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* ---------- Built by Iron Digital MI ----------
   currentColor throughout so the line inherits whatever the footer already is.
   The mark itself is never recolored. */
.id-by { margin: 1.6em 0 0; }
.id-by a { display: inline-flex; align-items: center; gap: .6em;
  color: inherit; text-decoration: none; font-size: .8125rem; line-height: 1.3; }
.id-by a:hover span, .id-by a:focus-visible span { text-decoration: underline; }
.id-by img { width: 26px; height: 26px; display: block; flex: 0 0 auto; }
.id-by b { font-weight: 700; }

/* September UI refinement */
@media(min-width:901px){.hero__title{font-size:clamp(80px,7.8vw,124px);line-height:.92}}.hero__actions{position:relative;z-index:3}