/* ===== Story page styles: concepts/keyholder-tv/story.html inline <style>, verbatim (built only from site.css tokens). Keep in step with the static page; app-only additions live in story-post.css. ===== */

/* reading progress: sits under the header, driven from scroll position by the script at the end of the page
   (the CSS scroll-timeline version jumped to the finger on iPhone touch-scrolling) */
.read-progress{position:fixed; z-index:81; top:var(--hdr-t); left:0; right:0; height:3px; background:linear-gradient(90deg, var(--juice), var(--cream)); transform-origin:0 50%; transform:scaleX(0); pointer-events:none; will-change:transform}

/* shared two-column frame: reading column + right rail */
.story-cols{display:grid; grid-template-columns:minmax(0,1fr) 360px; column-gap:clamp(28px, 4.4vw, 64px)}

/* --- top band (reuses .hero-band) --- */
.story-top{padding-top:clamp(24px, 3vw, 40px)}
/* Clip sideways only (the stage's full-width dark backdrop), so the "In the video" pop-out can hang below the header
   over the story text; .hero-band's overflow:hidden cut it off whenever the video was the header's tallest column. */
.story-top{overflow:clip visible; z-index:2}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.crumbs li{display:flex; align-items:center; gap:10px}
.crumbs li + li::before{content:"›"; font-size:15px; opacity:.55}
.crumbs a{color:var(--on-orange-muted); border-bottom:2px solid transparent; padding-bottom:1px; transition:border-color .15s, color .15s}
.crumbs a:hover{color:var(--ink); border-color:var(--ink)}
.crumbs [aria-current]{color:var(--ink)}
.story-head{padding:clamp(20px, 2.4vw, 30px) 0 clamp(26px, 3vw, 40px)}
.story-flags{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:18px}
.story-flags:empty{display:none}
.story-kick{font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.story-kick a{border-bottom:2px solid rgba(11,11,11,.35); padding-bottom:1px; transition:border-color .15s}
.story-kick a:hover{border-color:var(--ink)}
.story-flags .story-card__label{background:var(--ink); color:var(--cream); font-size:11px; padding:4px 8px}
.story-head h1{font-size:clamp(44px, 6.3vw, 98px); line-height:.86; max-width:21ch; overflow-wrap:break-word}
.story-head h1.is-long{font-size:clamp(40px, 5.2vw, 80px); max-width:24ch}
.story-meta--stage{display:none}
.story-dek{margin-top:22px; max-width:56ch; font-size:clamp(17px, 1.55vw, 21px); line-height:1.45; font-weight:500; color:var(--on-orange-muted)}
.disclose{margin-top:18px; max-width:56ch; padding:12px 16px; border-radius:12px; background:var(--ink); color:var(--text); font-size:14.5px; line-height:1.45}
.disclose b{display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--yellow); margin-bottom:3px}
.byline{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-top:28px; padding-top:20px; border-top:2px solid rgba(11,11,11,.16)}
.byline__who{display:flex; align-items:center; gap:12px; min-width:0}
.byline__who img{width:46px; height:46px; border-radius:50%; box-shadow:0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); flex:none}
.byline__who b{display:block; font-size:15px; color:var(--ink)}
.byline__who span{display:block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--on-orange-muted); margin-top:2px}

/* share buttons (used in the band and at the end of the story) */
.share{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.share__label{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-right:4px}
.share a,.share button{width:42px; height:42px; border:0; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--text); transition:transform .18s var(--ease), background .18s, color .18s}
.share a:hover,.share button:hover{transform:translateY(-2px); background:var(--paper); color:var(--ink)}
.share svg{width:18px; height:18px}
.share .share__copy{width:auto; padding:0 16px 0 13px; border-radius:999px; gap:8px; display:inline-flex; align-items:center; font-weight:700; font-size:13.5px}
.share .share__copy.is-done{background:var(--cream); color:var(--ink)}
.share--dark .share__label{color:var(--dim)}
.share--dark a,.share--dark button{background:rgba(255,247,238,.07); box-shadow:inset 0 0 0 1px var(--line-2)}
.share--dark a:hover,.share--dark button:hover{background:var(--juice); color:var(--ink); box-shadow:none}

/* stage: hero photo + side card, dark ground slides under the lower part (like .onair) */
.story-stage{position:relative; padding-bottom:4px; align-items:start}
.story-stage::before{content:""; position:absolute; z-index:-1; left:calc(50% - 50vw); width:100vw; top:clamp(110px, 12vw, 190px); bottom:0; background:var(--ink); border-top:3px solid var(--ink)}
.story-figure{margin:0; min-width:0}
.story-cap{margin-top:8px; font-size:12.5px; line-height:1.4; color:var(--dim)} /* a photo's caption and credit */
.story-body .story-cap{margin-top:-6px}
/* "In the video ?": the description stays in the HTML for search engines, shown as a pop-out on tap (hover on desktop) */
.vsum{position:relative; margin-top:10px; display:flex}
.vsum__btn{display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:4px 10px 4px 0; background:none; border:0; color:var(--juice); cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent}
.vsum__btn b{font-family:var(--font-mono); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase}
.vsum__q{display:grid; place-items:center; width:18px; height:18px; border-radius:50%; box-shadow:inset 0 0 0 1.5px currentColor; font-family:var(--font-mono); font-size:11px; font-weight:800; line-height:1; transition:background .15s, color .15s}
.vsum[data-open] .vsum__q{background:var(--juice); color:var(--on-orange); box-shadow:none}
.vsum__btn:focus-visible{outline:2px solid var(--juice); outline-offset:2px; border-radius:6px}
.vsum__pop{position:absolute; z-index:30; top:calc(100% + 6px); left:0; width:min(440px, 100%); box-sizing:border-box; padding:12px 14px 13px; border-radius:var(--r-sm); background:var(--ink-4); box-shadow:inset 0 0 0 1px var(--line-2), 0 18px 40px -12px rgba(0,0,0,.8); color:var(--text); font-size:14px; line-height:1.5; visibility:hidden; opacity:0; transform:translateY(-4px); transition:opacity .15s var(--ease), transform .15s var(--ease), visibility 0s .15s}
.vsum__pop::before{content:""; position:absolute; top:-6px; left:30px; width:12px; height:12px; background:var(--ink-4); box-shadow:-1px -1px 0 0 var(--line-2); transform:rotate(45deg)}
.vsum[data-open] .vsum__pop{visibility:visible; opacity:1; transform:none; transition-delay:0s}
@media (hover:hover) and (pointer:fine){
  .vsum:hover .vsum__pop{visibility:visible; opacity:1; transform:none; transition-delay:0s}
}
@media (prefers-reduced-motion:reduce){ .vsum__pop{transition:none} }

/* media: native video / swipe gallery / full photo (the post itself, on the page) */
.media{position:relative; border-radius:var(--r-lg); overflow:hidden; background:#000; box-shadow:var(--frame); isolation:isolate}
.media__bg{position:absolute; inset:-48px; z-index:-1; background:center/cover no-repeat; filter:blur(38px) saturate(1.15); opacity:.3; transform:scale(1.08)}
.media__box{--ar:.75; position:relative; margin:0 auto; aspect-ratio:var(--ar); width:min(100%, calc(80vh * var(--ar))); width:min(100%, calc(80svh * var(--ar))); max-height:80vh}
.media__el{display:block; width:100%; height:100%; object-fit:contain; background:#000}
video.media__el{border-radius:0}
.media video:focus-visible,.media__zoom:focus-visible,.gal__track:focus-visible{outline:3px solid var(--juice); outline-offset:-3px; border-radius:var(--r-lg)}
.media__play{position:absolute; z-index:2; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; background:var(--juice); color:var(--ink); box-shadow:0 10px 26px rgba(0,0,0,.5); cursor:pointer; transition:transform .18s var(--ease), background .18s}
.media__play:hover{transform:scale(1.07); background:var(--yellow)}
.media__play:focus-visible{outline:3px solid var(--cream); outline-offset:3px}
.media__play svg{width:34px; height:34px; margin-left:4px}
.has-played > .media__play{display:none}
.media__sound{position:absolute; z-index:2; left:50%; bottom:64px; transform:translateX(-50%); display:none; border:0; padding:10px 14px; font-size:12px; cursor:pointer; transition:background .15s, color .15s}
.media__sound svg{width:16px; height:16px}
.media__sound:hover{background:var(--juice); color:var(--ink)}
.media__sound:focus-visible{outline:3px solid var(--juice); outline-offset:2px}
.is-muted > .media__sound{display:inline-flex}
.media__zoom{display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in}
.media__chip{position:absolute; z-index:3; left:12px; top:12px; pointer-events:none; transition:opacity .2s}
.media__chip--count{left:auto; right:12px}
.media.is-playing .media__chip:not(.media__chip--count){opacity:0}
.gal__track{position:relative; display:flex; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none}
.gal__track::-webkit-scrollbar{display:none}
.gal__slide{position:relative; flex:0 0 100%; height:100%; scroll-snap-align:center; scroll-snap-stop:always}
.gal__nav{position:absolute; z-index:3; top:50%; width:46px; height:46px; margin-top:-23px; border:0; border-radius:50%; display:none; place-items:center; background:rgba(11,11,11,.72); color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); cursor:pointer; transition:background .15s, color .15s, opacity .15s}
.gal__nav:hover{background:var(--juice); color:var(--ink)}
.gal__nav:disabled{opacity:0; pointer-events:none}
.gal__nav svg{width:20px; height:20px}
.gal__nav--prev{left:14px}.gal__nav--next{right:14px}
@media (hover:hover) and (pointer:fine) and (min-width:761px){.gal__nav{display:grid}}
.gal__dots{display:flex; justify-content:center; flex-wrap:wrap; gap:2px; margin-top:12px}
.gal__dots button{width:26px; height:26px; padding:0; border:0; background:none; display:grid; place-items:center; cursor:pointer}
.gal__dots button::before{content:""; width:8px; height:8px; border-radius:9px; background:var(--line-2); transition:width .2s var(--ease), background .2s}
.gal__dots button[aria-current="true"]::before{width:22px; background:var(--juice)}
.gal__dots button:hover::before{background:var(--muted)}
.gal__dots button[aria-current="true"]:hover::before{background:var(--juice)}

/* lightbox (native <dialog>) */
.lb{width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; color:var(--text)}
.lb::backdrop{background:rgba(0,0,0,.92)}
.lb[open]{display:grid; place-items:center}
.lb__img{max-width:min(94vw, 1100px); max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:12px}
.lb__x,.lb__nav{position:fixed; z-index:2; width:46px; height:46px; border:0; border-radius:50%; display:grid; place-items:center; background:rgba(255,247,238,.1); color:var(--text); font-size:18px; cursor:pointer}
.lb__x:hover,.lb__nav:hover{background:var(--juice); color:var(--ink)}
.lb__x{top:calc(16px + var(--sat)); right:16px}
.lb__nav{top:50%; margin-top:-23px}
.lb__nav svg{width:20px; height:20px}
.lb__prev{left:16px}.lb__next{right:16px}
.lb__n{position:fixed; bottom:18px; left:0; right:0; text-align:center; font-size:12px; color:var(--dim)}

/* article parts: the juice box, pull quotes, sources, filed-under, original post line */
.facts{list-style:none; margin:0; padding:4px 20px 18px}
.facts li{position:relative; padding:12px 0 12px 24px; border-top:1px solid var(--line); font-size:15.5px; line-height:1.45; color:var(--text)}
.facts li:first-child{border-top:0}
.facts li::before{content:""; position:absolute; left:2px; top:19px; width:9px; height:9px; border-radius:50%; background:var(--juice)}
.story-body .juice-box{max-width:560px}
.story-body .pull{margin:2em 0}
.pull p{text-transform:uppercase; color:var(--paper)}
.pull footer{margin-top:10px; font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--juice)}
.notes{padding-top:22px; border-top:1px solid var(--line); font-size:13px; line-height:1.55; color:var(--dim)}
.notes > * + *{margin-top:14px}
.notes h2{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--juice); margin-bottom:6px}
.notes ol{margin:0; padding-left:1.3em}
.notes li + li{margin-top:4px}
.notes a{color:var(--muted); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.notes a:hover{color:var(--cream)}
.filed{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.filed a{text-decoration:none; border-bottom:1px solid var(--line-2)}
.orig{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; scroll-margin-top:calc(var(--hdr-t) + 24px)}
.orig .mono{font-size:11px; letter-spacing:.06em; text-transform:uppercase}
.sound__link{font-size:12.5px; color:var(--dim)}
.sound__link a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}

/* side cards: the count (140-votes story only), sound off, reel, support, feed. All share .count */
.count{--jt-depth:var(--juice-deep); border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2); box-shadow:var(--frame); color:var(--text)}
.count__head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line); background:linear-gradient(90deg, rgba(255,93,0,.16), transparent)}
.count__head h2{font-size:34px}
.count__head span{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--dim); text-align:right; text-transform:uppercase}
.count__status{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:14px 20px 4px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--dim); text-transform:uppercase}
.cand{padding:14px 20px 0}
.cand__top{display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; align-items:center}
.cand__top img{width:52px; height:52px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px var(--ink-2), 0 0 0 4px var(--juice)}
.cand--b .cand__top img{box-shadow:0 0 0 2px var(--ink-2), 0 0 0 4px var(--paper)}
.cand--nopic .cand__top{grid-template-columns:minmax(0,1fr) auto} /* a candidate with no headshot: name and count only */
.cand__name{font-family:var(--font-display); font-size:28px; line-height:.95; text-transform:uppercase}
.cand__name small{display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--dim); margin-top:3px}
.cand__votes{font-family:var(--font-display); font-size:44px; line-height:.9; font-variant-numeric:tabular-nums; text-align:right}
.cand__votes small{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--dim)}
.cand__bar{height:10px; border-radius:9px; margin-top:12px; background:rgba(255,247,238,.08); overflow:hidden}
.cand__bar i{display:block; height:100%; border-radius:9px; background:var(--juice)}
.cand--b .cand__bar i{background:var(--paper)}
.count__gap{--jt-depth:var(--ink); position:relative; margin:20px 20px 0; padding:16px 18px 14px; border-radius:16px; background:var(--juice); color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:12px; overflow:hidden}
.count__gap small{display:block; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em}
.count__gap span:first-child{font-size:14px; font-weight:600; max-width:15ch; line-height:1.3}
.count__gap .juice-type{font-size:84px; line-height:.8}
.count__foot{padding:16px 20px 18px; font-size:12.5px; color:var(--dim)}
.count__foot a{color:var(--juice); font-weight:700}
.count__in{display:flex; flex-direction:column; gap:14px; padding:20px}
.count__in > .sound__q{font-family:var(--font-display); font-size:clamp(30px, 2.6vw, 38px); line-height:.95; text-transform:uppercase; color:var(--paper); overflow-wrap:break-word}
.sound .vote{margin-top:2px}
.sound .vote--3{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
.sound .vote--plain button[aria-pressed="true"]{background:var(--paper); color:var(--ink); box-shadow:none} /* neutral pick: no fruit = no lean */
.sound .vote button{padding:14px 8px; font-size:15px; color:var(--text)}
/* Counted polls (Control Room → Polls): once you've voted, or the poll is closed, each answer shows its share:
   the number on the right and a thin line along the bottom. Nothing else changes, so the card stays calm. */
.sound .vote--results button{position:relative; overflow:hidden; justify-content:space-between; gap:12px; padding:14px 16px; text-align:left}
.sound .vote--results button::after{content:""; position:absolute; left:0; bottom:0; height:3px; width:var(--pct, 0%); background:var(--juice); transition:width .6s var(--ease)}
.sound .vote--results button[aria-pressed="true"]::after{background:rgba(11,11,11,.28)}
.sound .vote__pct{font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; font-weight:700; flex:none}
@media (max-width:640px){
  /* one answer per row, so a long name never wraps against its number */
  .sound .vote--results{grid-template-columns:1fr}
}
.sound .vote button:disabled{cursor:default}
.sound .vote button:disabled:hover{transform:none; background:rgba(255,247,238,.06)}
.sound__key{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--dim)}
.sound__key b{color:var(--cream); font-weight:700}
.count__in > p{font-size:15.5px; line-height:1.5; color:var(--muted)}
.count__in > p b{color:var(--text)}
.count__row{display:flex; flex-wrap:wrap; gap:8px}
.count__row .btn{flex:1}
.feed__who{display:flex; align-items:center; gap:10px; font-size:14px}
.feed__who img{width:38px; height:38px; border-radius:50%; box-shadow:0 0 0 2px var(--ink-2), 0 0 0 4px var(--juice)}
.feed__who b{display:block; color:var(--text)}
.feed__who span{display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--dim)}

/* --- body --- */
.story-main{padding:clamp(36px, 4.4vw, 60px) 0 var(--section-y)}
.story-body{max-width:68ch; font-size:clamp(17px, 1.3vw, 19px); line-height:1.7; color:rgba(255,247,238,.88)}
.story-body > * + *{margin-top:1.15em}
.story-body > p.lead::first-letter{float:left; font-family:var(--font-display); font-size:4.6em; line-height:.8; margin:.06em .1em 0 0; color:var(--juice)}
.story-body p a{color:var(--cream); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.story-body h2.story-sub{font-family:var(--font-display); font-weight:400; font-size:clamp(30px, 2.8vw, 38px); line-height:1; text-transform:uppercase; color:var(--paper); margin-top:1.6em}
.story-body h2.story-sub span{color:var(--juice)}
.story-body .blk{margin-top:2em; margin-bottom:2em; line-height:1.55}
.story-body h2.story-sub + .blk{margin-top:.9em}
.story-body .sound{max-width:560px}

/* inline Keyholder opt-in */
.optin{--kp-ground:var(--juice); position:relative; display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:20px; align-items:center; padding:26px 26px 26px 28px; border-radius:var(--r-lg); background:var(--juice); color:var(--ink); box-shadow:var(--frame-sm); overflow:hidden; isolation:isolate}
.optin::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(420px 260px at 0% 0%, rgba(255,241,116,.4), transparent 70%), radial-gradient(circle at 1px 1px, rgba(11,11,11,.14) 1px, transparent 1.6px) 0 0/14px 14px}
.optin .kicker{color:var(--ink)}
.optin h2{font-size:clamp(38px, 3.6vw, 52px); margin-top:8px}
.optin p.optin__txt{margin-top:10px; font-size:15.5px; font-weight:500; color:var(--on-orange-muted)}
.optin p.optin__txt b{color:var(--ink)}
.optin form{margin-top:16px; display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:8px}
.optin .input{background:var(--ink); color:var(--text); box-shadow:none; height:52px}
.optin .input:focus{box-shadow:inset 0 0 0 2px var(--cream)}
.optin .btn{grid-column:1/-1; height:54px}
.optin .form-msg{font-weight:600}
.optin .form-msg.is-ok{color:var(--ink)}
.optin .form-msg.is-error{color:var(--ink); background:rgba(255,255,255,.35); padding:6px 10px; border-radius:8px}
.optin .fine{grid-column:1/-1; color:var(--on-orange-muted); font-size:11.5px}
.optin__pass .kpass{--kpass-w:190px; min-height:calc(var(--kpass-w) * 2.05)}
.optin .keys-done{background:var(--ink); color:var(--text); margin-top:16px; box-shadow:none}
.optin .keys-done .btn{grid-column:auto; height:auto}

/* in-article sponsor banner (one per story, from assets/data/ads.js). Card is the advertiser's color, Juice frame and type */
.story-body .spon{margin-top:2.4em; margin-bottom:2.4em}
.spon__tag{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
.spon__tag::after{content:""; flex:1; height:1px; background:var(--line)}
.spon__card{--sp-bg:var(--paper); --sp-ink:var(--ink); --sp-mute:rgba(11,11,11,.66); --sp-btn:var(--ink); --sp-btn-ink:var(--paper); --sp-accent:var(--juice);
  position:relative; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); border-radius:var(--r-lg); overflow:hidden; background:var(--sp-bg); color:var(--sp-ink); box-shadow:var(--frame-sm); isolation:isolate; line-height:1.4; transition:transform .25s var(--ease), box-shadow .25s}
.spon__card:hover{transform:translateY(-3px); box-shadow:0 0 0 3px var(--ink), 7px 8px 0 3px var(--ink), var(--glow)}
.spon__media{position:relative; min-height:100%; background:#000}
.spon__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease)}
.spon__card:hover .spon__media img{transform:scale(1.04)}
.spon__body{display:flex; flex-direction:column; gap:10px; padding:24px 24px 20px}
.spon .wm{display:block; color:var(--sp-ink)}
.spon .wm small{text-transform:uppercase}
.spon__eyebrow{font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sp-accent)}
.spon__h{font-family:var(--font-display); font-weight:400; font-size:clamp(36px, 3.4vw, 50px); line-height:.9; text-transform:uppercase; color:var(--sp-ink); text-wrap:balance}
.story-body .spon__h a{color:inherit; text-decoration:none}
.spon__h a::after{content:""; position:absolute; inset:0; z-index:1} /* whole card clicks through */
.spon__txt{font-size:15px; color:var(--sp-mute)}
.spon__acts{position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:4px}
.spon__btn{display:inline-flex; align-items:center; gap:8px; height:48px; padding:0 20px; border-radius:999px; background:var(--sp-btn); color:var(--sp-btn-ink); font-weight:800; font-size:15px; transition:transform .18s var(--ease)}
.spon__btn:hover{transform:translateY(-2px)}
.spon__btn svg{width:18px; height:18px}
.spon__alt{font-size:13.5px; font-weight:700; color:var(--sp-ink); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:3px}
.spon__fine{margin-top:auto; padding-top:6px; font-size:11px; line-height:1.45; color:var(--sp-mute)}
/* brand themes */
.spon--injury .wm{font-family:Georgia, "Times New Roman", serif; font-weight:700; font-size:22px; letter-spacing:.05em; text-transform:uppercase; line-height:1}
.spon--injury .wm i{font-style:normal; font-size:.7em; vertical-align:.15em; margin-right:.2em}
.spon--injury .wm small{display:block; margin-top:5px; font-size:9.5px; letter-spacing:.42em; color:var(--sp-mute)}
.spon--catalyst .spon__card{--sp-bg:var(--leaf); --sp-ink:var(--paper); --sp-mute:rgba(255,255,255,.8); --sp-btn:var(--paper); --sp-btn-ink:var(--leaf); --sp-accent:var(--cream)}
.spon--catalyst .wm{font-weight:800; font-size:30px; letter-spacing:-.04em; line-height:1}
.spon--catalyst .wm i{font-style:normal; color:var(--cream)}
.spon--catalyst .wm small{display:block; font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.5em; color:var(--sp-mute); margin-top:3px}
.spon--waxx .spon__card{--sp-bg:var(--yellow); --sp-mute:rgba(11,11,11,.72); --sp-accent:var(--ink)}
.spon--waxx .wm{font-family:var(--font-display); font-size:52px; line-height:.8; letter-spacing:.04em}
.spon--waxx .wm small{display:block; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.62em; color:var(--sp-mute); margin-top:5px}
.spon--waxx .spon__eyebrow{display:none}

/* related interview (reuses .player; play button opens the shared JU.play modal) */
.story-body .player{box-shadow:0 0 0 1px var(--line-2), 0 30px 60px -30px rgba(255,93,0,.5)}
.story-body .player__screen > img{object-position:50% 50%}
.story-body .player__title{font-size:clamp(26px, 2.6vw, 36px); max-width:24ch}
.story-body .player__title a{text-decoration:none; color:inherit}
.story-body .play-btn{width:80px; height:80px; margin:-40px 0 0 -40px}

/* source, partner note, share, prev/next */
.source{padding:16px 18px; border-radius:12px; background:rgba(255,247,238,.04); box-shadow:inset 0 0 0 1px var(--line); font-size:13.5px; line-height:1.55; color:var(--muted)}
.source b{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--juice); margin-right:6px}
.story-body .partner-note{font-size:12.5px; color:var(--dim); margin-top:10px}
.story-end{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding-top:22px; border-top:1px solid var(--line)}
.story-end .fine a{color:var(--muted); text-decoration:underline}
.pn{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.pn a{display:flex; flex-direction:column; gap:6px; padding:14px 16px; border-radius:12px; background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); font-size:14.5px; font-weight:650; line-height:1.35; color:var(--text); transition:box-shadow .2s, color .2s}
.pn a:hover{box-shadow:inset 0 0 0 1px rgba(255,93,0,.7); color:var(--cream)}
.pn small{font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--juice)}
.pn a[rel="next"]{text-align:right; grid-column:2}

/* right rail */
.story-rail{display:flex; flex-direction:column; gap:var(--gap)}
.story-rail__stick{position:sticky; top:calc(var(--hdr-t) + 24px); display:flex; flex-direction:column; gap:var(--gap)}
.rail-box{border-radius:var(--r); background:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line); padding:20px}
.rail-box__h{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.rail-box__h h2{font-size:32px}
.mostread{list-style:none; margin:0; padding:0; counter-reset:mr}
.mostread li{counter-increment:mr; border-top:1px solid var(--line)}
.mostread li:first-child{border-top:0}
.mostread a{position:relative; display:grid; grid-template-columns:76px minmax(0,1fr); gap:14px; align-items:center; padding:14px 0}
.mostread__img{position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--ink-4)}
.mostread__img img{width:100%; height:100%; object-fit:cover; object-position:50% 30%; transition:transform .5s var(--ease)}
.mostread__img::after{content:counter(mr); position:absolute; left:0; bottom:0; min-width:26px; padding:3px 6px 1px; background:var(--juice); color:var(--ink); font-family:var(--font-display); font-size:20px; line-height:1; text-align:center; border-top-right-radius:8px}
.mostread .story-card__kicker{font-size:10px}
.mostread .story-card__title{display:block; font-size:14.5px; line-height:1.3; margin-top:5px}
.mostread .story-card__meta{display:block; margin-top:4px}
.mostread a:hover .story-card__title{color:var(--cream)}
.mostread a:hover img{transform:scale(1.07)}
.house-ad{position:relative; display:block; border-radius:var(--r); padding:20px; background:linear-gradient(135deg, var(--ink-4), var(--ink-3)); box-shadow:inset 0 0 0 1px rgba(255,217,2,.3); overflow:hidden}
.house-ad::after{content:"🍊"; position:absolute; right:-14px; bottom:-26px; font-size:110px; opacity:.16; transform:rotate(-14deg)}
.house-ad h3{font-size:30px; margin-top:12px}
.house-ad p{margin-top:8px; font-size:14px; color:var(--muted); max-width:28ch}
.house-ad .link-more{margin-top:14px}

/* related + not-found */
.related .grid--4 .story-card__title{font-size:17px}
.story-card__media img{object-position:50% 22%}
[data-state="notfound"] .story-stage,[data-state="notfound"] .story-main,[data-state="notfound"] .byline{display:none}
[data-state="notfound"] .story-head{padding-bottom:clamp(48px, 6vw, 80px)}
.nf-acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}

@media (max-width:1180px){
  .story-cols{grid-template-columns:minmax(0,1fr) 300px}
  .cand__votes{font-size:38px}
  .count__gap .juice-type{font-size:70px}
  .related .grid--4{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:980px){
  .story-cols{grid-template-columns:1fr}
  .story-stage{row-gap:var(--gap)}
  .story-stage .count{max-width:560px; width:100%}
  .story-rail{margin-top:var(--section-y)}
  .story-rail__stick{position:static}
  .story-body{max-width:none}
}
@media (max-width:760px){
  .crumbs ol{font-size:11px; letter-spacing:.1em}
  .story-kick{font-size:12px}
  .story-head h1,.story-head h1.is-long{font-size:clamp(38px, 11vw, 60px); line-height:.9}
  .story-head h1.is-long{font-size:clamp(34px, 9.6vw, 52px)}
  .story-dek{margin-top:16px}
  .byline{margin-top:22px; padding-top:16px}
  /* Phones: get to the photo/video fast. The kicker line already says city · category, so the breadcrumb goes
     (it stays in the JSON-LD), and on stories with media the dek + byline move under the media, on the dark stage. */
  .story-top > .container > .crumbs{display:none}
  .story-head{padding:16px 0 22px}
  .story-flags{margin-bottom:14px}
  .story-head.has-media .story-meta--top{display:none}
  .story-meta--stage{display:block}
  .story-meta--stage .story-dek{margin-top:18px; color:var(--muted)}
  .story-meta--stage .disclose{background:rgba(255,247,238,.07); box-shadow:inset 0 0 0 1px var(--line-2)}
  .story-meta--stage .byline{margin-top:6px; border-top-color:var(--line-2)}
  .story-meta--stage .byline:first-child{padding-top:0; border-top:0}
  .story-meta--stage .byline__who b,.story-meta--stage .byline__who a{color:var(--text)}
  .story-meta--stage .byline__who span{color:var(--dim)}
  .story-meta--stage .byline__who img{box-shadow:0 0 0 2px var(--juice)}
  /* Copy link goes icon-only so Save + the five share buttons fit one row (screen readers keep the label) */
  .share .share__copy{width:40px; padding:0; justify-content:center}
  .share__copy [data-copy-label]{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .share__label{display:none}
  .share{gap:6px}
  .share a,.share button{width:40px; height:40px}
  .story-stage::before{top:90px}
  .media{box-shadow:var(--frame-sm); border-radius:var(--r)}
  .media__box{max-height:78vh; width:min(100%, calc(78vh * var(--ar))); width:min(100%, calc(78svh * var(--ar)))}
  .vsum{margin-top:8px}
  .vsum__pop{width:100%; font-size:13.5px}
  .media__play{width:64px; height:64px; margin:-32px 0 0 -32px}
  .media__play svg{width:28px; height:28px}
  .lb__nav{top:auto; bottom:10px; margin:0}
  .count{box-shadow:var(--frame-sm)}
  .cand__name{font-size:24px}
  .cand__votes{font-size:36px}
  .count__gap .juice-type{font-size:64px}
  .story-body > p.lead::first-letter{font-size:4.1em}
  .optin{grid-template-columns:1fr; padding:22px 18px}
  .optin__pass{display:none}
  .optin form{grid-template-columns:1fr}
  .spon__card{grid-template-columns:1fr; box-shadow:var(--frame-sm)}
  .spon__media{aspect-ratio:16/9; min-height:0}
  .spon__body{padding:20px 18px 18px}
  .spon__h{font-size:clamp(34px, 9.4vw, 44px)}
  .spon__btn{flex:1 1 100%; justify-content:center}
  .story-body .play-btn{width:58px; height:58px; margin:0; left:12px; top:auto; bottom:12px}
  .story-body .player__body{margin-top:0; padding:16px 18px 20px}
  .story-end{flex-direction:column; align-items:flex-start}
  .pn{grid-template-columns:1fr}
  .pn a[rel="next"]{grid-column:auto; text-align:left}
  .related .grid--4{grid-template-columns:1fr}
}