/* RADIO CO-OP · white paper system One shared design; each paper sets --accent on . */ :root{ --ground:#0B1220; --ground-2:#0E1728; --panel:#141E33; --panel-2:#1A2740; --line:#27354F; --ink:#F3EEE6; --muted:#8195B3; --accent:#F5A623; --accent-soft:rgba(245,166,35,.14); --red:#E0554C; --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace; --disp:"Oswald",Impact,sans-serif; --body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif; } body.stations{--accent:#F5A623;--accent-soft:rgba(245,166,35,.14)} body.artists {--accent:#9A7BFF;--accent-soft:rgba(154,123,255,.16)} body.community{--accent:#35C4B5;--accent-soft:rgba(53,196,181,.14)} body.intel{--accent:#D8C9A3;--accent-soft:rgba(216,201,163,.12)} /* data tables */ .data{width:100%;border-collapse:collapse;margin:28px 0;font-size:.9rem;display:block;overflow-x:auto} .data th{ font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel-2); } .data td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top} .data tr:last-child td{border-bottom:none} .data td.fig{font-family:var(--mono);color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600} .data td.src{font-size:.78rem;color:var(--muted)} .data tbody tr:hover{background:var(--panel)} .tbl-wrap{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:28px 0} .tbl-wrap .data{margin:0} /* verdict blocks */ .verdict{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:22px 26px;margin:18px 0} .verdict h3{color:#fff;margin-bottom:9px} .verdict p{font-size:.94rem;margin-bottom:0;color:var(--muted)} .verdict p+p{margin-top:12px} .flag{border-left-color:var(--red)} .flag h3{color:var(--red)} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--ground);color:var(--ink);font-family:var(--body); font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} .wrap{max-width:820px;margin:0 auto;padding:0 26px} .wide{max-width:1120px;margin:0 auto;padding:0 26px} /* ── atmosphere ── */ .grain{ position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.045; background-image:url("data:image/svg+xml;utf8,"); } .glow{ position:fixed;top:-30vh;left:50%;transform:translateX(-50%); width:120vw;height:80vh;z-index:0;pointer-events:none; background:radial-gradient(ellipse at center,var(--accent-soft),transparent 62%); } main,header,footer{position:relative;z-index:1} /* ── masthead ── */ .mast{border-bottom:1px solid var(--line);background:rgba(11,18,32,.86);backdrop-filter:blur(8px);position:sticky;top:0;z-index:60} .mast-in{display:flex;align-items:center;gap:16px;padding:13px 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase} .mast-mark{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:600} .mast-mark:hover{text-decoration:none} .mast-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{50%{opacity:.35}} .mast-doc{margin-left:auto;color:var(--muted)} .mast-nav{display:flex;gap:14px;color:var(--muted)} .mast-nav a{color:var(--muted)} .mast-nav a.on{color:var(--accent)} @media(max-width:720px){.mast-doc{display:none}} /* ── hero ── */ .hero{padding:86px 0 60px;position:relative} .kicker{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:26px;display:flex;align-items:center;gap:12px} .kicker::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)} h1{ font-family:var(--disp);font-weight:600;text-transform:uppercase; font-size:clamp(2.5rem,7.2vw,5rem);line-height:.98;letter-spacing:-.005em; text-wrap:balance;margin-bottom:24px; } h1 em{font-style:normal;color:var(--accent)} .dek{font-size:clamp(1.08rem,2.1vw,1.32rem);color:var(--muted);max-width:60ch;line-height:1.6} .dek strong{color:var(--ink);font-weight:600} /* carrier wave */ .wave{width:100%;height:64px;margin:44px 0 0;overflow:hidden;opacity:.85} .wave svg{width:200%;height:100%;animation:travel 9s linear infinite} @keyframes travel{to{transform:translateX(-50%)}} /* ── sections ── */ section{padding:56px 0} .snum{ font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;color:var(--accent); display:flex;align-items:center;gap:12px;margin-bottom:18px;text-transform:uppercase; } .snum::after{content:"";flex:1;height:1px;background:var(--line)} h2{font-family:var(--disp);font-weight:500;text-transform:uppercase;font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.05;letter-spacing:.005em;margin-bottom:20px;text-wrap:balance} h3{font-family:var(--disp);font-weight:500;text-transform:uppercase;font-size:1.18rem;letter-spacing:.04em;margin-bottom:8px} p{margin-bottom:19px;max-width:66ch} p.lead{font-size:1.16rem;color:var(--ink)} strong{color:#fff;font-weight:600} .muted{color:var(--muted)} /* pull quote */ .pull{ border-left:3px solid var(--accent);padding:6px 0 6px 26px;margin:38px 0; font-family:var(--disp);font-weight:300;text-transform:uppercase; font-size:clamp(1.35rem,3.2vw,2.05rem);line-height:1.16;color:#fff;letter-spacing:.01em; } .pull span{color:var(--accent)} /* stat readout */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:34px 0} .stat{background:var(--panel);padding:22px 20px} .stat b{display:block;font-family:var(--mono);font-size:1.9rem;color:var(--accent);line-height:1;margin-bottom:9px;font-variant-numeric:tabular-nums} .stat span{font-size:.83rem;color:var(--muted);line-height:1.45;display:block} /* comparison rows */ .versus{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:32px 0} .vrow{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)} .vcell{background:var(--panel);padding:17px 20px;font-size:.93rem} .vcell.a{color:var(--muted)} .vcell.b{color:var(--ink);border-left:2px solid var(--accent)} .vhead{background:var(--panel-2);font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:11px 20px} @media(max-width:640px){.vrow{grid-template-columns:1fr}} /* cards */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:32px 0} .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;transition:border-color .2s,transform .2s} .card:hover{border-color:var(--accent);transform:translateY(-3px)} .card .ico{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--accent);margin-bottom:12px;display:block} .card p{font-size:.92rem;color:var(--muted);margin:0} /* honesty box */ .level{background:var(--ground-2);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:10px;padding:26px 28px;margin:34px 0} .level .tag{font-family:var(--mono);font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:12px;display:block} .level p:last-child{margin-bottom:0} .level p{font-size:.95rem} /* ladder */ .ladder{counter-reset:step;margin:34px 0;display:grid;gap:12px} .rung{ counter-increment:step;background:var(--panel);border:1px solid var(--line);border-radius:12px; padding:20px 24px 20px 68px;position:relative; } .rung::before{ content:counter(step);position:absolute;left:22px;top:19px; font-family:var(--mono);font-size:1.05rem;color:var(--accent);font-weight:600; width:28px;height:28px;border:1px solid var(--accent);border-radius:50%; display:flex;align-items:center;justify-content:center; } .rung b{display:block;font-family:var(--disp);text-transform:uppercase;font-size:1.05rem;letter-spacing:.03em;font-weight:500;margin-bottom:4px} .rung span{font-size:.92rem;color:var(--muted)} .rung .cost{float:right;font-family:var(--mono);font-size:.68rem;color:var(--accent);letter-spacing:.1em;border:1px solid var(--line);border-radius:100px;padding:3px 11px} @media(max-width:560px){.rung .cost{float:none;display:inline-block;margin-top:9px}} /* closing CTA */ .close{border-top:1px solid var(--line);margin-top:20px;padding:70px 0 34px;text-align:center} .close h2{margin-bottom:16px} .close p{margin:0 auto 28px} .btn{ display:inline-block;font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase; background:var(--accent);color:#0B1220;font-weight:700;padding:15px 30px;border-radius:8px; border:1px solid var(--accent);transition:transform .15s,box-shadow .2s; } .btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 30px var(--accent-soft)} .btn.ghost{background:transparent;color:var(--accent)} .btn-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} footer{border-top:1px solid var(--line);padding:32px 0 60px;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .foot-in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap} /* index cover */ .cover{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:70px 0 40px} .picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin-top:14px} .pick{ background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:30px 26px; display:block;color:var(--ink);transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden; } .pick:hover{text-decoration:none;transform:translateY(-4px);border-color:var(--pc);box-shadow:0 16px 40px rgba(0,0,0,.4)} .pick::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--pc)} .pick .num{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;color:var(--pc);display:block;margin-bottom:14px} .pick h3{font-size:1.5rem;margin-bottom:10px;color:#fff} .pick p{font-size:.92rem;color:var(--muted);margin:0} .pick .go{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;color:var(--pc);margin-top:16px;display:block} .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} }