/* TV Fan Club: The Living Room. Light room, dark only inside the screen. */
:root{
  --paper:#FFFFFF;--room:#FBF5EC;--room2:#F4EBDD;--ink:#132126;--ink2:#3B4A50;--muted:#55636A;
  --teal:#0F7E8C;--teal-d:#0A5E69;--teal-t:#E4F2F3;--coral:#E8443A;--coral-ink:#B8301F;--coral-t:#FDE9E6;
  --mustard:#F2B33D;--mustard-t:#FDF1D8;--line:#E6DCCD;--screen:#0B1518;--osd:#8CFFB4;
  --disp:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'VT323',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --wrap:1240px;--r:22px;--ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:16.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,canvas{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;line-height:1.08;margin:0;letter-spacing:-.015em;text-wrap:balance;font-variation-settings:"SOFT" 100,"opsz" 96}
p{margin:0 0 1em}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--coral-ink);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:99;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}

/* ---------- top bar and launcher ---------- */
.topbar{background:var(--teal-t);border-bottom:1px solid #CFE5E7;font-size:13px;position:relative;z-index:40}
.topbar .wrap{display:flex;align-items:center;gap:16px;min-height:42px;flex-wrap:wrap}
.topbar .pub{color:var(--ink2)}
.topbar .tl{margin-left:auto;display:flex;gap:16px}
.topbar .tl a{text-decoration:none;font-weight:600}
.topbar .tl a:hover{color:var(--teal-d);text-decoration:underline}
.launch{position:relative}
.launch>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:700;padding:5px 12px 5px 8px;border-radius:999px;background:#fff;border:1px solid #BFDCDF;color:var(--teal-d)}
.launch>summary::-webkit-details-marker{display:none}
.launch>summary svg{width:16px;height:16px}
.launch>summary:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.launch[open]>summary{background:var(--ink);color:#fff;border-color:var(--ink)}
.launch-panel{position:absolute;left:0;top:calc(100% + 10px);width:min(860px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(19,33,38,.18);padding:20px 22px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 22px;max-height:70vh;overflow:auto}
.launch-panel .gh{font:700 11px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);margin:0 0 8px}
.launch-panel ul{list-style:none;margin:0;padding:0}
.launch-panel li{margin:0 0 5px}
.launch-panel a{text-decoration:none;font-size:14px}
.launch-panel a:hover{color:var(--coral-ink);text-decoration:underline}
.launch-panel a[aria-current="page"]{font-weight:800;color:var(--coral-ink)}
.launch-panel a[aria-current="page"]::after{content:" \2022  you are here";font-weight:500;font-size:12px;color:var(--muted)}

/* ---------- masthead ---------- */
.mast{background:var(--paper);border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;align-items:center;gap:26px;padding-top:14px;padding-bottom:14px}
.brand{display:block;flex:none;line-height:0;border-radius:12px}
.brand img{width:118px;height:auto}
.mainnav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.mainnav a{text-decoration:none;font-weight:700;font-size:15px;padding:9px 14px;border-radius:999px;display:inline-flex;align-items:center;gap:8px}
.mainnav a .n{font-family:var(--mono);font-size:19px;line-height:1;color:var(--teal);font-weight:400}
.mainnav a:hover{background:var(--room)}
.mainnav a[aria-current="page"]{background:var(--ink);color:#fff}
.mainnav a[aria-current="page"] .n{color:var(--osd)}

/* ---------- living room hero ---------- */
.room{background:var(--room);position:relative;overflow:hidden;padding:46px 0 0}
.room::before{content:"";position:absolute;inset:0;opacity:.9;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%230F7E8C' stroke-opacity='.09' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M30 18v24M18 30h24M21.5 21.5l17 17M38.5 21.5l-17 17'/%3E%3Ccircle cx='100' cy='96' r='9'/%3E%3Cpath d='M86 60c10-8 22-8 32 0'/%3E%3C/g%3E%3Cg fill='%23E8443A' fill-opacity='.08'%3E%3Ccircle cx='106' cy='26' r='4'/%3E%3Ccircle cx='34' cy='108' r='5'/%3E%3C/g%3E%3C/svg%3E")}
.room .wrap{position:relative}
.kicker{font-family:var(--mono);font-size:22px;line-height:1;color:var(--teal-d);letter-spacing:.04em;display:inline-flex;align-items:center;gap:10px}
.kicker .dot{width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(232,68,58,.18)}
.room h1{font-size:clamp(2.6rem,1.2rem + 5.4vw,6.2rem);line-height:.95;margin:14px 0 14px;max-width:15ch;font-weight:900}
.room h1 em{font-style:italic;color:var(--coral-ink);font-weight:800}
.room .lede{font-size:clamp(1.05rem,.9rem + .5vw,1.3rem);color:var(--ink2);max-width:52ch;margin:0 0 30px}
.stage{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:34px;align-items:start}

/* the set */
.set{position:relative;padding-top:70px}
.antenna{position:absolute;top:0;left:50%;width:220px;height:84px;transform:translateX(-50%);pointer-events:none}
.antenna i{position:absolute;bottom:10px;left:50%;width:5px;height:96px;background:var(--ink);border-radius:4px;transform-origin:bottom center}
.antenna i:nth-child(1){transform:translateX(-50%) rotate(-32deg)}
.antenna i:nth-child(2){transform:translateX(-50%) rotate(26deg);height:84px}
.antenna i::after{content:"";position:absolute;top:-7px;left:50%;width:13px;height:13px;border-radius:50%;background:var(--coral);transform:translateX(-50%)}
.antenna b{position:absolute;bottom:0;left:50%;width:64px;height:22px;border-radius:30px 30px 6px 6px;background:var(--ink);transform:translateX(-50%)}
.tv{position:relative;background:linear-gradient(160deg,#16909F 0%,var(--teal) 40%,var(--teal-d) 100%);border-radius:38px;padding:22px;display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:20px;box-shadow:0 2px 0 rgba(255,255,255,.35) inset,0 -10px 0 rgba(0,0,0,.12) inset,0 30px 60px -20px rgba(10,94,105,.55)}
.screen{position:relative;aspect-ratio:4/3;border-radius:34px/30px;overflow:hidden;background:var(--screen);box-shadow:0 0 0 7px #0C3036,0 0 0 9px #2AA3B1,inset 0 0 80px rgba(0,0,0,.6);isolation:isolate}
.screen .bg{position:absolute;inset:0;z-index:0}
.screen .bg img,.screen .bg video{width:100%;height:100%;object-fit:cover}
.screen .bg video{position:absolute;inset:0;opacity:0;transition:opacity .6s}
.screen .bg.playing video{opacity:1}
.screen .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,21,24,.15) 0%,rgba(11,21,24,.35) 45%,rgba(11,21,24,.9) 100%)}
.fx-teal img,.fx-teal video{filter:grayscale(1) contrast(1.1) brightness(.9)}
.fx-teal::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,#0F7E8C,#132126);mix-blend-mode:color;opacity:.85}
.fx-warm img,.fx-warm video{filter:sepia(.35) saturate(1.2) brightness(.9)}
.fx-mono img,.fx-mono video{filter:grayscale(1) contrast(1.25) brightness(.85)}
.fx-coral::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,#E8443A,#132126 70%);mix-blend-mode:color;opacity:.7}
.fx-coral img,.fx-coral video{filter:grayscale(1) contrast(1.05)}
.scan{position:absolute;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.vig{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(120% 95% at 50% 45%,transparent 55%,rgba(0,0,0,.65) 100%)}
.glare{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 32%)}
.static{position:absolute;inset:0;z-index:5;width:100%;height:100%;opacity:0;image-rendering:pixelated;pointer-events:none}
.screen.tuning .static{opacity:1}
.screen.tuning .prog{animation:vroll .42s steps(6) 1}
@keyframes vroll{0%{transform:translateY(-18%);filter:blur(2px)}100%{transform:none;filter:none}}
.prog{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:30px 34px 30px;color:#fff}
.prog .ident{font-family:var(--mono);font-size:22px;line-height:1;color:var(--osd);letter-spacing:.06em;text-shadow:0 0 8px rgba(140,255,180,.55)}
.prog h2{font-size:clamp(1.7rem,1rem + 2.4vw,3.1rem);color:#fff;margin:8px 0 10px;max-width:16ch}
.prog p{margin:0 0 14px;color:#DCE8EA;max-width:46ch;font-size:15.5px;line-height:1.5}
.prog .picks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.prog .picks a{display:inline-flex;gap:10px;align-items:baseline;text-decoration:none;color:#fff;font-weight:600;font-size:15px}
.prog .picks a span{font-family:var(--mono);color:var(--osd);font-size:18px;font-weight:400}
.prog .picks a:hover b{text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:3px}
.osd{position:absolute;z-index:6;top:22px;right:28px;font-family:var(--mono);font-size:38px;line-height:1;color:var(--osd);text-shadow:0 0 10px rgba(140,255,180,.7),2px 0 0 rgba(232,68,58,.6);opacity:0;transition:opacity .3s}
.osd.show{opacity:1}
.tv.off .prog,.tv.off .bg,.tv.off .osd{visibility:hidden}
.tv.off .screen::after{content:"Press power or pick a channel";position:absolute;inset:0;display:grid;place-items:center;color:#7FA1A6;font-family:var(--mono);font-size:22px;z-index:6}
.screen.powering .prog,.screen.powering .bg{animation:crt .5s var(--ease) 1}
@keyframes crt{0%{transform:scale(1,.004);filter:brightness(4)}60%{transform:scale(1,1.02)}100%{transform:none}}

/* controls on the cabinet */
.panel{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0}
.dial{position:relative;width:104px;height:104px}
.dial .tick{position:absolute;left:50%;top:50%;width:18px;height:14px;margin:-7px 0 0 -9px;font-family:var(--mono);font-size:14px;line-height:14px;text-align:center;color:#D6F1F3;transform:rotate(calc(var(--i) * 30deg - 120deg)) translateY(-47px) rotate(calc(120deg - var(--i) * 30deg))}
.knob{position:absolute;inset:16px;border-radius:50%;border:0;padding:0;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 34% 28%,#FFFFFF 0%,#EFE8DC 38%,#C9BEAE 100%);
  box-shadow:0 6px 0 #0A4B53,0 10px 18px rgba(0,0,0,.35),inset 0 -4px 8px rgba(0,0,0,.18);transform:rotate(var(--rot,-120deg));transition:transform .45s cubic-bezier(.3,1.6,.45,1)}
.knob::before{content:"";position:absolute;inset:9px;border-radius:50%;background:repeating-conic-gradient(rgba(0,0,0,.06) 0 6deg,transparent 6deg 12deg)}
.knob::after{content:"";position:absolute;left:50%;top:6px;width:6px;height:22px;margin-left:-3px;border-radius:3px;background:var(--coral)}
.knob:active{cursor:grabbing}
.panel .lbl{font:700 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#D6F1F3}
.rock{display:flex;gap:8px}
.btn-tv{width:44px;height:44px;border-radius:14px;border:0;cursor:pointer;background:#F6EFE3;color:var(--ink);display:grid;place-items:center;box-shadow:0 4px 0 #0A4B53}
.btn-tv:hover{background:#fff}
.btn-tv:active{transform:translateY(3px);box-shadow:0 1px 0 #0A4B53}
.btn-tv svg{width:20px;height:20px}
.btn-tv.pwr{background:var(--coral);color:#fff;border-radius:50%}
.btn-tv.pwr[aria-pressed="false"]{background:#5E2620}
.grille{width:88px;height:96px;border-radius:14px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 4px,transparent 4px 9px)}
.legs{display:flex;justify-content:space-between;padding:0 18%;height:34px}
.legs i{width:16px;height:34px;background:var(--ink);border-radius:0 0 8px 8px;transform:skewX(-12deg)}
.legs i:last-child{transform:skewX(12deg)}
.sideboard{height:26px;border-radius:12px 12px 0 0;background:linear-gradient(180deg,#C98B4A,#A86D34);box-shadow:inset 0 3px 0 rgba(255,255,255,.25)}

/* the guide */
.guide{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 18px 40px -26px rgba(19,33,38,.35);overflow:hidden;margin-top:70px}
.guide header{padding:16px 20px 12px;border-bottom:2px solid var(--ink);display:flex;align-items:baseline;justify-content:space-between;gap:10px;background:var(--mustard-t)}
.guide header h2{font-size:24px}
.guide header span{font-family:var(--mono);font-size:19px;color:var(--ink2)}
.guide ol{list-style:none;margin:0;padding:6px}
.guide li+li{border-top:1px dashed var(--line)}
.guide button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:52px 1fr;gap:4px 12px;align-items:center;width:100%;padding:10px 12px;border-radius:12px}
.guide button .n{grid-row:span 2;font-family:var(--mono);font-size:32px;line-height:1;color:var(--teal)}
.guide button b{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.2}
.guide button small{font-size:13px;color:var(--muted);line-height:1.35}
.guide button:hover{background:var(--room)}
.guide button:focus-visible{outline:3px solid var(--coral-ink);outline-offset:-3px}
.guide button[aria-current="true"]{background:var(--ink);color:#fff}
.guide button[aria-current="true"] .n{color:var(--osd)}
.guide button[aria-current="true"] small{color:#C8D6D9}
.hint{font-size:13px;color:var(--muted);margin:12px 4px 0}
.hint kbd{font-family:var(--mono);font-size:16px;background:#fff;border:1px solid var(--line);border-bottom-width:3px;border-radius:6px;padding:0 6px}

/* ---------- section scaffolding ---------- */
.sec{padding:84px 0}
.sec-h{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.sec-h h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem)}
.sec-h p{margin:8px 0 0;color:var(--ink2);max-width:56ch}
.eyebrow{font-family:var(--mono);font-size:20px;line-height:1;color:var(--coral-ink);display:block;margin-bottom:10px}
.link-arrow{font-weight:700;color:var(--teal-d);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px;white-space:nowrap}
.link-arrow:hover{color:var(--coral-ink)}

/* tape shelf */
.shelf{background:linear-gradient(180deg,var(--room) 0,var(--paper) 140px)}
.tapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 22px;position:relative}
.tapes::after{content:"";grid-column:1/-1;height:16px;border-radius:8px;background:linear-gradient(180deg,#C98B4A,#9E6530);margin-top:-6px}
.tape{position:relative;display:flex;flex-direction:column;gap:12px;text-decoration:none;background:#2A3236;border-radius:16px;padding:14px 14px 16px;box-shadow:0 10px 0 -4px #1A2023,0 18px 30px -18px rgba(0,0,0,.5);transition:transform .35s var(--ease)}
.tape:hover,.tape:focus-visible{transform:translateY(-10px) rotate(-1deg)}
.tape .win{display:flex;justify-content:center;gap:42px;align-items:center;height:58px;border-radius:30px;background:#11181B;margin:0 18%}
.tape .reel{width:38px;height:38px;border-radius:50%;background:radial-gradient(circle,#11181B 0 5px,#E9E2D6 6px 9px,transparent 10px),repeating-conic-gradient(#E9E2D6 0 18deg,#53606A 18deg 60deg);transition:transform 1.2s linear}
.tape:hover .reel{transform:rotate(-360deg)}
.tape .lab{background:#fff;border-radius:10px;padding:12px 14px 12px;position:relative;overflow:hidden;min-height:132px;display:flex;flex-direction:column;
  background-image:repeating-linear-gradient(180deg,transparent 0 25px,#EDE4D6 25px 26px)}
.tape .lab::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--lab,var(--teal))}
.tape small{font-family:var(--mono);font-size:17px;line-height:1.1;color:var(--teal-d);margin-top:4px}
.tape b{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.2;color:var(--ink);margin:4px 0 8px}
.tape em{font-style:normal;font-size:13px;color:var(--muted);margin-top:auto}
.tape.out{animation:tapeout .28s var(--ease) both}
.tape.in{animation:tapein .5s var(--ease) both;animation-delay:calc(var(--k) * 55ms)}
@keyframes tapeout{to{opacity:0;transform:translateY(24px)}}
@keyframes tapein{from{opacity:0;transform:translateY(-26px) rotate(1.5deg)}to{opacity:1;transform:none}}

/* binge planner */
.binge{background:var(--paper)}
.planner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:start}
.pform{background:var(--room);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.field{margin:0 0 22px}
.field>label,.field>.fl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700;margin-bottom:8px}
.field output,.field .val{font-family:var(--mono);font-size:24px;line-height:1;color:var(--teal-d);font-weight:400}
.field .help{font-size:13.5px;color:var(--muted);margin:6px 0 0}
.step{display:flex;align-items:center;gap:8px}
.step input{width:96px;text-align:center;font-family:var(--mono);font-size:28px;padding:4px 6px;border:2px solid var(--ink);border-radius:12px;background:#fff}
.step button{width:44px;height:44px;border-radius:12px;border:2px solid var(--ink);background:#fff;cursor:pointer;display:grid;place-items:center}
.step button:hover{background:var(--ink);color:#fff}
.step button svg{width:18px;height:18px}
input[type=range]{width:100%;accent-color:var(--teal);height:28px}
.days{display:flex;gap:6px;flex-wrap:wrap}
.days button{min-width:52px;height:44px;border-radius:12px;border:2px solid var(--ink);background:#fff;font-weight:700;cursor:pointer}
.days button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal-d);color:#fff}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.row2 input[type=date],.row2 input[type=time]{width:100%;padding:9px 10px;border:2px solid var(--ink);border-radius:12px;background:#fff;min-height:44px}
.field>label.check,.check{display:flex;justify-content:flex-start;gap:10px;align-items:flex-start;font-weight:600}
.check input{width:22px;height:22px;accent-color:var(--coral-ink);margin-top:2px;flex:none}
.pout{background:var(--screen);color:#E5EEF0;border-radius:var(--r);padding:26px;position:relative;overflow:hidden;box-shadow:0 0 0 8px #E7DFD2}
.pout::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.pout h3{font-size:22px;color:#fff;margin-bottom:16px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}
.stat{border:1px solid #24383D;border-radius:14px;padding:12px}
.stat b{display:block;font-family:var(--mono);font-weight:400;font-size:40px;line-height:1;color:var(--osd)}
.stat span{font-size:12.5px;color:#A9BCC0;letter-spacing:.04em}
.finish{font-size:17px;margin:0 0 16px}
.finish strong{color:#fff}
.cal{display:grid;grid-template-columns:44px repeat(7,minmax(0,1fr));gap:4px;font-size:12px;margin-bottom:18px}
.cal .h{color:#A9BCC0;text-align:center;font-weight:700}
.cal .wk{color:#A9BCC0;font-family:var(--mono);font-size:16px;align-self:center}
.cal .c{height:30px;border-radius:7px;background:#142428;display:grid;place-items:center;font-family:var(--mono);font-size:18px;color:#5D7378}
.cal .c.on{background:var(--teal);color:#fff}
.cal .c.last{background:var(--coral);color:#fff}
.more{font-size:13px;color:#A9BCC0;margin:-8px 0 16px}
.tips{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.tips li{padding-left:22px;position:relative;font-size:14.5px;line-height:1.5;color:#D3DFE1}
.tips li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--mustard)}
.pacts{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;border:2px solid currentColor;background:transparent;font-weight:700;cursor:pointer;text-decoration:none}
.pill.solid{background:var(--coral);border-color:var(--coral);color:#fff}
.pout .pill{color:#fff}
.pout .pill.solid{color:#fff}
.said{font-size:13px;color:var(--osd);min-height:1.2em;margin:10px 0 0;position:relative;z-index:1}
.readalong{margin-top:18px;border-top:1px solid #24383D;padding-top:14px;position:relative;z-index:1}
.readalong h4{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#A9BCC0;margin-bottom:10px}
.readalong a{color:#fff;font-weight:600}
.readalong a:hover{color:var(--osd)}
.readalong ul{margin:0;padding-left:18px}
.media-pair{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;margin-top:28px}
.mcard{position:relative;border-radius:var(--r);overflow:hidden;background:var(--screen);min-height:300px;margin:0}
.mcard img,.mcard video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.mcard figcaption{position:absolute;left:14px;bottom:14px;right:14px;z-index:3;background:rgba(255,255,255,.94);color:var(--ink);border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.45}
.mcard figcaption b{display:block;font-family:var(--disp);font-size:18px}
.scrub video{opacity:0;transition:opacity .4s}
.scrub.ready video{opacity:1}
.scrub::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(135deg,#0F7E8C,#E8443A);mix-blend-mode:color;opacity:.55;pointer-events:none}
.scrub .bar{position:absolute;left:0;top:0;height:5px;z-index:3;background:var(--coral);width:calc(var(--p,0) * 100%)}
.kb img{animation:kb 22s ease-in-out infinite alternate;filter:grayscale(1) contrast(1.05)}
.kb::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(160deg,#E8443A 0%,#F2B33D 55%,#0F7E8C 100%);mix-blend-mode:color;opacity:.75;pointer-events:none}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.14) translate(-3%,-2%)}}

/* how the club writes */
.writes{background:var(--room)}
.wgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;align-items:stretch}
.wtext{display:flex;flex-direction:column;justify-content:center}
.wtext h2{font-size:clamp(2rem,1.2rem + 2.4vw,3.2rem);margin-bottom:16px}
.wtext p{color:var(--ink2)}
.wcard{position:relative;border-radius:var(--r);overflow:hidden;background:var(--screen);min-height:420px;display:block;text-decoration:none;margin:0}
.wcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wcard .cap{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;background:#fff;border-radius:14px;padding:12px 14px}
.wcard .cap small{font-family:var(--mono);font-size:18px;color:var(--teal-d);display:block;line-height:1}
.wcard .cap b{font-family:var(--disp);font-size:20px;display:block;margin-top:4px;color:var(--ink)}
.wcard:hover .cap b{color:var(--coral-ink)}
.colourise img{filter:grayscale(1) contrast(1.2);transition:filter 1.8s var(--ease)}
.colourise.in img{filter:none}
.colourise .bars{position:absolute;top:14px;right:14px;z-index:3;display:flex;gap:2px;height:22px;opacity:0;transition:opacity .8s 1.2s}
.colourise.in .bars{opacity:1}
.colourise .bars i{width:8px;border-radius:2px}
.vhold img{clip-path:inset(0 0 100% 0);transition:clip-path .9s steps(9)}
.vhold.in img{clip-path:inset(0 0 0 0)}
.vhold::after{content:"";position:absolute;left:0;right:0;height:18%;top:-20%;z-index:2;background:linear-gradient(180deg,transparent,rgba(140,255,180,.25),transparent);pointer-events:none}
.vhold.in::after{animation:hold .9s steps(9) 1 forwards}
@keyframes hold{from{top:-20%}to{top:105%}}

/* the club band */
.club{padding:84px 0 96px}
.lamp{position:relative;border-radius:30px;overflow:hidden;min-height:520px;background:var(--screen);--x:72%;--y:40%;margin:0}
.lamp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.1)}
.lamp::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),rgba(255,214,150,.28) 0,rgba(255,214,150,0) 160px,rgba(11,21,24,.62) 420px)}
.lamp .card{position:relative;z-index:2;max-width:520px;margin:40px;background:#fff;border-radius:22px;padding:30px 30px 26px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.lamp .card h2{font-size:clamp(2rem,1.3rem + 2vw,3rem);margin-bottom:14px}
.lamp .card p{color:var(--ink2)}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pill.ink{background:var(--ink);border-color:var(--ink);color:#fff}
.pill.ghost{color:var(--ink)}
.pill.ghost:hover{background:var(--room)}
.pill.ink:hover{background:var(--teal-d);border-color:var(--teal-d)}

/* ---------- inner pages ---------- */
.pagehead{background:var(--room);border-bottom:1px solid var(--line);padding:54px 0 40px;position:relative;overflow:hidden}
.pagehead::after{content:"";position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:44px;border:18px solid rgba(15,126,140,.09);transform:rotate(8deg)}
.pagehead h1{font-size:clamp(2.2rem,1.3rem + 3.4vw,4.2rem);max-width:20ch;position:relative}
.pagehead .lede{color:var(--ink2);font-size:1.15rem;max-width:60ch;margin:14px 0 0;position:relative}
.crumbs{font-size:14px;margin-bottom:16px;color:var(--muted);position:relative}
.crumbs a{color:var(--teal-d);font-weight:600}
.prose{max-width:720px;margin:0 auto;padding:46px 28px 30px}
.prose h3{font-size:1.5rem;margin:1.6em 0 .5em}
.prose a{color:var(--teal-d);font-weight:600}
.prose a:hover{color:var(--coral-ink)}
.listing{max-width:720px;margin:0 auto 70px;padding:0 28px}
.card-note{background:var(--teal-t);border-radius:16px;padding:18px 20px;font-size:15px}

/* library */
.libtools{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(6px);border-bottom:1px solid var(--line)}
.libtools .wrap{padding-top:14px;padding-bottom:14px;display:grid;gap:12px}
.search{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:14px;padding:0 12px;background:#fff;max-width:560px}
.search svg{width:20px;height:20px;flex:none}
.search input{border:0;outline:0;flex:1;min-width:0;padding:11px 0;font-size:16px;background:transparent}
.search:focus-within{outline:3px solid var(--coral-ink);outline-offset:2px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;min-height:40px;cursor:pointer;font-weight:600;font-size:14px;display:inline-flex;gap:7px;align-items:center}
.chip .n{font-family:var(--mono);font-size:17px;color:var(--teal);line-height:1}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed="true"] .n{color:var(--osd)}
.count{font-size:14px;color:var(--muted)}
.libsec{padding:34px 0 10px}
.libsec h2{font-size:clamp(1.6rem,1.1rem + 1.4vw,2.3rem);display:flex;align-items:baseline;gap:12px;scroll-margin-top:170px}
.libsec h2 .n{font-family:var(--mono);font-weight:400;font-size:.9em;color:var(--teal)}
.libsec h2 small{font:600 14px var(--sans);color:var(--muted)}
.libgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.lcard{display:flex;flex-direction:column;gap:6px;text-decoration:none;border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:#fff;transition:transform .25s var(--ease),box-shadow .25s}
.lcard:hover{transform:translateY(-3px);box-shadow:0 14px 26px -18px rgba(19,33,38,.45);border-color:#CDBFA9}
.lcard b{font-family:var(--disp);font-size:18px;line-height:1.25;font-weight:700}
.lcard:hover b{color:var(--teal-d)}
.lcard span{font-size:14px;color:var(--muted);line-height:1.45}
.lcard em{font-style:normal;font-family:var(--mono);font-size:16px;color:var(--teal-d);margin-top:auto}
.empty{padding:40px 0;font-size:18px}
[hidden]{display:none!important}

/* post */
.post-head{background:var(--room);padding:46px 0 0;border-bottom:1px solid var(--line)}
.post-head .wrap{max-width:980px}
.chan{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:var(--ink);color:#fff;border-radius:999px;padding:6px 14px 6px 10px;font-weight:700;font-size:13.5px}
.chan .n{font-family:var(--mono);font-size:19px;color:var(--osd);font-weight:400;line-height:1}
.chan:hover{background:var(--teal-d)}
.post-head h1{font-size:clamp(2.1rem,1.2rem + 3.4vw,4rem);margin:16px 0 12px;max-width:22ch}
.meta{font-family:var(--mono);font-size:19px;color:var(--ink2);margin:0 0 28px}
.crt{margin:0 0 -60px;position:relative;z-index:2}
.crt .frame{position:relative;background:linear-gradient(160deg,#16909F,var(--teal-d));border-radius:30px;padding:16px;box-shadow:0 30px 50px -30px rgba(10,94,105,.7)}
.crt .glass{position:relative;border-radius:24px/20px;overflow:hidden;background:var(--screen);aspect-ratio:16/10}
.crt .glass img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.crt .glass:hover img{transform:scale(1.04)}
.crt .glass .scan{opacity:.6}
.crt figcaption{font-size:12.5px;color:var(--muted);margin:10px 6px 0;line-height:1.5}
.post-body{max-width:720px;margin:0 auto;padding:100px 28px 10px}
.post-body p{font-size:1.12rem;line-height:1.75}
.post-body p:first-of-type{font-size:1.28rem;line-height:1.6;color:var(--ink)}
.post-body p:first-of-type::first-letter{font-family:var(--disp);font-weight:900;float:left;font-size:4.2em;line-height:.82;margin:.06em .1em 0 0;color:var(--teal)}
.next{max-width:980px;margin:20px auto 80px;padding:0 28px}
.next-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;align-items:stretch}
.upnext{display:flex;flex-direction:column;justify-content:space-between;gap:16px;background:var(--screen);color:#fff;border-radius:var(--r);padding:24px;text-decoration:none;position:relative;overflow:hidden;min-height:200px}
.upnext::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);pointer-events:none}
.upnext small{font-family:var(--mono);font-size:20px;color:var(--osd)}
.upnext b{font-family:var(--disp);font-size:26px;line-height:1.15}
.upnext .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--mustard)}
.upnext:hover b{text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:4px}
.alsoon h2{font-size:22px;margin-bottom:12px}
.alsoon ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.alsoon a{display:block;text-decoration:none;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:600}
.alsoon a:hover{border-color:var(--teal);color:var(--teal-d)}
.back{display:inline-block;margin-top:18px}

/* share bar (kept from the existing posts) */
.sb{max-width:720px;margin:34px auto;padding:16px 28px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sb-t{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.sb-l{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sb-l a,.sb-l button{width:40px;height:40px;border-radius:12px;border:1.5px solid var(--line);background:#fff;display:inline-grid;place-items:center;cursor:pointer;color:var(--ink);text-decoration:none;padding:0}
.sb-l .wide{width:auto;padding:0 12px;gap:6px;display:inline-flex;align-items:center;font-weight:700;font-size:13px}
.sb-l svg{width:18px;height:18px;fill:currentColor}
.sb-l a:hover,.sb-l button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
#sb-said{font-size:13px;color:var(--teal-d)}
.sb-note{flex-basis:100%;margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.printnote{display:none}

/* ---------- footer ---------- */
.foot{background:var(--room);border-top:6px solid var(--teal);padding:54px 0 26px;font-size:14.5px}
.foot .cols{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:30px}
.foot .brand img{width:150px}
.foot p{color:var(--ink2);max-width:34ch;margin-top:12px}
.foot h2{font:700 11.5px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--teal-d);margin:6px 0 14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 8px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--coral-ink);text-decoration:underline}
.foot .legal{margin-top:38px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink2)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .stage{grid-template-columns:1fr}
  .guide{margin-top:0}
  .guide ol{display:grid;grid-template-columns:1fr 1fr;column-gap:6px}
  .guide li+li{border-top:0}
  .planner{grid-template-columns:1fr}
  .wgrid{grid-template-columns:1fr 1fr}
  .wtext{grid-column:1/-1}
  .tapes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .libgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .launch-panel{grid-template-columns:repeat(3,1fr)}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  body{font-size:16px}
  .topbar .pub{display:none}
  .topbar .tl{gap:12px}
  .launch{position:static}
  .launch-panel{left:16px;right:16px;width:auto;grid-template-columns:1fr 1fr;top:auto;margin-top:10px;position:absolute}
  .mast .wrap{flex-wrap:wrap;gap:10px}
  .brand img{width:92px}
  .mainnav{margin-left:0;width:100%;gap:2px}
  .mainnav a{padding:8px 10px;font-size:14px}
  .mainnav a .n{display:none}
  .room{padding-top:30px}
  .set{padding-top:56px}
  .antenna{transform:translateX(-50%) scale(.75);transform-origin:bottom center}
  .tv{grid-template-columns:1fr;padding:14px;border-radius:28px;gap:14px}
  .screen{aspect-ratio:auto;min-height:330px;border-radius:24px/20px}
  .prog{padding:22px 20px 20px}
  .prog .picks li:nth-child(n+2){display:none}
  .osd{font-size:30px;top:16px;right:18px}
  .panel{flex-direction:row;justify-content:space-between;padding:0 4px;gap:10px}
  .panel .lbl,.grille{display:none}
  .dial{width:84px;height:84px}
  .dial .tick{transform:rotate(calc(var(--i) * 30deg - 120deg)) translateY(-38px) rotate(calc(120deg - var(--i) * 30deg));font-size:12px}
  .knob{inset:13px}
  .guide ol{grid-template-columns:1fr}
  .guide li+li{border-top:1px dashed var(--line)}
  .sec{padding:60px 0}
  .tapes{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .stat b{font-size:30px}
  .row2{grid-template-columns:1fr}
  .pform,.pout{padding:20px}
  .cal{grid-template-columns:34px repeat(7,minmax(0,1fr));gap:3px}
  .media-pair{grid-template-columns:1fr}
  .wgrid{grid-template-columns:1fr}
  .wcard{min-height:340px}
  .lamp{min-height:0;padding-top:220px}
  .lamp .card{margin:16px;padding:22px}
  .libgrid{grid-template-columns:1fr}
  .libtools{position:static}
  .next-grid{grid-template-columns:1fr}
  .crt .frame{padding:10px;border-radius:22px}
  .post-body{padding:90px 16px 10px}
  .prose,.listing,.next{padding-left:16px;padding-right:16px}
  .sb{padding:16px}
  .foot .cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .colourise img{filter:none}
  .vhold img{clip-path:none}
}
@media print{
  .topbar,.mast,.foot,.sb,.next,.launch{display:none!important}
  .printnote{display:block}
  .crt{margin:0}.post-body{padding-top:20px}
}