/* ============================================================
   The Sub-Substack — one layout skeleton, three era liveries.
     .t-landing      Substack: orange, serif, uncluttered
     .t-substandard  Weekly Standard years: halftone pop-art red
     .t-subbeacon    Free Beacon years: crimson, gold, newsprint
   Theme tokens are set per body class; everything below the
   theme block is shared and reads only from the tokens.
   ============================================================ */
:root{
  --jvl:#2563eb;--vic:#0f766e;--sonny:#b45309;--mike:#6d28d9;--guest:#6b7280;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --ink:#1a1a1a;--bg:#faf9f7;--card:#fff;--line:#e7e3dc;--muted:#767676;
  --accent:#2563eb;--accent2:#2563eb;--headfont:var(--sans);--headweight:800;
  --headerbg:#fff;--headerink:#1a1a1a;--headerline:var(--line);--headertex:none;
  --herobg:transparent;--heroink:inherit;--radius:12px;
}
/* ---- Substack: the show's present tense ---- */
.t-landing{
  --accent:#ff6719;--accent2:#ff6719;--bg:#fff;--line:#e4e2dd;--ink:#1a1a1a;
  --headfont:var(--serif);--headweight:700;--headerbg:#fff;--radius:10px;
}
/* ---- Weekly Standard years: bright red, orange halftone ---- */
.t-substandard{
  --accent:#e8341f;--accent2:#f7941e;--bg:#fffaf6;--line:#f0ddd2;--ink:#1c1917;
  --muted:#7a6a62;--headfont:var(--serif);--headweight:700;
  --headerbg:#e8341f;--headerink:#fff;--headerline:#c92714;
  --headertex:radial-gradient(circle at 50% 50%,rgba(0,0,0,.10) 26%,transparent 27%);
  --herobg:radial-gradient(circle at 50% 50%,rgba(232,52,31,.10) 26%,transparent 27%);
  --radius:10px;
}
/* ---- Substack years: the Sub-Beacon palette warmed by Substack orange.
       The show reuses its old cover art here, so the livery is what marks the
       era: orange furniture over the crimson/gold it kept. ---- */
.t-subsubstack{
  --accent:#ff6719;--accent2:#c4161c;--bg:#fffdfa;--line:#eee3d8;--ink:#1a1713;
  --muted:#7a6f66;--headfont:var(--serif);--headweight:700;
  --headerbg:#1f2124;--headerink:#fff;--headerline:#ff6719;
  --headertex:none;
  --herobg:linear-gradient(160deg,rgba(255,103,25,.10),transparent 62%);
  --radius:10px;
}
/* ---- Free Beacon years: crimson, gold, monument grey ---- */
.t-subbeacon{
  --accent:#c4161c;--accent2:#c99a3e;--bg:#f6f6f7;--line:#dedee1;--ink:#17181a;
  --muted:#6d7075;--headfont:var(--sans);--headweight:800;
  --headerbg:#1f2124;--headerink:#fff;--headerline:#c4161c;
  --headertex:none;
  --herobg:repeating-conic-gradient(from 0deg at 50% -10%,rgba(196,22,28,.07) 0deg 5deg,transparent 5deg 11deg);
  --radius:6px;
}

*{box-sizing:border-box}
body{margin:0;font:16px/1.65 var(--sans);color:var(--ink);background:var(--bg)}
h1,h2,h3{font-family:var(--headfont);font-weight:var(--headweight);letter-spacing:-.015em;line-height:1.18}
a{color:var(--accent)}

/* ---- header ---- */
header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px 22px;background-color:var(--headerbg);background-image:var(--headertex);
  background-size:13px 13px;border-bottom:3px solid var(--headerline);
  position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--headerink);
  font-family:var(--headfont);font-weight:var(--headweight);font-size:17px;letter-spacing:-.02em;min-width:0}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brandmark{width:34px;height:34px;border-radius:4px;flex:0 0 auto;box-shadow:0 1px 4px rgba(0,0,0,.25)}
/* Two-line lockup: the site name sits above the era name, so it is clear the
   brandmark leads back to the whole archive rather than to this era. */
.brandtext{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brandsite{font-size:14.5px;letter-spacing:-.02em}
.brandshow{font-size:11.5px;font-weight:600;opacity:.75;text-transform:uppercase;letter-spacing:.06em}
.brand:hover .brandsite{text-decoration:underline}
.wordmark{font-family:var(--serif);font-size:20px;letter-spacing:-.03em}
.t-landing .wordmark{color:var(--accent)}
nav{display:flex;flex-wrap:wrap;justify-content:flex-end}
nav a{margin-left:16px;text-decoration:none;color:var(--headerink);opacity:.82;font-weight:600;font-size:14px;white-space:nowrap}
nav a:hover{opacity:1;text-decoration:underline}

main{max-width:840px;margin:0 auto;padding:28px 22px 60px}
footer{max-width:840px;margin:0 auto;padding:22px 22px 50px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
footer a{color:var(--muted)}
.count{color:var(--muted);font-weight:400;opacity:.7}
.crumb{margin:0 0 10px}.crumb a{color:var(--accent);text-decoration:none;font-weight:600;font-size:14px}
.crumb a:hover{text-decoration:underline}

/* ---- hero ---- */
.hero{padding:26px 0 12px}.hero h1{font-size:41px;margin:.08em 0}
.tag{font-size:18.5px;color:#4a4a4a;max-width:660px}
.era{color:var(--muted);font-size:14px;margin:6px 0}
.eranote{text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;font-weight:700;
  color:var(--accent);margin:0 0 6px}
.joke{max-width:660px;font-size:15px;line-height:1.7;color:#55504c;border-left:3px solid var(--accent);
  padding:2px 0 2px 15px;margin:20px 0 4px}
.joke em{font-style:italic}
/* show home: logo lockup beside the title */
.showhero{display:flex;gap:22px;align-items:flex-start;padding:24px 0 14px;
  background-image:var(--herobg);background-size:13px 13px}
.herologo{width:132px;height:132px;border-radius:8px;flex:0 0 auto;box-shadow:0 3px 14px rgba(0,0,0,.18)}
.herotext{min-width:0}.herotext h1{font-size:36px;margin:.05em 0 .1em}
@media(max-width:620px){.showhero{flex-direction:column;gap:14px}.herologo{width:96px;height:96px}
  .herotext h1{font-size:29px}.hero h1{font-size:32px}}

.btn{display:inline-block;margin:12px 10px 0 0;padding:11px 19px;background:var(--accent);color:#fff;
  border-radius:var(--radius);text-decoration:none;font-weight:700;font-size:15px;border:2px solid var(--accent)}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--accent)}
.btn:disabled,.btn[disabled]{opacity:.55}

/* ---- landing show picker ---- */
.showpick{display:grid;gap:16px;margin-top:26px}
@media(min-width:660px){.showpick{grid-template-columns:1fr 1fr}}
/* three eras: go 3-up once there is room, so no card is left stranded */
@media(min-width:1000px){.showpick{grid-template-columns:repeat(3,1fr)}}
.showcard{display:flex;flex-direction:column;padding:20px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.showcard:hover{border-color:var(--accent);box-shadow:0 6px 22px rgba(0,0,0,.09);transform:translateY(-2px)}
.cardlogo{width:88px;height:88px;border-radius:6px;margin-bottom:14px;box-shadow:0 2px 10px rgba(0,0,0,.16)}
.showcard h2{margin:.05em 0 .25em;font-size:21px}
.showcard .tag{font-size:15px;line-height:1.55}
.showcard .go{display:inline-block;margin-top:auto;padding-top:14px;color:var(--accent);font-weight:700;font-size:14.5px}

/* ---- featured / best-of ---- */
.feats{display:grid;gap:10px}
@media(min-width:640px){.feats{grid-template-columns:1fr 1fr}}
.feat{display:block;padding:13px 16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.feat:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.feat-title{display:block;font-weight:700;line-height:1.3}
.feat-desc{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--muted);font-weight:400}

/* ---- catalogue ---- */
.search{width:100%;padding:12px 14px;font-size:16px;border:1px solid var(--line);
  border-radius:var(--radius);margin:8px 0 20px;background:var(--card);color:var(--ink)}
.search:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.cards{display:grid;gap:12px}
.card{display:flex;gap:14px;padding:14px 16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);text-decoration:none;color:inherit}
.card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.card .num{font-family:var(--headfont);font-weight:800;color:var(--accent);opacity:.5;min-width:46px}
.card h3{margin:0 0 3px;font-size:17px}
.meta{color:var(--muted);font-size:13px;margin:2px 0}
.prev{color:#555;font-size:14px;margin:6px 0 0}

/* ---- episode page ---- */
.summary{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:4px 20px;margin:18px 0}
.summary strong{color:#111}
.notes{margin:16px 0}
.notes h3{margin:0 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.notes p{color:#555;font-style:italic;margin:4px 0}
.transcript{margin-top:20px}
.transcript>summary{cursor:pointer;font-weight:700;padding:10px 0;color:var(--accent)}
.turns{margin-top:10px}
.turn{display:grid;grid-template-columns:64px 62px 1fr;gap:8px;padding:5px 0;
  border-top:1px solid var(--line);font-size:15px}
.turn .spk{font-weight:700}.turn .ts{color:var(--muted);opacity:.6;font-size:12px;padding-top:2px}
.turn.jvl .spk{color:var(--jvl)}.turn.vic .spk{color:var(--vic)}.turn.sonny .spk{color:var(--sonny)}
.turn.mike .spk{color:var(--mike)}.turn.guest .spk{color:var(--guest)}
.fixit{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.fixit a{color:var(--accent);text-decoration:none;font-weight:600}
.fixit a:hover{text-decoration:underline}

/* ---- suggestion form ---- */
.sgform{display:grid;gap:15px;max-width:620px;margin-top:22px}
.sgform label{display:block;font-weight:600;font-size:14px}
.sgform .opt{font-weight:400;color:var(--muted)}
.sgform input,.sgform select,.sgform textarea{width:100%;margin-top:5px;padding:10px 12px;
  font:16px/1.5 var(--sans);color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius)}
.sgform textarea{resize:vertical;min-height:120px}
.sgform input:focus,.sgform select:focus,.sgform textarea:focus{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.sgrow{display:grid;gap:15px}
@media(min-width:560px){.sgrow{grid-template-columns:1fr 1fr}}
.sgnote{font-size:13px;color:var(--muted);margin:0}
.sgform .btn{justify-self:start;cursor:pointer;font-family:var(--sans)}
.sgstatus{margin:0;font-size:14.5px;font-weight:600;min-height:1.3em}
.sgstatus.ok{color:#12784a}.sgstatus.err{color:#b3261e}
/* honeypot: off-screen rather than display:none — bots fill what they can parse */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- listen-on-Substack call to action ---- */
.listen{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:4px 0 0}
.listen .btn{margin:8px 0 0}
.listenwhere{color:var(--muted);font-size:13.5px}

/* ---- comments ---- */
.comments{margin:34px 0 0;padding-top:20px;border-top:2px solid var(--line)}
.comments h3{margin:0 0 12px;font-size:19px}
.cmempty{color:var(--muted);font-size:14.5px;margin:0 0 12px}
.cmlist{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
.cmitem{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent2);
  border-radius:var(--radius);padding:11px 15px}
.cmhead{display:flex;gap:10px;align-items:baseline;margin-bottom:3px}
.cmname{font-weight:700;font-size:14.5px}
.cmdate{color:var(--muted);font-size:12.5px}
/* pre-line so posted paragraph breaks survive without allowing any markup */
.cmbody{white-space:pre-line;font-size:15px}
.cmform{display:grid;gap:13px;max-width:620px}
.cmform label{display:block;font-weight:600;font-size:14px}
.cmform .opt{font-weight:400;color:var(--muted)}
.cmform input,.cmform textarea{width:100%;margin-top:5px;padding:10px 12px;
  font:16px/1.5 var(--sans);color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius)}
.cmform textarea{resize:vertical;min-height:96px}
.cmform input:focus,.cmform textarea:focus{outline:2px solid var(--accent);
  outline-offset:1px;border-color:var(--accent)}
.cmform .btn{justify-self:start;cursor:pointer;font-family:var(--sans)}

.supercut-players{display:flex;flex-wrap:wrap;gap:18px;margin:10px 0 24px}
.player{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.player figcaption{font-weight:700;text-transform:capitalize;margin-bottom:6px}
audio{width:320px;max-width:100%}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}
code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;font-size:13px}
@media(max-width:600px){
  .turn{grid-template-columns:52px 1fr}.turn .ts{display:none}
  header{padding:10px 15px}main{padding:22px 16px 50px}nav a{margin-left:12px;font-size:13px}
  /* four nav items plus the lockup is tight here — shrink the brand, and let the
     header stack rather than squeezing the era name to an ellipsis */
  header{flex-wrap:wrap;gap:6px}
  .brandmark{width:30px;height:30px}
  .brandsite{font-size:13.5px}.brandshow{font-size:10.5px}
  nav{justify-content:flex-start}nav a{margin:0 14px 0 0}
}