/* Branding page. The site's broadcast kit turned to the test card: a station runs a test card so
   every set can be tuned to show the picture right, and a brand guide does that job for the
   signwriter, the printer, the staff and whoever opens Canva. The hero card is drawn in VL's own
   brand; the rate card lights the layers each package tunes; the drift demo shows three surfaces
   pulled back into spec. Reuses style.css tokens. The accent stays a tally, never a fill.
   Shared pieces (pitch desk, rate card frame, crawl, share, wsbar, cues) are copied from
   website-season/mockup/season.css on purpose, so each page can change without breaking the other. */

.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} }
.ws-link{text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; color:inherit}
.nw{white-space:nowrap}

/* ---------- hero ---------- */
.ws-sub{margin-top:1.4rem; max-width:36ch; 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,5fr) minmax(0,6fr); gap:clamp(2rem,4vw,4rem); align-items:center}
.ws-head .page-head__title{font-size:clamp(2.3rem,4.4vw,3.9rem)}
.ws-head .page-head__title em{display:block; font-style:normal; color:var(--ink-3)}
@media (max-width:980px){ .ws-head__grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- the test card ----------
   One drawing, six layers. Each layer reads its opacity from a custom property, so the same card
   can sit fully tuned in the hero and half tuned beside the rate card. Layers that a package
   doesn't cover fade to a ghost rather than vanish, so you can see what you'd be missing. */
.tc-mon .mon__screen{background:#4F4C4D}
.tc{display:block; width:100%; height:100%; font-family:var(--f-mono)}
.tc:not([data-on~="mark"]){--l-mark:.07}
.tc:not([data-on~="colour"]){--l-colour:.07}
.tc:not([data-on~="type"]){--l-type:.07}
.tc:not([data-on~="rules"]){--l-rules:.07}
.tc:not([data-on~="voice"]){--l-voice:.07}
.tc:not([data-on~="screen"]){--l-screen:.07}
.tc:not([data-on~="social"]){--l-social:.07}
.tc:not([data-on~="print"]){--l-print:.07}
.tc:not([data-on~="shirt"]){--l-shirt:.07}
.tc:not([data-on~="sign"]){--l-sign:.07}
.tc:not([data-on~="van"]){--l-van:.07}
.tc__disp{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800}
.tc__body{font-family:var(--f-body); font-weight:500}
.tc-umd .umd__l b{color:#fff; font-weight:600}

/* ---------- 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}
@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)} }

/* ---------- the drift: three surfaces out of spec, then tuned ---------- */
.drift{padding:var(--sec-y) 0; background:var(--space); color:var(--on-black); overflow:hidden}
.drift .sec-sub{color:var(--on-black-2)}
.drift ::selection{background:#fff; color:var(--black)}
.drift :focus-visible{outline:2px solid #fff; outline-offset:3px}
.drift .btn--ghost{--skirt:rgba(255,255,255,.55); --led:#4A4748; color:var(--on-black); background:transparent; border-color:rgba(255,255,255,.55)}
.drift .btn--ghost:hover{background:rgba(255,255,255,.06); --led:var(--accent)}
.drift__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)}
.drift__row{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.5rem)}
.sf .mon__screen{aspect-ratio:4/3; display:grid; place-items:center}
.sf__t{margin-top:1rem; font-family:var(--f-head); font-weight:700; font-size:1.1rem; color:#fff}
.sf .umd{margin-top:.55rem}
.sf .umd__p,.drift.is-cal .sf .umd__f{display:none}
.drift.is-cal .sf .umd__p{display:inline}
.drift.is-cal .sf .tally{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.drift__keys{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:clamp(1.75rem,3vw,2.5rem)}
.drift__read{font-family:var(--f-mono); font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--on-black-2)}
.drift.is-cal .drift__read{color:var(--lcd)}
@media (max-width:860px){ .drift__row{grid-template-columns:minmax(0,1fr); max-width:30rem} }

/* every surface eases between its drifted and tuned state */
.sf *{transition:transform .7s var(--ease), background-color .7s, color .7s, filter .7s, letter-spacing .7s, padding .7s, width .7s, font-size .7s}
@media (prefers-reduced-motion:reduce){ .sf *{transition:none} }

/* 01 the studio door: black printed brown, logo stretched */
.sf--door .mon__screen{background:linear-gradient(180deg,#3A3637,#2A2627 60%,#211E1F)}
.plaque{position:relative; width:62%; aspect-ratio:3/2; display:grid; place-items:center; align-content:center; gap:9%; padding:0 9%;
  background:#4A3424; box-shadow:0 14px 30px -12px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08)}
.plaque::before,.plaque::after{content:""; position:absolute; top:7%; width:5px; height:5px; border-radius:50%; background:#7B7576; box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.plaque::before{left:5%} .plaque::after{right:5%}
.plaque img{width:72%; height:auto; transform:scaleX(1.32) scaleY(.82)}
.plaque span{font-family:var(--f-body); font-weight:500; font-size:clamp(.5rem,1vw,.7rem); letter-spacing:.06em; color:#C9B8AA}
.drift.is-cal .plaque{background:var(--black)}
.drift.is-cal .plaque img{transform:none; width:78%}
.drift.is-cal .plaque span{color:var(--on-black-2); letter-spacing:.14em; text-transform:uppercase; font-family:var(--f-mono)}

/* 02 a social post: the accent used as a fill, a blurry logo, a stock headline face */
.sf--post .mon__screen{background:#151314}
.post{width:58%; aspect-ratio:1; display:flex; flex-direction:column; justify-content:space-between; padding:9%; background:var(--accent); color:#fff;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.8)}
.post b{font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:400; font-size:clamp(.95rem,2vw,1.4rem); line-height:1.1; letter-spacing:0}
.post__foot{display:flex; align-items:center; justify-content:space-between}
.post__foot i{width:9px; height:9px; border-radius:1px; background:rgba(255,255,255,.5)}
.post img{width:48%; height:auto; filter:blur(1.6px) contrast(.8)}
.post .post__k,.drift.is-cal .post .post__w{display:none}
.drift.is-cal .post .post__k{display:block}
.drift.is-cal .post{background:var(--paper); color:var(--black)}
.drift.is-cal .post b{font-family:var(--f-display); font-stretch:var(--display-width); font-style:normal; font-weight:800; letter-spacing:-.03em}
.drift.is-cal .post img{filter:none}
.drift.is-cal .post__foot i{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}

/* 03 an invoice: the wrong typeface and a logo jammed into the corner */
.sf--inv .mon__screen{background:#2A2627}
.inv{width:56%; aspect-ratio:1/1.2; padding:0 9% 9% 0; background:#fff; color:var(--black); box-shadow:0 14px 30px -12px rgba(0,0,0,.8); font-family:'Times New Roman',Times,serif}
.inv img{display:block; width:34%; height:auto}
.inv b{display:block; margin:12% 0 6% 9%; font-size:clamp(.6rem,1.3vw,.9rem); font-weight:700}
.inv i{display:block; height:5px; margin:0 0 6% 9%; background:#D6D3D2}
.inv i:nth-of-type(2){width:70%} .inv i:nth-of-type(3){width:82%} .inv i:nth-of-type(4){width:50%}
.inv u{display:block; margin:10% 0 0 9%; text-decoration:none; font-size:clamp(.55rem,1.1vw,.75rem); text-align:right}
.drift.is-cal .inv{padding:9%; font-family:var(--f-body)}
.drift.is-cal .inv img{width:46%}
.drift.is-cal .inv b{margin-left:0; font-family:var(--f-head); letter-spacing:.02em}
.drift.is-cal .inv i,.drift.is-cal .inv u{margin-left:0}

/* the scan: one pass down each screen as it's tuned */
.sf__scan{position:absolute; left:0; right:0; top:0; height:18%; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.14) 70%,rgba(255,255,255,.35)); border-bottom:1px solid rgba(255,255,255,.6)}
.drift.is-scanning .sf__scan{animation:sf-scan .9s var(--ease) both}
.drift__row li:nth-child(2) .sf__scan{animation-delay:.12s} .drift__row li:nth-child(3) .sf__scan{animation-delay:.24s}
@keyframes sf-scan{0%{opacity:1; transform:translateY(-100%)}90%{opacity:1}100%{opacity:0; transform:translateY(560%)}}
@media (prefers-reduced-motion:reduce){ .drift.is-scanning .sf__scan{animation:none} }

/* ---------- surfaces 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:.8125rem; 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; animation:crawl 46s 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:.9rem 1.4rem; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.2rem,2.2vw,1.7rem); letter-spacing:-.02em}
.crawl__track span::after{content:""; width:8px; height:8px; margin-left:2.4rem; background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
@keyframes crawl{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .crawl__track{animation:none; flex-wrap:wrap} .crawl__track[aria-hidden]{display:none} }
@media (max-width:640px){ .crawl{flex-direction:column} .crawl__bug{border-right:0; border-bottom:1px solid #2A2627} }

/* ---------- the rate card frame (from season.css) ---------- */
.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 .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__row{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name rate" "desc desc" "run run"; column-gap:var(--rc-gap); row-gap:.5rem; padding-inline:var(--rc-x)}
.rc__prog{display:contents}
.rc__prog h4{grid-area:name} .rc__prog p{grid-area:desc} .rc__rate{grid-area:rate} .rc__run{grid-area:run}
.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{max-width:60ch; font-size:.95rem; line-height:1.5; color:var(--on-black-2); text-wrap:pretty}
.rc__run{display:grid; grid-template-columns:7.5rem minmax(0,1fr); align-items:center; gap:.45rem 1rem; min-width:0; margin-top:.25rem}
.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)}
.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)}
.rc__note b{color:#fff; font-weight:600}

/* breaks: the add-ons as commercial breaks; the 1px gap draws the rules, whatever the column count */
.rc__breaks{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:1px; background:#1B1819; 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; background:#0A0909}
.rc__breaks li::before{content:""; position:absolute; left:0; top:0; width:2px; height:18px; background:var(--lcd); box-shadow:0 0 6px rgba(245,154,98,.5)}
.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){flex:1; 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}

/* ---------- the configurator: pick a package, the card beside it lights what it tunes ---------- */
.cfg{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:clamp(1.5rem,3vw,2.5rem); align-items:start}
.cfg__card{position:sticky; top:5.5rem; display:grid; gap:.9rem}
.cfg__read{list-style:none; margin:0; padding:0; border-top:1.5px solid var(--black)}
.cfg__read li{display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-bottom:1px solid var(--line-2); font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); transition:color .3s}
.cfg__read li b{margin-left:auto; text-align:right; font-family:var(--f-body); font-size:.875rem; font-weight:500; letter-spacing:0; text-transform:none; color:inherit}
.cfg__read li.is-on{color:var(--ink)}
.cfg__read li.is-on .tally{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.cfg__now{display:flex; align-items:center; justify-content:space-between; gap:.8rem}
.cfg__now b{font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:1.3rem; letter-spacing:-.02em; line-height:1.1}
.cfg__now .lcd{min-height:0; padding:.4rem .65rem; font-size:.95rem}
.cfg__go{justify-self:start}
.cfg__hint{font-size:.9rem; line-height:1.5; color:var(--ink-3)}
/* a package row is one big key: the name is the button, stretched over the row */
.rc__row--pick{position:relative; transition:background .2s}
.rc__row--pick:hover{background:#121011}
.rc__pick{all:unset; display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; color:inherit; font:inherit}
.rc__pick::after{content:""; position:absolute; inset:0; z-index:1}
.rc__pick:focus-visible{outline:2px solid #fff; outline-offset:4px}
.rc__row--pick .rc__prog h4{display:flex; align-items:center; gap:.6rem}
.rc__row--pick .rc__prog h4 .tally{flex:none}
.rc__row--pick.is-picked{background:#161314; box-shadow:inset 3px 0 0 var(--accent)}
.rc__row--pick.is-picked .tally{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
.rc__row--pick a{position:relative; z-index:2}
@media (max-width:980px){
  .cfg{grid-template-columns:minmax(0,1fr)}
  /* on a phone the card becomes a strip that sticks under the nav while you scroll the packages */
  .cfg__card{order:-1; top:var(--cfg-top,4.25rem); z-index:5; grid-template-columns:minmax(0,8.5rem) minmax(0,1fr); align-items:center; gap:.3rem .9rem;
    margin-inline:calc(-1*var(--pad-x)); padding:.55rem var(--pad-x); background:var(--paper-2); border-bottom:1px solid var(--line-2);
    transition:transform .3s ease, opacity .3s ease}
  /* once the packages have scrolled by, the strip slides away so the add-ons get the screen */
  .cfg__card.is-past{transform:translateY(-115%); opacity:0; pointer-events:none}
  .cfg__card .tc-mon{grid-row:1 / span 2}
  .cfg__now b{font-size:1rem}
  .cfg__now .lcd{padding:.3rem .5rem; font-size:.8rem}
  .cfg__read{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 .5rem; border-top-width:1px}
  .cfg__read li{padding:.22rem 0; gap:.35rem; font-size:.5625rem; letter-spacing:.06em; border-bottom:0}
  .cfg__read li .tally{width:6px; height:6px}
  .cfg__read li b,.cfg__go,.cfg__hint{display:none}
}
@media (max-width:820px){
  .rc__daypart p{margin-left:0; flex-basis:100%}
  .rc__run{grid-template-columns:minmax(0,1fr)}
}

/* ---------- the brand wall: every guide is a source on the multiviewer, one is on programme ---------- */
.bwall{padding:var(--sec-y) 0; background:var(--space); color:var(--on-black)}
.bwall .sec-sub{color:var(--on-black-2)}
.bwall ::selection{background:#fff; color:var(--black)}
.bwall :focus-visible{outline:2px solid #fff; outline-offset:3px}
.bwall__desk{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr); gap:clamp(1.25rem,2.4vw,2.25rem); align-items:start}
.bwall__l{min-width:0}
.bwall__r{min-width:0; display:flex; flex-direction:column; gap:clamp(1.25rem,2.2vw,1.75rem)}
/* programme: two stacked frames so a step inside a brand can mix; a take is a hard cut */
.bwall .bwall__pgm .mon__screen{outline:none}
.bwall .mon__screen > img.bwall__img{opacity:0; transition:opacity .5s var(--ease)}
.bwall .mon__screen > img.bwall__img.is-on{opacity:1}
.bwall .mon__screen > img.bwall__img.is-cut{transition:none}
.bwall__pg{color:var(--on-black-2); margin-right:.35rem}
.bwall__cap{min-height:1.5em; margin-top:.7rem; font-family:var(--f-mono); font-size:.75rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--on-black-2)}
.bwall__ctl{display:flex; align-items:flex-end; gap:1rem; margin-top:.8rem}
.bwall:not(.bwall--js) .bwall__ctl{display:none}
/* cam strip: the taken brand's frames as small preview buttons */
.bwall__cams{list-style:none; margin:0; padding:2px; flex:1; min-width:0; display:flex; gap:5px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#3A3536 transparent}
.bwall__cams li{flex:0 0 auto; width:clamp(64px,7.2vw,92px)}
.bwall__cam{display:block; width:100%; padding:2px; border:1px solid #000; border-radius:2px; background:var(--bezel); cursor:pointer; box-shadow:0 0 0 1px #000}
.bwall__cam img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; opacity:.55; transition:opacity .2s}
.bwall__cam:hover img{opacity:.85}
.bwall__cam[aria-current="true"]{box-shadow:0 0 0 1px var(--on-black)}
.bwall__cam[aria-current="true"] img{opacity:1}
.bwall__keys{display:flex; gap:5px; flex:none}
.bwall__key{display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .7rem; border:1px solid #000; border-radius:2px; cursor:pointer;
  background:linear-gradient(180deg,#2A2627,#1D1A1B); color:#E8E5E4; font:inherit; font-size:.8125rem; line-height:1.2; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 2px 0 #000}
.bwall__key:hover{background:linear-gradient(180deg,#322D2E,#221F20)}
.bwall__key:active{transform:translateY(1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.7)}
.bwall__key--run{min-width:5.2rem}
.bwall__key--run::before{content:""; width:7px; height:7px; flex:none; border-radius:1px; background:#3a1d12; box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.bwall__key--run.is-on::before{background:var(--accent); box-shadow:0 0 7px rgba(247,126,45,.85)}
/* the sources: a four-up multiviewer, two rows; the one on air keeps its tally lit */
.bwall__src{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.bwall__take{display:block; width:100%; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.bwall__take .mon{display:block; padding:3px}
.bwall__take .mon__screen{display:block}
.bwall__take .mon__screen > img{opacity:.62; transition:opacity .25s, transform .6s var(--ease)}
.bwall__take .umd{display:flex; margin-top:3px; padding:.26rem .38rem; gap:.35rem; font-size:.5625rem; letter-spacing:.06em}
.bwall__take .umd__l{overflow:hidden; text-overflow:clip}
.bwall__take .umd__tc{display:none}  /* four-up leaves no room for the number; the name matters more */
.bwall__take:hover .mon__screen > img,.bwall__take:focus-visible .mon__screen > img,.bwall__take[aria-pressed="true"] .mon__screen > img{opacity:1}
.bwall__take:hover .mon,.bwall__take:focus-visible .mon{box-shadow:0 0 0 1px var(--accent), inset 0 1px 0 rgba(255,255,255,.06)}
.bwall__take:focus-visible{outline:none}
.bwall__take:focus-visible .mon{outline:2px solid #fff; outline-offset:2px}
.bwall__take[aria-pressed="true"] .mon{box-shadow:0 0 0 1px var(--on-black)}
.bwall__vl{display:block; width:auto; height:.62rem; margin-top:1px}
/* the card for the brand on air: its own bars, then the words */
.bwall__card{border-top:1px solid #2A2627; padding-top:clamp(1rem,2vw,1.35rem)}
.bwall--js .bwall__card{border-top:0; padding-top:0}
.bwall__card[hidden]{display:none}
.bwall__card + .bwall__card{margin-top:2rem}
.bwall__bars{display:flex; height:26px; margin:0; border:1px solid #000; background:#000}
.bwall__bars i{flex:1; min-width:0}
.bwall__bars i + i{border-left:1px solid #000}
.bwall__bars i.bwall__tick{flex:0 0 9px}
.bwall__hex{display:flex; flex-wrap:wrap; gap:.15rem .9rem; margin-top:.45rem; font-family:var(--f-mono); font-size:.625rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--on-black-2)}
.bwall__name{margin-top:1.1rem; font-family:var(--f-display); font-stretch:var(--display-width); font-weight:800; font-size:clamp(1.3rem,2.1vw,1.7rem); letter-spacing:-.025em; line-height:1.1; color:var(--on-black)}
.bwall__vlname{display:block; width:auto; height:clamp(1.1rem,1.7vw,1.4rem)}
.bwall__tier{display:flex; flex-wrap:wrap; gap:.2rem 1rem; margin-top:.5rem; font-family:var(--f-mono); font-size:.6875rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--lcd)}
.bwall__tier span + span{color:var(--on-black-2)}
.bwall__d{margin-top:.7rem; font-size:1rem; line-height:1.55; color:var(--on-black-2); text-wrap:pretty}
.bwall__go{display:inline-block; margin-top:.7rem; font-size:.9rem; color:var(--on-black)}
.bwall__frames{display:none}
@media (max-width:1000px){
  .bwall__desk{display:flex; flex-direction:column; gap:1.1rem}
  .bwall__r{display:contents}
  .bwall__src{order:1}
  .bwall__l{order:2; width:100%}
  .bwall__cards{order:3; margin-top:.6rem}
}
@media (max-width:640px){
  .bwall__src{gap:4px}
  .bwall__take .mon{padding:2px}
  .bwall__take .umd{padding:.22rem .28rem; gap:.22rem; font-size:.5rem; letter-spacing:.03em}
  .bwall__cams{padding-bottom:7px}
  .bwall__ctl{flex-direction:column; align-items:stretch; gap:.6rem}
  .bwall__keys{justify-content:flex-end}
  .bwall__cams li{width:74px}
}
@media (prefers-reduced-motion:reduce){ .bwall .mon__screen > img.bwall__img,.bwall__take .mon__screen > img{transition:none} }

/* ---------- the kit list ---------- */
.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}
@container (max-width:560px){ .rd--kit .rd__list > li{grid-template-columns:2.4rem minmax(0,1fr)} .rd--kit .rd__note{grid-column:2} }

/* ---------- the pitch desk (from season.css) ---------- */
.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__sub{margin-top:1.4rem; max-width:36ch; font-size:1.05rem; line-height:1.55; color:var(--on-black-2)}
.pitch__side .sec-head{margin-bottom:1rem}
.pitch__side .sec-sub{margin-left:0}
.mod__lede{margin:-.4rem 0 1.2rem; font-size:1rem; color:var(--on-black)}
@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} }
.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__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}
.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}
.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)}

/* ---------- 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:24ch; 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__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 phone bar ---------- */
.wsbar{position:fixed; left:0; right:0; bottom:0; z-index:var(--z-mcta); display:flex; justify-content:center; 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}
@media (prefers-reduced-motion:reduce){ .wsbar,.cfg__card{transition:opacity .2s} }
.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; white-space:nowrap}
@media (max-width:760px){ .wsbar{justify-content:space-between} .wsbar__t{flex-direction:column; align-items:flex-start; gap:0; line-height:1.3; font-size:.9rem} .wsbar__t .tally{display:none} .wsbar .btn{padding-inline:.9rem} .wsbar__s{font-size:.8rem} }
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}