/* We The Stars: Fandom Stage. Light house, dark only inside the stage frames. */
:root{
  --ink:#141A33;--ink2:#2A3155;--muted:#4B5372;--line:#DFE3F1;
  --blue:#2242C8;--blue2:#1A34A3;--gold:#F5B50A;--gold2:#FFD45C;
  --paper:#FFFFFF;--tint:#F3F5FD;--cream:#FFF7E0;
  --r:22px;--r2:14px;--wrap:1240px;
  --disp:'Fredoka','Trebuchet MS',ui-rounded,system-ui,sans-serif;
  --sans:'Atkinson Hyperlegible',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --pop:cubic-bezier(.34,1.56,.64,1);
  --shadow:0 1px 2px rgba(20,26,51,.06),0 10px 30px rgba(20,26,51,.09);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.08;margin:0;
  letter-spacing:-.01em;text-wrap:balance;color:var(--ink)}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:10px}

/* ---------- top bar + launcher ---------- */
.top{background:var(--tint);border-bottom:1px solid var(--line);font-size:13px;position:relative;z-index:40}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:42px}
.top .pub{color:var(--muted)}
.top .pub b{color:var(--ink)}
.top .tl{margin-left:auto;display:flex;align-items:center;gap:16px}
.top .tl>a{text-decoration:none;font-weight:700;color:var(--ink2)}
.top .tl>a:hover{color:var(--blue)}
.launch{position:relative}
.launch summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;border-radius:999px;padding:6px 14px 6px 10px;font-weight:700;font-size:12.5px}
.launch summary::-webkit-details-marker{display:none}
.launch summary .dots{width:16px;height:16px;display:grid;grid-template-columns:repeat(3,4px);gap:2px}
.launch summary .dots i{width:4px;height:4px;border-radius:50%;background:var(--gold)}
.launch[open] summary{background:var(--blue)}
.launchpanel{position:absolute;right:0;top:calc(100% + 10px);width:min(720px,calc(100vw - 32px));
  max-height:72vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 60px rgba(20,26,51,.2);padding:20px 22px;columns:3 180px;column-gap:22px;
  animation:lp .28s var(--pop)}
@keyframes lp{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.launchpanel .lg{break-inside:avoid;margin:0 0 14px}
.launchpanel h4{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);margin:0 0 6px}
.launchpanel a{display:block;text-decoration:none;font-size:14px;padding:3px 0;color:var(--ink2)}
.launchpanel a:hover{color:var(--blue)}
.launchpanel a[aria-current]{font-weight:700;color:var(--ink)}
.launchpanel a[aria-current]::after{content:" \2605";color:#B07F00}

/* ---------- masthead ---------- */
.mast{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);
  -webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.mast.stuck{border-color:var(--line);box-shadow:0 6px 24px rgba(20,26,51,.06)}
.mast .wrap{display:flex;align-items:center;gap:22px;min-height:78px;transition:min-height .3s}
.mast.stuck .wrap{min-height:62px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{width:52px;height:52px;transition:transform .5s var(--pop),width .3s,height .3s}
.mast.stuck .brand img{width:42px;height:42px}
.brand:hover img{transform:rotate(-12deg) scale(1.06)}
.brand .wm{font-family:var(--disp);font-weight:700;font-size:25px;letter-spacing:-.01em;color:var(--ink);line-height:1}
.brand .wm span{color:var(--blue)}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.nav a{text-decoration:none;font-weight:700;font-size:15px;padding:9px 14px;border-radius:999px;color:var(--ink2);
  transition:background .2s,color .2s}
.nav a:hover{background:var(--tint);color:var(--blue)}
.nav a[aria-current]{background:var(--ink);color:#fff}
.nav a.cta{background:var(--gold);color:var(--ink)}
.nav a.cta:hover{background:var(--gold2)}

/* ---------- shared bits ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue)}
.eyebrow::before{content:"";width:12px;height:12px;background:var(--gold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:16px;
  padding:14px 24px;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;
  transition:transform .35s var(--pop),background .2s,color .2s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn.alt{background:#fff;color:var(--ink)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn svg{width:18px;height:18px}
.chip{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;background:var(--cream);color:#6B4A00;border:1px solid #F2D58A;text-decoration:none}
a.chip:hover{background:var(--gold)}
.sec{padding:96px 0 0}
.sh{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.sh h2{font-size:clamp(34px,2.2rem + 1.6vw,58px)}
.sh p{max-width:52ch;color:var(--muted);margin:0}
.sh .grow{flex:1 1 420px}
.credit{display:block;font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:8px}
.reveal{opacity:0;transform:translateY(26px) scale(.985);transition:opacity .7s ease,transform .8s var(--pop)}
.reveal.in{opacity:1;transform:none}

/* ---------- hero: the stage ---------- */
.hero{padding:44px 0 0}
.hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
.hero h1{font-size:clamp(52px,3rem + 4.2vw,112px);line-height:.95;letter-spacing:-.025em;margin:18px 0 22px}
.hero h1 .ln{display:block}
.hero h1 em{font-style:normal;position:relative;color:var(--blue);white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.04em;height:.2em;background:var(--gold);
  border-radius:999px;z-index:-1;transform-origin:left;animation:ul 1.1s .5s var(--pop) both}
@keyframes ul{from{transform:scaleX(0)}}
.hero .sub{font-size:20px;color:var(--muted);max-width:40ch}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero .facts{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.hero .facts div{font-size:14px;color:var(--muted);max-width:18ch;line-height:1.35}
.hero .facts b{display:block;font-family:var(--disp);font-size:34px;color:var(--ink);line-height:1}
.stage{position:relative;border-radius:34px;overflow:hidden;background:#0D1230;aspect-ratio:4/4.6;
  box-shadow:0 30px 80px rgba(20,26,51,.28);isolation:isolate;--x:62%;--y:30%;touch-action:pan-y}
.stage .media,.stage .media img,.stage .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .media img,.stage .media video{filter:saturate(1.15) contrast(1.05)}
.stage video{opacity:0;transition:opacity .8s}
.stage video.on{opacity:1}
.stage .spot{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle 240px at var(--x) var(--y),rgba(255,214,92,.18) 0,rgba(13,18,48,.12) 45%,rgba(13,18,48,.86) 100%);
  transition:background .1s}
.stage .beam{position:absolute;z-index:3;left:var(--x);top:-10%;width:60%;height:120%;transform:translateX(-50%);
  pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:linear-gradient(180deg,rgba(255,212,92,.55),rgba(255,212,92,0) 80%);
  clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(8px)}
.stage .rise{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.stage .rise i{position:absolute;bottom:-30px;width:var(--s,14px);height:var(--s,14px);background:var(--gold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:rise var(--d,9s) linear var(--w,0s) infinite;opacity:.9}
@keyframes rise{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(calc(-1 * (100cqh + 60px))) rotate(220deg);opacity:0}}
.stage{container-type:size}
.stage .cap{position:absolute;z-index:5;left:20px;right:20px;bottom:20px;display:flex;justify-content:space-between;
  align-items:flex-end;gap:12px;color:#fff}
.stage .cap p{margin:0;font-family:var(--disp);font-size:22px;line-height:1.15;max-width:16ch}
.stage .cap .hint{font-size:12.5px;color:#D7DCF5;font-family:var(--sans);text-align:right}
.stage .tag{position:absolute;z-index:5;top:18px;left:18px;background:var(--gold);color:var(--ink);font-weight:700;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.tapebox{overflow:hidden;padding:24px 0;margin-top:46px}
.tape{border-block:2px solid var(--ink);background:var(--gold);overflow:hidden;transform:rotate(-1.2deg);
  margin-inline:-20px}
.tape .run{display:flex;gap:0;width:max-content;animation:tape 38s linear infinite}
.tape a{display:inline-flex;align-items:center;gap:16px;padding:12px 18px;font-family:var(--disp);font-weight:600;
  font-size:22px;color:var(--ink);text-decoration:none;white-space:nowrap}
.tape a::after{content:"";width:16px;height:16px;background:var(--ink);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.tape a:hover{color:var(--blue)}
.tape:hover .run{animation-play-state:paused}
@keyframes tape{to{transform:translateX(-50%)}}

/* ---------- headliner ---------- */
.headliner{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border-radius:var(--r);overflow:hidden;
  background:var(--tint);text-decoration:none;box-shadow:var(--shadow)}
.headliner .ph{position:relative;overflow:hidden;min-height:420px}
.headliner .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s ease}
.headliner:hover .ph img{transform:scale(1.05)}
.headliner .tx{padding:44px 44px 36px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.headliner .lab{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--blue);display:flex;align-items:center;gap:10px}
.headliner .lab::before{content:"";width:30px;height:3px;background:var(--gold);border-radius:3px}
.headliner h3{font-size:clamp(32px,1.6rem + 1.6vw,50px)}
.headliner p{color:var(--muted);margin:0}
.headliner .go{font-weight:700;color:var(--blue);display:inline-flex;gap:8px;align-items:center}
.headliner:hover h3{color:var(--blue)}

/* ---------- fan wall ---------- */
.wallbox{background:var(--cream);border-radius:34px;padding:34px;position:relative;
  background-image:radial-gradient(rgba(176,127,0,.13) 1.2px,transparent 1.3px);background-size:18px 18px}
.tray{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:2px solid var(--ink);border-radius:20px;
  padding:12px 14px;margin-bottom:26px;position:sticky;top:76px;z-index:6;box-shadow:0 8px 0 var(--ink)}
.tray .tl{font-weight:700;font-size:14px;margin-right:6px}
.tray button.pick{border:0;background:none;padding:4px;border-radius:14px;cursor:grab;touch-action:none;
  transition:transform .3s var(--pop),background .2s}
.tray button.pick:hover{transform:translateY(-3px) rotate(-6deg)}
.tray button.pick[aria-pressed="true"]{background:var(--tint);box-shadow:inset 0 0 0 2px var(--blue)}
.tray .clear{margin-left:auto;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:7px 14px;
  font-weight:700;font-size:13.5px;cursor:pointer}
.tray .clear:hover{background:var(--ink);color:#fff}
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.poster{background:#fff;border-radius:18px;padding:12px 12px 16px;box-shadow:0 2px 0 rgba(20,26,51,.08),0 16px 34px rgba(20,26,51,.12);
  transform:rotate(var(--rot,0deg));transition:transform .5s var(--pop)}
.poster:nth-child(4n+1){--rot:-1.6deg}.poster:nth-child(4n+2){--rot:1.1deg}
.poster:nth-child(4n+3){--rot:-.6deg}.poster:nth-child(4n){--rot:1.8deg}
.poster:hover,.poster:focus-within{transform:rotate(0) translateY(-4px)}
.poster .pin{position:absolute;top:-9px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFE38F,var(--gold) 50%,#B07F00);box-shadow:0 3px 4px rgba(0,0,0,.25);z-index:3}
.poster{position:relative}
.pz{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:var(--ink)}
.pz img{width:100%;height:100%;object-fit:cover}
.pz .hit{position:absolute;inset:0;border:0;background:linear-gradient(180deg,rgba(20,26,51,0) 50%,rgba(20,26,51,.55));
  cursor:copy;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding:12px;color:#fff;font-weight:700;font-size:13px;
  opacity:0;transition:opacity .25s}
.pz:hover .hit,.pz .hit:focus-visible,.wall.dragging .pz .hit{opacity:1}
.pz .hit:focus-visible{outline:3px solid var(--gold);outline-offset:-5px}
.pz.over{box-shadow:0 0 0 4px var(--blue)}
.layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.layer .stuck{position:absolute;pointer-events:auto;border:0;background:none;padding:0;cursor:pointer;
  transform:translate(-50%,-50%) rotate(var(--r,0deg));animation:stick .45s var(--pop) both;filter:drop-shadow(0 3px 3px rgba(0,0,0,.3))}
.layer .stuck.peel{animation:peel .35s ease-in forwards}
@keyframes stick{from{transform:translate(-50%,-50%) rotate(calc(var(--r,0deg) - 25deg)) scale(1.7);opacity:0;
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.3))}}
@keyframes peel{to{transform:translate(-30%,-120%) rotate(40deg) scale(.6);opacity:0}}
.poster h3{font-size:21px;margin:14px 4px 2px}
.poster h3 a{text-decoration:none}
.poster h3 a:hover{color:var(--blue)}
.poster .meta{display:flex;justify-content:space-between;gap:8px;font-size:13.5px;color:var(--muted);margin:0 4px}
.poster .meta b{color:var(--ink)}
.poster .credit{margin:8px 4px 0;font-size:10.5px}
.wallnote{font-size:14px;color:var(--muted);margin:22px 0 0}
.ghost{position:fixed;z-index:200;pointer-events:none;transform:translate(-50%,-50%) rotate(-8deg) scale(1.25);
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.3))}
/* sticker art */
.sk{display:inline-flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;
  font-size:15px;line-height:1;padding:9px 13px;border-radius:999px;white-space:nowrap;border:2.5px solid #fff;
  box-shadow:0 0 0 1.5px rgba(20,26,51,.25)}
.sk-iconic{background:var(--blue);color:#fff}
.sk-same{background:var(--gold);color:var(--ink)}
.sk-canon{background:var(--ink);color:var(--gold2)}
.sk-ship{background:#fff;color:var(--blue);box-shadow:0 0 0 2.5px var(--blue)}
.sk-encore{background:var(--gold);color:var(--ink);border-radius:8px;transform:rotate(-4deg)}
.sk-crying{background:#E8EDFF;color:var(--blue2)}
.sk-star,.sk-heart{padding:0;border:0;box-shadow:none;background:none;width:40px;height:40px}
.sk-star svg,.sk-heart svg{width:40px;height:40px}

/* ---------- front row (media effects) ---------- */
.front{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(120px,auto);gap:22px}
.tile{position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink);text-decoration:none;color:#fff;
  min-height:300px;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile .tt{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(180deg,transparent,rgba(13,18,48,.82))}
.tile .tt h3{color:#fff;font-size:26px}
.tile .tt span{font-size:14px;color:#DDE2F7}
.t1{grid-column:span 7;grid-row:span 3}.t2{grid-column:span 5;grid-row:span 2}
.t3{grid-column:span 5;grid-row:span 2}.t4{grid-column:span 7;grid-row:span 1;min-height:280px}
/* halftone zine dots that clear under the pointer */
.fx-halftone::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle,rgba(20,26,51,.62) 32%,transparent 36%) 0 0/9px 9px;mix-blend-mode:multiply;
  -webkit-mask:radial-gradient(circle 170px at var(--mx,50%) var(--my,50%),transparent 0,#000 75%);
          mask:radial-gradient(circle 170px at var(--mx,50%) var(--my,50%),transparent 0,#000 75%)}
.fx-halftone img{filter:contrast(1.15) saturate(1.2)}
/* duotone in blue and gold, colour wipes in on hover */
.fx-duo .d1{filter:url(#duo)}
.fx-duo .d2{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.7,0,.2,1);z-index:1}
.fx-duo:hover .d2,.fx-duo:focus-visible .d2{clip-path:inset(0 0 0 0)}
.fx-duo .wipe{position:absolute;z-index:3;top:0;bottom:0;width:4px;background:var(--gold);left:0;opacity:0;transition:left .9s cubic-bezier(.7,0,.2,1),opacity .3s}
.fx-duo:hover .wipe{left:100%;opacity:1}
/* parallax depth: the photo drifts against a frame */
.fx-depth img{top:-14%;height:128%;transform:translate3d(0,var(--py,0px),0) scale(1.04);will-change:transform}
.fx-depth .frame{position:absolute;inset:14px;border:2px solid rgba(255,212,92,.85);border-radius:14px;z-index:3;
  transform:translate3d(calc(var(--tx,0) * -10px),calc(var(--ty,0) * -10px),0);transition:transform .2s}
/* ken burns with film grain */
.fx-burns img{animation:burns 22s ease-in-out infinite alternate;transform-origin:30% 40%}
@keyframes burns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.16) translate(-3%,-2%)}}
.fx-burns::after{content:"";position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-4%,3%)}66%{transform:translate(3%,-5%)}100%{transform:translate(-2%,2%)}}

/* ---------- quiz ---------- */
.quiz{display:grid;grid-template-columns:1.3fr .9fr;gap:26px;align-items:start}
.qcard{border:2px solid var(--ink);border-radius:28px;padding:34px;background:#fff;box-shadow:10px 10px 0 var(--blue)}
.qtop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.qdots{display:flex;gap:6px}
.qdots i{width:28px;height:8px;border-radius:8px;background:var(--line);transition:background .3s,width .4s var(--pop)}
.qdots i.on{background:var(--blue);width:40px}.qdots i.done{background:var(--gold)}
.qnum{font-weight:700;font-size:14px;color:var(--muted)}
.qcard h3{font-size:clamp(26px,1.3rem + 1.2vw,38px);margin-bottom:22px}
.qopts{display:grid;gap:12px}
.qopt{position:relative;text-align:left;border:2px solid var(--line);background:var(--tint);border-radius:18px;
  padding:16px 18px;font-weight:700;font-size:17px;cursor:pointer;overflow:hidden;transition:border-color .2s,transform .3s var(--pop)}
.qopt:hover{border-color:var(--blue);transform:translateX(4px)}
.qopt .fill{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--pop);z-index:0}
.qopt span{position:relative;z-index:1}
.qopt .plus{display:block;font-weight:400;font-size:13px;color:var(--ink2);margin-top:2px;opacity:0;transition:opacity .3s .2s}
.qopt.chosen{border-color:var(--ink)}
.qopt.chosen .fill{transform:scaleX(1)}
.qopt.chosen .plus{opacity:1}
.qopts.locked .qopt:not(.chosen){opacity:.45}
.meter{border-radius:28px;background:var(--tint);padding:28px}
.meter h3{font-size:22px;margin-bottom:6px}
.meter>p{font-size:14.5px;color:var(--muted)}
.bars{display:grid;gap:12px;margin-top:16px}
.bar{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:14px;font-weight:700}
.bar .tr{grid-column:1 / -1;height:12px;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.bar .tr i{display:block;height:100%;width:0;background:var(--blue);border-radius:12px;transition:width .7s var(--pop)}
.bar.lead .tr i{background:var(--gold)}
.result{display:none}
.result.show{display:block;animation:pop .6s var(--pop)}
@keyframes pop{from{opacity:0;transform:scale(.92) rotate(-2deg)}}
.fancard{border-radius:24px;padding:26px;color:#fff;background:linear-gradient(150deg,#2242C8,#141A33 80%);
  position:relative;overflow:hidden}
.fancard::before{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;background:var(--gold);opacity:.95;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.fancard small{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;color:var(--gold2)}
.fancard h4{color:#fff;font-size:34px;margin:6px 0 10px;max-width:12ch;position:relative}
.fancard p{color:#E3E7FA;font-size:15.5px;position:relative}
.fancard ul{display:grid;gap:8px;margin:14px 0 18px;position:relative}
.fancard li a{display:block;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:12px;
  padding:10px 12px;text-decoration:none;font-weight:700;font-size:15px;color:#fff}
.fancard li a:hover{background:var(--gold);color:var(--ink)}
.fancard .row{display:flex;gap:10px;flex-wrap:wrap;position:relative}
.fancard .btn{padding:10px 18px;font-size:14.5px;border-color:#fff}
.qnote{font-size:13.5px;color:var(--muted);margin-top:14px}

/* ---------- watch alongs ---------- */
.watch{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.tv{position:relative;border-radius:36px;padding:18px;background:#1B2142;box-shadow:0 26px 60px rgba(20,26,51,.25)}
.tv .scr{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/10;background:#0D1230}
.tv .scr img,.tv .scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tv video{opacity:0;transition:opacity .6s}.tv video.on{opacity:1}
.tv .scr::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
.tv .scr::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:24px;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55));animation:flick 5s infinite}
@keyframes flick{0%,96%,100%{opacity:1}97%{opacity:.75}98%{opacity:1}99%{opacity:.85}}
.tv .roll{position:absolute;left:0;right:0;height:18%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.07),transparent);animation:roll 6s linear infinite}
@keyframes roll{from{top:-20%}to{top:110%}}
.tv .knobs{display:flex;justify-content:space-between;align-items:center;padding:14px 8px 2px;color:#C9CFEE;font-size:13px}
.tv .knobs button{background:var(--gold);color:var(--ink);border:0;border-radius:999px;padding:8px 16px;font-weight:700;cursor:pointer}
.tv .live{display:inline-flex;align-items:center;gap:8px}
.tv .live::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.wlist{display:grid;gap:12px}
.wlist a{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-decoration:none;padding:14px;border-radius:18px;
  border:1px solid var(--line);transition:background .2s,transform .3s var(--pop)}
.wlist a:hover{background:var(--tint);transform:translateX(6px)}
.wlist .n{width:44px;height:44px;border-radius:14px;background:var(--ink);color:var(--gold2);display:grid;place-items:center;
  font-family:var(--disp);font-weight:700;font-size:18px}
.wlist b{display:block;font-family:var(--disp);font-size:19px;font-weight:600;line-height:1.2}
.wlist small{color:var(--muted);font-size:14px;line-height:1.4;display:block;margin-top:2px}

/* ---------- setlist ---------- */
.setlist{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.sheet{background:#fff;border-radius:6px;padding:34px 30px;box-shadow:0 2px 0 rgba(0,0,0,.05),0 22px 44px rgba(20,26,51,.14);
  transform:rotate(-1.2deg);position:relative;
  background-image:linear-gradient(transparent 39px,#E6EAF7 40px);background-size:100% 40px;background-position:0 70px}
.sheet::before,.sheet::after{content:"";position:absolute;top:-12px;width:90px;height:26px;background:rgba(245,181,10,.75);transform:rotate(-4deg)}
.sheet::before{left:20px}.sheet::after{right:20px;transform:rotate(5deg)}
.sheet h3{font-size:30px;margin-bottom:8px}
.sheet ol{counter-reset:s}
.sheet li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;align-items:baseline;min-height:40px}
.sheet li::before{content:counter(s,decimal-leading-zero);font-family:var(--disp);font-weight:700;color:var(--blue)}
.sheet li a{text-decoration:none;font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.25;padding:8px 0}
.sheet li a:hover{color:var(--blue);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px}
.sheet li small{display:block;font-family:var(--sans);font-weight:400;font-size:12.5px;color:var(--muted)}
.big{font-size:clamp(40px,2rem + 3vw,84px);line-height:.98}

/* ---------- inner pages ---------- */
.pagehead{padding:56px 0 40px;background:var(--tint);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.pagehead::after{content:"";position:absolute;right:6%;top:-40px;width:220px;height:220px;background:var(--gold);opacity:.9;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:spin 40s linear infinite}
.pagehead h1{font-size:clamp(40px,2rem + 3vw,76px);max-width:16ch;position:relative;z-index:1}
.pagehead p{color:var(--muted);max-width:60ch;margin:14px 0 0;position:relative;z-index:1;font-size:18.5px}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:16px;position:relative;z-index:1}
.crumbs a{color:var(--blue);font-weight:700;text-decoration:none}
.prose{max-width:720px;padding:46px 0 10px}
.prose h3{font-size:26px;margin:30px 0 10px}
.prose a{color:var(--blue);font-weight:700}
.prose p{font-size:18.5px}

/* ---------- article ---------- */
.art{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;padding:40px 0 0}
.art h1{font-size:clamp(36px,1.8rem + 2.6vw,64px);margin:16px 0 10px}
.kick{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.art figure{margin:26px 0 30px}
.art figure .fr{border-radius:var(--r);overflow:hidden;background:var(--tint);box-shadow:var(--shadow)}
.art figure img{width:100%;height:auto}
.art figcaption{font-size:13px;color:var(--muted);margin-top:10px}
.body p{font-size:19px;line-height:1.72;max-width:66ch}
.body p:first-child::first-letter{font-family:var(--disp);font-weight:700;float:left;font-size:4.1em;line-height:.8;
  padding:.06em .1em 0 0;color:var(--blue)}
.back{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:var(--blue);text-decoration:none;margin-top:8px}
.side{position:sticky;top:96px;display:grid;gap:22px}
.react{border:2px solid var(--ink);border-radius:22px;padding:20px;background:var(--cream)}
.react h2{font-size:20px;margin-bottom:4px}
.react p{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.react .rs{display:flex;flex-wrap:wrap;gap:8px}
.react button{border:0;background:none;padding:2px;cursor:pointer;border-radius:999px;transition:transform .35s var(--pop)}
.react button:hover{transform:rotate(-6deg) scale(1.06)}
.react button[aria-pressed="true"] .sk{box-shadow:0 0 0 3px var(--ink)}
.react button[aria-pressed="true"]{animation:boing .5s var(--pop)}
@keyframes boing{40%{transform:scale(1.25) rotate(8deg)}}
.more{border-radius:22px;background:var(--tint);padding:20px}
.more h2{font-size:20px;margin-bottom:10px}
.more a{display:block;text-decoration:none;font-weight:700;padding:10px 0;border-top:1px solid var(--line);line-height:1.3}
.more a:hover{color:var(--blue)}
/* share bar (kept from the existing posts, restyled) */
.sb{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);margin:40px 0 10px;padding:18px 0;display:flex;
  align-items:center;gap:10px;flex-wrap:wrap;max-width:66ch}
.sb-t{font:700 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-right:4px}
.sb-l{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sb a,.sb button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;padding:0;
  transition:transform .3s var(--pop),background .2s,color .2s}
.sb a:hover,.sb button:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px)}
.sb svg{width:18px;height:18px;fill:currentColor;display:block}
.sb .wide{width:auto;padding:0 15px;border-radius:20px;gap:8px;font:700 13px/1 var(--sans)}
.sb-note{font-size:12.5px;color:var(--muted);flex-basis:100%;margin:2px 0 0}
#sb-said{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.printnote{display:none}

/* ---------- library ---------- */
.lbar{position:sticky;top:62px;z-index:8;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:14px 0}
.lbar .wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.search{position:relative;flex:1 1 300px;max-width:420px}
.search input{width:100%;font:inherit;font-size:16px;padding:12px 16px 12px 44px;border:2px solid var(--ink);border-radius:999px;background:#fff}
.search svg{position:absolute;left:15px;top:50%;width:18px;height:18px;transform:translateY(-50%)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-weight:700;font-size:13.5px;cursor:pointer;
  transition:background .2s,transform .3s var(--pop)}
.chips button:hover{transform:translateY(-2px)}
.chips button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips button i{font-style:normal;opacity:.65;font-weight:400;margin-left:4px}
.lcount{font-size:14px;color:var(--muted);width:100%}
.lsec{padding-top:40px;scroll-margin-top:150px}
.lsec h2{font-size:32px;display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.lsec h2 span{font-family:var(--sans);font-size:14px;color:var(--muted);font-weight:400}
.lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{display:flex;flex-direction:column;text-decoration:none;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);
  transition:transform .35s var(--pop),box-shadow .3s}
.card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--shadow)}
.card .th{aspect-ratio:16/10;overflow:hidden;background:var(--tint)}
.card .th img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .th img{transform:scale(1.06)}
.card .cb{padding:14px 16px 18px}
.card small{font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.card b{display:block;font-family:var(--disp);font-weight:600;font-size:19px;line-height:1.22;margin:4px 0 6px}
.card span{display:block;font-size:14px;color:var(--muted);line-height:1.45}
.card[hidden],.lsec[hidden]{display:none}
.empty{padding:40px 0;font-size:18px;color:var(--muted)}

/* ---------- footer ---------- */
.foot{margin-top:110px;background:var(--tint);border-top:1px solid var(--line);padding:60px 0 30px;font-size:15px}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.foot .flogo{display:inline-block}
.foot .flogo img{width:150px;height:auto}
.foot .tagl{font-family:var(--disp);font-size:22px;font-weight:600;margin:14px 0 0}
.foot h2{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.foot li{margin-bottom:7px}
.foot li a{text-decoration:none;color:var(--ink2)}
.foot li a:hover{color:var(--blue);text-decoration:underline}
.foot .base{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;color:var(--muted);font-size:13.5px;line-height:1.7;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot .base b{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .lgrid{grid-template-columns:repeat(3,1fr)}
  .wall{grid-template-columns:repeat(2,1fr)}
  .art{grid-template-columns:1fr}.side{position:static}
}
@media (max-width:900px){
  .hero .wrap,.quiz,.watch,.setlist,.headliner{grid-template-columns:1fr}
  .stage{aspect-ratio:4/3.6}
  .headliner .ph{min-height:280px}
  .front{grid-template-columns:1fr 1fr}
  .t1,.t2,.t3,.t4{grid-column:span 2;grid-row:auto;min-height:300px}
  .foot .cols{grid-template-columns:1fr 1fr}
  .mast .wrap{flex-wrap:wrap;row-gap:0}
  .nav{order:3;width:100%;margin:0 0 8px -10px;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;padding:7px 12px;font-size:14px}
  .mast.stuck .nav{display:none}
  .lgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .wrap{padding:0 16px}
  .top .pub{display:none}
  .top .tl{margin-left:0;width:100%;justify-content:space-between;gap:10px}
  .launchpanel{position:fixed;left:16px;right:16px;top:50px;width:auto;columns:1}
  .mast .wrap{min-height:64px;gap:10px}
  .brand img{width:42px;height:42px}
  .brand .wm{font-size:21px}
  .nav a.cta{padding:8px 12px;font-size:14px}
  .hero{padding-top:26px}
  .hero h1{font-size:clamp(44px,13vw,64px)}
  .hero .sub{font-size:18px}
  .sec{padding-top:70px}
  .wallbox{padding:18px 14px;border-radius:24px}
  .tray{top:68px;gap:4px;padding:10px;box-shadow:0 5px 0 var(--ink)}
  .tray .tl{width:100%}
  .tray .clear{margin-left:0}
  .sk{font-size:13px;padding:7px 10px}
  .sk-star,.sk-heart,.sk-star svg,.sk-heart svg{width:32px;height:32px}
  .wall{gap:16px}
  .poster{padding:8px 8px 12px}
  .poster h3{font-size:17px}
  .poster .meta{flex-direction:column;gap:0;font-size:12.5px}
  .qcard{padding:22px;box-shadow:6px 6px 0 var(--blue)}
  .headliner .tx{padding:26px 22px}
  .lgrid{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr}
  .sheet{padding:28px 18px;transform:none}
  .tape a{font-size:18px}
  .pagehead::after{width:120px;height:120px;right:-20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .stage .rise{display:none}
}
@media print{
  .sb,.top,.mast,.foot,.side,video,.tape,.skip{display:none!important}
  .art{display:block}
  body{font-size:11.5pt}
  .printnote{display:block!important;margin-top:14pt;padding-top:8pt;border-top:1pt solid #000;font-size:9pt}
}

.headliner .go svg,.back svg{width:18px;height:18px;flex:none}
.sk-star svg,.sk-heart svg{flex:none;min-width:100%;min-height:100%}
@media (max-width:640px){.stage .cap .hint{display:none}}