/* SHOW SITE v1 — ink / bone / verdict-system color. Anton display, Newsreader body, Plex Mono receipts. */
:root{--ink:#0A0A0B;--panel:#111114;--line:#232328;--bone:#F2EFE9;--dim:#9C9A94;
--busted:#E5484D;--confirmed:#46A758;--likely:#E8B04B;--inconclusive:#8B8D98;--amber:#E8B04B;
--disp:'Anton',sans-serif;--body:'Newsreader',serif;--mono:'IBM Plex Mono',monospace}
*{margin:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--body);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber)}
.receipt{font-family:var(--mono);font-size:12px;color:var(--dim);border-left:2px solid var(--amber);padding-left:10px;display:inline-block}
/* nav */
nav{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.brand{font-family:var(--disp);font-size:20px;letter-spacing:.06em;text-transform:uppercase}
nav .links a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-left:28px}
nav .links a:hover{color:var(--busted)}
/* ticker (CNBC DNA - static, no wiggle) */
.ticker{border-bottom:1px solid var(--line);overflow:hidden}
.ticker .wrap{display:flex;gap:34px;padding:9px 24px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.ticker b{color:var(--busted);font-weight:500}
.ticker i{font-style:normal;color:#5B5A57}
/* hero */
.hero{padding:88px 0 72px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero .frame{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero .kicker{display:block;margin-bottom:18px}
h1{font-family:var(--disp);font-weight:400;font-size:clamp(44px,7.2vw,96px);line-height:.98;text-transform:uppercase;letter-spacing:.005em;max-width:16ch}
.stamp{display:inline-block;font-family:var(--disp);font-size:clamp(22px,3vw,34px);letter-spacing:.08em;color:var(--ink);background:var(--busted);padding:6px 18px 4px;transform:rotate(-2deg);margin:30px 0 6px;animation:stamp .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stamp{from{transform:rotate(-2deg) scale(2.2);opacity:0}to{transform:rotate(-2deg) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.stamp{animation:none}}
.hero p.dek{max-width:58ch;color:var(--dim);margin-top:18px;font-size:21px}
.hero .actions{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:14px 22px;border:1px solid var(--line)}
.btn.primary{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn.primary:hover{background:var(--busted);color:var(--ink)}
.btn:hover{border-color:var(--busted);color:var(--busted)}
/* stat band */
.band{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.band .cell{padding:34px 28px;border-left:1px solid var(--line)}
.band .cell:first-child{border-left:0}
.band .n{font-family:var(--disp);font-size:44px;color:var(--bone)}
.band .l{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:6px;line-height:1.7}
/* season wall */
.wallhead{padding:66px 0 26px;display:flex;justify-content:space-between;align-items:baseline}
h2{font-family:var(--disp);font-weight:400;font-size:34px;text-transform:uppercase;letter-spacing:.02em}
.wall{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:90px}
.slate{background:var(--panel);aspect-ratio:4/3.1;padding:18px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.slate .q{font-family:var(--body);font-size:15.5px;line-height:1.35;color:var(--dim);max-width:22ch}
.slate.answered{background:#141216}
.slate.answered .q{color:var(--bone)}
.slate.answered:hover{outline:1px solid var(--busted)}
.badge{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:3px 8px;align-self:flex-start}
.badge.busted{background:var(--busted);color:var(--ink)}
.badge.dark{color:#5B5A57;border:1px solid var(--line)}
.slate .num{font-family:var(--mono);font-size:11px;color:#5B5A57;letter-spacing:.16em}
/* episode page */
.article{max-width:760px;margin:0 auto;padding:70px 24px 40px}
.article h1{font-size:clamp(38px,5.4vw,64px)}
.article .lead{font-size:22px;color:var(--bone);margin-top:26px}
.article p{margin:20px 0;color:#CFCCC5}
.rule{border:0;border-top:1px solid var(--line);margin:44px 0}
.buy{border:1px solid var(--line);background:var(--panel);padding:30px;margin:50px 0}
.buy h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:24px;letter-spacing:.02em}
.buy ul{margin:16px 0 22px 18px;color:#CFCCC5}
.buy li{margin:8px 0}
.price{font-family:var(--disp);font-size:30px;margin-right:18px;vertical-align:middle}
.fine{font-family:var(--mono);font-size:11.5px;color:var(--dim);line-height:1.8}
/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 60px;color:var(--dim)}
footer .cols{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media(max-width:900px){.wall{grid-template-columns:repeat(2,1fr)}.band{grid-template-columns:1fr}.band .cell{border-left:0;border-top:1px solid var(--line)}}

/* ---- MOTION LAYER (vanilla, reduced-motion safe) ---- */
@media(prefers-reduced-motion:no-preference){
 .draw path{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2.2s ease-out forwards}
 .draw path:nth-child(2){animation-delay:.4s}
 @keyframes draw{to{stroke-dashoffset:0}}
 .rev{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
 .rev.in{opacity:1;transform:none}
 .slate.rev{transition-delay:calc(var(--i,0)*70ms)}
 .stamp{animation:none;opacity:0}
 .stamp.in{animation:stamp .45s cubic-bezier(.2,1.6,.4,1) both}

}

/* mobile: stamp overlays hero thumbnail as a broadcast bug */
@media(max-width:700px){
 .hero .stamp{position:absolute;z-index:2;margin:0;top:8px;right:8px;font-size:18px}
 .hero .thumbwrap{position:relative;margin-top:20px}
}

/* ---- SEASON RAIL (research-backed: manual scroll-snap, right-edge bleed, visible arrows, no autoplay) ---- */
.railwrap{position:relative;max-width:1240px;margin:0 auto;padding:0 24px}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 12% 18px 2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.rail::-webkit-scrollbar{height:6px}.rail::-webkit-scrollbar-thumb{background:var(--line)}
.card{flex:0 0 264px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column}
.card.answered{background:#141216}.card.answered:hover{outline:1px solid var(--busted)}
.card .q{font-size:14.5px;line-height:1.35;color:var(--dim)}
.card.answered .q{color:var(--bone)}
.railbtn{position:absolute;top:38%;z-index:2;background:#0A0A0BE6;color:var(--bone);border:1px solid var(--line);width:40px;height:40px;font-size:16px;cursor:pointer}
.railbtn:hover{border-color:var(--busted);color:var(--busted)}
.railbtn.prev{left:6px}.railbtn.next{right:6px}
.skiprail{position:absolute;left:-9999px}.skiprail:focus{left:24px;top:-34px;background:var(--amber);color:var(--ink);padding:6px 10px;font-family:var(--mono);font-size:11px;z-index:3}
@media(max-width:700px){.card{flex-basis:74vw}.railbtn{display:none}}

/* logo perk: once on load, subtle */
@media(prefers-reduced-motion:no-preference){
.doghead{transform-origin:34px 58px;animation:perkonce 1s ease-in-out .8s 1}
@keyframes perkonce{0%,100%{transform:rotate(0)}45%,70%{transform:rotate(-6deg)}}
}

/* ---- SEASON-FIRST REDESIGN ---- */
.masthead{padding:64px 0 40px;border-bottom:1px solid var(--line)}
.masthead h1{font-size:clamp(40px,6.4vw,84px)}
.masthead .dek{max-width:56ch;color:var(--dim);margin-top:18px;font-size:20px}
.latestline{margin-top:26px}
.latestline a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--bone);border:1px solid var(--line);padding:12px 16px;display:inline-block}

.minibadge{background:var(--busted);color:var(--ink);padding:2px 7px;margin-left:4px}
#season{padding:44px 0 8px}
.card{flex:0 0 300px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none}
.icfield{display:grid;place-items:center;aspect-ratio:16/10;background:#9CCBF0;border-bottom:1px solid var(--line)}
.icfield svg{width:82%;height:82%}
.cardmeta{padding:14px 16px;display:flex;flex-direction:column;gap:9px;flex:1;justify-content:space-between}
/* Option A: dog moves on load; icons move on hover/focus with red outline; mobile = once in view */
@media(prefers-reduced-motion:no-preference){
.rail .red{animation-duration:.9s;animation-timing-function:ease;animation-fill-mode:both;animation-iteration-count:1;animation-play-state:paused}
.card:hover,.card:focus-visible{outline:2px solid var(--busted)}
.card:hover .red,.card:focus-visible .red,.card.play .red{animation-play-state:running}
.ic1 .r1{stroke-dasharray:120;stroke-dashoffset:120;animation-name:draw1}
@keyframes draw1{to{stroke-dashoffset:0}}
.ic2 .r2{animation-name:rungdrop}
@keyframes rungdrop{0%{transform:none;opacity:1}55%{transform:translateY(3px) rotate(-5deg)}100%{transform:translateY(20px) rotate(-12deg);opacity:0}}
.ic3 .r3{stroke-dasharray:110;stroke-dashoffset:110;animation-name:draw1}
.ic4 .r4{transform-origin:122px 40px;animation-name:tagswing}
@keyframes tagswing{0%{transform:rotate(0)}35%{transform:rotate(14deg)}70%{transform:rotate(-8deg)}100%{transform:rotate(0)}}
.ic5 .r5{animation-name:lotpop}
@keyframes lotpop{0%{transform:translate(-46px,0) scale(0)}70%{transform:translate(-46px,0) scale(1.5)}100%{transform:translate(-46px,0) scale(1)}}
.ic6 .r6{transform-origin:80px 50px;animation-name:slicein}
@keyframes slicein{from{transform:rotate(-90deg);opacity:0}to{transform:rotate(0);opacity:1}}
.ic7 .r7{stroke-dasharray:130;stroke-dashoffset:130;animation-name:draw1}
.ic7 .r7b{animation-name:lotpop2}
@keyframes lotpop2{0%,70%{opacity:0}100%{opacity:1}}
.ic8 .r8{transform-origin:80px 50px;animation-name:sweep}
@keyframes sweep{from{transform:rotate(0)}to{transform:rotate(300deg)}}
.ic9 .r9t{transform-origin:80px 30px;animation-name:tip}
@keyframes tip{0%{transform:rotate(0)}60%{transform:rotate(-8deg)}100%{transform:rotate(-6deg)}}
.ic10 .r10{animation-name:lotpop2}
}
@media(max-width:700px){.card{flex-basis:76vw}}

@media(hover:none){ .card.play .red{animation-play-state:running} }
/* tighter masthead — carousel up */
.masthead{padding:40px 0 26px}
.masthead h1{font-size:clamp(34px,5vw,64px)}
.masthead .dek{display:none}
#season{padding:26px 0 8px}

/* dog barks on load: perk, then two red bark arcs pop once */
.logotile svg{overflow:visible}
.bark path{opacity:0}
@media(prefers-reduced-motion:no-preference){
.bark path{animation:bark .8s ease-out 1.5s 1}
.bark path:nth-child(2){animation-delay:1.62s}
@keyframes bark{0%{opacity:0;transform:translateX(-3px)}30%{opacity:1}100%{opacity:0;transform:translateX(4px)}}
}
/* season rail sits right under the ticker now */
#season{padding:22px 0 8px}
/* 3) BOLDER scroll text: ticker + card questions */
.ticker .wrap{font-size:14px;font-weight:500;color:#D8D5CE;letter-spacing:.12em;padding-top:11px;padding-bottom:11px}
.ticker i{color:#8A8880}
.card .q{font-size:16px;font-weight:500;color:#E4E1DA;line-height:1.35}
.card.answered .q{color:var(--bone)}
.cardmeta .num{font-size:12px;color:#8A8880}

/* files & functionality rail */
#files{padding:34px 0 8px;border-top:1px solid var(--line)}
.filecard{flex:0 0 340px}
.filecard.live{background:#141216;outline:1px solid var(--amber)}
.feat{margin:4px 0 14px 16px;padding:0;color:#C9C6BF;font-size:13.5px;line-height:1.55}
.feat li{margin:7px 0}
.feat b{color:var(--bone)}
.filecard.placeholder{opacity:.62;justify-content:flex-start}
.filecard .btn.primary{align-self:flex-start;display:inline-flex;align-items:center}
@media(max-width:700px){.filecard{flex-basis:82vw}}

/* THE FACT BOARD (split-flap style) */
#fboard{display:block;background:var(--panel);border:1px solid var(--line);padding:30px 28px;text-decoration:none;position:relative}
#fboard:hover{outline:2px solid var(--busted)}
.fb-fact{display:block;font-family:var(--mono);font-size:clamp(17px,2.6vw,26px);font-weight:500;line-height:1.5;color:var(--bone);letter-spacing:.02em;min-height:3.2em}
.fb-meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--amber)}
.fb-cta{color:var(--bone);border:1px solid var(--line);padding:7px 12px}
#fboard:hover .fb-cta{background:var(--busted);color:var(--ink);border-color:var(--busted)}

/* unified rollover: one red, everywhere */
a:hover .badge.dark{border-color:var(--busted);color:var(--busted)}
.card:hover,.card:focus-visible,#fboard:hover,#fboard:focus-visible{outline:2px solid var(--busted)}
.filecard.live:hover{outline:2px solid var(--busted)}

/* about-the-show: red bounding box */
.aboutbox{border:1px solid var(--line);background:var(--panel);padding:34px 32px}
.aboutbox:hover,.aboutbox:focus-within{border-color:var(--busted);outline:1px solid var(--busted)}
@media(max-width:700px){.aboutbox{padding:24px 18px}}

/* logo rollover = same motion behavior as thumbnails: perk + bark on hover, replayable */
@media(prefers-reduced-motion:no-preference){
.brand:hover .doghead,.brand:focus-visible .doghead{animation:perkonce 1s ease-in-out 0s 1}
.brand:hover .bark path,.brand:focus-visible .bark path{animation:bark .8s ease-out .35s 1}
.brand:hover .bark path:nth-child(2),.brand:focus-visible .bark path:nth-child(2){animation-delay:.47s}
}

/* ===== CROSS-DEVICE REFINEMENT PASS (audit items 1-6) ===== */

/* 1) Fact board: reserve stable height — no layout shift on rotation */
.fb-fact{min-height:4.8em}
@media(max-width:700px){.fb-fact{min-height:7.5em;font-size:16px}}

/* 2) Touch targets to 44px: nav links + WATCH chip */
nav .links a{display:inline-block;padding:12px 2px;margin-left:22px}
.fb-cta{padding:12px 16px}
@media(max-width:700px){
 .fb-meta{flex-direction:column;align-items:flex-start;gap:12px}
 .btn{padding:14px 20px}
}

/* 3) Tablet/touch: first tap fires motion + red outline (JS adds .play) */
.card.play{outline:2px solid var(--busted)}

/* 4) Keyboard: all cards focusable (tabindex via JS), focus ring consistent */
.card:focus{outline:2px solid var(--busted)}

/* 5) Files rail placeholders: condensed */
.filecard.placeholder{flex:0 0 190px;opacity:.55}
.filecard.placeholder .q{font-size:13.5px}
@media(max-width:700px){.filecard.placeholder{flex-basis:52vw}}



/* rail arrows: comfortable touch size where shown */
.railbtn{width:44px;height:44px}

/* ===== CONTAINED SCROLLERS: rail lives inside a framed, page-aligned box ===== */
.railwrap{max-width:1200px;padding:0 24px}
.railbox{border:1px solid var(--line);background:#0D0D0F;position:relative;overflow:hidden}
.rail{padding:16px 16px 18px;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-color:#3A3A40 #0D0D0F}
.railbtn{top:calc(50% - 22px)}
.railbtn.prev{left:10px}.railbtn.next{right:10px}
/* the peek stays: cards don't divide evenly into the box width, so the next card shows cut at the edge */
/* ===== SLOGAN ===== */
.slogan{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;margin-left:14px;padding-left:14px;border-left:1px solid var(--line)}
@media(max-width:900px){.slogan{display:none}}

/* ===== TICKER v2: single-track marquee (both copies in ONE animated track = seamless, no drift) ===== */
.ticker .wrap{padding-left:0;padding-right:0;display:block}
.ticktrack{display:inline-flex;white-space:nowrap;will-change:transform}
.tickrow{display:inline-flex;gap:34px;padding-right:34px}
@media(prefers-reduced-motion:no-preference){
 .ticktrack{animation:crawl 30s linear infinite}
 @keyframes crawl{to{transform:translateX(-50%)}}
}

/* ===== BLEED: soft fade at scroll-box edges — content dissolves, never chops ===== */
.railbox::before,.railbox::after{content:"";position:absolute;top:0;bottom:0;width:34px;z-index:1;pointer-events:none}
.railbox::before{left:0;background:linear-gradient(90deg,#0D0D0F 15%,transparent)}
.railbox::after{right:0;background:linear-gradient(270deg,#0D0D0F 15%,transparent)}
.rail{padding:18px 34px 20px}
.wallhead h2{white-space:normal;overflow-wrap:break-word}
.card .q{overflow:visible;white-space:normal}
/* ===== CONTRIBUTE FORM ===== */
.formbox{border:1px solid var(--line);background:var(--panel);padding:34px 32px;max-width:680px}
.formbox:hover,.formbox:focus-within{border-color:var(--busted)}
.formbox label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:20px 0 8px}
.formbox select,.formbox input,.formbox textarea{width:100%;background:#0D0D0F;border:1px solid var(--line);color:var(--bone);font-family:var(--body);font-size:16px;padding:13px 14px}
.formbox textarea{min-height:150px;resize:vertical}
.formbox select:focus,.formbox input:focus,.formbox textarea:focus{outline:2px solid var(--busted);border-color:var(--busted)}
.formbox .btn.primary{margin-top:26px;cursor:pointer;font-size:13px}
/* ===== SOCIAL RAIL (about) ===== */
.soc{flex:0 0 150px;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);padding:20px 12px;text-decoration:none;scroll-snap-align:start}
.soc:hover,.soc:focus-visible{outline:2px solid var(--busted)}
.soc .tile{display:grid;place-items:center;width:56px;height:56px;background:#9CCBF0;border-radius:12px}
.soc .h{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.soc:hover .h{color:var(--busted)}

/* ===== RESPONSIVE TITLE GUARANTEE: headers + kickers never collide, overflow, or clip ===== */
.wallhead{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:8px;column-gap:16px}
.wallhead h2{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:break-word}
.wallhead .kicker{flex:0 1 auto;max-width:100%;white-space:normal;line-height:1.9;text-align:right}
@media(max-width:700px){
 .wallhead{flex-direction:column;align-items:flex-start}
 .wallhead .kicker{text-align:left;font-size:11px}
 h2{font-size:26px}
}
.kicker{white-space:normal;overflow-wrap:break-word}
h1,h2,h3{min-width:0;overflow-wrap:break-word}
.article h1{max-width:100%}
/* absolute guard: the page itself never scrolls sideways */
html,body{overflow-x:clip}

/* ============================================================
   GLOBAL BOUNDING BOX — one container law, applied over everything.
   Every section aligns to the SAME box as the header. Final word in the cascade.
   ============================================================ */
:root{--page-max:1200px;--gutter:clamp(16px,4vw,28px)}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip;max-width:100%}
body{margin:0}
/* THE one container: header, rails, board, articles, footer — identical edges */
.wrap,.railwrap,.article{width:100%;max-width:var(--page-max);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.article{max-width:var(--page-max);padding-top:54px;padding-bottom:36px}
.article p,.article .lead,.article ul{max-width:72ch}
.article h1{max-width:24ch}
/* rails: the box fills the container exactly — flush to the same edges as the nav */
.railbox{width:100%}
.rail{max-width:100%}
/* sections never impose their own widths */
section{width:100%;max-width:100%}
#about-teaser{max-width:var(--page-max)}
.aboutbox,.formbox{max-width:100%}
.formbox{max-width:680px}
/* every text element may wrap; nothing may push the box */
h1,h2,h3,p,span,a,li,label{min-width:0;overflow-wrap:break-word}
img,svg,video,iframe{max-width:100%}
/* wallheads sit inside the container like everything else */
.wallhead{width:100%;max-width:var(--page-max);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
@media(max-width:700px){
 :root{--gutter:16px}
 .article h1{max-width:100%}
}

/* ============================================================
   CAROUSEL EXACT-FIT: whole cards only — nothing ever cut off.
   Cards size themselves so a whole number fits the box at every width.
   Scroll affordance moves to always-visible arrows + counter.
   ============================================================ */
.rail{gap:14px;padding:18px;scroll-padding:18px}
.card{flex:0 0 calc((100% - 42px)/4)}                 /* 4-up desktop */
@media(max-width:1100px){.card{flex:0 0 calc((100% - 28px)/3)}}   /* 3-up */
@media(max-width:850px){.card{flex:0 0 calc((100% - 14px)/2)}}    /* 2-up */
@media(max-width:560px){.card{flex:0 0 100%}}                      /* 1-up */
/* live file card spans two units where room allows */
.filecard.live{flex:0 0 calc(((100% - 42px)/4)*2 + 14px)}
@media(max-width:1100px){.filecard.live{flex:0 0 calc(((100% - 28px)/3)*2 + 14px)}}
@media(max-width:850px){.filecard.live{flex:0 0 100%}}
.filecard.placeholder{flex:0 0 calc((100% - 42px)/4)}
@media(max-width:1100px){.filecard.placeholder{flex:0 0 calc((100% - 28px)/3)}}
@media(max-width:850px){.filecard.placeholder{flex:0 0 calc((100% - 14px)/2)}}
@media(max-width:560px){.filecard.placeholder{flex:0 0 100%}}
/* socials: exact-fit too */
.soc{flex:0 0 calc((100% - 56px)/5)}
@media(max-width:1100px){.soc{flex:0 0 calc((100% - 42px)/4)}}
@media(max-width:850px){.soc{flex:0 0 calc((100% - 28px)/3)}}
@media(max-width:560px){.soc{flex:0 0 calc((100% - 14px)/2)}}
/* arrows: always visible now (they carry the scroll cue at every size) */
.railbtn{display:grid;place-items:center}
/* fade masks: lighter — only hint mid-drag partials, never darken resting cards */
.railbox::before,.railbox::after{width:18px}

/* ===== VERDICT ICON SYSTEM + WATCH NOW ===== */
.cardfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}
.vchip{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px}
.vchip.busted{background:var(--busted)}
.vchip.confirmed{background:var(--confirmed)}
.vchip.likely{background:var(--likely)}
.vchip.inconclusive{background:var(--inconclusive)}
.vchip.pending{background:transparent;border:1px solid var(--line)}
.watch{font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:10px 12px;border:1px solid var(--line);text-decoration:none;color:var(--bone);white-space:nowrap}
.watch.live:hover,.watch.live:focus-visible,.card:hover .watch.live{background:var(--busted);border-color:var(--busted);color:var(--ink)}
.watch.soon{opacity:.45;color:var(--dim);pointer-events:none}
/* verdict icon reference (future values): CONFIRMED=check, LIKELY=slanted check, INCONCLUSIVE=dash, BUSTED=cross */

/* ===== VERDICT WORD + ROLLOVER ANIMATION ===== */
.cardfoot{justify-content:flex-start}
.cardfoot .watch{margin-left:auto}
.vlabel{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em}
@media(prefers-reduced-motion:no-preference){
.card:hover .vchip,.card:focus-visible .vchip,.card.play .vchip{animation:vstamp .4s cubic-bezier(.2,1.6,.4,1) 1}
@keyframes vstamp{from{transform:scale(1.9) rotate(-8deg)}to{transform:scale(1) rotate(0)}}
.card:hover .vlabel,.card:focus-visible .vlabel,.card.play .vlabel{animation:vslide .45s ease .08s both 1}
@keyframes vslide{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
}