/* 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-dark:#8E0620;
  --ink:#141009;
  --ink-2:#4A4038;
  --white:#FFFFFF;
  --gold:#F0A93B;
  --shadow:rgba(20,16,9,.2);

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

*{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{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:.7;}
.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 rgba(20,16,9,.14);}
.nav-mark{font-family:var(--display);text-transform:uppercase;text-decoration:none;color:var(--red);font-size:clamp(1.35rem,3vw,1.9rem);}
.nav-links{display:flex;gap:22px;margin-left:auto;}
.nav-links a{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:10px 18px;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:84px clamp(16px,4vw,44px) 30px;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{
  position:relative;z-index:2;width:min(46vw,620px);height:auto;
  margin:-.12em auto -.14em;
  filter:drop-shadow(0 30px 46px rgba(20,16,9,.4));
}
.badge{
  position:absolute;z-index:4;
  font-family:var(--body);font-weight:800;font-size:clamp(.86rem,1.45vw,1.12rem);
  letter-spacing:.09em;text-transform:uppercase;text-align:center;line-height:1.15;
  background:var(--white);color:var(--ink);
  padding:12px 22px;border-radius:100px;
  border:3px solid var(--white);
  box-shadow:0 5px 0 rgba(20,16,9,.16), 0 14px 30px rgba(20,16,9,.24);
  will-change:transform;
  opacity:0;animation:pop .7s cubic-bezier(.2,1.3,.35,1) forwards;
}
.badge-red{background:var(--red);color:var(--white);border-color:var(--white);}
.badge-gold{background:var(--gold);color:var(--ink);border-color:var(--white);}
.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;}

/* the numbers, given weight instead of being a caption */
.hero-stats{
  position:relative;z-index:5;will-change:transform;margin:clamp(24px,3.4vw,40px) 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(2rem,4.6vw,3.4rem);line-height:.9;letter-spacing:-.01em;}
.hero-stats i{font-style:normal;font-family:var(--display);font-size:clamp(1rem,2.1vw,1.5rem);opacity:.85;}

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

/* ───────── 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.ink{background:var(--ink);color:var(--cream);}
.chapter.red .display,.chapter.ink .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 cubic-bezier(.16,1,.3,1);
  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);}

/* ───────── menu ───────── */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(28px,4vw,58px);margin-top:clamp(40px,6vw,72px);}
.m-head{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1;margin:0 0 6px;color:var(--red);}
.m-head-2{margin-top:clamp(30px,4vw,46px);}
.m-note{font-size:.85rem;opacity:.62;margin:0 0 18px;}
.m-list{list-style:none;margin:0;padding:0;}
.m-list li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px dotted rgba(20,16,9,.24);font-size:.98rem;}
.m-list li:last-child{border-bottom:none;}
.m-list span{flex:1;min-width:0;}
.m-list b{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);}
.m-list b::before{content:"$";opacity:.45;font-weight:500;}
.m-em{background:rgba(200,16,46,.07);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:5px;}
.m-em b{color:var(--red);}
.menu-note{margin-top:clamp(36px,5vw,56px);font-size:1.05rem;}
.inline-call{font-weight:700;color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap;}

/* ───────── food grid: six columns, no holes ───────── */
.food-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,2vw,22px);margin-top:clamp(40px,6vw,70px);}
.food-grid figure{margin:0;position:relative;}
.food-grid .sq{grid-column:span 2;}      /* three square photos, one even row */
.food-grid .tall{grid-column:span 3;}    /* two 3:4 photos, one even row */
.food-grid img{width:100%;height:100%;object-fit:cover;border-radius:10px;}
.food-grid .sq img{aspect-ratio:1/1;}
.food-grid .tall img{aspect-ratio:3/4;}
.food-grid figcaption{position:absolute;left:14px;bottom:12px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--white);text-shadow:0 2px 10px rgba(0,0,0,.85);}

/* ───────── place grid: 3 x 3, hero takes 2 x 2, five fill the rest ───────── */
.place-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,2vw,22px);margin-top:clamp(40px,6vw,70px);}
.place-grid figure{margin:0;}
.place-grid .p-hero{grid-column:span 4;}   /* 4:3 native, 4:3 slot */
.place-grid .p-tall{grid-column:span 2;}   /* 0.91 native, 2:3 slot, matches row height */
.place-grid img{width:100%;height:100%;object-fit:cover;border-radius:10px;aspect-ratio:4/3;}
.place-grid .p-tall img{aspect-ratio:2/3;}
.place-grid figure:not(.p-hero):not(.p-tall){grid-column:span 2;}

/* ───────── 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:60ch;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 cubic-bezier(.16,1,.3,1);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 cubic-bezier(.16,1,.3,1);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;}

/* ───────── responsive ───────── */
@media (max-width:900px){
  .nav-links{display:none;}
  .food-grid .sq{grid-column:span 3;}
  .food-grid .tall{grid-column:span 3;}
  .place-grid .p-hero{grid-column:span 6;}
  .place-grid .p-tall{grid-column:span 3;}
  .place-grid .p-tall img{aspect-ratio:4/3;}
  .place-grid figure:not(.p-hero):not(.p-tall){grid-column:span 3;}
}
@media (max-width:720px){
  .hero{padding:84px clamp(16px,4vw,44px) 52px;min-height:auto;}
  .display{font-size:clamp(3.6rem,19vw,7rem);}
  .hero-burger{width:64vw;margin:-.32em auto -.38em;}
  .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:24px;position:relative;z-index:4;}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:22px 16px;margin-top:32px;}
  .pin-stage{height:300vh;}
  .food-grid,.place-grid{grid-template-columns:1fr;}
  .food-grid figure,.food-grid .sq,.food-grid .tall,
  .place-grid figure,.place-grid .p-hero,.place-grid .p-tall{grid-column:1/-1;}
  .food-grid .sq img{aspect-ratio:1/1;}
  .food-grid .tall img,.place-grid .p-tall img{aspect-ratio:3/4;}
}
@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{transition:none !important;}
  .reveal{opacity:1;transform:none;}
  .split .w > span{transform:none;}
  .reveal.in .bt i,.bt i{width:var(--w);}
  .pin-stage{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;}
  html{scroll-behavior:auto;}
}

/* ───────── the build: illustrated, scroll-assembled ─────────
   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 can never be. The stack matches
   what their own menu says an Original comes with. */
.build{position:relative;height:340vh;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:96px clamp(16px,5vw,64px) 48px;max-width:1400px;margin:0 auto;
}
.build-copy .eyebrow{color:var(--red);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(20px,3vw,34px) 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.build-legend li{
  display:flex;align-items:center;gap:11px;font-size:.9rem;font-weight:700;
  color:var(--ink);opacity:.26;transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1);
  transform:translateX(-6px);
}
.build-legend li.on{opacity:1;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;
}
.build-stage{display:grid;place-items:center;min-width:0;}
.burger{width:min(100%,700px);height:auto;overflow:visible;
  filter:drop-shadow(0 26px 30px rgba(20,16,9,.16));}
.ing{will-change:transform,opacity;opacity:0;}

@media (max-width:860px){
  .build{height:300vh;}
  .build-sticky{
    grid-template-columns:1fr;align-content:center;gap:18px;
    padding:88px clamp(16px,5vw,44px) 40px;
  }
  .build-legend{
    flex-direction:row;flex-wrap:wrap;gap:8px 14px;margin-top:16px;
  }
  .build-legend li{font-size:.78rem;}
  .burger{width:min(86vw,420px);}
}
@media (prefers-reduced-motion:reduce){
  .build{height:auto;}
  .build-sticky{position:static;height:auto;min-height:0;padding:70px 24px;}
  .ing{opacity:1 !important;transform:none !important;}
  .build-legend li{opacity:1;transform:none;}
}