/* Clipdesk — deliberately plain. Editorial weight comes from the writing,
   not the chrome. Two-column clip cards collapse to one column under 760px. */

:root {
  --ink: #16181d;
  --ink-soft: #5b616e;
  --ink-faint: #8b909c;
  --rule: #e3e5ea;
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  --accent: #1f4ed8;
  --measure: 62ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eaef;
    --ink-soft: #a3a9b8;
    --ink-faint: #767d8d;
    --rule: #2a2e37;
    --bg: #111318;
    --bg-soft: #181b21;
    --accent: #7aa2ff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 ui-serif, Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
}

main, .masthead, .footer {
  max-width: 1040px;
  margin: 0 auto;
  padding-inline: 20px;
}

/* Skip link. The edition page is long and the clips are the whole point, so
   keyboard users get a direct route past the masthead. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg);
  font: 600 14px/1 ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* Masthead */
.masthead { padding-block: 26px 22px; border-bottom: 1px solid var(--rule); }
.masthead-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
}
/* On the home page the wordmark is the h1. It must not pick up heading size or
   margins; it is a logo that happens to be the page heading. */
.wordmark-head { margin: 0; font-size: inherit; font-weight: inherit; line-height: 1; }
.wordmark {
  font: 700 15px/1 ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.nav { display: flex; gap: 20px; }
.nav a {
  font: 500 14px/1 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft);
  text-decoration: none;
}
.nav a:hover { color: var(--ink); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }

.promise {
  margin: 16px 0 0;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 18px;
  font-style: italic;
}

/* Edition */
.edition-head { padding-block: 40px 8px; }
.edition-head h1 { margin: 0; font-size: clamp(28px, 4vw, 38px); line-height: 1.15; letter-spacing: -.01em; }

.meta, .clip-meta, .group-note {
  font: 13px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--ink-faint);
}
.meta { margin: 10px 0 0; }

.group { margin-block: 52px; }
.group-title {
  margin: 0 0 6px;
  font: 700 12px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.group-note { margin: 0 0 22px; max-width: var(--measure); }

/* Contents. Only rendered past four clips, where the edition stops being
   scannable in one screen. */
.contents {
  margin-block: 34px;
  padding: 22px 26px;
  background: var(--bg-soft);
  border-radius: 10px;
}
.contents-title {
  margin: 0 0 16px;
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.contents-group + .contents-group { margin-top: 18px; }
.contents-cat {
  margin: 0 0 7px;
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.contents-list { margin: 0; padding-left: 20px; }
.contents-list li { margin-bottom: 13px; }
.contents-list a { text-decoration: none; }
.contents-list a:hover { text-decoration: underline; }
/* Show and guest sit above the hook: readers weigh the podcast before they
   decide whether the hook is worth reading. */
.contents-src {
  display: block;
  font: 600 12.5px/1.45 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft);
}

/* Episode. The container for one conversation; the guest, hosts and note are
   stated once here rather than repeated on every clip beneath. */
.episode { margin-bottom: 40px; }
.episode-head {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  padding: 18px 0 20px;
  border-top: 2px solid var(--ink);
}
.episode-who { min-width: 0; }
/* Show and guest carry equal weight. Readers decide on the podcast before they
   reach the hook, so the show cannot sit in a metadata column. */
.show {
  margin: 0 0 2px;
  font: 700 21px/1.25 ui-serif, Georgia, serif;
  letter-spacing: -.01em;
  color: var(--accent);
}
.guest { margin: 0; font-size: 21px; line-height: 1.25; letter-spacing: -.01em; font-weight: 600; }
.guest .org {
  font: 400 15px/1 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-faint);
  margin-left: 9px;
  white-space: nowrap;
}
.guest-note {
  margin: 10px 0 0;
  font: 14.5px/1.55 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.episode-meta { margin: 0; min-width: 0; }
.meta-label {
  margin: 0 0 2px;
  font: 700 10.5px/1.4 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hosts {
  margin: 0 0 14px;
  font: 16px/1.4 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
}
.episode-link { margin: 0 0 2px; font: 14px/1.45 ui-sans-serif, system-ui, sans-serif; }
.episode-dur {
  margin: 0;
  font: 12.5px/1.5 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-faint);
}

/* Compact episode header. Sits in the flow directly under the full header, so
   it reserves its own space and nothing shifts when it appears. It is painted
   only once the full header has scrolled past the top, and because it lives
   inside .episode it unsticks when the next episode arrives and that episode's
   own bar takes over. */
.episode-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  margin-bottom: 4px;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  font: 13px/1.4 ui-sans-serif, system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.episode-sticky.is-stuck { opacity: 1; pointer-events: auto; }
.sticky-show { font-weight: 700; color: var(--accent); flex: none; }
.sticky-guest {
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticky-count { color: var(--ink-faint); flex: none; margin-left: auto; }
.sticky-link { flex: none; font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  .episode-sticky { transition: none; }
}

/* Clips sit inside the episode, tied to it by the rail on the left. */
.cliplist { list-style: none; margin: 0; padding: 0 0 0 20px; border-left: 2px solid var(--rule); }

.clip {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 34px;
  /* Top padding trimmed because the compact bar above already reserves space. */
  padding: 8px 0 26px;
}
.clip + .clip { padding-top: 26px; }
.clip + .clip { border-top: 1px solid var(--rule); }
.clip-main { min-width: 0; }
.seq {
  display: inline-block;
  margin-right: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  letter-spacing: .06em;
}

.kicker {
  margin: 0 0 8px;
  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hook {
  margin: 0 0 12px;
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.summary { margin: 0 0 20px; color: var(--ink-soft); max-width: var(--measure); }

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: var(--bg-soft);
  border-radius: 6px;
  overflow: hidden;
}
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Local-file fallback. See the note in edition.html: YouTube will not play in a
   page whose origin is null. */
.player-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
.player-fallback::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.15) 55%, rgba(0,0,0,.35));
}
.player-fallback-note {
  position: relative;
  padding: 10px 14px;
  font: 12.5px/1.45 ui-sans-serif, system-ui, sans-serif;
  color: #fff;
}
.player-fallback:hover .player-fallback-note { text-decoration: underline; }

/* Audio clips: publisher-hosted podcasts with no video to embed. */
.audio-player { padding: 18px 0 4px; }
.audio-player audio { width: 100%; height: 40px; }
.audio-note {
  margin: 8px 0 0;
  font: 12px/1.5 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-faint);
}

.clip-meta { margin: 12px 0 0; }
.clip-meta .length { font-weight: 600; color: var(--ink-soft); }
.clip-meta .sep { margin-inline: 7px; }

/* Context column */
.clip-context {
  border-left: 2px solid var(--rule);
  padding-left: 22px;
  min-width: 0;
}
.observations { margin: 0 0 18px; padding: 0 0 0 18px; }
.observations li { margin-bottom: 10px; font-size: 15.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li {
  font: 11.5px/1.7 ui-sans-serif, system-ui, sans-serif;
  padding: 0 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink-faint);
}
.context-label {
  margin: 0 0 6px;
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Full-episode picks */
.full-episode { padding-block: 22px; border-top: 1px solid var(--rule); }
.full-episode h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.3; }
.full-episode p:last-child { margin: 12px 0 0; color: var(--ink-soft); max-width: var(--measure); }

/* Archive */
.archive { padding-block: 40px; }
.archive-title { margin: 0 0 6px; font-size: clamp(26px, 3.4vw, 32px); letter-spacing: -.01em; }
.archive-entry { padding-block: 26px; border-bottom: 1px solid var(--rule); }
.archive-entry h2 { margin: 0; font-size: 23px; }
/* Which shows an edition drew on. Readers weigh the podcast before the hook,
   so the listing says whose conversations are inside before it quotes them. */
.archive-shows {
  margin: 8px 0 0;
  font: 13px/1.5 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.teasers { margin: 14px 0 0; padding: 0; list-style: none; }
.teasers li { margin-bottom: 9px; color: var(--ink-soft); max-width: var(--measure); }
.tag {
  display: inline-block;
  margin-right: 8px;
  font: 600 10px/1.9 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.empty { color: var(--ink-faint); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
.back { margin-block: 44px; }

/* Bio. A curation product is a judgement, so the reader is told whose before
   they are asked to accept any of it. Brief on purpose: the clips are what
   they came for and /about/ carries the longer version. */
.bio { padding-block: 40px 0; max-width: var(--measure); }
.bio h1 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.bio-lede { margin: 12px 0 0; color: var(--ink-soft); }
.bio-links {
  margin: 14px 0 0;
  font: 14px/1.5 ui-sans-serif, system-ui, sans-serif;
}

/* About */
.page { padding-block: 40px 10px; max-width: var(--measure); }
.page .bio { padding-block: 0; }
.page h2 {
  margin: 38px 0 10px;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.page p { margin: 0 0 14px; color: var(--ink-soft); }
.rules { margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); }
.rules li { margin-bottom: 12px; }
/* The one place the page asks for a reply. Set on its own line at full ink so
   a reader who has scrolled to the invitation does not have to hunt for it. */
.contact {
  margin: 18px 0 0;
  font: 600 17px/1.5 ui-sans-serif, system-ui, sans-serif;
}
.contact a { color: var(--accent); }

/* Home: the latest edition sits under the bio and needs saying so. */
.eyebrow {
  margin: 0 0 8px;
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.edition-head h2 {
  margin: 0;
  font-size: clamp(26px, 3.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.bio + .edition .edition-head {
  margin-top: 36px;
  padding-block: 34px 8px;
  border-top: 1px solid var(--rule);
}

/* How long each clip runs, in the contents list. A reader deciding what to
   open wants the cost of each one next to it. */
.contents-len {
  display: block;
  margin-top: 3px;
  font: 12px/1.4 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-faint);
}

.episode-date { color: var(--ink-soft); font-weight: 600; }

/* Archive re-release. Stated plainly rather than footnoted, because a reader
   who takes a 2023 view for this week's has been misled by the page. */
.rerun {
  margin: 10px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--rule);
  font: 12.5px/1.5 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-faint);
}

/* Footer */
.footer { padding-block: 34px 60px; margin-top: 50px; border-top: 1px solid var(--rule); }
.footer p { margin: 0 0 10px; font: 13px/1.6 ui-sans-serif, system-ui, sans-serif; color: var(--ink-faint); }
.footer-name { color: var(--ink-soft); font-weight: 600; }
.disclaimer { max-width: var(--measure); }

@media (max-width: 760px) {
  .clip, .episode-head { grid-template-columns: 1fr; gap: 20px; }
  .clip-context { border-left: 0; border-top: 2px solid var(--rule); padding-left: 0; padding-top: 18px; }
  .cliplist { padding-left: 12px; }
  .contents { padding: 18px; }
}