:root{--bg:#030307;--panel:#101015;--text:#fff;--muted:#b9b9c7;--music:#8f0a81;--sport:#ffc82f;--network:#2334c8;--accent:#7b35ff;--line:rgba(255,255,255,.12);--radius:26px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 20% 0,rgba(124,53,255,.18),transparent 35%),linear-gradient(180deg,#05050a,#000);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}a{color:inherit;text-decoration:none}img{max-width:100%}.wrap{width:min(1180px,92vw);margin:auto}.topbar{position:sticky;top:0;z-index:50;background:rgba(2,2,5,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;justify-content:space-between;min-height:78px}.brand img{width:170px;display:block}.links{display:flex;gap:28px;align-items:center;font-weight:800;font-size:14px}.links a{opacity:.9}.links a.active,.links a:hover{color:var(--accent)}.menu{display:none;background:#15151d;border:1px solid var(--line);color:#fff;border-radius:14px;padding:10px 12px}.hero{min-height:78vh;display:grid;align-items:center;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#030307 0%,rgba(3,3,7,.72) 44%,rgba(3,3,7,.2));z-index:-1}.hero-bg{position:absolute;right:0;top:0;bottom:0;width:62%;background:linear-gradient(135deg,rgba(156,10,141,.45),rgba(255,202,44,.28)),url('https://images.unsplash.com/photo-1525517450344-d08c6a528e3c?auto=format&fit=crop&w=1200&q=70') center/cover;opacity:.55;z-index:-2}.kicker{color:var(--accent);letter-spacing:.16em;font-weight:900;text-transform:uppercase}.title{font-size:clamp(44px,8vw,96px);line-height:.95;margin:14px 0;font-weight:1000;letter-spacing:-.06em}.grad{background:linear-gradient(90deg,var(--accent),#b68cff);-webkit-background-clip:text;color:transparent}.lead{font-size:clamp(17px,2vw,22px);color:#ececf3;line-height:1.7;max-width:580px}.btns{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 22px;border-radius:14px;font-weight:900;border:1px solid var(--line)}.btn.primary{background:linear-gradient(135deg,var(--accent),#5c18d8);border:none}.btn.music{background:linear-gradient(135deg,var(--music),#cb35bd);border:none}.btn.sport{background:linear-gradient(135deg,var(--sport),#f7a800);color:#080808;border:none}.section{padding:76px 0}.center{text-align:center}.section h2{font-size:clamp(30px,4vw,52px);margin:0 0 12px}.muted{color:var(--muted);line-height:1.7}.channels{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:38px}.card{position:relative;overflow:hidden;border-radius:var(--radius);background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--line);padding:34px;min-height:430px}.card.music{border-color:rgba(156,10,141,.55);box-shadow:0 0 40px rgba(156,10,141,.16)}.card.sport{border-color:rgba(255,202,44,.55);box-shadow:0 0 40px rgba(255,202,44,.11)}.card-logo{height:82px;width:auto;object-fit:contain;object-position:left;margin-bottom:28px}.card h3{font-size:32px;margin:0 0 16px}.card p{max-width:350px}.card:after{content:"";position:absolute;right:-10%;bottom:-20%;width:55%;height:80%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 65%);pointer-events:none}.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.feature{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:20px;padding:22px}.feature i{font-size:28px;color:var(--accent);margin-bottom:16px}.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:start}.player-box{background:#07070b;border:1px solid var(--line);border-radius:24px;padding:14px}.side-list{display:grid;gap:14px}.mini{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:18px;padding:14px}.mini i{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.08)}.music-page{--accent:var(--music)}.sport-page{--accent:var(--sport)}.sport-page .grad{background:linear-gradient(90deg,var(--sport),#fff0a8);-webkit-background-clip:text;color:transparent}.social{display:flex;gap:12px;flex-wrap:wrap}.footer{margin-top:64px}.bottom-nav{display:none}.form{display:grid;gap:14px;max-width:700px;margin:30px auto 0}.form input,.form textarea{width:100%;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:#0b0b10;color:#fff}.form textarea{min-height:150px}.theme-music{color:var(--music)}.theme-sport{color:var(--sport)}media-player{width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;--media-brand:var(--accent)}@media(max-width:900px){.links{position:fixed;inset:78px 14px auto 14px;display:none;flex-direction:column;align-items:stretch;background:#101015;border:1px solid var(--line);border-radius:22px;padding:16px}.links.show{display:flex}.links a{padding:14px;border-radius:14px;background:rgba(255,255,255,.04)}.menu{display:block}.hero{min-height:auto;padding:60px 0 34px}.hero-bg{width:100%;opacity:.35}.channels,.grid{grid-template-columns:1fr}.features{grid-template-columns:repeat(2,1fr)}.brand img{width:140px}.card{min-height:360px}.bottom-nav{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:rgba(13,13,18,.92);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:24px;padding:8px}.bottom-nav a{display:grid;place-items:center;gap:4px;font-size:11px;color:#ddd;padding:8px;border-radius:18px}.bottom-nav a.active{background:rgba(123,53,255,.38);color:#fff}}@media(max-width:560px){.title{font-size:48px}.btn{width:100%;justify-content:center}.features{grid-template-columns:1fr 1fr;gap:10px}.feature{padding:16px;text-align:center}.feature p{font-size:12px}.card{padding:22px;border-radius:22px}.card-logo{height:60px}.section{padding:52px 0}.nav{min-height:70px}.links{inset:70px 10px auto 10px}.hero{padding-top:42px}.lead{font-size:16px}}

/* ===========================================================================
   Channel expansion — Gospel, News and Nago FM radio.
   Appended so the original block above stays as delivered.
   =========================================================================== */

:root{--gospel:#8a0f86;--gospel-ink:#8f0a81;--news:#f91f2d;--radio:#1fa2ff}

/* per-page accent, matching how .music-page / .sport-page already work */
.gospel-page{--accent:var(--gospel)}
.news-page{--accent:var(--news)}
.radio-page{--accent:var(--radio)}
.gospel-page .grad{background:linear-gradient(90deg,var(--gospel),#ffe89b);-webkit-background-clip:text;color:transparent}
.news-page .grad{background:linear-gradient(90deg,var(--news),#ff9da3);-webkit-background-clip:text;color:transparent}
.radio-page .grad{background:linear-gradient(90deg,var(--radio),#9fd8ff);-webkit-background-clip:text;color:transparent}

.theme-gospel{color:var(--gospel)}
.theme-news{color:var(--news)}
.theme-radio{color:var(--radio)}

.btn.gospel{background:linear-gradient(135deg,var(--gospel),#e2a600);color:#2a0726;border:none}
.btn.news{background:linear-gradient(135deg,var(--news),#c00d19);border:none}
.btn.radio{background:linear-gradient(135deg,var(--radio),#0b6fb8);border:none}

.card.gospel{border-color:rgba(255,200,47,.55);box-shadow:0 0 40px rgba(255,200,47,.12)}
.card.news{border-color:rgba(249,31,45,.55);box-shadow:0 0 40px rgba(249,31,45,.13)}
.card.radio{border-color:rgba(31,162,255,.55);box-shadow:0 0 40px rgba(31,162,255,.13)}

/* four channels instead of two — let the grid decide how many fit */
.channels{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.channels .card{min-height:auto;padding:28px}
.channels .card h3{font-size:26px}
.card-title{display:flex;align-items:center;gap:12px;margin-bottom:22px;min-height:82px}
.card-title i{font-size:38px}
.card-title span{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:var(--muted)}

/* a channel with no stream yet, instead of an empty broken player */
.soon{display:grid;place-items:center;gap:12px;text-align:center;aspect-ratio:16/9;border-radius:18px;background:rgba(255,255,255,.04);border:1px dashed var(--line);padding:24px}
.soon i{font-size:38px;color:var(--accent)}
.soon b{font-size:20px}
.soon p{max-width:320px;margin:0}

/* Nago FM */
.stations{display:grid;gap:12px}
.station{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:18px;padding:14px;color:inherit;font:inherit}
.station:hover{border-color:var(--accent)}
.station>i:first-child{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.08);color:var(--accent)}
.station span{display:grid;gap:2px;flex:1;min-width:0}
.station small{font-size:12.5px}
.station .cue{opacity:.45;font-size:13px}
.station.playing{border-color:var(--accent);background:rgba(31,162,255,.12)}
.station.playing .cue{opacity:1;color:var(--accent)}
.station.off{opacity:.5;cursor:not-allowed}
.station.off:hover{border-color:var(--line)}

.radio-deck{background:#07070b;border:1px solid var(--line);border-radius:24px;padding:22px;display:grid;gap:16px;position:sticky;top:100px}
.radio-deck .np{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:900}
.radio-deck b{font-size:24px;line-height:1.2}
.radio-deck audio{width:100%}

/* five destinations in the mobile bar now, not four */
@media(max-width:900px){
  .bottom-nav{grid-template-columns:repeat(6,1fr)}
  .bottom-nav a{font-size:9.5px;padding:8px 2px;gap:3px}
  .bottom-nav a i{font-size:15px}
  .radio-deck{position:static}
}

/* the generated markup has no whitespace between <i> and <b>, so these need
   to be block-level to keep the stacked look the original layout relied on */
.feature i{display:block}
.card-title{min-height:auto;margin-bottom:20px}
.card-title i{font-size:34px}

/* The logo files are square canvases with the wordmark centred and a lot of
   built-in whitespace, so they have to be sized by width — sizing by height
   shrank the actual mark to nothing. Negative margins claw back the padding
   baked into the artwork. */
.channels .card-logo{display:block;width:min(74%,190px);height:auto;object-fit:contain;
  margin:-28px auto -18px;object-position:center}
.hero .channel-logo{display:block;width:min(300px,72vw);height:auto;margin:-40px 0 -26px}

/* ===========================================================================
   Persistent shell — ticker, nav dropdowns, player bar, station tiles,
   and the now-playing artist panel.
   =========================================================================== */

/* ---- ticker --------------------------------------------------------------- */
/* The left end of this gradient was 22% opaque with no backdrop-filter, so
   the article scrolling underneath showed straight through the ticker —
   headlines and photographs legible behind the song titles. .topbar gets away
   with being translucent because blur(18px) turns it into frosted glass; the
   ticker had the transparency without the blur. Same treatment as the topbar
   now, and a firmer floor under the left end. */
.ticker{position:sticky;top:78px;z-index:45;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(35,52,200,.55),rgba(3,3,7,.88));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);overflow:hidden;height:44px}
.ticker.closed{height:0;border-bottom:0}
.tk-track{display:flex;align-items:center;gap:0;white-space:nowrap;
  animation:tk 46s linear infinite;will-change:transform}
.ticker:hover .tk-track{animation-play-state:paused}
.tk-item{display:inline-flex;align-items:center;gap:12px;padding:0 26px;
  font-size:13.5px;font-weight:700;color:#e8e8f2}
.tk-item i{font-size:5px;color:var(--accent);opacity:.8}
.tk-close{position:absolute;right:10px;top:6px;width:32px;height:32px;border-radius:50%;
  background:#15151d;border:1px solid var(--line);color:#fff;display:grid;place-items:center;font-size:11px}
@keyframes tk{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tk-track{animation:none}}

/* ---- nav dropdowns -------------------------------------------------------- */
.has-drop{position:relative}
.has-drop>a{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.has-drop>a:after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.drop{position:absolute;left:0;top:calc(100% + 14px);min-width:246px;display:none;
  background:#101015;border:1px solid var(--line);border-radius:18px;padding:8px;
  box-shadow:0 26px 60px rgba(0,0,0,.55)}
.has-drop.open .drop{display:grid;gap:2px}
.drop a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;
  font-size:13.5px;font-weight:700;opacity:.92}
.drop a:hover{background:rgba(255,255,255,.06);opacity:1}
.drop a i{width:26px;text-align:center;font-size:15px}
.drop .drop-head{padding:9px 12px 4px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);font-weight:900}

/* ---- station tiles -------------------------------------------------------- */
.station-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:22px 14px}
.station-tile{display:grid;justify-items:center;gap:9px;background:none;border:0;color:inherit;
  font:inherit;cursor:pointer;padding:6px 4px;border-radius:18px}
.station-tile:hover{background:rgba(255,255,255,.04)}
.st-disc{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:32px;
  color:#08080c;background:var(--disc);border:3px solid transparent;transition:transform .18s ease}
.station-tile:hover .st-disc{transform:translateY(-3px)}
/* The chosen station, and the sounding one.
   The only rule here targeted .st-disc — the fallback icon. Every radio station
   has a logo, so they all render .st-mark instead, and the highlight landed on
   an element that was not on the page: even while playing, nothing lit up. */
.station-tile.is-selected{background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.station-tile.is-selected .st-name{color:#fff}
.station-tile.is-selected .st-disc,
.station-tile.is-selected .st-mark{outline:2px solid rgba(255,255,255,.5);outline-offset:3px}
.station-tile.playing .st-disc,
.station-tile.playing .st-mark{outline-color:#fff;
  box-shadow:0 0 0 5px rgba(255,255,255,.14)}
/* A small moving cue, so "playing" is distinguishable from "chosen" at a
   glance rather than by comparing two shades of white. */
.station-tile.playing .st-name:after{content:"";display:inline-block;width:6px;height:6px;
  margin-left:8px;border-radius:50%;background:#4ade80;vertical-align:middle;
  animation:stpulse 1.6s ease-in-out infinite}
@keyframes stpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){
  .station-tile.playing .st-name:after{animation:none}
}
.st-name{font-weight:800;font-size:13.5px;text-align:center;line-height:1.3}
.st-tag{font-size:11.5px;text-align:center}
.station-tile.off{opacity:.45;cursor:not-allowed}
.station-tile.off:hover .st-disc{transform:none}

/* ---- now-playing artist panel --------------------------------------------- */
.artist-panel{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:grid;gap:16px}
.artist-panel .ap-art{width:100%;aspect-ratio:16/9;border-radius:18px;object-fit:cover;
  background:#0b0b10;border:1px solid var(--line)}
.artist-panel h3{margin:0;font-size:26px}
.ap-track{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:900}
.artist-panel p{margin:0}
.ap-empty{color:var(--muted);font-size:14.5px}

/* ---- player bar ----------------------------------------------------------- */
.playerbar{position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(10,10,15,.94);backdrop-filter:blur(20px);border-top:1px solid var(--line)}
.playerbar[hidden]{display:none}
.pb-inner{width:min(1180px,94vw);margin:auto;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:12px 0}
.pb-now{display:flex;align-items:center;gap:14px;min-width:0}
.pb-art{width:52px;height:52px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--accent);font-size:19px}
.pb-meta{display:grid;min-width:0}
.pb-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:900}
.pb-title{font-size:16px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-sub{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-play{width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;font-size:20px;color:#fff;
  background:linear-gradient(135deg,var(--radio),#0b6fb8);display:grid;place-items:center}
.pb-play:hover{filter:brightness(1.08)}
.pb-right{display:flex;align-items:center;justify-content:flex-end;gap:12px}
.pb-mute{background:none;border:0;color:#dcdce6;font-size:17px;cursor:pointer}
.pb-vol{width:104px;accent-color:var(--radio)}
.pb-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:13px;font-weight:800}
.pb-chip i{color:var(--radio)}
body.has-playerbar .footer{padding-bottom:130px}

@media(max-width:900px){
  .ticker{top:70px}
  .links .has-drop>a:after{margin-left:auto}
  .drop{position:static;display:none;box-shadow:none;background:rgba(255,255,255,.03);margin-top:6px}
  .playerbar{bottom:84px;border-radius:20px;left:12px;right:12px;border:1px solid var(--line)}
  .pb-inner{grid-template-columns:1fr auto;gap:12px;padding:10px 14px}
  .pb-right{display:none}
  .pb-play{width:50px;height:50px;font-size:17px}
  .station-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:18px 10px}
  .st-disc{width:74px;height:74px;font-size:26px}
  body.has-playerbar .footer{padding-bottom:190px}
}

/* ===========================================================================
   Prayer — request form and the prayer wall.
   =========================================================================== */

.seg{display:inline-flex;padding:5px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid var(--line);gap:4px}
.seg button{border:0;cursor:pointer;font:inherit;font-weight:800;font-size:14px;color:#dcdce6;
  background:none;padding:11px 22px;border-radius:999px}
.seg button.on{background:var(--accent);color:#2a0726}
.pastor{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:12px 22px;
  border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);
  font-weight:800;font-size:14px;cursor:pointer;color:inherit}
.pastor[disabled]{opacity:.45;cursor:not-allowed}

.prayer-card{background:#0c0c12;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;display:grid;gap:22px;max-width:640px;margin:0 auto}
.pf-label{font-weight:800;font-size:14px;margin-bottom:9px;display:block}
.prayer-card textarea,.prayer-card input,.prayer-card select{width:100%;padding:15px 16px;
  border-radius:14px;border:1px solid var(--line);background:#08080d;color:#fff;font:inherit}
.prayer-card textarea{min-height:132px;resize:vertical}
.prayer-card select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8b8b9b 50%),
  linear-gradient(135deg,#8b8b9b 50%,transparent 50%);
  background-position:calc(100% - 21px) 22px,calc(100% - 15px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pf-rule{height:1px;background:var(--line);margin:2px 0}

.switch{display:flex;align-items:center;gap:14px;cursor:pointer}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{width:46px;height:26px;flex:none;border-radius:999px;background:#2a2a36;
  border:1px solid var(--line);position:relative;transition:background .18s ease}
.switch .track:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:50%;background:#fff;transition:transform .18s ease}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track:after{transform:translateX(20px)}
.switch span{font-size:14px;line-height:1.45}
.pf-note{font-size:13px;color:var(--muted);margin:0}
.pf-submit{width:100%;justify-content:center;padding:17px}
.pf-msg{padding:14px 16px;border-radius:14px;font-size:14px;display:none}
.pf-msg.ok{display:block;background:rgba(23,185,120,.14);border:1px solid rgba(23,185,120,.5)}
.pf-msg.bad{display:block;background:rgba(249,31,45,.12);border:1px solid rgba(249,31,45,.5)}

.wall{display:grid;gap:14px;max-width:720px;margin:0 auto}
.wall-item{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:20px;padding:20px}
.wall-item p{margin:0 0 14px}
.wall-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.wall-who{font-size:12.5px;color:var(--muted)}
.wall-pray{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.06);color:inherit;font:inherit;
  font-weight:800;font-size:13px;cursor:pointer}
.wall-pray.done{background:var(--accent);color:#2a0726;border-color:transparent}
.wall-empty{text-align:center;color:var(--muted);padding:34px 0}

@media(max-width:560px){.pf-grid{grid-template-columns:1fr}.prayer-card{padding:22px}}

/* ---- player bar: artwork, up next, collapse, chips ------------------------ */
.pb-art{overflow:hidden}
.pb-art img{width:100%;height:100%;object-fit:cover;display:block}
.pb-next{display:flex;align-items:center;gap:10px;padding-left:18px;margin-left:6px;
  border-left:1px solid var(--line);min-width:0}
.pb-next[hidden]{display:none}
.pb-next-art{width:38px;height:38px;flex:none;border-radius:10px;overflow:hidden;
  background:rgba(255,255,255,.07);border:1px solid var(--line)}
.pb-next-art img{width:100%;height:100%;object-fit:cover;display:block}
.pb-next-meta{display:grid;min-width:0}
.pb-next-title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.pb-transport{display:flex;align-items:center;gap:12px}
.pb-collapse{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);cursor:pointer;
  background:rgba(255,255,255,.05);color:#dcdce6;font-size:12px;display:grid;place-items:center}
.pb-chip-disc{width:22px;height:22px;border-radius:50%;flex:none;background:var(--radio)}
.pb-tag{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:13px;font-weight:800}
.pb-tag i{color:var(--accent);font-size:11px}

/* collapsed: a slim strip, transport only */
.playerbar.is-collapsed .pb-now,.playerbar.is-collapsed .pb-right{display:none}
.playerbar.is-collapsed .pb-inner{grid-template-columns:1fr;justify-items:center;padding:8px 0}

/* ---- last played ---------------------------------------------------------- */
.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:16px}
.rt{display:grid;gap:7px}
.rt-art{aspect-ratio:1;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.06);
  border:1px solid var(--line);display:block}
.rt-art img{width:100%;height:100%;object-fit:cover;display:block}
.rt-title{font-size:13.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rt-artist{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:900px){
  .pb-next,.pb-collapse{display:none}
  .recent-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
}

/* ---- station picker in the player bar ------------------------------------- */
.pb-chip{cursor:pointer;color:inherit;font:inherit;font-size:13px;font-weight:800}
.pb-chip-caret{font-size:10px;opacity:.6;margin-left:2px}
.pb-picker{position:absolute;right:0;bottom:calc(100% + 12px);width:280px;padding:8px;
  background:#101015;border:1px solid var(--line);border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.6);display:grid;gap:2px;max-height:60vh;overflow:auto}
.pb-picker[hidden]{display:none}
.pk-row{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:14px;
  background:none;color:inherit;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;text-align:left}
.pk-row:hover:not([disabled]){background:rgba(255,255,255,.06)}
.pk-row.on{background:rgba(255,255,255,.1)}
.pk-row[disabled]{opacity:.4;cursor:not-allowed}
.pk-disc{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:14px;color:#08080c}
.pk-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-soon{font-size:11px}
.pb-right{position:relative}
@media(max-width:900px){.pb-picker{width:min(300px,86vw)}}

/* ---- listen page: artist left, stations + last played right --------------- */
.listen-layout{padding-top:44px}
.listen-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.listen-main h2,.listen-side h2{font-size:clamp(24px,3vw,34px);margin:0 0 18px}
.listen-side .station-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:20px 10px}
.listen-side .st-disc{width:80px;height:80px;font-size:28px}
.listen-side .st-name{font-size:12.5px}
.listen-side .st-tag{font-size:11px}
.listen-side .recent-grid{grid-template-columns:repeat(4,1fr);gap:14px}
.listen-side .rt-title{font-size:12.5px}
.listen-side .rt-artist{font-size:11.5px}
@media(max-width:1000px){
  .listen-grid{grid-template-columns:1fr;gap:40px}
  .listen-side .recent-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
}
/* placeholder copy must span the whole track grid, not sit in one column */
.recent-grid > p{grid-column:1 / -1;margin:0}

/* ===========================================================================
   Player bar, matched to the reference: now-playing as a raised card, a
   divider chevron, up next, three round transport buttons, two right pills.
   Overrides the earlier bar rules above.
   =========================================================================== */

.playerbar{background:rgba(8,8,12,.96)}
.pb-inner{grid-template-columns:auto auto 1fr auto 1fr;gap:14px;padding:10px 0;align-items:center}

/* 1 — now playing, in its own card */
.pb-now{background:#15151b;border:1px solid var(--line);border-radius:16px;
  padding:9px 18px 9px 9px;gap:13px;max-width:330px}
.pb-art{width:48px;height:48px;border-radius:11px}
.pb-label{font-size:9.5px;letter-spacing:.14em}
.pb-title{font-size:15px;font-weight:800}
.pb-sub{font-size:12.5px}

/* 2 — the small divider chevron between now playing and up next */
.pb-divider{background:none;border:0;color:#6b6b7a;font-size:11px;cursor:default;padding:0 2px}

/* 3 — up next */
.pb-next{border-left:0;padding-left:0;margin-left:0;gap:11px}
.pb-next-art{width:30px;height:30px;border-radius:8px}
.pb-next-title{font-size:12.5px;color:#b6b6c4;max-width:260px}

/* 4 — three round transport buttons, play the only solid one */
.pb-transport{justify-self:center;gap:14px}
.pb-round{width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:#1c1c24;color:#e6e6ee;font-size:14px;display:grid;place-items:center}
.pb-round:hover{background:#26262f}
.pb-play{width:52px;height:52px;font-size:17px;background:var(--radio);
  box-shadow:0 6px 22px rgba(31,162,255,.32)}
.pb-play:hover{filter:brightness(1.06)}

/* volume: a round button that reveals its slider */
.pb-volwrap{position:relative;display:flex;align-items:center}
.pb-vol{width:0;opacity:0;margin-left:0;transition:width .18s ease,opacity .18s ease,margin-left .18s ease}
.pb-volwrap:hover .pb-vol,.pb-volwrap:focus-within .pb-vol{width:92px;opacity:1;margin-left:10px}

/* 5 — the two pills */
.pb-right{justify-self:end;gap:10px}
.pb-chip{padding:8px 14px 8px 8px;border-radius:999px;background:#15151b;border:1px solid var(--line)}
.pb-chip-disc{width:26px;height:26px}
.pb-tag{padding:10px 16px;border-radius:999px;background:#15151b;border:1px solid var(--line)}
.pb-tag i{color:#9a9aab}

@media(max-width:1100px){
  .pb-next,.pb-divider{display:none}
  .pb-inner{grid-template-columns:1fr auto 1fr}
}
@media(max-width:900px){
  .pb-inner{grid-template-columns:1fr auto;gap:10px;padding:9px 12px}
  .pb-now{background:none;border:0;padding:0;max-width:none}
  .pb-right,.pb-collapse{display:none}
  .pb-play{width:46px;height:46px}
}

/* Grid tracks left gaps when up-next is hidden, so the bar is laid out as
   flex instead: now-playing left, transport pinned to the true centre of the
   viewport, pills hard right — the way the reference reads. */
.pb-inner{display:flex;align-items:center;gap:14px;position:relative;padding:10px 0}
.pb-transport{position:absolute;left:50%;transform:translateX(-50%);justify-self:auto}
.pb-right{margin-left:auto;justify-self:auto}
.pb-next{margin-right:auto}
@media(max-width:900px){
  .pb-transport{position:static;transform:none;margin-left:auto}
}

/* ---- layout B: the station picker leads ----------------------------------- */
.pick-section{padding-top:52px;padding-bottom:34px}
.pick-head{margin-bottom:30px}
.pick-title{font-size:clamp(32px,5vw,54px);line-height:1.05;margin:0 0 10px;font-weight:1000;letter-spacing:-.04em}
.station-grid--hero{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px 16px}
.station-grid--hero .st-disc{width:112px;height:112px;font-size:40px}
.station-grid--hero .st-name{font-size:15px}
.station-grid--hero .st-tag{font-size:12px}
/* in B the two panels below share the width evenly */
.pick-section + .section .listen-grid{grid-template-columns:1fr 1fr}
@media(max-width:900px){
  .station-grid--hero{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:20px 10px}
  .station-grid--hero .st-disc{width:78px;height:78px;font-size:28px}
}

/* ---- artist page ---------------------------------------------------------- */
/* Full-bleed split hero: name on a colour block, photo running to the edge. */
.ar-hero{display:grid;grid-template-columns:1fr 1fr;min-height:380px;align-items:center;
  background:linear-gradient(120deg,#12121a,#0a0a10)}
.ar-head{padding:40px clamp(20px,5vw,72px)}
.ar-photo{position:relative;height:100%;min-height:380px;overflow:hidden;background:#0b0b12}
.ar-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.ar-name{font-size:clamp(38px,6vw,76px);line-height:1;margin:0 0 10px;font-weight:1000;letter-spacing:-.045em}
.ar-fans{margin:0 0 22px;font-size:15px}
.ar-shares{display:flex;gap:10px;flex-wrap:wrap}
.ar-share{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:15px;
  background:rgba(255,255,255,.1);border:1px solid var(--line);color:#fff;cursor:pointer}
.ar-share:hover{background:rgba(255,255,255,.18)}
.ar-body{padding-bottom:20px}
.ar-empty{text-align:center;padding:70px 0;display:grid;gap:14px;justify-items:center}
.ar-empty i{font-size:38px;color:var(--accent)}
.ar-empty h1{margin:0;font-size:34px}

.ar-songs{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;counter-reset:s}
.ar-song{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.045);
  border:1px solid var(--line);border-radius:16px;padding:11px 16px}
.ar-num{width:22px;text-align:center;font-weight:900;color:var(--muted);font-size:14px}
.ar-cover{width:52px;height:52px;flex:none;border-radius:11px;overflow:hidden;
  background:rgba(255,255,255,.07);display:block}
.ar-cover.big{width:100%;height:auto;aspect-ratio:1;border-radius:16px}
.ar-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ar-song-meta{display:grid;min-width:0}
.ar-song-meta b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-song-meta small{font-size:12.5px}

.ar-albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px;margin-top:20px}
.ar-album{display:grid;gap:7px}
.ar-album b{font-size:14px;line-height:1.3}
.ar-album small{font-size:12px}

@media(max-width:760px){
  .ar-hero{grid-template-columns:1fr;min-height:0}
  .ar-photo{min-height:0;aspect-ratio:4/3;order:-1}
  .ar-head{padding:26px 20px 32px}
  .ar-albums{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px}
}

/* ---- artist page: connect-with row --------------------------------------- */
.ar-connect{background:#0a0a10;border-top:1px solid var(--line);padding:46px 0 52px;text-align:center;margin-top:44px}
.ar-connect h2{font-size:clamp(20px,2.6vw,28px);margin:0 0 22px}
.ar-socials{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.ar-social{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:18px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:#fff}
.ar-social:hover{background:rgba(255,255,255,.16)}
/* a search link rather than a confirmed profile — quieter on purpose */
.ar-social.is-search{opacity:.62}
.ar-social.is-search:hover{opacity:1}

/* ---- song page --------------------------------------------------------- */
/* Main column carries the record; the side column carries the video and the
   rest of the artist's catalogue. Collapses to one column on narrow screens,
   video first, because that is what people came for. */
.song-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:38px;padding:38px 0 8px;align-items:start}
.song-main{min-width:0;text-align:center}
.song-cover{width:min(320px,72vw);aspect-ratio:1;margin:0 auto 22px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06)}
.song-cover img{width:100%;height:100%;object-fit:cover;display:block}
.song-title{margin:0 0 6px;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.15;text-wrap:balance}
.song-artist{margin:0 0 4px;font-size:1.05rem}
.song-artist a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.song-meta{margin:0 0 18px;font-size:.92rem}
.song-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.song-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:26px}
.song-link{display:flex;align-items:center;gap:11px;padding:14px 16px;border-radius:12px;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);text-align:left}
.song-link:hover{background:rgba(255,255,255,.09)}
.song-link i{opacity:.75}

.song-side{min-width:0;display:grid;gap:26px}
.song-block h2{margin:0 0 12px;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;opacity:.82}
.song-embed-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.song-embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.song-watch{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:.9rem;text-decoration:none;opacity:.85}
.song-watch:hover{opacity:1}

.song-more{display:grid;gap:8px}
.song-row{display:flex;align-items:center;gap:11px;padding:8px;border-radius:10px;text-decoration:none}
.song-row:hover{background:rgba(255,255,255,.06)}
.song-row-art{flex:0 0 46px;width:46px;height:46px;border-radius:7px;overflow:hidden;background:rgba(255,255,255,.06)}
.song-row-art img{width:100%;height:100%;object-fit:cover;display:block}
.song-row-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.song-row-meta b{font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-row-meta small{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width:900px){
  .song-wrap{grid-template-columns:1fr;gap:30px;padding-top:26px}
  .song-side{order:-1}
}
/* top-songs rows became links when song pages arrived; keep them looking the same */
.ar-song-link{display:flex;align-items:center;gap:14px;min-width:0;flex:1;text-decoration:none;color:inherit}
.ar-song-link:hover .ar-song-meta b{text-decoration:underline}
/* the tag chip became the route back to the station, so it needs to read as a link */
.pb-tag{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:inherit;
  padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);font-size:.86rem;white-space:nowrap}
.pb-tag:hover{background:rgba(255,255,255,.13)}
.pb-tag-go{opacity:.55;font-size:.72rem}
.pb-tag:hover .pb-tag-go{opacity:.95}
/* collapsing just the track card, via the ‹ button */
.playerbar.now-hidden .pb-now{display:none}
.pb-now{cursor:pointer}

/* ---- single station page ------------------------------------------------ */
.sp-hero{display:flex;align-items:center;gap:26px;padding:44px 0 30px;flex-wrap:wrap}
.sp-disc{flex:0 0 108px;width:108px;height:108px;border-radius:50%;display:grid;place-items:center;
  background:var(--tint);color:#08080c;font-size:2.5rem;
  box-shadow:0 0 0 10px color-mix(in srgb, var(--tint) 18%, transparent)}
.sp-head{min-width:0;flex:1 1 320px}
.sp-eyebrow{display:block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:6px}
.sp-name{margin:0 0 6px;font-size:clamp(1.8rem,4vw,2.7rem);line-height:1.1;text-wrap:balance}
.sp-blurb{margin:0 0 18px;max-width:60ch}
.sp-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:640px){
  .sp-hero{gap:18px;padding:30px 0 22px}
  .sp-disc{flex-basis:78px;width:78px;height:78px;font-size:1.8rem}
}
/* shown instead of an embed when no video id resolved — honest, not a dead player */
.song-novideo{display:flex;align-items:center;gap:12px;padding:16px;border-radius:12px;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.song-novideo:hover{background:rgba(255,255,255,.09)}
.song-novideo i{font-size:1.5rem;opacity:.8}
.song-novideo span{display:flex;flex-direction:column;gap:2px}
.song-novideo small{font-size:.8rem}
.song-cover.is-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--muted);background:rgba(255,255,255,.045);border:1px dashed rgba(255,255,255,.16)}
.song-cover.is-blank i{font-size:2.6rem;opacity:.5}
.song-cover.is-blank span{font-size:.82rem}

/* ---- TV channel page: stage, on-air bar, programme guide ----------------- */
/* Everything tints from --accent, which each *-page class already sets, so the
   four channels read apart without any per-channel rules below. */

.tv-stage{padding:26px 0 0}

/* tabs sit on the player's top edge, so switching channel reads as one control */
.tv-tabs{display:flex;align-items:flex-end;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:0}
.tv-tabs::-webkit-scrollbar{display:none}
.tv-tab{display:inline-flex;align-items:flex-end;gap:8px;padding:7px 14px;white-space:nowrap;
  border-radius:13px 13px 0 0;background:rgba(255,255,255,.42);border:1px solid var(--line);
  border-bottom:none;text-decoration:none;align-self:flex-end;
  transition:padding .22s cubic-bezier(.4,0,.2,1),background .22s cubic-bezier(.4,0,.2,1),
             filter .22s cubic-bezier(.4,0,.2,1),opacity .22s cubic-bezier(.4,0,.2,1)}

/* Selected: filled with the channel's colour and taller. Unselected: grey and
   shorter. The mark sits on a white plate inside the fill — the logos are
   multi-colour with the channel word knocked out inside the circle, so painting
   them onto the fill directly loses that word. */
.tv-tab-mark{height:28px;width:auto;display:block;
  transition:height .22s cubic-bezier(.4,0,.2,1),padding .22s cubic-bezier(.4,0,.2,1)}
.tv-tab:not(.is-on){filter:grayscale(1);opacity:.66}
.tv-tab:not(.is-on):hover{filter:grayscale(.3);opacity:.9}
.tv-tab.is-on{padding:12px 18px;background:var(--accent);border-color:transparent;
  filter:none;opacity:1}
.tv-tab.is-on .tv-tab-mark{height:44px;background:#fff;border-radius:9px;padding:5px 10px}

@media (prefers-reduced-motion:reduce){
  .tv-tab,.tv-tab-mark{transition:none}
}
.tv-soon{font-style:normal;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.14);opacity:.85}
.tv-stage .player-box{border-radius:0 18px 18px 18px;padding:0;overflow:hidden;background:#000;border:1px solid var(--line)}
/* media-player is 16/9 with width:100% and no height limit, so on a laptop the
   video alone ran from the tabs to past the fold — the on-air row and the guide
   were rendering the whole time, just never on screen. Cap the box by viewport
   height and let the width follow, which keeps 16/9 intact (no letterboxing)
   and keeps the on-air row visible without scrolling. The floor stops it
   collapsing on short windows; .wrap still caps the upper end. */
.tv-stage .wrap{max-width:max(640px,calc((100vh - 578px) * 16 / 9))}
/* The bar's art slot holds a station icon for radio and the channel mark for
   TV; the mark is a square canvas with heavy whitespace, so it is sized by the
   box and padded rather than stretched. */
/* Two different jobs in one slot.

   A channel MARK is a wide lockup that must be shown whole, so it gets contain
   and a little breathing room (see .pb-art.is-channel img). Everything else —
   album art, and the Nago tile standing in while a station's artwork loads — is
   a picture that should fill the square: 960x540 art under `contain` collapsed
   into a thin letterboxed strip with empty bands above and below it. */
.pb-art img{width:100%;height:100%;object-fit:cover;display:block;
  border-radius:inherit;padding:0}
/* The channel parked in the bar. Once you leave a TV page the element moves
   in here and keeps playing as a live thumbnail, which is what makes a
   channel behave like a station rather than stopping at the first link. */
.pb-video{width:82px;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:#000;
  flex:none;border:1px solid var(--line);line-height:0;
  background-size:cover;background-position:center}
/* No moving picture to show — radio playing, or the channel on its audio-only
   output. The tile behind the element shows through instead of a frozen frame;
   the media keeps playing underneath, only its visibility changes, so the swap
   is instant. */
.pb-video.is-still video{visibility:hidden}
.pb-video video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:auto}
.pb-video[hidden]{display:none}
.has-tv-thumb .pb-art{display:none}   /* the picture replaces the mark */
.pb-video{cursor:pointer;position:relative}
.pb-video:after{content:"\f065";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;inset:0;display:grid;place-items:center;font-size:13px;color:#fff;
  background:rgba(0,0,0,.45);opacity:0;transition:opacity .15s}
.pb-video:hover:after{opacity:1}

/* Offered where a channel is playing in the bar and this page is not a
   channel stage — the home page's "Live Right Now" box, for one. */
.tv-resume{display:flex;align-items:center;gap:18px;padding:22px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:20px}
.tv-resume img{width:64px;height:64px;object-fit:contain;flex:none}
.tv-resume-text{flex:1;min-width:180px}
.tv-resume-text b{display:block;font-size:1.05rem;margin-bottom:4px}
.tv-resume-text p{margin:0;font-size:.88rem;line-height:1.5}
.tv-resume-btn{flex:none}

/* The player bar is fixed, and on a phone the bottom nav sits under it, so
   together they cover the last ~158px of the viewport. Nothing reserved space
   for them, which left the on-air row and "Up next" permanently underneath —
   unreachable, because there was no page left to scroll. The page now ends
   above them. */
/* Held as a variable so the footer can reclaim it. The clearance is real —
   the page must end above the player — but paying it as bare body padding left
   118px of unpainted ground under the footer, which read as the page having
   fallen short rather than having ended. The bottom strip absorbs it instead
   and paints straight through to the player. */
body{--player-clear:0px;padding-bottom:var(--player-clear)}
body.has-playerbar{--player-clear:118px}
.footer{margin-bottom:calc(-1 * var(--player-clear))}
.foot-legal{padding-bottom:calc(22px + var(--player-clear))}
@media(max-width:900px){
  body.has-playerbar{--player-clear:186px}
}

/* ---- channel player -------------------------------------------------------
   Our own interface: Flussonic's MSE player carries the pictures but ships no
   controls at all, so everything here is ours and takes the channel's accent
   rather than a library's default skin. */
.tvp{position:relative;background:#000;line-height:0}
.tvp-video{display:block;width:100%;aspect-ratio:16/9;background:#000}

.tvp-bar{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 11px;line-height:1;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));
  opacity:0;transition:opacity .18s ease;pointer-events:none}
.tvp:hover .tvp-bar,.tvp:focus-within .tvp-bar,.tvp.busy .tvp-bar,
.tvp.show .tvp-bar{opacity:1;pointer-events:auto}
/* A touch screen has no hover, so the bar would appear once while buffering and
   then never again; there it is revealed by a tap instead. */
@media (hover:none){.tvp .tvp-bar{opacity:0}.tvp.show .tvp-bar{opacity:1}}

/* the live line. These streams have no end, so it is drawn against the window
   the server keeps rather than a duration, and goes flat when there is none. */
.tvp-seek{position:relative;height:16px;display:flex;align-items:center;cursor:pointer;
  margin:0 2px 6px;touch-action:none}
.tvp-seek:before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:99px;
  background:rgba(255,255,255,.26)}
.tvp-seek-buf{position:absolute;left:0;height:4px;border-radius:99px;background:rgba(255,255,255,.34)}
.tvp-seek-fill{position:absolute;left:0;height:4px;border-radius:99px;background:var(--accent)}
.tvp-seek-dot{position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;
  border-radius:50%;background:#fff;opacity:0;transition:opacity .15s}
.tvp-seek:hover .tvp-seek-dot,.tvp-seek:focus-visible .tvp-seek-dot{opacity:1}
.tvp-seek:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:99px}
.tvp.nodvr .tvp-seek{cursor:default}
.tvp.nodvr .tvp-seek-dot{display:none}

.tvp-row{display:flex;align-items:center;gap:11px}
.tvp-btn{background:none;border:0;color:#fff;font-size:16px;cursor:pointer;padding:7px;border-radius:9px;
  display:grid;place-items:center}
.tvp-btn:hover{background:rgba(255,255,255,.18)}
/* [hidden] is a UA rule on the element, so any class that sets display beats
   it. Without this the quality gear stayed on screen for a stream with one
   rendition and opened an empty menu, and the same for PiP where the browser
   does not support it. */
.tvp-btn[hidden]{display:none}
.tvp-vol{width:78px;accent-color:var(--accent)}
.tvp-name{font-weight:800;font-size:.86rem;opacity:.9;color:#fff;white-space:nowrap}
.tvp-spacer{flex:1}

/* the live tag, in the channel's colour. The dot pulses so a glance tells you
   this is a broadcast; scrub back and it dims to a plain button that takes you
   to the edge again. */
.tvp-live{display:inline-flex;align-items:center;gap:7px;font-weight:900;font-size:.7rem;
  letter-spacing:.13em;background:var(--accent);color:#fff;padding:5px 10px;border-radius:999px;
  border:0;cursor:pointer;font-family:inherit}
.tvp-live i{width:7px;height:7px;border-radius:50%;background:currentColor;
  animation:tvp-pulse 1.6s ease-in-out infinite}
.sport-page .tvp-live{color:#0a0a0d}       /* white would not read on the gold */
.tvp.behind .tvp-live{background:rgba(255,255,255,.2);color:#fff}
.tvp.behind .tvp-live i{animation:none;opacity:.5}
@keyframes tvp-pulse{0%,100%{opacity:1}50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.tvp-live i{animation:none}}

/* quality. Hidden unless the stream actually publishes more than one rendition,
   so the button never opens an empty menu. */
.tvp-menu-wrap{position:relative;display:inline-grid}
.tvp-menu{position:absolute;right:0;bottom:calc(100% + 10px);min-width:132px;padding:6px;
  background:rgba(16,16,21,.97);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);display:grid;gap:2px;z-index:5}
.tvp-menu-item{background:none;border:0;color:#fff;text-align:left;padding:9px 12px;border-radius:9px;
  font:inherit;font-size:.83rem;font-weight:700;cursor:pointer;white-space:nowrap}
.tvp-menu-item:hover{background:rgba(255,255,255,.12)}
.tvp-menu-item.on{background:var(--accent)}
.sport-page .tvp-menu-item.on{color:#0a0a0d}

/* Audio only: there is no picture to show, so the channel mark stands in and
   the frame stops pretending to be a video. */
.tvp.audio-only .tvp-video{background:#07070b}
.tvp.audio-only:before{content:"";position:absolute;inset:0;background:var(--mark) center/38% no-repeat;
  opacity:.5;pointer-events:none}
.tvp.audio-only .tvp-live:after{content:" · AUDIO";font-size:.65rem;letter-spacing:.1em}
.tvp.audio-only.busy:after{display:none}

/* "Tap for sound" — shown only while a channel is playing muted, because it had
   to start that way to be allowed to start at all. Sits over the picture, well
   clear of the control bar, and hides itself the moment sound comes back.
   [hidden] is a UA rule on the element, so the display below must not beat it —
   hence the explicit [hidden] guard. */
.tvp-unmute{position:absolute;top:14px;right:14px;z-index:3;display:inline-flex;align-items:center;
  gap:9px;padding:11px 16px;border:0;border-radius:999px;cursor:pointer;font:inherit;
  font-size:.82rem;font-weight:800;letter-spacing:.01em;color:#fff;background:var(--accent);
  box-shadow:0 10px 26px rgba(0,0,0,.45);animation:tvp-nudge 2.4s ease-in-out infinite}
.tvp-unmute[hidden]{display:none}
.tvp-unmute i{font-size:1rem}
.tvp-unmute:hover{filter:brightness(1.12)}
.sport-page .tvp-unmute{color:#0a0a0d}          /* white would not read on the gold */
@keyframes tvp-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.tvp-unmute{animation:none}}
@media (max-width:560px){.tvp-unmute{top:10px;right:10px;padding:9px 13px;font-size:.76rem}}

.tvp.busy:after{content:"";position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  border:3px solid rgba(255,255,255,.22);border-top-color:#fff;animation:tvp-spin .9s linear infinite}
@keyframes tvp-spin{to{transform:rotate(360deg)}}

/* phones: keep the row from crowding — the volume slider is the first to go,
   since the page's own player bar carries one too */
@media (max-width:560px){
  .tvp-vol{display:none}
  .tvp-name{font-size:.78rem;max-width:38vw;overflow:hidden;text-overflow:ellipsis}
  .tvp-row{gap:6px}
  .tvp-btn{padding:6px;font-size:15px}
}
.tv-stage .player-box{max-width:none}
.tv-stage .player-box media-player{border-radius:0}
.soon{display:grid;place-items:center;gap:10px;aspect-ratio:16/9;text-align:center;padding:24px}
.soon i{font-size:2.4rem;color:var(--accent)}

/* what is on air, directly under the picture */
.tv-now{padding:20px 0 4px}
.tv-now-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* Once the stage column narrows, the programme title takes the width it needs
   and Share drops to its own line — where, pushed right by margin:auto, it sat
   stranded in empty space. Let the title shrink instead, and when the row does
   wrap, put Share back at the left edge under it rather than floating alone. */
.tv-now-head h1,.tv-now-head h2{min-width:0;overflow-wrap:anywhere}
@media (max-width:820px){
  .tv-now-head .tv-share{margin-left:0;padding:13px 22px}
  .tv-now-head{gap:10px}
}
.tv-live{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:900;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tv-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:tvpulse 2s infinite}
@keyframes tvpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.tv-dot{animation:none}}
.tv-prog{margin:0;font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.08;letter-spacing:-.01em;
  text-transform:uppercase;text-wrap:balance}
.tv-slot{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.95rem}
.tv-share{margin-left:auto;display:inline-flex;align-items:center;gap:13px;padding:16px 30px;
  border-radius:999px;background:#fff;border:none;color:#111;
  font-weight:800;font-size:1.05rem;cursor:pointer;transition:transform .15s,box-shadow .15s}
.tv-share:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.tv-share i{font-size:1em}
.tv-bar{height:3px;border-radius:999px;background:rgba(255,255,255,.12);margin:14px 0 12px;overflow:hidden}
.tv-bar span{display:block;height:100%;background:var(--accent)}
/* Descriptions are two sentences, written long enough to carry the programme
   page. The on-air bar only has room for the opening of one, so it clamps —
   the full text is never truncated in the data, only in this view. */
.tv-desc{margin:0;max-width:78ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
@media (max-width:640px){.tv-desc{-webkit-line-clamp:2;line-clamp:2}}
.tv-upnext{margin:12px 0 0;font-size:.9rem;color:var(--muted)}
.tv-upnext b{color:#fff;margin-right:8px}

/* the guide — panel outlined in the channel accent, badge strip across the top,
   then rows of time + title with a tile on the right */
.tvg-panel{border:2px solid var(--accent);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02)}
.tvg-badge{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 16px;
  background:var(--accent);color:#08080c;font-weight:900;font-size:.95rem;letter-spacing:.02em}
.tvg-body{padding:26px 26px 8px}
.tvg-today{margin:0;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.01em}
.tvg-date{margin:4px 0 22px;font-size:.9rem;color:var(--muted)}

.tvg-rows{list-style:none;margin:0;padding:0}
.tvg-row{display:flex;align-items:center;gap:20px;padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.08)}
.tvg-row:last-child{border-bottom:none}
.tvg-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.tvg-when{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.tvg-title{font-size:1rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tvg-pill{font-style:normal;font-size:.64rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:var(--accent);color:#08080c}
.tvg-thumb{flex:0 0 116px;aspect-ratio:16/9;border-radius:8px;display:grid;place-items:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,transparent),
    color-mix(in srgb,var(--accent) 14%,transparent));color:#08080c;font-size:1.4rem}
.tvg-row.is-live .tvg-title{color:#fff}
.tvg-row.is-past{opacity:.42}
.tvg-more{display:block;width:100%;margin:20px 0 22px;padding:15px 20px;border:none;cursor:pointer;
  border-radius:999px;background:var(--accent);color:#08080c;font-weight:800;font-size:.95rem;
  transition:filter .15s}
.tvg-more:hover{filter:brightness(1.08)}

@media (max-width:640px){
  .tv-tab{padding:10px 13px;font-size:.84rem}
  .tv-tab span{max-width:92px;overflow:hidden;text-overflow:ellipsis}
  .tv-share{margin-left:0;padding:13px 24px;font-size:.98rem}
  .tvg-body{padding:20px 16px 4px}
  .tvg-row{gap:13px}
  .tvg-thumb{flex-basis:84px}
}
/* The guide badge keeps a small mark on its accent strip. */
.tvg-badge-logo{height:46px;width:auto;object-fit:contain;display:block;
  background:#fff;border-radius:10px;padding:6px 14px}
@media (max-width:640px){ .tv-tab-mark{height:21px} .tv-tab.is-on .tv-tab-mark{height:32px;padding:4px 7px} .tv-tab{padding:6px 9px} .tv-tab.is-on{padding:9px 12px} }

/* ---- ticker items -------------------------------------------------------- */
/* One pill carries the station; the track sits outside it. Keeping them as two
   different KINDS of element is what stops the names running together. */
.tk-chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;
  background:var(--accent);color:#08080c;font-weight:900;font-size:.76rem;
  letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.tk-artist{color:#fff;font-weight:700;white-space:nowrap}
.tk-dash{opacity:.4}
.tk-song{color:var(--muted);white-space:nowrap}
.tk-dot{font-size:.4rem;opacity:.5;margin-right:8px}

/* ---- fallback artwork (B3) ---------------------------------------------- */
/* Fills whatever box it is dropped into, so one tile serves the song cover,
   the artist circle and a row thumbnail without size-specific markup. */
.fb3{position:relative;display:block;width:100%;height:100%;overflow:hidden;
  background:linear-gradient(140deg,var(--c1),var(--c2));color:#fff;border-radius:inherit}
.fb3-wm{position:absolute;left:50%;top:50%;width:142%;transform:translate(-50%,-50%) rotate(-8deg);
  filter:brightness(0) invert(1);opacity:.17;pointer-events:none}
.fb3-name{position:absolute;left:14px;right:14px;bottom:30px;z-index:1;
  font-size:15px;font-weight:900;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fb3-brand{position:absolute;right:13px;bottom:11px;z-index:1;
  font-size:.6rem;font-weight:800;letter-spacing:.16em;opacity:.6}

/* round — the artist circle centres its text instead */
.fb3-round .fb3-name{left:8px;right:8px;bottom:auto;top:50%;transform:translateY(-50%);
  text-align:center;font-size:13px}
.fb3-round .fb3-brand{left:0;right:0;text-align:center;bottom:14px}

/* row — 46-64px, where any text would be unreadable */
.fb3-row .fb3-wm{width:150%;opacity:.24}

@media (max-width:640px){
  .fb3-name{font-size:13px;bottom:26px}
  .fb3-brand{font-size:.55rem}
}

/* ---- artist biography ---------------------------------------------------- */
.ar-bio{max-width:74ch}
.ar-bio h2{margin:0 0 14px;font-size:1.5rem}
.ar-bio-text{margin:0 0 14px;line-height:1.8;font-size:1.02rem}
.ar-bio-src{margin:0;font-size:.85rem}
.ar-bio-src a{text-decoration:underline;text-underline-offset:3px}

/* ============================================================================
   Player bar — phone layout, single authority

   The bar had collected SIX separate .pb-inner definitions across successive
   revisions. Five set grid-template-columns; the last set display:flex — so
   every grid rule was already dead and the responsive layout was describing a
   grid that no longer existed. That is why it looked scrambled on a phone
   rather than merely cramped. Ten different max-width:900px blocks were each
   nudging one part of it.

   This block is the one place the bar is laid out below 900px. It is last in
   the file, so it wins outright without touching the older rules that other
   parts of the page still depend on.

   The shape: what is playing gets all the free width and truncates; the
   transport is a fixed cluster on the right; anything the page itself already
   offers (the station picker, the way-back link, a volume slider a phone does
   not need) is dropped rather than squeezed.
   ========================================================================= */
@media (max-width:900px){
  .playerbar{left:10px;right:10px;bottom:84px;border-radius:18px;
    border:1px solid var(--line);background:rgba(8,8,12,.97)}
  .pb-inner{display:flex;align-items:center;gap:10px;padding:8px 10px;
    width:auto;margin:0}

  .pb-now{flex:1 1 auto;min-width:0;background:none;border:0;padding:0;gap:10px;
    max-width:none}
  .pb-meta{min-width:0;display:block}
  .pb-title,.pb-sub{display:block;max-width:100%;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pb-label{font-size:.56rem;letter-spacing:.12em}
  .pb-title{font-size:.92rem;line-height:1.25}
  .pb-sub{font-size:.74rem;line-height:1.3}
  .pb-art{width:42px;height:42px;flex:none}
  .pb-video{width:64px;flex:none}

  /* The chip and the way-back link have no room on a phone. The PICKER lives
     inside the same container though, so hiding the container hid the sheet
     too — it opened at zero width and could never be seen. display:contents
     removes the container's own box while leaving its children able to render,
     so the fixed sheet works and the chip stays gone. */
  .pb-right{display:contents}
  .pb-chip,.pb-tag,.pb-collapse,.pb-divider,.pb-next,.pb-vol{display:none}

  .pb-transport{position:static;transform:none;margin-left:auto;flex:none;
    display:flex;align-items:center;gap:4px}
  .pb-volwrap{display:flex}
  .pb-play{width:44px;height:44px;font-size:16px;flex:none}
  .pb-round{width:36px;height:36px;font-size:14px;flex:none}
}

@media (max-width:560px){
  .playerbar{bottom:80px;left:8px;right:8px}
  .pb-back{display:none}                 /* forward only: no room for both */
  .pb-art{width:38px;height:38px}
  .pb-video{width:56px}
  .pb-title{font-size:.86rem}
  .pb-sub{font-size:.7rem}
  .pb-play{width:42px;height:42px}
  .pb-round{width:34px;height:34px}
  .pb-inner{gap:8px;padding:7px 9px}
}

/* ---- the channel mark in the player bar ----------------------------------
   The marks are 640x229 lockups — 2.8:1, with the ink filling the whole canvas
   and no whitespace to trim. Fitted into the square tile a station uses, the
   only dimension available was the width, so the wordmark came out about ten
   pixels tall and read as a smudge. A tile shaped like the artwork makes it
   roughly two and a half times taller while taking LESS vertical room, which
   matters more than width in a bar this tight.

   Stations keep the square disc: their artwork is a round icon, not a lockup. */
.pb-art.is-channel{width:78px;height:33px;border-radius:8px;padding:0;flex:none}
/* Contain, not cover. The general .pb-art img rule fills the slot because that
   is right for album art and for the Nago plates, but a TV lockup is transparent
   artwork at 2.79:1 in a 2.36:1 tile — filling it sliced 15% off the ends, which
   is exactly where the channel name sits. */
.pb-art.is-channel img{object-fit:contain;padding:3px 5px}

@media (max-width:900px){
  .pb-art.is-channel{width:72px;height:30px}
  .pb-art.is-channel img{padding:2px 4px}
}
@media (max-width:560px){
  .pb-art.is-channel{width:64px;height:27px}
  .pb-art.is-channel img{padding:2px 3px}
}
/* very narrow phones: the logo keeps its size, the text gives way instead —
   a truncated title still reads, a 20px-wide logo does not */
@media (max-width:380px){
  .pb-art.is-channel{width:58px;height:25px}
  .pb-sub{display:none}
}

/* ============================================================================
   Accessibility — applied identically on desktop and on touch

   Two faults this fixes. There was no visible focus style anywhere, so anyone
   navigating by keyboard had no idea what was selected; and several controls
   were below the 44px minimum touch target, which is hardest on exactly the
   phone layout where the bar is tightest.

   The touch fix deliberately does NOT enlarge the buttons. Growing them to
   44px would have broken the phone bar that has to fit art, title, and four
   controls across ~390px. Instead each control gets an invisible hit area
   extending past its box, so the target is finger-sized while the layout is
   unchanged. Same components, same behaviour, both platforms.
   ========================================================================= */

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
/* on the dark bar and over video, the accent is not always legible */
.playerbar :focus-visible,.tvp :focus-visible,.bottom-nav :focus-visible{
  outline-color:#fff;outline-offset:3px}
/* never remove focus entirely — only ever swap what it looks like */
:focus:not(:focus-visible){outline:none}

@media (hover:none){
  .pb-round,.pb-play,.pb-divider,.tvp-btn,.tk-close,.pb-video,.tvp-live{position:relative}
  .pb-round::after,.pb-play::after,.pb-divider::after,.tvp-btn::after,
  .tk-close::after,.tvp-live::after{
    content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:max(100%,44px);height:max(100%,44px)}
  /* text links in the nav need real height, not just a hit area */
  .links a,.bottom-nav a{min-height:44px;display:flex;align-items:center;justify-content:center}
}

/* the parked preview is a control: it navigates back to the channel */
.pb-video{cursor:pointer}
.pb-video:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* ============================================================================
   The picker — both mediums, one list

   Desktop: a panel above the chip, as before.
   Phone:   the chip has no room to exist, so the same list arrives as a sheet
            from the bottom, opened by tapping what is playing. Without it a
            phone could reach channels from the bottom nav but could not pick a
            station at all without going to the Radio page.
   ========================================================================= */
.pk-group{margin:10px 12px 6px;font-size:.62rem;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.pk-group:first-child{margin-top:4px}
.pk-close{display:none}

/* the channel rows carry the mark on its measured plate, like the bar tile */
.pk-mark{width:56px;height:24px;border-radius:6px;flex:none;display:grid;place-items:center;
  overflow:hidden}
.pk-mark img{width:100%;height:100%;object-fit:contain;padding:2px 4px;display:block}
.pk-row[disabled]{opacity:.45;cursor:not-allowed}
.pk-row.on{background:rgba(255,255,255,.12)}

@media (max-width:900px){
  /* a sheet, not a dropdown: anchored to the bottom, full width, thumb-reachable */
  .pb-picker{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-height:72vh;
    overflow-y:auto;border-radius:22px 22px 0 0;z-index:90;
    background:rgba(12,12,17,.985);border:1px solid var(--line);border-bottom:0;
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -20px 60px rgba(0,0,0,.6)}
  .pb-picker[hidden]{display:none}
  .pk-sheet{padding-top:6px}
  /* a grab handle, so it reads as a sheet you can dismiss */
  .pk-sheet:before{content:"";display:block;width:38px;height:4px;border-radius:99px;
    background:rgba(255,255,255,.3);margin:8px auto 6px}
  .pk-close{display:grid;place-items:center;position:absolute;top:10px;right:12px;
    width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.1);
    color:#fff;font-size:15px;cursor:pointer}
  .pk-row{padding:13px 14px}          /* comfortable thumb targets in the sheet */
  .pb-now{cursor:pointer}
  /* dim the page behind the sheet */
  body.pk-open:after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80}

  /* The sheet lives inside .playerbar, which is position:fixed WITH a
     backdrop-filter — either alone creates a stacking context. So the sheet's
     own z-index:90 only ranks it against its siblings inside that bar, and the
     whole bar was still painting at 70: underneath the backdrop at 80.

     The sheet looked right and was completely untappable. Every tap landed on
     the backdrop, which then closed it — so picking a channel did nothing at
     all. Lifting the bar's context above the backdrop while the sheet is open
     puts its contents back on top. */
  body.pk-open .playerbar{z-index:100}
}

/* ---- Nago FM station lockups ---------------------------------------------
   Same construction as the TV marks — 640x229, so they are sized by WIDTH.
   The plate behind them is the station colour the mark was drawn on, so the
   edges meet seamlessly and the tile reads as one object. */
.pk-mark{width:60px;height:26px;border-radius:6px;flex:none;overflow:hidden;line-height:0}
.pk-mark img{width:100%;height:100%;object-fit:cover;display:block}

.st-mark{display:block;width:100%;max-width:190px;aspect-ratio:2.36;border-radius:12px;
  overflow:hidden;line-height:0;margin-bottom:14px}
.st-mark img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:560px){
  .pk-mark{width:58px;height:24px}
  .st-mark{max-width:150px}
}

/* The two mark types in the picker are different objects and cannot share a fit.

   A Nago FM mark is a finished plate — colour, wordmark and station name already
   composed at 2.36:1 — so it fills the box.

   A TV channel mark is a transparent lockup at 2.79:1 sitting on a colour set in
   CSS. Filling the box cropped its ends, which is where the channel name lives:
   every one of them read "nag" with the word sliced off. It has to be contained
   and given a little air instead. */
.pk-mark.is-tv img{object-fit:contain;padding:3px 5px}

/* A station mark in a played-on row: a 2.36:1 plate, so the square art slot has
   to widen for it rather than crop it the way it would a cover. */
.rt-art.rt-station{width:62px;height:auto;aspect-ratio:2.36;border-radius:7px;overflow:hidden;
  flex:none;line-height:0}
.rt-art.rt-station img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- Watch page: what is on each channel now ---------------------------- */
.tv-onair-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:20px}
.oa{display:block;padding:20px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.oa:hover{border-color:var(--accent)}
.oa-ch{display:block;font-size:.64rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.oa-title{display:block;font-size:1.1rem;line-height:1.3}
.oa-next{display:block;font-size:.8rem;margin-top:8px}
@media (max-width:560px){.tv-onair-grid{grid-template-columns:1fr}}

/* Third place this distinction has mattered: a Nago FM mark is a finished 2.36:1
   plate that should fill its tile, a TV channel mark is transparent 2.79:1
   artwork that must be shown whole. Filling cropped the channel name off the
   end — "NAGO Music" read as "nago mus". */
.st-mark.is-tv{aspect-ratio:2.79}
.st-mark.is-tv img{object-fit:contain;padding:4px 7px}

/* ============================================================================
   Header navigation

   Set the way the reference sets it: few items, heavy weight, generous space
   between them, plain white on the dark ground. The wide gap is doing the work
   that a box or an underline would otherwise do — with only four items there is
   room for it, and it reads as deliberate rather than crowded.
   ========================================================================= */
.topbar .links{gap:clamp(26px,3.4vw,58px);font-size:clamp(15px,1.15vw,19px);font-weight:800;
  letter-spacing:.005em}
.topbar .links a{opacity:1;color:#fff;position:relative;padding:6px 0}
.topbar .links a:hover{color:var(--accent)}
/* the current page is marked by a rule under it, not by a fill */
.topbar .links a.active{color:#fff}
.topbar .links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:var(--accent);border-radius:2px}

.nav-search{background:none;border:0;color:#fff;cursor:pointer;padding:8px;margin-left:6px;
  font-size:1.05em;line-height:1;border-radius:50%;display:grid;place-items:center}
.nav-search:hover{color:var(--accent)}

/* ---- the search panel --------------------------------------------------- */
.srch{position:fixed;inset:0;z-index:120;display:none;background:rgba(3,3,7,.86);
  backdrop-filter:blur(14px)}
.srch.open{display:block}
.srch-box{width:min(720px,92vw);margin:min(14vh,120px) auto 0}
.srch-field{display:flex;align-items:center;gap:14px;background:#0e0e14;border:1px solid var(--line);
  border-radius:18px;padding:16px 20px}
.srch-field i{color:var(--muted);font-size:1.1rem}
.srch-field input{flex:1;background:none;border:0;color:#fff;font:inherit;font-size:1.15rem;outline:none}
.srch-close{background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem}
.srch-results{margin-top:14px;max-height:60vh;overflow-y:auto;display:grid;gap:6px}
.srch-group{font-size:.62rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:12px 4px 2px}
.srch-row{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid transparent}
.srch-row:hover,.srch-row:focus-visible{background:rgba(255,255,255,.1);border-color:var(--line)}
.srch-art{width:52px;height:52px;border-radius:10px;overflow:hidden;flex:none;background:#15151d}
.srch-art.wide{width:66px;height:28px;border-radius:7px}
.srch-art img{width:100%;height:100%;object-fit:cover;display:block}
.srch-art.wide.is-tv img{object-fit:contain;padding:3px 5px}
.srch-txt{min-width:0}
.srch-txt b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch-txt span{font-size:.82rem}
.srch-empty{padding:26px 4px;text-align:center}

/* ---- header on a phone ---------------------------------------------------
   The search button lives OUTSIDE the collapsible list on purpose. Inside it,
   it inherited display:none along with the menu and was 0x0 — there was no way
   to search from a phone at all.

   The open menu uses the same weight and spacing as the desktop row, just
   stacked, so it reads as the same navigation rather than a different one. */
@media (max-width:900px){
  .nav{position:relative}
  .nav-search{order:2;margin:0 4px 0 auto;font-size:1.15rem;padding:10px}
  .menu{order:3;margin-left:2px}

  /* Closed until asked for. Stated explicitly, with the same specificity as the
     rule that opens it: there are several .links rules in this file and the one
     that happened to win left the menu hanging open on load, so the hamburger
     appeared to close it rather than open it. */
  .topbar .links{display:none;gap:6px;font-size:1.05rem;padding:14px;
    box-shadow:0 26px 60px rgba(0,0,0,.6)}
  .topbar .links.show{display:flex}
  .topbar .links a{padding:15px 16px;border-radius:14px;background:rgba(255,255,255,.05);
    opacity:1;text-align:left}
  .topbar .links a:hover{background:rgba(255,255,255,.12);color:#fff}
  /* the underline marker does not belong on a stacked list */
  .topbar .links a.active:after{display:none}
  .topbar .links a.active{background:var(--accent);color:#fff}

  .srch-box{margin-top:80px}
}

@media (max-width:560px){
  .topbar .links{font-size:1rem}
  .topbar .links a{padding:14px}
}

/* ---- bottom navigation --------------------------------------------------
   Four destinations, matching the header rather than competing with it. The
   channels used to live here individually, which meant the bar said one thing
   and the header said another; Watch now leads to the same page in both.

   More is a button, not a link, because it opens the rest in place — a phone
   should not spend a whole screen on About and Contact. */
.bottom-nav{grid-template-columns:repeat(4,1fr)}
.bottom-nav button{display:grid;place-items:center;gap:4px;font-size:11px;color:#ddd;
  padding:8px;border-radius:18px;background:none;border:0;font-family:inherit;cursor:pointer}
.bottom-nav button i{font-size:15px}
.bottom-nav button:hover,.bottom-nav button[aria-expanded="true"]{background:rgba(123,53,255,.38);color:#fff}

.bn-sheet{position:fixed;left:12px;right:12px;bottom:88px;z-index:95;display:none;
  background:rgba(12,12,17,.985);border:1px solid var(--line);border-radius:22px;
  padding:8px;box-shadow:0 -18px 50px rgba(0,0,0,.6)}
.bn-sheet.open{display:grid;gap:4px}
.bn-sheet a{display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:15px;
  background:rgba(255,255,255,.05);font-weight:800}
.bn-sheet a:hover{background:rgba(255,255,255,.12)}
.bn-sheet a i{width:22px;text-align:center;color:var(--accent)}
body.bn-open:after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90}

/* ---- the ticker stays put ------------------------------------------------
   It had `top:70px` and no `position`, so the offset did nothing and the whole
   strip scrolled away the moment you moved down the page — which for a
   now-playing ticker is exactly when you want it.

   It sticks directly beneath the header. The offset is the header's measured
   height rather than a guess, because that height differs between desktop and
   phone and changes if the logo ever does. */
.ticker{position:sticky;top:var(--topbar-h,78px);z-index:49}

/* ============================================================================
   Phone header and menu — built to the carac.tv pattern

   Header: the logo centred, a boxed hamburger at the right, and nothing else.
   The old header ran to 171px on a phone, a fifth of the screen before any
   content; this is a single slim row.

   Menu: a screen of its own rather than a panel under the header. Search first,
   then the destinations as large rows each with a chevron, then the social
   links at the foot. Measured off carac.tv: the search field is a full pill
   (border-radius 9999px) on a 20% white wash.
   ========================================================================= */
@media (max-width:900px){
  .topbar .nav{position:relative;min-height:60px;justify-content:center}
  .brand{order:1}
  .brand img{width:118px}
  .nav-search{display:none}                 /* search lives inside the menu */
  /* Same reason as the search button. Without `order` this defaulted to 0,
     which sorts BEFORE .brand{order:1}, and justify-content:center then
     centred it beside the logo — the header is meant to be the logo and the
     hamburger, nothing else. It is a row in the full-screen menu instead. */
  .nav-acct{display:none}
  .menu{order:2;position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:42px;height:42px;display:grid;place-items:center;font-size:16px;
    border:2px solid rgba(255,255,255,.85);border-radius:9px;background:none;color:#fff}
  .topbar .links{display:none}              /* replaced by the full-screen menu */
  .topbar .links.show{display:none}
}

.mnav{position:fixed;inset:0;z-index:130;display:none;flex-direction:column;
  padding:14px 22px calc(24px + env(safe-area-inset-bottom,0px));
  /* Translucent, the way carac's is: the page stays visible as a blurred field
     behind the menu rather than being replaced by a flat panel. At .97 it was
     opaque in all but name — the blur had nothing to show through it. */
  background:rgba(7,7,13,.62);backdrop-filter:blur(28px) saturate(1.15);
  -webkit-backdrop-filter:blur(28px) saturate(1.15);overflow-y:auto}
/* the rows need their own weight against a live background */
.mnav-list a,.mnav-top{text-shadow:0 2px 18px rgba(0,0,0,.55)}
.mnav.open{display:flex}
body.mnav-open{overflow:hidden}

.mnav-top{position:relative;display:grid;place-items:center;min-height:46px;margin-bottom:22px}
.mnav-logo{width:118px;display:block}
.mnav-close{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:42px;height:42px;display:grid;place-items:center;font-size:17px;
  border:2px solid rgba(255,255,255,.85);border-radius:9px;background:none;color:#fff;cursor:pointer}

.mnav-search{display:flex;align-items:center;gap:12px;width:100%;
  padding:14px 20px;border:0;border-radius:9999px;background:rgba(255,255,255,.2);
  color:rgba(255,255,255,.92);font:inherit;font-size:1rem;cursor:pointer;margin-bottom:10px}
.mnav-search i{font-size:.95rem;opacity:.9}

.mnav-list{display:flex;flex-direction:column}
.mnav-list a{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:20px 4px;font-size:1.7rem;font-weight:800;letter-spacing:-.01em;color:#fff}
.mnav-list a i{font-size:1.15rem;opacity:.85}
.mnav-list a:hover,.mnav-list a:focus-visible{color:var(--accent)}
.mnav-list a.active{color:var(--accent)}

.mnav-social{display:flex;gap:14px;margin-top:auto;padding-top:34px}
.mnav-social a{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:#0a0a0f;font-size:1.05rem}
.mnav-social a:hover{background:var(--accent);color:#fff}

@media (max-width:380px){
  .mnav-list a{font-size:1.45rem;padding:17px 4px}
  .mnav-social a{width:44px;height:44px}
}

/* ---- the logo file --------------------------------------------------------
   The original was a 2048x2048 square with the wordmark in a band across the
   middle — 74% of its height was transparent padding. Sized by width, as these
   lockups must be, it rendered as tall as it was wide: a 170px logo made a
   171px header, a fifth of a phone screen, and in the menu it overflowed its
   row and sat on top of the search field.

   The cropped file is 2.79:1, so width now sets a sensible height on its own. */
.mnav-top{min-height:0;margin-bottom:26px}
.mnav-logo{width:140px}
.mnav-close{top:50%;transform:translateY(-50%)}
@media (max-width:900px){ .brand img{width:132px} }
@media (max-width:380px){ .mnav-logo{width:124px} }

/* ---- logo sizing that cannot break the layout ---------------------------
   Sizing by WIDTH makes the rendered height depend on the file's aspect ratio,
   so a square export — or a stale cached one — becomes as tall as it is wide
   and pushes into whatever sits below it. That is what put the logo on top of
   the search field, and what made the header 171px.

   Height is the fixed dimension now, with width following and capped. A wrong
   or cached file then renders small rather than tall: it may look off, but it
   cannot displace anything around it. */
.mnav-logo{height:44px;width:auto;max-width:58vw;object-fit:contain;display:block}
.brand img{height:36px;width:auto;max-width:52vw;object-fit:contain;display:block}
@media (max-width:900px){ .brand img{height:32px} }
@media (max-width:380px){ .mnav-logo{height:40px} }

/* ---- programme covers in the guide ---------------------------------------
   The cover sits over the channel mark rather than replacing it, so a
   programme with no cover rendered yet still shows something rather than an
   empty box — the <img> removes itself on error and the mark stays. */
.tvg-thumb{position:relative;overflow:hidden}
.tvg-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  border-radius:inherit}

/* ===========================================================================
   The programme page — /show/{channel}/{programme} — and its index.

   Built around the covers rather than around text: they were drawn in two
   crops for exactly this, so the page hands the browser both and lets the
   viewport pick. Everything tints from --accent, which show.js sets by adding
   the channel's *-page class, so the four channels read apart without any
   per-channel rules here.
   =========================================================================== */

/* ---- the guide row is now a link ---------------------------------------- */
.tvg-link{display:flex;align-items:center;gap:20px;width:100%;
  border-radius:12px;transition:background .15s}
.tvg-link:hover{background:rgba(255,255,255,.05)}
.tvg-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tvg-go{flex:none;font-size:.8rem;color:var(--muted);opacity:.55;transition:transform .15s,opacity .15s}
.tvg-link:hover .tvg-go{opacity:1;transform:translateX(3px)}
.tv-prog a:hover{color:var(--accent)}

/* ---- hero ---------------------------------------------------------------- */
.show-hero{padding:44px 0 12px}
.sh-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(24px,4vw,52px);align-items:start}

.sh-art{border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 45%,transparent),
    color-mix(in srgb,var(--accent) 10%,transparent));
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.sh-art img{display:block;width:100%;height:auto}
/* no cover rendered yet: keep the tinted plate at a sane shape rather than
   collapsing the column to nothing */
.sh-art.is-bare{aspect-ratio:2/3}
.sh-art.is-bare img{display:none}

.sh-body{min-width:0}
.sh-chan{display:inline-block;margin-bottom:18px}
.sh-chan img{height:34px;width:auto;max-width:220px;object-fit:contain;display:block}
.sh-title{margin:0 0 14px;font-size:clamp(2rem,5vw,3.4rem);line-height:1.02;
  letter-spacing:-.03em;text-wrap:balance;overflow-wrap:anywhere}

.sh-state{margin:0 0 10px;font-size:.82rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;display:flex;align-items:center;gap:8px}
.sh-state.is-live{color:var(--accent)}
.show-hero .tv-bar{max-width:420px}

.sh-desc{margin:14px 0 26px;max-width:60ch;font-size:1.06rem;line-height:1.75;color:#e6e6ef}

.sh-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.sh-watch{background:var(--accent);border-color:transparent;color:#08080c}
.sh-watch:hover{filter:brightness(1.08)}
.btn.ghost{background:rgba(255,255,255,.05);cursor:pointer;color:inherit;font-family:inherit;font-size:inherit}
.btn.ghost:hover{border-color:var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.sh-facts{display:flex;flex-wrap:wrap;gap:10px 34px;margin:0;padding-top:22px;
  border-top:1px solid var(--line)}
.sh-facts div{min-width:0}
.sh-facts dt{font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.sh-facts dd{margin:0;font-weight:800;font-size:.95rem}

/* ---- when it airs -------------------------------------------------------- */
.sh-when{padding:52px 0 28px}
.sh-when h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:18px}
.sh-slots{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:560px}
.sh-slot{display:flex;align-items:center;gap:14px;padding:15px 18px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);
  font-variant-numeric:tabular-nums}
.sh-slot b{font-size:1rem;letter-spacing:.01em}
.sh-slot.is-live{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.sh-pill{font-style:normal;margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-size:.64rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--accent);color:#08080c}
.sh-pill .tv-dot{background:#08080c}
.sh-note{margin-top:16px;font-size:.86rem}

/* ---- card rails (siblings, and the whole index) -------------------------- */
.sh-also{padding-top:16px}
.sh-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:18px;margin:22px 0 28px}
.sh-card{display:block;min-width:0}
.sh-card-art{position:relative;display:grid;place-items:center;aspect-ratio:16/9;
  border-radius:12px;overflow:hidden;margin-bottom:10px;color:#08080c;font-size:1.5rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,transparent),
    color-mix(in srgb,var(--accent) 14%,transparent));
  border:1px solid transparent;transition:border-color .15s,transform .15s}
.sh-card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sh-card:hover .sh-card-art{border-color:var(--accent);transform:translateY(-2px)}
.sh-card:focus-visible{outline:none}
.sh-card:focus-visible .sh-card-art{outline:2px solid var(--accent);outline-offset:3px}
.sh-card b{display:block;font-size:.94rem;font-weight:800;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-card .muted{display:block;font-size:.8rem;font-variant-numeric:tabular-nums;margin-top:3px}
.sh-card .sh-pill{position:absolute;left:8px;top:8px;margin:0;z-index:1}

/* ---- the index ----------------------------------------------------------- */
.sh-index-head{padding:56px 0 8px}
.sh-index-head h1{font-size:clamp(2.2rem,6vw,3.6rem);margin:0 0 10px;letter-spacing:-.03em}
.sh-group{padding:30px 0}
/* each block on the index carries its own channel's accent, so the four
   sections read apart on one page the way the channels do across four */
.music-group{--accent:var(--music)}
.sport-group{--accent:var(--sport)}
.gospel-group{--accent:var(--gospel)}
.news-group{--accent:var(--news)}
.sh-group-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:16px;margin-bottom:6px;border-bottom:2px solid var(--accent)}
.sh-group-head .sh-chan{margin:0}
.sh-group-head .muted{font-size:.82rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.show-missing{padding:40px 0;text-align:center}
.show-missing h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 10px}
.show-missing .btn{margin-top:18px}

@media (max-width:900px){
  /* the portrait crop takes the full width here, which is the shape it was
     drawn for — a poster above the text rather than a column beside it */
  .sh-grid{grid-template-columns:1fr}
  .sh-art{max-width:min(420px,72vw);margin:0 auto 6px}
  .show-hero{padding-top:28px}
  .sh-title{text-align:center}
  .sh-chan{display:block;margin-inline:auto}
  .sh-chan img{margin-inline:auto}
  .sh-state{justify-content:center}
  .show-hero .tv-bar{max-width:none}
  .sh-desc{text-align:center;margin-inline:auto}
  .sh-actions{justify-content:center}
  .sh-facts{justify-content:center;text-align:center}
}

@media (max-width:640px){
  .sh-cards{grid-template-columns:repeat(2,1fr);gap:14px}
  .sh-when{padding:34px 0 18px}
  .sh-slot{padding:13px 15px}
  .tvg-go{display:none}
  /* a full-width button per action reads better than two half ones at this
     width, and matches how .btn already behaves elsewhere on a phone */
  .sh-actions{flex-direction:column;align-items:stretch}
}

@media (prefers-reduced-motion:reduce){
  .sh-card,.sh-card-art,.tvg-go{transition:none}
  .sh-card:hover .sh-card-art{transform:none}
}
.tvg-all{margin:0 0 22px;text-align:center;font-size:.9rem;font-weight:800}
.tvg-all a{color:var(--accent);display:inline-flex;align-items:center;gap:8px;padding:6px 4px}
.tvg-all a:hover{text-decoration:underline}
.tvg-all i{font-size:.75rem}

/* Programmes joins the menus. The header now carries five destinations, so the
   gap tightens a little before the phone breakpoint rather than letting the row
   collide with the search button — the same failure the logo had. */
.bn-sheet a.active{background:rgba(255,255,255,.12);color:var(--accent)}

/* ===========================================================================
   The homepage — fifteen sections.

   Two ideas carry the whole page. Every section owns a --ch accent so the four
   channels and seven stations stay distinguishable in a long scroll, and every
   horizontal shelf is a real overflow scroller with scroll-snap rather than a
   scripted carousel: it works with a trackpad, a finger, a keyboard and a
   screen reader without any of them being special-cased.
   =========================================================================== */

.hs{padding:56px 0;--ch:var(--accent)}
.hs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  margin-bottom:24px}
.hs-title{margin:0;font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:-.025em;text-wrap:balance}
.hs-sub{margin:8px 0 0;max-width:62ch;font-size:.98rem}
.hs-sub2{margin:26px 0 12px;font-size:.76rem;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.hs-note{margin:16px 0 0;font-size:.84rem;max-width:70ch}
/* An attribution has to be legible to count as one, so this is quieter than
   body text but not decorative — .72rem at 68% is still readable, and the
   links keep the accent so a reader can follow them back to the source. */
/* The footer credit sits above the copyright line and reads as a note, not
   as a second paragraph of the page. */
.foot-credit{margin:18px auto 10px;max-width:72ch;font-size:.72rem;line-height:1.6;opacity:.6}
.foot-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hs-credit{margin:10px 0 0;font-size:.72rem;line-height:1.5;max-width:78ch;opacity:.68}
.hs-credit a{color:var(--accent,#c21fb0);text-decoration:underline;text-underline-offset:2px}
.hs-credit a:hover{opacity:.8}
/* the section number, france.tv's device for making a long page navigable */
.hs-n{flex:none;font-size:.8rem;font-weight:900;letter-spacing:.1em;color:var(--ch);
  opacity:.75;font-variant-numeric:tabular-nums;padding-top:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- shelves ------------------------------------------------------------- */
.rail{margin:0 calc(50% - 50vw);padding:4px calc(50vw - 50%);overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:thin;
  /* Snap points align to the SCROLLPORT edge, not the padding edge — without
     this the first card snaps flush to the window and loses the inset that
     lines the shelf up with the heading above it. */
  scroll-padding-inline:calc(50vw - 50%);
  scrollbar-color:rgba(255,255,255,.22) transparent}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:99px}
.rail-track{display:flex;gap:16px;padding-bottom:12px}
.rail-track>*{flex:0 0 auto;scroll-snap-align:start}

/* ---- 1. hero ------------------------------------------------------------- */
.hero-slider{position:relative;min-height:min(74vh,660px);display:grid;isolation:isolate}
.hero-slides{position:relative;grid-area:1/1;min-height:inherit}
.hero-slide{position:absolute;inset:0;display:grid;align-items:end;opacity:0;
  visibility:hidden;transition:opacity .6s ease;--ch:var(--accent)}
.hero-slide.is-on{opacity:1;visibility:visible;position:relative}
.hero-bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;opacity:.85}
/* The scrim is heavy on the left, where the text sits, and clears on the right
   so the cover is actually visible. At .55 opacity under a flat wash the
   artwork read as a smudge and the hero looked like it had no image at all. */
.hero-slide:after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#04040a 6%,rgba(4,4,10,.88) 34%,rgba(4,4,10,.34) 68%,rgba(4,4,10,.12)),
             linear-gradient(0deg,#04040a 1%,rgba(4,4,10,.15) 42%,transparent 62%)}
.hero-inner{width:min(1180px,92vw);margin:auto;padding:80px 0 56px}
.hero-mark{display:inline-block;margin-bottom:16px}
.hero-mark img{height:32px;width:auto;max-width:210px;object-fit:contain;display:block}
.hero-kick{margin:0 0 8px;font-size:.74rem;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ch)}
.hero-h{margin:0 0 14px;font-size:clamp(2.4rem,7vw,4.6rem);line-height:.98;
  letter-spacing:-.04em;text-wrap:balance;max-width:16ch}
.hero-desc{margin:0 0 14px;max-width:54ch;font-size:1.05rem;line-height:1.7;color:#e8e8f0}
.hero-meta{margin:0 0 24px;font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-play{background:var(--ch);border-color:transparent;color:#08080c}
.hero-play:hover{filter:brightness(1.08)}
/* margin-block has to be reset explicitly: this element is also a .wrap, and
   .wrap sets `margin:auto`, whose auto TOP and BOTTOM margins beat align-self
   in a grid — the dots were centring in the hero instead of sitting under it. */
.hero-foot{grid-area:1/1;align-self:end;margin-block:auto 0;display:flex;align-items:center;
  justify-content:space-between;padding-bottom:22px;pointer-events:none;z-index:2}
.hero-dots{display:flex;gap:9px;pointer-events:auto}
.hero-dot{width:30px;height:4px;border:0;padding:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.26);transition:background .2s,width .2s}
.hero-dot.is-on{background:#fff;width:46px}
.hero-dot:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* ---- 2. portrait shelf ---------------------------------------------------- */
.rail-portrait .pcard{width:186px}
.pcard{--ch:var(--accent);display:block}
.pcard-art{position:relative;display:grid;place-items:center;aspect-ratio:2/3;overflow:hidden;
  border-radius:14px;margin-bottom:10px;font-size:1.7rem;color:#08080c;
  background:linear-gradient(150deg,color-mix(in srgb,var(--ch) 62%,transparent),
    color-mix(in srgb,var(--ch) 12%,transparent));
  border:1px solid transparent;transition:border-color .16s,transform .16s}
.pcard-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pcard-art.bare img{display:none}
.pcard:hover .pcard-art{border-color:var(--ch);transform:translateY(-3px)}
.pcard:focus-visible .pcard-art{outline:2px solid var(--ch);outline-offset:3px}
.pcard b{display:block;font-size:.92rem;line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pcard .muted{display:block;font-size:.78rem;margin-top:2px}

/* ---- 3. live -------------------------------------------------------------- */
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.live-card{--ch:var(--accent);display:flex;flex-direction:column;gap:14px;padding:16px;
  border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  transition:border-color .16s,background .16s}
.live-card:hover{border-color:var(--ch);background:rgba(255,255,255,.07)}
.live-card:focus-visible{outline:2px solid var(--ch);outline-offset:2px}
.live-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:30px}
.live-mark{height:26px;width:auto;max-width:130px;object-fit:contain;display:block}
.live-mark.is-fm{height:30px;border-radius:6px;object-fit:cover;max-width:118px}
.live-pill{font-style:normal;display:inline-flex;align-items:center;gap:6px;font-size:.62rem;
  font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ch)}
.live-pill .tv-dot{background:var(--ch)}
.live-body b{display:block;font-size:1rem;line-height:1.35;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.live-body .muted{display:block;font-size:.83rem;margin-top:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---- 4. categories -------------------------------------------------------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.cat{--ch:var(--accent);display:flex;align-items:center;gap:13px;padding:17px 16px;
  border-radius:14px;border:1px solid var(--line);font-weight:800;
  background:linear-gradient(120deg,color-mix(in srgb,var(--ch) 20%,transparent),transparent 78%);
  transition:border-color .16s,transform .16s}
.cat i{font-size:1.15rem;color:var(--ch);width:24px;text-align:center}
.cat:hover{border-color:var(--ch);transform:translateY(-2px)}
.cat:focus-visible{outline:2px solid var(--ch);outline-offset:2px}

/* ---- 5,6,8,10. charts ----------------------------------------------------- */
.chart-wait{margin:0;padding:22px 0;max-width:64ch}
.chart-week{margin:0 0 16px;font-size:.86rem;color:var(--muted)}
.chart-week a{color:var(--accent);text-decoration:underline}
.crank{position:relative;width:184px;display:block}
.rail-poster .crank{width:212px}
/* The oversized outlined rank is what makes a top 10 read as a chart rather
   than as another shelf of cards.

   WHERE it sits depends on what is under it. Album art from the play log is a
   picture, so the numeral sits low over it. The all-time posters carry their
   own title and artist across the bottom third, and a numeral there printed
   straight through them — so on those it goes to the top corner, into the
   empty part of the composition. */
.crank-n{position:absolute;left:-6px;bottom:64px;z-index:2;font-size:4.6rem;font-weight:1000;
  line-height:.8;letter-spacing:-.07em;color:#08080c;
  -webkit-text-stroke:2px rgba(255,255,255,.92);text-stroke:2px rgba(255,255,255,.92);
  font-variant-numeric:tabular-nums;pointer-events:none;
  text-shadow:0 4px 18px rgba(0,0,0,.6)}
.rail-poster .crank-n{bottom:auto;top:6px;right:8px;left:auto;font-size:4.2rem;
  color:rgba(8,8,12,.34);-webkit-text-stroke:2px rgba(255,255,255,.95);
  text-stroke:2px rgba(255,255,255,.95)}
.crank-art{position:relative;display:grid;place-items:center;aspect-ratio:1;overflow:hidden;
  border-radius:12px;margin-bottom:10px;font-size:1.5rem;color:#08080c;
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 55%,transparent),
    color-mix(in srgb,var(--accent) 12%,transparent));
  border:1px solid transparent;transition:border-color .16s,transform .16s}
.crank-art.is-tall{aspect-ratio:2/3}
.crank-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.crank:hover .crank-art{border-color:var(--accent);transform:translateY(-3px)}
.crank:focus-visible{outline:none}
.crank:focus-visible .crank-art{outline:2px solid var(--accent);outline-offset:3px}
.crank b{display:block;font-size:.92rem;line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;padding-left:2px}
.crank .muted{display:block;font-size:.78rem;margin-top:2px;padding-left:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crank-plays{display:block;font-size:.72rem;font-weight:800;letter-spacing:.05em;
  color:var(--accent);margin-top:4px;padding-left:2px}

/* ---- 7. newsletter -------------------------------------------------------- */
.nl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  max-width:640px}
.nl-field{display:block;min-width:0}
.nl input{width:100%;padding:17px 19px;border-radius:14px;border:1px solid var(--line);
  background:#0b0b10;color:#fff;font:inherit}
.nl input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:transparent}
.nl-go{background:var(--accent);border-color:transparent;color:#fff;cursor:pointer;
  font:inherit;font-weight:900;white-space:nowrap}
.nl-go:hover{filter:brightness(1.1)}
.nl-msg,.nl-note{grid-column:1/-1;margin:0;font-size:.85rem}
.nl-msg:empty{display:none}
.nl-msg.is-bad{color:#ff8b93;font-weight:700}
.nl-msg.is-warn{color:#ffd06b;font-weight:700}

/* ---- 9. tonight ----------------------------------------------------------- */
.tn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.tn-col{--ch:var(--accent);border:1px solid var(--line);border-radius:16px;padding:16px;
  background:rgba(255,255,255,.03)}
.tn-head{display:block;padding-bottom:12px;margin-bottom:6px;
  border-bottom:2px solid var(--ch)}
.tn-head img{height:24px;width:auto;max-width:140px;object-fit:contain;display:block}
.tn-list{list-style:none;margin:0;padding:0}
.tn-list a{display:flex;gap:12px;padding:10px 4px;border-radius:9px;font-size:.9rem}
.tn-list a:hover{background:rgba(255,255,255,.06)}
.tn-list b{flex:none;color:var(--ch);font-variant-numeric:tabular-nums}
.tn-list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- 11. archive ---------------------------------------------------------- */
.arch{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.arch-set{border:1px solid var(--line);border-radius:16px;padding:18px;
  background:rgba(255,255,255,.03)}
.arch-set h3{margin:0 0 6px;font-size:1.05rem}
.arch-count{font-size:.8rem;margin:0 0 14px}
.arch-weeks{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.arch-weeks li{display:flex;align-items:baseline;gap:10px;font-size:.85rem;
  padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.04)}
.arch-weeks li.is-now{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.arch-weeks b{flex:none;font-variant-numeric:tabular-nums}
.arch-weeks .muted{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arch-weeks em{margin-left:auto;font-style:normal;font-size:.68rem;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);flex:none}

/* ---- 12. artists ---------------------------------------------------------- */
.rail-round .acard{width:132px;text-align:center}
.acard-art{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;
  overflow:hidden;margin-bottom:10px;font-size:1.6rem;color:#08080c;
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 55%,transparent),
    color-mix(in srgb,var(--accent) 12%,transparent));
  border:2px solid transparent;transition:border-color .16s,transform .16s}
.acard-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.acard:hover .acard-art{border-color:var(--accent);transform:translateY(-3px)}
.acard b{display:block;font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard .muted{display:block;font-size:.74rem}

/* ---- 13,14,15 ------------------------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;
  align-items:start}
.mini-row{display:flex;align-items:center;gap:14px;padding:13px 14px;border-radius:12px;
  border:1px solid var(--line);margin-bottom:8px;font-size:.92rem;
  transition:border-color .16s,background .16s}
.mini-row:hover{border-color:var(--ch,var(--accent));background:rgba(255,255,255,.05)}
.mini-row b{flex:none;color:var(--ch,var(--accent));font-variant-numeric:tabular-nums}
.mini-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-row i{flex:none;font-size:.75rem;color:var(--muted)}
.pray-card{border:1px solid var(--line);border-radius:18px;padding:26px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--ch,var(--accent)) 22%,transparent),
    rgba(255,255,255,.02))}
.pray-card i{font-size:1.9rem;color:var(--ch,var(--accent));margin-bottom:12px;display:block}
.pray-card h3{margin:0 0 8px;font-size:1.3rem}
.pray-card .btn{margin-top:16px;background:var(--ch,var(--accent));border-color:transparent}

.rail-wide .scard{width:264px}
.scard-art{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;
  border-radius:12px;margin-bottom:10px;font-size:1.5rem;color:#08080c;
  background:linear-gradient(140deg,color-mix(in srgb,var(--ch,var(--accent)) 55%,transparent),
    color-mix(in srgb,var(--ch,var(--accent)) 12%,transparent));
  border:1px solid transparent;transition:border-color .16s,transform .16s}
.scard-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scard:hover .scard-art{border-color:var(--ch,var(--accent));transform:translateY(-3px)}
.scard b{display:block;font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scard .muted{display:block;font-size:.78rem;margin-top:2px}

.ev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.ev{border:1px solid var(--line);border-radius:16px;padding:22px;background:rgba(255,255,255,.03)}
.ev i{font-size:1.7rem;color:var(--accent);margin-bottom:14px;display:block}
.ev b{display:block;margin-bottom:6px;font-size:1.05rem}
.ev p{margin:0;font-size:.88rem}
.ev-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

@media (max-width:900px){
  .hs{padding:40px 0}
  .hero-slider{min-height:auto}
  .hero-inner{padding:56px 0 44px}
  .hero-h{max-width:none}
  .hero-slide:after{background:linear-gradient(0deg,#04040a 6%,rgba(4,4,10,.62) 52%,rgba(4,4,10,.35))}
  .hero-foot{padding-bottom:16px}
  .live-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media (max-width:640px){
  .hs-head{align-items:center}
  .hs-n{display:none}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .live-grid{grid-template-columns:1fr 1fr;gap:10px}
  .live-card{padding:13px;gap:10px}
  .rail-portrait .pcard{width:142px}
  .crank{width:150px}
  .rail-poster .crank{width:168px}
  .crank-n{font-size:3.4rem;bottom:58px}
  .rail-poster .crank-n{font-size:3rem;bottom:auto;top:4px}
  .nl{grid-template-columns:1fr}
  .hero-btns .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none}
  .pcard-art,.crank-art,.cat,.acard-art,.scard-art,.live-card{transition:none}
  .pcard:hover .pcard-art,.crank:hover .crank-art,.cat:hover,
  .acard:hover .acard-art,.scard:hover .scard-art{transform:none}
  .rail{scroll-behavior:auto}
}
/* the editorial line under an all-time entry: two lines, not clipped to one */
.rail-poster .crank-note{white-space:normal;overflow:visible;font-size:.76rem;line-height:1.45;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;min-height:2.2em}

/* ===========================================================================
   Sharing, and the quote of the day.
   =========================================================================== */

/* ---- the share control on a chart entry ---------------------------------- */
.crank{position:relative}
.crank-go{display:block}
.ent-share{position:absolute;right:8px;bottom:8px;z-index:3;width:36px;height:36px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(6,6,12,.72);color:#fff;
  backdrop-filter:blur(6px);font-size:.82rem;opacity:0;transform:translateY(4px);
  transition:opacity .16s,transform .16s,background .16s}
.crank:hover .ent-share,.ent-share:focus-visible{opacity:1;transform:none}
.ent-share:hover{background:var(--accent);border-color:transparent}
.ent-share:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* a hover-only control is unreachable on a touch screen */
@media (hover:none){ .ent-share{opacity:1;transform:none} }

/* ---- the share sheet ------------------------------------------------------ */
body.shs-open{overflow:hidden}
.sh-sheet{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
/* The `hidden` ATTRIBUTE only works because the UA stylesheet says
   [hidden]{display:none} — and any author rule setting display beats it. The
   line above sets display:grid, so `sheet.hidden = true` did nothing at all and
   the close button appeared broken. Same trap as `margin:auto` beating
   align-self: an author declaration outranks the thing you assume is built in. */
.sh-sheet[hidden]{display:none}
.shs-scrim{position:absolute;inset:0;background:rgba(3,3,8,.78);backdrop-filter:blur(6px)}
.shs-box{position:relative;width:min(760px,100%);max-height:min(88vh,760px);overflow:auto;
  background:#0e0e15;border:1px solid var(--line);border-radius:20px;
  box-shadow:0 40px 90px rgba(0,0,0,.6)}
.shs-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:#0e0e15;z-index:1}
.shs-title{margin:0;font-size:1.15rem}
.shs-x{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;font-size:1rem}
.shs-x:hover{background:rgba(255,255,255,.12)}
.shs-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shs-body{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;padding:22px}
.shs-preview img{width:100%;border-radius:12px;display:block;border:1px solid var(--line)}
.shs-right{min-width:0}
.shs-cap-label{display:block;font-size:.7rem;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.shs-cap{width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:#08080d;color:#fff;font:inherit;font-size:.9rem;line-height:1.6;resize:vertical}
.shs-cap:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:transparent}
.shs-nets{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;
  margin-top:14px}
.shs-net{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 12px;
  border-radius:12px;border:1px solid var(--line);cursor:pointer;font:inherit;
  font-weight:800;font-size:.88rem;color:#fff;background:rgba(255,255,255,.05);
  transition:background .15s,border-color .15s}
.shs-net:hover{background:rgba(255,255,255,.12)}
.shs-net:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.shs-net.is-fb:hover{background:#1877f2;border-color:transparent}
.shs-net.is-x:hover{background:#000;border-color:rgba(255,255,255,.4)}
.shs-net.is-ig:hover{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);border-color:transparent}
.shs-net.is-tt:hover{background:#000;border-color:#25f4ee}
.shs-note{margin:12px 0 0;font-size:.8rem;line-height:1.55}
.shs-msg{margin:10px 0 0;font-size:.86rem;font-weight:700;min-height:1.2em}
.shs-msg.is-ok{color:#7ee2a8}
.shs-msg.is-warn{color:#ffd06b}

/* ---- quote of the day ----------------------------------------------------- */
.qod-card{position:relative;border:1px solid var(--line);border-radius:20px;padding:34px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 16%,transparent),
    rgba(255,255,255,.02));overflow:hidden}
.qod-kind{display:inline-block;font-size:.66rem;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:#08080c;background:var(--accent);
  padding:5px 11px;border-radius:999px;margin-bottom:20px}
.qod-mark{position:absolute;right:26px;top:20px;font-size:5rem;color:#fff;opacity:.06}
.qod-q{margin:0 0 22px;padding:0 0 0 18px;border-left:3px solid rgba(255,255,255,.16)}
.qod-q.is-lead{border-left-color:var(--accent)}
.qod-q p{margin:0;font-size:1.02rem;line-height:1.7;color:#e9e9f2}
.qod-q.is-lead p{font-size:clamp(1.15rem,2.4vw,1.6rem);line-height:1.5;color:#fff;
  font-weight:600;text-wrap:balance}
.qod-lang{display:block;font-size:.64rem;font-weight:900;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.qod-q cite{display:block;margin-top:8px;font-style:normal;font-size:.86rem;
  font-weight:800;color:var(--muted)}
.qod-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:18px;
  border-top:1px solid var(--line)}
.qod-date{font-size:.8rem;font-variant-numeric:tabular-nums}
.qod-src{font-size:.8rem;text-decoration:underline}
.qod-share{margin-left:auto}

@media (max-width:700px){
  .shs-body{grid-template-columns:1fr;padding:18px}
  .shs-preview img{max-width:200px;margin:0 auto}
  .shs-nets{grid-template-columns:1fr 1fr}
  .qod-card{padding:22px}
  .qod-mark{font-size:3.4rem;right:14px;top:12px}
  .qod-share{margin-left:0;width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){ .ent-share{transition:none} }

/* ===========================================================================
   Football highlights — 40 competitions, three languages.
   =========================================================================== */

.hl-head{padding:44px 0 8px}
.hl-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  flex-wrap:wrap;margin-bottom:22px}
.hl-head h1{margin:0 0 8px;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.03em}
.hl-lead{margin:0;max-width:62ch}

.hl-langs{display:flex;gap:6px;flex:none;padding:5px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.04)}
.hl-lang{padding:9px 14px;border:0;border-radius:10px;cursor:pointer;font:inherit;
  font-weight:800;font-size:.85rem;color:var(--muted);background:none;transition:background .15s}
.hl-lang:hover{color:#fff}
.hl-lang.is-on{background:var(--accent);color:#fff}
.hl-lang:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.hl-filters{display:flex;gap:8px;margin-bottom:18px}
.hl-g{padding:10px 20px;border-radius:999px;cursor:pointer;font:inherit;font-weight:800;
  font-size:.88rem;color:#fff;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.hl-g:hover{background:rgba(255,255,255,.1)}
.hl-g.is-on{background:#fff;color:#08080c;border-color:transparent}
.hl-g:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The competition strip scrolls rather than wrapping into a wall of forty
   buttons — full-bleed so it reads as a rail, with the same padded snap the
   homepage shelves use. */
.hl-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px calc(50vw - 50%) 14px;
  margin:0 calc(50% - 50vw);scroll-snap-type:x proximity;
  scroll-padding-inline:calc(50vw - 50%);scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent}
.hl-tabs::-webkit-scrollbar{height:8px}
.hl-tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:99px}
.hl-tab{--ch:var(--accent);flex:0 0 auto;scroll-snap-align:start;display:inline-flex;
  align-items:center;gap:8px;padding:11px 17px;border-radius:12px;cursor:pointer;
  font:inherit;font-weight:800;font-size:.86rem;color:#fff;white-space:nowrap;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  border-left:3px solid var(--ch);transition:background .15s,border-color .15s}
.hl-tab:hover{background:rgba(255,255,255,.1)}
.hl-tab.is-on{background:var(--ch);border-color:transparent;color:#fff}
.hl-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hl-w{font-style:normal;font-size:.62rem;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:999px;
  background:rgba(255,255,255,.18)}
.hl-tab.is-on .hl-w{background:rgba(0,0,0,.28)}

.hl-board{--ch:var(--accent);padding:26px 0 70px}
.hl-bhead{margin-bottom:24px;padding-bottom:18px;border-bottom:2px solid var(--ch)}
.hl-bhead h2{margin:0 0 6px;font-size:clamp(1.4rem,3.4vw,2.2rem);letter-spacing:-.02em}
.hl-bhead h2 em{font-style:normal;font-size:.5em;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ch);vertical-align:middle;margin-left:8px}
.hl-bhead p{margin:0;max-width:70ch}
.hl-note{display:flex;align-items:flex-start;gap:9px;margin-top:12px;font-size:.85rem}
.hl-note i{color:var(--ch);margin-top:3px;flex:none}

.hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px}
.hlc{position:relative;min-width:0}
.hlc-play{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  position:relative}
.hlc-shot{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;
  overflow:hidden;background:rgba(255,255,255,.06);
  border:1px solid transparent;transition:border-color .16s,transform .16s}
.hlc-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hlc-shot i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;display:grid;place-items:center;border-radius:50%;
  background:rgba(6,6,12,.68);backdrop-filter:blur(6px);color:#fff;font-size:1.1rem;
  border:1px solid rgba(255,255,255,.3);transition:background .16s,transform .16s}
.hlc-play:hover .hlc-shot{border-color:var(--ch);transform:translateY(-2px)}
.hlc-play:hover .hlc-shot i{background:var(--ch);transform:translate(-50%,-50%) scale(1.06)}
.hlc-play:focus-visible .hlc-shot{outline:2px solid var(--ch);outline-offset:3px}
.hlc-len{position:absolute;right:9px;bottom:9px;font-style:normal;font-size:.72rem;
  font-weight:800;padding:3px 8px;border-radius:6px;background:rgba(4,4,10,.84);
  font-variant-numeric:tabular-nums}
.hlc-rank{position:absolute;left:-4px;top:-8px;z-index:2;font-size:2.6rem;font-weight:1000;
  line-height:1;letter-spacing:-.05em;color:#08080c;
  -webkit-text-stroke:2px rgba(255,255,255,.95);text-stroke:2px rgba(255,255,255,.95);
  font-variant-numeric:tabular-nums;pointer-events:none;text-shadow:0 3px 14px rgba(0,0,0,.6)}
.hlc-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;display:block}

.hlc-body{padding-top:12px}
.hlc-body b{display:block;font-size:.96rem;line-height:1.4;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
  overflow:hidden}
.hlc-meta{display:block;font-size:.79rem;margin-top:5px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.hlc-acts{display:flex;align-items:center;gap:14px;margin-top:10px}
.hlc-src,.hlc-share{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;
  font-weight:800;color:var(--muted);background:none;border:0;padding:4px 0;cursor:pointer;
  font-family:inherit}
.hlc-src:hover,.hlc-share:hover{color:var(--ch)}
.hlc-src:focus-visible,.hlc-share:focus-visible{outline:2px solid var(--ch);
  outline-offset:3px;border-radius:6px}
.hlc-share{margin-left:auto}
.hlc-src i{font-size:.68rem}

@media (max-width:640px){
  .hl-head{padding-top:26px}
  .hl-top{flex-direction:column;gap:16px}
  .hl-langs{width:100%}
  .hl-lang{flex:1}
  .hl-grid{grid-template-columns:1fr;gap:18px}
  .hlc-rank{font-size:2.1rem}
}
@media (prefers-reduced-motion:reduce){
  .hlc-shot,.hlc-shot i,.hl-tab{transition:none}
  .hlc-play:hover .hlc-shot{transform:none}
  .hlc-play:hover .hlc-shot i{transform:translate(-50%,-50%)}
}

/* ===========================================================================
   The `hidden` attribute, made reliable.

   [hidden]{display:none} lives only in the user-agent stylesheet, so ANY author
   rule that sets display beats it. That is why the share sheet's close button
   did nothing (.sh-sheet sets display:grid) and why the highlight play button
   stayed on top of the video once it started (.hlc-play sets display:block).
   Both were invisible in code review because the JavaScript was correct.

   This is the standard fix, and !important is warranted: the attribute means
   "not rendered", and nothing should be able to argue with it.
   =========================================================================== */
[hidden]{display:none !important}
.shs-net.is-wa:hover{background:#25d366;border-color:transparent;color:#08130b}
.shs-net.is-em:hover{background:#3d6fd6;border-color:transparent}
/* The generated live-chart cards are 4:5, not the 2:3 of the pre-rendered
   posters. Sharing a 2:3 slot cropped their sides and cut the title in half. */
.rail-45 .crank-art.is-tall{aspect-ratio:4/5}
.rail-45 .crank{width:196px}
@media (max-width:640px){ .rail-45 .crank{width:156px} }
/* The generated card draws its own rank badge, so the CSS numeral would print a
   second one over it. The pre-rendered all-time posters do NOT, which is why
   this only applies to the live-chart rails. */
.rail-45 .crank-n{display:none}
/* the week picker on a competition board */
.hl-bhead-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hl-weeks select{padding:10px 14px;border-radius:12px;border:1px solid var(--line);
  background:#0b0b10;color:#fff;font:inherit;font-weight:800;font-size:.86rem;cursor:pointer;
  font-variant-numeric:tabular-nums;max-width:min(320px,70vw)}
.hl-weeks select:focus-visible{outline:2px solid var(--ch,var(--accent));outline-offset:2px}
@media (max-width:640px){ .hl-bhead-top{flex-direction:column;align-items:stretch} .hl-weeks select{width:100%} }
.nl-msg.is-ok{color:#7ee2a8;font-weight:700}

/* ---- footer -------------------------------------------------------------
   A sitemap, in the shape france.tv uses: short link columns under bold
   headings, then a strip for the small print. What makes it read as the base
   of the page rather than one more section is tonal stepping, not rules —
   page, then a panel a step lighter, then a strip lighter again. Our palette,
   their structure.
   ------------------------------------------------------------------------ */
.foot-main{background:#101015;border-top:1px solid var(--line);padding:52px 0 40px}
.foot-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 28px}
.fcol{display:flex;flex-direction:column;gap:11px;min-width:0}
.fcol h3{margin:0 0 5px;font-size:15px;font-weight:800;color:#fff;letter-spacing:-.01em}
.fcol a{font-size:13px;line-height:1.35;color:var(--muted);
  /* the columns are narrow and several labels are two words, so a long one
     wraps rather than forcing the grid wider */
  overflow-wrap:anywhere}
.fcol a:hover{color:var(--accent)}

.foot-social{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:42px;padding-top:28px;border-top:1px solid var(--line)}
.foot-social>span{font-size:13px;font-weight:800;color:var(--muted)}
.foot-social .social a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:16px;background:rgba(255,255,255,.05);color:var(--muted)}
.foot-social .social a:hover{color:#fff;border-color:var(--accent)}

.foot-legal{background:#1b1b24;padding:22px 0}
.foot-legal p{margin:0}
/* An attribution has to be legible to count as one: quieter than body text,
   but not hidden. The links keep an underline so they read as sources. */
.foot-credit{font-size:12px;line-height:1.65;color:var(--muted);max-width:104ch}
.foot-credit a{text-decoration:underline;text-underline-offset:2px}
.foot-credit a:hover{color:var(--accent)}
.foot-copy{margin-top:10px!important;font-size:12px;color:var(--muted);opacity:.75}

@media(max-width:1080px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
  .foot-main{padding:38px 0 30px}
  .foot-social{margin-top:32px;padding-top:22px}
}

/* the policy row in the bottom strip */
.foot-policy{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:16px}
.foot-policy a{font-size:12px;font-weight:700;color:#fff}
.foot-policy a:hover{color:var(--accent)}

/* ---- policy pages -------------------------------------------------------
   Long-form reading, so the measure is narrow and the rhythm is generous.
   These are the only pages on the site someone reads straight down. */
.legal{padding:56px 0 72px}
.legal .wrap{max-width:74ch}
.legal-eyebrow{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:900;color:var(--accent)}
.legal h1{font-size:clamp(34px,5vw,52px);line-height:1.05;margin:10px 0 6px;
  letter-spacing:-.03em}
.legal-date{margin:0 0 40px;font-size:13px;color:var(--muted)}
.legal h2{font-size:23px;margin:44px 0 12px;letter-spacing:-.01em}
.legal h3{font-size:17px;margin:28px 0 8px;color:#fff}
.legal p,.legal li{color:#d7d7e2;line-height:1.75;font-size:15.5px}
.legal p{margin:0 0 14px}
.legal ul,.legal ol{margin:0 0 16px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal code{background:rgba(255,255,255,.08);border-radius:5px;padding:1px 6px;font-size:.92em}
.legal-foot{margin-top:48px!important;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted)}

/* A field the operator still has to supply. Deliberately loud: a policy that
   ships with an invented address is worse than one that admits the gap. */
.todo{border:1px solid rgba(255,200,47,.45);background:rgba(255,200,47,.08);
  border-left:4px solid var(--sport);border-radius:12px;padding:14px 16px;
  margin:14px 0 22px!important;font-size:14px!important;color:#ffe9a8!important}
.todo strong{color:var(--sport)}
.todo a{color:#ffe9a8}

.ltab{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:14px;display:block;
  overflow-x:auto}
.ltab th,.ltab td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  vertical-align:top}
.ltab th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ltab td{color:#d7d7e2;line-height:1.6}

/* ---- account -------------------------------------------------------------
   The one signed-in surface on the site. Two shapes: an auth card when signed
   out (copy on the left explaining why an account is worth having, form on the
   right), and a sidebar-plus-panel dashboard when signed in.
   ------------------------------------------------------------------------ */
.acc{padding:48px 0 80px}
.acc h1{font-size:clamp(30px,4.4vw,46px);line-height:1.05;letter-spacing:-.03em;margin:8px 0}
.acc h2{font-size:24px;margin:0 0 8px;letter-spacing:-.01em}
.acc h3{font-size:16px;margin:0 0 6px}
.acc-eyebrow{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:900;color:var(--accent)}
.acc-busy{padding:80px 0;text-align:center}

/* the gate: no keys yet, or the service is down */
.acc-gate{max-width:56ch;margin:40px auto;text-align:center}
.acc-gate-i{font-size:40px;color:var(--accent);margin-bottom:18px}
.acc-gate h1{font-size:clamp(26px,3.6vw,38px)}
.acc-gate p{margin:0 0 16px}
.acc-gate-tech{font-size:13px;opacity:.75}
.acc-gate code{background:rgba(255,255,255,.08);border-radius:5px;padding:1px 6px}

/* signed out */
.acc-auth{display:grid;grid-template-columns:1fr minmax(0,420px);gap:56px;align-items:center}
.acc-auth-copy p{max-width:46ch}
.acc-why{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.acc-why li{display:flex;align-items:center;gap:12px;color:#d7d7e2;font-size:15px}
.acc-why i{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:rgba(255,255,255,.07);color:var(--accent);font-size:14px}
.acc-auth-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:28px}
.acc-tabs{display:flex;gap:6px;background:rgba(255,255,255,.05);border-radius:14px;
  padding:5px;margin-bottom:22px}
.acc-tabs button{flex:1;padding:11px;border:0;border-radius:10px;background:transparent;
  color:var(--muted);font:inherit;font-weight:800;font-size:14px;cursor:pointer}
.acc-tabs button.on{background:rgba(255,255,255,.1);color:#fff}

/* forms */
.acc-form{display:grid;gap:15px}
.acc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.acc-wide{grid-column:1/-1}
.acc-field{display:grid;gap:7px;min-width:0}
.acc-field>span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:800;color:var(--muted)}
.acc-field input,.acc-field select{width:100%;padding:14px 15px;border-radius:13px;
  border:1px solid var(--line);background:#0b0b10;color:#fff;font:inherit;font-size:15px}
.acc-field input:focus,.acc-field select:focus{outline:2px solid var(--accent);
  outline-offset:1px;border-color:transparent}
.acc-field input:disabled{opacity:.55}
.acc-check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:#d7d7e2;
  line-height:1.6}
.acc-check input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--accent)}
.acc-hint{font-size:12px;margin:-6px 0 0}
.acc-link{background:none;border:0;color:var(--accent);font:inherit;font-size:13px;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:0;
  justify-self:start}
.acc-note{margin:10px 0 0;font-size:13.5px;line-height:1.55;min-height:1px}
.acc-note.is-bad{color:#ff9aa2}
.acc-note.is-ok{color:#8ff0b6}

/* signed in */





.acc-body{display:grid;grid-template-columns:236px minmax(0,1fr);gap:34px;align-items:start}
.acc-side{display:grid;gap:5px;position:sticky;top:100px}
.acc-side button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 15px;border:0;border-radius:14px;background:transparent;color:var(--muted);
  font:inherit;font-weight:700;font-size:14.5px;cursor:pointer}
.acc-side button i{width:17px;text-align:center;font-size:14px}
.acc-side button:hover{background:rgba(255,255,255,.05);color:#fff}
.acc-side button.on{background:rgba(123,53,255,.16);color:#fff}
.acc-panel{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;
  min-width:0}
.acc-panel>p:first-of-type{margin-top:0}
.acc-panel .acc-form{margin-top:22px}
.acc-danger{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.acc-danger .btn{margin-top:8px}

/* liked songs */
.acc-liked{display:grid;gap:9px;margin-top:20px}
.acc-song{display:flex;align-items:center;gap:14px;padding:9px;border-radius:15px;
  background:rgba(255,255,255,.04);border:1px solid var(--line)}
.acc-song:hover{border-color:var(--accent)}
.acc-song img,.acc-song-tile{width:52px;height:52px;flex:none;border-radius:11px;object-fit:cover}
.acc-song-tile{display:grid;place-items:center;background:rgba(255,255,255,.08);color:var(--muted)}
.acc-song-t{display:grid;gap:2px;min-width:0}
.acc-song-t b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-song-t em{font-style:normal;font-size:12.5px;color:var(--muted)}
.acc-unlike{margin-left:auto;width:34px;height:34px;flex:none;border-radius:50%;border:0;
  background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer}
.acc-unlike:hover{background:rgba(255,120,130,.18);color:#ff9aa2}

/* my prayers */
.acc-prayers{display:grid;gap:11px;margin-top:20px}
.acc-prayer{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;
  padding:17px 19px}
.acc-prayer p{margin:0;color:#d7d7e2;line-height:1.7;font-size:15px}
.acc-prayer-m{margin-top:9px!important;font-size:12.5px}
.acc-foot-link{margin-top:24px}

@media(max-width:900px){
  .acc-auth{grid-template-columns:1fr;gap:32px}
  .acc-body{grid-template-columns:1fr;gap:22px}
  /* the sidebar becomes a scrolling row of chips — a 5-item vertical nav above
     the panel would push the content itself off the first screen */
  .acc-side{position:static;grid-auto-flow:column;grid-auto-columns:max-content;
    overflow-x:auto;gap:8px;padding-bottom:6px;scrollbar-width:none}
  .acc-side::-webkit-scrollbar{display:none}
  .acc-side button{white-space:nowrap;background:rgba(255,255,255,.05);padding:11px 15px}
  .acc-grid2{grid-template-columns:1fr}
  .acc-panel{padding:22px 18px;border-radius:18px}
  .acc-out{margin-left:0;width:100%;justify-content:center}
}

.nav-acct{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--muted);font-size:15px}
.nav-acct:hover{color:#fff;border-color:var(--accent)}
.nav-acct.active{color:#fff;border-color:var(--accent);background:rgba(123,53,255,.18)}

/* the opening paragraph of a policy page — sets the register before the
   numbered sections start */
.legal-lead{font-size:17px!important;line-height:1.7;color:#e6e6ef!important;
  padding-left:16px;border-left:3px solid var(--accent);margin-bottom:34px!important}

/* Chrome paints autofilled fields with its own near-white background, which on
   a dark form looks like a rendering fault. There is no property that turns it
   off — the trick is an inset box-shadow thick enough to cover it. */
.acc-field input:-webkit-autofill,
.acc-field input:-webkit-autofill:hover,
.acc-field input:-webkit-autofill:focus,
.form input:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px #0b0b10 inset;
  box-shadow:0 0 0 1000px #0b0b10 inset;
  caret-color:#fff;
  transition:background-color 9999s ease-out}

/* ---- account, signed in --------------------------------------------------
   Follows the reference: a slim bar, a full-bleed hero band carrying the name
   and account number, then a pill sidebar beside the panel.
   ------------------------------------------------------------------------ */
.acc-in{padding:0 0 80px}
.acc-bar{border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.acc-bar .wrap{display:flex;align-items:center;justify-content:space-between;min-height:60px}
.acc-bar-t{font-size:17px;font-weight:900;letter-spacing:-.01em}
.acc-bar-out{display:inline-flex;align-items:center;gap:9px;background:none;border:0;
  color:var(--muted);font:inherit;font-weight:700;font-size:14px;cursor:pointer;padding:8px}
.acc-bar-out:hover{color:#fff}

.acc-hero{background:#0a0a12 url('/assets/img/account-hero.jpg?v=ef95255b') center/cover no-repeat;
  padding:58px 0 46px;margin-bottom:40px}
.acc-hero h1{font-size:clamp(40px,6.5vw,72px);line-height:1;letter-spacing:-.045em;
  margin:0 0 14px;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.acc-num{margin:0;font-size:15px;color:#e6e6ef}
.acc-num b{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.acc-meta{margin:6px 0 0;font-size:13.5px;color:#b9b9c7}

/* pill sidebar */
.acc-side button{border-radius:999px;padding:14px 20px;gap:14px;font-size:15px}
.acc-side button i{color:var(--muted)}
.acc-side button.on{background:rgba(255,255,255,.09);color:#fff}
.acc-side button.on i{color:var(--accent)}
.acc-side-links{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  display:grid;gap:12px}
.acc-side-links a{display:flex;align-items:center;justify-content:space-between;
  font-size:14px;color:var(--muted);padding:0 20px}
.acc-side-links a:hover{color:#fff}
.acc-side-links i{font-size:11px;opacity:.7}

@media(max-width:900px){
  .acc-hero{padding:38px 0 32px;margin-bottom:26px}
  .acc-side-links{display:none}
  .acc-side button{padding:11px 16px}
}

/* ---- contact ------------------------------------------------------------- */
.ct-wrap{display:grid;grid-template-columns:1fr minmax(0,520px);gap:56px;align-items:start}
.ct-copy .title{font-size:clamp(34px,5vw,54px);margin:10px 0 16px}
.ct-copy .lead{max-width:44ch}
.ct-points{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px}
.ct-points li{display:flex;gap:14px;align-items:flex-start;font-size:14.5px;line-height:1.65;
  color:#d7d7e2}
.ct-points i{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:10px;
  background:rgba(255,255,255,.07);color:var(--accent);font-size:13px;margin-top:1px}
.ct-points b{color:#fff}
.ct-points a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ct-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:28px}
.ct-card textarea{width:100%;padding:14px 15px;border-radius:13px;border:1px solid var(--line);
  background:#0b0b10;color:#fff;font:inherit;font-size:15px;line-height:1.6;resize:vertical}
.ct-card textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.ct-small{font-size:12.5px;margin:14px 0 0}
/* the honeypot: off-screen rather than display:none, because some bots skip
   anything that is not rendered */
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:900px){
  .ct-wrap{grid-template-columns:1fr;gap:34px}
  .ct-card{padding:22px 18px;border-radius:18px}
}

/* a sport label, for the one competition on the board that is not football */
.hl-sport{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;vertical-align:middle;
  background:rgba(255,255,255,.1);color:var(--muted);margin-left:6px}

/* Ordering matters here: the base .nav-acct rule above sets display:grid, so a
   `display:none` written earlier in the file loses at equal specificity. That
   is what put the account icon beside the centred logo on phones. The phone
   header is the logo and the hamburger; the account row lives in the
   full-screen menu, next to Search, which made the same trip for the same
   reason. */
@media (max-width:900px){
  .nav-acct{display:none}
}

/* The full-screen menu is translucent on purpose — the page stays visible as a
   blurred field behind it. What was showing through was not page content but
   the page's own CHROME: the sticky .topbar sat directly under .mnav-top, so
   the site logo appeared a second time a few pixels behind the menu's own, and
   the .ticker landed exactly on the search field.

   So the chrome goes while the menu is open and the content stays. opacity
   rather than display, because removing a sticky header from the flow shifts
   the page underneath and the whole blurred field jumps as the menu opens.
   Appended at the end of the file deliberately: .topbar and .ticker are
   defined above, and at equal specificity the later rule is the one that
   applies — the account icon was visible on phones for exactly this reason. */
body.mnav-open .topbar,
body.mnav-open .ticker{opacity:0;pointer-events:none;transition:opacity .18s ease}
@media (prefers-reduced-motion:reduce){
  body.mnav-open .topbar,
  body.mnav-open .ticker{transition:none}
}

/* the heart, on the player bar and on a song page */
.pb-like{flex:none;width:36px;height:36px;display:grid;place-items:center;border:0;
  border-radius:50%;background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer;
  font-size:14px;margin-left:6px}
.pb-like:hover{color:#fff;background:rgba(255,255,255,.12)}
.pb-like.is-on{color:#ff5d7a;background:rgba(255,93,122,.14)}
.pb-like[disabled]{opacity:.5;cursor:default}
.song-like.is-on{color:#ff5d7a;border-color:rgba(255,93,122,.5)}

/* deleting an account is not an ordinary action and should not look like one */
.acc-danger.is-red{border-top-color:rgba(255,93,122,.35)}
.acc-danger.is-red h3{color:#ff9aa2}
.acc-del{border-color:rgba(255,93,122,.4);color:#ff9aa2}
.acc-del:hover{background:rgba(255,93,122,.1)}
.acc-del-warn{margin:14px 0 8px;font-size:13.5px;color:#ff9aa2}
.acc-del-input{width:180px;padding:11px 13px;border-radius:11px;border:1px solid var(--line);
  background:#0b0b10;color:#fff;font:inherit;letter-spacing:.12em;margin-right:10px}
.acc-del-go{background:#c0324a;border:none}
.acc-del-go[disabled]{opacity:.45;cursor:default}

/* ---- footer tap targets -------------------------------------------------
   Every link in the footer grid rendered 18px tall on a phone — a third of the
   44px minimum, in a dense grid where neighbours sit 11px apart. Fine with a
   mouse, genuinely hard with a thumb, and the most link-dense part of the site.

   The fix is height, not size: the type stays where it is and the hit area
   grows around it. The column gap drops to zero because the padding now
   provides the rhythm — without that the footer would grow twice as tall
   instead of half again.
   ------------------------------------------------------------------------ */
@media (max-width:900px){
  .fcol{gap:0}
  .fcol a{min-height:44px;display:flex;align-items:center}
  .foot-policy{gap:0 20px}
  .foot-policy a{min-height:44px;display:flex;align-items:center}
  .foot-social .social a{width:44px;height:44px}
  /* the sign-off link on the link-in-bio page, same reason */
  .foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
}

/* ---- footer columns collapse on phones ----------------------------------
   47 links at a proper 44px touch height made the mobile footer 1721px — four
   screens of scrolling past. Six headings that open instead.

   Desktop keeps the old appearance exactly: the <summary> is styled to look
   like the heading it replaced and the chevron is hidden, so nothing about the
   wide layout changes.
   ------------------------------------------------------------------------ */
.fcol > summary{list-style:none;cursor:default;display:flex;align-items:center;
  justify-content:space-between}
.fcol > summary::-webkit-details-marker{display:none}
.fcol > summary::marker{content:""}
.fcol > summary h3{margin:0 0 5px}
.fcol-chev{display:none;flex:none;color:var(--muted);transition:transform .18s ease}
.fcol-links{display:flex;flex-direction:column;gap:11px}

@media (max-width:900px){
  .fcol{border-bottom:1px solid var(--line)}
  .fcol > summary{cursor:pointer;min-height:52px;padding-right:2px}
  .fcol > summary h3{margin:0}
  .fcol-chev{display:block}
  .fcol[open] > .fcol-chev,
  .fcol[open] > summary .fcol-chev{transform:rotate(180deg)}
  .fcol-links{gap:0;padding-bottom:6px}
  /* the 44px targets from the previous fix still apply inside */
}
@media (prefers-reduced-motion:reduce){ .fcol-chev{transition:none} }

/* a postal address in a policy page — set apart, not run into the prose */
.legal-addr{font-style:normal;line-height:1.75;padding-left:16px;
  border-left:2px solid var(--line);color:#e6e6ef!important}

/* ---- Ban m di w ----------------------------------------------------------
   The weekly Haitian-song-abroad series. Appended at the end of the file for
   the same reason as the footer rules: an equal-specificity selector earlier
   in this stylesheet would quietly win, and the two mobile bugs already fixed
   here both came from exactly that.
   -------------------------------------------------------------------------- */
/* Istwa's own accent. The section carried class="banmdiw-page" and therefore
   Ban m di w's bright yellow, so the history pages had been wearing the music
   series' colour since the day they were built. This gold is the one the
   posters are set in — deliberately older and quieter than #ffc82f, so the two
   read as different strands when they land in the same feed. */
.istwa-page{--accent:#c6a04a}
.istwa-page .grad{background:linear-gradient(90deg,#c6a04a,#e6cf95);
  -webkit-background-clip:text;color:transparent}
.banmdiw-page{--accent:#ffc82f}
.banmdiw-page .grad{background:linear-gradient(90deg,#ffc82f,#ff6a5e);-webkit-background-clip:text;color:transparent}
.bm-head{padding:56px 0 10px}
.bm-head .title{font-size:clamp(46px,9vw,104px);margin:10px 0 16px}
.bm-langs{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.bm-langs button{background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;
  border-radius:999px;padding:11px 20px;font-weight:800;font-size:14px;cursor:pointer;min-height:44px}
.bm-langs button.on{background:var(--accent);border-color:transparent;color:#0a0a0a}

.bm-now{padding:34px 0 10px}
.bm-feature{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:44px;align-items:start}
.bm-sheet{margin:0}
.bm-sheet img{width:100%;height:auto;display:block;border-radius:20px;border:1px solid var(--line)}
.bm-sheet figcaption{margin-top:12px;font-size:13px}
.bm-sheet figcaption a{color:var(--accent);font-weight:800}

.bm-detail{padding-top:6px}
.bm-eyebrow{color:var(--accent);letter-spacing:.16em;font-weight:900;text-transform:uppercase;
  font-size:12px;margin:0 0 22px}
.bm-label{color:#ffc82f;letter-spacing:.14em;font-weight:900;text-transform:uppercase;
  font-size:12px;margin:0 0 6px}
.bm-label.bm-to{color:#78dcff}
.bm-detail h3{font-size:clamp(28px,4.4vw,46px);margin:0 0 6px;line-height:1.05;letter-spacing:-.02em}
.bm-by{color:var(--muted);margin:0;font-size:15px}
.bm-arrow{color:var(--accent);font-size:30px;margin:20px 0 18px;line-height:1}

.bm-proof{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:11px 18px;
  border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);
  font-weight:800;font-size:13px;min-height:44px}
.bm-proof span{color:var(--muted);font-weight:600}
.bm-proof:hover{border-color:var(--accent)}

.bm-stats{display:flex;gap:34px;margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.bm-stats dt{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.bm-stats dd{margin:6px 0 0;font-size:34px;font-weight:1000;font-variant-numeric:tabular-nums}
.bm-where{margin:26px 0 8px;color:var(--muted);font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;font-weight:800}
.bm-countries{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:340px}
.bm-countries li{display:flex;justify-content:space-between;gap:16px;font-size:15px}
.bm-countries b{color:var(--accent);font-variant-numeric:tabular-nums}

.bm-archive{padding:64px 0 20px}
.bm-archive h2{font-size:clamp(22px,3vw,32px);margin:0 0 22px}
.bm-archive h2.bm-later{margin-top:52px}
.bm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.bm-grid.bm-dim{opacity:.55}
.bm-tile{display:grid;gap:4px;padding:18px;border-radius:18px;border:1px solid var(--line);
  background:rgba(255,255,255,.045);min-height:44px}
.bm-tile:hover{border-color:var(--accent)}
.bm-tile.is-live{border-color:var(--accent);background:rgba(255,200,47,.09)}
.bm-tile-week{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:900;color:var(--accent)}
.bm-tile-o{font-weight:900;font-size:17px;line-height:1.2}
.bm-tile-arrow{color:var(--muted);font-size:13px}
.bm-tile-c{font-weight:700;font-size:16px;line-height:1.2}
.bm-tile-meta{color:var(--muted);font-size:12px;margin-top:4px}
.bm-method{margin:46px 0 0;color:var(--muted);font-size:14px;line-height:1.8;max-width:760px}

@media(max-width:900px){
  .bm-feature{grid-template-columns:1fr;gap:28px}
  .bm-sheet{max-width:440px}
  .bm-head{padding:40px 0 4px}
  .bm-archive{padding:48px 0 12px}
}
@media(max-width:560px){
  .bm-stats{gap:24px}
  .bm-stats dd{font-size:28px}
  .bm-grid{grid-template-columns:1fr}
}
.bm-soon{margin:26px 0 0;color:var(--muted);font-size:15px;font-weight:700}

/* ---- Ban m di w on the homepage ------------------------------------------
   The poster does the talking, so it gets real width rather than a thumbnail;
   the text column repeats the pair in words for anyone who cannot load it.
   -------------------------------------------------------------------------- */
.bmw-home{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:34px;align-items:center}
.bmw-card{display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.bmw-card img{width:100%;height:auto;display:block}
.bmw-card:hover{border-color:#ffc82f}
.bmw-text h3{font-size:clamp(24px,3.4vw,36px);margin:0 0 4px;line-height:1.1;letter-spacing:-.02em}
.bmw-eyebrow{color:#ffc82f;letter-spacing:.16em;text-transform:uppercase;font-weight:900;font-size:11px;margin:0 0 18px}
.bmw-from,.bmw-to{letter-spacing:.14em;text-transform:uppercase;font-weight:900;font-size:11px;margin:0 0 6px}
.bmw-from{color:#ffc82f}
.bmw-to{color:#78dcff}
.bmw-arrow{color:#ffc82f;font-size:24px;margin:16px 0 14px;line-height:1}
.bmw-go{margin-top:24px}
@media(max-width:900px){
  .bmw-home{grid-template-columns:1fr;gap:24px}
  .bmw-card{max-width:320px}
}
.bm-share{display:inline-flex;align-items:center;gap:8px;margin:20px 0 0 10px;padding:11px 18px;
  border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:#fff;font-weight:800;font-size:13px;min-height:44px;cursor:pointer;font-family:inherit}
.bm-share:hover{border-color:var(--accent)}
.bmw-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.bmw-actions .btn{margin-top:0}
.bmw-share{background:rgba(255,255,255,.06);cursor:pointer;font-family:inherit}
.bmw-share:hover{border-color:#ffc82f}
@media(max-width:560px){.bm-share{margin-left:0}}


/* ---- contact / advertising -----------------------------------------------
   The first version put the contact details and a four-item list in a left
   column beside the form. The form is far taller than either, so the column
   ended a third of the way down and left a hole the height of a screen. The
   list is now a full-width row UNDER both, which is what it always was: a
   footnote for people who did not come here to buy advertising.
   -------------------------------------------------------------------------- */
.ct-head{max-width:720px}
.ct-head .title{font-size:clamp(36px,5.5vw,62px);margin:10px 0 18px}
.ct-head .lead{max-width:640px}

.ct-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:40px 0 46px}
.ct-facts div{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:18px;padding:22px}
.ct-facts b{display:block;font-size:32px;font-weight:1000;letter-spacing:-.03em;line-height:1}
.ct-facts span{display:block;margin-top:6px;color:var(--muted);font-size:13px;line-height:1.45}

/* The aside is short by design, so it sticks rather than leaving a void. */
.ct-wrap{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:48px;align-items:start}
.ct-copy{position:sticky;top:100px}
/* .section h2 is (0,1,1) and would beat a bare .ct-h2 (0,1,0) — the same
   equal-or-higher-specificity trap that has bitten this stylesheet twice.
   Qualified so it actually applies. */
.section h2.ct-h2{font-size:19px;margin:0 0 18px;letter-spacing:-.01em;line-height:1.3}
.ct-line{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;font-size:15px;line-height:1.65;color:#d7d7e2}
.ct-line i{color:var(--accent);margin-top:5px;width:18px;flex:none;font-size:14px}
.ct-line a{color:var(--accent);text-decoration:underline;word-break:break-word}
.ct-line span{display:block}

.ct-card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:24px;padding:30px}
.acc-field select{width:100%;padding:15px 16px;border-radius:14px;border:1px solid var(--line);
  background:#0b0b10;color:#fff;font:inherit;min-height:52px}
.acc-field span em{font-style:normal;color:#6f6f80;font-weight:400;font-size:11px;
  letter-spacing:.06em;margin-left:7px;text-transform:none}

.ct-else{margin-top:64px;padding-top:38px;border-top:1px solid var(--line)}
.ct-else-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ct-else-grid div{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:18px;padding:22px}
.ct-else-grid i{color:var(--accent);font-size:17px}
.ct-else-grid b{display:block;margin:12px 0 7px;font-size:15px}
.ct-else-grid p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.ct-else-grid a{color:var(--accent);text-decoration:underline}

@media(max-width:1000px){
  .ct-wrap{grid-template-columns:1fr;gap:32px}
  .ct-copy{position:static}
  .ct-else-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .ct-facts{grid-template-columns:repeat(2,1fr);gap:10px;margin:30px 0 36px}
  .ct-facts div{padding:16px}
  .ct-facts b{font-size:26px}
  .ct-card{padding:20px;border-radius:20px}
  .ct-else-grid{grid-template-columns:1fr}
  .ct-else{margin-top:46px}
}

/* ---- the live blog -------------------------------------------------------
   franceinfo's structure — one narrow column, relative times, tag chips,
   threaded answers — in NAGO's colours rather than their white. The column is
   deliberately ~620px: a live blog is read like a feed, and a wide measure
   makes short posts look like fragments.
   -------------------------------------------------------------------------- */
.news-page{--accent:#e02020}
/* Narrow the FEED, not every .wrap on the page — the header and footer share
   that class, and scoping it to the page squeezed the nav into the logo. */
.nw-top .wrap,.nw-feed .wrap{width:min(680px,92vw)}
.nw-top{padding:44px 0 0}
.nw-lives{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.nw-lives span{color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.nw-lives button,.nw-tags button{background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;
  border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;min-height:38px}
.nw-lives button.on,.nw-tags button.on{background:#fff;color:#0a0a10;border-color:#fff}
.nw-title{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.news-page .nw-title h1{font-size:clamp(30px,5vw,46px);margin:0;letter-spacing:-.03em;display:flex;align-items:center;gap:12px}
.nw-dot{width:11px;height:11px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 rgba(224,32,32,.6);animation:nwPulse 2s infinite}
@keyframes nwPulse{70%{box-shadow:0 0 0 12px rgba(224,32,32,0)}100%{box-shadow:0 0 0 0 rgba(224,32,32,0)}}
@media(prefers-reduced-motion:reduce){.nw-dot{animation:none}}
.nw-langs{display:flex;gap:6px}
.nw-langs button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;
  padding:7px 13px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;min-height:34px}
.nw-langs button.on{background:rgba(255,255,255,.1);color:#fff}
.nw-blurb{margin:12px 0 0;font-size:15px}
.nw-tags{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 0}

.nw-feed{padding:26px 0 90px}
.nw-post{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:18px;
  padding:22px;margin:0 0 14px}
.nw-post.is-reader{background:transparent;border-style:dashed}
.nw-head{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.nw-head b{display:block;font-size:14px}
.nw-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#15151d;border:1px solid var(--line);overflow:hidden}
.nw-av img{width:22px;height:22px;object-fit:contain}
.nw-av-reader{color:var(--muted);font-size:13px}
.nw-time{color:var(--muted);font-size:12px}
.nw-body{font-size:16px;line-height:1.7;color:#e6e6ef}
.nw-intag{color:var(--accent);font-weight:800;letter-spacing:.02em}
.nw-quote{margin:16px 0 0;padding:0 0 0 16px;border-left:3px solid var(--accent);
  font-style:italic;color:#cfcfdd;line-height:1.65}
.nw-media{margin:16px 0 0;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.nw-media img{width:100%;display:block}
.nw-media iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.nw-links{margin:14px 0 0;display:flex;flex-direction:column;gap:6px}
.nw-links a{color:var(--accent);text-decoration:underline;font-size:14px}
.nw-acts{display:flex;gap:8px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.nw-acts button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;
  min-height:38px;min-width:44px;padding:0 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px}
.nw-acts button:hover{color:#fff;border-color:var(--accent)}
.nw-acts button.on{color:var(--accent);border-color:var(--accent)}
.nw-replies{margin:16px 0 0;padding-left:16px;border-left:2px solid var(--line)}
.nw-reply{padding:14px 0 0}
.nw-empty{padding:40px 0}

/* Sticky rather than fixed on phones: a fixed panel over a feed eats the
   bottom of the last post and there is already a player bar down there. */
.nw-ask{position:fixed;right:20px;bottom:96px;z-index:45;width:min(320px,90vw);
  background:#101015;border:1px solid var(--line);border-radius:18px;padding:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.55)}
.nw-ask-who{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;color:var(--muted)}
.nw-ask-who img{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:#15151d;object-fit:contain}
.nw-ask .btn{width:100%;justify-content:center;padding:12px 16px;font-size:14px}
.nw-ask-form{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.nw-ask-form h3{margin:0 0 12px;font-size:15px}
.nw-ask-btns{display:flex;gap:8px;margin-top:12px}
.nw-ask-btns .btn{padding:10px 14px;font-size:13px}
.nw-note{font-size:12px;margin:10px 0 0;line-height:1.5}
.nw-msg{font-size:13px}
.nw-msg.ok{color:#6ee7a8}
.nw-msg.bad{color:#ff9aa2}

@media(max-width:900px){
  .nw-ask{right:12px;left:12px;bottom:88px;width:auto}
}
@media(max-width:560px){
  .nw-post{padding:16px;border-radius:16px}
  .nw-body{font-size:15px}
  .nw-top{padding:32px 0 0}
}

/* ---- lead desk (private) -------------------------------------------------- */
.desk-page .wrap{width:min(880px,94vw)}
.dsk{background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:18px;padding:22px;margin:0 0 16px}
.dsk.is-done{opacity:.4}
.dsk-src{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--accent)}
.dsk-title{margin:10px 0 8px;font-size:19px;line-height:1.35}
.dsk-links{margin:0 0 16px;font-size:13px}
.dsk-links a{color:var(--accent);text-decoration:underline}
.dsk-write{border-top:1px solid var(--line);padding-top:16px}
.dsk-btns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.dsk-btns .btn{padding:11px 18px;font-size:14px}
.dsk-more{margin:10px 0 0}
.dsk-more summary{cursor:pointer;color:var(--muted);font-size:13px;padding:6px 0}
.dsk-more .acc-field{margin-top:10px}
/* new-post pill and the arrival highlight */
.nw-new{position:fixed;left:50%;transform:translateX(-50%);top:104px;z-index:44;
  background:var(--accent);color:#fff;border:0;border-radius:999px;padding:11px 20px;
  font:inherit;font-size:14px;font-weight:800;cursor:pointer;min-height:44px;
  display:inline-flex;align-items:center;gap:9px;box-shadow:0 10px 30px rgba(224,32,32,.35)}
.nw-post.is-new{animation:nwIn .45s ease-out}
@keyframes nwIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nw-post.is-new{animation:none}}
/* a single post at its own address */
.nw-article{padding:56px 0 80px}
.nw-article .wrap{width:min(680px,92vw)}
.nw-eyebrow{color:var(--accent);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;margin:0 0 14px}
.nw-eyebrow a{color:var(--accent);text-decoration:underline}
.nw-article h1{font-size:clamp(26px,4.2vw,40px);line-height:1.2;letter-spacing:-.02em;margin:0 0 12px}
.nw-article .nw-body{font-size:17px;line-height:1.75}
.nw-back{margin-top:36px}
.nw-back a{color:var(--accent);text-decoration:underline}

/* --- the article furniture: standfirst, byline, meta, share, credit, tail ---
   Layout only. The palette is the one the news section already uses. */
.nw-stand{font-size:clamp(17px,2.1vw,20px);line-height:1.55;color:#cfd0dc;
  margin:0 0 20px;font-weight:400}
.nw-by{font-size:14px;color:var(--muted);margin:0 0 10px}
.nw-by b{color:#e8e8f2;font-weight:700}
.nw-when{color:var(--muted);font-size:13px;margin:0 0 18px;display:flex;
  flex-wrap:wrap;align-items:center;gap:8px 18px}
.nw-read{display:inline-flex;align-items:center;gap:7px}
.nw-share{display:flex;align-items:center;gap:12px;margin:0 0 26px;
  padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nw-share span{font-size:13px;color:var(--muted);font-weight:700}
.nw-sharebtn{width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:transparent;color:#e8e8f2;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.nw-sharebtn:hover,.nw-sharebtn:focus-visible{background:var(--accent);color:#fff;border-color:var(--accent)}
.nw-arthero figcaption{padding:10px 14px;font-size:12.5px;color:var(--muted);
  background:rgba(255,255,255,.03);display:flex;flex-wrap:wrap;gap:4px 12px;
  align-items:baseline}
/* The caption is what the picture shows; the credit is where the story came
   from. Two different facts, so they do not run together as one sentence. */
.nw-arthero .nw-cap{flex:1 1 240px;color:var(--text);line-height:1.45}
.nw-arthero .nw-credit{flex:0 0 auto;opacity:.75;white-space:nowrap}

/* The opening letter, the way a newspaper opens a story. first-of-type, not
   first-child: an article that opens on a subheading has an h2 in that slot and
   would otherwise lose the drop cap entirely. */
.nw-detail>p:first-of-type::first-letter{float:left;font-size:3.4em;line-height:.86;
  padding:4px 10px 0 0;font-weight:800;color:var(--accent)}

/* Subheadings inside the article body. Sans against the serif-ish body, so a
   reader scanning for the section they want finds it without reading. */
.nw-sub{font-size:clamp(19px,2.4vw,23px);line-height:1.28;font-weight:800;
  letter-spacing:-.01em;color:#fff;margin:1.9em 0 .7em;clear:both}
.nw-sub:first-child{margin-top:0}

.nw-foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.nw-foot .nw-share{border-top:0;margin-bottom:16px;padding-top:0}
.nw-chips{display:flex;flex-wrap:wrap;gap:8px}
.nw-chip{font-size:12px;font-weight:700;letter-spacing:.04em;padding:7px 13px;
  border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.nw-chip:hover{color:var(--accent);border-color:var(--accent)}

/* What to read next. Named nw-next, not nw-more: news.js already ships a
   .nw-more "read more" link in the feed, and a second meaning for the same
   class would have moved every one of those by 44px. */
.nw-next{margin-top:44px}
.nw-next h2{font-size:15px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:800;margin:0 0 6px}
.nw-nextlist{display:flex;flex-direction:column}
.nw-nextcell{display:flex;gap:18px;align-items:flex-start;padding:20px 0;
  border-bottom:1px solid var(--line);color:inherit}
.nw-nextcell:hover b{color:var(--accent)}
.nw-nexttext{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px}
.nw-nexttext b{font-size:16.5px;line-height:1.32;font-weight:700;color:#e8e8f2}
.nw-nextsnip{font-size:14px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nw-nextmeta{font-size:12px;color:var(--muted)}
.nw-nextmeta em{color:var(--accent);font-style:normal;font-weight:700}
.nw-nextthumb{flex:0 0 132px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;
  background:rgba(255,255,255,.05)}
.nw-nextcell:not(:has(.nw-nextthumb)) .nw-nexttext{max-width:none}
.nw-nextthumb img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:560px){
  .nw-nextthumb{flex-basis:96px}
  .nw-nextcell{gap:12px}
}
.nw-open{display:block;color:inherit}
.nw-open:hover .nw-body{color:#fff}
.nw-permalink{color:inherit}
.nw-permalink:hover .nw-time{color:var(--accent);text-decoration:underline}
.dsk-sub{display:inline-flex;align-items:center;cursor:pointer;margin-left:8px;
  padding:4px 11px;border-radius:999px;font:inherit;font-size:11.5px;font-weight:800;
  letter-spacing:.03em;border:1px solid var(--line);background:transparent;
  color:var(--muted);transition:color .15s ease,border-color .15s ease}
.dsk-sub:hover,.dsk-sub:focus-visible{color:var(--accent);border-color:var(--accent)}
.dsk-tabs{display:flex;gap:8px;margin:0 auto 22px;width:min(880px,94vw)}
.dsk-tabs button{background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;
  border-radius:999px;padding:10px 18px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;min-height:42px}
.dsk-tabs button.on{background:#fff;color:#0a0a10;border-color:#fff}
.dsk.is-hidden{opacity:.55;border-style:dashed}
.dsk-eds{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.dsk-eds li{display:flex;align-items:center;gap:10px;font-size:14px}
.dsk-rm{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;
  padding:4px 12px;font:inherit;font-size:12px;cursor:pointer;min-height:32px}
.dsk-rm:hover{color:#ff9aa2;border-color:#ff9aa2}
.nw-hero{display:block;margin:0 0 14px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.nw-hero img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.nw-arthero{margin:0 0 24px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.nw-arthero img{width:100%;display:block}






/* ---- desk: the visuals panel ------------------------------------------- */
/* Deliberately the loudest thing in the compose form. A post with a picture
   travels and a post without one does not, so the control that attaches one
   is a titled block with a drop target you can hit without aiming, not a file
   input hiding between two text fields. */
.dsk-media{margin:22px 0;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));overflow:hidden}
.dsk-media-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.dsk-media-head h4{margin:0;font-size:15px;letter-spacing:.02em}
.dsk-tabs{display:flex;gap:6px;margin-left:auto}
.dsk-tab{padding:7px 14px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-weight:800;font-size:12px;cursor:pointer}
.dsk-tab.on{background:var(--accent);border-color:transparent;color:#fff}
.dsk-pane{padding:16px}
.dsk-drop{width:100%;display:grid;justify-items:center;gap:6px;padding:30px 18px;cursor:pointer;
  border:2px dashed rgba(255,255,255,.22);border-radius:14px;background:rgba(255,255,255,.02);
  color:var(--muted);text-align:center;transition:border-color .15s,background .15s}
.dsk-drop:hover,.dsk-drop.over{border-color:var(--accent);background:rgba(123,53,255,.09)}
.dsk-drop.busy{opacity:.5;pointer-events:none}
.dsk-drop svg{width:30px;height:30px;color:var(--accent)}
.dsk-drop strong{color:#fff;font-size:15px}
.dsk-drop span{font-size:12px;line-height:1.6}
.dsk-cap{margin-top:14px}
.dsk-cap[hidden]{display:none}
.dsk-or{display:flex;align-items:center;gap:12px;margin:16px 0 10px;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.dsk-or::before,.dsk-or::after{content:'';flex:1;height:1px;background:var(--line)}
.dsk-linkrow{display:flex;gap:10px;flex-wrap:wrap}
.dsk-linkrow input{flex:1 1 280px;padding:14px 16px;border-radius:12px;
  border:1px solid var(--line);background:#0b0b10;color:#fff}
.dsk-hint{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.6}
.dsk-preview{border-top:1px solid var(--line);background:rgba(0,0,0,.25)}
.dsk-prev-body img{display:block;width:100%;max-height:320px;object-fit:cover}
.dsk-prev-text{margin:0;padding:16px;line-height:1.6}
.dsk-prev-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;font-size:12px;color:var(--muted)}
.btn-quiet{padding:7px 12px;border-radius:10px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-weight:800;font-size:12px;cursor:pointer}
.btn-quiet:hover{color:#fff;border-color:var(--accent)}

/* ---- reader: social embeds -------------------------------------------- */
.nw-embed{position:relative;margin:16px 0;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#08080d}
.nw-embed>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.nw-embed.is-tall>img{aspect-ratio:9/16;max-height:560px;object-fit:contain;background:#000}
.nw-embed-blank{aspect-ratio:16/9;background:linear-gradient(135deg,#14141c,#0a0a10)}
.nw-embed.is-audio .nw-embed-blank{aspect-ratio:auto;height:120px}
.nw-embed-go{position:absolute;inset:0;margin:auto;width:70px;height:70px;border-radius:50%;
  border:none;cursor:pointer;display:grid;place-items:center;
  background:rgba(8,8,13,.72);backdrop-filter:blur(6px);color:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,.5);transition:transform .15s,background .15s}
.nw-embed-go:hover{transform:scale(1.08);background:var(--accent)}
.nw-embed-go svg{width:30px;height:30px;margin-left:3px}
.nw-embed iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.nw-embed.is-tall iframe{aspect-ratio:9/16;max-height:640px}
.nw-embed.is-audio iframe{aspect-ratio:auto;height:166px}
.nw-embed figcaption{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 14px;font-size:12px;font-weight:800;color:var(--muted);border-top:1px solid var(--line)}
.nw-embed figcaption em{font-style:normal;font-weight:600;opacity:.7;margin-left:auto}
.nw-embed.is-live figcaption em{display:none}

.nw-xcard{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.035)}
.nw-xcard header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.nw-xav{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.nw-xcard header div{display:grid;line-height:1.3}
.nw-xcard header b{font-size:14px}
.nw-xcard header span{font-size:12px;color:var(--muted)}
.nw-xmark{margin-left:auto;font-size:11px;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.nw-xcard p{margin:0 0 10px;line-height:1.65;white-space:pre-wrap}
.nw-xmedia{display:block;width:100%;border-radius:12px;margin-bottom:10px}
.nw-xcard a{font-size:12px;font-weight:800;color:var(--accent)}

/* ---- reader: live scoreboard ------------------------------------------ */
.nw-scores{padding:0 0 8px}
.nw-scores .sc-head{display:flex;align-items:center;gap:12px;width:100%;padding:16px 18px;
  border:1px solid var(--line);border-radius:16px;cursor:pointer;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));color:#fff}
.nw-scores .sc-head h2{margin:0;font-size:17px;font-weight:900;letter-spacing:-.01em}
.sc-pulse{width:9px;height:9px;border-radius:50%;background:#22c55e;flex:none;
  box-shadow:0 0 0 0 rgba(34,197,94,.65);animation:scPulse 2s infinite}
@keyframes scPulse{70%{box-shadow:0 0 0 11px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media(prefers-reduced-motion:reduce){.sc-pulse{animation:none}}
.sc-count{margin-left:auto;font-size:12px;font-weight:800;color:var(--muted)}
.sc-chev{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .2s}
.nw-scores.is-shut .sc-chev{transform:rotate(-90deg)}
.nw-scores.is-shut .sc-body{display:none}
.sc-body{margin-top:12px;display:grid;gap:14px}
.sc-league{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.025)}
.sc-league h3{margin:0;padding:11px 16px;font-size:12px;font-weight:900;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03)}
.sc-league ul{list-style:none;margin:0;padding:0}
.sc-m{display:grid;grid-template-columns:1fr auto 1fr 58px;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.sc-m:last-child{border-bottom:0}
.sc-m.is-done{opacity:.62}
.sc-side{display:flex;align-items:center;gap:9px;min-width:0}
.sc-side img{width:24px;height:24px;object-fit:contain;flex:none}
.sc-side i{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.08);flex:none}
.sc-side b{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-away{flex-direction:row-reverse;text-align:right}
.sc-score{font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-score em{font-style:normal;opacity:.4;margin:0 3px}
.sc-clock{text-align:right;font-size:12px;font-weight:900;color:#22c55e;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-m.is-done .sc-clock{color:var(--muted)}
.sc-src{margin:2px 0 0;font-size:11px;color:var(--muted);opacity:.75}
@media(max-width:620px){
  .sc-m{grid-template-columns:1fr auto 1fr;grid-template-areas:"h s a" "c c c";row-gap:6px}
  .sc-clock{grid-area:c;text-align:center}
  .sc-side b{font-size:13px}
  .dsk-tabs{margin-left:0;width:100%}
  .dsk-tab{flex:1}
}

/* scoreboard: the full board on NAGO Sport, the strip on the live blog */
.sc-section{padding-top:30px;padding-bottom:6px}
/* is-compact currently has no caller — the scoreboard lives on NAGO Sport
   alone. Kept because the variant is one attribute away if it is ever
   wanted beside another feed. */
.nw-scores.is-compact{margin-bottom:6px}
.nw-scores.is-compact .sc-head{padding:13px 16px}
.nw-scores.is-compact .sc-head h2{font-size:15px}
.nw-scores.is-compact .sc-m{padding:10px 14px}
.sc-empty{display:flex;align-items:center;gap:11px;padding:20px 18px;border:1px solid var(--line);
  border-radius:16px;color:var(--muted);font-weight:700;background:rgba(255,255,255,.03)}
.sc-pulse.is-off{background:var(--muted);animation:none;box-shadow:none;opacity:.55}

/* ---- desk: write your own --------------------------------------------- */
.dsk-write-own{max-width:820px}
.dsk-lede{margin:-4px 0 20px;font-size:14px}
.dsk-h{margin:26px 0 10px;font-size:12px;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.dsk-h em{font-style:normal;font-weight:700;text-transform:none;letter-spacing:0;opacity:.75}
.dsk-srcrow{display:flex;gap:10px;flex-wrap:wrap}
.dsk-srcrow input{flex:1 1 240px;padding:14px 16px;border-radius:12px;
  border:1px solid var(--line);background:#0b0b10;color:#fff}
.dsk-detail{margin:22px 0;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.03);overflow:hidden}
.dsk-detail>summary{padding:15px 18px;cursor:pointer;font-weight:800;font-size:14px;
  list-style:none;display:flex;align-items:center;gap:9px}
.dsk-detail>summary::-webkit-details-marker{display:none}
.dsk-detail>summary::before{content:"+";display:grid;place-items:center;width:20px;height:20px;
  border-radius:50%;background:var(--accent);color:#fff;font-weight:900;font-size:14px;flex:none}
.dsk-detail[open]>summary::before{content:"\2212"}
.dsk-detail>summary em{font-style:normal;font-weight:600;color:var(--muted);font-size:12px}
.dsk-detail>*:not(summary){margin-left:18px;margin-right:18px}
.dsk-detail>*:last-child{margin-bottom:18px}

/* ---- reader: the long version ----------------------------------------- */
.nw-more{margin:14px 0 0}
.nw-more a{display:inline-flex;align-items:center;gap:7px;font-weight:800;font-size:14px;
  color:var(--accent)}
.nw-more a:after{content:"\2192";transition:transform .15s}
.nw-more a:hover:after{transform:translateX(3px)}
.nw-detail{margin-top:22px;font-size:17px;line-height:1.75}
.nw-detail p{margin:0 0 1.15em}
.nw-detail p:last-child{margin-bottom:0}

/* ---- the live blog, in miniature on the NAGO News channel page --------- */
.nws{border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.nws-head{display:flex;align-items:center;gap:11px;padding:15px 18px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.nws-head h2{margin:0;font-size:16px;font-weight:900;letter-spacing:-.01em}
.nws-all{margin-left:auto;font-size:12px;font-weight:800;color:var(--accent)}
.nws-list{list-style:none;margin:0;padding:0}
.nws-i{border-bottom:1px solid rgba(255,255,255,.06)}
.nws-i:last-child{border-bottom:0}
.nws-i a{display:grid;gap:5px;padding:14px 18px;transition:background .15s}
.nws-i a:hover{background:rgba(255,255,255,.04)}
.nws-meta{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:900;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.nws-meta b{color:var(--accent)}
.nws-line{font-size:15px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- NAGO News is red, so its pages are red --------------------------- */
/* .news-page already redefines --accent, but two things were still painted
   purple over the top of it: the primary button baked a violet into its own
   gradient, and the page glow is set on body rather than through a token. */
/* :not(.desk-page) throughout — the lead desk carries .news-page for its
   layout but is a newsroom tool, not a reader-facing news page. It keeps the
   house purple so that working on the desk never looks like being on the
   published site. */
body.news-page:not(.desk-page){background:
  radial-gradient(circle at 20% 0,rgba(249,31,45,.16),transparent 36%),
  linear-gradient(180deg,#0a0406,#000)}
.news-page:not(.desk-page) .btn.primary{background:linear-gradient(135deg,var(--news),#b3101c)}
.news-page:not(.desk-page) .nw-dot,.news-page:not(.desk-page) .sc-pulse{background:var(--news);
  box-shadow:0 0 0 0 rgba(249,31,45,.6)}
@keyframes nwPulse{70%{box-shadow:0 0 0 10px rgba(249,31,45,0)}
  100%{box-shadow:0 0 0 0 rgba(249,31,45,0)}}
.news-page:not(.desk-page) .nw-dot{animation:nwPulse 2s infinite}
@media(prefers-reduced-motion:reduce){.news-page:not(.desk-page) .nw-dot{animation:none}}

/* The desk keeps the house accent. .news-page hands it the news red, which is
   right for a published page and wrong for the tool that fills it. */
.desk-page{--accent:#7b35ff}

/* ---- Kounye a on the homepage ----------------------------------------- */
/* The band carries the news red on a purple page on purpose: it marks the one
   section that is read rather than browsed. --accent is set locally so the
   shared .nws rules pick it up without any homepage-specific overrides. */
.hs-news{padding:8px 0 40px;--accent:var(--news)}
.nws.is-row{border:0;background:none;border-radius:0}
.nws.is-row .nws-head{padding:0 0 14px;background:none;border-bottom:0;
  border-left:3px solid var(--news);padding-left:14px;margin-bottom:18px}
.nws.is-row .nws-head h2{font-size:clamp(22px,2.6vw,30px)}
.nws.is-row .nws-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nws.is-row .nws-i{border-bottom:0;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  transition:border-color .15s,transform .15s}
.nws.is-row .nws-i:hover{border-color:var(--news);transform:translateY(-2px)}
.nws.is-row .nws-i a{padding:18px;gap:9px;height:100%}
.nws.is-row .nws-i a:hover{background:none}
.nws.is-row .nws-line{-webkit-line-clamp:4;font-size:15.5px}
@media(max-width:860px){
  .nws.is-row .nws-list{grid-template-columns:1fr}
  .nws.is-row .nws-line{-webkit-line-clamp:3}
}

/* the position in this week's ten, not the rank inside its own competition */
.crank-no{font-style:normal;display:inline-grid;place-items:center;min-width:20px;height:20px;
  margin-right:7px;padding:0 5px;border-radius:6px;background:var(--ch,#2fa845);
  color:#04120a;font-size:11px;font-weight:900;font-variant-numeric:tabular-nums}

/* ---- /top-goals -------------------------------------------------------- */
.tg-head{padding:54px 0 26px}
.tg-head h1{font-size:clamp(32px,5vw,58px);line-height:1.02;margin:10px 0 14px;
  letter-spacing:-.03em;text-wrap:balance}
.tg-head .lead{max-width:620px}
.tg-langs{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.tg-langs button{padding:8px 15px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-weight:800;font-size:12px;cursor:pointer}
.tg-langs button.on{background:#2fa845;border-color:transparent;color:#04120a}
.tg-board{padding-top:8px}
.tg-board .hlc{--ch:#2fa845}
.tg-comp{font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ch,#2fa845)}
.tg-more{margin-top:30px}

/* ---- Kounye a in the ticker -------------------------------------------- */
/* The red is the whole distinction: the station chips carry their own colours
   and this one carries the news mark, so a headline cannot be mistaken for a
   track even at a glance. */
.tk-chip.is-news{background:var(--news);color:#fff}
/* 12px, the same gap .tk-item uses between a station chip and its track.
   This was gap:0, which welded the headline to the KOUNYE A pill while every
   station item beside it breathed properly — the news read as one run-on
   string, which is the exact failure the chip was added to prevent. */
.tk-news{display:inline-flex;align-items:center;gap:12px}
.tk-news:hover .tk-head{color:#fff}
.tk-head{color:#e8e8ef;font-weight:700;white-space:nowrap;
  max-width:58vw;overflow:hidden;text-overflow:ellipsis}
@media(max-width:700px){.tk-head{max-width:70vw}}

/* tags on a post — each one filters the feed */
.nw-tags{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0}
.nw-tag{padding:5px 11px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font-weight:800;font-size:11px;
  letter-spacing:.05em;cursor:pointer;transition:color .15s,border-color .15s}
.nw-tag:hover{color:#fff;border-color:var(--news)}

/* ---- the history desk -------------------------------------------------- */
.ist{max-width:860px}
.ist-badge{margin-left:12px;padding:3px 10px;border-radius:999px;font-size:10.5px;
  font-weight:900;letter-spacing:.07em;text-transform:uppercase;
  background:rgba(255,255,255,.09);color:var(--muted)}
.ist-badge.on{background:#c6a04a;color:#1a1204}
.ist-sourced{margin:14px 0 6px;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:14px;line-height:1.6;color:#d8d8e2}
.ist-sourced b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.ist-hook{margin-bottom:8px}

/* ---- the history series ------------------------------------------------ */
.ist-index{padding-top:56px}
.ist-index h1{font-size:clamp(28px,4vw,46px);margin:8px 0 34px;letter-spacing:-.02em}
.ist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.ist-cell{display:grid;gap:6px;padding:16px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  transition:border-color .15s,transform .15s}
.ist-cell:hover{border-color:#c6a04a;transform:translateY(-2px)}
.ist-thumb{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#141019;margin-bottom:6px}
.ist-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.ist-cell b{font-size:16px}
.ist-cell em{font-style:normal;font-size:12px;color:#c6a04a;font-weight:700}
.ist-snip{font-size:13px;line-height:1.55;color:var(--muted)}
.ist-page{padding:54px 0 80px}
.ist-page .wrap{max-width:760px}
.ist-eyebrow{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#c6a04a}
.ist-eyebrow a{color:inherit}
.ist-page h1{font-size:clamp(34px,6vw,62px);line-height:1.03;margin:10px 0 6px;letter-spacing:-.03em}
.ist-span{color:#c6a04a;font-size:17px;font-weight:700;margin:0 0 26px}
.ist-por{margin:0 0 28px}
.ist-por img{width:100%;max-height:520px;object-fit:cover;object-position:50% 16%;border-radius:18px;display:block}
.ist-por figcaption{margin-top:8px;font-size:11.5px;color:var(--muted)}
.ist-hookline{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#c6a04a;margin:0 0 10px}
.ist-body p{font-size:19px;line-height:1.75;margin:0 0 20px}
.ist-tl{list-style:none;margin:30px 0;padding:0 0 0 20px;border-left:2px solid rgba(198,160,74,.35)}
.ist-tl li{position:relative;padding:0 0 16px 18px;display:flex;gap:14px;align-items:baseline}
.ist-tl li:before{content:"";position:absolute;left:-27px;top:8px;width:11px;height:11px;
  border-radius:50%;background:#c6a04a}
.ist-tl b{font-size:17px;font-variant-numeric:tabular-nums;min-width:66px}
.ist-tl span{color:var(--muted);font-size:14.5px}
.ist-credit{font-size:12px;color:var(--muted);margin-top:28px}
.ist-back{margin-top:22px}
.ist-back a{color:#c6a04a;font-weight:800}
/* The confirm page. It is on screen for about a second when things go well,
   and it is the only thing on screen when they do not. */
.ac-wrap{max-width:620px;padding:80px 0 90px}
.ac-h{font-size:clamp(24px,3.4vw,34px);line-height:1.2;margin:0 0 14px}
.ac-msg{color:var(--muted);font-size:16.5px;line-height:1.65;margin:0}
.ac-act{margin:22px 0 0}
.ac-act a{color:var(--accent);text-decoration:underline;font-weight:700}

/* The heading block every page now carries in the HTML it serves. On the
   pages built entirely by JavaScript it sits inside the placeholder and is
   replaced the moment the module mounts — it exists for the crawler, and as
   what a reader sees if the script never runs. On the channel pages it stays. */
.pg-head{padding:34px 0 6px}
.pg-head h1{font-size:clamp(26px,4vw,42px);line-height:1.12;letter-spacing:-.02em;margin:0}
.pg-lede{color:var(--muted);font-size:16.5px;line-height:1.6;margin:10px 0 0;max-width:62ch}
.tv-stage .pg-head{padding-top:26px}

/* The programme page as it comes off the wire, before show.js mounts. It is
   what a crawler keeps, and what a reader sees if the JavaScript never runs. */
.sh-page{padding:56px 0 80px}
.sh-page .wrap{width:min(760px,92vw)}
.sh-page h1{font-size:clamp(28px,4.4vw,44px);line-height:1.15;margin:8px 0 14px}
.sh-lede{font-size:17px;line-height:1.7;color:var(--muted);max-width:60ch}
.sh-h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  font-weight:800;margin:34px 0 12px}
.sh-slots{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:420px}
.sh-slots li{display:flex;align-items:baseline;gap:12px;padding:12px 16px;
  border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.sh-slots b{font-variant-numeric:tabular-nums;font-size:16px}
.sh-slots span{color:var(--muted);font-variant-numeric:tabular-nums}
.sh-slots em{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--muted)}
.sh-back{margin-top:30px}
.sh-back a{color:var(--accent);text-decoration:underline;font-weight:700}

/* ---------------------------------------------------------------------------
   The admin portal shell.

   This page grew from one job (pick a lead, write a line) into eleven, and it
   was still wearing the layout of the first: a paragraph about the Haitian
   press at the top, then eleven pills wrapping onto two rows in no order. A
   console is scanned, not read — so the work is grouped down the side under
   the three things this page actually does, the current section says so, and
   the header names where you are instead of describing one tab.
--------------------------------------------------------------------------- */
.dsk-shell{display:grid;grid-template-columns:250px minmax(0,1fr);
  min-height:calc(100vh - var(--topbar-h,78px));align-items:start}

.dsk-side{position:sticky;top:var(--topbar-h,78px);align-self:start;
  height:calc(100vh - var(--topbar-h,78px));display:flex;flex-direction:column;
  gap:6px;padding:26px 16px 18px;border-right:1px solid var(--line);
  background:rgba(255,255,255,.02);overflow-y:auto}
.dsk-brand{display:flex;align-items:baseline;gap:8px;padding:0 10px 14px}
.dsk-logo{font-weight:900;letter-spacing:-.02em;font-size:19px}
.dsk-sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  font-weight:800}

.dsk-nav{display:flex;flex-direction:column;gap:2px;flex:1 1 auto}
.dsk-navh{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:16px 0 5px;padding:0 10px;font-weight:800;opacity:.75}
.dsk-nav button{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:9px 11px;border-radius:10px;border:0;background:transparent;cursor:pointer;
  color:#d3d3de;font:inherit;font-size:14px;font-weight:600;line-height:1.2;
  transition:background .14s ease,color .14s ease}
.dsk-nav button i{width:16px;font-size:13px;color:var(--muted);flex:0 0 16px;text-align:center}
.dsk-nav button:hover{background:rgba(255,255,255,.05);color:#fff}
.dsk-nav button.on{background:var(--accent);color:#fff}
.dsk-nav button.on i{color:#fff}
.dsk-nav button span[data-badge]{margin-left:auto;font-size:11px;font-weight:800;
  padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.12)}
.dsk-nav button span[data-badge]:empty{display:none}
.dsk-nav button.on span[data-badge]{background:rgba(0,0,0,.25)}

.dsk-who{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:8px;font-size:12.5px}
.dsk-who [data-gate] b{color:#fff}
.dsk-who details summary{cursor:pointer;color:var(--muted);font-size:12px}
.dsk-who .acc-field{margin-top:8px}
.dsk-out{color:var(--muted);font-size:12.5px}
.dsk-out:hover{color:var(--accent)}

/* Out of the grid at every width. This is a two-column grid and the scrim is a
   third child: with no positioning of its own it claimed column two and pushed
   the whole console onto a second row, leaving the page blank beside the
   sidebar. It is only ever visible on a phone. */
.dsk-scrim{display:none}
.dsk-main{padding:0 0 70px;min-width:0}
.dsk-bar{display:flex;align-items:center;gap:14px;padding:12px 30px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.02);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}
.dsk-barlink{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  color:var(--muted);font-weight:600}
.dsk-barlink:hover{color:var(--accent)}
.dsk-baruser{margin-left:auto;display:flex;align-items:center;gap:10px}
.dsk-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-weight:800;font-size:14px;flex:0 0 34px}
.dsk-usertext{display:grid;line-height:1.25}
.dsk-usertext b{font-size:13.5px}
.dsk-usertext em{font-style:normal;font-size:11px;color:var(--muted);
  letter-spacing:.04em;text-transform:uppercase;font-weight:700}
.dsk-burger{display:none;background:transparent;border:0;color:#fff;font-size:17px;
  cursor:pointer;padding:4px 6px}
.dsk-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;padding:26px 30px 18px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.dsk-top h1{font-size:26px;margin:0 0 4px;letter-spacing:-.01em}
.dsk-top .muted{font-size:14px;margin:0;max-width:64ch}
.dsk-panels{min-width:0;padding:0 30px}
.dsk-main>[data-msg]{padding:0 30px}

/* The old tab strip is gone; anything still emitting one should not float. */
.dsk-tabs{display:none}

@media (max-width:900px){
  .dsk-shell{grid-template-columns:1fr}
  .dsk-side{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:60;
    transform:translateX(-100%);transition:transform .22s ease;background:#0b0b12;
    border-right:1px solid var(--line);height:100vh}
  .dsk-shell.nav-open .dsk-side{transform:none}
  .dsk-burger{display:inline-block}
  .dsk-bar,.dsk-top,.dsk-panels,.dsk-main>[data-msg]{padding-left:16px;padding-right:16px}

  /* A drawer with nothing behind it reads as a panel that failed to finish
     opening: the page stayed lit and tappable underneath. */
  .dsk-scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.55);
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  .dsk-shell.nav-open .dsk-scrim{opacity:1;pointer-events:auto}

  /* Three columns in 390px squeezed every job description into a four-line
     ribbon. Each row becomes a block instead. */
  .dsk-table,.dsk-table tbody,.dsk-table tr,.dsk-table td{display:block;width:100%}
  .dsk-table tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .dsk-table td{padding:2px 0;border-bottom:0}
  .dsk-table td.num{text-align:left}
  .dsk-tail td{padding-top:8px}
  .dsk-box{padding:2px 14px 6px}

  /* "4 running" broke across two lines in a card that had room to spare. */
  .dsk-cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .dsk-card b{font-size:22px}
  .dsk-card{padding:14px 14px 14px 58px}
  .dsk-card .dsk-ic{left:12px;top:14px;width:32px;height:32px}
}

/* A card carries an icon so the number is identifiable before it is read, and
   a section title carries a short accent bar — both borrowed from the shape of
   a conventional admin console, because this page is now one. */
.dsk-card .dsk-ic{position:absolute;left:16px;top:16px;width:36px;height:36px;
  border-radius:11px;display:grid;place-items:center;font-size:15px;
  background:rgba(123,53,255,.16);color:var(--accent)}
.dsk-card.ok .dsk-ic{background:rgba(74,222,128,.14);color:#4ade80}
.dsk-card.bad .dsk-ic{background:rgba(255,106,94,.16);color:#ff6a5e}
.dsk-h{display:flex;align-items:center;gap:9px}
.dsk-h:before{content:"";width:3px;height:14px;border-radius:2px;background:var(--accent);
  display:inline-block}
.dsk-box{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02);
  padding:6px 18px 10px;margin:0 0 22px}
.dsk-box .dsk-table td:first-child{padding-left:0}
.dsk-box .dsk-table tr:last-child td{border-bottom:0}

/* The console screens. */
.dsk-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0 0 8px}
/* The icon is absolutely placed, so the padding has to leave room for it in
   the same declaration — set separately above, the shorthand here reset it and
   the icon sat on top of the number. */
.dsk-card{position:relative;border:1px solid var(--line);border-radius:14px;
  padding:16px 18px 16px 64px;background:rgba(255,255,255,.03);display:grid;gap:3px}
.dsk-card span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dsk-card b{font-size:26px;font-weight:800;line-height:1.1}
.dsk-card em{font-style:normal;font-size:12.5px;color:var(--muted)}
.dsk-card.bad b{color:#ff6a5e}
.dsk-card.ok b{color:#4ade80}
.dsk-h{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:30px 0 10px;font-weight:800}
.dsk-table{width:100%;border-collapse:collapse;font-size:14px}
.dsk-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.dsk-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dsk-table tr.is-bad td{background:rgba(255,106,94,.07)}
.dsk-table .muted{color:var(--muted);font-size:12.5px}
.dsk-tail td{padding-top:0;border-bottom:0}
.dsk-tail pre{margin:0;padding:10px 12px;background:#07070b;border:1px solid var(--line);
  border-radius:10px;font-size:11.5px;line-height:1.5;color:var(--muted);
  overflow-x:auto;white-space:pre-wrap;word-break:break-word}
.dsk-flag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;
  font-weight:800;background:rgba(255,106,94,.16);color:#ff6a5e;margin-right:8px}
.dsk-tabs{flex-wrap:wrap}

.dsk-note{margin-top:22px;font-size:12.5px;line-height:1.7}
.dsk-note code{display:block;margin-top:6px;padding:9px 11px;background:#07070b;
  border:1px solid var(--line);border-radius:9px;font-size:11.5px;overflow-x:auto;
  white-space:nowrap;color:var(--muted)}

.ist-find{display:flex;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.ist-find input{flex:1 1 280px;min-width:220px;padding:11px 14px;border-radius:11px;
  border:1px solid var(--line);background:#0b0b10;color:#fff;font:inherit;font-size:14px}
.ist-find input:focus{outline:none;border-color:var(--accent)}

.dsk-dl{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-top:22px;padding:16px 18px;border:1px solid var(--line);
  border-radius:14px;background:rgba(255,255,255,.02)}
.dsk-dl span{font-size:13px;color:var(--muted);max-width:52ch}
.dsk-dl .btn{white-space:nowrap}

.dsk-poster{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.dsk-poster select{background:#0b0b10;color:#fff;border:1px solid var(--line);border-radius:8px;
  padding:6px 9px;font:inherit;font-size:12.5px}
.dsk-toggle{min-width:66px;padding:8px 14px;font-size:12.5px}
.dsk-toggle.is-on{background:var(--accent);border-color:var(--accent);color:#fff}

.dsk-schedbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.dsk-range{padding:7px 14px;font-size:12.5px}
.dsk-range.is-on{background:var(--accent);border-color:var(--accent);color:#fff}
.dsk-sched a{color:var(--accent);text-decoration:underline}

/* Attaching a picture, at the desk. */
.ist-pic{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin:14px 0 4px;
  padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.ist-pic figure{margin:0;flex:0 0 132px}
.ist-pic figure img{width:132px;height:132px;object-fit:cover;border-radius:10px;display:block}
.ist-pic figcaption{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.4}
.ist-nopic{flex:0 0 132px;height:132px;border-radius:10px;display:grid;place-items:center;
  border:1px dashed var(--line);color:var(--muted);font-size:12px}
.ist-picform{flex:1 1 320px;min-width:260px;display:grid;gap:8px}
.ist-picform .acc-field span em{font-weight:400;opacity:.75}

/* The archive introduces itself before it lists anything. */
.ist-about{font-size:17px;line-height:1.7;color:var(--muted);max-width:62ch;margin:14px 0 0}
.ist-stats{list-style:none;display:flex;flex-wrap:wrap;gap:34px;margin:28px 0 0;padding:0}
.ist-stats li{display:flex;flex-direction:column;gap:2px}
.ist-stats b{font-size:30px;font-weight:800;color:var(--accent);
  font-variant-numeric:tabular-nums;line-height:1}
.ist-stats span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Index: today's stories, then a month at a time. */
/* .section h2 is clamp(30px,4vw,52px) and outranks a single class, so "Jodi a"
   and the month name were printing at hero size. */
.ist-index .ist-h2,.ist-page .ist-h2{font-size:15px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin:34px 0 14px;font-weight:800}
.ist-thumb.is-blank{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;background:rgba(198,160,74,.07);
  border:1px solid rgba(198,160,74,.16)}
.ist-thumb.is-blank b{font-size:30px;font-weight:800;color:var(--accent);line-height:1;
  font-variant-numeric:tabular-nums}
.ist-thumb.is-blank i{font-style:normal;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.ist-thumb.is-blank u{text-decoration:none;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums;opacity:.75}
.ist-grid.is-today .ist-cell{border-color:rgba(198,160,74,.45)}
.ist-months{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 0;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.ist-m{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  border:1px solid rgba(255,255,255,.12);transition:color .15s ease,border-color .15s ease}
.ist-m:hover{color:#c6a04a;border-color:rgba(198,160,74,.5)}
.ist-m.is-on{color:#12100c;background:#c6a04a;border-color:#c6a04a}
/* The poster, and the button that sends it. Shown at half scale — big enough
   to read the line on it, small enough that it does not shove the sources off
   the screen. */
.ist-share{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;margin:34px 0 4px;
  padding-top:26px;border-top:1px solid rgba(198,160,74,.22)}
.ist-poster{margin:0;flex:0 0 auto;width:min(240px,60vw)}
.ist-poster img{display:block;width:100%;height:auto;border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.38)}
.ist-sharebtn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:12px 20px;border-radius:999px;border:1px solid rgba(198,160,74,.55);
  background:rgba(198,160,74,.1);color:#c6a04a;font:800 14.5px/1 inherit;
  letter-spacing:.02em;transition:background .18s ease,color .18s ease}
.ist-sharebtn:hover,.ist-sharebtn:focus-visible{background:#c6a04a;color:#12100c}
@media (max-width:560px){
  .ist-share{gap:16px}
  .ist-sharebtn{width:100%;justify-content:center}
}

/* The consent banner. Only ever rendered when analytics is configured AND the
   reader has not already answered, in the page or in their browser settings. */
.cc{position:fixed;left:14px;right:14px;bottom:14px;z-index:200;max-width:640px;
  margin:auto;padding:18px 20px;border-radius:18px;border:1px solid var(--line);
  background:rgba(12,12,18,.97);backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.5);transform:translateY(14px);opacity:0;
  transition:opacity .2s ease,transform .2s ease}
.cc.is-in{opacity:1;transform:none}
.cc p{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--muted)}
.cc p a{color:var(--accent);text-decoration:underline}
.cc-btns{display:flex;gap:10px;flex-wrap:wrap}
.cc-btns .btn{flex:1 1 auto;justify-content:center;min-height:44px}
@media (min-width:560px){.cc-btns .btn{flex:0 0 auto}}
body.has-playerbar .cc{bottom:96px}

/* The page swap.
   main is replaced outright by the shell, and the body class that carries the
   accent colour changes in the same frame — so a move from the homepage to
   Istwa flipped every purple to gold instantly while the content vanished. The
   navigation itself is seamless (the radio keeps playing, the video is never
   reloaded); it just happened too abruptly to read that way.

   Short and slight: 160ms and a 6px lift. Long enough to follow, too short to
   feel like waiting, and the accent is eased separately so the colour arrives
   with the content rather than ahead of it. */
/* Movement only — never opacity.
   Chrome freezes animations in a hidden tab, and an animation that starts at
   opacity 0 freezes there too: the page arrives, sits at zero, and looks
   broken. Animating position instead means the worst possible failure is
   content resting six pixels low, which nobody will ever notice. The softening
   comes from the movement anyway; the fade was never doing the work. */
main.pg-in{animation:pgin .18s cubic-bezier(.22,.61,.36,1) both}
@keyframes pgin{from{transform:translateY(7px)}to{transform:none}}
body{transition:background-color .22s ease}
.topbar,.ticker,.playerbar{transition:background-color .22s ease,border-color .22s ease}

@media (prefers-reduced-motion:reduce){
  body,.topbar,.ticker,.playerbar{transition:none}
  main.pg-in{animation:none}
}

/* The charts, behind one set of tabs. */
.ch-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.ch-tab{padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);font:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;white-space:nowrap;
  transition:color .15s ease,border-color .15s ease,background .15s ease}
.ch-tab:hover{color:#fff;border-color:rgba(255,255,255,.28)}
.ch-tab.on{background:#fff;color:#0a0a10;border-color:#fff}
@media (max-width:700px){
  .ch-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;
    scrollbar-width:none;-ms-overflow-style:none}
  .ch-tabs::-webkit-scrollbar{display:none}
}

/* The lead desk's corroboration block: the other outlets carrying this story,
   each with its own headline. Set as a list of links rather than a paragraph
   because the editor is scanning for agreement and disagreement, not reading. */
.dsk-corro{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);
  border-radius:14px;background:rgba(255,255,255,.03)}
.dsk-corro-h{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:900;margin-bottom:8px}
.dsk-corro-i{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:7px 0;
  border-top:1px solid var(--line)}
.dsk-corro-i:first-of-type{border-top:0}
.dsk-corro-i b{font-size:12px;font-weight:800;color:#fff;white-space:nowrap}
.dsk-corro-i em{font-size:11px;color:var(--muted);font-style:normal;text-align:right}
.dsk-corro-i span{grid-column:1/-1;font-size:13px;line-height:1.45;color:var(--muted)}
.dsk-corro-i:hover span{color:#fff}

/* A lead two or more newsrooms are carrying. Marked on the card because the
   desk is scanned rather than read, and corroboration is the thing worth
   spotting before the headline. */
.dsk-badge{display:inline-block;margin-left:10px;padding:2px 9px;border-radius:999px;
  background:rgba(205,166,78,.16);border:1px solid rgba(205,166,78,.45);
  color:#e6c877;font-size:10px;font-weight:900;letter-spacing:.08em;
  text-transform:uppercase;vertical-align:middle}
.dsk.is-corro{border-color:rgba(205,166,78,.38)}

/* The editorial brief. Read as a research record rather than an article: the
   fact check leads, conflicts are loud, and every claim carries its outlets. */
.bf .bf-caveat{margin:8px 0 0;padding:9px 12px;border-radius:10px;font-size:13px;
  background:rgba(255,200,47,.09);border:1px solid rgba(255,200,47,.32);color:#e8d49a}
.bf-ok{color:#7fd18d;font-weight:800}
.bf-warn{color:#e8b84b;font-weight:800}
.bf-check{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.bf-check span{padding:4px 11px;border-radius:999px;font-size:12px;font-weight:800;
  border:1px solid var(--line)}
.bf-c-ok{color:#7fd18d;border-color:rgba(127,209,141,.4)!important;background:rgba(127,209,141,.10)}
.bf-c-warn{color:#e8b84b;border-color:rgba(232,184,75,.45)!important;background:rgba(232,184,75,.10)}
.bf-c-solo{color:var(--muted)}
.bf-h{margin:18px 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:900}
.bf-fact{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-top:1px solid var(--line);font-size:14px}
.bf-fact:first-of-type{border-top:0}
.bf-fact em{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap}
.bf-fact.is-solo span{color:var(--muted)}
.bf-clash{margin:12px 0;padding:12px 14px;border-radius:12px;
  background:rgba(232,184,75,.10);border:1px solid rgba(232,184,75,.42)}
.bf-clash b{display:block;color:#e8b84b;font-size:13px;margin-bottom:6px}
.bf-clash div{font-size:14px;padding:2px 0}
.bf-clash em{font-style:normal;font-weight:900;color:#fff}
.bf-note{display:block;margin-top:6px;font-size:12px;color:var(--muted)}
.bf-quote{margin:10px 0;padding:10px 14px;border-left:3px solid var(--accent);
  font-size:14px;line-height:1.55;color:#e9e9f1}
.bf-quote cite{display:block;margin-top:5px;font-style:normal;font-size:11px;color:var(--muted)}
.bf-srcs{display:grid;gap:6px}
.bf-src{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:7px 0;
  border-top:1px solid var(--line)}
.bf-src:first-of-type{border-top:0}
.bf-src b{font-size:12px;color:#fff;white-space:nowrap}
.bf-src span{grid-column:1/-1;font-size:13px;color:var(--muted)}
.bf-src:hover span{color:#fff}
.bf-gate{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.bf-gate label{display:flex;gap:9px;align-items:flex-start;font-size:13px;
  color:var(--muted);margin-bottom:12px;cursor:pointer}
.bf-gate input{margin-top:2px}
.bf-gate .btn.primary:disabled{opacity:.4;cursor:not-allowed}

/* A machine-written draft. The two checks sit ABOVE the prose on purpose: read
   fluently enough and an invented ministry looks exactly like a real one. */
.df-warn{margin:12px 0;padding:12px 14px;border-radius:12px;
  background:rgba(232,184,75,.10);border:1px solid rgba(232,184,75,.45)}
.df-warn.df-bad{background:rgba(255,90,90,.10);border-color:rgba(255,90,90,.45)}
.df-warn b{display:block;font-size:13px;color:#e8b84b;margin-bottom:6px}
.df-warn.df-bad b{color:#ff8b8b}
.df-warn span{display:block;font-size:13px;color:#e9e9f1;line-height:1.6}
.df-warn em{display:block;margin-top:7px;font-size:12px;font-style:normal;color:var(--muted)}
.df-warn.df-bad em em{color:#ff8b8b;font-weight:800}
.df-ok{margin:10px 0;padding:8px 13px;border-radius:999px;display:inline-block;
  font-size:12px;font-weight:800;color:#7fd18d;
  background:rgba(127,209,141,.10);border:1px solid rgba(127,209,141,.36)}
.df-body{margin:14px 0;padding:16px 18px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid var(--line)}
.df-body p{margin:0 0 12px;font-size:15px;line-height:1.72;color:#e9e9f1}
.df-body p:last-child{margin-bottom:0}

/* ---- the charts page ------------------------------------------------ */
.ch-wrap{padding:28px 0 64px}
.ch-top h1{margin:0 0 6px;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.02em}
.ch-lede{margin:0 0 18px;color:var(--muted);max-width:62ch}
.ch-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.ch-nav a{padding:7px 13px;border:1px solid var(--line);border-radius:999px;
  font-size:.86rem;color:var(--text);text-decoration:none}
.ch-nav a:hover{border-color:var(--accent);color:var(--accent)}
.ch-block{margin:0 0 42px;scroll-margin-top:84px}
.ch-head h2{margin:0 0 4px;font-size:1.35rem;letter-spacing:-.01em}
.ch-blurb{margin:0 0 2px;color:var(--muted);font-size:.94rem}
.ch-week{margin:0 0 14px;color:var(--muted);font-size:.8rem;opacity:.75}
/* A grid, not a rail. A rail hides most of a chart behind a horizontal
   scroll — on a page someone opened to READ the chart, all twenty should be
   visible at once. */
.ch-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.ch-link{display:block;text-decoration:none;color:inherit;position:relative}
.ch-art{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:10px;
  border:1px solid var(--line);display:block;background:#15121f}
/* Top RIGHT: build-chart-posters.py burns the nago wordmark into the top-left
   of every poster, and the badge was sitting squarely on it. */
.ch-rank{position:absolute;top:6px;right:6px;z-index:2;min-width:26px;height:26px;
  display:grid;place-items:center;border-radius:8px;background:rgba(8,6,18,.82);
  color:#fff;font-size:.82rem;font-weight:700;padding:0 6px}
.ch-meta{display:block;margin-top:7px}
.ch-title{display:block;font-size:.9rem;font-weight:600;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ch-artist{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.ch-year{opacity:.6}
.ch-link:hover .ch-art{border-color:var(--accent)}
/* Share sits UNDER the rank badge, not at the foot of the card. The poster's
   bottom edge is set by aspect-ratio, so no fixed offset from the bottom of
   the <li> reliably lands on the artwork instead of the title beneath it —
   and the top-left is out, because build-chart-posters.py burns the wordmark
   there. The button is a sibling of .ch-link, never a child: a <button>
   inside an <a> is invalid and gets reparented out of the card. */
.ch-item{position:relative}
.ch-item .ent-share{top:38px;right:6px;bottom:auto;width:30px;height:30px;font-size:.74rem}
.ch-item:hover .ent-share,.ch-item .ent-share:focus-visible{opacity:1;transform:none}
.ch-empty{color:var(--muted);padding:30px 0}

/* ---- the homepage number-ones strip --------------------------------- */
.no1-grid{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.no1-cell a{display:block;text-decoration:none;color:inherit}
.no1-art{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:12px;
  border:1px solid var(--line);display:block;background:#15121f}
.no1-cat{display:block;margin-top:8px;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);font-weight:700}
.no1-song{display:block;font-size:.88rem;font-weight:600;line-height:1.25;margin-top:2px}
.no1-by{display:block;font-size:.8rem;color:var(--muted)}
.no1-cell a:hover .no1-art{border-color:var(--accent)}