/* =====================================================================
   Deploy D6: D5's loud look, made readable. One stylesheet for every page.

   TYPE      Archivo Black  headlines.
             IBM Plex Sans  reading: paragraphs, nav, buttons, forms.
             IBM Plex Mono  labels and metadata, 12px minimum.
             Silkscreen     the broadcast things only: TV, remote, stickers.
             Anton          numbers (stats, views, dates in the ticker/guide).
             Permanent Marker  a human note, at most one or two per section.
   COLOUR    paper / ink / orange carry it. Sun = Academy. Lime, sky, pink for
             stickers, offer cards and category chips.
   SECTIONS  label → headline → one short paragraph, stacked (no floating
             side-paragraph). Channel numbers live on the TV and remote only.
   ===================================================================== */
@font-face{font-family:'Archivo Black';src:url(/assets/fonts/archivo-black-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Silkscreen';src:url(/assets/fonts/silkscreen-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Silkscreen';src:url(/assets/fonts/silkscreen-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url(/assets/fonts/ibm-plex-mono-600.woff2) format('woff2');font-weight:600;font-display:swap}

:root{
  --paper:#f3eedf;--card:#fbf6e8;--ink:#11100d;--ink-2:#37332d;--muted:#6b6458;--rule:#d6cfbd;
  --orange:#ff5a18;--sun:#ffd23f;--sky:#8fd3ff;--pink:#ff9ec7;--lime:#c9f25d;--osd:#7dff6b;
  --disp:'Archivo Black',Arial,sans-serif;--sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;--px:'Silkscreen',ui-monospace,monospace;
  --num:'Anton',Impact,sans-serif;--hand:'Permanent Marker',cursive;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-padding-top:76px}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.08;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,video{display:block;width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3,h4{font-family:var(--disp);font-weight:400;text-transform:uppercase;letter-spacing:-.045em;margin:0;line-height:.88}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-ink :focus-visible,.on-orange :focus-visible{outline-color:var(--paper)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hand{font-family:var(--hand);text-transform:none;letter-spacing:0}
.n{font-family:var(--num);letter-spacing:.01em;font-weight:400}

/* ---------- layout ---------- */
.wrap{max-width:1360px;margin:0 auto;padding:0 40px}
@media(min-width:1281px){.has-remote .wrap{padding-right:132px}}
.sec{padding:112px 0;position:relative;border-bottom:2px solid var(--ink)}
.on-ink{background:var(--ink);color:var(--paper)}

/* section head: stacked, never a floating side paragraph */
.head{margin-bottom:56px;max-width:980px}
.head h2{font-size:clamp(56px,8vw,128px);line-height:.84;letter-spacing:-.06em;margin:14px 0 0}
.head h2 em{font-style:normal;color:var(--orange)}
.head p{font-size:19px;line-height:1.55;max-width:34em;margin-top:22px;color:var(--ink-2)}
.on-ink .head p{color:#d8d1c0}
.head.row{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.label{font:600 14px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px}
.label:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--orange);flex:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 22px;font:700 15px/1 var(--sans);letter-spacing:.01em;border:2px solid var(--ink);background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s;cursor:pointer;white-space:nowrap}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.o{background:var(--orange);color:var(--ink)}.btn.c{background:var(--paper);color:var(--ink)}
.on-ink .btn{border-color:var(--paper);box-shadow:4px 4px 0 var(--paper)}
.on-ink .btn.c{background:transparent;color:var(--paper)}
.link{font:600 16px var(--sans);border-bottom:2px solid currentColor;padding-bottom:1px}
.link:hover{color:var(--orange)}
.on-orange .link:hover{color:var(--paper)}
.acts{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.tri{display:inline-block;width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}

/* ---------- broadcast bits ---------- */
.sticker{position:absolute;z-index:6;font:700 14px/1 var(--px);text-transform:uppercase;padding:9px 11px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);white-space:nowrap;background:var(--paper);color:var(--ink)}
.sticker .n{font-size:20px;margin-right:5px;vertical-align:-2px}
.stamp{display:inline-block;font:700 14px var(--px);text-transform:uppercase;color:var(--orange);border:3px solid currentColor;padding:7px 10px 6px;border-radius:4px;transform:rotate(-5deg)}
.doodle path{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);transition:stroke-dashoffset 1.1s ease}
.doodle.in path{stroke-dashoffset:0}

/* ---------- top nav ---------- */
nav.top{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:2px solid var(--ink)}
nav.top .wrap{display:flex;align-items:center;gap:20px;height:66px}
.logo{font-family:var(--disp);font-size:27px;letter-spacing:-.05em;line-height:1}.logo i{font-style:normal;color:var(--orange)}
.navlinks{display:flex;gap:2px;margin-left:12px}
.navlinks a{font:500 15px var(--sans);padding:8px 11px;border-radius:999px;border:2px solid transparent}
.navlinks a:hover,.navlinks a[aria-current]{border-color:var(--ink)}
.nav-end{margin-left:auto;display:flex;align-items:center;gap:14px}
.livebug{display:none;align-items:center;gap:8px;font:700 14px var(--px);border:2px solid var(--ink);padding:7px 11px;border-radius:999px;background:var(--orange)}
.livebug i{width:9px;height:9px;border-radius:50%;background:#ff2d1a;border:1.5px solid var(--ink);animation:blink 1.2s steps(2) infinite}
.is-live .livebug{display:inline-flex}
@keyframes blink{50%{opacity:.2}}
nav.top .btn{min-height:42px;padding:0 16px;font-size:14px;box-shadow:3px 3px 0 var(--ink)}
.menubtn{all:unset;display:none;cursor:pointer;font:600 15px var(--sans);border:2px solid var(--ink);padding:8px 14px;border-radius:999px}
.menu{display:none}

/* ---------- remote (desktop only) ---------- */
.remote{position:fixed;right:18px;top:50%;transform:translateY(-50%) rotate(2deg);z-index:80;width:78px;background:var(--ink);border-radius:38px 38px 30px 30px;padding:14px 10px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:6px 8px 0 rgba(17,16,13,.3),inset 0 0 0 2px #2b2823}
.remote .led{width:8px;height:8px;border-radius:50%;background:#3a1a14;margin-bottom:2px}.remote .led.on{background:#ff2d1a;box-shadow:0 0 8px #ff2d1a}
.remote button{all:unset;cursor:pointer;width:56px;height:40px;border-radius:12px;background:#2b2823;color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;font:700 14px var(--px);line-height:1;box-shadow:inset 0 -3px 0 #000}
.remote button small{font-size:7.5px;margin-top:4px;color:#c9c2b1}
.remote button:hover,.remote button.on{background:var(--orange);color:var(--ink)}.remote button:hover small,.remote button.on small{color:var(--ink)}
.remote button:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 #000}
.remote button:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.remote .snd{background:var(--sun);color:var(--ink);height:46px;border-radius:50%;width:46px;font-size:16px}
.remote .snd.on{background:var(--lime)}
.remote .brand{font:700 8px var(--px);color:#8a8273;margin-top:4px}
#static{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:0;width:100%;height:100%;image-rendering:pixelated}
#osd{position:fixed;top:82px;right:112px;z-index:151;font:700 28px var(--px);color:var(--osd);text-shadow:0 0 10px rgba(125,255,107,.9),2px 2px 0 #000;opacity:0;pointer-events:none;transition:opacity .2s}

/* ---------- hero ---------- */
.hero{background:var(--orange);position:relative;overflow:hidden;border-bottom:2px solid var(--ink)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);grid-template-areas:"h tv" "copy tv";grid-template-rows:auto 1fr;gap:0 28px;align-items:start;min-height:800px;padding-top:56px;padding-bottom:132px;position:relative}
.hero h1{grid-area:h}.hero .copy{grid-area:copy}.hero .tvzone{grid-area:tv;align-self:center}
.hero h1{font-size:clamp(56px,5.8vw,100px);line-height:.84;letter-spacing:-.06em;margin:0 0 24px}
.hero h1 .w{display:inline-block;background:var(--paper);padding:0 .06em;transform:rotate(-2deg)}
.hero .lede{font-size:19px;line-height:1.55;max-width:30em;margin:0 0 30px}
.stats{display:flex;gap:26px;margin:0 0 34px}
.stat{position:relative}
.stat .n{display:block;font-size:48px;line-height:1}
.stat .lbl{display:block;font:600 14px/1.35 var(--mono);margin-top:8px;max-width:10.5em}
.stat1 .doodle{position:absolute;left:-20px;top:-12px;width:150px;height:74px;pointer-events:none}
.tvzone{position:static;padding:72px 0 30px}
.tv{position:relative;z-index:3;background:var(--ink);border-radius:38px;padding:24px 24px 24px 128px;box-shadow:12px 12px 0 rgba(17,16,13,.35);transform:rotate(1.2deg);margin-right:30px}
.tv .ant{position:absolute;bottom:100%;width:4px;height:120px;background:var(--ink);border-radius:4px;transform-origin:bottom}
.tv .ant:after{content:"";position:absolute;top:-7px;left:-5px;width:14px;height:14px;border-radius:50%;background:var(--ink)}
.screen{position:relative;aspect-ratio:16/10;border-radius:28px/34px;overflow:hidden;background:#0b0b0a}
.screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.5));border-radius:inherit;z-index:3}
.screen.yt:after{display:none}
.screen canvas{position:absolute;inset:0;width:100%;height:100%;z-index:4;opacity:0;image-rendering:pixelated}
/* vertical stories sit in the middle; the sides carry the channel graphics */
.screen .v9{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);aspect-ratio:9/16;height:100%;overflow:hidden;background:#000;border-left:2px solid #000;border-right:2px solid #000}
.screen .v9 video,.screen .v9 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen .full{position:absolute;inset:0}
.screen .full img,.screen .full iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.gfx{position:absolute;z-index:2;top:0;bottom:0;width:calc(50% - 17.6%);display:flex;flex-direction:column;justify-content:center;padding:22px;color:#fff}
.gfx.l{left:0;background:linear-gradient(135deg,#1d1b17,#0b0b0a)}
.gfx.r{right:0;background:linear-gradient(225deg,#1d1b17,#0b0b0a);align-items:flex-end;text-align:right}
.gfx .chn{font:700 12px/1.3 var(--px);color:var(--osd);text-shadow:0 0 8px rgba(125,255,107,.8)}
.gfx .ttl{font:400 clamp(16px,1.5vw,24px)/1.02 var(--disp);text-transform:uppercase;letter-spacing:-.03em;margin-top:12px}
.gfx .big{font:400 clamp(28px,2.6vw,42px)/1 var(--num);color:var(--orange);margin-top:16px}.gfx .big:empty{display:none}
.gfx .wm{font:400 clamp(18px,1.8vw,28px)/1 var(--disp);letter-spacing:-.05em;color:#2a2722;transform:rotate(-90deg);white-space:nowrap}.gfx .wm i{font-style:normal;color:#5a2a14}
.gfx.r{align-items:center;justify-content:center}
.gfx .sm{font:700 11px/1.4 var(--px);color:#c9c2b1;margin-top:6px}
.screen.lf .gfx{display:none}
.tvplay{position:absolute;z-index:5;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--orange);border:3px solid var(--ink);display:none;place-items:center;cursor:pointer}
.tvplay:after{content:"";border-left:28px solid var(--ink);border-top:17px solid transparent;border-bottom:17px solid transparent;margin-left:8px}
.screen.lf .tvplay{display:grid}
.lflabel{position:absolute;z-index:5;left:20px;bottom:16px;font:400 20px/1 var(--disp);text-transform:uppercase;color:#fff;letter-spacing:-.02em;text-shadow:0 2px 12px rgba(0,0,0,.7);display:none}
.screen.lf .lflabel{display:block}
.panel{position:absolute;left:20px;top:24px;bottom:24px;width:88px;display:flex;flex-direction:column;align-items:center;gap:12px}
.chdisp{width:76px;background:#0d1a0b;border:2px solid #2b2823;border-radius:8px;text-align:center;font:700 24px var(--px);color:var(--osd);padding:8px 0;text-shadow:0 0 8px rgba(125,255,107,.8)}
.chbtn{all:unset;cursor:pointer;width:64px;height:44px;border-radius:12px;background:var(--orange);color:var(--ink);display:grid;place-items:center;font:700 14px var(--px);border:2px solid var(--paper)}
.chbtn:hover{background:var(--sun)}
.chbtn:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.grille{flex:1;width:64px;background:repeating-linear-gradient(0deg,var(--paper) 0 3px,transparent 3px 9px);opacity:.45;border-radius:6px}
.tvsnd{all:unset;cursor:pointer;font:700 14px var(--px);color:var(--ink);background:var(--sun);padding:7px 9px;border-radius:6px;text-align:center}
.tvsnd.on{background:var(--lime)}
.feet{display:flex;justify-content:space-between;padding:0 80px;transform:rotate(1.2deg);margin-right:30px}.feet i{width:30px;height:24px;background:var(--ink);border-radius:0 0 9px 9px}
.hostbox{position:absolute;z-index:6;right:36px;bottom:58px;height:min(360px,44%)}
.host{display:block;height:100%;width:auto;filter:drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(8px 10px 0 rgba(17,16,13,.35));transform:rotate(2deg);transition:transform .3s}
.host:hover{transform:rotate(0) translateY(-6px)}
.hostlabel{position:absolute;z-index:7;right:38%;top:-6px;font-size:24px;line-height:1;transform:rotate(-7deg);white-space:nowrap;background:var(--sun);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:8px 12px 7px}
.hostlabel small{display:block;font-size:14px;margin:3px 0 0 14px}
.hostarrow{display:none}
.ticker{position:absolute;z-index:8;left:0;right:0;bottom:0;background:var(--ink);color:#fff;overflow:hidden;border-top:2px solid var(--ink)}
.ticker div{display:flex;width:max-content;animation:tick 40s linear infinite}
.ticker span{font:400 30px var(--num);text-transform:uppercase;padding:14px 0;white-space:nowrap;letter-spacing:.01em}
.ticker em{font-style:normal;background:var(--orange);color:var(--ink);padding:0 8px;margin:0 4px}
.ticker b{color:var(--orange);margin:0 26px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- phones ---------- */
.phone{position:relative;width:230px;background:var(--ink);border-radius:38px;padding:9px;box-shadow:8px 10px 0 rgba(17,16,13,.25)}
.phone .vid{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:9/16;background:#222}
.phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone .island{position:absolute;z-index:2;top:16px;left:50%;width:70px;height:20px;margin-left:-35px;background:var(--ink);border-radius:20px}
.phone .mute{all:unset;cursor:pointer;position:absolute;z-index:3;right:14px;bottom:14px;font:700 14px var(--px);background:rgba(0,0,0,.6);color:#fff;padding:8px 10px;border-radius:999px}
.phone.loud .mute{background:var(--lime);color:var(--ink)}

/* ---------- stories wall ---------- */
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:58px 34px;padding:12px 6px 30px;position:relative}
.snap{position:relative;background:#fff;border:2px solid var(--ink);padding:10px 10px 18px;box-shadow:7px 8px 0 var(--ink);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.snap:nth-child(1){grid-column:1/3;grid-row:1/3;transform:rotate(-2deg)}
.snap:nth-child(2){transform:rotate(2.2deg)}.snap:nth-child(3){transform:rotate(-1.4deg)}
.snap:nth-child(4){transform:rotate(1.4deg)}.snap:nth-child(5){transform:rotate(-2.2deg)}
.snap:hover{transform:rotate(0) translateY(-4px);box-shadow:10px 12px 0 var(--ink);z-index:4}
.snap .shot{all:unset;cursor:pointer;display:block;width:100%;box-sizing:border-box;position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--ink)}
.snap:nth-child(1) .shot{flex:1;aspect-ratio:auto;min-height:400px}
.snap .shot img,.snap .shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.snap .shot video{opacity:0;transition:opacity .25s}.snap.playing .shot video{opacity:1}
.snap .nm{position:absolute;left:10px;bottom:12px;z-index:2;font:400 clamp(18px,1.5vw,22px)/1 var(--num);text-transform:uppercase;background:var(--orange);color:#fff;padding:.12em .3em}
.snap:nth-child(1) .nm{font-size:clamp(26px,2.4vw,36px);left:16px;bottom:18px}
.snap .pl{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--orange);border:2.5px solid var(--ink);display:grid;place-items:center;z-index:2;transition:transform .15s;box-shadow:3px 3px 0 var(--ink)}
.snap:nth-child(1) .pl{width:86px;height:86px;margin:-43px 0 0 -43px}
.snap .pl:after{content:"";border-left:18px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.snap .shot:hover .pl,.snap .shot:focus-visible .pl{transform:scale(1.1)}
.snap.playing .pl{opacity:0}
.snap h3{font-size:22px;line-height:.95;letter-spacing:-.035em;margin:16px 4px 0}
.snap:nth-child(1) h3{font-size:clamp(30px,3vw,46px)}
.snap h3 a:hover{color:var(--orange)}
.snap .views{right:-14px;top:-16px;transform:rotate(4deg)}
.snap .tag{top:-16px;left:-14px;transform:rotate(-4deg);background:var(--orange)}
.snap.soon .shot{cursor:default}
.snap.soon .stamp{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);background:var(--paper)}
.snap.soon img{filter:grayscale(.6) contrast(.95)}
.wallnote{position:absolute;font-size:26px;transform:rotate(-6deg);pointer-events:none;z-index:5}
.center{text-align:center;margin-top:34px}

/* ---------- long-form ---------- */
.lfbox{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:center}
.player{position:relative;aspect-ratio:16/9;background:#000;border:2px solid var(--paper);box-shadow:10px 10px 0 var(--orange)}
.player img,.player iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.player button{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center}
.player button span{width:104px;height:104px;border-radius:50%;background:var(--orange);border:3px solid var(--ink);display:grid;place-items:center;transition:transform .15s}
.player button:hover span{transform:scale(1.07)}
.player button span:after{content:"";border-left:30px solid var(--ink);border-top:18px solid transparent;border-bottom:18px solid transparent;margin-left:8px}
.player .sticker{top:-16px;left:-16px;background:var(--sun);transform:rotate(-5deg)}
.lfbox h3{font-size:clamp(30px,3vw,48px);line-height:.9;margin:0 0 18px}
.lfbox p{font-size:18px;line-height:1.6;margin:0 0 28px;color:#d8d1c0;max-width:30em}

/* ---------- on the mic ---------- */
.aired{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.cv{position:relative;border:2px solid var(--ink);border-radius:24px;padding:28px 24px 24px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:end;box-shadow:8px 8px 0 var(--ink)}
.cv .phone{width:140px;border-radius:28px;padding:7px;transform:rotate(-3deg)}.cv .phone .vid{border-radius:22px}.cv .phone .island{width:46px;height:14px;margin-left:-23px;top:13px}
.cv .phone .mute{right:10px;bottom:10px;font-size:14px;padding:7px 8px}
.cv .who{font-size:clamp(28px,2.5vw,40px);line-height:.85;letter-spacing:-.05em;overflow-wrap:anywhere}
.cv .what{font-size:15px;font-weight:600;line-height:1.35;margin-top:10px}
.cv .dt{font:600 14px var(--mono);margin-top:8px}
.cv .lnk{display:inline-block;margin-top:14px;font:700 15px var(--sans);border-bottom:2px solid currentColor}
.cv .tag{top:-14px;right:16px;transform:rotate(5deg)}
.cv .tag.new{background:var(--sun)}

/* ---------- what's on ---------- */
.listing{background:var(--card);color:var(--ink);border:2px solid var(--paper);box-shadow:10px 10px 0 var(--orange);transform:rotate(-.5deg)}
.lhead{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 26px;border-bottom:3px double var(--ink)}
.lhead strong{font:400 34px/1 var(--num);text-transform:uppercase}
.lhead span{font:600 14px var(--mono);color:var(--muted)}
.row{display:grid;grid-template-columns:200px 130px minmax(0,1fr) auto;gap:24px;align-items:center;padding:22px 26px;border-bottom:1px solid var(--rule)}
.row:last-child{border-bottom:0}
.when{font:400 26px/1 var(--num);text-transform:uppercase}.when small{display:block;font:600 14px var(--mono);margin-top:7px;color:var(--muted);text-transform:none}
.chip{font:600 14px var(--mono);padding:6px 10px;border:2px solid var(--ink);text-align:center;border-radius:999px}
.prog h4{font-size:26px;letter-spacing:-.03em;line-height:.95}
.prog p{font-size:16px;line-height:1.5;margin-top:8px;color:var(--ink-2)}
.row .go{font:700 15px var(--sans);padding:12px 16px;border:2px solid var(--ink);background:var(--paper);white-space:nowrap;box-shadow:3px 3px 0 var(--ink)}
.row .go.hot{background:var(--orange)}
.row .go:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.badge{display:inline-block;font:700 14px var(--px);background:var(--ink);color:var(--paper);padding:5px 7px;margin-left:10px;vertical-align:middle}
.badge.o{background:var(--orange);color:var(--ink)}
.pastlabel{font:600 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#c9c2b1;margin:80px 0 20px}
.tix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}
.tk{background:var(--paper);color:var(--ink);padding:16px 22px;border-radius:10px;
 -webkit-mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 9px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.tk:nth-child(odd){transform:rotate(-1.5deg)}.tk:nth-child(even){transform:rotate(1.5deg)}
.tk b{font:600 14px var(--mono);color:var(--orange)}
.tk strong{display:block;font:400 18px/1 var(--disp);text-transform:uppercase;letter-spacing:-.03em;margin:7px 0}
.tk span{font:500 14px var(--mono)}

/* ---------- academy ---------- */
.academy{background:var(--sun)}
.folder{position:relative;background:var(--paper);border:2px solid var(--ink);border-radius:0 26px 26px 26px;padding:56px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:64px;align-items:center;box-shadow:10px 10px 0 var(--ink);margin-top:40px}
.folder .tab{position:absolute;bottom:100%;left:-2px;background:var(--ink);color:var(--paper);font:600 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:12px 18px 10px;border-radius:14px 14px 0 0}
.folder .phone{transform:rotate(-4deg)}
.folder h2{font-size:clamp(56px,7vw,112px);line-height:.82;letter-spacing:-.06em;margin:0 0 22px}
.folder h2 em{font-style:normal;color:var(--orange)}
.folder p.lede{font-size:19px;line-height:1.55;max-width:30em}
.classes{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0 30px}
.cls{border:2px solid var(--ink);padding:16px 18px;min-width:250px;flex:1;max-width:360px;background:#fff;position:relative}
.cls b{font:600 14px var(--mono);color:var(--orange)}
.cls strong{display:block;font:400 21px/1 var(--disp);text-transform:uppercase;letter-spacing:-.025em;margin:8px 0 6px}
.cls span{font-size:15px;color:var(--ink-2)}
.cls.wait{background:var(--paper)}.cls.wait b{color:var(--muted)}
.cls .sticker{top:-14px;right:-12px;background:var(--pink);transform:rotate(6deg)}

/* ---------- community ---------- */
.pins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 34px;margin:0 0 70px;padding:0 10px;position:relative}
.pin{background:#fff;padding:10px 10px 46px;border:2px solid var(--ink);box-shadow:6px 7px 0 rgba(17,16,13,.3);margin:0;position:relative;transition:transform .2s}
.pin:nth-child(3n+1){transform:rotate(-2.2deg)}.pin:nth-child(3n+2){transform:rotate(1.6deg) translateY(18px)}.pin:nth-child(3n){transform:rotate(-1deg)}
.pin:hover{transform:rotate(0) scale(1.02);z-index:5}
.pin img{aspect-ratio:4/3;object-fit:cover}
.pin figcaption{position:absolute;left:12px;right:12px;bottom:10px;font-size:18px;text-align:center;line-height:1.1}
.pins .sticker{z-index:7}
.bignum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.bignum div{padding:28px 22px}.bignum div+div{border-left:2px solid var(--ink)}
.bignum b{display:block;font:400 clamp(56px,6vw,92px)/.9 var(--num)}
.bignum span{display:block;font:600 14px/1.4 var(--mono);margin-top:10px;max-width:22em}
.builds{background:var(--ink);color:var(--paper);overflow:hidden;margin-top:70px;transform:rotate(-1.2deg);border-block:2px solid var(--ink)}
.builds div{display:flex;width:max-content;animation:tick 70s linear infinite}
.builds span{font:500 16px var(--sans);padding:18px 0;white-space:nowrap}
.builds b{font:700 14px var(--px);color:var(--orange);margin:0 26px 0 34px}
.builds i{font-style:normal;color:var(--orange);margin:0 22px}
.community .acts{justify-content:center;margin-top:44px}

/* ---------- partner teaser ---------- */
.partner .head h2 em{color:var(--orange)}
.reach{display:flex;gap:44px;flex-wrap:wrap;margin:-16px 0 56px}
.reach div{display:flex;align-items:baseline;gap:12px}
.reach .n{font-size:56px;color:var(--orange);line-height:1}
.reach .lbl{font:600 14px/1.35 var(--mono);color:#d8d1c0;max-width:14em}
.offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.of{color:var(--ink);padding:30px 26px 26px;border:2px solid var(--paper);min-height:300px;display:flex;flex-direction:column;transition:transform .15s}
.of:nth-child(1){background:var(--orange);transform:rotate(-2deg)}.of:nth-child(2){background:var(--sun);transform:rotate(1.5deg)}.of:nth-child(3){background:var(--pink);transform:rotate(-1deg)}
.of:hover{transform:rotate(0) translateY(-6px)}
.of .price{font:400 30px/1 var(--num);text-transform:uppercase}
.of .price small{font:600 14px var(--mono);margin-left:4px;text-transform:none}
.of h3{font-size:36px;line-height:.88;letter-spacing:-.04em;margin:14px 0 14px}
.of p{font-size:16px;line-height:1.5}
.of .ar{margin-top:auto;padding-top:18px;font:700 16px var(--sans)}
.partner .acts{margin-top:56px}

/* ---------- subscribe ---------- */
.subband{background:var(--pink);border-bottom:2px solid var(--ink);padding:84px 0}
.subband .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.subband h2{font-size:clamp(46px,5.4vw,84px);line-height:.85;letter-spacing:-.05em}
.subband p{font-size:18px;line-height:1.55;margin-top:16px;max-width:28em}
.subform{display:flex;border:2px solid var(--ink);background:#fff;box-shadow:6px 6px 0 var(--ink)}
.subform input{flex:1;min-width:0;border:0;padding:18px;font:16px var(--sans);background:transparent}
.subform button{border:0;background:var(--ink);color:var(--paper);font:700 15px var(--sans);padding:0 24px;cursor:pointer}
.subform button[disabled]{opacity:.6}
.formnote{font-size:15px;margin-top:12px;min-height:1.5em}
.formnote.ok{font-weight:600}

/* ---------- footer ---------- */
footer.ft{background:var(--ink);color:var(--paper);overflow:hidden;padding-top:80px}
.ft .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.ft .about{font-size:16px;line-height:1.55;color:#d8d1c0;max-width:22em}
.ft .about .logo{display:block;margin-bottom:14px;color:var(--paper)}
.ft h4{font:600 14px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.ft ul{list-style:none;margin:0;padding:0}.ft li{margin:0 0 9px}
.ft li a{font-size:16px}.ft li a:hover{color:var(--orange)}
.mega{font-family:var(--disp);text-transform:uppercase;font-size:25vw;letter-spacing:-.07em;line-height:.74;margin:64px 0 -3vw -1.2vw;white-space:nowrap;color:var(--orange)}
.fine{display:flex;justify-content:space-between;gap:16px;padding:18px 0 28px;font:500 14px var(--mono);color:#b5ad9c;flex-wrap:wrap;border-top:1px solid #3a362f;position:relative;z-index:1;background:var(--ink)}

/* ---------- dialogs (join) ---------- */
dialog.dlg{border:2px solid var(--ink);padding:0;max-width:560px;width:calc(100% - 32px);background:var(--paper);color:var(--ink);box-shadow:12px 12px 0 var(--orange)}
dialog.dlg::backdrop{background:rgba(17,16,13,.7)}
.dlg .in{padding:34px}
.dlg h2{font-size:48px;line-height:.86;margin-bottom:12px}
.dlg p{font-size:16px;line-height:1.5;color:var(--ink-2)}
.dlg .x{all:unset;cursor:pointer;position:absolute;top:12px;right:14px;font:700 18px var(--px);padding:6px}
.fields{display:grid;gap:14px;margin-top:22px}
.field{display:flex;flex-direction:column;gap:6px;font:600 14px var(--mono)}
.field input,.field select,.field textarea{font:16px var(--sans);border:2px solid var(--ink);padding:12px 14px;background:#fff;color:var(--ink)}
.field textarea{min-height:100px;resize:vertical}
.field .opt{font-weight:400;color:var(--muted)}

/* ---------- stories feed ---------- */
#feed{position:fixed;inset:0;z-index:250;background:#000;display:none}
#feed.open{display:block}
#feed .scroller{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}
#feed .scroller::-webkit-scrollbar{display:none}
#feed .item{position:relative;height:100svh;scroll-snap-align:start;display:flex;justify-content:center;align-items:center}
#feed video{height:100%;width:auto;max-width:100%;aspect-ratio:9/16;object-fit:cover;background:#111}
#feed .meta{position:absolute;left:50%;bottom:26px;width:min(56.25vh,100%);transform:translateX(-50%);padding:0 18px;color:#fff;display:flex;justify-content:space-between;align-items:end;gap:12px}
#feed .meta strong{font:400 26px/.95 var(--disp);text-transform:uppercase;letter-spacing:-.03em;display:block}
#feed .meta span{font:600 14px var(--mono)}
#feed .meta .acts{flex-direction:column;gap:8px;align-items:flex-end}
#feed .meta a{font:700 14px var(--sans);background:var(--orange);color:var(--ink);padding:9px 12px;white-space:nowrap}
#feed .meta a.ghost{background:rgba(255,255,255,.15);color:#fff}
#feed .x{all:unset;cursor:pointer;position:fixed;top:16px;right:16px;z-index:3;width:46px;height:46px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;font:700 18px var(--px)}
#feed .snd2{all:unset;cursor:pointer;position:fixed;top:16px;left:16px;z-index:3;font:700 14px var(--sans);background:var(--sun);color:var(--ink);padding:12px 16px;border-radius:999px}
#feed .snd2.on{background:var(--lime)}
#feed .hint{position:fixed;top:28px;left:50%;transform:translateX(-50%);font:500 14px var(--mono);color:#fff;opacity:.75}

/* ---------- power-on splash ---------- */
#power{position:fixed;inset:0;z-index:300;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;text-align:center;padding:24px}
#power .pw{all:unset;cursor:pointer;width:150px;height:150px;border-radius:50%;background:var(--orange);border:4px solid var(--paper);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(255,90,24,.2),0 0 60px rgba(255,90,24,.5);animation:pulse 1.6s ease-in-out infinite}
#power .pw svg{width:64px;height:64px}
@keyframes pulse{50%{box-shadow:0 0 0 22px rgba(255,90,24,.08),0 0 90px rgba(255,90,24,.6)}}
#power h2{font-size:clamp(40px,6vw,84px);line-height:.85}
#power p{font:600 14px var(--mono);color:#b5ad9c}
#power .quiet{all:unset;cursor:pointer;font:500 15px var(--sans);color:#d8d1c0;border-bottom:1px solid}
#power.off{animation:crt .55s ease-in forwards}
@keyframes crt{0%{clip-path:inset(0 0 0 0)}60%{clip-path:inset(49.5% 0 49.5% 0);background:#fff}100%{clip-path:inset(50% 50% 50% 50%);background:#fff}}

/* ---------- inner pages ---------- */
.phero{background:var(--orange);border-bottom:2px solid var(--ink);position:relative;overflow:hidden}
.phero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:end;padding-top:80px}
.phero .txt{padding-bottom:84px}
.phero h1{font-size:clamp(58px,8vw,128px);line-height:.82;letter-spacing:-.06em;margin:18px 0 24px}
.phero h1 .w{display:inline-block;background:var(--paper);padding:0 .06em;transform:rotate(-2deg)}
.phero .lede{font-size:19px;line-height:1.55;max-width:32em}
.phero .cut{justify-self:center;align-self:end;width:100%;max-width:380px;filter:drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff) drop-shadow(10px 12px 0 rgba(17,16,13,.3));transform:rotate(2deg) translateY(8px)}
.crumbs{font:600 14px var(--mono);display:flex;gap:10px;margin-bottom:26px}.crumbs a{border-bottom:2px solid}.crumbs a:hover{color:var(--orange)}
.jump{background:var(--ink);color:var(--paper);position:sticky;top:66px;z-index:40}
.jump .wrap{display:flex;gap:6px;overflow-x:auto;padding-top:10px;padding-bottom:10px}
.jump a{font:600 14px var(--sans);padding:9px 14px;border:2px solid #3a362f;border-radius:999px;white-space:nowrap}
.jump a:hover{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.ticks{list-style:none;padding:0;margin:0;font-size:17px}
.ticks li{padding:12px 0 12px 32px;border-top:1px solid rgba(17,16,13,.2);position:relative}
.ticks li:last-child{border-bottom:1px solid rgba(17,16,13,.2)}
.ticks li:before{content:"✺";position:absolute;left:2px;color:var(--orange)}
.on-ink .ticks li{border-color:#3a362f}
.sun .ticks li:before{color:var(--ink)}

@media print{.remote,#static,#osd,#feed,nav.top,.dd,body:after,footer.ft,.noprint{display:none!important}}

/* ---------- tablet + small laptop ---------- */
.screen{container-type:inline-size}
@container (max-width:460px){ .gfx{padding:10px} .gfx .chn{font-size:9px} .gfx .ttl{font-size:12px;margin-top:6px} .gfx .big{font-size:22px} .gfx .sm{font-size:8px} }
@media(max-width:1180px){
 .navlinks{display:none}
 .menubtn{display:inline-block}
 nav.top .wrap{position:relative}
 .menu{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:2px solid var(--ink);padding:10px 40px 20px;flex-direction:column;z-index:61}
 .menu.open{display:flex}
 .menu a{font:600 22px var(--sans);padding:12px 0;border-bottom:1px solid var(--rule)}
 .menu .btn{margin-top:16px;justify-content:center;font-size:16px}
}
@media(min-width:981px) and (max-width:1280px){
 .remote,#osd{display:none}
 .hero .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);min-height:700px}
 .hero h1{font-size:clamp(54px,6.4vw,82px)}
 .hero .lede{font-size:17px}
 .stats{gap:18px}.stat .n{font-size:40px}.stat .lbl{font-size:14px}
 .tv{margin-right:0;padding:18px 18px 18px 92px;border-radius:30px}
 .feet{margin-right:20px;padding:0 50px}
 .panel{width:64px;left:14px;top:18px;bottom:18px;gap:9px}.chdisp{width:56px;font-size:18px}.chbtn{width:52px;height:36px;font-size:14px}.grille{width:48px}.tvsnd{font-size:14px;padding:6px}
 .hostbox{height:min(300px,40%);right:20px}
 .hostlabel{font-size:20px}
}

/* ---------- mobile ---------- */
@media(max-width:980px){
 .wrap{padding:0 16px}
 .menu{padding:10px 16px 20px}
 nav.top .nav-end .btn{display:none}
 .remote,#osd{display:none}
 .sec{padding:76px 0}
 .head{margin-bottom:40px}.head p{font-size:17px}
 .hero .wrap{grid-template-columns:1fr;grid-template-areas:"h" "tv" "copy";gap:0;min-height:0;padding-top:28px;padding-bottom:104px}
 .hero h1{margin:0}
 .hero .lede{font-size:17px}
 .stats{gap:18px}.stat .n{font-size:36px}.stat .lbl{font-size:14px}
 .stat1 .doodle{width:112px;height:58px;left:-14px;top:-10px}
 .tvzone{padding:84px 0 44px}
 .tv{padding:12px 12px 12px 56px;border-radius:22px;margin-right:34px}.tv .ant{height:64px}
 .feet{margin-right:34px;padding:0 40px}
 .panel{width:40px;left:8px;top:12px;bottom:12px;gap:7px}.chdisp{width:38px;font-size:13px;padding:5px 0}.chbtn{width:36px;height:32px;font-size:14px}.grille{width:28px}.tvsnd{font-size:14px;padding:5px 3px}
 .gfx{padding:8px}.gfx .chn{font-size:9px}.gfx .ttl{font-size:12px;margin-top:6px}.gfx .big{font-size:20px}.gfx .sm{font-size:8px}
 .tvplay{width:60px;height:60px;margin:-30px 0 0 -30px}.lflabel{font-size:14px;left:12px;bottom:10px}
 .hero .tvzone{position:relative}
 .hostbox{height:150px;right:-8px;bottom:22px}
 .hostlabel{font-size:15px;right:58%;top:-4px;padding:5px 8px}.hostlabel small{font-size:14px}.hostarrow{display:none}
 .ticker span{font-size:22px;padding:11px 0}
 .wall{grid-template-columns:1fr 1fr;gap:40px 16px;padding:10px 4px 20px}
 .snap:nth-child(1){grid-column:1/-1;grid-row:auto}
 .snap:nth-child(1) .shot{min-height:0;aspect-ratio:1/1}
 .snap{padding:7px 7px 14px;box-shadow:5px 6px 0 var(--ink)}
 .snap h3{font-size:17px;margin-top:12px}.snap .nm{font-size:15px;left:7px;bottom:8px}
 .snap .pl{width:48px;height:48px;margin:-24px 0 0 -24px}.snap .pl:after{border-left-width:14px;border-top-width:9px;border-bottom-width:9px}
 .snap .views{right:-8px}.snap .tag{left:-8px}
 .wallnote{display:none}
 .lfbox{grid-template-columns:1fr;gap:34px}.player button span{width:76px;height:76px}
 .aired{grid-template-columns:1fr}.cv{grid-template-columns:120px minmax(0,1fr)}.cv .phone{width:120px}.cv .who{font-size:34px}
 .row{grid-template-columns:1fr auto;gap:10px 14px;padding:18px}.row .chip{display:none}.row .prog{grid-column:1/-1;order:3}.row .go{order:2}
 .lhead{flex-direction:column;align-items:start;gap:4px}
 .tix{grid-template-columns:1fr 1fr}
 .folder{grid-template-columns:1fr;padding:30px 20px;gap:30px}.folder .phone{margin:0 auto;width:200px}
 .pins{grid-template-columns:1fr 1fr;gap:22px 14px;padding:0}.pin{padding:6px 6px 34px}.pin figcaption{font-size:14px;bottom:8px}
 .pin:nth-child(n){transform:rotate(-1.5deg)}.pin:nth-child(even){transform:rotate(1.5deg)}
 .bignum{grid-template-columns:1fr}.bignum div+div{border-left:0;border-top:2px solid var(--ink)}
 .reach{gap:20px}.reach .n{font-size:44px}
 .offers{grid-template-columns:1fr}.of{min-height:0}
 .subband{padding:64px 0}.subband .wrap{grid-template-columns:1fr;gap:28px}
 .ft .cols{grid-template-columns:1fr 1fr}.ft .about{grid-column:1/-1}
 .phero .wrap{grid-template-columns:1fr;padding-top:48px;gap:0}
 .phero .txt{padding-bottom:28px}
 .phero .cut{max-width:230px;justify-self:end;margin-right:8px}
 .jump{top:66px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* direction switcher (mockup chrome only) */
.dd{position:fixed;left:14px;bottom:14px;z-index:99;display:flex;gap:4px;align-items:center;background:var(--ink);color:var(--paper);padding:6px 6px 6px 12px;font:600 12px var(--mono);box-shadow:0 6px 24px rgba(0,0,0,.3)}
.dd a{padding:6px 9px;border:1px solid #444}.dd a.on{background:var(--orange);border-color:var(--orange);color:var(--ink)}
@media(max-width:980px){.dd{display:none}}

/* ---------- no small text: the TV and remote keep only what reads at 14px+ ---------- */
.remote button small,.remote .brand{display:none}
.remote button{height:44px;font-size:16px}
.gfx .chn{font-size:14px}.gfx .sm{font-size:14px}
@container (max-width:460px){ .gfx .chn,.gfx .sm{display:none} .gfx .ttl{font-size:14px} .gfx .big{font-size:24px} }
@media(max-width:980px){ .gfx .chn,.gfx .sm{display:none} .gfx .ttl{font-size:14px} .chdisp{font-size:14px} .chbtn{font-size:14px} .tvsnd{font-size:14px;padding:4px} }

/* ---------- drawn icons + browser surfaces (from D7) ---------- */
.ic{display:inline-block;width:1em;height:1em;vertical-align:-.14em;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;flex:none}
.ic-ext{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E")}
.ic-arr{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.ic-down{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E")}
.ic-x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
.ic-up{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5 21 19H3z'/%3E%3C/svg%3E");width:.8em;height:.8em;vertical-align:-.04em}
.ic-dn{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19 3 5h18z'/%3E%3C/svg%3E");width:.8em;height:.8em;vertical-align:-.04em}
.ic-snd-off{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z'/%3E%3Cpath d='m17 9 5 6M22 9l-5 6'/%3E%3C/svg%3E")}
.ic-snd-on{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E")}
.remote .snd .ic{width:20px;height:20px}
.btn .ic,.go .ic,.link .ic,.ar .ic{transition:transform .15s}
.btn:hover .ic-arr,.go:hover .ic-arr,.of:hover .ic-arr{transform:translateX(3px)}
.btn:hover .ic-ext,.go:hover .ic-ext,.link:hover .ic-ext{transform:translate(2px,-2px)}

/* browser surfaces carry the design too */
::selection{background:var(--orange);color:var(--ink)}
.on-orange ::selection,.hero ::selection{background:var(--ink);color:var(--paper)}
input,textarea{caret-color:var(--orange)}
html{scrollbar-color:var(--ink) var(--paper);accent-color:var(--orange)}
a{text-underline-offset:.18em}
.n,.when,.tk span,.cv .dt,.ticker,.facts,.price{font-variant-numeric:tabular-nums}


.tvsnd{display:flex;align-items:center;justify-content:center;gap:5px}
@media(max-width:980px){ .tvsnd .t{display:none} .tvsnd .ic{width:18px;height:18px} }
.phone .mute{display:flex;align-items:center;gap:6px}

/* ---------- contrast: orange used as text on light surfaces is the deeper orange ---------- */
:root{--orange-text:#c23b05}
.sec:not(.on-ink) .head h2 em,.folder h2 em,.cls b,.tk b,.story .who b,.offer .main .price,.phero:not(.on-orange) h1 em{color:var(--orange-text)}
.on-ink .head h2 em,.partner .head h2 em{color:var(--orange)}

/* ---------- FAQ ---------- */
.qa{display:grid;gap:0;border-top:2px solid var(--ink);max-width:980px}
.qa details{border-bottom:2px solid var(--ink);padding:0}
.qa summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font:400 clamp(22px,2.2vw,30px)/1.1 var(--disp);text-transform:uppercase;letter-spacing:-.03em}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";font:400 34px/1 var(--num);color:var(--orange-text);transition:transform .2s}
.qa details[open] summary:after{transform:rotate(45deg)}
.qa p{font-size:18px;line-height:1.6;max-width:42em;padding:0 4px 24px;color:var(--ink-2)}

/* the last tile on the stories wall: more on Instagram */
.snap.more{background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;text-align:center;min-height:260px;transform:rotate(1.5deg)}
.snap.more .morein{font:400 clamp(22px,2vw,30px)/1 var(--disp);text-transform:uppercase;letter-spacing:-.03em;padding:20px}
.snap.more:hover .morein{color:var(--orange)}

/* ---------- hero fixes: readable intro, host clear of the TV, name tag clear of the host ---------- */
.hero .lede{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:16px 20px;font-size:19px;font-weight:500;line-height:1.5;max-width:28em;transform:rotate(-.6deg)}
.tv,.feet{margin-right:250px}
.hostbox{right:100px;height:min(330px,40%)}
.hostlabel{right:46%;top:-64px}
@media(min-width:981px) and (max-width:1280px){
 .tv,.feet{margin-right:170px}
 .hostbox{right:24px;height:min(250px,34%)}
 .hostlabel{top:-56px}
}
@media(max-width:980px){
 .hero .lede{font-size:17px;padding:14px 16px}
 .tv,.feet{margin-right:110px}
 .hostbox{height:130px;right:-8px;bottom:22px}
 .hostlabel{right:52%;top:-44px}
}
@media(max-width:980px){
 .chbtn{font-size:0;width:40px;height:34px}
 #chup::before,#chdn::before{font:700 16px/1 var(--sans);color:var(--ink)}
 #chup::before{content:"\25B2"} #chdn::before{content:"\25BC"}
 .tvsnd{width:40px;height:34px;padding:0;border-radius:8px}
}

/* past nights: clear, newest first */
.past{margin:84px 0 26px;max-width:40em}
.past h3{font-size:clamp(30px,3vw,44px);color:var(--paper)}
.past p{font-size:17px;line-height:1.55;color:#d8d1c0;margin-top:12px}
.tk{display:flex;align-items:center;gap:18px;padding:18px 22px}
.tk .no{font:400 46px/1 var(--num);color:var(--orange-text);min-width:1.6em;text-align:center}
.tk strong{font-size:20px;margin:0 0 4px}
.tk em{display:block;font-style:normal;font:600 15px/1.3 var(--sans);margin-bottom:6px}
.tk span{font:500 14px var(--mono);color:var(--ink-2)}
/* stories wall: a little smaller on big screens */
@media(min-width:1181px){ .wall{max-width:1120px;margin:0 auto;gap:50px 30px} .snap:nth-child(1) .shot{min-height:340px} }

/* hero without the host cut-out: the TV takes the whole right column */
.tv,.feet{margin-right:20px}
@media(min-width:981px) and (max-width:1280px){ .tv,.feet{margin-right:0} }
@media(max-width:980px){ .tv,.feet{margin-right:0} }
.cv .who{font-size:clamp(26px,2.3vw,38px);overflow-wrap:normal;word-break:keep-all}
.cv .phone{width:132px}

/* page cut-outs have their sticker border baked in: depth only */
.phero .cut{filter:drop-shadow(10px 14px 0 rgba(17,16,13,.28))}

.privacy{font-size:14px;line-height:1.45;margin-top:10px;color:var(--ink-2);max-width:34em}
.on-ink .privacy{color:#d8d1c0}

/* signup: consent box + toast */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;margin-top:14px;cursor:pointer}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--orange);flex:none}
#dtoast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);z-index:400;background:var(--ink);color:var(--paper);border:2px solid var(--paper);box-shadow:5px 5px 0 var(--orange);padding:14px 18px;font:600 16px var(--sans);max-width:min(560px,calc(100% - 32px));transition:transform .3s}
#dtoast.on{transform:translate(-50%,0)}

/* ---------- mobile polish ---------- */
@media(max-width:980px){
 .cv .tag{right:10px}
 .link,.cv .lnk,.crumbs a{display:inline-block;padding:10px 0;margin:-6px 0}
 .acts{gap:12px 18px}
 .hostlabel{max-width:60vw}
 .subform input{font-size:16px}           /* 16px stops iOS zooming into the field */
 .field input,.field select,.field textarea{font-size:16px}
 .sec{scroll-margin-top:70px}
}

/* ---------- spacing fixes ---------- */
/* FAQ: heading on the left, questions on the right, no empty half */
@media(min-width:981px){
 .faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
 .faq .head{margin:0;position:sticky;top:100px}
 .faq .qa{max-width:none}
}
@media(max-width:980px){
 /* past nights: one clear ticket per row */
 .tix{grid-template-columns:1fr;gap:14px}
 .tk{padding:14px 18px}.tk .no{font-size:36px;min-width:1.4em}
 /* small story cards: only the views sticker, so nothing overlaps */
 .snap:not(:first-child) .tag{display:none}
 .snap .views{font-size:13px}
 /* tighter rhythm between sections */
 .sec{padding:64px 0}
 .head{margin-bottom:32px}
 .past{margin:56px 0 20px}
 .bignum div{padding:20px 16px}
}

/* on the mic cards: text centred beside the phone, no empty block above it */
.cv{align-items:center;gap:26px;padding:30px 26px}
.cv>div{display:flex;flex-direction:column;gap:8px}
.cv .what,.cv .dt{margin:0}
.cv .lnk{margin-top:6px;border-bottom:0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;padding:0;align-self:flex-start}
@media(max-width:980px){
 .cv{grid-template-columns:auto minmax(0,1fr);padding:26px 20px 22px}
 .cv .who{font-size:40px}
 .cv .what{font-size:17px}
 .cv .lnk{padding:8px 0;margin:0}
}
@media(max-width:600px){ .cv{gap:16px;padding:22px 16px 18px} .cv .phone{width:108px} .cv .who{font-size:clamp(24px,7.5vw,32px)} .cv .what{font-size:15px} }

/* the Deploy TLV logo: pixel wordmark, TLV in orange (same as the Deploy DB and the Academy) */
.logo{font:700 22px/1 var(--px);letter-spacing:-.06em;white-space:nowrap;text-transform:uppercase}
.logo b{color:var(--orange);font-weight:700}
.ft .about .logo{font-size:24px}
.mega{font-family:var(--px);font-weight:700;font-size:15.2vw;letter-spacing:-.06em;line-height:.82;color:var(--paper);margin:56px 0 -1.6vw -.6vw}
.mega b{color:var(--orange);font-weight:700}
@media(max-width:980px){ .logo{font-size:19px} }

/* a little less air between sections */
.sec{padding:84px 0}
.head{margin-bottom:40px}
#stories{padding-top:64px}
@media(max-width:980px){ .sec{padding:56px 0} #stories{padding-top:48px} }

/* TV channel 1: widescreen footage fills the screen */
.screen.wide .gfx{display:none}
.screen .full video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen.wide .lflabel{display:block}

/* the room: night footage + who's in the room */
.roomfilm{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:start;margin:20px 0 64px}
.nightclips{display:flex;gap:22px}
.nightclips figure{margin:0}
.nightclips .phone{width:190px}
.nightclips figure:nth-child(odd) .phone{transform:rotate(-2deg)}.nightclips figure:nth-child(even) .phone{transform:rotate(2deg);margin-top:28px}
.nightclips figcaption{font:600 14px/1.3 var(--sans);margin-top:14px;max-width:190px}
.whos h3{font-size:clamp(28px,2.6vw,40px)}
.whos p{font-size:17px;color:var(--ink-2);margin:8px 0 20px}
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.person{margin:0;display:flex;gap:12px;align-items:center;background:#fff;border:2px solid var(--ink);padding:10px;box-shadow:4px 4px 0 var(--ink)}
.person:nth-child(odd){transform:rotate(-.8deg)}.person:nth-child(even){transform:rotate(.8deg)}
.person img{width:56px;height:56px;object-fit:cover;border-radius:50%;border:2px solid var(--ink);flex:none}
.person b{display:block;font:700 15px/1.2 var(--sans)}
.person span{display:block;font-size:14px;line-height:1.3;color:var(--ink-2)}
.worksat{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin:40px 0 0;justify-content:center}
.worksat>span{font:600 14px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.worksat .logos{display:flex;gap:34px;align-items:center;flex-wrap:wrap;justify-content:center}
.worksat .logos img{height:26px;width:auto;filter:grayscale(1) contrast(1.4) brightness(.6);opacity:.9}

/* guide row "see what it looks like" + video player */
.rowvid{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;margin-top:10px;font:700 15px var(--sans);border-bottom:2px solid currentColor;padding-bottom:1px}
.rowvid:hover{color:var(--orange-text)}
.rowvid:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
dialog.clipdlg{border:2px solid var(--ink);padding:0;background:#000;box-shadow:10px 10px 0 var(--orange);max-height:88vh}
dialog.clipdlg::backdrop{background:rgba(17,16,13,.8)}
dialog.clipdlg video{display:block;max-height:86vh;width:auto;max-width:92vw}
dialog.clipdlg .x{all:unset;cursor:pointer;position:absolute;top:10px;right:10px;z-index:2;width:42px;height:42px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font:700 18px var(--px)}
@media(max-width:980px){
 .roomfilm{grid-template-columns:1fr;gap:36px}
 .nightclips{justify-content:center}
 .nightclips .phone{width:150px}.nightclips figcaption{max-width:150px}
 .people{grid-template-columns:1fr 1fr;gap:12px}
 .person{padding:8px;gap:10px}.person img{width:44px;height:44px}
 .worksat .logos{gap:22px}.worksat .logos img{height:20px}
}
@media(max-width:420px){ .people{grid-template-columns:1fr} }
/* footer wordmark: fit the width, centred, nothing clipped */
.mega{font-size:12.6vw;letter-spacing:-.04em;line-height:1;text-align:center;margin:56px 0 0;padding:0 0 2.4vw;width:100%;overflow:hidden}
/* small phones: grids never wider than the screen */
@media(max-width:980px){
 .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
 .folder,.roomfilm{grid-template-columns:minmax(0,1fr)}
 .folder>*,.roomfilm>*,.phero .wrap>*{min-width:0}
 .nightclips figure{flex:1 1 0;min-width:0;max-width:150px}.nightclips .phone{width:100%}.nightclips figcaption{max-width:none}
 main .enq,main .enquiry{grid-template-columns:minmax(0,1fr)}
 main .enq>*,main .enquiry>*{min-width:0}
 .enquiry input:not([type=radio]):not([type=checkbox]),.enquiry select,.enquiry textarea{width:100%;min-width:0;box-sizing:border-box}
}
@media(max-width:400px){
 .phero h1{font-size:15vw}
 .folder h2{font-size:14vw}
 .folder{padding:26px 16px}
 .snap .views{right:-4px}
 .direct a.big{font-size:22px;overflow-wrap:anywhere}
}
@media(max-width:420px){
 .head h2{font-size:min(56px,14.4vw)}
 .more .snap:nth-child(odd),.more .snap:nth-child(even){transform:none}
}
@media(max-width:400px){ body .sec .more .snap{transform:none;min-width:0} body .sec .more .snap .views{right:-2px} }

/* community: the two WhatsApp groups */
.wa{display:inline-block;width:16px;height:16px;border-radius:50%;background:#25d366;border:2px solid var(--ink);flex:none;position:relative}
.wa::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--paper);clip-path:polygon(0 0,100% 0,100% 100%,30% 100%,0 130%)}
.herojoin{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font:500 15px/1.35 var(--sans);background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:9px 16px 9px 12px;box-shadow:3px 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.herojoin b{font-weight:700;white-space:nowrap}
.herojoin:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.groups{margin-top:56px;text-align:center}
.groups h3{font:400 clamp(40px,5vw,64px)/.95 var(--num,var(--disp));text-transform:uppercase;margin:0}
.groups .gsub{font:500 17px/1.5 var(--sans);color:var(--ink-2);margin:12px auto 26px;max-width:34em}
.gcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:900px;margin:0 auto;text-align:left}
.gcard{display:flex;flex-direction:column;gap:12px;align-items:flex-start;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:24px 24px 22px;color:var(--ink);transition:transform .12s,box-shadow .12s}
.gcard.g1{background:var(--sun);transform:rotate(-.6deg)}
.gcard.g2{background:var(--lime);transform:rotate(.6deg)}
.gcard:hover{transform:translate(-3px,-3px) rotate(0);box-shadow:9px 9px 0 var(--ink)}
.gcard .gk{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--px);background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:5px 11px}
.gcard b{font:400 clamp(28px,3vw,38px)/1 var(--disp)}
.gcard .gw{font:500 16px/1.45 var(--sans);flex:1}
.gcard .btn{pointer-events:none;margin-top:4px}
.groups .gnews{font:500 15px var(--sans);color:var(--ink-2);margin:28px 0 0}
.groups .gnews .link{background:none;border-top:0;border-left:0;border-right:0;cursor:pointer;color:var(--ink);font-size:15px;padding:0}
@media (max-width:720px){
  .gcards{grid-template-columns:1fr;gap:18px}
  .gcard{padding:20px 18px}
  .herojoin{font-size:15px}.herojoin .pre{display:none}
}