/* ============================================================================
   Radio Mason — the "fresh" layer (030, 11 Oct 2026)
   The Paper's look, carried across the whole site. Loaded LAST on every public
   page so it wins over each page's own inline <style>:
     <link rel="stylesheet" href="/fresh.css?v=…">
   Type: Inter Tight for the voice, Newsreader for the headlines that matter.
   One header everywhere (.topbar + .sitenav), one footer (.sitefoot).
   ========================================================================== */
:root{
  --ink:#0a0b10; --ink2:#0f111a; --surface:#151724; --surface2:#1b1e30; --line:#242839; --line2:#30354b;
  --text:#f3f1ea; --muted:#a3a1b5; --dim:#6f6d82;
  --gold:#e8b84b; --gold2:#ffcf6b; --live:#ff3b46; --teal:#39d0b4; --violet:#a98bff; --sky:#5b9dff; --coral:#ff7a59;
  --font:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:var(--font);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --head:"Bricolage Grotesque","Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --maxw:1240px;
}
body{font-family:var(--font);background:var(--ink);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:rgba(232,184,75,.35);color:#fff}

/* ---- type ---- */
h1{font-family:var(--head);font-weight:800;letter-spacing:-.04em;line-height:.98}
h1 em{font-style:normal;color:var(--gold)}
h2,h3{font-family:var(--font);letter-spacing:-.02em}
h2{font-weight:800}
.eyebrow,.kicker{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:800}
.wrap{max-width:var(--maxw)}
@media(max-width:640px){.wrap{padding-left:16px;padding-right:16px}}

/* ---- shell armour: page-level rules (.wrap padding, bare `a` colours, ul padding) never reach the shared header/footer ---- */
body{margin:0}
.topbar .wrap,.sitenav .wrap,.sitefoot .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.topbar a,.sitenav a{color:inherit}
.topbar .brand{color:var(--text)}
.sitefoot ul{padding:0;margin:0} .sitefoot li{margin:0}
.sitefoot p{color:var(--muted)}
@media(max-width:640px){.topbar .wrap,.sitenav .wrap,.sitefoot .wrap{padding:0 16px}}

/* ---- header: sticky bar ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(10,11,16,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:58px}
.topbar .brand{display:flex;align-items:center;gap:10px;font-family:var(--font);font-weight:800;font-size:1.06rem;letter-spacing:-.01em;white-space:nowrap}
.topbar .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--live);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,70,.6)}70%{box-shadow:0 0 0 8px rgba(255,59,70,0)}100%{box-shadow:0 0 0 0 rgba(255,59,70,0)}}
.topnav{margin-left:auto;display:flex;gap:20px;font-size:.9rem;color:var(--muted);font-weight:600}
.topnav a{white-space:nowrap}
.topnav a:hover{color:var(--text)}
.topnav .here{color:var(--gold)}
.topnav .ask{color:var(--text);border:1.5px solid var(--line2);border-radius:999px;padding:5px 12px;margin:-6px 0;transition:border-color .15s}
.topnav .ask:hover{border-color:var(--gold)}
@media(max-width:760px){.topnav a.opt{display:none}}
@media(max-width:420px){.topnav .ask{font-size:0;padding:5px 11px}.topnav .ask::after{content:"Ask";font-size:.84rem}}

/* ---- header: the site's section rail (scrolls away; only the bar sticks) ---- */
.sitenav{border-bottom:1px solid var(--line);background:var(--ink)}
.sitenav .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;height:46px;align-items:stretch}
.sitenav .wrap::-webkit-scrollbar{display:none}
.sitenav a{padding:0 12px;font-weight:700;font-size:.9rem;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:7px;
  border-bottom:3px solid transparent;transition:color .15s,border-color .15s}
.sitenav a:first-child{padding-left:0}
.sitenav .wrap{position:relative;scroll-behavior:auto}
.sitenav a:hover{color:var(--text)}
.sitenav a.on{color:var(--text);border-bottom-color:var(--c,var(--gold))}
.sitenav a .sw{width:7px;height:7px;border-radius:2px;background:var(--c,var(--gold))}
.sitenav a .newtag{font-size:.58rem;font-weight:900;letter-spacing:.1em;color:var(--ink);background:var(--teal);padding:2px 5px;border-radius:3px}

/* home keeps its rich player bar: give its nav row the same rail feel */
.navrow .wrap{height:46px}
.navlinks{gap:0;font-family:var(--font)}
.navlinks a{padding:0 12px;height:46px;display:flex;align-items:center;border-bottom:3px solid transparent;font-weight:700}
.navlinks a:first-child{padding-left:0}
.navlinks a:hover,.navlinks a.on{border-bottom-color:var(--gold)}
.playerbar .brand{font-family:var(--font)}

/* ---- page heads ---- */
.head,.pagehead{padding:46px 0 26px;border-bottom:1px solid var(--line);margin-bottom:34px}
.head h1,.pagehead h1{font-size:clamp(2.6rem,7vw,4.6rem);margin-top:8px;max-width:18ch}
.head p,.pagehead p{color:var(--muted);margin-top:14px;max-width:64ch;font-size:1.05rem;line-height:1.6}
.hero h1{font-family:var(--head);font-weight:800;letter-spacing:-.04em;line-height:.96}

/* ---- section heads: the Paper's ruled band ---- */
.sechead h2,.bandhead h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
.sechead{border-top:3px solid var(--gold);padding-top:14px;max-width:none}
.sechead p,.sechead h2{max-width:62ch}
.sechead .eyebrow{margin-bottom:2px}

/* ---- cards ---- */
.card,.door,.pcard,.talkcard,.paperwrap,.cta,.sked{border-radius:14px;border-color:var(--line)}
.door,.pcard{transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s,box-shadow .25s}
.door:hover,.pcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px -18px rgba(0,0,0,.8),0 0 0 1px rgba(232,184,75,.25)}
.door h3,.pcard h3{font-size:1.16rem;letter-spacing:-.015em}
.pcard .av{font-family:var(--head);font-weight:800;font-size:1.4rem}

/* ---- buttons ---- */
.btn{font-family:var(--font);font-weight:800;letter-spacing:-.005em}

/* ---- long reads (legal + how-it's-made pages) ---- */
.wrap.doc{max-width:760px;margin:0 auto;padding:44px 22px 40px}
.doc>h1{font-size:clamp(2.4rem,6.5vw,3.8rem);margin:10px 0 8px}
.doc .date{color:var(--dim);font-size:.85rem;font-weight:600;margin-bottom:26px}
.doc h2{font-size:1.35rem;margin:38px 0 10px;padding-top:12px;border-top:3px solid var(--gold)}
.doc h3{font-size:1.06rem;margin:22px 0 6px}
.doc p,.doc li{font-family:var(--serif);font-size:1.12rem;line-height:1.65;color:#d9d6e2}
.doc li{margin:6px 0 6px 1.2em}
.doc a{color:var(--gold2);border-bottom:1px solid rgba(232,184,75,.35)}
.doc a:hover{border-color:var(--gold2)}
.doc .card{font-family:var(--serif);font-size:1.12rem;line-height:1.6;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:20px 22px;color:#e6e3ee}
.doc table{width:100%;border-collapse:collapse;font-size:.95rem;margin:12px 0}
.doc th,.doc td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:640px){.wrap.doc{padding:30px 16px 30px}}

/* ---- footer ---- */
.sitefoot{border-top:1px solid var(--line);padding:46px 0 60px;background:var(--ink2);color:var(--dim);font-size:.85rem;margin-top:30px}
.sitefoot .frow{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:30px}
.sitefoot .mark{font-family:var(--head);font-weight:800;font-size:1.8rem;color:var(--text);letter-spacing:-.04em;line-height:1}
.sitefoot .mark em{color:var(--gold);font-style:normal}
.sitefoot .tagl{color:var(--muted);margin-top:10px;max-width:32ch;font-size:.92rem;line-height:1.55}
.sitefoot h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;font-weight:800}
.sitefoot ul{list-style:none;display:grid;gap:8px}
.sitefoot li a{color:var(--muted);font-weight:600;font-size:.9rem}
.sitefoot li a:hover{color:var(--text)}
.sitefoot .legal{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);line-height:1.7;font-size:.8rem}
.sitefoot .legal strong{color:var(--muted)}
.sitefoot .legal a{color:var(--gold)}
@media(max-width:820px){.sitefoot .frow{grid-template-columns:1fr 1fr}.sitefoot .frow>div:first-child{grid-column:1/-1}}

@media(prefers-reduced-motion:reduce){.door,.pcard{transition:none}}