:root {
  color-scheme: light;
  --bg: #f9f8f7;
  --paper: #ffffff;
  --ink: #050505;
  --muted: #5e5b57;
  --faint: #8a8681;
  --sep: #b7b2ac;
  --line: rgba(5, 5, 5, 0.08);
  --soft: #f3f1ef;
  --fill: #050505;
  --on-fill: #fcfcfc;
  --fill-hover: #222;
  --track: #eceae6;
  --quote: #ddd9d4;
  --accent: #050505;
  --heart: #f87171;
  --measure: 42rem;
  --radius: 22px;
  --ring: 0 0 0 1px rgba(5, 5, 5, 0.06);
  --shadow: 0 1px 2px rgba(20, 16, 12, 0.04), 0 12px 32px rgba(20, 16, 12, 0.06);
  --float: 0 10px 36px rgba(20, 16, 12, 0.12);
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Old Smash Notes night, from the 2021 site. Page and cards are #0e2439,
   header, footer, and the player are #0e1b2e, gold is the accent.
   data-theme is set only after a manual choice. Until then a dark OS
   uses the same tokens, and a stored light choice keeps the day theme. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e2439;
  --paper: #0e2439;
  --ink: rgba(204, 209, 217, 0.7);
  --muted: #848c97;
  --faint: #7e8a9c;
  --sep: #1f364d;
  --line: #1f364d;
  --soft: #1f364d;
  --fill: #d6a22d;
  --on-fill: #37404a;
  --fill-hover: #edc835;
  --track: #1f364d;
  --quote: rgba(214, 162, 45, 0.45);
  --accent: #d6a22d;
  --heart: #e7a3a3;
  --ring: 0 0 0 1px #1f364d;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 34px rgba(0, 0, 0, 0.32);
  --float: 0 12px 36px rgba(0, 0, 0, 0.46);
  & p.lede .mark { background-image: linear-gradient(var(--accent), var(--accent)); }
  & .brand img { box-shadow: 0 0 0 1px #1f364d; }
  & ::selection { background: rgba(214, 162, 45, 0.32); color: var(--ink); }
  & header.site { background: #0e1b2e; border-bottom: 3px solid #1f364d; }
  & footer.site { background: #0e1b2e; border-top: 3px solid #1f364d; }
  & .player-in, & .tx-player { background: #0e1b2e; box-shadow: inset 0 3px 0 #1f364d, 0 0 0 1px #1f364d; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e2439;
    --paper: #0e2439;
    --ink: rgba(204, 209, 217, 0.7);
    --muted: #848c97;
    --faint: #7e8a9c;
    --sep: #1f364d;
    --line: #1f364d;
    --soft: #1f364d;
    --fill: #d6a22d;
    --on-fill: #37404a;
    --fill-hover: #edc835;
    --track: #1f364d;
    --quote: rgba(214, 162, 45, 0.45);
    --accent: #d6a22d;
    --heart: #e7a3a3;
    --ring: 0 0 0 1px #1f364d;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 34px rgba(0, 0, 0, 0.32);
    --float: 0 12px 36px rgba(0, 0, 0, 0.46);
    & p.lede .mark { background-image: linear-gradient(var(--accent), var(--accent)); }
    & .brand img { box-shadow: 0 0 0 1px #1f364d; }
    & ::selection { background: rgba(214, 162, 45, 0.32); color: var(--ink); }
    & header.site { background: #0e1b2e; border-bottom: 3px solid #1f364d; }
    & footer.site { background: #0e1b2e; border-top: 3px solid #1f364d; }
    & .player-in, & .tx-player { background: #0e1b2e; box-shadow: inset 0 3px 0 #1f364d, 0 0 0 1px #1f364d; }
  }
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
}

.skip:focus { left: 0.75rem; top: 0.75rem; z-index: 6; }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

header.site,
main,
footer.site {
  width: min(76rem, calc(100% - 3.5rem));
  margin: 0 auto;
}

header.site {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 1.15rem;
  padding-bottom: 0.35rem;
  position: sticky;
  top: 0;
  z-index: 4;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-weight: 720;
  letter-spacing: -0.045em;
  font-size: 1.35rem;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.theme-toggle {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  appearance: none;
}

.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-sun { display: none; }

header.site .head-end {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

body.front .theme-toggle,
body.paper .theme-toggle { color: #6d6a66; }

:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
}

header form.search { display: flex; gap: 0.4rem; align-items: center; }

header form.search input,
header form.search button,
.player button,
.topics a,
.pager a,
a.pill,
.sponsor-kicker,
.sponsor-card strong,
.sponsor-desc,
.meta,
footer.site,
.pager,
.listen figcaption,
.time,
.player {
  font-family: var(--sans);
}

header form.search input,
header form.search button {
  font-size: 14px;
  line-height: 1.2;
  border: 0;
  border-radius: 999px;
}

header form.search input {
  width: 13.5rem;
  padding: 0.5rem 0.9rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--ring);
}

header form.search input::placeholder { color: var(--faint); }

header form.search button {
  padding: 0.5rem 0.85rem;
  background: var(--fill);
  color: var(--on-fill);
  font-weight: 600;
  cursor: pointer;
}

main { padding-top: 1.5rem; padding-bottom: 2.5rem; }

body.embed main {
  width: min(var(--measure), calc(100% - 2.5rem));
  padding-top: 0.85rem;
  padding-bottom: 1.5rem;
}
body.embed h1 { font-size: 1.45rem; margin-bottom: 0.45rem; }

/* The cover stays out of the wide player. A phone shows it once, above the title. */
body.embed .embed-cover { display: none; }

@media (max-width: 640px) {
  body.embed .embed-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }

  body.embed .embed-cover {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 18px;
    object-fit: cover;
    background: var(--soft);
    box-shadow: var(--ring), var(--shadow);
  }

  /* Every note repeats the same artwork, and Share plus Transcript
     leave the title a one-letter column. The play button stays. */
  body.embed .notes li { --art: calc(1.02rem * 1.3); }
  body.embed .notes .thumb { display: none; }
  body.embed .notes li.current .sharerow,
  body.embed .notes li.current a.txrow,
  body.embed .player button[data-act="share"],
  body.embed .player a.player-tx { display: none; }
}

code.path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

pre.embed-code {
  margin: 0.5rem 0 1.25rem;
  padding: 0.85rem 1rem;
  overflow: auto;
  background: var(--soft);
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.45;
}

pre.embed-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

iframe.embed-frame {
  width: 100%;
  height: 500px;
  border: 2px solid rgba(215, 223, 249, 0.89);
  border-radius: 12px;
  background: var(--bg);
}

h1 {
  margin: 0 0 1rem;
  font-size: 2.15rem;
  line-height: 1.12;
  letter-spacing: -0.038em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

h1 + p.lede { margin-top: -0.55rem; }

p.lede .mark {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  background-position: 0 1.05em;
}

h2 {
  margin: 1.75rem 0 0.55rem;
  font: 560 0.95rem/1.3 var(--sans);
  letter-spacing: -0.01em;
  color: var(--muted);
}

p.lede {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.02rem;
}

.answer p {
  margin: 0 0 0.85rem;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: -0.014em;
}

ol.segments {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
}

ol.segments > li {
  margin: 0;
  padding: 1.2rem 0 1.3rem;
  border-top: 1px solid var(--line);
}

ol.segments > li:first-child {
  border-top: 0;
  padding-top: 0.15rem;
}

/* The note the listener clicked stays marked for the rest of the episode.
   The card grows into the gutter by the same amount as its padding, so the
   words stay on the same line as the other segments. */
ol.segments > li.current {
  --segment-pad: 0.9rem;
  margin-left: calc(var(--segment-pad) * -1);
  margin-right: calc(var(--segment-pad) * -1);
  padding-left: var(--segment-pad);
  padding-right: var(--segment-pad);
  background: var(--paper);
  border-radius: 16px;
  border-top-color: transparent;
  box-shadow: inset 3px 0 0 var(--fill), var(--ring);
}

ol.segments > li.current + li {
  border-top-color: transparent;
}

.segment-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.segments .text { flex: 1 1 14rem; }

.segments h2 {
  margin: 0;
  font: 650 1.28rem/1.28 var(--sans);
  letter-spacing: -0.022em;
  color: var(--ink);
}

.segments h2 a {
  color: inherit;
  text-decoration: none;
}

.segments h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.segments .meta { margin: 0.28rem 0 0; }

.segments .playrow { margin-top: 0.15rem; }

.segments .sharerow {
  display: inline-flex;
  margin-top: 0.1rem;
}

.segments .answer { margin-top: 0.8rem; }

.segments .answer p {
  font-size: 1.08rem;
  line-height: 1.55;
}

.segments .answer p:last-child { margin-bottom: 0; }

.key-moments {
  margin: 0.2rem 0 1.35rem;
  padding: 1.05rem 1.05rem 0.85rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--ring), var(--shadow);
}

.key-moments h2 {
  margin: 0 0 0.85rem;
  font: 650 1.38rem/1.25 var(--sans);
  letter-spacing: -0.028em;
  color: var(--ink);
}

ol.moment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.moment-list li + li { border-top: 1px solid var(--line); }

.moment-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.72rem 0.05rem;
  color: inherit;
  text-decoration: none;
}

.moment-list .q {
  flex: 1 1 auto;
  min-width: 0;
  font: 600 1.12rem/1.3 var(--sans);
  letter-spacing: -0.018em;
}

.moment-list .time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.95rem;
}

.moment-list a:hover .q {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.moment-episode {
  margin: 0.7rem 0 0.1rem;
  font-size: 0.98rem;
}

.moment-episode a {
  color: inherit;
  font-weight: 650;
}

h2.tx-head { margin-top: 0.35rem; }

p.tx-owner {
  margin: 1.15rem 0 0.35rem;
  font: 600 0.95rem/1.3 var(--sans);
  color: var(--muted);
}

p.tx-owner a { color: inherit; }

.answer p.who {
  margin: 1.15rem 0 0.3rem;
  font: 600 0.82rem/1.3 var(--sans);
  letter-spacing: 0.01em;
  color: var(--muted);
}

.answer > p.who:first-child { margin-top: 0; }

.answer p.here {
  background: var(--soft);
  box-shadow: inset 3px 0 0 var(--fill);
  border-radius: 12px;
  padding: 0.4rem 0.7rem;
  scroll-margin: 4rem;
}

.answer .sponsor-slot {
  margin: 1.35rem 0 1.5rem;
}

.answer .sponsor-slot .sponsor { margin: 0; }

.topics { margin: 0 0 1rem; }

.topics details { margin: 0; }

.topics summary {
  display: none;
}

.topics a,
.pager a,
a.pill {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  border-radius: 999px;
}

@media (min-width: 641px) {
  /* The summary stays hidden in the base rule so phones can keep their own
     full-width menu. From 641px up it is a small disclosure, and the list
     stays closed until it is opened. Forcing display on the list would
     override the closed <details> and show the same links twice. */
  .topics summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: fit-content;
    padding: 0.38rem 0.85rem;
    list-style: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    background: var(--paper);
    border-radius: 999px;
    box-shadow: var(--ring);
  }

  .topics summary::-webkit-details-marker { display: none; }

  .topics summary::marker { content: none; }

  .topics summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
  }

  .topics details[open] summary::after { transform: rotate(-135deg) translateY(0); }

  .topics details:not([open]) > .topic-list { display: none; }

  .topics details[open] > .topic-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    width: min(24rem, 100%);
    margin-top: 0.45rem;
    padding: 0.55rem;
    background: var(--paper);
    border-radius: 16px;
    box-shadow: var(--ring), var(--shadow);
  }
}

.topics a {
  padding: 0.32rem 0.72rem;
  background: var(--paper);
  box-shadow: var(--ring);
  font-size: 13px;
  font-weight: 550;
}

.topics a:hover {
  background: var(--fill);
  color: var(--on-fill);
}

ul.notes {
  --art: 44px;
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--ring), var(--shadow);
}

.notes li {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  border-radius: 16px;
  padding: 0.15rem 0.45rem 0.15rem 0.3rem;
}

.notes li + li { margin-top: 0.1rem; }

.notes li.on { background: var(--soft); }

.notes a {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.25rem;
  text-decoration: none;
  color: inherit;
}

.notes li:not(:has(img)) { --art: calc(1.02rem * 1.3); }

.playrow,
.playgap {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 2rem;
  height: 2rem;
  margin-top: calc(0.55rem + (var(--art) - 2rem) / 2);
}

.playrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font: 11px/1 var(--sans);
  cursor: pointer;
}

.playrow span:not(.play-word) {
  display: block;
  width: 0;
  height: 0;
  font-size: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
  margin-left: 2px;
}

.playrow[aria-pressed="true"] {
  background: var(--fill);
  color: var(--on-fill);
}

.playrow[aria-pressed="true"] span:not(.play-word) {
  width: 8px;
  height: 10px;
  margin-left: 0;
  border-width: 0;
  background:
    linear-gradient(currentColor, currentColor) left center / 2.5px 10px no-repeat,
    linear-gradient(currentColor, currentColor) right center / 2.5px 10px no-repeat;
}

.playrow .play-word {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  background: none;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.play-now {
  width: auto;
  height: auto;
  margin-top: 0;
  align-self: center;
  gap: 0.55rem;
  padding: 0.78rem 1.2rem 0.78rem 1.02rem;
  background: var(--fill);
  color: var(--on-fill);
}

.play-now:hover { background: var(--fill-hover); }

.play-now span:not(.play-word) { border-width: 7px 0 7px 12px; }

.play-now[aria-pressed="true"] {
  background: var(--fill);
  color: var(--on-fill);
}

.play-now[aria-pressed="true"] span:not(.play-word) {
  width: 12px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) left center / 3.5px 14px no-repeat,
    linear-gradient(currentColor, currentColor) right center / 3.5px 14px no-repeat;
}

.playrow.is-loading { cursor: progress; }

.playrow.is-loading:not(.play-now) {
  width: auto;
  gap: 0.4rem;
  padding: 0 0.75rem;
}

.playrow.is-loading span:not(.play-word) {
  width: 0.72rem;
  height: 0.72rem;
  margin-left: 0;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sn-spin 0.7s linear infinite;
}

.play-now.is-loading span:not(.play-word) { display: none; }

.playrow.is-loading:not(.play-now)::after {
  content: "Loading...";
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

@keyframes sn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .playrow.is-loading span:not(.play-word) { animation: none; }
}

.segment-play {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem 0.85rem;
  margin: -0.15rem 0 1.35rem;
}

.segment-play .time {
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 680;
}

.segment-play .sharerow { display: inline-flex; }

.sharerow {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  margin-left: 0.1rem;
  padding: 0.4rem 0.65rem;
  border: 0;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font: 600 12px/1 var(--sans);
  cursor: pointer;
  white-space: nowrap;
}

.notes li.current .sharerow { display: inline-flex; }

.notes li.on .sharerow { background: var(--paper); }

.notes a.txrow {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: 0;
  margin-left: 0.1rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: var(--soft);
  color: var(--ink);
  font: 600 12px/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
}

.notes li.current a.txrow { display: inline-flex; }

.notes li.on a.txrow { background: var(--paper); }

.notes .text { min-width: 0; }

.notes a:hover .q { text-decoration: underline; text-underline-offset: 3px; }
.notes a[aria-current="page"] .q { font-weight: 650; }

/* Person pages group notes under one episode header. Each note is a
   stacked card so the question is never a column beside the answer. */
.episode-notes { margin: 0 0 1.15rem; }

.episode-notes .episode-label {
  margin: 0 0 0.45rem;
  font: 600 0.92rem/1.35 var(--sans);
  letter-spacing: -0.01em;
  color: var(--muted);
}

.episode-notes .episode-label a {
  color: inherit;
  text-decoration: none;
}

.episode-notes .episode-label a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

ul.notes.cards {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

ul.notes.cards > li {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  min-width: 0;
  margin: 0;
  padding: 0.95rem 1rem 0.85rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--ring), var(--shadow);
}

ul.notes.cards > li + li { margin-top: 0; }

ul.notes.cards .note-q {
  margin: 0;
  max-width: 70ch;
  font: 650 1.22rem/1.35 var(--sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}

ul.notes.cards .note-q a {
  display: inline;
  flex: none;
  gap: 0;
  padding: 0;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

ul.notes.cards .note-q a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

ul.notes.cards .answer {
  max-width: 70ch;
  margin: 0;
}

ul.notes.cards .answer p {
  font-size: 1.05rem;
  line-height: 1.65;
}

ul.notes.cards .answer p:last-child { margin-bottom: 0; }

ul.notes.cards .note-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.45rem;
  margin: 0.1rem 0 0;
}

ul.notes.cards .playrow,
ul.notes.cards .playgap {
  width: 1.7rem;
  height: 1.7rem;
  margin-top: 0;
}

ul.notes.cards .sharerow,
ul.notes.cards a.txrow {
  display: inline-flex;
  margin-left: 0;
}

ul.notes.cards li.on .sharerow,
ul.notes.cards li.on a.txrow {
  background: var(--bg);
}

.time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.notes img,
.thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--soft);
}

.text { display: flex; flex-direction: column; min-width: 0; gap: 0.12rem; }
.q { font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.015em; overflow-wrap: anywhere; }

.meta,
footer.site,
.pager,
.listen figcaption {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

p.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.45rem;
}

p.grokipedia { margin: 0.15rem 0 1rem; }

.meta a,
footer.site a {
  color: var(--ink);
  text-decoration: none;
}

.meta a:hover,
footer.site a:hover { text-decoration: underline; text-underline-offset: 3px; }

nav.crumbs { margin: 0 0 0.85rem; }
nav.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
nav.crumbs li { display: flex; align-items: center; gap: 0.35rem; }
nav.crumbs li + li::before { content: ">"; color: var(--sep); }
nav.crumbs a { color: var(--ink); text-decoration: none; }
nav.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

.listen {
  margin: 1.35rem 0 0;
  padding: 0.9rem;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--ring);
}

.listen figcaption { margin-bottom: 0.45rem; }
audio { width: 100%; display: block; }

.pager { display: flex; gap: 0.45rem; margin-top: 0.9rem; }

.pager a {
  padding: 0.42rem 0.8rem;
  background: var(--paper);
  box-shadow: var(--ring);
  font-size: 14px;
  font-weight: 560;
}

.pager a:hover { background: var(--fill); color: var(--on-fill); }

a.pill {
  margin-top: 0.4rem;
  padding: 0.55rem 0.95rem;
  background: var(--fill);
  color: var(--on-fill);
  font-size: 14px;
  font-weight: 600;
}

a.pill:hover { background: var(--fill-hover); }

button.pill {
  display: inline-flex;
  align-items: center;
  margin-top: 0.4rem;
  padding: 0.55rem 0.95rem;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--on-fill);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

button.pill:hover { background: var(--fill-hover); }

.empty { color: var(--muted); }

p.audio-gone {
  margin: 0.4rem 0 1rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.meta .audio-gone { font-size: inherit; }

#player-gone { margin: 0.35rem 0 0; }

.sponsor { margin: 1.35rem 0 0; }

.sponsor-lead .sponsor { margin: 0 0 1.15rem; }

.notes li.sponsor-slot {
  display: block;
  margin: 0.35rem 0.25rem;
  padding: 0;
}

.notes li.sponsor-slot .sponsor { margin: 0; }

.notes li.sponsor-slot .sponsor-card {
  box-shadow: none;
  background: var(--bg);
}

.sponsor-kicker {
  margin: 0 0 0.45rem;
  font-size: 13px;
  font-weight: 550;
  color: var(--muted);
}

.sponsor-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--ring), var(--shadow);
  text-decoration: none;
  color: inherit;
}

.sponsor-card img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  flex: none;
  border-radius: 14px;
  background: var(--soft);
}

.sponsor-copy { min-width: 0; }

.sponsor-card strong {
  display: block;
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.sponsor-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
}

aside.note-sponsor.sponsor {
  margin: 1rem 0 0;
  max-width: 36rem;
}

aside.note-sponsor .sponsor-card {
  width: 100%;
  min-height: 7.25rem;
  box-sizing: border-box;
  align-items: flex-start;
}

.sponsor-cta {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.sponsor-board {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.sponsor-board-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--ring), var(--shadow);
  text-decoration: none;
  color: inherit;
}

.sponsor-board-card img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  flex: none;
  border-radius: 14px;
  background: var(--soft);
}

.sponsor-board-card .sponsor-copy { flex: 1; }

.sponsor-board-card strong {
  display: block;
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.sponsor-board-stats {
  display: flex;
  gap: 0.85rem;
  flex: none;
  font-size: 12px;
  color: var(--muted);
}

.ad-report {
  width: 100%;
  border-collapse: collapse;
  margin: 0.4rem 0 1.2rem;
  font-size: 14px;
}

.ad-report th,
.ad-report td {
  text-align: left;
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.ad-report th {
  color: var(--muted);
  font-weight: 550;
}

.note-ad-actions form {
  display: inline;
}

.note-ad-actions button {
  font: inherit;
  margin-right: 0.35rem;
}

.sponsor-board-stats b {
  display: block;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink);
}

@media (max-width: 640px) {
  .sponsor-board-card { flex-wrap: wrap; }
  .sponsor-board-card img { width: 100%; height: 140px; }
  .sponsor-board-stats { width: 100%; }
}

.post {
  margin-top: 1.15rem;
  font-size: 1.05rem;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.post h2,
.post h3,
.post h4,
.post p,
.post ul,
.post ol,
.post blockquote,
.post pre { white-space: normal; }

.post h2,
.post h3,
.post h4 {
  margin: 1.35rem 0 0.4rem;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.post h2 { font-size: 1.28rem; }
.post h3, .post h4 { font-size: 1.05rem; }

.post a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.post iframe {
  display: block;
  width: min(100%, 560px);
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0.9rem 0;
  border: 0;
  border-radius: 16px;
  background: var(--soft);
}

.post blockquote {
  margin: 0.85rem 0;
  padding: 0.15rem 0 0.15rem 0.85rem;
  border-left: 2px solid var(--quote);
}

.post code,
.post pre {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.92em;
  white-space: pre-wrap;
}

.post ul, .post ol { padding-left: 1.2rem; }

/* Archive and a single issue stay in the same left column as the letter
   and a note. Email HTML is left-aligned here and borrows the page colors,
   so a stored letter does not sit in a centered white card. */
.updates-page,
article.update {
  text-align: left;
}

.updates {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.updates a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  padding: 1.05rem 0 1.1rem;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-align: left;
  text-decoration: none;
}

.updates a:hover .q {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.updates .q {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 580;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.updates .meta { font-size: 0.92rem; }

.updates .desc {
  font-size: 1.02rem;
  line-height: 1.45;
}

.post.issue {
  white-space: normal;
  text-align: left;
  color: var(--ink);
}

.post.issue table {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-collapse: collapse;
}

.post.issue td,
.post.issue th {
  text-align: left !important;
  background: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The letter masthead is a two-cell row, so the date sat in the middle.
   Stack only that table. A :has() on any descendant would also match the
   outer card and put each note's mark on its own line. */
.post.issue table:has(> tbody > tr > td[align="right"]),
.post.issue table:has(> tbody > tr > td[align="right"]) > tbody,
.post.issue table:has(> tbody > tr > td[align="right"]) > tbody > tr,
.post.issue table:has(> tbody > tr > td[align="right"]) > tbody > tr > td {
  display: block;
  width: 100% !important;
  text-align: left !important;
}

.post.issue div,
.post.issue span,
.post.issue p,
.post.issue a {
  font-family: inherit !important;
}

.post.issue [style*="color:#111"],
.post.issue [style*="color:#222"],
.post.issue [style*="color:#333"],
.post.issue [style*="color:#444"],
.post.issue [style*="color:#1a1a1a"] {
  color: var(--ink) !important;
}

.post.issue [style*="color:#888"],
.post.issue [style*="color:#777"],
.post.issue [style*="color:#999"],
.post.issue [style*="color:#555"] {
  color: var(--muted) !important;
}

.post.issue [style*="background:#fff"],
.post.issue [style*="background:#ffffff"],
.post.issue [style*="background:#f3f1ee"],
.post.issue [style*="background:#fafafa"] {
  background: transparent !important;
}

.post.issue div[style*="display:none"],
.post.issue div[style*="display: none"] {
  display: none !important;
}

.post.issue img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

.post.issue div[style*="font-size:22px"],
.post.issue div[style*="font-size:24px"] {
  font-size: 1.35rem !important;
  font-weight: 580 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  margin: 1.15rem 0 0.35rem !important;
}

.post.issue div[style*="font-size:12px"][style*="uppercase"] {
  font-size: 0.78rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.08em !important;
}

.post.issue a[style*="background:#111"],
.post.issue a[style*="background:#000"] {
  display: inline-flex !important;
  align-items: center;
  margin: 0.35rem 0 0;
  padding: 0.72rem 1.1rem !important;
  border-radius: 999px !important;
  background: var(--fill) !important;
  color: var(--on-fill) !important;
  font-weight: 650;
  text-decoration: none !important;
}

.post.issue a[style*="background:#111"]:hover,
.post.issue a[style*="background:#000"]:hover {
  background: var(--fill-hover) !important;
  color: var(--on-fill) !important;
}

footer.site {
  padding-top: 1.35rem;
  padding-bottom: 0.4rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
}

.credits { margin: 0.7rem 0 0; }

.newsletter {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.7rem;
  width: 100%;
  margin: 0 0 1.35rem;
  padding: 1rem 1rem 1.05rem 1.2rem;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: var(--ring), var(--shadow);
}

.newsletter::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  bottom: 0.85rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.newsletter-label {
  flex: 1 0 100%;
  margin: 0;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.newsletter-choice {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  min-width: 0;
  margin: 0;
}

.newsletter-choice a.pill { margin-top: 0; }

/* footer.site a is more specific than a.pill, so the label matched the black fill. */
.newsletter-choice a.pill,
footer.site a.pill {
  background: var(--fill);
  color: var(--on-fill);
}

.newsletter-choice a.pill:hover,
footer.site a.pill:hover {
  background: var(--fill-hover);
  color: var(--on-fill);
}

.newsletter-choice .or {
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 450;
}

.newsletter-choice .signup {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
}

.newsletter-line {
  flex: 1 0 100%;
  margin: -0.15rem 0 0.15rem;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.35;
}

.newsletter input[type="email"],
.newsletter button {
  font: 14px/1.2 var(--sans);
  border: 0;
  border-radius: 999px;
}

.newsletter input[type="email"] {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.5rem 0.9rem;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--ring);
}

/* Shut, the picker is a zero-height row pulled up by the flex gap, so the card does not grow.
   Open, the grid row animates to the fieldset. Reduced motion snaps. */
.interest-pick {
  flex: 1 0 100%;
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -0.55rem;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 0.28s ease, opacity 0.22s ease, margin-top 0.28s ease, visibility 0s linear 0.28s;
}

.interest-pick.is-open {
  grid-template-rows: 1fr;
  margin-top: 0.2rem;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows 0.28s ease, opacity 0.22s ease, margin-top 0.28s ease, visibility 0s linear 0s;
}

.interest-pick-clip {
  overflow: hidden;
  min-height: 0;
}

@media (prefers-reduced-motion: reduce) {
  .interest-pick,
  .interest-pick.is-open {
    transition: none;
  }
}

.interests {
  margin: 0.15rem 0 0.1rem;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.interests legend {
  padding: 0;
  color: var(--muted);
  font-size: 14px;
}

.interests label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  margin: 0 0.85rem 0 0;
  padding: 0.2rem 0.15rem;
  font-size: 16px;
}

.interests input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--fill);
}

.newsletter-note:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.newsletter-note:not(:empty) {
  flex: 1 0 100%;
  margin: 0.35rem 0 0;
  padding: 0.7rem 0.9rem;
  background: var(--soft);
  border-radius: 16px;
}

.newsletter input::placeholder { color: var(--faint); }

.newsletter button {
  padding: 0.5rem 0.85rem;
  background: var(--fill);
  color: var(--on-fill);
  font-weight: 600;
  cursor: pointer;
}

.newsletter button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.join {
  width: min(26rem, calc(100% - 1.5rem));
  max-height: calc(100% - 1.5rem);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.join::backdrop { background: rgba(12, 16, 22, 0.62); }

.join-card {
  position: relative;
  padding: 1.45rem 1.3rem 1.05rem;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: var(--float);
}

.join-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 680;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.join h2 {
  margin: 0.35rem 2rem 0.45rem 0;
  font-size: clamp(1.9rem, 4vw, 2.45rem);
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.join-deck {
  margin: 0 0 0.95rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.4;
}

.join-x,
.join-no {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 600 0.95rem/1 var(--sans);
  cursor: pointer;
}

.join-x {
  position: absolute;
  top: 0.65rem;
  right: 0.7rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  appearance: none;
  box-shadow: none;
  font-size: 1.35rem;
  line-height: 1;
}

.join-no {
  display: block;
  margin: 0.85rem auto 0.15rem;
}

.join-no:hover,
.join-x:hover { color: var(--ink); }

.join .newsletter {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.join .newsletter::before { content: none; }

.join-form { align-items: stretch; }

.join-form button[type="submit"] {
  flex: 1 0 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-weight: 720;
}

/* The mount stays out of view until submit. A challenge opens it only if Cloudflare asks. */
.newsletter-check {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.newsletter-check.is-open {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  flex: 1 0 100%;
}

.newsletter-status {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--soft);
  border-radius: 16px;
}

/* The check-your-email line is the next thing to do. It flashes, then stays gold. */
.newsletter-status.is-alert {
  background: #d9b832;
  color: #14181f;
  font-weight: 650;
}

@media (prefers-reduced-motion: no-preference) {
  .newsletter-status.is-alert {
    animation: newsletter-alert 0.7s ease-in-out 5;
  }
}

@keyframes newsletter-alert {
  0%, 100% { background: #d9b832; color: #14181f; }
  50% { background: #050505; color: #fcfcfc; }
}

.heart {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--heart);
  vertical-align: -0.12rem;
}

.sep { padding: 0 0.15rem; color: var(--sep); }

@media (max-width: 640px) {
  header.site,
  main,
  footer.site { width: min(var(--measure), calc(100% - 1.5rem)); }
  /* .bar is the links and the theme toggle. Stacking it drops the
     toggle onto a second row. Only the search header stacks. */
  header.site:not(.bar) { align-items: stretch; flex-direction: column; gap: 0.7rem; }
  header.site .head-end { width: 100%; }
  header.site .head-end form.search { width: auto; flex: 1; min-width: 0; }
  header form.search { width: 100%; }
  header form.search input { width: auto; flex: 1; min-width: 0; }
  header form.search button { flex: none; }
  .newsletter button { flex: 1 1 auto; }
  h1 { font-size: 1.7rem; }
  .topics details {
    background: var(--paper);
    border-radius: 16px;
    box-shadow: var(--ring);
  }
  .topics summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.72rem 0.95rem;
    list-style: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
  }
  .topics summary::-webkit-details-marker { display: none; }
  .topics summary::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.15rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
  }
  .topics details[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
  .topics details[open] .topic-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0.35rem 0.4rem;
  }
  .topics details[open] .topic-list a {
    box-shadow: none;
    background: transparent;
    border-radius: 12px;
    padding: 0.62rem 0.6rem;
    font-size: 16px;
  }
  .answer p { font-size: 1.08rem; }
  .key-moments { padding: 0.9rem 0.85rem 0.7rem; }
  .key-moments h2 { font-size: 1.2rem; }
  ul.notes { --art: 40px; }
  .notes img, .thumb { width: 40px; height: 40px; }
}

body.has-player { padding-bottom: 8.5rem; }

/* The fixed player covers the bottom of the viewport. Padding on main
   lets the last rows scroll clear of it before the footer arrives. */
body.has-player main { padding-bottom: 8.5rem; }

.player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 0;
  background: transparent;
  pointer-events: none;
  font-size: 14px;
  line-height: 1.3;
}

.player-in {
  pointer-events: auto;
  position: relative;
  width: min(var(--measure), 100%);
  margin: 0 auto;
  padding: 0.7rem 0.75rem 0.6rem;
  background: var(--paper);
  border-radius: 24px;
  box-shadow: var(--ring), var(--float);
}

/* Dock the listening bar on the viewport edge. Radio keeps the in-page card.
   On an episode page the bar shares the left edge of the column. */
.player .player-in {
  width: min(76rem, 100%);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--ring), 0 -8px 28px rgba(20, 16, 12, 0.08);
}

@media (min-width: 960px) {
  body.paper:has(article.stage) .player .player-in {
    width: min(76rem, calc(100% - 2 * var(--gutter)));
    margin-left: var(--gutter);
    margin-right: 0;
  }
}

.player audio { width: 100%; display: block; }

.player-ui { display: none; }

.player.ready .player-ui { display: block; }

.player.ready audio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.player-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.player-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.player-names {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.player-title {
  display: block;
  color: var(--ink);
  font-weight: 620;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-title:hover { text-decoration: underline; text-underline-offset: 3px; }

.player-show {
  display: block;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-time {
  flex: none;
  font-size: 12px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.player button {
  flex: none;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  background: var(--soft);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}

.player button[data-act="play"] {
  background: var(--fill);
  color: var(--on-fill);
  min-width: 4.4rem;
  white-space: nowrap;
}

.player button[data-act="share"] { min-width: 4.5rem; }

.player a.player-tx {
  display: inline-flex;
  align-items: center;
  flex: none;
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  background: var(--soft);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.5rem 0.7rem;
  text-decoration: none;
  white-space: nowrap;
}

.player a.player-tx[hidden] { display: none; }

.player button[data-act="auto"][aria-pressed="true"] {
  background: var(--fill);
  color: var(--on-fill);
}

.player-bar {
  margin: 0.55rem 0.15rem 0.1rem;
  height: 4px;
  background: var(--track);
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
}

.player-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
}

@media (max-width: 640px) {
  body.has-player { padding-bottom: 11.5rem; }
  body.has-player main { padding-bottom: 11.5rem; }
  .player { padding: 0; }
  .player-text { flex-basis: 100%; order: -1; }
  .player-time { display: none; }
  .player button[data-act="share"],
  .player a.player-tx { min-width: 0; }
  .sponsor-card { align-items: flex-start; }
  .sponsor-card img { width: 96px; height: 64px; }
}

@media (prefers-reduced-motion: no-preference) {
  .topics a,
  .pager a,
  .notes li,
  .playrow,
  .sharerow,
  .txrow,
  .player a.player-tx,
  .player button,
  header form.search button,
  .sponsor-card,
  ul.directory a,
  ul.chips a,
  a.pill {
    transition: background-color 0.15s ease, color 0.15s ease;
  }
}

ul.directory {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 0.75rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--ring), var(--shadow);
}

ul.directory a {
  display: block;
  padding: 0.45rem 0.7rem;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}

ul.directory a:hover { background: var(--soft); }

ul.directory.counts a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
}

ul.directory.counts .q { font-weight: 650; }

aside.who {
  margin: 0 0 1.25rem;
  padding: 0.95rem 1.05rem 1.05rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--ring), var(--shadow);
}

aside.who h2 {
  margin: 0 0 0.35rem;
  color: var(--ink);
  font-size: 1.05rem;
}

aside.who p { margin: 0; }

.page p { margin: 0 0 0.95rem; }

.page h2 {
  margin: 1.6rem 0 0.5rem;
  color: var(--ink);
  font: 600 1.2rem/1.25 var(--sans);
  letter-spacing: -0.03em;
}

.page ul {
  margin: 0 0 0.95rem;
  padding-left: 1.2rem;
}

.page li { margin: 0.28rem 0; }

.page a {
  color: var(--ink);
  text-underline-offset: 3px;
}

ol.moments {
  margin: 0 0 0.35rem;
  padding: 0.4rem 0.7rem 0.45rem 2.35rem;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--ring), var(--shadow);
}

ol.moments > li {
  padding: 0.7rem 0.45rem 0.8rem 0.15rem;
}

ol.moments > li + li { box-shadow: inset 0 1px 0 var(--line); }

ol.moments .q {
  font-weight: 620;
  text-decoration: none;
}

ol.moments .q:hover { text-decoration: underline; }

ol.moments .line { margin: 0.28rem 0 0; }

ol.moments .meta { margin: 0.28rem 0 0; }

ul.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0.2rem;
  padding: 0;
}

ul.chips a {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: var(--ring);
  color: inherit;
  text-decoration: none;
  font-size: 0.95rem;
}

ul.chips a:hover { background: var(--soft); }

@media (max-width: 640px) {
  ul.directory { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}

.moment { margin: 1.15rem 0 0.4rem; }

.moment h2 { margin-top: 0; }

.moment-face {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #14181f;
  box-shadow: var(--ring);
  aspect-ratio: 16 / 9;
}

.moment-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.moment-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 999px;
  background: var(--fill);
  color: var(--on-fill);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  padding-left: 0.2rem;
  box-shadow: var(--float);
}

.moment-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 16px;
  background: #14181f;
}

/* The newsletter page is a poster. The band is full width; the column lines
   up with the header. Colors are fixed so the gold button and the cream
   type keep their contrast in either color scheme. */
body.letter main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 0;
  padding-bottom: 1.5rem;
}

.letter-hero {
  background: #14181f;
  color: #f6f1e6;
  padding: 2.4rem 0 2.2rem;
  box-shadow: inset 0 -3px 0 #d9b832;
}

.letter-hero-in,
.letter-wrap,
.letter-proof,
body.letter .sponsor {
  width: min(76rem, calc(100% - 3.5rem));
  margin-left: auto;
  margin-right: auto;
}

.letter-hero h1 {
  margin: 0;
  max-width: 12em;
  color: #f6f1e6;
  font-size: clamp(3.1rem, 12vw, 4.8rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.045em;
  overflow-wrap: normal;
}

.letter-hero.topic-signup {
  margin: 0 0 1.5rem;
  padding: 1.7rem 1.35rem 1.5rem;
  border-radius: var(--radius);
  box-shadow: inset 0 -3px 0 #d9b832, 0 0 0 1px rgba(246, 241, 230, 0.16);
}

/* Category pages and the new-episodes page put this card under Famous people. Topics and collections keep it at the top. */
body.category .letter-hero.topic-signup,
body.new-episodes .letter-hero.topic-signup {
  margin-top: 3.25rem;
}

.letter-hero.topic-signup h2 {
  margin: 0;
  max-width: 16em;
  color: #f6f1e6;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.letter-promise {
  margin: 1.05rem 0 0;
  max-width: 40rem;
  color: #e4dccb;
  font-size: clamp(1.15rem, 2.5vw, 1.4rem);
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.letter-trust {
  margin: 1.05rem 0 0;
  color: #e4dccb;
  font-size: 0.98rem;
}

.letter-past {
  margin: 0.85rem 0 0;
}

.letter-hero a.letter-secondary {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.72rem 1.1rem;
  border-radius: 999px;
  background: transparent;
  color: #f6f1e6;
  font: inherit;
  font-weight: 650;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px rgba(246, 241, 230, 0.9);
}

.letter-hero a.letter-secondary:hover {
  background: #f6f1e6;
  color: #14181f;
}

body.paper .letter-trust { color: #6d6a66; }

body.paper .letter-hero a.letter-secondary {
  color: #1c1c1c;
  box-shadow: inset 0 0 0 1.5px #1c1c1c;
}

body.paper .letter-hero a.letter-secondary:hover {
  background: #1c1c1c;
  color: #fff;
}

.letter-hero .newsletter-status {
  margin-top: 1.15rem;
  background: #f6f1e6;
  color: #14181f;
}

.letter-hero .newsletter-status.is-alert {
  background: #d9b832;
  color: #14181f;
}

.letter-hero .newsletter {
  margin: 1.35rem 0 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.letter-hero .newsletter::before { content: none; }

.letter-hero .newsletter-choice .or { color: #e4dccb; }

.letter-hero .newsletter-choice .signup { color: #f6f1e6; }

.letter-hero .newsletter-choice a.pill {
  background: transparent;
  color: #f6f1e6;
  box-shadow: inset 0 0 0 1.5px #f6f1e6;
}

.letter-hero .newsletter-choice a.pill:hover {
  background: #f6f1e6;
  color: #14181f;
}

.letter-hero .newsletter-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.letter-hero .newsletter input[type="email"],
.letter-hero .newsletter button {
  flex: 1 1 100%;
  min-height: 3.6rem;
  padding: 0.9rem 1.15rem;
  border-radius: 14px;
  font-size: 1.125rem;
}

.letter-hero .newsletter input[type="email"] {
  background: #fcfcfc;
  color: #14181f;
  box-shadow: none;
}

.letter-hero .newsletter input::placeholder { color: #5e5b57; }

.letter-hero .newsletter button {
  background: #d9b832;
  color: #14181f;
  font-weight: 700;
}

.letter-hero .newsletter button:hover { background: #e4c65a; }

.letter-hero .newsletter-note:not(:empty) {
  background: #f6f1e6;
  color: #14181f;
}

.letter-hero .interests legend { color: #e4dccb; }

.letter-hero .interests label { color: #f6f1e6; }

.letter-hero .interests input { accent-color: #d9b832; }

.letter-hero :focus-visible { outline-color: #d9b832; }

.letter-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.1rem;
  padding: 1.6rem 0 0.2rem;
}

.letter-proof p {
  flex: 1 1 5.2rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.letter-proof strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink);
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.letter-wrap { padding: 1.8rem 0 0.4rem; }

.letter-proof + .letter-wrap { padding-top: 0.6rem; }

.letter-wrap > h2,
.letter-faq h2 {
  margin: 0 0 0.85rem;
  max-width: var(--measure);
  color: var(--ink);
  font: 700 1.65rem/1.15 var(--sans);
  letter-spacing: -0.03em;
}

/* Newest letter, drawn like the dark hero so the gold and cream
   keep their contrast on the paper page in either color scheme. */
.letter-latest {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
  max-width: 40rem;
  margin: 0.35rem 0 1.45rem;
  padding: 1.15rem 1.2rem 1.15rem;
  border-radius: 22px;
  background: #14181f;
  color: #f6f1e6;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 #d9b832, 0 0 0 1px rgba(217, 184, 50, 0.45), 0 12px 32px rgba(20, 16, 12, 0.12);
}

body.paper main a.letter-latest,
body.paper main a.letter-latest:hover,
:root[data-theme="dark"] body.paper main a.letter-latest,
:root[data-theme="dark"] body.paper main a.letter-latest:hover {
  color: #f6f1e6;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.paper main a.letter-latest,
  :root:not([data-theme="light"]) body.paper main a.letter-latest:hover {
    color: #f6f1e6;
    text-decoration: none;
  }
}

.letter-latest:hover .letter-latest-cta { background: #e4c65a; }

.letter-latest:focus-visible {
  outline: 2px solid #d9b832;
  outline-offset: 3px;
}

.letter-latest-kicker {
  color: #d9b832;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.letter-latest-title {
  color: #f6f1e6;
  font: 700 clamp(1.35rem, 3.4vw, 1.9rem)/1.15 var(--sans);
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}

.letter-latest-when,
.letter-latest-lede {
  color: #e4dccb;
  font-size: 1rem;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.letter-latest-points {
  list-style: none;
  width: 100%;
  margin: 0.15rem 0 0;
  padding: 0;
}

.letter-latest-points li {
  position: relative;
  margin: 0;
  padding: 0.18rem 0 0.18rem 0.95rem;
  color: #f6f1e6;
  font-size: 0.98rem;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.letter-latest-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: #d9b832;
}

.letter-latest-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 0.35rem;
  padding: 0.62rem 0.95rem;
  border-radius: 999px;
  background: #d9b832;
  color: #14181f;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.2;
}

@media (max-width: 640px) {
  .letter-latest { padding: 1rem 0.95rem 1rem; }
}

.letter-notes {
  list-style: none;
  max-width: var(--measure);
  margin: 0;
  padding: 0;
}

.letter-notes li {
  padding: 1.1rem 0 1.15rem;
  border-top: 1px solid var(--line);
}

.letter-notes h3 {
  margin: 0 0 0.4rem;
  font: 650 1.35rem/1.25 var(--sans);
  letter-spacing: -0.028em;
}

.letter-notes h3 a {
  color: inherit;
  text-decoration: none;
}

.letter-notes h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.letter-excerpt {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  line-height: 1.45;
}

.letter-from {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.letter-empty {
  margin: 0;
  color: var(--muted);
}

.letter-count {
  margin: 0.35rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.letter-browse {
  margin: 0.9rem 0 0;
}

.letter-browse a {
  color: var(--ink);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.letter-faq { margin-top: 2.2rem; max-width: var(--measure); }

.letter-faq dt {
  margin-top: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.letter-faq dd {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

@media (min-width: 720px) {
  .letter-hero .newsletter input[type="email"] { flex: 1 1 auto; }
  .letter-hero .newsletter button {
    flex: 0 0 auto;
    min-width: 11rem;
  }
}

body.front header.site { padding-bottom: 0.85rem; }

.masthead {
  margin: 0.2rem 0 1.15rem;
  font-size: clamp(3.15rem, 9.5vw, 7.25rem);
  font-weight: 750;
  letter-spacing: -0.065em;
  line-height: 0.82;
}

.masthead a {
  color: inherit;
  text-decoration: none;
}

.answer,
.lede,
.post,
.key-moments,
.sponsor-lead,
aside.who,
.letter-hero .newsletter,
main > article:not(.stage) > p,
main > article:not(.stage) > ul:not(.notes):not(.chips),
main > article:not(.stage) > ol,
main > article:not(.stage) > form.newsletter {
  max-width: var(--measure);
}

main > article:not(.stage) > form.newsletter {
  margin-top: 1.15rem;
  text-align: left;
}

main > article:not(.stage) > .post + form.newsletter {
  margin-top: 1.75rem;
}

.stage-copy,
.stage-rest,
.stage-lead,
.stage-people { min-width: 0; }

.stage-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin: 0 0 0.85rem;
}

.stage-kicker .meta { margin: 0; min-width: 0; }

.episode-share {
  position: relative;
  display: flex;
  flex: none;
  justify-content: flex-end;
  margin: 0;
}



.share-toggle,
.copy-embed {
  border: 1px solid rgba(28, 28, 28, 0.16);
  background: #fff;
  color: #1c1c1c;
  font: inherit;
  font-weight: 580;
  letter-spacing: -0.02em;
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
}

.share-toggle:hover,
.copy-embed:hover { background: #1c1c1c; color: #fff; }

.copy-embed {
  border: 0;
  background: #1c1c1c;
  color: #fff;
}

.copy-embed:hover { background: #000; }

.share-menu {
  position: absolute;
  z-index: 4;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 12.5rem;
  padding: 0.35rem;
  background: #fff;
  border-radius: 0.9rem;
  box-shadow: 0 18px 50px rgba(28, 28, 28, 0.12);
}



.share-menu[hidden] { display: none; }

.share-menu button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-radius: 0.65rem;
  background: transparent;
  color: #1c1c1c;
  font: inherit;
  font-weight: 560;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
}

.share-menu button:hover,
.share-menu button:focus-visible { background: #f3f1ee; }

.embed-finder .ask-wrap { margin-top: 1.25rem; }

.embed-hits {
  list-style: none;
  max-width: 46rem;
  margin: 1.15rem 0 0;
  padding: 0;
}

.embed-hits a {
  display: block;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
  color: #1c1c1c;
}

.embed-hits li:last-child a { border-bottom: 1px solid rgba(28, 28, 28, 0.1); }

.embed-hits .q {
  display: block;
  font-weight: 580;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.embed-hits .meta { color: #6d6a66; }

.embed-hits a[aria-current="true"] .q {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.embed-miss { color: #6d6a66; }

.embed-live {
  max-width: 46rem;
  margin-top: 1.75rem;
}

.embed-live h2 { margin-bottom: 0.2rem; }

@media (max-width: 720px) {
  .episode-share { justify-content: flex-start; }
  .share-menu { right: auto; left: 0; }
}

.stage-rail .newsletter { margin: 0; }

article.stage + .sponsor { max-width: var(--measure); }

.front-index {
  display: flex;
  gap: 0.4rem 1.15rem;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.front-index::-webkit-scrollbar { display: none; }

.front-index a {
  flex: none;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 640;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.front-index a:hover { text-decoration: underline; text-underline-offset: 3px; }

.front-hero {
  display: grid;
  gap: 1.35rem;
  align-items: start;
  container-type: inline-size;
}

.front-lead {
  display: grid;
  gap: 1.15rem;
  align-items: start;
}

.front-copy { min-width: 0; }

.front-cover {
  display: block;
  width: min(16rem, 72%);
}

.front-cover .cover,
.shelf-row .cover {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--soft);
}

/* No episode art and no show cover: the gold mark on the logo navy,
   same colors as icon.png, so the card is not an empty white block. */
.cover.cover-fallback {
  display: grid;
  place-items: center;
  background: #14181f;
}
.cover.cover-fallback img {
  width: 28%;
  max-width: 4.5rem;
  height: auto;
}

.front-cover .cover {
  border-radius: 18px;
  box-shadow: var(--ring), var(--shadow);
}

.front-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 680;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.front-kicker a { color: inherit; text-decoration: none; }

.front-kicker a:hover { color: var(--ink); }

body.front .front-lead h1 {
  margin: 0.45rem 0 0.85rem;
  max-width: 11em;
  font-size: clamp(1.9rem, 8vw, 2.45rem);
  font-weight: 720;
  line-height: 0.98;
  letter-spacing: -0.045em;
  overflow-wrap: normal;
}

body.front .front-lead h1 a { color: inherit; text-decoration: none; }

body.front .front-lead h1 a:hover { text-decoration: underline; text-underline-offset: 0.12em; }

.front-deck {
  max-width: 38rem;
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.45;
}

.front-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
}

.front-meta a { color: inherit; text-decoration: none; }

.front-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

.front-meta .time { color: var(--accent); font-weight: 680; }

.front-rail { display: grid; gap: 0.85rem; align-content: start; }

body.front .front-hero .newsletter,
body.category .front-hero .newsletter,
body.new-episodes .front-hero .newsletter,
body.front .front-sponsor .sponsor { margin: 0; }

.shelf { margin-top: 2.35rem; }

.shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.75rem;
}

body.front .shelf h2,
body.category .shelf h2,
body.new-episodes .shelf h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 680;
  letter-spacing: -0.03em;
}

body.front .shelf h2 a,
body.category .shelf h2 a,
body.new-episodes .shelf h2 a { color: inherit; text-decoration: none; }

body.front .shelf h2 a:hover,
body.category .shelf h2 a:hover,
body.new-episodes .shelf h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }

body.category .category-hero h1,
body.new-episodes .category-hero + .shelf { margin-top: 0.35rem; }

body.new-episodes .category-hero h1 {
  margin: 0 0 1.15rem;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 720;
  letter-spacing: -0.045em;
}

body.category .front-lead h2,
body.new-episodes .front-lead h2 {
  margin: 0.45rem 0 0.85rem;
  max-width: 18em;
  color: var(--ink);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 720;
  line-height: 1.05;
  letter-spacing: -0.04em;
  overflow-wrap: normal;
}

body.category .front-lead h2 a,
body.new-episodes .front-lead h2 a { color: inherit; text-decoration: none; }

body.category .front-lead h2 a:hover,
body.new-episodes .front-lead h2 a:hover { text-decoration: underline; text-underline-offset: 0.12em; }

.shelf-more {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 620;
  text-decoration: none;
}

.shelf-more:hover { color: var(--ink); }

.shelf-scroller {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
  align-items: center;
  gap: 0.45rem;
}

.shelf-step {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--ring), var(--shadow);
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}

.shelf-step:hover:not(:disabled) { box-shadow: var(--ring), var(--float); }

.shelf-step:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.shelf-pages .shelf-row {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.shelf-pages .shelf-row li {
  flex: 0 0 100%;
}

.shelf-row {
  display: flex;
  gap: 0.7rem;
  margin: 0;
  padding: 0.1rem 0 0.35rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.shelf-row::-webkit-scrollbar { display: none; }

.shelf-row li {
  flex: 0 0 min(78vw, 18rem);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding: 0 0 1rem;
  overflow: hidden;
  background: var(--paper);
  border-radius: 18px;
  box-shadow: var(--ring), var(--shadow);
}

.shelf-row a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.shelf-row .cover { border-radius: 18px 18px 0 0; }

.shelf-row .shelf-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1.05rem 0;
}

.shelf-row .shelf-actions { padding: 0 1.05rem; }

.shelf-row .q {
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.28;
  overflow-wrap: normal;
}

.shelf-row .shelf-quote {
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shelf-row .meta { margin-top: auto; }

.shelf-actions,
.front-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.front-actions { margin: 1rem 0 0; }

.shelf-row .playrow,
.front-actions .playrow { margin-top: 0; }

.shelf-row .sharerow,
.front-actions .sharerow { display: inline-flex; }

.shelf-row .time { color: var(--accent); font-weight: 650; }

.famous-names {
  display: grid;
  grid-template-columns: repeat(4, minmax(9.5rem, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0.1rem 0 0.35rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.famous-names::-webkit-scrollbar { display: none; }

.famous-names a {
  display: flex;
  align-items: center;
  min-height: 3.4rem;
  padding: 0.75rem 0.95rem;
  background: var(--paper);
  border-radius: 16px;
  box-shadow: var(--ring), var(--shadow);
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
  text-decoration: none;
  scroll-snap-align: start;
}

.famous-names a:hover { box-shadow: var(--ring), var(--float); }

.shelf-row li:hover { box-shadow: var(--ring), var(--float); }

.shelf-row a:hover .q { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 720px) {
  .shelf-pages .shelf-row li {
    flex: 0 0 calc((100% - 0.7rem) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shelf-pages .shelf-row { scroll-behavior: auto; }
}

@media (min-width: 960px) {
  .front-hero {
    grid-template-columns: minmax(0, 1fr) 22.5rem;
    gap: 2.75rem;
  }

  body.front .front-lead h1 {
    font-size: clamp(2.7rem, 3.5vw, 4.05rem);
  }

  .front-deck { font-size: 1.28rem; }

  .shelf-row,
  .famous-names {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
  }

  .shelf-row li {
    flex: none;
    /* overflow:hidden on a grid item drops its content minimum, so a
       wrapped title or date is clipped instead of growing the row. */
    min-height: min-content;
  }

  .shelf-pages .shelf-row {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
  }

  .shelf-pages .shelf-row li {
    flex: 0 0 calc((100% - 2.1rem) / 4);
  }

  ul.directory { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  body:not(.embed) main > ul.notes:not(.cards):not(.stack),
  body:not(.embed) main > article:not(.stage) ul.notes:not(.cards):not(.stack) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.35rem;
  }

  body:not(.embed) main > ul.notes:not(.cards):not(.stack) > li,
  body:not(.embed) main > article:not(.stage) ul.notes:not(.cards):not(.stack) > li { margin-top: 0; }

  body:not(.embed) main > ul.notes:not(.cards):not(.stack) > li.sponsor-slot,
  body:not(.embed) main > article:not(.stage) ul.notes:not(.cards):not(.stack) > li.sponsor-slot,
  body:not(.embed) main > ul.notes:not(.cards):not(.stack) > li:only-child,
  body:not(.embed) main > article:not(.stage) ul.notes:not(.cards):not(.stack) > li:only-child { grid-column: 1 / -1; }

  article.stage:has(.stage-rail) + .sponsor {
    max-width: calc(100% - 22.5rem - 2.75rem);
  }

  article.stage:has(.stage-rail) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22.5rem;
    column-gap: 2.75rem;
    align-items: start;
  }

  article.stage:has(.stage-rail) .stage-copy { display: contents; }

  article.stage:has(.stage-rail) .stage-lead { grid-column: 1; grid-row: 1; }

  article.stage:has(.stage-rail) .stage-people { grid-column: 1; grid-row: 2; }

  article.stage:has(.stage-rail) .stage-rest { grid-column: 1; grid-row: 3; }

  article.stage:has(.stage-rail) .stage-rail {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    position: sticky;
    top: 4.5rem;
  }

  article.stage:has(.stage-rail) .tx-wrap {
    grid-column: 1;
    grid-row: 4;
    min-width: 0;
  }

}

/* On a phone the signup still follows the people list. Share stays in
   the title row, so the copy wrapper leaves the box tree. */
@media (max-width: 959px) {
  article.stage:has(.stage-rail) {
    display: flex;
    flex-direction: column;
  }

  article.stage:has(.stage-rail) .stage-copy { display: contents; }

  article.stage:has(.stage-rail) .episode-hero { order: 0; }
  article.stage:has(.stage-rail) .stage-lead { order: 1; }
  article.stage:has(.stage-rail) .stage-people { order: 2; }
  article.stage:has(.stage-rail) .stage-rail { order: 3; }
  article.stage:has(.stage-rail) .stage-rest { order: 4; }
  article.stage:has(.stage-rail) .tx-wrap { order: 5; }
}

/* The cover sits beside the question only when this band can hold the
   cover, the description, and the signup. A viewport breakpoint put the
   description in a one-word column once the band was narrower than that. */
@container (min-width: 64rem) {
  .front-lead:has(.front-cover) {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: 1.75rem;
  }

  .front-cover { width: auto; }
}

@media (max-width: 720px) {
  .front-index { flex-wrap: wrap; overflow: visible; }
}

body.radio main {
  width: min(calc(var(--measure) + 8rem), calc(100% - 1.5rem));
}

.radio-kicker,
.radio-lead {
  margin: 0;
}

.radio-kicker {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 680;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.radio-lead {
  margin: 0.35rem auto 1.1rem;
  color: var(--ink);
  font-size: 1.05rem;
}

.radio-kicker,
.radio-lead,
.radio-cats,
body.radio .player,
body.radio main > .sponsor {
  width: min(var(--measure), calc(100% - 6.9rem));
}

.radio-cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin: 0 auto 0.9rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scrollbar-width: none;
}

.radio-cats::-webkit-scrollbar { display: none; }

.radio-cats a {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--ring);
  text-decoration: none;
  font-size: 13px;
  font-weight: 550;
}

.radio-cats a[aria-current="page"],
.radio-cats a:hover {
  background: var(--fill);
  color: var(--on-fill);
}

.radio-kicker,
body.radio main > .sponsor { margin-inline: auto; }

.radio-stage {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, var(--measure)) 2.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.7rem;
}

.radio-step {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--ring), var(--float);
  font-family: var(--sans);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.radio-step:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.radio-deck {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-radius: 28px;
  box-shadow: var(--ring), var(--float);
  transition: height 0.5s ease;
}

.radio-deck.radio-still,
.radio-deck.radio-still .radio-card {
  transition: none;
}

.radio-card {
  display: grid;
  gap: 1.15rem;
  align-items: start;
  padding: 1.2rem 1.25rem 1.35rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}

.radio-card.current {
  position: relative;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s;
}

.radio-card:not(.current) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.radio-cover {
  display: block;
  width: min(11.5rem, 46%);
}

.radio-cover .cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
  background: var(--soft);
}

.radio-copy { min-width: 0; }

.radio-show {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 680;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.radio-show a { color: inherit; text-decoration: none; }

.radio-show a:hover { color: var(--ink); }

.radio-card h1 {
  margin: 0.4rem 0 0.85rem;
  font-size: clamp(1.85rem, 5vw, 2.55rem);
  font-weight: 720;
  line-height: 0.98;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}

.radio-card h1 a { color: inherit; text-decoration: none; }

.radio-card h1 a:hover { text-decoration: underline; text-underline-offset: 0.12em; }

.radio-card .answer { max-width: 38rem; }

.radio-card .answer p {
  font-size: 1.05rem;
  line-height: 1.6;
}

.radio-card .answer p:last-child { margin-bottom: 0; }

.radio-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.7rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.radio-meta a { color: inherit; text-decoration: none; }

.radio-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

.radio-meta .time { color: var(--accent); font-weight: 680; }

.player button.radio-stay {
  display: block;
  width: 100%;
  margin: 0 0 0.7rem;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  background: var(--fill);
  color: var(--on-fill);
  font-size: 0.95rem;
  font-weight: 680;
}

.player button.radio-stay:disabled {
  background: var(--soft);
  color: var(--muted);
  cursor: default;
}

body.radio .player {
  position: static;
  z-index: auto;
  margin: 1.15rem auto 0;
  padding: 0;
}

body.radio .player-in {
  width: 100%;
  border-radius: 24px;
  box-shadow: var(--ring), var(--float);
}

body.radio.has-player { padding-bottom: 0; }

/* Radio's player sits in the page, so main keeps its usual padding. */
body.radio.has-player main { padding-bottom: 2.5rem; }

@media (min-width: 720px) {
  .radio-card {
    grid-template-columns: 11.5rem minmax(0, 1fr);
    gap: 1.35rem;
    padding: 1.25rem 1.35rem 1.4rem;
  }

  .radio-cover {
    width: auto;
    grid-row: 1 / span 3;
  }
}

@media (max-width: 719px) {
  .radio-cover { margin-inline: auto; }
}

@media (max-width: 640px) {
  .radio-card h1 { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .radio-deck,
  .radio-card { transition: none; }
  .radio-card { transform: none; }
}

@media (max-width: 640px) {
  body.letter main { width: 100%; }
  .letter-hero { padding: 1.7rem 0 1.55rem; }
  .letter-hero-in,
  .letter-wrap,
  .letter-proof,
  body.letter .sponsor {
    width: min(var(--measure), calc(100% - 1.5rem));
  }
}
.sng-hero{max-width:640px;margin:1.5rem auto 2rem}
.sng-form{display:grid;gap:.5rem;margin-top:1rem}
.sng-form input[type=url],.sng-form input[type=email]{font:inherit;padding:.7rem .8rem;border:1px solid #ccc;border-radius:8px;width:100%;box-sizing:border-box}
.sng-form button{font:inherit;font-weight:600;padding:.75rem 1rem;border:0;border-radius:8px;background:#1a1a1a;color:#fff;cursor:pointer;margin-top:.5rem}
.sng-full{border:1px solid #e3b341;background:#fff8e6;color:#1a1a1a;border-radius:8px;padding:.75rem 1rem;margin:1rem 0}
.sng-full p{margin:.25rem 0}
.sng-soon{color:#666;font-size:.95rem}
.sng-steps{padding-left:1.25rem;line-height:1.6}
.sng-sample{border-left:3px solid #ccc;margin:1rem 0;padding:.25rem 1rem}
.sng-ask{margin-top:1.5rem}
.sng-samples-lede{margin:0 0 .5rem;color:var(--muted,#555)}
.sng-samples .letter-from{overflow-wrap:anywhere}
.sng-at{font-variant-numeric:tabular-nums;white-space:nowrap}
.sng-pick{list-style:none;padding:0;margin:.5rem 0 1rem}.sng-pick li{padding:.6rem 0;border-top:1px solid var(--line,#ddd)}.sng-pick label{display:block;cursor:pointer}.sng-pick .meta{display:block;font-size:.92rem;color:var(--muted,#666);overflow-wrap:anywhere}.sng-pick input[type=radio]{margin-right:.4rem}


.hero-band { --band: #f1eee8; background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); padding: 1.25rem 0 2rem; margin-bottom: 0.5rem; }
@media (prefers-color-scheme: dark) { .hero-band { --band: color-mix(in srgb, var(--ink) 6%, var(--paper)); } }
.ask-panel { margin: 2.5rem 0; padding: clamp(1.4rem, 4vw, 2.75rem); border: 1px solid var(--line, #e3e3e3); border-radius: 18px; background: var(--paper); }
.ask-panel h2 { margin: 0 0 0.35rem; font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -0.02em; }
.ask-lede { margin: 0 0 1.25rem; color: var(--muted, #666); font-size: 1.05rem; }
.front-search { display: flex; gap: 0.5rem; max-width: 44rem; margin: 0 0 1.75rem; }
.front-search input { flex: 1; min-width: 0; font-size: 1.15rem; padding: 0.95rem 1.25rem; border-radius: 999px; border: 1px solid var(--line, #ddd); background: var(--paper); box-shadow: var(--shadow); color: var(--ink); }
.front-search button { font-size: 1.05rem; padding: 0.95rem 1.5rem; border-radius: 999px; border: 0; background: var(--ink); color: var(--paper); font-weight: 650; cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.question-list { display: grid; grid-template-columns: 1fr; gap: 0 2rem; margin: 0; padding: 0; list-style: none; }
.question-list li { border-top: 1px solid var(--line, #e3e3e3); }
.question-list a { display: block; padding: 0.9rem 0.75rem; margin: 0 -0.75rem; border-radius: 10px; color: var(--ink); text-decoration: none; transition: background .15s; }
.question-list a:hover, .question-list a:focus-visible { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
.question-list .q { display: block; font-size: 1.15rem; font-weight: 650; line-height: 1.3; }
.question-list a:hover .q { text-decoration: underline; text-underline-offset: 3px; }
.question-list .meta { display: block; margin-top: 0.2rem; color: var(--muted, #666); font-size: 0.9rem; }
@media (min-width: 720px) { .question-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.front-tagline { margin: -0.55rem 0 1.15rem; color: var(--muted); font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 500; letter-spacing: -0.01em; }

.qa-label { margin: 0 0 .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6b7280); }
.qa-answer-label { margin-top: 1.25rem; }
.qa-source { margin: 1.5rem 0; padding: 1rem; border: 1px solid rgba(127,127,127,.25); border-radius: 10px; }
.qa-source h2 { margin: 0 0 .75rem; font-size: 1rem; }
.qa-source-row { display: flex; gap: 1rem; align-items: center; }
.qa-source-row .thumb,
.qa-source-row img { width: 112px; height: 112px; border-radius: 16px; object-fit: cover; flex: none; background: var(--soft); }
.qa-source dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: 0; font-size: .92rem; }
.qa-source dt { font-weight: 600; color: var(--muted, #6b7280); }
.qa-source dd { margin: 0; }
.qa-source .playrow { padding: .1rem .5rem; }
.qa-source a { color: var(--ink); text-decoration: none; }
.qa-source a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Transcript click-to-play */
.tx-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--paper); box-shadow: 0 -1px 0 var(--line, rgba(0,0,0,.1)); }
.tx-player .player-in { max-width: 46rem; margin: 0 auto; padding: 0.5rem 1rem; }
.tx-player .player-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.tx-player .tx-hint { color: var(--faint); font-size: 13px; flex: 1; }
body.has-tx-player { padding-bottom: 4rem; }
.answer span[data-t] { cursor: pointer; border-radius: 3px; }
.answer span[data-t]:hover { background: var(--fill-soft, rgba(127,127,127,.12)); }
.answer span[data-t].now { background: var(--mark, rgba(255,214,0,.35)); }

.show-head {
  display: flex;
  align-items: flex-start;
  gap: 1.15rem;
  margin: 0 0 0.35rem;
}

.show-copy { min-width: 0; }

.show-copy h1,
.show-head h1 { margin-top: 0; }

.show-cover {
  width: 180px;
  height: 180px;
  flex: none;
  object-fit: cover;
  border-radius: 18px;
  background: var(--soft);
  box-shadow: var(--ring), var(--shadow);
}

.show-placeholder {
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 2.5rem;
  font-weight: 720;
  letter-spacing: -0.04em;
}

.episode-hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 675;
  object-fit: cover;
  margin: 0 0 1.15rem;
  border-radius: 18px;
  background: var(--soft);
  grid-column: 1 / -1;
}

/* Wide or short windows: the 16:9 banner was the whole first screen.
   Cap it at 45vh, and on a short desktop leave room under it for the
   title and the description. Same aspect, left edge with the column.
   Phones stay full width of the column, where this cap does not apply. */
@media (min-width: 960px) {
  .episode-hero {
    --hero-cap: max(12rem, min(45vh, 100vh - 36rem));
    width: min(100%, calc(var(--hero-cap) * 1200 / 675));
    max-height: var(--hero-cap);
    min-width: 0;
    justify-self: start;
    align-self: start;
    margin-left: 0;
    margin-right: 0;
  }
}

/* The stage grid pins the copy to row 1. The banner needs the row above it. */
article.stage:has(.stage-rail):has(.episode-hero) .episode-hero {
  grid-column: 1 / -1;
  grid-row: 1;
}

article.stage:has(.stage-rail):has(.episode-hero) .stage-lead { grid-row: 2; }

article.stage:has(.stage-rail):has(.episode-hero) .stage-people { grid-row: 3; }

article.stage:has(.stage-rail):has(.episode-hero) .stage-rest { grid-row: 4; }

article.stage:has(.stage-rail):has(.episode-hero) .tx-wrap { grid-row: 5; }

article.stage:has(.stage-rail):has(.episode-hero) .stage-rail { grid-row: 2 / span 3; }

article.show-page .shelf { margin-top: 1.6rem; }

article.show-page .shelf-head h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 680;
  letter-spacing: -0.03em;
}

article.show-page .shelf-row,
article.stage .related-episodes .shelf-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.7rem;
  overflow: visible;
  scroll-snap-type: none;
}

article.show-page .shelf-row li,
article.stage .related-episodes .shelf-row li {
  flex: none;
  width: auto;
  min-height: min-content;
}

.more-episodes { margin: 0.9rem 0 0; }

.more-episodes summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 650;
}

.more-episodes ul {
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
}

.more-episodes li { margin: 0.28rem 0; }

.more-episodes a { color: inherit; text-decoration: none; }

.more-episodes a:hover { text-decoration: underline; text-underline-offset: 3px; }

.tx-wrap {
  max-width: 100%;
  min-width: 0;
  margin: 1.8rem 0 0.4rem;
}

.episode-transcript {
  max-width: 100%;
  min-width: 0;
  scroll-margin-top: 5.5rem;
}

.episode-transcript .tx-label {
  margin: 0 0 0.7rem;
  font: 680 1.15rem/1.3 var(--sans);
  letter-spacing: -0.02em;
  color: var(--ink);
}

.tx-preview {
  margin: 0 0 0.85rem;
  padding: 0.95rem 1rem 0.3rem;
  border-radius: 16px;
  background: var(--soft);
  box-shadow: var(--ring);
  max-width: 100%;
  overflow: hidden;
}

.tx-preview p {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  line-height: 1.45;
  letter-spacing: -0.011em;
  overflow-wrap: anywhere;
}

.tx-preview p.who {
  margin: 0.15rem 0 0.25rem;
  font: 600 0.78rem/1.3 var(--sans);
  letter-spacing: 0.01em;
  color: var(--muted);
}

.tx-preview > p.who:first-child { margin-top: 0; }

.episode-transcript summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.8rem 1.15rem;
  border-radius: 999px;
  background: var(--fill);
  color: var(--on-fill);
  font: 680 1.05rem/1.25 var(--sans);
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
  text-align: center;
}

.episode-transcript summary::-webkit-details-marker { display: none; }

.episode-transcript summary::marker { content: none; }

.episode-transcript summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-0.1rem);
  flex: none;
}

.episode-transcript summary:hover { background: var(--fill-hover); }

.episode-transcript[open] summary::after { transform: rotate(-135deg) translateY(-0.05rem); }

.episode-transcript[open] .tx-when-closed { display: none; }

.episode-transcript:not([open]) .tx-when-open { display: none; }

.tx-wrap:has(.episode-transcript[open]) > .tx-preview { display: none; }

.episode-transcript .answer,
.episode-transcript .answer p {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.episode-transcript .tx-skim { margin: 0.85rem 0 0; }

@media (max-width: 640px) {
  .episode-transcript summary { border-radius: 16px; }
  .tx-preview { padding: 0.8rem 0.85rem 0.2rem; }
}

.segments h2 .time {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 560;
  letter-spacing: 0;
  margin-left: 0.4rem;
}

.segment-yt { margin: 0 0 1rem; }

@media (max-width: 640px) {
  .show-head { flex-direction: column; gap: 0.75rem; }
  .show-cover { width: 120px; height: 120px; }
  .show-placeholder { font-size: 1.8rem; }
  .qa-source-row .thumb,
  .qa-source-row img { width: 84px; height: 84px; }
}

.search-results {
  max-width: var(--measure);
}

.search-results h2 {
  margin: 1.5rem 0 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.search-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.search-cards { gap: 1.15rem; }

.search-card {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  min-width: 0;
}

.search-art {
  width: 112px;
  height: 112px;
  flex: none;
  object-fit: cover;
  border-radius: 16px;
  background: var(--soft);
  box-shadow: var(--ring);
}

.search-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.search-copy { min-width: 0; flex: 1 1 auto; }

.search-card h3 {
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.search-card h3 a { color: inherit; text-decoration: none; }

.search-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }

.search-snip {
  margin: 0.28rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.4;
}

.search-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: 0.4rem 0 0;
}

.search-meta a {
  color: var(--muted);
  text-decoration: none;
}

.search-meta a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.search-card .playrow {
  width: 2rem;
  height: 2rem;
  margin: 0;
}

.search-results .search-more {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  margin: 1.35rem 0 0;
}

.search-results a.more {
  display: inline-block;
  margin: 0;
  text-decoration: none;
}

@media (max-width: 640px) {
  .search-art { width: 76px; height: 76px; }
  .search-card h3 { font-size: 1.08rem; }
}

/* Bricolage Grotesque, Latin subset. SIL Open Font License.
   Self-hosted so the landing page does not call Google Fonts.
   The file is only fetched when body.front uses the family. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 460 700;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Landing page. Scoped so note, show, search, and category pages keep
   their own layout. These are the day colors. The night block at the
   end repaints them when the theme is dark. */
html:has(body.front) { background: #f7f6f4; }

body.front {
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  padding-top: 4rem;
  overflow-x: clip;
  background: #f7f6f4;
  color: #1c1c1c;
  color-scheme: light;
  font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 460;
  font-size: 1.05rem;
  line-height: 1.45;
}

body.front main,
body.front footer.site {
  width: auto;
  max-width: none;
  margin: 0;
}

body.front main { padding-top: 0; }

body.front main a,
body.front footer.site a { color: inherit; text-decoration: none; }
body.front main a:hover,
body.front footer.site a:hover { color: #000; }

body.front header.site.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  width: auto;
  max-width: none;
  margin: 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
  padding: 0.75rem var(--gutter);
  background: #f7f6f4;
  backdrop-filter: none;
}

body.front .mark {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  color: #1c1c1c;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
}

body.front .mark.in {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 160ms ease;
}

body.front header.site.bar nav {
  margin-left: auto;
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  gap: 1.25rem;
}

body.front header.site.bar nav a { color: #6d6a66; }
body.front header.site.bar nav a:hover { color: #1c1c1c; }

body.front .hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.62fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: 1.35rem var(--gutter) 0.5rem;
}

body.front .hero h1 {
  margin: 0;
  overflow-wrap: normal;
  font-size: clamp(2.7rem, 4.6vw, 4rem);
  font-weight: 580;
  letter-spacing: -0.05em;
  line-height: 0.95;
  color: #1c1c1c;
}

body.front .tagline {
  margin: 0.7rem 0 0;
  max-width: 28rem;
  font-size: 1.2rem;
  line-height: 1.35;
  color: #3f3d3a;
}

body.front .ask-wrap { position: relative; max-width: 36rem; z-index: 3; }

body.front .ask {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  background: #fff;
  border-radius: 999px;
  padding: 0.45rem 0.45rem 0.45rem 1.1rem;
  box-shadow: 0 1px 0 rgba(28, 28, 28, 0.04), 0 16px 40px rgba(28, 28, 28, 0.06);
}

body.front .ask svg { flex: none; color: #6d6a66; }

body.front .ask input {
  flex: 1;
  min-width: 0;
  width: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 1.08rem;
  color: #1c1c1c;
  padding: 0.65rem 0;
}

body.front .ask input::placeholder { color: #9a958e; }

body.front .ask button {
  flex: none;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eceae6;
  color: #1c1c1c;
  cursor: pointer;
  display: grid;
  place-items: center;
}

body.front .ask button:hover { background: #1c1c1c; color: #fff; }

body.front .suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.45rem);
  background: #fff;
  border-radius: 1.15rem;
  box-shadow: 0 18px 50px rgba(28, 28, 28, 0.12);
  padding: 0.85rem 0.35rem 0.35rem;
  z-index: 4;
}

body.front .suggest[hidden] { display: none; }

body.front .suggest-label {
  margin: 0;
  padding: 0.2rem 0.9rem 0.45rem;
  color: #6d6a66;
  font-size: 0.95rem;
}

body.front #suggest-list .suggest-label:not(:first-child) {
  margin-top: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
}

body.front .suggest-item {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: 0.35rem 0.7rem;
  align-items: start;
  padding: 0.7rem 0.85rem;
  border-radius: 0.8rem;
  color: #1c1c1c;
}

body.front .suggest-item strong {
  display: block;
  font-weight: 580;
  letter-spacing: -0.02em;
}

body.front .suggest-item .blurb {
  display: block;
  color: #6d6a66;
  font-size: 0.92rem;
  line-height: 1.35;
}

body.front .suggest-item .markish { color: #6d6a66; padding-top: 0.15rem; }
body.front .suggest-item .go { color: #b0aaa4; }
body.front .suggest-item.on,
body.front .suggest-item:hover { background: #f3f1ee; color: #1c1c1c; }

body.front .suggest-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.35rem 0.5rem 0.15rem;
  padding: 0.7rem 0.4rem 0.45rem;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
  color: #9a958e;
  font-size: 0.82rem;
}

body.front .trend.hidden { visibility: hidden; }

body.front .trend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  max-width: 38rem;
}

body.front .trend span {
  color: #6d6a66;
  font-size: 0.92rem;
  margin-right: 0.2rem;
}

body.front .trend a {
  border: 1px solid rgba(28, 28, 28, 0.1);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.92rem;
  color: #3a3835;
}

body.front .trend a:hover { border-color: #1c1c1c; color: #1c1c1c; }

body.front .stage {
  position: relative;
  height: 292px;
  min-height: 0;
  overflow: hidden;
}

body.front .stage:not(:has(img)) { display: none; }

body.front .shot {
  position: absolute;
  display: block;
  width: 46%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: #e7e4df;
  box-shadow: none;
}

body.front .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.front .shot:hover { z-index: 3; }
body.front .s1 { top: 42px; left: 12px; width: 38%; transform: rotate(-7deg); }
body.front .s2 { top: 36px; right: 16px; width: 36%; transform: rotate(6deg); }
body.front .s3 { bottom: 18px; left: 36px; width: 36%; transform: rotate(4deg); }
body.front .s4 { width: 46%; right: 18px; bottom: 14px; z-index: 2; transform: rotate(-2deg); }

body.front .most { padding: 3rem var(--gutter) 0; }
body.front .people { padding: 1.85rem var(--gutter) 0; }

body.front .most-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 0.75rem;
}

body.front .people-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

body.front .most-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.85rem;
  flex: none;
  margin-left: auto;
  max-width: 100%;
}

body.front .label {
  margin: 0 0 0.15rem;
  font-size: 1.5rem;
  font-weight: 580;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #1c1c1c;
}

body.front .label a { color: inherit; }
body.front .sub { margin: 0.2rem 0 0; color: #6d6a66; }

body.front .most-sponsor {
  flex: none;
  display: flex;
  width: 22.5rem;
  max-width: 100%;
  min-width: 0;
}

body.front .most-sponsor .sponsor-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.4rem 0.8rem 0.4rem 0.4rem;
  background: #fff;
  color: #1c1c1c;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(28, 28, 28, 0.05);
}

body.front .most-sponsor .sponsor-card img {
  width: 3.4rem;
  height: 3.4rem;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  background: #eceae6;
}

body.front .most-sponsor .sponsor-kicker {
  display: block;
  margin: 0;
  color: #6d6a66;
  font-size: 0.75rem;
  font-weight: 460;
  letter-spacing: 0.01em;
}

body.front .most-sponsor .sponsor-card strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 580;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: #1c1c1c;
}

body.front .most-sponsor .sponsor-desc {
  display: block;
  margin-top: 0.1rem;
  color: #6d6a66;
  font-size: 0.82rem;
  line-height: 1.3;
}

body.front .most-tools { display: flex; align-items: center; gap: 0.45rem; flex: none; }
body.front .most-tools a,
body.front .people-head > a { color: #6d6a66; }
body.front .most-tools a:hover,
body.front .people-head > a:hover { color: #1c1c1c; }

body.front .tape-step {
  width: 2.3rem;
  height: 2.3rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #1c1c1c;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(28, 28, 28, 0.08);
}

body.front .tape-step:disabled { opacity: 0.35; cursor: default; }

body.front .sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.15rem;
  margin: 0.15rem 0 0.9rem;
  padding: 0;
}

body.front .sections a {
  color: #6d6a66;
  font-weight: 580;
  letter-spacing: -0.02em;
}

body.front .sections a:hover { color: #1c1c1c; }

body.front .tape {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0.2rem 0 0.6rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

body.front .tape::-webkit-scrollbar { display: none; }
body.front .tape li {
  flex: 0 0 13.6rem;
  /* A nowrap show name is wider than this track. min-width: auto would
     grow the card to fit that title. */
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
}

body.front .tape a {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 0.7rem;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(28, 28, 28, 0.05);
  color: #1c1c1c;
}

body.front .tape img,
body.front .tape-fallback {
  width: 12rem;
  height: 12rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  background: #e7e4df;
}

body.front .tape .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-width: 0;
  overflow: hidden;
  margin: 0.55rem 0 0;
  font-size: 0.95rem;
  font-weight: 580;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

body.front .tape .card-meta {
  display: block;
  min-width: 0;
  margin: 0.25rem 0 0;
  overflow: hidden;
  color: #6d6a66;
  font-size: 0.78rem;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.front .tape a:hover .card-title { text-decoration: underline; text-underline-offset: 0.15em; }

body.front .names {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0 0 0.35rem;
  list-style: none;
}

body.front .names a {
  display: flex;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.5rem 0.85rem;
  background: #fff;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 580;
  letter-spacing: -0.02em;
  color: #1c1c1c;
}

body.front .names a:hover { background: #f3f1ee; }

body.front .letter {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: end;
  margin-top: 1.85rem;
  padding: 2.15rem var(--gutter) 1.6rem;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
}

body.front .letter:has(.interest-pick.is-open) {
  align-items: start;
}

body.front .letter h2 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 580;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #1c1c1c;
}

body.front .letter > div > p { margin: 0.45rem 0 0; color: #6d6a66; }

body.front .letter .newsletter {
  width: min(100%, 28rem);
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: #1c1c1c;
}

body.front .letter .newsletter::before { display: none; }
body.front .letter .newsletter-label { display: none; }

body.front .letter .newsletter-choice .signup,
body.front .letter .newsletter-line { color: #6d6a66; }

body.front .letter .newsletter-choice a.pill,
body.front footer.site a.pill {
  background: #1c1c1c;
  color: #fff;
}

body.front .letter .newsletter-choice a.pill:hover,
body.front footer.site a.pill:hover {
  background: #000;
  color: #fff;
}

body.front .letter .newsletter input[type="email"] {
  flex: 1 1 12rem;
  border: 0;
  border-bottom: 1px solid #1c1c1c;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #1c1c1c;
  font: inherit;
  padding: 0.55rem 0;
}

body.front .letter .newsletter input[type="email"]::placeholder { color: #9a958e; }

body.front .letter .newsletter button {
  border: 0;
  background: #1c1c1c;
  color: #fff;
  font: inherit;
  font-weight: 580;
  border-radius: 999px;
  padding: 0.7rem 1rem;
  cursor: pointer;
}

body.front .letter .newsletter button:hover { background: #000; }

body.front footer.site.foot {
  display: block;
  padding: 2.4rem var(--gutter) 1.6rem;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
  color: #6d6a66;
  font-family: inherit;
  font-size: 0.95rem;
  background: transparent;
}

body.front .foot-top {
  display: grid;
  grid-template-columns: minmax(14rem, 1.45fr) repeat(3, minmax(8rem, 1fr));
  gap: 2.2rem 2.5rem;
  align-items: start;
}

body.front .foot-name {
  margin: 0;
  color: #1c1c1c;
  font-size: clamp(1.7rem, 2.4vw, 2.05rem);
  font-weight: 580;
  letter-spacing: -0.045em;
  line-height: 1;
}

body.front .foot-name .ver {
  margin-left: 0.2em;
  color: #9a958e;
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: 0.55em;
}

body.front .foot-blurb {
  margin: 0.95rem 0 0;
  max-width: 22rem;
  color: #3f3d3a;
  font-size: 0.98rem;
  line-height: 1.45;
}

body.front .foot-top nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.42rem;
}

body.front .foot-label {
  margin: 0 0 0.45rem;
  color: #1c1c1c;
  font-weight: 580;
  letter-spacing: -0.02em;
}

body.front .foot-copy {
  margin: 1.8rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
  color: #6d6a66;
  font-size: 0.92rem;
}

body.front footer.site.foot a:hover { color: #1c1c1c; }

body.front .player,
body.front .player button { font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif; }

@media (max-width: 860px) {
  body.front .hero { grid-template-columns: 1fr; padding-top: 0.25rem; }
  body.front .stage { height: 240px; margin-top: 0.85rem; }
  body.front .s1 { left: 6%; }
  body.front .s2 { right: 6%; }
  body.front .s4 { right: 8%; }
  body.front .tape li { flex-basis: min(78vw, 13.6rem); }
  body.front .tape img,
  body.front .tape-fallback { width: min(12rem, 70vw); height: min(12rem, 70vw); }
  body.front .names { grid-template-columns: 1fr 1fr; }
  body.front .most-head { flex-direction: column; align-items: stretch; }
  body.front .people-head { align-items: flex-start; flex-direction: column; }
  body.front .most-side { flex-direction: column; align-items: stretch; width: 100%; }
  body.front .most-sponsor { flex: none; width: 100%; }
  body.front .most-sponsor .sponsor-card { width: 100%; height: auto; }
  body.front .letter { flex-direction: column; align-items: stretch; }
  body.front .letter .newsletter { width: 100%; }
  body.front .foot-top { grid-template-columns: 1fr 1fr; }
  body.front .foot-brand { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.front) { scroll-behavior: auto; }
  body.front .s1,
  body.front .s2,
  body.front .s3,
  body.front .s4 { transform: none; }
  body.front .mark.in { transition: none; }
}

@media (prefers-color-scheme: dark) {
  html:has(body.front) { background: #f7f6f4; }
  body.front { background: #f7f6f4; color: #1c1c1c; }
}

/* Night selection paints light ink on a gold wash. On these paper
   pages that ink disappears. Keep the wash and the letters black.
   The player stays on the night colors. */
@media (prefers-color-scheme: dark) {
  body.front ::selection,
  body.paper ::selection {
    background: rgba(214, 162, 45, 0.55);
    color: #1c1c1c;
  }
  body.front .player ::selection,
  body.paper .player ::selection {
    background: rgba(214, 162, 45, 0.32);
    color: rgba(204, 209, 217, 0.7);
  }
}

/* Every full page. Same type and header as the homepage. These are the
   day colors. The night block at the end repaints them when the theme
   is dark. Link color is only on main and the footer: a blanket hover
   was painting the player title black. */
html:has(body.paper) { background: #f7f6f4; scroll-behavior: smooth; }

body.paper {
  --gutter: clamp(1.25rem, 4vw, 3.25rem);
  padding-top: 4rem;
  overflow-x: clip;
  background: #f7f6f4;
  color: #1c1c1c;
  color-scheme: light;
  font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 460;
  font-size: 1.05rem;
  line-height: 1.45;
}

body.paper main,
body.paper header.site,
body.paper footer.site,
body.paper .join {
  --bg: #f7f6f4;
  --paper: #ffffff;
  --ink: #1c1c1c;
  --muted: #6d6a66;
  --faint: #9a958e;
  --sep: #b7b2ac;
  --line: rgba(28, 28, 28, 0.1);
  --soft: #f3f1ee;
  --fill: #1c1c1c;
  --on-fill: #ffffff;
  --fill-hover: #000;
  --track: #eceae6;
  --quote: #ddd9d4;
  --accent: #1c1c1c;
  --heart: #f87171;
  --ring: 0 0 0 1px rgba(28, 28, 28, 0.06);
  --shadow: 0 1px 2px rgba(28, 28, 28, 0.04), 0 12px 32px rgba(28, 28, 28, 0.06);
  --float: 0 10px 36px rgba(28, 28, 28, 0.1);
}

body.paper h1,
body.paper h2,
body.paper h3,
body.paper .meta,
body.paper .time,
body.paper .letter-wrap > h2,
body.paper .letter-faq h2,
body.paper .letter-notes h3 {
  font-family: inherit;
}

body.paper main h1 {
  color: #1c1c1c;
  font-weight: 580;
  letter-spacing: -0.045em;
}

body.paper main h2 {
  font-size: 1.35rem;
  font-weight: 580;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

body.paper main > h1,
body.paper .category-hero h1,
body.paper article.page > h1,
body.paper main > article > h1,
body.paper .stage-copy h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.02;
}

body.paper main,
body.paper footer.site {
  width: auto;
  max-width: none;
  margin: 0;
}

body.paper main {
  padding-top: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

body.paper main a,
body.paper footer.site a { color: inherit; text-decoration: none; }
body.paper main a:hover,
body.paper footer.site a:hover { color: #000; }

body.paper main a.pill,
body.paper main a.pill:hover,
body.paper main .pager a:hover { color: #fff; }

body.paper main article > p:not(.meta):not(.who):not(.back):not(.front-meta):not(.front-kicker) a,
body.paper .post a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.paper main :focus-visible,
body.paper header.site :focus-visible,
body.paper footer.site :focus-visible { outline-color: #1c1c1c; }

body.paper .back { margin: 0 0 1.15rem; }
body.paper .back a {
  color: #6d6a66;
  font-weight: 580;
  letter-spacing: -0.02em;
}
body.paper .back a:hover { color: #1c1c1c; }

body.paper:has(.note-lead) nav.crumbs,
body.paper:has(article.show-page) nav.crumbs,
body.new-episodes nav.crumbs { display: none; }

body.paper nav.crumbs { color: #6d6a66; }
body.paper nav.crumbs a { color: #6d6a66; }
body.paper nav.crumbs a:hover { color: #1c1c1c; text-decoration: underline; text-underline-offset: 3px; }
body.paper nav.crumbs li + li::before { color: #9a958e; }

body.paper header.site.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  width: auto;
  max-width: none;
  margin: 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
  padding: 0.75rem var(--gutter);
  background: #f7f6f4;
  backdrop-filter: none;
}

body.paper .mark {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  color: #1c1c1c;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-decoration: none;
  opacity: 1;
  pointer-events: auto;
}

body.paper header.site.bar nav {
  margin-left: auto;
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  gap: 1.25rem;
}

/* Below 400px the links and the toggle share the right side. Below
   360px the wordmark is on screen too, so the row gets tighter. */
@media (max-width: 400px) {
  body.front header.site.bar,
  body.paper header.site.bar { gap: 0.75rem; }
  body.front header.site.bar nav,
  body.paper header.site.bar nav { gap: 0.9rem; }
  body.front header.site.bar nav a,
  body.paper header.site.bar nav a { font-size: 0.98rem; }
  body.front header.site.bar .theme-toggle,
  body.paper header.site.bar .theme-toggle {
    width: 2rem;
    height: 2rem;
  }
}

@media (max-width: 360px) {
  body.front header.site.bar,
  body.paper header.site.bar { gap: 0.4rem; }
  body.front header.site.bar nav,
  body.paper header.site.bar nav { gap: 0.5rem; }
  body.front .mark,
  body.paper .mark { font-size: 0.9rem; }
  body.front header.site.bar nav a,
  body.paper header.site.bar nav a { font-size: 0.82rem; }
  body.front header.site.bar .theme-toggle,
  body.paper header.site.bar .theme-toggle {
    width: 1.75rem;
    height: 1.75rem;
  }
}

body.paper header.site.bar nav a { color: #6d6a66; }
body.paper header.site.bar nav a:hover,
body.paper header.site.bar nav a[aria-current="page"] { color: #1c1c1c; }

body.paper h2 { color: #1c1c1c; }

body.paper .kicker,
body.paper p.who,
body.paper .sub,
body.paper .quiet,
body.paper .empty,
body.paper .desc,
body.paper .count { color: #6d6a66; }

body.paper .kicker { margin: 0 0 0.8rem; }
body.paper p.who { margin: 0.8rem 0 0; }
body.paper .sub { margin: 0 0 1.3rem; }
body.paper .quiet { margin: 0.2rem 0 0; }

body.paper .hero {
  min-height: 0;
  display: block;
  padding: 0.4rem 0 0;
}

body.paper .hero h1,
body.paper .show-hero h1,
body.paper .note-lead h1 {
  margin: 0;
  overflow-wrap: normal;
  color: #1c1c1c;
  font-weight: 580;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

body.paper .hero h1,
body.paper .show-hero h1 { font-size: clamp(3.2rem, 6vw, 5.2rem); }

body.paper .show-hero { max-width: 40rem; padding: 0.4rem 0 0; }

body.paper .show-hero h1 { line-height: 0.98; }

body.paper .show-hero .portrait {
  display: block;
  width: 11rem;
  height: auto;
  aspect-ratio: 1;
  margin: 0 0 1.15rem;
  border-radius: 16px;
  object-fit: cover;
  background: #e7e4df;
  box-shadow: none;
  transform: none;
}

body.paper .show-hero .portrait.show-placeholder {
  display: grid;
  place-items: center;
  color: #1c1c1c;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
}

body.paper .lede,
body.paper .from-show {
  margin: 0.85rem 0 0;
  max-width: 38rem;
  color: #3f3d3a;
  font-size: 1.02rem;
}

body.paper .from-show { margin-top: 0.65rem; color: #6d6a66; font-size: 0.98rem; }

body.paper .from-show .meta {
  color: #1c1c1c;
  font-size: inherit;
  font-weight: 580;
}

body.paper .hero .tagline,
body.paper .note-lead .answer {
  margin: 1rem 0 0;
  max-width: 36rem;
  color: #3f3d3a;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.4;
}

body.paper .note-lead .answer p {
  margin: 0 0 0.85rem;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: 0;
}

body.paper .note-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding: 0.6rem 0 0;
}

body.paper .note-lead h1 {
  font-size: clamp(2.3rem, 4.4vw, 3.7rem);
  line-height: 1.05;
  max-width: 18ch;
}

body.paper .note-lead .portrait {
  display: block;
  width: 12rem;
  margin-left: 0;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  background: #e7e4df;
  box-shadow: none;
  transform: none;
  align-self: center;
  align-self: safe center;
}

body.paper .note-lead .portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.paper .segment-play { margin: 1.4rem 0 0; }

body.paper .play-now,
body.paper .play-now[aria-pressed="true"] {
  background: #1c1c1c;
  color: #fff;
}

body.paper .play-now:hover,
body.paper .play-now[aria-pressed="true"]:hover { background: #000; color: #fff; }

body.paper .segment-play .sharerow,
body.paper .txrow {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #1c1c1c;
  box-shadow: inset 0 0 0 1px rgba(28, 28, 28, 0.22);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 580;
  padding: 0.7rem 1rem;
  border-radius: 999px;
}

body.paper .index { padding: 1.75rem 0 0; }
body.paper .episodes { padding: 2.2rem 0 0; }

body.paper .label {
  margin: 0 0 0.35rem;
  color: #1c1c1c;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 580;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

body.paper .day {
  margin: 2.2rem 0 0.4rem;
  color: #1c1c1c;
  font-size: 1.35rem;
  font-weight: 580;
  letter-spacing: -0.03em;
}

body.paper .people { margin-top: 1.35rem; }

body.paper .people h2 {
  margin: 0 0 0.55rem;
  color: #1c1c1c;
  font-size: 1.15rem;
  font-weight: 580;
  letter-spacing: -0.03em;
}

body.paper ul.chips a {
  background: #fff;
  color: #1c1c1c;
  box-shadow: 0 0 0 1px rgba(28, 28, 28, 0.08);
}

body.paper ul.chips a:hover { background: #f3f1ee; color: #000; }

body.paper .questions,
body.paper .eps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
}

body.paper .questions a,
body.paper .ep {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.1);
  color: inherit;
  text-decoration: none;
}

body.paper #more .questions a { grid-template-columns: minmax(0, 1fr); align-items: start; }

body.paper .ep { grid-template-columns: 4.2rem minmax(0, 1fr) auto; }

body.paper .ep .cover {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 8px;
  object-fit: cover;
  background: #e7e4df;
}

body.paper .questions li[hidden],
body.paper .past[hidden],
body.paper .more[hidden] { display: none; }

body.paper .n { color: #9a958e; font-variant-numeric: tabular-nums; }

body.paper .questions .q,
body.paper .ep .q {
  display: block;
  overflow-wrap: normal;
  font-size: clamp(1.12rem, 1.6vw, 1.35rem);
  font-weight: 580;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

body.paper .desc { display: block; margin-top: 0.15rem; font-size: 0.95rem; }
body.paper .count { text-align: right; white-space: nowrap; }

body.paper .more {
  margin: 0.9rem 0 0;
  border: 0;
  border-bottom: 1px solid #1c1c1c;
  background: transparent;
  color: #1c1c1c;
  font: inherit;
  font-weight: 580;
  letter-spacing: -0.02em;
  padding: 0.35rem 0;
  cursor: pointer;
}

body.paper .more:hover { color: #000; }

body.paper .ask-wrap { position: relative; max-width: 36rem; z-index: 3; margin-top: 1.6rem; }

body.paper .ask {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border-radius: 999px;
  padding: 0.45rem 0.45rem 0.45rem 1.1rem;
  box-shadow: 0 1px 0 rgba(28, 28, 28, 0.04), 0 16px 40px rgba(28, 28, 28, 0.06);
}

body.paper .ask svg { flex: none; color: #6d6a66; }

body.paper .ask input {
  flex: 1;
  min-width: 0;
  width: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 1.05rem;
  color: #1c1c1c;
  padding: 0.65rem 0;
}

body.paper .ask input::placeholder { color: #9a958e; }

body.paper .ask button {
  flex: none;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eceae6;
  color: #1c1c1c;
  cursor: pointer;
  display: grid;
  place-items: center;
}

body.paper .ask button:hover { background: #1c1c1c; color: #fff; }

body.paper .suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.45rem);
  background: #fff;
  border-radius: 1.15rem;
  box-shadow: 0 18px 50px rgba(28, 28, 28, 0.12);
  padding: 0.85rem 0.35rem 0.35rem;
  z-index: 4;
}

body.paper .suggest[hidden] { display: none; }
body.paper .suggest-label { margin: 0; padding: 0.2rem 0.9rem 0.45rem; color: #6d6a66; }

body.paper .suggest-item {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 0.8rem;
  color: #1c1c1c;
}

body.paper .suggest-item strong { display: block; font-weight: 580; letter-spacing: -0.02em; }
body.paper .suggest-item span { display: block; color: #6d6a66; font-size: 0.92rem; }
body.paper .suggest-item.on,
body.paper .suggest-item:hover { background: #f3f1ee; color: #1c1c1c; }

body.paper .suggest-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.35rem 0.5rem 0.15rem;
  padding: 0.7rem 0.4rem 0.45rem;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
  color: #9a958e;
  font-size: 0.82rem;
}

body.paper article.show-page .shelf-row li,
body.paper article.stage .related-episodes .shelf-row li {
  background: #fff;
  color: #1c1c1c;
}

body.paper article.show-page .shelf-head h2 { color: #1c1c1c; }
body.paper article.show-page .shelf-row .meta,
body.paper article.stage .related-episodes .shelf-row .meta { color: #6d6a66; font-size: 0.92rem; }

body.paper .more-episodes summary { color: #6d6a66; }
body.paper .more-episodes a { color: #1c1c1c; }

body.paper .sponsor { margin: 1.6rem 0 2rem; max-width: 36rem; }

body.paper .sponsor-kicker {
  color: #6d6a66;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.paper .sponsor-card {
  background: #fff;
  color: #1c1c1c;
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(28, 28, 28, 0.04), 0 12px 32px rgba(28, 28, 28, 0.06);
}

body.paper .sponsor-card img { background: #f3f1ee; }
body.paper .sponsor-card strong { color: #1c1c1c; font-weight: 580; }
body.paper .sponsor-desc { color: #6d6a66; }

body.paper ul.notes {
  background: #fff;
  color: #1c1c1c;
  box-shadow: 0 0 0 1px rgba(28, 28, 28, 0.06), 0 12px 32px rgba(28, 28, 28, 0.06);
}

body.paper .notes a { color: inherit; }
body.paper .notes .meta,
body.paper .time { color: #6d6a66; }
body.paper .notes li.on { background: #f3f1ee; }

body.paper .note-letter { max-width: 36rem; margin: 1.75rem 0 0; }

body.paper .letter-hero.topic-signup {
  background: transparent;
  color: #1c1c1c;
  box-shadow: none;
  border-radius: 0;
}

body.paper .note-letter .newsletter {
  margin: 0;
  padding: 1rem 1.1rem 1.05rem;
  background: #fff;
  color: #1c1c1c;
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(28, 28, 28, 0.04), 0 12px 32px rgba(28, 28, 28, 0.06);
}
body.paper .note-letter .newsletter::before,
body.paper .letter-hero .newsletter::before { display: none; }
body.paper .note-letter .newsletter-label { display: none; }

body.paper .letter-hero.topic-signup {
  margin: 2.2rem 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
}

body.paper .letter-hero.topic-signup h2 {
  margin: 0;
  max-width: 16em;
  color: #1c1c1c;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 580;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

body.paper .letter-promise { color: #6d6a66; }

body.paper .note-letter .newsletter-choice .signup,
body.paper .note-letter .newsletter-line,
body.paper .letter-hero .newsletter-choice .signup,
body.paper .letter-hero .newsletter-choice .or { color: #6d6a66; }

body.paper .newsletter-choice a.pill,
body.paper footer.site a.pill {
  background: #1c1c1c;
  color: #fff;
  box-shadow: none;
}

body.paper .newsletter-choice a.pill:hover,
body.paper footer.site a.pill:hover { background: #000; color: #fff; }

body.paper .note-letter .newsletter input[type="email"],
body.paper .letter-hero .newsletter input[type="email"] {
  border: 0;
  border-bottom: 1px solid #1c1c1c;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #1c1c1c;
  font: inherit;
  min-height: 0;
  padding: 0.55rem 0;
}

body.paper .note-letter .newsletter input[type="email"]::placeholder,
body.paper .letter-hero .newsletter input[type="email"]::placeholder { color: #9a958e; }

body.paper .note-letter .newsletter button,
body.paper .letter-hero .newsletter button {
  border: 0;
  background: #1c1c1c;
  color: #fff;
  font: inherit;
  font-weight: 580;
  border-radius: 999px;
  min-height: 0;
  padding: 0.7rem 1rem;
}

body.paper .note-letter .newsletter button:hover,
body.paper .letter-hero .newsletter button:hover { background: #000; color: #fff; }

body.paper footer.site {
  padding: 1.4rem var(--gutter) 1.8rem;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
  background: transparent;
  color: #6d6a66;
  font-family: inherit;
  font-size: 0.92rem;
}

body.paper .category-hero,
body.new-episodes.paper main > .shelf { max-width: 46rem; }

body.paper .hero-band.category-hero { max-width: 76rem; }

body.paper .hero-band {
  --band: transparent;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

body.paper main > ul.notes,
body.paper main > ul.directory { max-width: 72rem; }

body.paper main > h1,
body.paper main > p,
body.paper main > .search-results,
body.paper main > .episode-notes,
body.paper main > article:not(.stage):not(.show-page):not(.note-lead),
body.paper .sng-hero,
body.paper .radio-kicker,
body.paper .radio-lead,
body.paper .radio-cats,
body.paper .radio-stage,
body.paper.radio .player,
body.paper .letter-hero-in,
body.paper .letter-wrap,
body.paper .letter-proof,
body.paper.letter .sponsor {
  max-width: 46rem;
}

body.paper .sng-hero,
body.paper .letter-hero-in,
body.paper .letter-wrap,
body.paper .letter-proof,
body.paper.letter .sponsor {
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

/* The title and the sponsor were centering in the full page. The arrows
   sit outside the card, so the title, player, and sponsor share the card:
   one arrow and one gap in from the column's left edge. */
body.paper.radio .radio-kicker,
body.paper.radio .radio-lead,
body.paper.radio .radio-cats,
body.paper.radio .player,
body.paper.radio main > .sponsor {
  width: calc(100% - 6.9rem);
  max-width: calc(46rem - 6.9rem);
  margin-left: calc(2.75rem + 0.7rem);
  margin-right: 0;
}

body.paper article.stage { max-width: 76rem; }

body.paper .letter-hero {
  background: transparent;
  color: #1c1c1c;
  box-shadow: none;
}

body.paper .letter-hero h1 { color: #1c1c1c; }

body.paper .letter-hero .interests legend { color: #6d6a66; }
body.paper .letter-hero .interests label { color: #1c1c1c; }
body.paper .letter-hero .interests input { accent-color: #1c1c1c; }
body.paper .letter-hero :focus-visible { outline-color: #1c1c1c; }

body.paper .letter-hero .newsletter-status { background: #f3f1ee; color: #1c1c1c; }

/* The subject picker is one partial on New, Latest, categories, and topics.
   Paper used to flatten it into the page. It stays a dark card, like the
   sample issue, so the signup is readable in either scheme. */
body.paper .letter-hero.topic-signup {
  background: #14181f;
  color: #f6f1e6;
  margin: 3.25rem 0 1.5rem;
  padding: 1.7rem 1.35rem 1.5rem;
  border: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 -3px 0 #d9b832, 0 0 0 1px rgba(217, 184, 50, 0.45);
}

body.paper .letter-hero.topic-signup h2 {
  color: #f6f1e6;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

body.paper .letter-hero.topic-signup .letter-promise,
body.paper .letter-hero.topic-signup .newsletter-choice .or,
body.paper .letter-hero.topic-signup .interests legend { color: #e4dccb; }

body.paper .letter-hero.topic-signup .newsletter-choice .signup,
body.paper .letter-hero.topic-signup a,
body.paper .letter-hero.topic-signup a:hover,
body.paper .letter-hero.topic-signup .interests label { color: #f6f1e6; }

body.paper .letter-hero.topic-signup a:hover { text-decoration: none; }

body.paper .letter-hero.topic-signup .newsletter-choice a.pill,
body.paper .letter-hero.topic-signup .newsletter-choice a.pill:hover {
  background: transparent;
  color: #f6f1e6;
  box-shadow: inset 0 0 0 1.5px #f6f1e6;
}

body.paper .letter-hero.topic-signup .newsletter-choice a.pill:hover {
  background: #f6f1e6;
  color: #14181f;
}

body.paper .letter-hero.topic-signup .newsletter input[type="email"] {
  background: #fcfcfc;
  color: #14181f;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
}

body.paper .letter-hero.topic-signup .newsletter input[type="email"]::placeholder { color: #5e5b57; }

body.paper .letter-hero.topic-signup .newsletter button,
body.paper .letter-hero.topic-signup .newsletter button:hover {
  background: #d9b832;
  color: #14181f;
  border: 0;
}

body.paper .letter-hero.topic-signup .newsletter button:hover { background: #e4c65a; }

body.paper .letter-hero.topic-signup .interests input { accent-color: #d9b832; }

body.paper .letter-hero.topic-signup :focus-visible { outline-color: #d9b832; }

body.paper .index > .day-block:first-child .day { margin-top: 0.15rem; }

body.paper .newsletter-status.is-alert {
  background: #1c1c1c;
  color: #fff;
  animation: none;
}

body.paper .player,
body.paper .player button { font-family: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif; }

@media (max-width: 860px) {
  body.paper .note-lead { grid-template-columns: 1fr; }
  body.paper .note-lead .portrait { width: 10rem; margin: 1.5rem auto 0; }
  body.paper .show-hero .portrait { width: 8.5rem; }
  body.paper .questions a { grid-template-columns: 2.2rem minmax(0, 1fr); }
  body.paper #more .questions a { grid-template-columns: minmax(0, 1fr); }
  body.paper .ep { grid-template-columns: 3.4rem minmax(0, 1fr); }
  body.paper .ep .cover { width: 3.4rem; height: 3.4rem; }
  body.paper .count { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.paper) { scroll-behavior: auto; }
}

@media (prefers-color-scheme: dark) {
  html:has(body.paper) { background: #f7f6f4; }
  body.paper { background: #f7f6f4; color: #1c1c1c; }
}

/* Day colors above stay put for a light OS and for data-theme=light.
   These two blocks repaint the hardcoded paper and front lock. Keep
   them in step with each other. */
:root[data-theme="dark"]:has(body.front),
:root[data-theme="dark"]:has(body.paper) { background: #0e2439; }

:root[data-theme="dark"] body.front,
:root[data-theme="dark"] body.paper {
  color-scheme: dark;
  background: #0e2439;
  color: rgba(204, 209, 217, 0.7);
  & main, & header.site, & footer.site, & .join {
    --bg: #0e2439;
    --paper: #0e2439;
    --ink: rgba(204, 209, 217, 0.7);
    --muted: #848c97;
    --faint: #7e8a9c;
    --sep: #1f364d;
    --line: #1f364d;
    --soft: #1f364d;
    --fill: #d6a22d;
    --on-fill: #37404a;
    --fill-hover: #edc835;
    --track: #1f364d;
    --quote: rgba(214, 162, 45, 0.45);
    --accent: #d6a22d;
    --heart: #e7a3a3;
    --ring: 0 0 0 1px #1f364d;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 34px rgba(0, 0, 0, 0.32);
    --float: 0 12px 36px rgba(0, 0, 0, 0.46);
  }
  & h1, & h2, & h3, & strong, & .label, & .day, & .q, & .card-title, & .foot-label { color: rgba(235, 235, 235, 0.66); }
  & .mark, & .brand, & .foot-name { color: #d6a22d; }
  & .mark:hover, & .brand:hover { color: #edc835; }
  & .foot-name .ver, & .n, & .card-meta, & .sponsor-desc, & .suggest-foot, & .suggest-item span { color: #7e8a9c; }
  & header.site, & footer.site { background: #0e1b2e; color: rgba(204, 209, 217, 0.7); }
  & header.site { border-bottom: 3px solid #1f364d; }
  /* The bar is the same height as the page offset, so Radio's chips
     start on the border. Night mode paints that border, so give them air. */
  &.radio main { padding-top: 1.5rem; }
  & footer.site { border-top: 3px solid #1f364d; }
  & .letter-hero { background: transparent; color: rgba(204, 209, 217, 0.7); }
  & header.site.bar nav a,
  & footer.site a,
  & .meta, & .sub, & .quiet, & .kicker, & .desc, & .count, & .time,
  & .from-show, & .back a, & nav.crumbs, & nav.crumbs a,
  & .sections a, & .most-tools a, & .people-head > a,
  & .letter > div > p, & .letter .newsletter-line, & .letter .newsletter-choice .signup,
  & .note-letter .newsletter-choice .signup, & .note-letter .newsletter-line,
  & .letter-hero .newsletter-choice .signup, & .letter-hero .newsletter-choice .or,
  & .letter-promise, & .letter-trust, & .sponsor-kicker, & .more-episodes summary, & .suggest-label {
    color: #848c97;
  }
  & header.site.bar nav a:hover,
  & header.site.bar nav a[aria-current="page"],
  & footer.site a:hover,
  & main a:hover,
  & .back a:hover,
  & nav.crumbs a:hover,
  & .sections a:hover,
  & .most-tools a:hover,
  & .people-head > a:hover,
  & .more:hover { color: #ebebeb; }
  & .ask, & .suggest, & .tape a, & .names a, & .sponsor-card, & ul.notes,
  & ul.chips a, & .note-letter .newsletter, & .share-menu,
  & article.show-page .shelf-row li,
  & article.stage .related-episodes .shelf-row li {
    background: #0e2439;
    color: rgba(204, 209, 217, 0.7);
    box-shadow: 0 0 0 1px #1f364d;
  }
  & .names a:hover, & .suggest-item:hover, & .suggest-item.on,
  & ul.chips a:hover, & .notes li.on,
  & .share-menu button:hover, & .share-menu button:focus-visible {
    background: #1f364d;
    color: #ebebeb;
  }
  & .ask input, & .suggest-item, & .share-menu button,
  & .letter .newsletter input[type="email"],
  & .note-letter .newsletter input[type="email"],
  & .letter-hero .newsletter input[type="email"] {
    color: rgba(204, 209, 217, 0.7);
    background: transparent;
    border-color: #1f364d;
  }
  & input::placeholder { color: #7e8a9c; }
  & .ask svg, & .theme-toggle { color: #6b747b; }
  & .theme-toggle:hover { color: #ebebeb; }
  & .ask button, & .tape-step, & .share-toggle {
    background: #1f364d;
    color: #848c97;
    border-color: #1f364d;
  }
  & .ask button:hover, & .tape-step:hover, & .share-toggle:hover, & .trend a:hover {
    background: #1f364d;
    color: #ebebeb;
    border-color: #edc835;
  }
  & .play-now, & .play-now[aria-pressed="true"],
  & .letter .newsletter button, & .note-letter .newsletter button,
  & .letter-hero .newsletter button, & .copy-embed,
  & .newsletter-choice a.pill, & footer.site a.pill {
    background: #d6a22d;
    color: #37404a;
    border-color: #d6a22d;
  }
  & .play-now:hover, & .play-now[aria-pressed="true"]:hover,
  & .letter .newsletter button:hover, & .note-letter .newsletter button:hover,
  & .letter-hero .newsletter button:hover, & .copy-embed:hover,
  & .newsletter-choice a.pill:hover, & footer.site a.pill:hover {
    background: #edc835;
    color: #37404a;
    border-color: #edc835;
  }
  & .letter-hero a.letter-secondary {
    background: transparent;
    color: #ebebeb;
    box-shadow: inset 0 0 0 1.5px #9aa3ad;
  }
  & .letter-hero a.letter-secondary:hover {
    background: #ebebeb;
    color: #0e2439;
    box-shadow: inset 0 0 0 1.5px #ebebeb;
  }
  & .trend a { background: #0e2439; color: #848c97; border-color: #1f364d; }
  & .lede, & .tagline, & .foot-blurb, & .note-lead .answer, & .hero .tagline { color: rgba(204, 209, 217, 0.7); }
  & .questions, & .eps, & .questions a, & .ep, & .letter, & .foot-copy, & .suggest-foot, & .more { border-color: #1f364d; }
  & .shot, & .portrait, & .ep .cover, & .tape-fallback, & .sponsor-card img,
  & .show-hero .portrait, & .note-lead .portrait { background: #1f364d; }
  & .more { color: #848c97; background: transparent; }
  /* The paper signup locks these to day ink. On the night page that
     ink is the same color as the background. */
  & .letter-hero .newsletter input[type="email"] {
    color: #ebebeb;
    border-bottom-color: #9aa3ad;
  }
  & .letter-hero .newsletter input[type="email"]::placeholder { color: #b7c0c9; }
  & .letter-hero .interests legend { color: #c5ced6; }
  & .letter-hero .interests label { color: #ebebeb; }
  & .letter-hero .interests input { accent-color: #d6a22d; }
  /* The subject signup stays a dark card in either scheme. */
  & .letter-hero.topic-signup { background: #14181f; color: #f6f1e6; box-shadow: inset 0 -3px 0 #d9b832, 0 0 0 1px rgba(217, 184, 50, 0.45); }
  & .letter-hero.topic-signup h2,
  & .letter-hero.topic-signup a,
  & .letter-hero.topic-signup a:hover,
  & .letter-hero.topic-signup .newsletter-choice .signup,
  & .letter-hero.topic-signup .interests label { color: #f6f1e6; }
  & .letter-hero.topic-signup .letter-promise,
  & .letter-hero.topic-signup .newsletter-choice .or,
  & .letter-hero.topic-signup .interests legend { color: #e4dccb; }
  & .letter-hero.topic-signup .newsletter-choice a.pill {
    background: transparent;
    color: #f6f1e6;
    box-shadow: inset 0 0 0 1.5px #f6f1e6;
  }
  & .letter-hero.topic-signup .newsletter-choice a.pill:hover {
    background: #f6f1e6;
    color: #14181f;
  }
  & .letter-hero.topic-signup .newsletter input[type="email"] {
    background: #fcfcfc;
    color: #14181f;
    border: 0;
    border-radius: 14px;
  }
  & .letter-hero.topic-signup .newsletter input[type="email"]::placeholder { color: #5e5b57; }
  & .letter-hero.topic-signup .newsletter button,
  & .letter-hero.topic-signup .newsletter button:hover {
    background: #d9b832;
    color: #14181f;
    border: 0;
  }
  & .letter-hero.topic-signup .newsletter button:hover { background: #e4c65a; }
  & .segment-play .sharerow,
  & .txrow,
  & .share-toggle {
    color: #ebebeb;
    background: transparent;
    border-color: #9aa3ad;
    box-shadow: inset 0 0 0 1px #9aa3ad;
  }
  & .segment-play .sharerow:hover,
  & .txrow:hover,
  & .share-toggle:hover {
    color: #0e2439;
    background: #ebebeb;
    border-color: #ebebeb;
    box-shadow: inset 0 0 0 1px #ebebeb;
  }
  & ::selection { background: rgba(214, 162, 45, 0.55); color: #1c1c1c; }
  & .player ::selection { background: rgba(214, 162, 45, 0.32); color: rgba(204, 209, 217, 0.7); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):has(body.front),
  :root:not([data-theme="light"]):has(body.paper) { background: #0e2439; }

  :root:not([data-theme="light"]) body.front,
  :root:not([data-theme="light"]) body.paper {
    color-scheme: dark;
    background: #0e2439;
    color: rgba(204, 209, 217, 0.7);
    & main, & header.site, & footer.site, & .join {
      --bg: #0e2439;
      --paper: #0e2439;
      --ink: rgba(204, 209, 217, 0.7);
      --muted: #848c97;
      --faint: #7e8a9c;
      --sep: #1f364d;
      --line: #1f364d;
      --soft: #1f364d;
      --fill: #d6a22d;
      --on-fill: #37404a;
      --fill-hover: #edc835;
      --track: #1f364d;
      --quote: rgba(214, 162, 45, 0.45);
      --accent: #d6a22d;
      --heart: #e7a3a3;
      --ring: 0 0 0 1px #1f364d;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 14px 34px rgba(0, 0, 0, 0.32);
      --float: 0 12px 36px rgba(0, 0, 0, 0.46);
    }
    & h1, & h2, & h3, & strong, & .label, & .day, & .q, & .card-title, & .foot-label { color: rgba(235, 235, 235, 0.66); }
    & .mark, & .brand, & .foot-name { color: #d6a22d; }
    & .mark:hover, & .brand:hover { color: #edc835; }
    & .foot-name .ver, & .n, & .card-meta, & .sponsor-desc, & .suggest-foot, & .suggest-item span { color: #7e8a9c; }
    & header.site, & footer.site { background: #0e1b2e; color: rgba(204, 209, 217, 0.7); }
    & header.site { border-bottom: 3px solid #1f364d; }
    /* The bar is the same height as the page offset, so Radio's chips
       start on the border. Night mode paints that border, so give them air. */
    &.radio main { padding-top: 1.5rem; }
    & footer.site { border-top: 3px solid #1f364d; }
    & .letter-hero { background: transparent; color: rgba(204, 209, 217, 0.7); }
    & header.site.bar nav a,
    & footer.site a,
    & .meta, & .sub, & .quiet, & .kicker, & .desc, & .count, & .time,
    & .from-show, & .back a, & nav.crumbs, & nav.crumbs a,
    & .sections a, & .most-tools a, & .people-head > a,
    & .letter > div > p, & .letter .newsletter-line, & .letter .newsletter-choice .signup,
    & .note-letter .newsletter-choice .signup, & .note-letter .newsletter-line,
    & .letter-hero .newsletter-choice .signup, & .letter-hero .newsletter-choice .or,
    & .letter-promise, & .letter-trust, & .sponsor-kicker, & .more-episodes summary, & .suggest-label {
      color: #848c97;
    }
    & header.site.bar nav a:hover,
    & header.site.bar nav a[aria-current="page"],
    & footer.site a:hover,
    & main a:hover,
    & .back a:hover,
    & nav.crumbs a:hover,
    & .sections a:hover,
    & .most-tools a:hover,
    & .people-head > a:hover,
    & .more:hover { color: #ebebeb; }
    & .ask, & .suggest, & .tape a, & .names a, & .sponsor-card, & ul.notes,
    & ul.chips a, & .note-letter .newsletter, & .share-menu,
    & article.show-page .shelf-row li,
    & article.stage .related-episodes .shelf-row li {
      background: #0e2439;
      color: rgba(204, 209, 217, 0.7);
      box-shadow: 0 0 0 1px #1f364d;
    }
    & .names a:hover, & .suggest-item:hover, & .suggest-item.on,
    & ul.chips a:hover, & .notes li.on,
    & .share-menu button:hover, & .share-menu button:focus-visible {
      background: #1f364d;
      color: #ebebeb;
    }
    & .ask input, & .suggest-item, & .share-menu button,
    & .letter .newsletter input[type="email"],
    & .note-letter .newsletter input[type="email"],
    & .letter-hero .newsletter input[type="email"] {
      color: rgba(204, 209, 217, 0.7);
      background: transparent;
      border-color: #1f364d;
    }
    & input::placeholder { color: #7e8a9c; }
    & .ask svg, & .theme-toggle { color: #6b747b; }
    & .theme-toggle:hover { color: #ebebeb; }
    & .ask button, & .tape-step, & .share-toggle {
      background: #1f364d;
      color: #848c97;
      border-color: #1f364d;
    }
    & .ask button:hover, & .tape-step:hover, & .share-toggle:hover, & .trend a:hover {
      background: #1f364d;
      color: #ebebeb;
      border-color: #edc835;
    }
    & .play-now, & .play-now[aria-pressed="true"],
    & .letter .newsletter button, & .note-letter .newsletter button,
    & .letter-hero .newsletter button, & .copy-embed,
    & .newsletter-choice a.pill, & footer.site a.pill {
      background: #d6a22d;
      color: #37404a;
      border-color: #d6a22d;
    }
    & .play-now:hover, & .play-now[aria-pressed="true"]:hover,
    & .letter .newsletter button:hover, & .note-letter .newsletter button:hover,
    & .letter-hero .newsletter button:hover, & .copy-embed:hover,
    & .newsletter-choice a.pill:hover, & footer.site a.pill:hover {
      background: #edc835;
      color: #37404a;
      border-color: #edc835;
    }
    & .letter-hero a.letter-secondary {
      background: transparent;
      color: #ebebeb;
      box-shadow: inset 0 0 0 1.5px #9aa3ad;
    }
    & .letter-hero a.letter-secondary:hover {
      background: #ebebeb;
      color: #0e2439;
      box-shadow: inset 0 0 0 1.5px #ebebeb;
    }
    & .trend a { background: #0e2439; color: #848c97; border-color: #1f364d; }
    & .lede, & .tagline, & .foot-blurb, & .note-lead .answer, & .hero .tagline { color: rgba(204, 209, 217, 0.7); }
    & .questions, & .eps, & .questions a, & .ep, & .letter, & .foot-copy, & .suggest-foot, & .more { border-color: #1f364d; }
    & .shot, & .portrait, & .ep .cover, & .tape-fallback, & .sponsor-card img,
    & .show-hero .portrait, & .note-lead .portrait { background: #1f364d; }
    & .more { color: #848c97; background: transparent; }
    /* The paper signup locks these to day ink. On the night page that
       ink is the same color as the background. */
    & .letter-hero .newsletter input[type="email"] {
      color: #ebebeb;
      border-bottom-color: #9aa3ad;
    }
    & .letter-hero .newsletter input[type="email"]::placeholder { color: #b7c0c9; }
    & .letter-hero .interests legend { color: #c5ced6; }
    & .letter-hero .interests label { color: #ebebeb; }
    & .letter-hero .interests input { accent-color: #d6a22d; }
    /* The subject signup stays a dark card in either scheme. */
    & .letter-hero.topic-signup { background: #14181f; color: #f6f1e6; box-shadow: inset 0 -3px 0 #d9b832, 0 0 0 1px rgba(217, 184, 50, 0.45); }
    & .letter-hero.topic-signup h2,
    & .letter-hero.topic-signup a,
    & .letter-hero.topic-signup a:hover,
    & .letter-hero.topic-signup .newsletter-choice .signup,
    & .letter-hero.topic-signup .interests label { color: #f6f1e6; }
    & .letter-hero.topic-signup .letter-promise,
    & .letter-hero.topic-signup .newsletter-choice .or,
    & .letter-hero.topic-signup .interests legend { color: #e4dccb; }
    & .letter-hero.topic-signup .newsletter-choice a.pill {
      background: transparent;
      color: #f6f1e6;
      box-shadow: inset 0 0 0 1.5px #f6f1e6;
    }
    & .letter-hero.topic-signup .newsletter-choice a.pill:hover {
      background: #f6f1e6;
      color: #14181f;
    }
    & .letter-hero.topic-signup .newsletter input[type="email"] {
      background: #fcfcfc;
      color: #14181f;
      border: 0;
      border-radius: 14px;
    }
    & .letter-hero.topic-signup .newsletter input[type="email"]::placeholder { color: #5e5b57; }
    & .letter-hero.topic-signup .newsletter button,
    & .letter-hero.topic-signup .newsletter button:hover {
      background: #d9b832;
      color: #14181f;
      border: 0;
    }
    & .letter-hero.topic-signup .newsletter button:hover { background: #e4c65a; }
    & .segment-play .sharerow,
    & .txrow,
    & .share-toggle {
      color: #ebebeb;
      background: transparent;
      border-color: #9aa3ad;
      box-shadow: inset 0 0 0 1px #9aa3ad;
    }
    & .segment-play .sharerow:hover,
    & .txrow:hover,
    & .share-toggle:hover {
      color: #0e2439;
      background: #ebebeb;
      border-color: #ebebeb;
      box-shadow: inset 0 0 0 1px #ebebeb;
    }
    & ::selection { background: rgba(214, 162, 45, 0.55); color: #1c1c1c; }
    & .player ::selection { background: rgba(214, 162, 45, 0.32); color: rgba(204, 209, 217, 0.7); }
  }
}