/* Self-hosted. The Google Fonts stylesheet was render-blocking on a third
   party for 720 ms; these are the same two latin subsets, same origin. */
@font-face{
  font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/anton-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;
  src:url("../fonts/dmsans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}

/* Geneva's Burgers, 17141 E. 8 Mile Rd, Eastpointe MI.
   Palette and devices taken from the restaurant itself: the red of the hand
   painted sign, the cream block wall, and the red-and-black checkered trim
   running around the inside. Nothing here is invented decoration. */

:root{
  --cream:#F4EBDD;
  --bone:#EADFCC;
  --red:#C8102E;
  --red-ink:#B00C26;   /* small text: --red is 4.46 on bone, under AA */
  --red-dark:#8E0620;
  --ink:#141009;
  --ink-2:#4A4038;
  --white:#FFFFFF;
  --gold:#F0A93B;
  --hair:rgba(20,16,9,.14);

  --display:"Anton",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:12px 18px;z-index:999;}
.skip:focus{left:8px;top:8px;}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px;}
.red :focus-visible,.ink :focus-visible,.pin-stage :focus-visible,.walk :focus-visible{outline-color:var(--white);}

/* ───────── type ───────── */
.display{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  line-height:.8;letter-spacing:-.01em;margin:0;
  font-size:clamp(2.7rem,10.6vw,9.4rem);
}
.display-sm{font-size:clamp(2.6rem,8.5vw,6.5rem);}
.display-md{font-size:clamp(3rem,10vw,8rem);}
.eyebrow{
  font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;margin:0 0 18px;opacity:.75;
}
.sub{font-family:var(--body);font-weight:700;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;margin:0 0 16px;opacity:.88;}
.lede{font-size:clamp(1.08rem,2.1vw,1.4rem);line-height:1.5;max-width:38ch;margin:22px 0 0;}
.lede b{font-weight:700;}

/* ───────── nav ───────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;gap:20px;
  padding:15px clamp(16px,4vw,44px);
  transition:background .3s ease,box-shadow .3s ease;
}
.nav.stuck{background:var(--cream);box-shadow:0 1px 0 var(--hair);}
.nav-mark{
  font-family:var(--display);text-transform:uppercase;text-decoration:none;color:var(--red);
  font-size:clamp(1.35rem,3vw,1.9rem);
  display:inline-flex;align-items:center;min-height:44px;
}
.nav-links{display:flex;gap:22px;margin-left:auto;}
.nav-links a{
  display:inline-flex;align-items:center;min-height:44px;
  text-decoration:none;font-weight:700;font-size:.86rem;letter-spacing:.04em;
  opacity:.72;transition:opacity .2s ease;
}
.nav-links a:hover{opacity:1;}
.nav-call{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  background:var(--red);color:var(--white);font-weight:700;font-size:.9rem;
  padding:12px 18px;min-height:44px;border-radius:100px;box-shadow:0 3px 0 var(--red-dark);
  transition:transform .18s ease,box-shadow .18s ease;
}
.nav-call:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--red-dark);}

/* ───────── hero ───────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:78px clamp(16px,4vw,44px) 26px;overflow:hidden;
}
/* the two words sandwich the plate: one behind it, one in front */
.hero-type{
  position:relative;z-index:1;width:100%;max-width:1500px;
  display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;
}
.hero-type .display{color:var(--red);position:relative;display:block;}
.line-back{z-index:1;will-change:transform;}
.line-front{z-index:3;margin-top:0;will-change:transform;-webkit-text-stroke:2px var(--cream);paint-order:stroke fill;}
.hero-burger-wrap{position:relative;z-index:2;display:block;margin:-.12em auto -.14em;}
.hero-burger{
  width:min(46vw,620px);height:auto;margin:0 auto;
  filter:drop-shadow(0 26px 34px rgba(20,16,9,.34));
  will-change:transform;
}
/* before the first scroll the hero is otherwise dead; a slow drift reads as
   life without reading as an animation */
@media (prefers-reduced-motion:no-preference){
  .hero-burger{animation:drift 7.5s ease-in-out infinite;}
}
@keyframes drift{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
  50%    {transform:translate3d(0,-9px,0) rotate(-.5deg);}
}
.hero.moved .hero-burger{animation:none;}

.badge{
  position:absolute;z-index:4;
  font-family:var(--body);font-weight:800;font-size:clamp(.82rem,1.35vw,1.05rem);
  letter-spacing:.09em;text-transform:uppercase;text-align:center;line-height:1.15;
  background:var(--white);color:var(--ink);
  padding:11px 20px;border-radius:100px;
  box-shadow:0 1px 0 rgba(20,16,9,.10), 0 10px 24px rgba(20,16,9,.16);
  will-change:transform;
  opacity:0;animation:pop .7s cubic-bezier(.2,1.3,.35,1) forwards;
}
.badge-red{background:var(--red);color:var(--white);}
.badge-gold{background:var(--gold);color:var(--ink);}
.hero-badges .badge:nth-child(1){animation-delay:.75s;}
.hero-badges .badge:nth-child(2){animation-delay:.9s;}
.hero-badges .badge:nth-child(3){animation-delay:1.05s;}
@keyframes pop{
  from{opacity:0;transform:translateY(16px) scale(.82) rotate(var(--r,0deg));}
  to  {opacity:1;transform:translateY(0) scale(1) rotate(var(--r,0deg));}
}
.hero-badges .badge:nth-child(1){left:5vw;top:22%;--r:-9deg;}
.hero-badges .badge:nth-child(2){right:5vw;top:30%;--r:8deg;}
.hero-badges .badge:nth-child(3){left:7vw;bottom:29%;--r:-6deg;}

.hero-stats{
  position:relative;z-index:5;will-change:transform;margin:clamp(20px,2.6vw,32px) 0 0;
  display:grid;grid-template-columns:repeat(4,auto);
  gap:clamp(20px,4.5vw,64px);justify-content:center;text-align:center;
}
.hero-stats div{display:flex;flex-direction:column-reverse;gap:4px;}
.hero-stats dt{font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);opacity:.6;}
.hero-stats dd{margin:0;display:flex;align-items:baseline;justify-content:center;gap:2px;color:var(--red);}
.hero-stats b{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,4vw,3rem);line-height:.9;letter-spacing:-.01em;}
.hero-stats i{font-style:normal;font-family:var(--display);font-size:clamp(.9rem,1.9vw,1.35rem);color:var(--red-ink);}

/* ───────── checkerboard, from the trim inside ───────── */
.checks{height:18px;background:repeating-linear-gradient(90deg,var(--ink) 0 18px,var(--red) 18px 36px);}

/* ───────── chapters ───────── */
.chapter{padding:clamp(74px,11vw,155px) clamp(16px,4vw,44px);}
.chapter.stat{padding-bottom:clamp(56px,7vw,96px);}
.chapter.cream{background:var(--cream);color:var(--ink);}
.chapter.red{background:var(--red);color:var(--white);}
.chapter.red .display{color:currentColor;}

/* ───────── stat ───────── */
.stat{text-align:center;}
/* the eyebrow was 12.5px against a 320px number: 25x apart, so it read as a
   footnote. Gaps below are in em so they scale with the type they separate. */
.stat .eyebrow{
  font-size:clamp(1rem,1.5vw,1.35rem);letter-spacing:.28em;opacity:1;
  color:var(--white);margin:0 0 .9em;
}
.bignum{font-family:var(--display);line-height:.78;margin:0 0 .1em;font-size:clamp(5.6rem,24vw,20rem);letter-spacing:-.025em;font-variant-numeric:tabular-nums;}
.stat .display-sm{line-height:.88;margin-top:.06em;}
.stat-sub{max-width:44ch;margin:1.9em auto 0;font-size:1.04rem;opacity:.92;}
.bars{list-style:none;margin:2.6em auto 0;padding:0;max-width:460px;display:flex;flex-direction:column;gap:10px;}
.bars li{display:flex;align-items:center;gap:12px;font-size:.86rem;}
.bl{width:3ch;font-weight:700;}
.bt{flex:1;height:10px;background:rgba(255,255,255,.26);border-radius:100px;overflow:hidden;}
.bt i{display:block;height:100%;width:0;background:var(--white);border-radius:100px;transition:width 1.1s cubic-bezier(.2,.8,.2,1);}
.reveal.in .bt i{width:var(--w);}
.bn{width:4ch;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}

/* ───────── pinned cinematic section ───────── */
.pin-stage{position:relative;height:360vh;background:var(--ink);}
.pin-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;}
.pin-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.18);}
.pin-shade{position:absolute;inset:0;background:
    radial-gradient(ellipse 62% 48% at 50% 50%,rgba(20,16,9,.74) 0%,rgba(20,16,9,0) 100%),
    linear-gradient(180deg,rgba(20,16,9,.78) 0%,rgba(20,16,9,.42) 40%,rgba(20,16,9,.88) 100%);}
.pin-card{
  position:absolute;z-index:3;text-align:center;color:var(--white);
  padding:0 clamp(16px,5vw,44px);max-width:min(92vw,900px);
  opacity:0;transform:translateY(34px) scale(.97);
  transition:opacity .55s ease,transform .7s var(--ease);
  pointer-events:none;
}
.pin-card.on{opacity:1;transform:none;}
.pin-kicker{font-size:.76rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;text-shadow:0 2px 16px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.75);}
.pin-card .display-md{color:var(--white);text-shadow:0 6px 40px rgba(0,0,0,.5);}
.pin-line{font-size:clamp(1.3rem,3.4vw,2.4rem);line-height:1.25;font-weight:500;margin:0;text-shadow:0 4px 26px rgba(0,0,0,.55);}
.pin-line b{font-family:var(--display);font-weight:400;font-size:1.35em;letter-spacing:-.01em;}
.pin-price{font-family:var(--display);font-size:clamp(5rem,20vw,16rem);line-height:.82;margin:0;letter-spacing:-.02em;text-shadow:0 10px 50px rgba(0,0,0,.55);}
.pin-price span{font-size:.42em;}
.pin-rail{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2);z-index:4;}
.pin-rail i{display:block;height:100%;width:0;background:var(--red);}

/* ───────── the build ─────────
   Drawn rather than photographed on purpose. An illustration makes no claim to
   be a photograph of their food, and illustrated ingredients are separable
   layers by construction, which a flat photo never is. The drawing follows the
   hand-painted sign on their own wall, so the one illustration on this site is
   in the restaurant's own hand. It resolves into the photograph it was drawn
   from, which is the same burger the hero floats. */
.build{position:relative;height:440vh;background:var(--bone);}
.build-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.18fr);
  align-items:center;gap:clamp(20px,5vw,70px);
  padding:92px clamp(16px,5vw,64px) 44px;max-width:1400px;margin:0 auto;
}
.build-copy .eyebrow{color:var(--red-ink);opacity:1;}
.build-copy .display-sm{color:var(--ink);}
.build-note{margin:18px 0 0;font-size:1.02rem;color:var(--ink-2);max-width:34ch;}
.build-legend{list-style:none;margin:clamp(18px,2.6vw,30px) 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
/* The not-yet state used to be opacity .26 on the whole row, which put the
   label at 1.76:1. Fade the swatch instead and hold the text at 4.8:1, so a
   layer that has not landed still reads as text. */
.build-legend li{
  display:flex;align-items:center;gap:11px;font-size:.9rem;font-weight:700;
  color:#655F53;transition:color .45s ease,transform .45s var(--ease);
  transform:translateX(-6px);
}
.build-legend li.on{color:var(--ink);transform:none;}
.build-legend i{
  width:15px;height:15px;border-radius:4px;background:var(--c,#ccc);
  box-shadow:inset 0 0 0 1px rgba(20,16,9,.18);flex-shrink:0;
  opacity:.3;transition:opacity .45s ease;
}
.build-legend li.on i{opacity:1;}
.build-credit{margin:20px 0 0;font-size:.8rem;letter-spacing:.02em;color:#5F564B;}

.build-stage{position:relative;display:grid;place-items:center;min-width:0;}
.burger{grid-area:1/1;width:min(100%,660px);height:auto;overflow:visible;
  filter:drop-shadow(0 24px 28px rgba(20,16,9,.14));}
.ing{will-change:transform,opacity;opacity:0;}
/* the photograph the drawing was made from, cross-faded in on the last beat.
   display:block matters: <picture> is inline by default, so without it the img
   renders at its natural 1600px and blows the sticky grid open. */
.build-photo{display:block;grid-area:1/1;width:min(92%,600px);opacity:0;transform:scale(.97);
  filter:drop-shadow(0 26px 34px rgba(20,16,9,.30));
  transition:opacity .1s linear;pointer-events:none;}
.build-photo img{width:100%;height:auto;}
.build-real-cap{
  grid-area:1/1;align-self:end;justify-self:center;margin:0 0 -6px;
  font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-ink);opacity:0;transition:opacity .3s ease;
}

/* ───────── menu ───────── */
.menu-head{max-width:1400px;margin:0 auto;}
.menu-body{
  max-width:1400px;margin:clamp(44px,6vw,76px) auto 0;
  display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);align-items:start;
}
.menu-rail{position:sticky;top:96px;}
.rail-list{list-style:none;margin:0;padding:0;counter-reset:r;}
.rail-list li{counter-increment:r;}
.rail-list a{
  display:flex;align-items:baseline;gap:10px;text-decoration:none;
  padding:11px 0;min-height:44px;font-weight:700;font-size:.95rem;
  color:#5F564B;transition:color .3s ease;
}
.rail-list a::before{
  content:counter(r,decimal-leading-zero);
  font-size:.68rem;letter-spacing:.1em;font-variant-numeric:tabular-nums;
}
.rail-list a:hover{color:var(--ink);}
.rail-list a.on{color:var(--red-ink);}
.rail-board{margin:clamp(24px,3vw,40px) 0 0;}
.rail-board picture,.rail-board img{display:block;}
.rail-board img{border-radius:8px;box-shadow:0 14px 34px rgba(20,16,9,.16);}
.rail-board figcaption{margin-top:10px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.5;}

.m-block{padding:clamp(26px,3.4vw,44px) 0;border-top:1px solid var(--hair);}
.m-block:first-child{border-top:none;padding-top:0;}
.m-head{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.5rem,3vw,2.4rem);line-height:1;margin:0 0 6px;color:var(--red);
}
.m-note{font-size:.88rem;opacity:.6;margin:0 0 22px;}
.m-sub{
  font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.18em;
  text-transform:uppercase;margin:clamp(26px,3vw,38px) 0 14px;opacity:.55;
}
.m-sub em{font-style:normal;letter-spacing:.04em;text-transform:none;font-weight:500;opacity:.8;}

.m-list{list-style:none;margin:0;padding:0;}
.m-two{columns:2;column-gap:clamp(26px,4vw,58px);}
.m-two li{break-inside:avoid;}
.m-list li{
  display:flex;align-items:baseline;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--hair);font-size:.98rem;
}
.m-list span{flex:1;min-width:0;}
.m-list b{
  font-family:var(--display);font-weight:400;letter-spacing:0;
  font-size:1.22em;line-height:1;white-space:nowrap;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.m-list b::before{content:"$";font-size:.62em;opacity:.42;vertical-align:.28em;margin-right:1px;}

/* the Originals are the reason to come, so they get the panel and the big type */
.m-feature{
  background:var(--bone);border:none;border-radius:14px;
  padding:clamp(26px,3.4vw,46px);margin-bottom:clamp(10px,1.4vw,18px);
}
.m-feature .m-head{font-size:clamp(1.7rem,3.6vw,3rem);}
.m-list-lg li{font-size:1.06rem;padding:11px 0;border-bottom-color:rgba(20,16,9,.12);}
.m-list-lg b{font-size:1.5em;color:var(--red);}
.m-five{margin-top:clamp(22px,2.6vw,34px);}
.m-five-lab{
  margin:0 0 10px;font-size:.74rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--red-ink);opacity:1;
}
.menu-note{max-width:1400px;margin:clamp(40px,5vw,64px) auto 0;font-size:1rem;opacity:.8;}
.inline-call{
  display:inline-block;padding:12px 0;min-height:44px;
  font-weight:700;color:var(--red-ink);text-decoration-thickness:2px;
  text-underline-offset:3px;white-space:nowrap;
}

/* ───────── the food: a filmstrip the scroll drives sideways ───────── */
.strip{position:relative;height:400vh;background:var(--ink);color:var(--cream);}
.strip-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.strip-head{padding:0 clamp(16px,4vw,44px);margin-bottom:clamp(20px,3vw,38px);}
.strip-head .display-sm{color:var(--cream);}
.strip-sub{margin:12px 0 0;font-size:.95rem;opacity:.6;}
.strip-track{
  display:flex;gap:clamp(16px,2.4vw,34px);
  padding:0 clamp(16px,4vw,44px);will-change:transform;
}
.frame{margin:0;flex:0 0 auto;width:min(34vw,380px);}
.frame picture{display:block;}
.frame img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px;
  transform:scale(.90);opacity:.42;
  transition:transform .5s var(--ease),opacity .5s ease;
  will-change:transform,opacity;
}
.frame.hot img{transform:scale(1);opacity:1;}
.frame figcaption{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:14px;opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .5s var(--ease);
}
.frame.hot figcaption{opacity:1;transform:none;}
.frame figcaption b{font-size:.94rem;font-weight:700;}
.frame figcaption span{
  font-family:var(--display);font-size:1.1rem;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.strip-rail{position:absolute;left:clamp(16px,4vw,44px);right:clamp(16px,4vw,44px);bottom:36px;height:2px;background:rgba(244,235,221,.18);}
.strip-rail i{display:block;height:100%;width:0;background:var(--red);}

/* ───────── the place: a walk in, one frame at a time ───────── */
.walk{position:relative;height:520vh;background:var(--ink);}
.walk-sticky{position:sticky;top:0;height:100svh;overflow:hidden;}
.walk-frames{position:absolute;inset:0;}
.walk-frame{position:absolute;inset:0;opacity:0;will-change:opacity,transform;}
.walk-frame img{width:100%;height:100%;object-fit:cover;}
.walk-frame[data-f="0"] img{object-position:50% 38%;}
.walk-frame[data-f="1"] img{object-position:60% 50%;}
.walk-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,16,9,.80) 0%,rgba(20,16,9,.52) 22%,rgba(20,16,9,.18) 44%,rgba(20,16,9,.34) 66%,rgba(20,16,9,.88) 100%);}
.walk-title{
  position:absolute;left:clamp(16px,4vw,44px);top:clamp(86px,12vh,150px);
  z-index:3;color:var(--white);max-width:min(90vw,760px);
}
.walk-title .eyebrow{color:var(--gold);opacity:1;}
.walk-title .display-sm{color:var(--white);text-shadow:0 6px 40px rgba(0,0,0,.45);}
.walk-copy{
  position:absolute;left:clamp(16px,4vw,44px);bottom:clamp(74px,11vh,120px);
  z-index:3;color:var(--white);max-width:min(88vw,470px);
  opacity:0;transform:translateY(22px);
  transition:opacity .5s ease,transform .65s var(--ease);pointer-events:none;
}
.walk-copy.on{opacity:1;transform:none;}
.wc-n{
  margin:0 0 10px;font-family:var(--display);font-size:1.4rem;color:var(--gold);
  letter-spacing:.04em;
}
.wc-t{margin:0;font-size:clamp(1.1rem,2.3vw,1.6rem);line-height:1.35;font-weight:500;text-shadow:0 3px 22px rgba(0,0,0,.6);}
.walk-dots{position:absolute;right:clamp(16px,4vw,44px);bottom:clamp(74px,11vh,120px);z-index:3;display:flex;flex-direction:column;gap:9px;}
.walk-dots i{width:7px;height:7px;border-radius:100px;background:rgba(255,255,255,.34);transition:background .35s ease,transform .35s ease;}
.walk-dots i.on{background:var(--red);transform:scale(1.45);}

/* ───────── closing ───────── */
.closing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(30px,5vw,70px);margin-top:clamp(36px,5vw,60px);}
.hours dl{margin:0;}
.hours dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.28);font-variant-numeric:tabular-nums;}
.hours dt{font-weight:700;}
.hours dd{margin:0;opacity:.94;}
address{font-style:normal;font-size:1.3rem;line-height:1.45;font-weight:500;}
.access{font-size:.9rem;opacity:.85;margin:14px 0 26px;}
.btn{display:inline-block;text-decoration:none;font-weight:700;background:var(--white);color:var(--red);padding:15px 26px;border-radius:100px;margin:0 10px 10px 0;box-shadow:0 4px 0 rgba(0,0,0,.24);transition:transform .18s ease,box-shadow .18s ease;}
.btn:hover{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.24);}
.btn-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);}
.btn-ghost:hover{box-shadow:inset 0 0 0 2px var(--white);transform:translateY(2px);}

/* ───────── footer ───────── */
.foot{background:var(--ink);color:var(--cream);padding:clamp(48px,7vw,80px) clamp(16px,4vw,44px);text-align:center;}
.foot p{margin:0 0 10px;}
.foot-mark{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,5vw,3rem);color:var(--red);line-height:1;margin-bottom:18px;}
.foot-fine{font-size:.8rem;opacity:.55;max-width:64ch;margin:26px auto 0;line-height:1.6;}

/* ───────── motion ───────── */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;}
.split .w > span{display:inline-block;transform:translateY(105%);transition:transform .82s var(--ease);transition-delay:var(--d,0s);will-change:transform;}
.split.in .w > span{transform:translateY(0);}
.reveal{opacity:0;transform:translateY(26px) scale(.965);transition:opacity .7s ease,transform .8s var(--ease);will-change:transform,opacity;}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;}

/* On the red chapters, rise without the cross-fade. White fading in over red
   passes through genuinely low-contrast blends on the way, and an audit that
   samples mid-transition is right to flag it. The rise reads the same. */
.chapter.red .reveal{opacity:1;transform:translateY(26px) scale(.99);}
.chapter.red .reveal.in{transform:none;}

/* ───────── responsive ───────── */
@media (max-width:1080px){
  .menu-body{grid-template-columns:1fr;}
  .menu-rail{position:static;display:grid;grid-template-columns:1fr minmax(0,300px);gap:30px;align-items:start;}
  .rail-list{display:flex;flex-wrap:wrap;gap:6px 20px;}
  .rail-board{margin:0;}
}
@media (max-width:900px){
  .nav-links{display:none;}
  .nav-call{margin-left:auto;}          /* the auto margin lived on .nav-links */
  .build-sticky{
    grid-template-columns:1fr;align-content:center;gap:16px;
    padding:84px clamp(16px,5vw,44px) 36px;
  }
  .build-legend{flex-direction:row;flex-wrap:wrap;gap:8px 14px;margin-top:14px;}
  .build-legend li{font-size:.78rem;}
  .build-credit{margin-top:12px;}
  .burger{width:min(88vw,440px);}
  .build-photo{width:min(80vw,400px);}
  .frame{width:min(58vw,300px);}
}
@media (max-width:720px){
  .hero{padding:78px clamp(16px,4vw,44px) 44px;min-height:auto;}
  .display{font-size:clamp(3.6rem,19vw,7rem);}
  .hero-burger{width:66vw;}
  .hero-burger-wrap{margin:-.30em auto -.34em;}
  .line-front{-webkit-text-stroke-width:2px;}
  .badge{position:static;transform:none !important;display:inline-block;}
  .hero-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px;position:relative;z-index:4;}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:20px 16px;margin-top:28px;}
  .pin-stage{height:300vh;}
  .build{height:380vh;}
  .m-two{columns:1;}
  .menu-rail{grid-template-columns:1fr;}
  .rail-board{max-width:340px;}
  .walk{height:460vh;}
  .walk-copy{bottom:clamp(64px,9vh,96px);}

  /* A pinned sideways track fights the thumb on a phone. Below 720 the
     filmstrip becomes what it should be there: a real swipe with snap. */
  .strip{height:auto;background:var(--ink);}
  .strip-sticky{position:static;height:auto;padding:clamp(70px,11vw,110px) 0;}
  .strip-track{
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:8px;transform:none !important;
  }
  .strip-track::-webkit-scrollbar{display:none;}
  .frame{width:74vw;scroll-snap-align:center;}
  .frame img{transform:none;opacity:1;}
  .frame figcaption{opacity:1;transform:none;}
  .strip-rail{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .badge{animation:none;opacity:1;transform:rotate(var(--r,0deg));}
  .reveal,.split .w > span,.bt i,.btn,.nav-call,.pin-card,.frame img,
  .frame figcaption,.walk-copy,.walk-frame,.build-legend li{transition:none !important;}
  .reveal{opacity:1;transform:none;}
  .split .w > span{transform:none;}
  .reveal.in .bt i,.bt i{width:var(--w);}
  .hero-burger{animation:none;}

  .pin-stage,.build,.strip,.walk{height:auto;}
  .pin-sticky{position:static;height:auto;min-height:80svh;padding:80px 0;}
  .pin-card{position:static;opacity:1;transform:none;margin:24px auto;}
  .pin-photo{transform:none;}

  .build-sticky{position:static;height:auto;min-height:0;padding:70px 24px;}
  .ing{opacity:1 !important;transform:none !important;}
  .build-legend li{color:var(--ink);transform:none;}
  .build-photo{display:none;}
  .build-photo img{width:100%;height:auto;}
.build-real-cap{display:none;}

  .strip-sticky{position:static;height:auto;padding:80px 0;}
  .strip-track{flex-wrap:wrap;transform:none !important;}
  .frame{width:min(46vw,340px);}
  .frame img{transform:none;opacity:1;}
  .frame figcaption{opacity:1;transform:none;}
  .strip-rail{display:none;}

  .walk-sticky{position:static;height:auto;}
  .walk-frames{position:static;display:grid;gap:14px;}
  .walk-frame{position:static;opacity:1;}
  .walk-frame img{height:auto;aspect-ratio:3/2;}
  .walk-shade{display:none;}
  .walk-title{position:static;padding:70px clamp(16px,4vw,44px) 20px;}
  .walk-copy{position:static;opacity:1;transform:none;max-width:none;padding:14px clamp(16px,4vw,44px);}
  .walk-dots{display:none;}
  html{scroll-behavior:auto;}
}