/* =====================================================================
   THE OTLEY RUN — design system
   Palette: cream / ink-plum / coral / ale-gold / grape
   Type: Bricolage Grotesque (display) + Familjen Grotesk (body)
   ===================================================================== */
:root{
  --cream:#FFF6EC;
  --cream-2:#FBEBD8;
  --ink:#241021;          /* deep aubergine-black */
  --ink-soft:#4a3542;
  --coral:#FF4D3D;
  --coral-dk:#E23824;
  --gold:#F6B93B;
  --grape:#7B2D6B;
  --line:rgba(36,16,33,.12);
  --shadow:0 18px 50px -22px rgba(36,16,33,.45);
  --r-lg:26px; --r-md:16px; --r-sm:10px;
  --maxw:1200px;
  --pad:clamp(20px,5vw,64px);
  --font-d:"Bricolage Grotesque",system-ui,sans-serif;
  --font-b:"Familjen Grotesk",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-b);font-size:clamp(16px,1.05vw,18px);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:700;line-height:1.02;letter-spacing:-.02em;margin:0}
a{color:inherit;text-decoration:none}
img,canvas,svg{max-width:100%;display:block}

.skip-link{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
.skip-link:focus{left:16px}
:focus-visible{outline:3px solid var(--grape);outline-offset:3px;border-radius:6px}

.kicker{font-family:var(--font-b);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--coral);margin:0 0 .8rem}
.kicker--light{color:var(--gold)}

/* ---------------- Buttons ---------------- */
.btn{
  --bg:var(--ink);--fg:#fff;
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--bg);color:var(--fg);
  font-family:var(--font-b);font-weight:600;font-size:1rem;
  padding:.85em 1.4em;border-radius:100px;border:0;cursor:pointer;
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s,background .25s;
  will-change:transform;text-align:center;
}
.btn__arrow{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn--primary{--bg:var(--coral);--fg:#fff}
.btn--primary:hover{--bg:var(--coral-dk)}
.btn--dark{--bg:var(--ink);--fg:var(--cream)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border:1.5px solid var(--line)}
.btn--ghost:hover{--bg:rgba(36,16,33,.04)}
.btn--lg{font-size:1.05rem;padding:1em 1.7em}
.btn--xl{font-size:1.15rem;padding:1.1em 2em}
.btn--sm{font-size:.85rem;padding:.6em 1em}

/* clickable coupon code chip */
.code{
  font-family:var(--font-d);font-weight:700;letter-spacing:.02em;
  background:var(--ink);color:var(--gold);border:0;cursor:pointer;
  padding:.15em .5em;border-radius:8px;font-size:.95em;display:inline-flex;gap:.35em;align-items:center;
  transition:transform .2s,background .2s;
}
.code span{opacity:.55;font-size:.85em}
.code:hover{transform:translateY(-1px)}
.code.copied{background:var(--grape);color:#fff}
.code--inline{background:var(--coral);color:#fff}
.code--big{font-size:1.05em;background:var(--gold);color:var(--ink)}

/* ---------------- Nav ---------------- */
.nav{position:sticky;top:0;z-index:100;transition:background .3s,box-shadow .3s,padding .3s;padding:.55rem 0}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:1.5rem}
.nav.scrolled{background:rgba(255,246,236,.85);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:.5rem;font-family:var(--font-d);font-weight:800;font-size:1.15rem;color:var(--ink);letter-spacing:-.02em}
.brand__mark{color:var(--coral);display:grid;place-items:center}
.nav__links{margin-left:auto;display:flex;gap:1.6rem;font-weight:500}
.nav__links a{position:relative;padding:.3rem 0;color:var(--ink-soft)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--coral);transition:width .3s}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
.nav__cta{}
.nav__burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:6px;margin-left:auto}
.nav__burger span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:.3s}
.nav__burger[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__burger[aria-expanded=true] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav__mobile{display:none;flex-direction:column;gap:.4rem;padding:1rem var(--pad) 1.4rem;background:var(--cream);border-top:1px solid var(--line)}
.nav__mobile a{padding:.7rem 0;font-family:var(--font-d);font-weight:600;font-size:1.2rem;border-bottom:1px solid var(--line)}
.nav__mobile .btn{margin-top:.6rem;justify-content:center;border-bottom:0}

/* ---------------- Hero (gold beer + fillable pint, pinned while it pours) ---------------- */
.hero{position:relative;height:200svh;color:var(--ink);background:#F6B93B}
.hero__pin{position:sticky;top:0;height:100svh;display:flex;overflow:hidden;background:
  linear-gradient(180deg,#FFDD86 0%,#F6B93B 46%,#EFA51E 100%)}
.hero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(46% 52% at 50% 46%,rgba(255,255,255,.55),transparent 70%)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero__grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")}
.hero__inner{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:calc(var(--nav-h,72px) + 1.4rem) var(--pad) 2rem;width:100%;
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;gap:1rem}
.hero__top{width:100%}
.hero__eyebrow{font-weight:600;letter-spacing:.03em;color:var(--grape);margin:0 0 1rem;font-size:clamp(.8rem,1.1vw,.98rem)}
.hero__title{font-size:clamp(2.3rem,6.4vw,5.4rem);font-weight:800;margin:0 auto;max-width:18ch}
.hero__title span{display:block}
.hero__title--accent{color:var(--grape)}
.hero__lede{max-width:50ch;margin:0 auto;font-size:clamp(1rem,1.4vw,1.18rem);color:var(--ink)}
.hero__lede strong{color:var(--grape)}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin:1.4rem 0 0}
.hero__facts{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem 2.4rem;margin:1.8rem 0 0;padding:1.3rem 0 0;border-top:1px solid rgba(36,16,33,.18)}
.hero__facts dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-soft);font-weight:700}
.hero__facts dd{margin:.15rem 0 0;font-family:var(--font-d);font-weight:800;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}

/* the pint */
.pint{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;flex:1 1 auto;justify-content:center;min-height:0;margin:.4rem 0}
.pint__svg{height:min(46vh,430px);width:auto;filter:drop-shadow(0 22px 30px rgba(120,60,10,.35))}
.scroll-cue{width:26px;height:42px;border:2px solid var(--ink);border-radius:20px;display:grid;justify-items:center;padding-top:7px;margin:.9rem auto 0;opacity:.7}
.scroll-cue span{width:4px;height:9px;background:var(--grape);border-radius:3px;animation:scrolldot 1.6s ease-in-out infinite}
@keyframes scrolldot{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(9px);opacity:.35}}
#beerFill{transition:y .12s linear,height .12s linear}
#beerFoam,#beerFoam2,#beerFoam3{transition:cy .12s linear,opacity .3s}
.cbub{fill:rgba(255,255,255,.5)}
.cbub--1{animation:rise 2.6s ease-in .0s infinite}
.cbub--2{animation:rise 3.1s ease-in .5s infinite}
.cbub--3{animation:rise 2.2s ease-in .9s infinite}
.cbub--4{animation:rise 3.4s ease-in 1.3s infinite}
.cbub--5{animation:rise 2.8s ease-in 1.7s infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:.7}100%{transform:translateY(-150px);opacity:0}}

/* ---------------- Marquee ---------------- */
.marquee{background:var(--ink);color:var(--cream);padding:1rem 0;overflow:hidden;position:relative}
.marquee__track{display:flex;width:max-content;animation:marq 48s linear infinite;
  font-family:var(--font-d);font-weight:700;font-size:1.35rem;text-transform:uppercase;letter-spacing:.03em}
.marquee__group{display:flex;align-items:center;gap:1.5rem;padding-right:1.5rem;flex:0 0 auto}
.marquee__group i{color:var(--gold);font-style:normal}
.marquee__group span{opacity:.92;white-space:nowrap}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------------- Section shells ---------------- */
section{position:relative}
.story,.route,.costumes,.tips{max-width:var(--maxw);margin:0 auto;padding:clamp(4.5rem,9vw,8rem) var(--pad)}

/* ---------------- Story ---------------- */
.story__grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(2rem,6vw,6rem)}
.story__lead h2{font-size:clamp(2rem,4vw,3.4rem)}
.story__body p{margin:0 0 1.3rem;font-size:clamp(1.05rem,1.4vw,1.2rem)}
.story__body strong{color:var(--grape)}
.story__quote{margin:2rem 0 0;padding:1.4rem 1.8rem;border-left:4px solid var(--coral);background:var(--cream-2);border-radius:0 var(--r-md) var(--r-md) 0;font-family:var(--font-d);font-weight:600;font-size:clamp(1.15rem,1.8vw,1.5rem);line-height:1.25}

/* ---------------- Gallery (photo toss) ---------------- */
.gallery{max-width:var(--maxw);margin:0 auto;padding:clamp(3.5rem,7vw,6rem) var(--pad) clamp(2rem,4vw,3rem)}
.gallery__head{text-align:center;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.gallery__head h2{font-size:clamp(1.9rem,3.6vw,3rem)}
.gallery__stage{position:relative;height:clamp(560px,58vw,720px)}
.pola{position:absolute;margin:0;background:#fff;padding:12px 12px 0;border-radius:6px;
  box-shadow:0 14px 34px -14px rgba(36,16,33,.4);
  transform:rotate(var(--r,0deg));cursor:pointer;
  width:min(300px,26vw)}
.pola--tall{width:min(240px,21vw)}
/* scatter spots (7 cards: portrait anchors the centre, pairs fan around it) */
.pola:nth-child(1){left:0;top:8%;z-index:1}
.pola:nth-child(2){left:18%;top:42%;z-index:2}
.pola:nth-child(3){left:50%;margin-left:calc(min(240px,21vw) / -2);top:0;z-index:3}
.pola:nth-child(4){right:18%;top:40%;z-index:2}
.pola:nth-child(5){right:0;top:6%;z-index:1}
.pola:nth-child(6){left:1%;top:60%;z-index:4}
.pola:nth-child(7){right:1%;top:62%;z-index:4}
/* tape strip */
.pola::before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:88px;height:26px;background:rgba(246,185,59,.65);border-radius:2px;
  box-shadow:0 1px 3px rgba(36,16,33,.18);z-index:2}
.pola__ph{overflow:hidden;border-radius:2px;background:var(--cream-2)}
.pola__ph img{width:100%;height:auto;display:block}
.pola figcaption{font-family:var(--font-d);font-weight:700;font-size:.92rem;color:var(--ink);
  text-align:center;padding:.65rem .3rem .8rem;letter-spacing:.01em}
/* hover: straighten, lift, come to front (transition armed after the GSAP toss lands) */
.pola{transition:transform .5s cubic-bezier(.34,1.45,.64,1),box-shadow .4s}
.has-gsap .pola:not(.in){transition:none}
.pola:hover{transform:rotate(0deg) translateY(-12px) scale(1.05);z-index:30;
  box-shadow:0 30px 55px -18px rgba(36,16,33,.55)}

/* ---------------- Promo banner (CTA #1) ---------------- */
.promo{padding:0 var(--pad)}
.promo__inner{max-width:var(--maxw);margin:0 auto;background:linear-gradient(115deg,var(--gold),#ffd77a);border-radius:var(--r-lg);
  padding:clamp(2rem,4vw,3.4rem);display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;position:relative;overflow:hidden}
.promo__inner::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,77,61,.35),transparent 70%);border-radius:50%}
.promo__flag{font-family:var(--font-b);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--coral-dk);margin:0 0 .5rem}
.promo__title{font-size:clamp(1.6rem,3vw,2.6rem);color:var(--ink);max-width:16ch}
.promo__sub{margin:.7rem 0 0;color:var(--ink);max-width:44ch}
.promo__text{position:relative;z-index:1}

/* ---------------- Route — 3D scrollytelling ---------------- */
.rscroll{position:relative;isolation:isolate;background:
  radial-gradient(60% 55% at 70% 20%,rgba(246,185,59,.16),transparent 60%),
  radial-gradient(70% 60% at 20% 90%,rgba(123,45,107,.1),transparent 60%),
  var(--cream)}
.rscroll__intro{position:relative;z-index:3;max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,8vw,7rem) var(--pad) 0;text-align:center}
.rscroll__intro h2{font-size:clamp(2rem,4.4vw,3.6rem);max-width:16ch;margin:0 auto}
.rscroll__lead{max-width:56ch;margin:1.1rem auto 0;color:var(--ink-soft);font-size:clamp(1.02rem,1.4vw,1.18rem)}
.rscroll__lead strong{color:var(--ink)}
.rscroll__hint{margin:1.8rem 0 0;font-family:var(--font-d);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--coral)}
.rscroll__hint span{display:inline-block;animation:hintbob 1.6s ease-in-out infinite}
@keyframes hintbob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* pinned canvas (no z-index -> stays inside section's isolate context so controls can sit above steps) */
.rscroll__viz{position:sticky;top:0;height:100vh;width:100%;overflow:hidden}
.rscroll__viz canvas{position:relative;z-index:2;width:100%;height:100%;display:block}
/* golden flash when the finish line is reached */
.rscroll__viz::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(60% 55% at 50% 45%,rgba(246,185,59,.55),rgba(255,77,61,.18) 55%,transparent 75%)}
.rscroll__viz.flash::after{animation:goldflash 1.3s ease-out forwards}
@keyframes goldflash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}

/* per-stop B&W backdrop (placeholder now; drop assets/img/pubs/pub-01..18.jpg to upgrade) */
.rscroll__bg{position:absolute;inset:0;z-index:0;transform:scale(var(--z,1.2));transition:transform .25s linear;will-change:transform}
.rbg{position:absolute;inset:-4%;background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.08) brightness(.92);
  -webkit-mask-image:radial-gradient(ellipse 72% 74% at 50% 46%,#000 46%,transparent 100%);
          mask-image:radial-gradient(ellipse 72% 74% at 50% 46%,#000 46%,transparent 100%);
  opacity:0;transition:opacity 1s ease;will-change:opacity}
.rbg.show{opacity:.5}
.rbg.kb{animation:kenburns 6s ease-out both}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
.rscroll__scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 30%,transparent 40%,rgba(255,246,236,.55) 100%),
             linear-gradient(180deg,rgba(255,246,236,.35),transparent 25% 60%,rgba(255,246,236,.55))}

/* Run-the-route button */
.rscroll__play{position:absolute;top:calc(var(--nav-h,72px) + 18px);right:var(--pad);z-index:5;
  display:inline-flex;align-items:center;gap:.6rem;background:var(--coral);color:#fff;border:0;cursor:pointer;
  font-family:var(--font-b);font-weight:600;font-size:.95rem;padding:.7rem 1.15rem;border-radius:100px;box-shadow:var(--shadow);
  transition:transform .3s,background .25s}
.rscroll__play:hover{transform:translateY(-2px);background:var(--coral-dk)}
.rscroll__play-ic{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent #fff}
.rscroll__play.is-playing .rscroll__play-ic{width:11px;height:12px;border:0;position:relative}
.rscroll__play.is-playing .rscroll__play-ic::before,
.rscroll__play.is-playing .rscroll__play-ic::after{content:"";position:absolute;top:0;width:3.5px;height:12px;background:#fff;border-radius:1px}
.rscroll__play.is-playing .rscroll__play-ic::before{left:0}
.rscroll__play.is-playing .rscroll__play-ic::after{right:0}
.rscroll__badge{position:absolute;top:calc(var(--nav-h,72px) + 18px);left:var(--pad);z-index:4;background:var(--ink);color:#fff;border-radius:100px;padding:.5rem 1rem;font-family:var(--font-d);font-weight:800;display:flex;align-items:baseline;gap:.4rem;box-shadow:var(--shadow);font-variant-numeric:tabular-nums}
.rscroll__badge span{font-size:1.4rem;color:var(--gold)}
.rscroll__badge i{font-style:normal;font-size:.8rem;font-weight:600;opacity:.7}
.rscroll__meter{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;
  display:inline-flex;align-items:center;gap:.55rem;border:0;cursor:pointer;
  background:rgba(36,16,33,.88);color:var(--cream);backdrop-filter:blur(6px);border-radius:100px;
  padding:.55rem 1.2rem;font-family:var(--font-b);font-weight:600;font-size:.9rem;
  font-variant-numeric:tabular-nums;
  animation:meterpulse 2.6s ease-in-out infinite;transition:transform .25s,background .25s}
#vizDist{display:inline-block;min-width:7.4em;text-align:center}
.rscroll__meter:hover{background:var(--ink);transform:translateX(-50%) translateY(-2px)}
.rscroll__meter-ic{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--gold)}
.rscroll__confetti{position:fixed;inset:0;width:100vw;height:100vh;z-index:200;pointer-events:none}
.rscroll__meter.is-playing{animation:none}
.rscroll__meter.is-playing .rscroll__meter-ic{width:9px;height:10px;border:0;position:relative}
.rscroll__meter.is-playing .rscroll__meter-ic::before,
.rscroll__meter.is-playing .rscroll__meter-ic::after{content:"";position:absolute;top:0;width:3px;height:10px;background:var(--gold);border-radius:1px}
.rscroll__meter.is-playing .rscroll__meter-ic::before{left:0}
.rscroll__meter.is-playing .rscroll__meter-ic::after{right:0}
/* tooltip */
.rscroll__meter::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translateX(-50%) translateY(4px);background:var(--coral);color:#fff;padding:.4rem .75rem;border-radius:8px;
  font-size:.78rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--shadow);
  transition:opacity .25s,transform .25s}
.rscroll__meter::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--coral);opacity:0;transition:opacity .25s}
.rscroll__meter:hover::after,.rscroll__meter:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.rscroll__meter:hover::before,.rscroll__meter:focus-visible::before{opacity:1}
@keyframes meterpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,61,.5)}50%{box-shadow:0 0 0 9px rgba(255,77,61,0)}}

/* steps overlap the pinned canvas */
/* pointer-events:none on the list CONTAINER too — a transparent element still swallows
   taps across its whole box, and this one overlays the pinned map's buttons. Only the
   cards (pointer-events:auto) should be interactive. */
.rsteps{position:relative;z-index:3;margin:-100vh auto 0;max-width:var(--maxw);padding:0 var(--pad);list-style:none;pointer-events:none}
.rscroll.no3d .rsteps{pointer-events:auto}
.rstep{min-height:82vh;display:flex;align-items:center;pointer-events:none}
.rstep:first-child{min-height:70vh}
.rstep:last-child{min-height:96vh}
.rcard{pointer-events:auto;cursor:pointer;max-width:400px;background:rgba(255,246,236,.9);backdrop-filter:blur(12px);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.6rem 1.8rem;box-shadow:var(--shadow);
  opacity:.5;transform:translateY(14px) scale(.98);
  transition:opacity .5s,transform .6s cubic-bezier(.34,1.45,.64,1),border-color .5s,box-shadow .3s;will-change:transform,opacity}
.rcard:hover{transform:translateY(-2px)}
.rstep.is-active .rcard{opacity:1;transform:none;border-color:var(--coral)}
.rstep.is-active .rcard:hover{transform:translateY(-3px)}
.rcard__top{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.rcard__no{font-family:var(--font-d);font-weight:800;font-size:1.5rem;color:var(--coral);line-height:1}
.rcard__area{font-weight:700;color:var(--grape);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}
.rcard h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:.4rem}
.rcard p{margin:0;color:var(--ink-soft);font-size:1rem}
.rcard__dist{display:inline-block;margin-top:1rem;font-family:var(--font-d);font-weight:700;font-size:.8rem;color:var(--ink);background:var(--cream-2);border-radius:100px;padding:.35rem .85rem}

/* fallback: plain list when no WebGL / reduced motion */
.rscroll.no3d .rscroll__viz{display:none}
.rscroll.no3d .rscroll__hint{display:none}
.rscroll.no3d .rsteps{margin-top:2.5rem;padding-bottom:2rem}
.rscroll.no3d .rstep{min-height:0;display:block;pointer-events:auto}
.rscroll.no3d .rcard{cursor:default;max-width:none;opacity:1;transform:none;background:transparent;backdrop-filter:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:1.2rem 0}
.rscroll.no3d .rcard:hover{transform:none}

/* ---------------- Street map (Leaflet companion) ---------------- */
.routemap{max-width:var(--maxw);margin:0 auto;padding:clamp(4rem,8vw,7rem) var(--pad)}
.routemap__head{max-width:56ch;margin-bottom:2rem}
.routemap__head h2{font-size:clamp(1.7rem,3vw,2.6rem)}
.routemap__intro{color:var(--ink-soft);margin:.8rem 0 0}
.route__map{height:min(64vh,560px);border-radius:var(--r-lg);box-shadow:var(--shadow);border:1px solid var(--line);background:var(--cream-2)}
.route__mapbar{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.route__readout{margin-right:auto;line-height:1.1}
.route__readout-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--ink-soft);font-weight:600}
.route__readout strong{font-family:var(--font-d);font-size:1.5rem;color:var(--coral)}
/* Leaflet custom pin */
.pin{display:grid;place-items:center;width:30px;height:30px;background:var(--coral);color:#fff;font-family:var(--font-d);font-weight:800;font-size:.85rem;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 4px 10px rgba(36,16,33,.4);border:2px solid #fff}
.pin span{transform:rotate(45deg)}
.pin--start{background:var(--grape)}
.pin--end{background:var(--ink)}
.leaflet-popup-content-wrapper{border-radius:12px}
.leaflet-popup-content{font-family:var(--font-b);margin:.8rem 1rem}
.leaflet-popup-content b{font-family:var(--font-d);font-size:1.05rem;display:block;margin-bottom:.2rem}
.leaflet-popup-content em{color:var(--coral);font-style:normal;font-weight:600;font-size:.85rem}

/* ---------------- Costumes grid (adverts) ---------------- */
.costumes{background:var(--ink);color:var(--cream);max-width:none;border-radius:clamp(24px,4vw,48px);margin-inline:clamp(0px,2vw,24px)}
.costumes>*{max-width:var(--maxw);margin-inline:auto}
.costumes .kicker{color:var(--gold)}
.costumes__head h2{font-size:clamp(1.9rem,3.6vw,3rem);color:#fff}
.costumes__intro{color:rgba(255,246,236,.75);max-width:56ch;margin:.9rem 0 2.6rem}
.costumes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.ctile{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;color:#fff;
  box-shadow:0 18px 42px -22px rgba(0,0,0,.65);transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.ctile:hover{transform:translateY(-8px);box-shadow:0 34px 66px -26px rgba(0,0,0,.72)}
/* image layer — top-anchored so heads aren't cropped, slow Ken-Burns on hover */
.ctile__art{position:absolute;inset:0;transform:scale(1.03);transform-origin:center 20%;transition:transform 6s ease}
.ctile:hover .ctile__art,.ctile:focus-within .ctile__art{transform:scale(1.16)}
.ctile__art::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E")}
.ctile--a .ctile__art{background:url("../img/supermancostume.webp") center top/cover no-repeat,linear-gradient(140deg,var(--coral),#ff8a5b)}
.ctile--b .ctile__art{background:url("../img/mascot_c79ec8a1-59b2-468c-98c2-96517eb28ff5.webp") center top/cover no-repeat,linear-gradient(140deg,var(--grape),#c25aa8)}
.ctile--c .ctile__art{background:url("../img/womenpiratecostume2.webp") center top/cover no-repeat,linear-gradient(140deg,var(--gold),#ffe08a)}
/* title always shown over a gradient; description + CTA reveal on hover/focus */
.ctile__meta{position:absolute;inset:auto 0 0 0;z-index:2;padding:1.4rem 1.5rem 1.4rem;
  background:linear-gradient(transparent,rgba(24,10,22,.16) 24%,rgba(18,7,16,.92))}
.ctile__meta h3{color:#fff;font-size:1.5rem;margin:0;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.ctile__desc{max-height:0;opacity:0;overflow:hidden;margin:0;color:rgba(255,255,255,.88);font-size:.95rem;
  transition:max-height .55s ease,opacity .45s ease,margin .45s ease}
.ctile:hover .ctile__desc,.ctile:focus-within .ctile__desc{max-height:9em;opacity:1;margin:.5rem 0 .7rem}
.ctile__cta{display:inline-block;font-family:var(--font-d);font-weight:700;color:var(--gold);
  opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
.ctile:hover .ctile__cta,.ctile:focus-within .ctile__cta{opacity:1;transform:none}

/* ---------------- Tips / FAQ ---------------- */
.tips__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
.tips h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:1.6rem}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding:.9rem 0 .9rem 2.2rem;border-bottom:1px solid var(--line)}
.checklist li::before{content:"";position:absolute;left:0;top:1.15rem;width:20px;height:20px;border-radius:50%;background:var(--coral);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:13px;background-repeat:no-repeat;background-position:center}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2rem 1.1rem 0;font-family:var(--font-d);font-weight:600;font-size:1.15rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:1rem;font-size:1.5rem;color:var(--coral);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 1.2rem;color:var(--ink-soft)}

/* ---------------- Final CTA ---------------- */
.finalcta{background:
  radial-gradient(80% 120% at 80% 0%,rgba(246,185,59,.22),transparent 60%),
  linear-gradient(160deg,#2c1329,#1a0b18);
  color:var(--cream);text-align:center;padding:clamp(4.5rem,9vw,8rem) var(--pad);overflow:hidden;position:relative}
.finalcta__inner{max-width:760px;margin:0 auto;position:relative;z-index:1}
.finalcta__title{font-size:clamp(2.3rem,6vw,4.5rem);color:#fff;margin:.4rem 0 0}
.finalcta__sub{margin:1.5rem 0 2.2rem;color:rgba(255,246,236,.82);font-size:1.15rem}
.finalcta__fine{margin:1.4rem 0 0;font-size:.8rem;color:rgba(255,246,236,.5)}

/* ---------------- Footer ---------------- */
.footer{background:var(--ink);color:var(--cream)}
.footer__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,6vw,5rem) var(--pad) 2.5rem;display:grid;grid-template-columns:1.4fr 1fr;gap:3rem}
.footer__brand .brand__word{font-family:var(--font-d);font-weight:800;font-size:1.5rem}
.footer__brand p{color:rgba(255,246,236,.6);max-width:48ch;margin:.8rem 0 0;font-size:.95rem}
.footer__nav{display:flex;gap:3rem}
.footer__nav h4{font-family:var(--font-b);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--gold);margin:0 0 1rem}
.footer__nav a{display:block;color:rgba(255,246,236,.72);padding:.3rem 0;font-size:.95rem}
.footer__nav a:hover{color:#fff}
.footer__credits{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) 1.2rem}
.footer__credits summary{cursor:pointer;font-size:.8rem;letter-spacing:.04em;color:rgba(255,246,236,.55);padding:.4rem 0;width:fit-content}
.footer__credits summary:hover{color:rgba(255,246,236,.85)}
.footer__credits>p{font-size:.78rem;color:rgba(255,246,236,.5);margin:.6rem 0}
.footer__credits ul{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem;font-size:.74rem;color:rgba(255,246,236,.45)}
.footer__credits li{padding:.18rem 0;break-inside:avoid}
.footer__credits a{color:rgba(255,246,236,.7);text-decoration:underline;text-underline-offset:2px}
.footer__credits a:hover{color:#fff}
@media (max-width:640px){.footer__credits ul{columns:1}}
.footer__base{border-top:1px solid rgba(255,246,236,.12);padding:1.4rem var(--pad);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:rgba(255,246,236,.5);max-width:var(--maxw);margin:0 auto}

/* ---------------- Scroll reveal ---------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
/* GSAP drives .reveal inline styles per-frame — CSS transitions must not fight it */
.has-gsap .reveal{transition:none}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .nav.open .nav__mobile{display:flex}
  .story__grid,.tips__grid,.footer__inner{grid-template-columns:1fr}
  .route__map{height:56vh}
  .costumes__grid{grid-template-columns:1fr;gap:1.2rem}
  /* no hover on touch: show the whole tile and drop the Ken-Burns zoom */
  .ctile{aspect-ratio:4/5}
  .ctile__art,.ctile:hover .ctile__art{transform:none}
  .ctile__desc{max-height:9em;opacity:1;margin:.5rem 0 .7rem}
  .ctile__cta{opacity:1;transform:none}
  .promo__inner{flex-direction:column;align-items:flex-start}
  .pint__svg{height:min(40vh,340px)}
  /* gallery: swipeable snap strip on touch */
  .gallery__stage{height:auto;display:flex;align-items:center;gap:1.1rem;overflow-x:auto;padding:1.4rem .3rem 1.8rem;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gallery__stage::-webkit-scrollbar{display:none}
  .pola,.pola--tall{position:static;flex:0 0 min(64vw,300px);width:auto;scroll-snap-align:center;margin-left:0 !important}
  .pola:nth-child(odd){--r:-2.5deg}
  .pola:nth-child(even){--r:2.5deg}
  /* scrollytelling: centre the card so it reads over the canvas on phones.
     Controls stack bottom-centre — the only zone the cards never cover,
     so they stay visible and tappable (the sticky viz paints below the card layer). */
  .rstep{justify-content:center;min-height:78vh}
  .rcard{max-width:min(92vw,420px);text-align:left}
  .rscroll__badge{top:auto;bottom:126px;left:50%;transform:translateX(-50%);padding:.35rem .8rem}
  .rscroll__badge span{font-size:1.1rem}
  .rscroll__play{top:auto;right:auto;bottom:74px;left:50%;transform:translateX(-50%);font-size:.85rem;padding:.55rem 1rem}
  .rscroll__play:hover{transform:translateX(-50%)}
  .rscroll__meter{bottom:22px;font-size:.82rem;padding:.5rem 1rem}
}
@media (max-width:560px){
  .hero__inner{gap:.4rem}
  .hero__title{font-size:clamp(2rem,8.5vw,3rem)}
  .hero__facts{gap:1rem 1.6rem;margin-top:1.2rem;padding-top:1rem}
  .hero__facts>div{min-width:38%}
  .hero__lede{font-size:1rem}
  .hero__cta .btn{flex:1 1 100%;justify-content:center}
  .pint__svg{height:min(34vh,300px)}
  .marquee__track{font-size:1.1rem}
  .footer__base{flex-direction:column}
  .ctile__meta{padding:1.2rem}
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .marquee__track{animation:none}
  .cbub,.scroll-cue span{animation:none}
  #beerFill,#beerFoam,#beerFoam2,#beerFoam3{transition:none}
  .btn,.ctile{transition:none}
  .ctile__art{transition:none;transform:none}
  .ctile:hover .ctile__art{transform:none}
  .pola{transition:none}
  *{scroll-behavior:auto !important}
}