/* =========================================================================
   THE PODCAST NETWORK — shared design system
   Espresso + cream + heritage green. Editorial / dispatch house style.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500;1,6..72,600&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  /* dark */
  --espresso:    oklch(0.165 0.012 64);
  --espresso-2:  oklch(0.205 0.014 64);
  --espresso-3:  oklch(0.255 0.015 62);
  --line:        oklch(0.32 0.013 62);
  --line-soft:   oklch(0.27 0.012 62);
  /* light / paper */
  --cream:       oklch(0.935 0.013 84);
  --cream-2:     oklch(0.895 0.018 82);
  --ink:         oklch(0.215 0.013 60);
  --ink-soft:    oklch(0.40 0.013 60);
  /* text on dark */
  --text:        oklch(0.935 0.010 84);
  --muted:       oklch(0.66 0.012 78);
  --faint:       oklch(0.52 0.012 72);
  /* accent — TPN heritage green */
  --green:       oklch(0.80 0.165 131);
  --green-bright:oklch(0.85 0.18 130);
  --green-deep:  oklch(0.42 0.085 150);
  --green-band:  oklch(0.355 0.060 152);
  --green-ink:   oklch(0.30 0.05 150);

  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--espresso);
  color:var(--text);
  font-family:"Newsreader", Georgia, serif;
  font-size:18px;
  line-height:1.55;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---- type primitives ---------------------------------------------------- */
.display{
  font-family:"Anton", "Arial Narrow", sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:0.92;
  letter-spacing:0.005em;
  margin:0;
}
.serif-italic{ font-style:italic; font-weight:500; }

.eyebrow{
  font-family:"Space Mono", monospace;
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--green);
  margin:0;
}
.eyebrow.dim{ color:var(--faint); }
.mono{ font-family:"Space Mono", monospace; }

/* ---- layout ------------------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
section{ position:relative; }
.section{ padding-block:clamp(56px, 8vw, 110px); }

.paper{ background:var(--cream); color:var(--ink); }
.paper .eyebrow{ color:var(--green-deep); }
.paper .eyebrow.dim{ color:var(--ink-soft); }
.band-green{ background:var(--green-band); color:var(--cream); }
.band-green .eyebrow{ color:oklch(0.86 0.14 130); }

/* section header: roman/number marker + stacked label */
.sec-head{ display:flex; align-items:baseline; gap:24px; margin-bottom:40px; }
.sec-mark{
  font-family:"Anton", sans-serif;
  font-size:clamp(40px,5vw,64px);
  line-height:0.8;
  color:var(--green);
  opacity:0.9;
}
.paper .sec-mark{ color:var(--green-deep); opacity:1; }
.sec-head h2{ margin:0; }

/* ---- ticker ------------------------------------------------------------- */
.ticker{
  background:var(--espresso);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
  font-family:"Space Mono", monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.ticker .track{
  display:flex; gap:0; white-space:nowrap; width:max-content;
  animation:ticker 38s linear infinite;
}
.ticker .track span{ padding:9px 0; }
.ticker .track .dot{ padding:9px 22px; color:var(--green); }
@keyframes ticker{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- header ------------------------------------------------------------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in oklab, var(--espresso) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-head .wrap{ display:flex; align-items:center; gap:28px; height:78px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .mark{ width:34px; height:34px; flex:none; }
.brand .word{ font-family:"Newsreader",serif; font-size:21px; letter-spacing:-0.01em; line-height:1; }
.brand .word b{ font-weight:600; }
.brand .word .t{ color:var(--muted); font-weight:400; }
.brand .word .pc{ color:var(--green); font-weight:600; }
.brand .word .nw{ color:var(--text); font-weight:400; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:30px; }
.nav a{
  font-family:"Space Mono", monospace; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted); transition:color .15s;
}
.nav a:hover, .nav a.active{ color:var(--text); }
.nav a.active{ color:var(--green); }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Space Mono", monospace; font-size:12px; letter-spacing:0.13em;
  text-transform:uppercase; padding:11px 18px; cursor:pointer;
  border:1px solid var(--green); color:var(--green); background:transparent;
  transition:background .15s,color .15s;
}
.btn:hover{ background:var(--green); color:var(--espresso); }
.btn.solid{ background:var(--green); color:var(--espresso); border-color:var(--green); }
.btn.solid:hover{ background:var(--green-bright); border-color:var(--green-bright); }
.btn.ghost{ border-color:var(--line); color:var(--text); }
.btn.ghost:hover{ border-color:var(--text); background:transparent; color:var(--text); }
.paper .btn.ghost{ border-color:var(--ink); color:var(--ink); }

/* ---- nav toggle (mobile) ----------------------------------------------- */
.nav-toggle{ display:none; }

/* ---- show / cover card -------------------------------------------------- */
.cover{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, var(--espresso-2) 0 11px, var(--espresso-3) 11px 22px);
  border:1px solid var(--line-soft);
  display:flex; align-items:flex-end;
}
.cover .cap{
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--faint);
  position:absolute; top:12px; left:12px;
}
.cover .badge{
  position:absolute; top:0; right:0; background:var(--green); color:var(--espresso);
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; padding:5px 10px;
}
.cover .ctitle{
  font-family:"Anton",sans-serif; text-transform:uppercase; line-height:0.92;
  color:var(--text); padding:16px; font-size:clamp(22px,3vw,30px);
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}

/* ---- dispatch / episode list ------------------------------------------- */
.dispatch{
  display:grid; grid-template-columns:auto 1fr auto; gap:0 22px;
  align-items:baseline; padding:22px 0; border-top:1px solid var(--line);
  transition:padding-left .18s;
}
.dispatch:hover{ padding-left:10px; }
.dispatch:last-child{ border-bottom:1px solid var(--line); }
.paper .dispatch{ border-color:var(--cream-2); }
.dispatch .num{ font-family:"Space Mono",monospace; font-size:12px; color:var(--faint); }
.dispatch .meta{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--green); margin-bottom:7px; }
.paper .dispatch .meta{ color:var(--green-deep); }
.dispatch h3{ margin:0 0 6px; font-size:22px; font-weight:600; line-height:1.2; }
.dispatch p{ margin:0; color:var(--muted); font-size:15px; max-width:62ch; }
.paper .dispatch p{ color:var(--ink-soft); }
.dispatch .go{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.dispatch:hover .go{ color:var(--green); }

/* ---- stats -------------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft); }
.paper .stats{ background:var(--cream-2); border-color:var(--cream-2); }
.stat{ background:var(--espresso); padding:22px; }
.paper .stat{ background:var(--cream); }
.stat .n{ font-family:"Anton",sans-serif; font-size:clamp(30px,3.6vw,46px); line-height:1; color:var(--green); }
.paper .stat .n{ color:var(--green-deep); }
.stat .l{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted); margin-top:9px; }
.paper .stat .l{ color:var(--ink-soft); }

/* ---- play button -------------------------------------------------------- */
.play{
  width:62px; height:62px; border-radius:50%; flex:none;
  background:var(--green); color:var(--espresso);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:transform .15s;
}
.play:hover{ transform:scale(1.06); }
.play svg{ width:22px; height:22px; margin-left:3px; }

/* ---- footer ------------------------------------------------------------- */
.site-foot{ background:var(--espresso); border-top:1px solid var(--line-soft);
  padding-block:56px 40px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; }
.site-foot h4{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--faint); margin:0 0 16px; font-weight:400; }
.site-foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.site-foot li a{ color:var(--muted); font-size:15px; }
.site-foot li a:hover{ color:var(--green); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:18px;
  margin-top:46px; padding-top:22px; border-top:1px solid var(--line-soft);
  font-family:"Space Mono",monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--faint); }

/* ---- subscribe chips ---------------------------------------------------- */
.subs{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.sub{ border:1px solid var(--line); padding:18px 20px; display:flex; flex-direction:column; gap:6px;
  transition:border-color .15s,background .15s; }
.sub:hover{ border-color:var(--green); background:var(--espresso-2); }
.band-green .sub{ border-color:oklch(0.50 0.06 150); }
.band-green .sub:hover{ border-color:var(--cream); background:rgba(0,0,0,.12); }
.sub .p{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted); }
.band-green .sub .p{ color:oklch(0.85 0.07 130); }
.sub .h{ font-size:19px; font-weight:600; }

/* ---- utility ------------------------------------------------------------ */
.lead{ font-size:clamp(19px,2.1vw,23px); line-height:1.5; }
.divider{ height:1px; background:var(--line-soft); border:0; margin:0; }
.kicker-rule{ display:inline-block; width:42px; height:2px; background:var(--green); vertical-align:middle; }

@media (max-width:880px){
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .subs{ grid-template-columns:repeat(2,1fr); }
  .nav{ display:none; }
  .nav.open{ display:flex; position:absolute; top:78px; left:0; right:0; flex-direction:column;
    gap:0; background:var(--espresso); border-bottom:1px solid var(--line); padding:8px var(--pad) 18px; }
  .nav.open a{ padding:12px 0; border-bottom:1px solid var(--line-soft); }
  .nav-toggle{ display:inline-flex; margin-left:auto; }
  .dispatch{ grid-template-columns:1fr auto; }
  .dispatch .num{ display:none; }
}

/* =========================================================================
   Page-specific layout (consolidated from designs/{index,history,latest}.html)
   ========================================================================= */

/* --- Homepage: shows + features --- */
.meta-line{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--green); display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.listen{ font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text); border-bottom:2px solid var(--green); padding-bottom:2px; }

.shows-feature{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; }
.feat{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:22px; align-items:center;
  border:1px solid var(--line-soft); padding:18px; transition:border-color .15s,background .15s; }
.feat:hover{ border-color:var(--green); background:var(--espresso-2); }
.feat .feat-body p{ color:var(--muted); font-size:15px; margin:0 0 16px; }
.feat-stack{ display:grid; grid-template-rows:1fr 1fr; gap:24px; }
.feat.sm{ grid-template-columns:0.8fr 1.2fr; padding:14px; }
.feat.sm .cover{ aspect-ratio:1/1; }
.feat.sm .feat-body p{ font-size:14px; margin-bottom:12px; }

.shows-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:8px; }
.show .cover{ aspect-ratio:1/1; }
.show:hover .cover{ border-color:var(--green); }
.show-t{ margin-top:12px; font-size:18px; font-weight:600; line-height:1.25; }
.show-t span{ display:block; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); font-weight:400; margin-top:4px; }

.megabundle{ margin-top:40px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--espresso-2); border:1px solid var(--line); padding:28px 32px; flex-wrap:wrap; }
.megabundle:hover{ border-color:var(--green); }
.mb-title{ font-family:"Anton",sans-serif; text-transform:uppercase; font-size:clamp(24px,3vw,34px);
  margin:8px 0 4px; letter-spacing:.01em; }
.mb-sub{ color:var(--muted); margin:0; font-size:15px; }

/* --- Homepage: books & film --- */
.bf-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.bf-cover{ aspect-ratio:2/3; position:relative; border:1px solid var(--cream-2);
  background:repeating-linear-gradient(135deg, var(--cream) 0 11px, var(--cream-2) 11px 22px); }
.bf-cover .cap{ position:absolute; top:12px; left:12px; font-family:"Space Mono",monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.bf-cover.film{ aspect-ratio:2/3; background:repeating-linear-gradient(135deg, var(--cream-2) 0 11px, oklch(0.84 0.02 80) 11px 22px); }
.film-tag{ position:absolute; bottom:12px; left:12px; background:var(--green-deep); color:var(--cream);
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:5px 9px; }
.bf:hover .bf-cover{ border-color:var(--green-deep); }
.bf-t{ margin-top:14px; font-size:18px; font-weight:600; }
.bf-d{ color:var(--ink-soft); font-size:14px; margin-top:4px; line-height:1.45; }

/* --- Homepage: hosts --- */
.hosts .host{ display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:center; }
.host-pic{ aspect-ratio:1/1; border:1px solid var(--line-soft); position:relative;
  background:repeating-linear-gradient(135deg, var(--espresso-2) 0 11px, var(--espresso-3) 11px 22px); }
.host-pic .cap{ position:absolute; top:12px; left:12px; font-family:"Space Mono",monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }

/* --- Latest (Weekly Roundup) --- */
.chip{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 14px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer;
  transition:all .15s; }
.chip:hover{ border-color:var(--green); color:var(--text); }
.chip.active{ background:var(--green); color:var(--espresso); border-color:var(--green); }

.feature-post{ display:grid; grid-template-columns:1fr 1.1fr; gap:36px; align-items:center;
  border:1px solid var(--line-soft); padding:24px; transition:border-color .15s, background .15s; }
.feature-post:hover{ border-color:var(--green); background:var(--espresso-2); }
.fp-cover{ aspect-ratio:16/10; position:relative; border:1px solid var(--line-soft);
  background:repeating-linear-gradient(135deg, var(--espresso-2) 0 12px, var(--espresso-3) 12px 24px); }
.fp-cover .cap{ position:absolute; top:14px; left:14px; font-family:"Space Mono",monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.fp-cover .badge{ position:absolute; top:0; right:0; background:var(--green); color:var(--espresso);
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; }
.fp-body .meta{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green); margin:0 0 12px; }
.fp-body h2{ font-family:"Newsreader",serif; font-weight:600; font-size:clamp(26px,3.4vw,40px); line-height:1.12; margin:0 0 14px; }
.fp-body p{ color:var(--muted); font-size:17px; margin:0 0 18px; max-width:60ch; }

.signup{ display:flex; gap:10px; }
.signup input{ font-family:"Space Mono",monospace; font-size:13px; padding:12px 16px; min-width:240px;
  background:rgba(0,0,0,.18); border:1px solid oklch(0.55 0.06 150); color:var(--cream); }
.signup input::placeholder{ color:oklch(0.82 0.06 130); }
.signup input:focus{ outline:none; border-color:var(--cream); }

/* --- History: timeline --- */
.timeline{ display:flex; flex-direction:column; }
.tl{ display:grid; grid-template-columns:160px 1fr; gap:32px; padding:30px 0;
  border-top:1px solid var(--line); }
.tl:last-child{ border-bottom:1px solid var(--line); }
.tl-year{ font-family:"Anton",sans-serif; font-size:clamp(40px,5vw,64px); line-height:0.9;
  color:var(--green); }
.tl.dark .tl-year{ color:var(--faint); }
.tl-body h3{ font-family:"Newsreader",serif; font-size:clamp(22px,2.6vw,30px); font-weight:600;
  margin:0 0 10px; }
.tl-body p{ margin:0; color:var(--muted); font-size:17px; max-width:64ch; }
.tl-body b{ color:var(--text); font-weight:600; }

/* --- Page-specific responsive --- */
@media (max-width:880px){
  .shows-feature{ grid-template-columns:1fr; }
  .shows-grid{ grid-template-columns:repeat(2,1fr); }
  .bf-grid{ grid-template-columns:repeat(2,1fr); }
  .feat, .feat.sm{ grid-template-columns:0.8fr 1.2fr; }
  .hosts .host{ grid-template-columns:1fr; }
  .host-pic{ max-width:200px; }
}
@media (max-width:760px){
  .feature-post{ grid-template-columns:1fr; }
  .signup{ width:100%; }
  .signup input{ flex:1; min-width:0; }
}
@media (max-width:720px){
  .tl{ grid-template-columns:1fr; gap:8px; }
  .timeline .tl-year{ font-size:40px; }
}
@media (max-width:560px){
  .shows-grid, .bf-grid{ grid-template-columns:1fr 1fr; }
}

/* =========================================================================
   Real cover artwork — overrides the placeholder stripes
   ========================================================================= */

.cover.has-art {
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: var(--espresso-2);
}

.bf-cover.has-art {
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: var(--cream-2);
}

/* The Documentary tag on the film cover sits above the artwork. */
.bf-cover.has-art .film-tag { z-index: 2; }

/* =========================================================================
   Real TPN logo — replaces the SVG/wordmark in header and footer.
   The logo image already contains the mark + wordmark.
   ========================================================================= */
.brand .logo {
	height: 44px;
	width: auto;
	display: block;
}
.site-foot .brand .logo {
	height: 56px;
}

.host-pic.has-art {
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: var(--espresso-2);
}