/* ═══════════════════════════════════════════════════
   JVALID FOOD REVIEWS
   Aesthetic: roadside-diner sticker zine.
   Heavy condensed type, hard outlines, ketchup + mustard.
   ═══════════════════════════════════════════════════ */

:root{
  --ink:#100E0C;
  --ink-2:#1B1714;
  --ink-3:#272119;
  --cream:#FFF4DF;
  --paper:#F6E7C8;
  --ketchup:#FF3B21;
  --mustard:#FFC220;
  --mint:#5FD9A4;
  --sky:#4FA8FF;
  --grape:#B36BFF;

  --shadow-hard:6px 6px 0 var(--ink);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);

  --f-display:"Anton","Impact","Haettenschweiler",sans-serif;
  --f-sign:"Bungee","Anton",sans-serif;
  --f-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SFMono-Regular",monospace;

  --pad:clamp(1.15rem,4vw,4.5rem);
}

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

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

body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--f-body);
  font-size:clamp(1rem,.94rem + .28vw,1.13rem);
  line-height:1.62;
  overflow-x:hidden;
  min-height:100vh;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ketchup);color:var(--cream)}

/* ─── Texture + chrome ─────────────────────────── */

.grain{
  position:fixed;inset:-150%;
  z-index:9000;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%,100%{transform:translate(0,0)}
  16%{transform:translate(-3%,2%)}
  33%{transform:translate(2%,-3%)}
  50%{transform:translate(-2%,-2%)}
  66%{transform:translate(3%,1%)}
  83%{transform:translate(-1%,3%)}
}

.scrollbar-progress{
  position:fixed;top:0;left:0;right:0;height:5px;z-index:8000;
  background:rgba(255,244,223,.09);
}
.scrollbar-progress i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--mustard),var(--ketchup));
  box-shadow:0 0 14px rgba(255,59,33,.7);
}

/* custom cursor (desktop only) */
.cursor{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--ketchup);
  mix-blend-mode:difference;
  display:grid;place-items:center;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease-bounce),height .3s var(--ease-bounce),background .3s;
  opacity:0;
}
.cursor span{
  font-family:var(--f-sign);font-size:.52rem;letter-spacing:.06em;
  color:var(--cream);opacity:0;transition:opacity .2s;
}
.cursor.is-live{opacity:1}
.cursor.is-big{width:76px;height:76px;background:var(--mustard)}
.cursor.is-big span{opacity:1;color:var(--ink)}
@media (hover:none),(max-width:900px){.cursor{display:none}}

/* ─── Preloader ────────────────────────────────── */

.preload{
  position:fixed;inset:0;z-index:9999;
  background:var(--ink);
  display:grid;place-items:center;
}
.preload__inner{text-align:center;position:relative;z-index:2}
.preload__stamp{
  font-family:var(--f-display);
  font-size:clamp(3.4rem,15vw,10rem);
  line-height:.9;letter-spacing:.01em;
  display:flex;gap:.02em;
}
.preload__stamp span{
  display:inline-block;color:var(--cream);
  -webkit-text-stroke:3px var(--ketchup);paint-order:stroke fill;
  opacity:0;transform:scale(2.6) rotate(-14deg);
  animation:stampIn .5s var(--ease-bounce) forwards;
}
.preload__stamp .s1{animation-delay:.05s}
.preload__stamp .s2{animation-delay:.13s}
.preload__stamp .s3{animation-delay:.21s}
.preload__stamp .s4{animation-delay:.29s}
.preload__stamp .s5{animation-delay:.37s}
.preload__stamp .s6{animation-delay:.45s}
@keyframes stampIn{
  0%{opacity:0;transform:scale(2.6) rotate(-14deg)}
  60%{opacity:1;transform:scale(.9) rotate(3deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.preload__sub{
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--mustard);margin-top:1.1rem;
  opacity:0;animation:fadeUp .5s .62s var(--ease-out) forwards;
}
.preload__wipe{position:absolute;inset:0;background:var(--ketchup);transform:scaleY(0);transform-origin:bottom}
.preload__wipe.b{background:var(--mustard)}

body.is-loaded .preload__wipe{animation:wipeUp .72s var(--ease-out) forwards}
body.is-loaded .preload__wipe.b{animation-delay:.09s}
body.is-loaded .preload__inner{animation:fadeOut .3s forwards}
body.is-loaded .preload{animation:killIt 0s 1.05s forwards}
@keyframes wipeUp{
  0%{transform:scaleY(0);transform-origin:bottom}
  45%{transform:scaleY(1);transform-origin:bottom}
  46%{transform:scaleY(1);transform-origin:top}
  100%{transform:scaleY(0);transform-origin:top}
}
@keyframes killIt{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes fadeOut{to{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ─── Nav ──────────────────────────────────────── */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:7000;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--pad);
  transition:background .4s,backdrop-filter .4s,border-color .4s,transform .45s var(--ease-out);
  border-bottom:2px solid transparent;
}
.nav.is-stuck{
  background:rgba(16,14,12,.82);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:rgba(255,244,223,.14);
}
.nav.is-hidden{transform:translateY(-115%)}

.nav__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--f-sign);font-size:1rem;letter-spacing:.02em}
.nav__brand img{width:34px;height:34px;border-radius:50%;border:2px solid var(--mustard);object-fit:cover;transition:transform .5s var(--ease-bounce)}
.nav__brand:hover img{transform:rotate(-18deg) scale(1.12)}

.nav__links{display:flex;gap:1.7rem}
.nav__links a{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  position:relative;padding:.2rem 0;color:rgba(255,244,223,.72);transition:color .25s;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:var(--ketchup);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease-out);
}
.nav__links a:hover{color:var(--cream)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
@media (max-width:820px){.nav__links{display:none}}

.nav__cta{
  font-family:var(--f-sign);font-size:.72rem;
  background:var(--mustard);color:var(--ink);
  padding:.6rem 1rem;border:2px solid var(--ink);
  border-radius:999px;box-shadow:3px 3px 0 var(--ketchup);
  transition:transform .25s var(--ease-bounce),box-shadow .25s;
  white-space:nowrap;
}
.nav__cta em{font-style:normal}
.nav__cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ketchup)}
@media (max-width:620px){.nav__cta em{display:none}}

/* ─── Hero ─────────────────────────────────────── */

.hero{
  position:relative;
  /* Capped so a tall monitor doesn't stretch ~630px of content over 1600px. */
  min-height:min(100svh,860px);
  display:flex;flex-direction:column;justify-content:center;
  padding:6.5rem var(--pad) 3.5rem;
  overflow:hidden;
}
.hero__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58vw 52vh at 12% 18%,rgba(255,59,33,.30),transparent 62%),
    radial-gradient(48vw 46vh at 88% 74%,rgba(255,194,32,.22),transparent 64%),
    radial-gradient(40vw 40vh at 62% 8%,rgba(95,217,164,.13),transparent 68%);
  animation:glowDrift 15s ease-in-out infinite alternate;
}
@keyframes glowDrift{
  from{transform:scale(1) translate(0,0)}
  to{transform:scale(1.16) translate(-3%,2%)}
}
.hero::after{
  /* halftone dots */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:radial-gradient(rgba(255,244,223,.16) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom,transparent,#000 45%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%,transparent);
}

.floaties{position:absolute;inset:0;z-index:1;pointer-events:none}
.fl{
  position:absolute;font-size:clamp(1.9rem,4vw,3.4rem);
  filter:drop-shadow(3px 4px 0 rgba(0,0,0,.5));
  animation:bob 6s ease-in-out infinite;
  will-change:transform;
}
.fl--1{top:11%;right:6%;animation-delay:0s}
.fl--2{top:76%;right:9%;animation-delay:.9s}
.fl--3{top:32%;right:29%;animation-delay:1.7s}
.fl--4{top:84%;right:33%;animation-delay:.4s}
.fl--5{top:57%;right:2%;animation-delay:2.3s}
.fl--6{top:9%;right:38%;animation-delay:1.2s}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-8deg)}
  50%{transform:translateY(-24px) rotate(10deg)}
}
/* Once the hero grid collapses to one column (<=980px) the desktop positions
   are wrong: they were tuned for an empty right-hand column that no longer
   exists, so they land on the title, the bio and the portrait.

   These four sit in measured gaps instead, and each is separated from content
   HORIZONTALLY rather than vertically - the bob animation drifts +/-24px up and
   down, so a vertical gap can be crossed but a horizontal one cannot. Two more
   would only crowd a phone, so 5 and 6 stay desktop-only. */
@media (max-width:980px){
  .fl--1{top:14%;right:5%;left:auto}    /* right of the title, which is short here */
  .fl--3{top:68%;right:3%;left:auto}    /* outside the portrait ring, right */
  .fl--2{top:72%;left:3%;right:auto}    /* outside the portrait ring, left */
  .fl--4{top:93%;left:8%;right:auto}    /* in the clear band under the badge */
  .fl--5,.fl--6{display:none}
}

.hero__grid{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,4rem);
  align-items:center;width:100%;max-width:1240px;margin-inline:auto;
}
.hero__type{min-width:0;max-width:38ch}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:2.4rem}
  .hero__type{max-width:none}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mustard);
  border:1.5px solid rgba(255,194,32,.4);border-radius:999px;
  padding:.42rem .95rem;margin-bottom:1.4rem;
  background:rgba(255,194,32,.06);
}
.pip{width:7px;height:7px;border-radius:50%;background:var(--ketchup);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,59,33,.75)}
  70%{transform:scale(1.25);box-shadow:0 0 0 10px rgba(255,59,33,0)}
}
/* The pill wraps badly at phone widths and repeats what the stats strip says
   two scrolls later - drop it on mobile only. This block must stay BELOW the
   base .eyebrow rule: same specificity, so source order decides the winner. */
@media (max-width:640px){
  .eyebrow{display:none}
}

.hero__title{
  font-family:var(--f-display);
  font-size:clamp(2.9rem,8.2vw,7rem);
  line-height:.84;letter-spacing:.005em;
  text-transform:uppercase;
  margin-bottom:1.4rem;
}
.hero__title .line{display:block;overflow:hidden;padding:.06em 0}
.word{
  display:inline-block;
  transform:translateY(110%) rotate(6deg);
  animation:wordUp .95s var(--ease-out) forwards;
}
body:not(.is-loaded) .word{animation-play-state:paused}
.word[data-d="1"]{animation-delay:1.02s}
.word[data-d="2"]{animation-delay:1.14s}
.word[data-d="3"]{animation-delay:1.26s}
@keyframes wordUp{to{transform:translateY(0) rotate(0)}}

.sticker{
  color:var(--cream);
  -webkit-text-stroke:clamp(2px,.5vw,5px) var(--ink);
  paint-order:stroke fill;
  text-shadow:
    clamp(4px,.8vw,10px) clamp(4px,.8vw,10px) 0 var(--ketchup),
    clamp(8px,1.5vw,18px) clamp(8px,1.5vw,18px) 0 rgba(0,0,0,.42);
}
.sticker.outline{
  color:transparent;
  -webkit-text-stroke:clamp(2px,.42vw,4px) var(--mustard);
  text-shadow:none;
}

.hero__bio{
  font-family:var(--f-body);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,2.4vw,1.6rem);
  color:rgba(255,244,223,.85);
  max-width:34ch;margin-bottom:2.1rem;
  border-left:4px solid var(--ketchup);padding-left:1rem;
}

.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-sign);font-size:.86rem;letter-spacing:.01em;
  padding:.95rem 1.7rem;border-radius:999px;
  border:2.5px solid var(--ink);
  transition:transform .28s var(--ease-bounce),box-shadow .28s,background .28s,color .28s;
  will-change:transform;
}
.btn--primary{background:var(--ketchup);color:var(--cream);box-shadow:var(--shadow-hard)}
.btn--primary:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--ink);background:var(--mustard);color:var(--ink)}
.btn--primary svg{transition:transform .3s var(--ease-out)}
.btn--primary:hover svg{transform:translateX(5px)}
.btn--ghost{background:transparent;border-color:rgba(255,244,223,.4);color:var(--cream)}
.btn--ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--ink);transform:translate(-3px,-3px);box-shadow:var(--shadow-hard)}
.btn--lg{font-size:clamp(1rem,3vw,1.5rem);padding:1.15rem 2.4rem}

/* hero portrait */
.hero__face{position:relative;width:clamp(210px,26vw,320px);aspect-ratio:1;justify-self:center}
.face__photo{
  position:absolute;inset:13%;border-radius:50%;overflow:hidden;
  border:5px solid var(--cream);
  box-shadow:0 0 0 6px var(--ink),12px 14px 0 rgba(255,59,33,.85);
  animation:facePop 1s 1.25s var(--ease-bounce) both;
}
.face__photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.hero__face:hover .face__photo img{transform:scale(1.11)}
@keyframes facePop{from{opacity:0;transform:scale(.4) rotate(-30deg)}to{opacity:1;transform:none}}

.face__spin{position:absolute;inset:0;animation:spin 22s linear infinite}
.face__spin svg{width:100%;height:100%;overflow:visible}
.face__spin text{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.19em;
  fill:var(--mustard);text-transform:uppercase;
}
@keyframes spin{to{transform:rotate(360deg)}}

.face__tag{
  position:absolute;bottom:-4%;left:50%;translate:-50% 0;
  background:var(--mustard);color:var(--ink);
  font-family:var(--f-sign);font-size:.7rem;
  padding:.42rem .9rem;border:2.5px solid var(--ink);border-radius:999px;
  white-space:nowrap;rotate:-4deg;
  animation:facePop 1s 1.5s var(--ease-bounce) both;
}

.scrollcue{
  position:absolute;bottom:1.6rem;left:50%;translate:-50% 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--f-mono);font-size:.65rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,244,223,.5);
}
.scrollcue i{display:block;width:1.5px;height:38px;background:linear-gradient(var(--mustard),transparent);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.35);opacity:.45}50%{transform:scaleY(1);opacity:1}}

/* Phone refinements for the hero.
   This block MUST stay below the base rules it overrides: the media query adds
   no specificity, so at equal specificity source order decides. It previously
   sat above .hero__face, .hero__actions and .scrollcue, which silently killed
   three of these five rules. */
@media (max-width:640px){
  /* short phones: never centre-clip the top of the hero */
  .hero{justify-content:flex-start;padding-top:6.5rem;padding-bottom:5.5rem}
  .hero__face{width:min(200px,52vw)}
  .hero__actions{width:100%}
  .hero__actions .btn{flex:1 1 100%;justify-content:center}
  .scrollcue{display:none}
}

/* ─── Tickers ──────────────────────────────────── */

.tickers{position:relative;z-index:4;margin:-1rem 0 0}
.ticker{
  overflow:hidden;white-space:nowrap;
  border-block:3px solid var(--ink);
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.5rem,4.6vw,3.3rem);line-height:1.28;
}
.ticker--a{background:var(--ketchup);color:var(--cream);rotate:-2.2deg;margin-block:1.5rem -.6rem}
.ticker--b{background:var(--mustard);color:var(--ink);rotate:1.6deg;margin-bottom:1.5rem}
.ticker__track{display:inline-flex;will-change:transform}
.ticker--a .ticker__track{animation:marq 26s linear infinite}
.ticker--b .ticker__track{animation:marq 22s linear infinite reverse}
.ticker__track span{padding-right:.4em}
.ticker b{color:var(--ink)}
.ticker--b b{color:var(--ketchup)}
@keyframes marq{to{transform:translateX(-50%)}}
.ticker:hover .ticker__track{animation-play-state:paused}

/* ─── Sections ─────────────────────────────────── */

.section{padding:clamp(2.6rem,5.2vw,4.6rem) var(--pad);max-width:1320px;margin-inline:auto}

.sec-head{margin-bottom:clamp(1.2rem,2.4vw,1.9rem);max-width:56ch}
.sec-title{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(2.5rem,8.5vw,6.5rem);line-height:.88;letter-spacing:.005em;
  margin-bottom:.7rem;
}
.sec-title em{
  font-style:normal;color:transparent;
  -webkit-text-stroke:2.5px var(--ketchup);paint-order:stroke fill;
}
.sec-sub{color:rgba(255,244,223,.66);font-size:1.02rem;max-width:48ch}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal[data-d="5"]{transition-delay:.45s}

/* ─── Stats ────────────────────────────────────── */

.stats{padding:clamp(1.4rem,3vw,2.4rem) var(--pad)}
.stats__wrap{
  max-width:1320px;margin-inline:auto;
  display:grid;grid-template-columns:repeat(var(--tiles,4),1fr);gap:1px;
  background:rgba(255,244,223,.16);
  border:2.5px solid rgba(255,244,223,.16);border-radius:22px;overflow:hidden;
}
@media (max-width:760px){
  .stats__wrap{grid-template-columns:repeat(2,1fr)}
  /* five tiles two-up would leave a hole; the last one spans */
  .stat:last-child:nth-child(odd){grid-column:1/-1}
}
.stat[hidden]{display:none}

.foot__ctas{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap}
.foot__ctas .btn[hidden]{display:none}
.stat{
  background:var(--ink-2);padding:clamp(1.3rem,3.4vw,2.3rem) 1rem;
  text-align:center;position:relative;transition:background .35s;
}
.stat:hover{background:var(--ink-3)}
.stat__num{
  display:block;font-family:var(--f-display);
  font-size:clamp(2.1rem,6vw,3.9rem);line-height:1;
  color:var(--mustard);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.stat__lbl{
  display:block;margin-top:.5rem;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,244,223,.55);
}

/* ─── Filters ──────────────────────────────────── */

.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:2.2rem}
.chip{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.5rem 1.05rem;border-radius:999px;
  border:2px solid rgba(255,244,223,.24);color:rgba(255,244,223,.7);
  transition:all .3s var(--ease-out);
}
.chip:hover{border-color:var(--mustard);color:var(--cream);transform:translateY(-2px)}
.chip.is-on{
  background:var(--cream);color:var(--ink);border-color:var(--ink);
  box-shadow:3px 3px 0 var(--ketchup);
}

/* ─── Video grid ───────────────────────────────── */

.grid{
  position:relative; /* contains .is-out cards so they can't stretch the page */
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));
  gap:clamp(1rem,2.4vw,1.8rem);
}

.card{
  position:relative;border-radius:20px;overflow:hidden;
  background:var(--ink-2);
  border:2.5px solid rgba(255,244,223,.14);
  aspect-ratio:9/15;cursor:pointer;
  transition:transform .45s var(--ease-bounce),box-shadow .45s,border-color .35s,opacity .4s,filter .4s;
  will-change:transform;
  opacity:0;transform:translateY(40px) scale(.96);
}
.card.in{opacity:1;transform:none}
.card:nth-child(4n+1){rotate:-1.3deg}
.card:nth-child(4n+2){rotate:.9deg}
.card:nth-child(4n+3){rotate:-.6deg}
.card:nth-child(4n+4){rotate:1.5deg}

.card:hover{
  transform:translateY(-12px) scale(1.035) rotate(0deg)!important;
  box-shadow:0 26px 46px rgba(0,0,0,.55),0 0 0 3px var(--mustard);
  border-color:var(--mustard);
  z-index:5;
}

.card__img{position:absolute;inset:0}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out),filter .5s;filter:saturate(1.05)}
.card:hover .card__img img{transform:scale(1.09)}
.card__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(16,14,12,.94) 6%,rgba(16,14,12,.28) 45%,rgba(16,14,12,.05) 70%);
}

.card__shine{
  position:absolute;top:0;bottom:0;width:55%;
  background:linear-gradient(105deg,transparent,rgba(255,244,223,.28),transparent);
  left:-70%;transition:left .75s var(--ease-out);pointer-events:none;z-index:3;
}
.card:hover .card__shine{left:130%}

.card__play{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:3;
  width:60px;height:60px;border-radius:50%;
  background:rgba(255,59,33,.94);border:3px solid var(--cream);
  display:grid;place-items:center;
  opacity:0;scale:.55;
  transition:opacity .35s,scale .45s var(--ease-bounce);
}
.card:hover .card__play{opacity:1;scale:1}
.card__play::before{
  content:"";width:0;height:0;margin-left:5px;
  border-left:17px solid var(--cream);
  border-top:11px solid transparent;border-bottom:11px solid transparent;
}
.card__play::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:2px solid var(--mustard);animation:ripple 1.6s ease-out infinite;
}
@keyframes ripple{
  0%{transform:scale(1);opacity:.9}
  100%{transform:scale(1.55);opacity:0}
}

.card__body{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:.95rem 1rem 1.05rem}
.card__cap{
  font-size:.83rem;line-height:1.42;color:var(--cream);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:.55rem;font-weight:600;
}
.card__meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.card__views{
  display:inline-flex;align-items:center;gap:.32rem;
  font-family:var(--f-mono);font-size:.72rem;color:var(--mustard);
}
.card__views svg{opacity:.9}
.card__cat{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  background:rgba(255,244,223,.14);padding:.2rem .5rem;border-radius:5px;
  color:rgba(255,244,223,.8);
}

.card__rank{
  position:absolute;top:.7rem;left:.75rem;z-index:4;
  font-family:var(--f-display);font-size:1.4rem;line-height:1;
  color:var(--cream);-webkit-text-stroke:1.6px var(--ink);paint-order:stroke fill;
  opacity:.92;
}
.card__hot{
  position:absolute;top:.7rem;right:.7rem;z-index:4;
  background:var(--mustard);color:var(--ink);
  font-family:var(--f-sign);font-size:.58rem;
  padding:.28rem .55rem;border-radius:999px;border:2px solid var(--ink);
  rotate:7deg;animation:bob 3.4s ease-in-out infinite;
}

.grid__more{display:flex;justify-content:center;margin-top:1.8rem}
.grid__more .btn[hidden]{display:none}

.grid__note{
  margin-top:1.2rem;font-family:var(--f-mono);font-size:.8rem;
  color:rgba(255,244,223,.5);text-align:center;
}
.grid__note a{color:var(--mustard);border-bottom:1px solid rgba(255,194,32,.4);transition:color .25s}
.grid__note a:hover{color:var(--ketchup)}

/* ─── Ranking ──────────────────────────────────── */

.ranking{--t-elite:var(--mustard);--t-great:var(--mint);--t-fine:var(--sky);--t-rough:#FF8A3D;--t-offscale:var(--ketchup)}

.rank-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;background:rgba(255,244,223,.14);
  border:2.5px solid rgba(255,244,223,.14);border-radius:18px;overflow:hidden;
  margin-bottom:clamp(1.1rem,2.4vw,1.7rem);
}
.rank-stat{background:var(--ink-2);padding:1.05rem .8rem;text-align:center}
.rank-stat b{
  display:block;font-family:var(--f-display);font-size:clamp(1.4rem,3.6vw,2.2rem);
  line-height:1;color:var(--cs,var(--cream));font-variant-numeric:tabular-nums;
}
.rank-stat span{
  display:block;margin-top:.4rem;font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,244,223,.5);
}

/* best / worst hero pair */
.podium{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:clamp(1rem,2.4vw,1.6rem);margin-bottom:clamp(1.3rem,3vw,2rem);
}
.pod{
  position:relative;overflow:hidden;border-radius:22px;
  border:3px solid var(--pc);background:var(--ink-2);
  padding:1.5rem 1.4rem;
  box-shadow:8px 8px 0 var(--pc);
  opacity:0;transform:translateY(34px);
  transition:opacity .8s var(--ease-out),transform .5s var(--ease-bounce),box-shadow .35s;
}
.pod.in{opacity:1;transform:none}
.pod:hover{transform:translateY(-6px) rotate(-.8deg);box-shadow:12px 14px 0 var(--pc)}
.pod--worst{--pc:var(--ketchup)}
.pod--best{--pc:var(--mustard)}
.pod__tag{
  display:inline-block;font-family:var(--f-sign);font-size:.66rem;
  background:var(--pc);color:var(--ink);padding:.3rem .75rem;
  border-radius:999px;border:2px solid var(--ink);margin-bottom:.9rem;rotate:-3deg;
}
.pod__score{
  font-family:var(--f-display);font-size:clamp(3rem,10vw,5rem);line-height:.85;
  color:var(--cream);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;
  text-shadow:6px 6px 0 var(--pc);margin-bottom:.5rem;
}
.pod__name{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.2rem,3.4vw,1.9rem);line-height:1;margin-bottom:.35rem}
.pod__where{font-family:var(--f-mono);font-size:.74rem;color:rgba(255,244,223,.55);margin-bottom:.8rem}
.pod__quote{font-size:.88rem;color:rgba(255,244,223,.75);line-height:1.5}
.pod__quote b{color:var(--pc)}

/* toolbar */
.rank-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;margin-bottom:1.2rem;
}
.rank-toggle{display:inline-flex;border:2px solid rgba(255,244,223,.22);border-radius:999px;padding:3px;gap:3px}
.rt{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.42rem .95rem;border-radius:999px;color:rgba(255,244,223,.62);transition:all .3s var(--ease-out);
}
.rt:hover{color:var(--cream)}
.rt.is-on{background:var(--cream);color:var(--ink)}
.rank-legend{display:flex;flex-wrap:wrap;gap:.9rem;font-family:var(--f-mono);font-size:.64rem;color:rgba(255,244,223,.5)}
.rank-legend span{display:inline-flex;align-items:center;gap:.35rem}
.rank-legend i{width:9px;height:9px;border-radius:3px;background:var(--c)}

/* the list */
.rank-list{list-style:none;display:flex;flex-direction:column;gap:.45rem;counter-reset:none}
.rank-row{
  border:2px solid rgba(255,244,223,.12);border-radius:14px;
  background:var(--ink-2);overflow:hidden;
  opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),border-color .3s,background .3s;
}
.rank-row.in{opacity:1;transform:none}
.rank-row:hover{border-color:var(--rc);background:var(--ink-3)}
.rank-row[open]{border-color:var(--rc)}

.rank-row summary{
  display:grid;
  grid-template-columns:3.1rem minmax(0,1fr) auto 5.2rem 1.4rem;
  align-items:center;gap:clamp(.5rem,1.6vw,1.1rem);
  padding:.85rem .9rem;cursor:pointer;list-style:none;
}
.rank-row summary::-webkit-details-marker{display:none}
.rank-row summary:focus-visible{outline:3px solid var(--mustard);outline-offset:-3px}

.rr__pos{
  font-family:var(--f-display);font-size:1.35rem;line-height:1;
  color:rgba(255,244,223,.42);font-variant-numeric:tabular-nums;
}
.rank-row:nth-child(-n+3) .rr__pos{color:var(--rc)}
.rr__main{min-width:0}
.rr__name{
  display:block;
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(.98rem,2.4vw,1.32rem);line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rr__where{
  display:block;
  font-family:var(--f-mono);font-size:.66rem;color:rgba(255,244,223,.45);
  margin-top:.22rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rr__bar{
  width:clamp(52px,13vw,150px);height:9px;border-radius:99px;
  background:rgba(255,244,223,.1);overflow:hidden;
}
.rr__bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--rc);transition:width 1s var(--ease-out)}
.rank-row.in .rr__bar i{width:var(--w)}
@media (max-width:640px){.rr__bar{display:none}}

.rr__score{
  font-family:var(--f-display);font-size:clamp(1.1rem,3vw,1.6rem);line-height:1;
  color:var(--rc);text-align:right;font-variant-numeric:tabular-nums;
}
.rr__score small{display:block;font-family:var(--f-mono);font-size:.52rem;letter-spacing:.1em;color:rgba(255,244,223,.4);margin-top:.2rem}
.rr__caret{
  width:1.4rem;text-align:center;color:rgba(255,244,223,.4);
  transition:transform .35s var(--ease-bounce);font-size:.8rem;
}
.rank-row[open] .rr__caret{transform:rotate(180deg);color:var(--rc)}

.rr__body{padding:0 .9rem 1rem calc(3.1rem + clamp(.5rem,1.6vw,1.1rem));border-top:1px dashed rgba(255,244,223,.14);margin-top:-1px;padding-top:.9rem}
.rr__items{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin-bottom:.8rem}
.rr__items li{display:flex;align-items:baseline;gap:.6rem;font-size:.85rem}
.rr__items .dots{flex:1;border-bottom:1px dotted rgba(255,244,223,.22);transform:translateY(-3px)}
.rr__items .it{color:rgba(255,244,223,.82)}
.rr__items .sc{font-family:var(--f-mono);color:var(--rc);font-variant-numeric:tabular-nums}
.rr__note{font-family:var(--f-mono);font-size:.68rem;color:rgba(255,244,223,.42);line-height:1.6}
.rr__note a{color:var(--mustard);border-bottom:1px solid rgba(255,194,32,.35)}
.rr__note a:hover{color:var(--ketchup)}
.rr__flag{
  display:inline-block;font-family:var(--f-sign);font-size:.55rem;
  background:var(--ketchup);color:var(--cream);padding:.15rem .45rem;
  border-radius:4px;margin-left:.45rem;vertical-align:middle;
}
.rr__flag--auto{background:rgba(255,244,223,.16);color:rgba(255,244,223,.75)}


@media (max-width:560px){
  /* five tiles in a two-up grid would leave a hole, so the last one spans */
  .rank-stats{grid-template-columns:1fr 1fr}
  .rank-stat:last-child{grid-column:1/-1}

  /* give the name back its width and let it wrap rather than truncate */
  .rank-row summary{grid-template-columns:2rem minmax(0,1fr) 4.1rem 1rem;gap:.55rem;padding:.8rem .7rem}
  .rr__pos{font-size:1.1rem}
  .rr__name{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.12}
  .rr__where{white-space:normal}
  .rr__body{padding-left:calc(2rem + .55rem)}
  .pod__score{margin-bottom:.75rem}
}

/* ─── Pull quote ───────────────────────────────── */

.pull{
  padding:clamp(2.8rem,5.5vw,4.8rem) var(--pad);
  background:
    radial-gradient(60vw 60vh at 50% 50%,rgba(255,59,33,.16),transparent 70%),
    var(--ink-2);
  border-block:3px solid rgba(255,244,223,.12);
  position:relative;overflow:hidden;
}
.pull__inner{max-width:1100px;margin-inline:auto;text-align:center;position:relative}
.pull__mark{
  display:block;font-family:var(--f-display);
  font-size:clamp(5rem,16vw,13rem);line-height:.6;
  color:var(--ketchup);opacity:.3;
}
.pull__text{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.9rem,6.4vw,5rem);line-height:.98;
  letter-spacing:.005em;margin-bottom:1.4rem;
}
.pull__text .w{
  display:inline-block;opacity:0;transform:translateY(28px) rotate(4deg);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.pull.in .w{opacity:1;transform:none}
.pull.in .w:nth-child(1){transition-delay:.05s}
.pull.in .w:nth-child(2){transition-delay:.12s}
.pull.in .w:nth-child(3){transition-delay:.19s}
.pull.in .w:nth-child(4){transition-delay:.26s}
.pull.in .w:nth-child(5){transition-delay:.33s}
.pull.in .w:nth-child(6){transition-delay:.4s}
.pull.in .w:nth-child(7){transition-delay:.47s}
.pull.in .w:nth-child(8){transition-delay:.54s}
.pull__text .hl{
  color:var(--mustard);
  -webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;
  text-shadow:5px 5px 0 var(--ketchup);
}
.pull__by{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,244,223,.45)}

/* ─── Turf ─────────────────────────────────────── */

.turf__list{display:flex;flex-direction:column;gap:.4rem}
.turf__row{
  display:grid;grid-template-columns:auto minmax(160px,1.1fr) 3fr auto;
  align-items:center;gap:clamp(.7rem,2vw,1.6rem);
  padding:1.15rem .4rem;border-bottom:2px solid rgba(255,244,223,.1);
  transition:background .35s,padding-left .35s var(--ease-out);
}
.turf__row:hover{background:rgba(255,244,223,.045);padding-left:1.1rem}
.turf__rank{font-family:var(--f-mono);font-size:.75rem;color:rgba(255,244,223,.35)}
.turf__name{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.1rem,3.4vw,2.1rem);line-height:1;letter-spacing:.01em}
.turf__name i{font-style:normal;color:var(--ketchup);font-size:.62em;margin-left:.35em}
.turf__bar{display:block;height:11px;border-radius:99px;background:rgba(255,244,223,.1);overflow:hidden}
.turf__bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--ketchup),var(--mustard));
  transition:width 1.3s var(--ease-out);
}
.turf__row.in .turf__bar i{width:var(--p)}
.turf__n{font-family:var(--f-display);font-size:clamp(1.3rem,3.4vw,2.2rem);color:var(--mustard);line-height:1}
@media (max-width:700px){
  .turf__row{grid-template-columns:auto 1fr auto;grid-template-areas:"r n v" ". b b";row-gap:.6rem}
  .turf__rank{grid-area:r}.turf__name{grid-area:n}.turf__n{grid-area:v}.turf__bar{grid-area:b}
}

/* ─── Footer ───────────────────────────────────── */

.foot{position:relative;overflow:hidden;background:var(--ink)}
.foot__marq{
  overflow:hidden;white-space:nowrap;background:var(--ketchup);
  border-block:3px solid var(--ink);
  font-family:var(--f-display);text-transform:uppercase;color:var(--cream);
  font-size:clamp(1.4rem,4.4vw,3rem);line-height:1.3;rotate:-1.4deg;
  margin-block:1.2rem 0;
}
.foot__track{display:inline-flex;animation:marq 20s linear infinite}
.foot__track span{padding-right:.4em}

.foot__body{
  text-align:center;padding:clamp(2.6rem,5.5vw,4.4rem) var(--pad) 2.4rem;
  max-width:820px;margin-inline:auto;
}
.foot__pic{
  width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 1.5rem;
  border:4px solid var(--mustard);box-shadow:0 0 0 5px var(--ink),8px 8px 0 var(--ketchup);
  animation:bob 5s ease-in-out infinite;
}
.foot__h{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(2.6rem,10vw,7rem);line-height:.86;margin-bottom:.9rem;
  color:var(--cream);
  -webkit-text-stroke:clamp(2px,.45vw,4px) var(--ink);paint-order:stroke fill;
  text-shadow:clamp(4px,.8vw,9px) clamp(4px,.8vw,9px) 0 var(--ketchup);
}
.foot__p{color:rgba(255,244,223,.6);margin-bottom:2rem;font-size:1.05rem}
.foot__fine{
  margin-top:2.6rem;font-family:var(--f-mono);font-size:.72rem;line-height:1.8;
  color:rgba(255,244,223,.34);
}
.foot__fine a{color:rgba(255,194,32,.75)}
.foot__fine a:hover{color:var(--mustard)}
.foot__stamp{display:inline-block;margin-top:.5rem;opacity:.75}
.foot__stamp #stamp{color:rgba(255,194,32,.8)}

/* ─── Lightbox ─────────────────────────────────── */

.lb{
  position:fixed;inset:0;z-index:9600;
  background:rgba(8,7,6,.93);backdrop-filter:blur(14px);
  display:grid;place-items:center;padding:1.2rem;
  opacity:0;transition:opacity .35s;
}
.lb[hidden]{display:none}
.lb.is-on{opacity:1}
.lb__stage{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  transform:scale(.9) translateY(24px);opacity:0;
  transition:transform .5s var(--ease-bounce),opacity .4s;
  max-height:100%;
}
.lb.is-on .lb__stage{transform:none;opacity:1}
.lb__frame{
  width:min(340px,88vw);aspect-ratio:9/16;max-height:76vh;
  border-radius:16px;overflow:hidden;background:var(--ink-2);
  border:3px solid var(--mustard);box-shadow:0 30px 70px rgba(0,0,0,.7);
}
.lb__frame iframe{width:100%;height:100%;border:0;display:block}
.lb__meta{text-align:center;max-width:min(420px,90vw)}
.lb__cap{font-size:.9rem;color:rgba(255,244,223,.8);margin-bottom:.55rem}
.lb__link{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mustard);border-bottom:1px solid rgba(255,194,32,.4);
}
.lb__link:hover{color:var(--ketchup)}
.lb__x{
  position:absolute;top:1.1rem;right:1.1rem;z-index:2;
  width:46px;height:46px;border-radius:50%;
  background:var(--cream);color:var(--ink);
  display:grid;place-items:center;
  border:2.5px solid var(--ink);
  transition:transform .3s var(--ease-bounce),background .3s;
}
.lb__x:hover{transform:rotate(90deg) scale(1.1);background:var(--ketchup);color:var(--cream)}

/* towns, under the county table */
.turf__towns{margin-top:clamp(1.6rem,4vw,2.4rem)}
.turf__towns[hidden]{display:none}
.turf__sub{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,244,223,.45);
  margin-bottom:.9rem;font-weight:400;
}
.turf__chips{display:flex;flex-wrap:wrap;gap:.5rem}
.turf__chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-sign);font-size:.74rem;
  padding:.42rem .8rem;border-radius:999px;
  border:2px solid rgba(255,244,223,.16);
  color:rgba(255,244,223,.82);background:var(--ink-2);
  transition:border-color .25s,color .25s,transform .25s var(--ease-bounce);
}
.turf__chip:hover{border-color:var(--mustard);color:var(--cream);transform:translateY(-2px)}
.turf__chip i{font-style:normal;font-size:.62rem;color:var(--ketchup)}
.turf__chip b{
  font-family:var(--f-mono);font-size:.62rem;font-weight:500;
  color:var(--ink);background:var(--mustard);
  padding:.05rem .35rem;border-radius:99px;
}

/* ─── Booking form ─────────────────────────────── */

.bk{max-width:640px}
.bk__row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:560px){.bk__row{grid-template-columns:1fr}}

/* honeypot - off-screen rather than display:none, which some bots skip */
.bk__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.bk__field{display:block;margin-bottom:.9rem}
.bk__field > span{
  display:block;margin-bottom:.4rem;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,244,223,.6);
}
.bk__field > span i{font-style:normal;color:rgba(255,244,223,.32);letter-spacing:.08em}

.bk__field input,
.bk__field textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--cream);
  background:var(--ink-2);
  border:2.5px solid rgba(255,244,223,.16);border-radius:13px;
  padding:.8rem .95rem;
  transition:border-color .25s,box-shadow .25s,background .25s;
  resize:vertical;
}
.bk__field textarea{min-height:92px}
.bk__field input::placeholder,
.bk__field textarea::placeholder{color:rgba(255,244,223,.3)}
.bk__field input:hover,
.bk__field textarea:hover{border-color:rgba(255,244,223,.3)}
.bk__field input:focus,
.bk__field textarea:focus{
  outline:none;background:var(--ink-3);
  border-color:var(--mustard);box-shadow:4px 4px 0 rgba(255,194,32,.28);
}
/* only scold a field once it has actually been filled in wrong */
.bk__field input:not(:placeholder-shown):invalid{border-color:var(--ketchup)}

.bk__foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.2rem}
.bk__foot .btn[disabled]{opacity:.55;pointer-events:none}

.bk__note{
  font-family:var(--f-mono);font-size:.76rem;line-height:1.5;
  color:rgba(255,244,223,.55);margin:0;
}
.bk__note.is-ok{color:var(--mint)}
.bk__note.is-bad{color:var(--ketchup)}

/* ─── Follow picker ────────────────────────────── */

.fp{
  position:fixed;inset:0;z-index:9700;
  background:rgba(8,7,6,.9);backdrop-filter:blur(14px);
  display:grid;place-items:center;padding:1.2rem;
  opacity:0;transition:opacity .28s;
}
.fp[hidden]{display:none}
.fp.is-on{opacity:1}

.fp__card{
  position:relative;width:min(430px,100%);
  background:var(--ink-2);
  border:3px solid var(--cream);border-radius:24px;
  box-shadow:10px 12px 0 var(--ketchup);
  padding:clamp(1.5rem,4vw,2.1rem);
  transform:scale(.9) translateY(22px);opacity:0;
  transition:transform .45s var(--ease-bounce),opacity .35s;
}
.fp.is-on .fp__card{transform:none;opacity:1}

.fp__x{
  position:absolute;top:.85rem;right:.85rem;
  width:38px;height:38px;border-radius:50%;
  background:transparent;color:rgba(255,244,223,.55);
  display:grid;place-items:center;
  transition:transform .3s var(--ease-bounce),background .25s,color .25s;
}
.fp__x:hover{background:var(--ketchup);color:var(--cream);transform:rotate(90deg)}
.fp__x:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}

.fp__eyebrow{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mustard);margin-bottom:.4rem;
}
.fp__title{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.9rem,7vw,2.7rem);line-height:.92;
  margin-bottom:1.3rem;color:var(--cream);
}
.fp__title em{
  font-style:normal;color:transparent;
  -webkit-text-stroke:2px var(--ketchup);paint-order:stroke fill;
}

.fp__options{display:flex;flex-direction:column;gap:.7rem}

.fp__opt{
  --oc:var(--ketchup);
  display:flex;align-items:center;gap:.9rem;
  padding:.9rem 1rem;border-radius:16px;
  border:2.5px solid rgba(255,244,223,.16);
  background:var(--ink-3);
  transition:transform .3s var(--ease-bounce),border-color .25s,box-shadow .3s,background .25s;
}
.fp__opt--ig{--oc:var(--grape)}
.fp__opt[hidden]{display:none}
.fp__opt:hover,.fp__opt:focus-visible{
  transform:translate(-3px,-3px);
  border-color:var(--oc);box-shadow:6px 6px 0 var(--oc);
  background:var(--ink-2);outline:none;
}

.fp__icon{
  flex:none;width:46px;height:46px;border-radius:13px;
  display:grid;place-items:center;
  background:var(--oc);color:var(--cream);
  border:2.5px solid var(--ink);
}
.fp__meta{flex:1;min-width:0;display:flex;flex-direction:column}
.fp__name{font-family:var(--f-sign);font-size:1rem;line-height:1.15;color:var(--cream)}
.fp__sub{
  font-family:var(--f-mono);font-size:.7rem;color:rgba(255,244,223,.5);
  margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fp__go{
  flex:none;font-family:var(--f-display);font-size:1.3rem;color:var(--oc);
  transition:transform .3s var(--ease-out);
}
.fp__opt:hover .fp__go,.fp__opt:focus-visible .fp__go{transform:translateX(5px)}

/* the nav trigger is a <button> now, so it needs the anchor's line-height */
button.nav__cta{line-height:1.2;font-family:var(--f-sign)}

/* ─── Motion-safe ──────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal,.card,.word,.pull__text .w{opacity:1!important;transform:none!important}
  .grain{display:none}
  .turf__row .turf__bar i{width:var(--p)}
}