/* Website season page. The site's gallery hardware turned into a broadcaster's schedule:
   we build a fixed number of websites a season, the line-up board shows which slots are
   taken, past builds play as "Previously on" on a turning rack of monitors, and you pitch
   for a slot. Reuses style.css tokens; the accent stays a tally, never a fill. */

.ws{--desk:#1C1A1B; --mod:#242122; --mod-2:#161415}
html:has(body.ws),body.ws{overflow-x:clip}
.ws-flag{display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.4rem; padding:.36rem .7rem; background:var(--umd); color:var(--umd-ink); border:1px solid #000; border-radius:1px;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.ws-flag .tally{animation:ws-blink 2.4s steps(1) infinite}
@keyframes ws-blink{0%,70%{opacity:1}71%,100%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .ws-flag .tally{animation:none} }
.page-head__hint a,.ws-link{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; color:inherit}

/* ---------- hero ---------- */
.ws-count{display:inline-grid; place-items:center; min-width:1.15em; padding:0 .12em; margin-right:.06em; border-radius:2px; background:var(--black); color:var(--lcd);
  text-shadow:0 0 .25em rgba(245,154,98,.55); box-shadow:inset 0 2px 8px rgba(0,0,0,.7)}
.ws-sub{margin-top:1.4rem; max-width:34ch; font-family:var(--f-head); font-weight:600; font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.4; color:var(--ink-2); text-wrap:pretty}
.btn--big{min-height:56px; padding-inline:1.5rem 1.6rem; font-size:1.05rem}
.ws-head{padding-bottom:clamp(2.5rem,5vw,4rem)}
.ws-head__grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2rem,4vw,4rem); align-items:center}
.ws-head .page-head__title{font-size:clamp(2.3rem,4.6vw,4.1rem)}
.ws-head .page-head__title em{font-style:normal; color:var(--ink)}
@media (max-width:980px){ .ws-head__grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- the line-up board: a schedule on a monitor ---------- */
.board .mon__screen{aspect-ratio:auto; background:#0A0909; font-family:var(--f-mono); color:var(--umd-ink)}
.board .mon__screen::after{background:linear-gradient(155deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 30%)}
.board__top{display:flex; align-items:center; gap:.7rem; padding:.6rem clamp(.8rem,2vw,1.1rem); background:var(--umd); border-bottom:1px solid #000;
  font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.board__rows{list-style:none; margin:0; padding:0}
.board__top b{color:#fff; font-weight:600; font-size:.95rem; letter-spacing:.1em}
.board__left{margin-left:auto; color:var(--lcd); font-size:.875rem; letter-spacing:.08em; text-shadow:0 0 6px rgba(245,154,98,.35)}
.board__rows li{display:grid; grid-template-columns:2.4rem minmax(0,1fr) auto; gap:.8rem; align-items:center; padding:.8rem clamp(.8rem,2vw,1.1rem);
  border-top:1px solid #1B1819; font-size:.875rem; letter-spacing:.04em}
.board__n{color:var(--lcd); font-weight:600; font-variant-numeric:tabular-nums}
.board__w{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--on-black-2); font-family:var(--f-body); font-size:1rem; letter-spacing:0}
.board__w i{font-style:normal; color:var(--on-black-2)}
.board__s{display:inline-flex; align-items:center; gap:.45rem; text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:600; color:#6F6A6B; white-space:nowrap}
.board__rows li:not(.is-open) .board__w{text-decoration:line-through; text-decoration-color:#4a4546}
.board__rows li.is-open .board__w{color:#fff; font-family:var(--f-head); font-weight:700}
.board__rows li.is-open a{position:absolute; inset:0}
.board__rows li.is-open{position:relative; cursor:pointer; transition:background .2s}
.board__rows li.is-open:hover{background:#151213}
.board__rows li.is-open .board__s{color:#fff}
.board__rows li.is-open .tally{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.board__foot{display:flex; justify-content:space-between; gap:1rem; padding:.7rem clamp(.8rem,2vw,1.1rem); border-top:1px solid #000; background:#070606;
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-black-2)}
.board__foot .lcd{font-size:.75rem}

/* ---------- strip of facts under the hero ---------- */
.ws-facts{border-top:1.5px solid var(--black); border-bottom:1px solid var(--line-2)}
.ws-facts ul{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.ws-facts li{padding:1.1rem clamp(.8rem,2vw,1.4rem) 1.2rem; border-left:1px solid var(--line-2)}
.ws-facts li:first-child{border-left:0; padding-left:0}
.ws-facts b{display:block; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.03em; line-height:1.1}
.ws-facts span{display:block; margin-top:.3rem; font-size:1rem; font-weight:500; color:var(--ink-2); line-height:1.4}
.ws-facts b[data-left]{color:var(--black); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:4px; text-underline-offset:.12em}
@media (max-width:760px){ .ws-facts ul{grid-template-columns:1fr 1fr} .ws-facts li:nth-child(3){border-left:0; padding-left:0} .ws-facts li:nth-child(n+3){border-top:1px solid var(--line-2)} }

/* ---------- PREVIOUSLY ON: the rack of monitors that turns ---------- */
.prev{padding:var(--sec-y) 0; background:var(--space); color:var(--on-black); overflow:hidden}
.prev .sec-sub{color:var(--on-black-2)}
.prev ::selection{background:#fff; color:var(--black)}
.prev :focus-visible{outline:2px solid #fff; outline-offset:3px}
.prev__kicker{display:block; margin-bottom:.9rem; font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--lcd)}
.turn-wrap{--turn-w:560px; --turn-h:640px}
.turn{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; list-style:none; margin:0; padding:0}
html.js-turn .turn{display:block; position:relative; perspective:2600px; perspective-origin:50% 40%; touch-action:pan-y; height:var(--turn-h); overflow:visible}
.tp{display:flex; flex-direction:column; color:var(--on-black)}
html.js-turn .tp{position:absolute; left:50%; top:0; width:var(--turn-w); margin-left:calc(var(--turn-w) / -2); transform-style:preserve-3d; backface-visibility:hidden;
  transition:transform .9s var(--ease),opacity .5s,filter .5s; will-change:transform; user-select:none; opacity:0; pointer-events:none}
html.js-turn .tp[data-d="0"]{opacity:1; pointer-events:auto; z-index:4}
html.js-turn .tp[data-d="1"],html.js-turn .tp[data-d="-1"]{opacity:.55; filter:saturate(.4) brightness(.7); pointer-events:auto; cursor:pointer; z-index:3}
html.js-turn .tp[data-d="2"],html.js-turn .tp[data-d="-2"]{opacity:.2; filter:saturate(0) brightness(.5); pointer-events:auto; cursor:pointer; z-index:2}
html.js-turn .tp .tp__body{transition:opacity .5s}
html.js-turn .tp:not([data-d="0"]) .tp__body{opacity:0}
html.js-turn .tp[data-d="0"] .tally{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.tp .mon{box-shadow:0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.06), 0 40px 80px -40px rgba(0,0,0,.9)}
.tp .mon__screen{aspect-ratio:16/10}
.tp .mon__screen > img:not(.mon__bug){object-fit:cover; object-position:top}
.tp__body{padding:1.15rem .2rem 0; display:grid; gap:.45rem}
.tp__p{display:inline-block; margin-left:.5rem; padding:.18rem .5rem; vertical-align:.3em; border:1px solid #3A3536; font-family:var(--f-body); font-stretch:normal; font-size:.8125rem; font-weight:600; letter-spacing:0; color:var(--lcd)}
.tp__name{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.3rem,2.2vw,1.7rem); letter-spacing:-.025em; line-height:1.1}
.tp__d{font-size:1.08rem; line-height:1.5; color:#CFCBCA; text-wrap:pretty}
.tp__go{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; margin-top:.3rem; font-size:.9rem}
.tp__go a{color:#fff; text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:.2em}
.tp__go span{color:var(--on-black-2)}
/* the dial: one key per site, LED lit on the one on air */
.turn__dial{display:none; margin-top:clamp(1.5rem,3vw,2.25rem); gap:6px; align-items:stretch}
html.js-turn .turn__dial{display:flex}
.turn__arrow{flex:0 0 52px; display:grid; place-items:center; border:1px solid #000; border-radius:2px; background:linear-gradient(180deg,#2A2627,#1B1819); color:#fff; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 0 #000}
.turn__arrow:active{transform:translateY(1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.turn__keys{flex:1; display:flex; gap:4px; min-width:0}
.turn__keys button{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; height:52px; padding:0 .25rem;
  border:1px solid #000; border-radius:2px; background:linear-gradient(180deg,#242122,#171415); color:var(--on-black-2); cursor:pointer;
  font-family:var(--f-mono); font-size:.5625rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 0 #000}
.turn__keys button span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.turn__keys button i{width:14px; height:3px; border-radius:1px; background:#3a1d12}
.turn__keys button:hover{color:#fff}
.turn__keys button[aria-selected="true"]{color:#fff; background:linear-gradient(180deg,#1A1718,#121011); box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.turn__keys button[aria-selected="true"] i{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.turn__read{flex:0 0 auto; min-width:150px; display:flex; flex-direction:column; justify-content:center; padding:0 1rem; border:1px solid #000; border-radius:2px; background:var(--lcd-bg);
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--on-black-2)}
.turn__read b{color:var(--lcd); font-size:.95rem; font-weight:600; letter-spacing:.06em; font-variant-numeric:tabular-nums; text-shadow:0 0 6px rgba(245,154,98,.35)}
@media (prefers-reduced-motion:reduce){ html.js-turn .tp{transition:opacity .3s} }
@media (max-width:1100px){ .turn__keys button span{display:none} .turn__keys button{gap:0} }
@media (max-width:960px){
  html.js-turn .turn{height:auto; perspective:none; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding:4px 0 14px; scrollbar-width:none; touch-action:pan-x pan-y;
    margin-inline:calc(-1 * var(--pad-x)); padding-inline:var(--pad-x); scroll-padding-inline:var(--pad-x)}
  html.js-turn .turn::-webkit-scrollbar{display:none}
  html.js-turn .tp{position:relative; left:auto; top:auto; margin-left:0; width:min(84vw,460px); flex:0 0 auto; scroll-snap-align:start; transform:none!important; opacity:1; filter:none; pointer-events:auto}
  .turn__keys{display:none}
  .turn__dial{justify-content:space-between}
  .turn__read{flex:1; align-items:center}
}
@media (max-width:700px){ .turn{grid-template-columns:1fr} }

/* ---------- the no-list: a news crawl ---------- */
.crawl{display:flex; align-items:stretch; background:#000; color:#fff; border-block:1px solid #000; overflow:hidden; font-family:var(--f-mono)}
.crawl__bug{flex:none; display:flex; align-items:center; gap:.6rem; padding:.95rem clamp(1rem,2.5vw,1.6rem); background:var(--umd); color:#fff; border-right:1px solid #2A2627;
  font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; position:relative; z-index:1}
.crawl__win{flex:1; min-width:0; display:flex; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.crawl__track{display:flex; flex:none; gap:0; animation:crawl 70s linear infinite}
.crawl:hover .crawl__track,.crawl:focus-within .crawl__track{animation-play-state:paused}
.crawl__track span{display:flex; align-items:center; white-space:nowrap; padding:0 1.6rem; font-size:.875rem; letter-spacing:.04em}
.crawl__track span::after{content:"//"; margin-left:3.2rem; color:var(--on-black-2); letter-spacing:0}
@keyframes crawl{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .crawl__track{animation:none; flex-wrap:wrap} .crawl__track[aria-hidden]{display:none} }

/* ---------- the pitch desk ---------- */
.pitch{padding:var(--sec-y) 0; background:var(--desk); color:var(--on-black); scroll-margin-top:4rem}
.pitch .sec-sub{color:var(--on-black-2)}
.pitch ::selection{background:#fff; color:var(--black)}
.pitch :focus-visible{outline:2px solid #fff; outline-offset:3px}
.pitch__grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,4vw,4rem); align-items:start}
.pitch__left{display:flex; align-items:center; gap:1rem; margin-top:1.5rem}
.pitch__left b{display:grid; place-items:center; min-width:5.5rem; height:5.5rem; padding:0 .6rem; border:1px solid #000; border-radius:2px; background:var(--lcd-bg);
  font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:3.4rem; line-height:1; color:var(--lcd); text-shadow:0 0 14px rgba(245,154,98,.5); box-shadow:inset 0 2px 8px rgba(0,0,0,.7)}
.pitch__left span{font-family:var(--f-head); font-weight:700; font-size:1.3rem; color:#fff; line-height:1.2}
.pitch__sub{margin-top:1.4rem; max-width:34ch; font-size:1.05rem; line-height:1.55; color:var(--on-black-2)}
.mod__lede{margin:-.4rem 0 1.2rem; font-size:1rem; color:var(--on-black)}
.pitch__side .sec-head{margin-bottom:1rem}
.pitch__side .sec-sub{margin-left:0}
@media (max-width:980px){ .pitch__grid{grid-template-columns:minmax(0,1fr)} }

.mod{min-width:0; margin:0; padding:0 clamp(.9rem,2vw,1.4rem) clamp(1.1rem,2vw,1.5rem); border:1px solid #000; border-radius:3px;
  background:linear-gradient(180deg,var(--mod),#1F1C1D); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.03)}
.mod + .mod{margin-top:clamp(1rem,2vw,1.5rem)}
.mod__head{display:flex; align-items:center; gap:.7rem; margin:0 calc(-1*clamp(.9rem,2vw,1.4rem)) clamp(1.1rem,2vw,1.4rem); padding:.6rem clamp(.9rem,2vw,1.4rem);
  background:var(--umd); border-bottom:1px solid #000; border-radius:3px 3px 0 0;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--umd-ink)}
.mod__n{color:var(--lcd); font-variant-numeric:tabular-nums}
.mod__l{color:#fff}
.mod__r{margin-left:auto; color:var(--on-black-2); letter-spacing:.1em; text-align:right}
.mod.is-done{opacity:.55}
.mod.is-done .mod__r{color:var(--lcd)}

.fld{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.1rem}
.fld .wide{grid-column:1 / -1}
.fld label{display:grid; gap:.4rem; font-size:.9375rem; font-weight:600; letter-spacing:.02em; color:var(--on-black)}
.fld label .opt{font-weight:450; color:var(--on-black-2)}
.fld input,.fld textarea{width:100%; padding:.8rem .85rem; border:1px solid #000; border-radius:2px; background:#121011; color:#fff; font:inherit; font-size:1rem; font-weight:450;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.fld input::placeholder,.fld textarea::placeholder{color:#6F6A6B}
.fld input:focus,.fld textarea:focus{outline:none; border-color:var(--accent); box-shadow:inset 0 1px 3px rgba(0,0,0,.6), 0 0 0 1px var(--accent)}
.fld textarea{min-height:6.5rem; resize:vertical}
@media (max-width:560px){ .fld{grid-template-columns:1fr} }

/* keys with an LED: radio and checkbox questions */
.q{border:0; padding:0; margin:0 0 1.35rem; min-width:0}
.q legend{display:block; padding:0; margin-bottom:.65rem; font-size:.9375rem; font-weight:600; letter-spacing:.02em; color:var(--on-black)}
.q legend span{font-weight:450; color:var(--on-black-2)}
.keys{display:flex; flex-wrap:wrap; gap:6px}
.key{position:relative}
.key input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.key span{display:inline-flex; align-items:center; gap:.55rem; padding:.62rem .8rem; border:1px solid #000; border-radius:2px; cursor:pointer;
  background:linear-gradient(180deg,#2A2627,#1D1A1B); color:#E8E5E4; font-size:.875rem; line-height:1.2; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 0 #000; transition:background .15s,color .15s}
.key span::before{content:""; width:7px; height:7px; flex:none; border-radius:1px; background:#3a1d12; box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.key:hover span{background:linear-gradient(180deg,#322D2E,#221F20)}
.key input:focus-visible + span{outline:2px solid #fff; outline-offset:2px}
.key input:checked + span{background:linear-gradient(180deg,#141112,#100E0F); color:#fff; box-shadow:inset 0 2px 6px rgba(0,0,0,.7); transform:translateY(1px)}
.key input:checked + span::before{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}

.act{display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.25rem; margin-top:1.4rem}
.act__hint{font-size:.85rem; line-height:1.5; color:var(--on-black-2); max-width:36ch}
.act__skip{background:none; border:0; padding:0; font:inherit; font-size:.9rem; color:var(--on-black-2); text-decoration:underline; text-underline-offset:.2em; cursor:pointer}
.act__skip:hover{color:#fff}
.err{display:none; margin-top:1rem; padding:.8rem .9rem; border:1px solid var(--accent); border-radius:2px; font-size:.9rem; line-height:1.5; color:#fff}
.err.show{display:block}
.err a{color:#fff; text-decoration:underline; text-decoration-color:var(--accent)}
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}

/* on air: the confirmation */
.onair{display:none; text-align:left}
.onair.show{display:block}
.onair__sign{display:inline-flex; align-items:center; gap:.7rem; padding:.7rem 1.1rem; border:2px solid #3a1d12; border-radius:3px; background:#120d0b;
  font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:1.35rem; letter-spacing:.06em; text-transform:uppercase; color:#5a3020; transition:all .6s}
.onair.lit .onair__sign{border-color:var(--accent); color:#fff; background:#2a1308; box-shadow:0 0 0 1px #000, 0 0 28px rgba(247,126,45,.45), inset 0 0 18px rgba(247,126,45,.35); text-shadow:0 0 10px rgba(247,126,45,.9)}
.onair__t{margin-top:1.3rem; font-family:var(--f-head); font-weight:700; font-size:1.25rem; color:#fff}
.onair__d{margin-top:.6rem; font-size:.98rem; line-height:1.6; color:var(--on-black-2); max-width:52ch}
.onair__d b{color:#fff; font-weight:600}
.onair .umd{margin-top:1.3rem; max-width:30rem}

/* ---------- share ---------- */
.share{padding:clamp(3.5rem,7vw,5.5rem) 0; background:var(--paper-2); border-top:1px solid var(--line-2)}
.share__in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.5rem 3rem; align-items:center}
.share__t{max-width:22ch; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.4rem,3vw,2.25rem); letter-spacing:-.03em; line-height:1.08; text-wrap:balance}
.share__d{margin-top:.8rem; max-width:56ch; color:var(--ink-2); line-height:1.6}
.share__keys{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}
.share__ok{font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); min-width:9ch}
@media (max-width:860px){ .share__in{grid-template-columns:1fr} }

/* the mobile CTA bar */
.wsbar{position:fixed; left:0; right:0; bottom:0; z-index:var(--z-mcta); display:none; align-items:center; gap:1rem; padding:.7rem var(--pad-x) calc(.7rem + env(safe-area-inset-bottom));
  background:var(--black); color:#fff; border-top:1px solid #000; transform:translateY(110%); transition:transform .4s var(--ease)}
.wsbar.show{transform:none}
.wsbar{display:flex; justify-content:center}
.wsbar__t{display:flex; align-items:center; gap:.6rem; min-width:0; font-size:1rem; color:var(--on-black-2)}
.wsbar__t b{color:#fff; font-family:var(--f-head); font-weight:700}
@media (max-width:760px){ .wsbar{justify-content:space-between} .wsbar__t{font-size:.9rem} .wsbar__t .tally{display:none} .wsbar .btn{padding-inline:.9rem} }
body.ws{padding-bottom:4.5rem}

/* ---------- cues: a CTA after every section ---------- */
.cue{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; margin-top:clamp(2rem,4vw,3rem); padding-top:clamp(1.25rem,2.5vw,1.75rem); border-top:1.5px solid var(--black)}
.cue--dark{border-top-color:#2A2627}
.cue__t{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.3rem,2.6vw,2rem); letter-spacing:-.025em; line-height:1.15}
.cue__t > span{color:var(--ink-3)}
.cue--dark .cue__t > span{color:var(--on-black-2)}
.cue .btn{white-space:nowrap}
.svc--black .cue{margin-top:2rem}

/* ---------- the kit list: the rundown without its paperwork ---------- */
.rd--kit .rd__list > li{grid-template-columns:3.2rem minmax(0,15rem) minmax(0,1fr); padding-block:1.15rem}
.rd--kit .rd__slug{font-size:1.2rem}
.rd--kit .rd__note{font-size:1rem}

/* ---------- platforms: the crawl in display type ---------- */
.crawl--plat .crawl__bug{font-size:.875rem}
.crawl--plat .crawl__track{animation-duration:38s}
.crawl--plat .crawl__track span{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.3rem,2.4vw,1.9rem); letter-spacing:-.02em; padding-block:.9rem}
.crawl--plat .crawl__track span::after{content:""; width:8px; height:8px; margin-left:2.6rem; background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
/* the platforms' own marks, white on the black crawl; heights are set by eye so each reads at the same weight */
.crawl--plat .crawl__track span{gap:.55rem}
.crawl--plat .crawl__track img{display:block; flex:none; width:auto; height:calc(var(--lh,26px) * var(--k,1))}
.crawl--plat .lg--shopify{--lh:34px} .crawl--plat .lg--wordpress{--lh:30px} .crawl--plat .lg--webflow{--lh:22px}
.crawl--plat .lg--wix{--lh:24px} .crawl--plat .lg--squarespace{--lh:28px} .crawl--plat .lg--framer{--lh:24px}
.crawl__code{font-family:var(--f-mono); font-weight:600; font-size:.8em; letter-spacing:-.04em; color:var(--lcd); text-shadow:0 0 8px rgba(245,154,98,.5)}
@media (max-width:640px){ .crawl--plat{flex-direction:column; --k:.78} .crawl--plat .crawl__bug{border-right:0; border-bottom:1px solid #2A2627} }
/* on the dark desk the send key is white with its LED still lit */
.pitch .btn--accent,.wsbar .btn{--skirt:#8E898A; color:var(--black); background:#fff; border-color:#fff; --led:var(--accent)}
.pitch .btn--accent:hover,.wsbar .btn:hover{background:var(--paper-2); border-color:var(--paper-2)}
.nw,.wsbar__t b,.wsbar__s{white-space:nowrap}
@media (max-width:760px){ .wsbar__t{flex-direction:column; align-items:flex-start; gap:0; line-height:1.3} .wsbar__s{font-size:.8rem} }

/* ---------- slot-locked: the client's own row lights up after the deposit ---------- */
.board--lock .board__rows li.lock-row{padding-block:1.2rem; transition:background .5s}
.board--lock .lock-row .board__n{color:var(--accent)}
.board--lock .board__rows li.lock-row .board__w{text-decoration:none; color:#fff; font-family:var(--f-head); font-weight:700; font-size:1.2rem}
.board--lock .lock-row .board__s{color:#6F6A6B; transition:color .3s}
.board--lock .lock-row.is-set{background:#1a0f0a}
.board--lock .lock-row.is-set .board__s{color:#fff}
.board--lock .lock-row.is-set .tally{background:var(--accent); box-shadow:0 0 9px rgba(247,126,45,.9)}
.ws--locked .nav{justify-content:space-between}

/* ---------- the rate card: a station's card, split by daypart ----------
   Programme, its runtime on a 12-week ruler that starts at "content in", and the spot rate in an LCD.
   Prime time is the board's six slots; daytime packages run any week. Breaks are the add-ons, and
   after launch is the schedule on repeat. LCD orange marks time and money; the accent stays a tally. */
.rates{padding:var(--sec-y) 0; background:var(--paper-2); border-top:1px solid var(--line-2); scroll-margin-top:4rem}
.rc{--rc-x:clamp(.9rem,2.2vw,1.5rem); --rc-gap:clamp(1rem,2.5vw,2rem); --rc-cols:minmax(0,1.25fr) minmax(0,1fr) 14rem}
.rc .mon__screen{aspect-ratio:auto; background:#0A0909; color:var(--umd-ink)}
.rc .mon__screen::after{background:linear-gradient(155deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 30%)}
.rc__top{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .8rem; padding:.6rem var(--rc-x); background:var(--umd); border-bottom:1px solid #000;
  font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase}
.rc__top b{color:#fff; font-size:.95rem; letter-spacing:.1em}
.rc__gst{margin-left:auto; color:var(--lcd); text-shadow:0 0 6px rgba(245,154,98,.35)}
.rc__head,.rc__row{display:grid; grid-template-columns:var(--rc-cols); column-gap:var(--rc-gap); padding-inline:var(--rc-x)}
.rc__head{align-items:end; padding-block:.9rem .5rem; background:#070606;
  font-family:var(--f-mono); font-size:.625rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#6F6A6B}
.rc__head-r{text-align:right}
.rc__ruler{position:relative; height:1.7rem; border-bottom:1px solid #3A3536;
  background:repeating-linear-gradient(90deg,#3A3536 0 1px,transparent 1px calc(100% / 12)) left bottom / 100% 6px no-repeat}
.rc__ruler::after{content:""; position:absolute; right:0; bottom:0; width:1px; height:6px; background:#3A3536}
.rc__ruler i{position:absolute; bottom:.6rem; font-style:normal; white-space:nowrap; color:var(--on-black-2)}
.rc__ruler i:nth-child(1){left:0; color:var(--lcd)}
.rc__ruler i:nth-child(2){left:33.333%; transform:translateX(-50%)}
.rc__ruler i:nth-child(3){left:66.667%; transform:translateX(-50%)}
.rc__ruler i:nth-child(4){right:0}

.rc__part{border-top:1px solid #000}
.rc__daypart{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .8rem; padding:1.5rem var(--rc-x) .9rem}
.rc__daypart h3{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.25rem,2.3vw,1.7rem); letter-spacing:-.02em; line-height:1.1; color:#fff}
.rc__daypart p{margin-left:auto; font-size:.95rem; color:var(--on-black-2)}
.rc__daypart p b{color:#fff; font-weight:600}
.rc__rows{list-style:none; margin:0; padding:0}
.rc__row{align-items:center; padding-block:1.05rem; border-top:1px solid #1B1819}
.rc__prog h4{font-family:var(--f-head); font-weight:700; font-size:1.15rem; line-height:1.25; color:#fff}
.rc__prog p{margin-top:.3rem; max-width:52ch; font-size:.95rem; line-height:1.5; color:var(--on-black-2); text-wrap:pretty}
.rc__run{display:grid; gap:.45rem; min-width:0}
.rc__wk{font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--on-black-2)}
.rc__track{position:relative; display:block; height:14px; border-bottom:1px solid #2A2627; box-shadow:inset -1px 0 0 #211E1F;
  background:repeating-linear-gradient(90deg,#211E1F 0 1px,transparent 1px calc(100% / 12))}
.rc__track i{position:absolute; left:0; top:3px; bottom:3px; width:calc(var(--to) / 12 * 100%); border-radius:1px;
  background:linear-gradient(90deg,var(--lcd) calc(var(--from) / var(--to) * 100%),transparent 0),repeating-linear-gradient(135deg,rgba(245,154,98,.55) 0 2px,transparent 2px 5px);
  box-shadow:0 0 8px rgba(245,154,98,.3), inset 0 0 0 1px rgba(245,154,98,.5)}
/* after launch: each bar is the first 12 weeks after launch on the same ruler. The line is the upkeep every
   plan carries; Grow adds a report tick each month (weeks 4, 8, 12); Studio adds the quarter's shoot in white */
.rc__run--rep .rc__track i{width:100%; top:5px; bottom:5px; background:var(--lcd); opacity:.55; box-shadow:0 0 6px rgba(245,154,98,.3)}
.rc__run--thin .rc__track i{top:6px; bottom:6px; opacity:.25; box-shadow:none}
.rc__track .rc__mk,.rc__track .rc__shoot{position:absolute; left:calc(var(--at) / 12 * 100%); border-radius:1px}
.rc__track .rc__mk{top:0; bottom:-1px; width:3px; margin-left:-3px; background:var(--lcd); box-shadow:0 0 7px rgba(245,154,98,.75)}
.rc__track .rc__shoot{top:-4px; bottom:-4px; width:8px; margin-left:-4px; background:#fff; box-shadow:0 0 9px rgba(255,255,255,.5)}
.rc__rate{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:.3rem .55rem; text-align:right}
.rc__rate .lcd{min-height:0; padding:.45rem .7rem; font-size:1.05rem; letter-spacing:.05em}
.rc__rate small{font-family:var(--f-mono); font-size:.625rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#8A8485}
.rc__note{padding:.8rem var(--rc-x) 1.1rem; border-top:1px dashed #2A2627; font-size:.9rem; line-height:1.5; color:var(--on-black-2)}

/* breaks: the add-ons as commercial breaks, each opening on a cue marker */
.rc__breaks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #1B1819}
.rc__breaks li{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.35rem; padding:1.5rem var(--rc-x) 1.35rem; border-left:1px solid #1B1819}
.rc__breaks li:first-child{border-left:0}
.rc__breaks li::before{content:""; position:absolute; left:-1px; top:-1px; width:2px; height:18px; background:var(--lcd); box-shadow:0 0 6px rgba(245,154,98,.5)}
.rc__breaks li:first-child::before{left:0}
.rc__cue{font-family:var(--f-mono); font-size:.625rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--lcd)}
.rc__breaks h4{font-family:var(--f-head); font-weight:700; font-size:1.1rem; line-height:1.25; color:#fff}
.rc__breaks p:not(.rc__rate){margin-bottom:.35rem; font-size:.92rem; line-height:1.5; color:var(--on-black-2); text-wrap:pretty}
.rc__breaks .rc__rate{justify-content:flex-start; text-align:left}

.rc__foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; padding:.7rem var(--rc-x); border-top:1px solid #000; background:#070606;
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-black-2)}
.rc__foot .lcd{min-height:0; padding:.35rem .6rem; font-size:.6875rem}

@media (max-width:820px){
  .rc{--rc-cols:minmax(0,1fr) auto}
  .rc__head{display:none}
  .rc__row{grid-template-areas:"name rate" "desc desc" "run run"; row-gap:.55rem}
  .rc__prog{display:contents}
  .rc__prog h4{grid-area:name} .rc__prog p{grid-area:desc; margin-top:0} .rc__run{grid-area:run; margin-top:.2rem} .rc__rate{grid-area:rate}
  .rc__daypart p{margin-left:0; flex-basis:100%}
  .rc__breaks{grid-template-columns:minmax(0,1fr)}
  .rc__breaks li{border-left:0; border-top:1px solid #1B1819}
  .rc__breaks li:first-child{border-top:0}
  .rc__breaks li::before{left:0}
}

/* the board names its daypart; the kit rundown marks the add-on row */
.board__season{color:var(--on-black-2)}
@media (max-width:520px){ .board__season{display:none} }
.rd--kit .rd__list > li.rd__add{border-top:1px dashed #3A3536}
.rd--kit .rd__add .rd__pg{color:#fff; text-shadow:none}