/* ============================================================
   SEEDS OF DISCONTENT — design system
   Agitprop / revolutionary print
   ============================================================ */

:root{
  /* ink & paper */
  --paper:      #ece2d0;
  --paper-2:    #e2d6bf;
  --ink:        #17120f;
  --ink-soft:   #443a32;
  --ink-faint:  #6b5e52;

  /* agit palette */
  --red:        #b31f26;
  --red-deep:   #8b1319;
  --ochre:      #d4912a;
  --indigo:     #21304f;

  /* type */
  --display: "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --body: "Spectral", Georgia, "Times New Roman", serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* metrics */
  --rule: 3px;
  --measure: 34rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --shadow-hard: 6px 6px 0 var(--ink);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background-color:var(--paper);
  background-image:
    /* paper grain */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  line-height:1.62;
  overflow-x:hidden;
}

/* ---------- type ---------- */

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  line-height:0.92;
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin:0 0 0.5em;
}
h1{ font-size:clamp(2.75rem, 9vw, 6.5rem); }
h2{ font-size:clamp(1.9rem, 5vw, 3.25rem); }
h3{ font-size:clamp(1.3rem, 2.6vw, 1.85rem); }
h4{ font-size:1.05rem; letter-spacing:0.06em; }

p{ margin:0 0 1.15em; }
p.lede{
  font-size:clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  line-height:1.5;
}

a{ color:var(--red-deep); text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover{ color:var(--ink); background:var(--ochre); }

strong{ font-weight:700; }
em{ font-style:italic; }

blockquote{
  margin:2rem 0;
  padding:0 0 0 1.25rem;
  border-left:var(--rule) solid var(--red);
  font-size:1.2rem;
  font-style:italic;
  color:var(--ink-soft);
}
blockquote cite{
  display:block;
  margin-top:.5rem;
  font-family:var(--mono);
  font-size:.72rem;
  font-style:normal;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

hr{
  border:0;
  border-top:var(--rule) solid var(--ink);
  margin:3rem 0;
}

::selection{ background:var(--ochre); color:var(--ink); }

/* ---------- utility ---------- */

.wrap{
  width:min(72rem, 100% - (var(--gutter) * 2));
  margin-inline:auto;
}
.wrap--narrow{ width:min(46rem, 100% - (var(--gutter) * 2)); }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 .9rem;
  display:flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::after{
  content:"";
  flex:1;
  height:2px;
  background:var(--ink);
  opacity:.25;
}

.stamp{
  display:inline-block;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.35rem .6rem;
  border:2px solid currentColor;
  color:var(--red);
}

.skip{
  position:absolute; left:-9999px;
  background:var(--ink); color:var(--paper);
  padding:.75rem 1rem; z-index:200;
}
.skip:focus{ left:.5rem; top:.5rem; }

:focus-visible{ outline:3px solid var(--indigo); outline-offset:3px; }

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  font-family:var(--display);
  font-size:1rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.85rem 1.5rem;
  border:var(--rule) solid var(--ink);
  background:var(--red);
  color:var(--paper);
  box-shadow:var(--shadow-hard);
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover{
  background:var(--ink);
  color:var(--paper);
  transform:translate(3px,3px);
  box-shadow:3px 3px 0 var(--ink);
}
.btn:active{ transform:translate(6px,6px); box-shadow:0 0 0 var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }

/* ---------- masthead ---------- */

.masthead{
  border-bottom:var(--rule) solid var(--ink);
  background:var(--paper);
  position:sticky;
  top:0;
  z-index:60;
}
.masthead__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:.85rem 0;
  flex-wrap:wrap;
}
.wordmark{
  font-family:var(--display);
  font-size:1.15rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:.6rem;
  line-height:1;
}
.wordmark:hover{ background:none; color:var(--red); }
.wordmark svg{ width:1.9rem; height:1.9rem; flex:none; }

.nav{
  display:flex;
  gap:1.4rem;
  align-items:center;
  flex-wrap:wrap;
}
.nav a{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.nav a:hover{ background:none; border-bottom-color:var(--red); color:var(--red); }
.nav a[aria-current="page"]{ border-bottom-color:var(--ink); }

/* ---------- hero ---------- */

.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:clamp(3rem, 8vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
  overflow:hidden;
  border-bottom:var(--rule) solid var(--ink);
}
.hero::before{
  /* sunburst rays */
  content:"";
  position:absolute;
  inset:-60% -20%;
  background:repeating-conic-gradient(from 0deg at 50% 60%,
    rgba(212,145,42,.16) 0deg 6deg, transparent 6deg 12deg);
  pointer-events:none;
}
.hero::after{
  /* halftone fade at the bottom */
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:120px;
  background-image:radial-gradient(var(--paper) 1.1px, transparent 1.2px);
  background-size:8px 8px;
  -webkit-mask-image:linear-gradient(transparent, #000);
  mask-image:linear-gradient(transparent, #000);
  opacity:.5;
  pointer-events:none;
}
.hero__inner{ position:relative; z-index:2; }
.hero .eyebrow{ color:var(--ochre); }
.hero .eyebrow::after{ background:var(--paper); opacity:.35; }
.hero h1{
  color:var(--paper);
  max-width:14ch;
  text-shadow:5px 5px 0 var(--red);
}
.hero h1 .accent{ color:var(--ochre); text-shadow:5px 5px 0 var(--ink); }
.hero .lede{
  max-width:48ch;
  color:#ded3c0;
}
.hero__actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:2rem;
}
.hero .btn--ghost{ color:var(--paper); border-color:var(--paper); box-shadow:6px 6px 0 var(--red); }
.hero .btn--ghost:hover{ background:var(--paper); color:var(--ink); }

.hero__meta{
  margin-top:2.5rem;
  display:flex;
  gap:1.75rem;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a89a86;
}

/* ---------- ticker ---------- */

.ticker{
  background:var(--red);
  color:var(--paper);
  border-bottom:var(--rule) solid var(--ink);
  overflow:hidden;
  padding:.55rem 0;
}
.ticker__track{
  display:flex;
  gap:2.5rem;
  width:max-content;
  animation:slide 46s linear infinite;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  white-space:nowrap;
}
.ticker__track span::before{ content:"✦"; margin-right:2.5rem; opacity:.6; }
@keyframes slide{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation:none; }
}

/* ---------- sections ---------- */

.section{ padding:clamp(3rem, 7vw, 5.5rem) 0; }
.section--rule{ border-top:var(--rule) solid var(--ink); }
.section--ink{ background:var(--ink); color:var(--paper); }
.section--ink h2, .section--ink h3{ color:var(--paper); }
.section--ink .eyebrow{ color:var(--ochre); }
.section--ink .eyebrow::after{ background:var(--paper); }
.section--indigo{ background:var(--indigo); color:var(--paper); }
.section--indigo h2{ color:var(--paper); }
.section--indigo .eyebrow{ color:var(--ochre); }
.section--indigo .eyebrow::after{ background:var(--paper); }

.section__head{ margin-bottom:2.5rem; max-width:var(--measure); }

/* ---------- feature (latest episode) ---------- */

.feature{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(1.5rem, 4vw, 3.5rem);
  align-items:start;
}
@media (max-width:820px){ .feature{ grid-template-columns:1fr; } }

.plate{
  position:relative;
  border:var(--rule) solid var(--ink);
  background:var(--paper-2);
  box-shadow:var(--shadow-hard);
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.plate svg{ width:100%; height:100%; display:block; }
.plate__no{
  position:absolute;
  top:0; left:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.14em;
  padding:.35rem .6rem;
  z-index:2;
}

.feature__body h3{ font-size:clamp(1.7rem,4vw,2.6rem); margin-bottom:.35rem; }
.epmeta{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:1.1rem;
}
.section--ink .epmeta{ color:#a89a86; }
.section--ink .stamp, .section--indigo .stamp, .pagehead .stamp{ color:var(--ochre); }

/* audio player slot */
.player{
  border:var(--rule) solid var(--ink);
  background:var(--paper);
  padding:1rem 1.15rem;
  margin:1.5rem 0;
}
.section--ink .player{ border-color:var(--paper); background:#221b17; }
.player audio{ width:100%; display:block; }
.player__note{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:.75rem 0 0;
}
.section--ink .player__note{ color:#a89a86; }

/* ---------- episode list ---------- */

.eplist{ list-style:none; margin:0; padding:0; border-top:var(--rule) solid var(--ink); }
.eplist li{ border-bottom:var(--rule) solid var(--ink); }
.eprow{
  display:grid;
  grid-template-columns:5.5rem minmax(0,1fr) auto;
  gap:clamp(1rem,3vw,2rem);
  align-items:center;
  padding:1.6rem 0;
  text-decoration:none;
  color:inherit;
}
.eprow:hover{ background:var(--ochre); }
.eprow:hover .eprow__no{ color:var(--ink); }
.eprow__no{
  font-family:var(--display);
  font-size:2.75rem;
  line-height:1;
  color:var(--red);
}
.eprow__title{ font-family:var(--display); font-size:clamp(1.25rem,3vw,1.9rem); text-transform:uppercase; line-height:1; margin:0 0 .45rem; }
.eprow__dek{ margin:0; color:var(--ink-soft); font-size:.97rem; }
.eprow__go{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.eprow--soon{ opacity:.62; }
.eprow--soon:hover{ background:transparent; cursor:default; }
@media (max-width:680px){
  .eprow{ grid-template-columns:3.25rem minmax(0,1fr); }
  .eprow__no{ font-size:1.9rem; }
  .eprow__go{ display:none; }
}

/* ---------- card grid ---------- */

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr));
  gap:1.5rem;
}
.card{
  border:var(--rule) solid var(--ink);
  background:var(--paper);
  padding:1.5rem;
  box-shadow:var(--shadow-hard);
}
.card h3{ margin-bottom:.5rem; }
.card p:last-child{ margin-bottom:0; }
.card__no{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--red);
  display:block;
  margin-bottom:.6rem;
}

/* ---------- subscribe row ---------- */

.subs{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.sub{
  display:flex;
  align-items:center;
  gap:.65rem;
  border:var(--rule) solid currentColor;
  padding:.75rem 1.1rem;
  text-decoration:none;
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--paper);
  background:transparent;
}
.sub:hover{ background:var(--ochre); color:var(--ink); }
.sub svg{ width:1.15rem; height:1.15rem; flex:none; }
.sub[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

/* ---------- forms ---------- */

.form{ display:flex; gap:.75rem; flex-wrap:wrap; max-width:34rem; }
.form input[type="email"], .form input[type="text"], .form textarea{
  flex:1 1 16rem;
  font-family:var(--body);
  font-size:1rem;
  padding:.8rem .9rem;
  border:var(--rule) solid var(--ink);
  background:var(--paper);
  color:var(--ink);
}
.form textarea{ flex-basis:100%; min-height:9rem; resize:vertical; }
.form button{ cursor:pointer; font-family:var(--display); }
.form__note{
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--ink-faint);
  margin-top:.9rem;
}
.section--indigo .form__note, .section--ink .form__note{ color:#b3a794; }
.section--indigo .form input, .section--ink .form input,
.section--indigo .form textarea, .section--ink .form textarea{ border-color:var(--paper); }

/* ---------- show notes ---------- */

.notes{ max-width:none; }
.notes h2{ margin-top:2.75rem; }
.notes h3{ margin-top:2rem; }
.notes ul, .notes ol{ padding-left:1.25rem; margin:0 0 1.25rem; }
.notes li{ margin-bottom:.5rem; }

.timeline{ list-style:none; padding:0; margin:2rem 0; border-left:var(--rule) solid var(--red); }
.timeline li{ padding:0 0 1.5rem 1.25rem; position:relative; margin:0; }
.timeline li::before{
  content:"";
  position:absolute;
  left:-9px; top:.55rem;
  width:15px; height:15px;
  background:var(--red);
  border:3px solid var(--paper);
}
.timeline time{
  display:block;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.14em;
  color:var(--red);
  margin-bottom:.2rem;
}

.sources{ list-style:none; padding:0; margin:0; }
.sources li{
  padding:.85rem 0;
  border-bottom:1px solid rgba(23,18,15,.2);
  font-size:.95rem;
}
.sources li:first-child{ border-top:1px solid rgba(23,18,15,.2); }

.pagenav{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  border-top:var(--rule) solid var(--ink);
  padding-top:1.5rem;
  margin-top:3rem;
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- page header (interior pages) ---------- */

.pagehead{
  background:var(--ink);
  color:var(--paper);
  padding:clamp(2.5rem,6vw,4.5rem) 0;
  border-bottom:var(--rule) solid var(--ink);
  position:relative;
  overflow:hidden;
}
.pagehead::before{
  content:"";
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(-45deg,
    rgba(179,31,38,.28) 0 14px, transparent 14px 34px);
  pointer-events:none;
}
.pagehead__inner{ position:relative; z-index:2; }
.pagehead h1{ color:var(--paper); margin-bottom:.4rem; }
.pagehead .eyebrow{ color:var(--ochre); }
.pagehead .eyebrow::after{ background:var(--paper); opacity:.4; }
.pagehead p{ max-width:52ch; color:#ded3c0; margin-bottom:0; }

/* ---------- footer ---------- */

.footer{
  background:var(--ink);
  color:#a89a86;
  padding:3.5rem 0 2.5rem;
  border-top:var(--rule) solid var(--ink);
  font-family:var(--mono);
  font-size:.76rem;
  letter-spacing:.06em;
}
.footer a{ color:var(--paper); text-decoration:none; border-bottom:1px solid rgba(236,226,208,.35); }
.footer a:hover{ background:var(--ochre); color:var(--ink); }
.footer__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(12rem,1fr));
  gap:2rem;
  margin-bottom:2.5rem;
}
.footer h4{ color:var(--paper); font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; margin-bottom:1rem; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin-bottom:.6rem; }
.footer__base{
  border-top:1px solid rgba(236,226,208,.2);
  padding-top:1.5rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* ---------- print ---------- */
@media print{
  .masthead,.ticker,.footer,.hero__actions{ display:none; }
  body{ background:#fff; color:#000; }
}

/* ---------- small screens ---------- */
@media (max-width:600px){
  .hero h1{ text-shadow:3px 3px 0 var(--red); max-width:none; }
  .hero h1 .accent{ text-shadow:3px 3px 0 var(--ink); }
  :root{ --shadow-hard:4px 4px 0 var(--ink); }
  .masthead__inner{ padding:.7rem 0; }
  .nav{ gap:1rem; width:100%; }
  .hero__meta{ gap:.4rem 1.25rem; }
  .btn{ font-size:.95rem; padding:.75rem 1.15rem; }
}