/* 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;
}

/* The masthead hides on the way down the page and returns on the way up, on
   Brian's instruction of 17 September 2026. Everything here is written so that
   it cannot fight the two sticky tiers below it.

   The one rule: no height changes. The bar hides with a transform, which does
   not reflow, and the strip it occupies is reserved once as a constant padding
   on the body. Change either of those to something that resizes and the
   oscillation documented on .episode-head comes straight back.

   --stick is the offset the sticky tiers hang from: the masthead's measured
   height while the bar is shown, 0px while it is hidden. The episode tier adds
   --cat-bar on top of it, because that tier sits below the category bar and
   --cat-bar is that bar's exact rendered height.

   All of it is scoped to html.mast-dynamic, which the script adds. With
   JavaScript off the masthead stays in normal flow, the tiers pin to the top of
   the viewport as they did before, and nothing here applies. */
:root { --stick: 0px; }

html.mast-dynamic { --stick: var(--mh, 0px); }
html.mast-dynamic.mast-hidden { --stick: 0px; }

html.mast-dynamic body { padding-top: var(--mh, 0px); }

html.mast-dynamic .masthead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  max-width: none;
  padding-inline: 0;
  background: var(--bg);
  transition: transform 150ms ease;
}
/* The centring moves inward, because the fixed bar itself has to run the full
   width of the viewport or the page scrolls visibly past its edges. */
html.mast-dynamic .masthead-bar {
  max-width: 1040px;
  margin: 0 auto;
  padding-inline: 20px;
}
html.mast-dynamic.mast-hidden .masthead { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  html.mast-dynamic .masthead { transition: none; }
}

/* 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;
}
/* The product's name under his (Brian, 18 October 2026). Stacked with the
   wordmark so the pair reads as one block beside the nav. */
.wordmark-block { display: flex; flex-direction: column; gap: 6px; }
.masthead-sub {
  margin: 0;
  font: 600 13px/1.2 ui-sans-serif, system-ui, -apple-system, sans-serif;
  letter-spacing: .02em;
  color: var(--ink-soft);
}
.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; }

/* The work behind the edition. Ink rather than faint: it is the claim the site
   makes for itself, so it should not read as filing detail. */
.edition-source {
  /* Now the only line under the edition title, so it takes the spacing .meta
     used to carry rather than sitting tight beneath a line that is gone. */
  margin: 10px 0 0;
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--ink-soft);
}

.group { margin-block: 52px; }

/* Two sticky tiers. The category pins at the top and the episode header pins
   directly beneath it, so a reader always has both "which pillar" and "which
   conversation". The category sticks inside .group, so it hands over to the next
   one when the section changes, exactly as the episode header hands over inside
   .episode.

   --cat-bar is the category bar's exact height, 12px of line plus 11px of
   padding top and bottom, and it is what the episode header offsets itself by.
   Change the padding or the font size here and change the variable with it, or
   the two tiers will overlap. */
:root { --cat-bar: 34px; }

/* The bar is a row: category on the left, and on the archive the edition it
   belongs to on the right. An edition page has a single child here and lays out
   identically. The right-hand label keeps the same 12px/1 type as the left, so
   the bar's height is unchanged and --cat-bar still describes it. */
.group-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: var(--stick);
  z-index: 6;
  background: var(--bg);
  margin: 0;
  padding: 11px 0;
  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); }

/* 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; }

/* The header sticks, in its own typography, and its height NEVER changes.
   That last part is not a detail: a sticky element that resizes on scroll
   reflows the page below it, which moves the next episode, which changes
   whether it is stuck, which resizes it again. It oscillates and never settles.
   Anything that would change size belongs in .episode-detail below, not here.

   It lives inside .episode, so it releases when the next episode arrives and
   that header takes over. */
.episode-head {
  position: sticky;
  /* Sits below the category bar, which holds the tier above it, and below the
     masthead while that is shown. --stick is 0px when it is hidden. */
  top: calc(var(--stick) + var(--cat-bar));
  z-index: 5;
  background: var(--bg);
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 34px;
  align-items: baseline;
  padding: 14px 0 12px;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

/* Everything the pinned header does not need: the guest note, the hosts, the
   date and duration, the re-release note. Scrolls away normally. */
.episode-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  padding: 14px 0 18px;
}
.episode-detail-who, .episode-detail-meta { min-width: 0; }
.episode-detail .guest-note { margin-top: 0; }

/* Bound the pinned header. Some shows put a sentence in the guest field ("No
   guest. The episode is a single-voice monologue.") and some episode titles run
   long, which took one header to 187px against a typical 109. A fixed line cap
   is safe here in a way a scroll-dependent one would not be: it is the same on
   every frame, so it cannot feed back into the layout. */
.episode-head .guest,
.episode-head .episode-link a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.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;
}
/* No --measure cap here, deliberately. The note only ever renders inside
   .episode-detail-who, which the 1.85fr grid column already bounds, so a second
   cap on top of it was measuring the same text twice and losing to itself.

   Brian reported it on the Nordvig episode: the paragraph stops well short of
   its box. Measured on the live page at 1280px, where the column is at its
   widest: the column is 627.1px and --measure resolved to 484.6px, because `ch`
   resolves against this element's own 14.5px sans rather than the 17px serif
   --measure was set for. That left 142.5px of every note's box empty, 23 per
   cent of the column, on all 23 notes on the front page.

   Uncapped the line runs 80ch at the widest the column ever gets, since main is
   capped at 1040px. That is above the comfortable measure for sustained reading
   and this is a four-line metadata note, not prose; the readability argument
   does not reach it, and the ragged short column was the more visible fault.
   Removing the cap took the front page's notes from 119 rendered lines to 93,
   with 22 of the 23 losing a line. */
.guest-note {
  margin: 10px 0 0;
  font: 14.5px/1.55 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft);
}
/* The right column's text, not its box, has to line up down the page. The clip
   context below carries a 2px rail plus 22px of padding, so its observations sit
   24px in from the column edge; the episode metadata matches that inset so the
   two share a left edge. Measuring the column boxes said they were aligned and
   they were, which is why this survived an earlier alignment pass: the boxes
   agreed and the text did not. */
.episode-meta { margin: 0; min-width: 0; padding-left: 24px; }
.episode-detail-meta { padding-left: 24px; }
.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);
}

/* One left edge for the whole page. The clip list used to carry a 20px indent
   and a 2px rail, which put every clip, and therefore the episode header above
   it, 22px right of the edition title, the contents box and the category label
   directly above them. Aligning the header to the clips fixed the wrong
   relationship; both had to come back to the page's edge. The rail is gone with
   it, and the header's 2px top border does the separating work. */
.cliplist { list-style: none; margin: 0; padding: 0; }

.clip {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: 34px;
  padding: 22px 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; }

/* A shared link lands on #c<id>. Without an offset the browser puts the clip at
   the very top, under the pinned category bar and episode header, and the hook
   the reader was sent for is hidden. 96px covers the episode header at both
   widths; the masthead's --stick is included because it is still shown at the
   moment of the jump. */
.clip { scroll-margin-top: calc(var(--stick) + var(--cat-bar) + 96px); }

/* Share row (Brian, 22 October 2026). Text-weight, like the meta line above it:
   it is a tool on the clip, not a call to action competing with the hook. */
.clip-share {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 6px 0 0;
  font: 13px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
}
.clip-share a, .clip-share button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.clip-share a:hover, .clip-share button:hover { text-decoration: underline; }
.clip-share [hidden] { display: none; }

/* The two subscribe routes, side by side and never merged (Brian, 22 October
   2026). The pill is the archive's "more" button, so it reads as the same kind
   of control. */
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.cta {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--bg);
  font: 600 14px/1.4 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  text-decoration: none;
}
.cta:hover { border-color: var(--accent); color: var(--accent); }
.cta-note {
  margin: 8px 0 0;
  font: 13px/1.5 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-faint);
}
.page .cta-note { color: var(--ink-faint); }
.next-edition {
  margin-block: 52px 0;
  padding: 22px 24px;
  background: var(--bg-soft);
  border-radius: 10px;
  max-width: 720px;
}
.next-edition-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);
}
.next-edition p:not(.cta-row) {
  margin: 0;
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--ink-soft);
}

/* 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: the edition layout run chronologically, plus a tag filter. */
.tagbar {
  margin: 22px 0 8px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border-radius: 10px;
}
.tagbar-label {
  margin: 0 0 10px;
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tagbar-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.tagbar-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--bg);
  font: 13px/1.6 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft);
  text-decoration: none;
}
.tagbar-tag:hover { border-color: var(--accent); color: var(--ink); }
.tagbar-tag.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.tagbar-n { font-size: 11.5px; opacity: .7; }
.tagbar-tag.is-on .tagbar-n { opacity: .85; }

.archive-count {
  margin: 16px 0 0;
  font: 14px/1.5 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft);
}
.archive-feed { margin-top: 8px; }
/* The show, guest and date, standing in for the episode header that groups
   clips on an edition page. The archive has no such grouping: it runs
   chronologically, so each clip carries its own context. */
.archive-src {
  margin: 0 0 8px;
  font: 14px/1.5 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink-soft);
}
.archive-cat {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 8px;
}
.archive-show { font-weight: 600; color: var(--ink); }
/* Section headings reuse .group-title, so the archive's upload sections stick
   and hand over exactly as the category bar does on an edition page. */
/* Which edition the clips below came out in. Faint and in ordinary case, so it
   reads as a label on the section rather than competing with the category. */
.group-edition {
  flex: none;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink-faint);
}
.group-cat { min-width: 0; }
.archive-section { margin-block: 0 40px; }
.archive-empty { padding-block: 30px; color: var(--ink-faint); }
.archive-end { padding-block: 24px 40px; color: var(--ink-faint); font: 14px/1.5 ui-sans-serif, system-ui, sans-serif; }
.archive-more { margin-block: 12px 40px; }
.archive-more button {
  padding: 9px 20px;
  border: 1px solid var(--rule);
  border-radius: 20px;
  background: var(--bg);
  font: 600 14px/1.4 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  cursor: pointer;
}
.archive-more button:hover { border-color: var(--accent); color: var(--accent); }

/* Tags on a clip are links to the archive filtered by that tag. */
.tag-link { color: var(--ink-faint); text-decoration: none; }
.tag-link:hover { color: var(--accent); }

/* 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-body { margin: 14px 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);
}

.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; margin-bottom: 4px; }
.footer-links { margin-bottom: 16px; }
.disclaimer { max-width: var(--measure); }

@media (max-width: 760px) {
  .clip, .episode-detail { grid-template-columns: 1fr; gap: 20px; }
  /* The header stays two columns on a phone. Stacked, a pinned show, guest and
     episode title would eat half the screen for the whole scroll. */
  .episode-head {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 16px;
  }
  .episode-head .show, .episode-head .guest { font-size: 15px; line-height: 1.3; }
  .episode-head .guest .org { display: none; }
  .episode-head .episode-link { font-size: 13px; }
  .episode-head .meta-label { font-size: 9.5px; }
  .clip-context { border-left: 0; border-top: 2px solid var(--rule); padding-left: 0; padding-top: 18px; }
  /* The rail goes at this width, so the inset that matched it goes too. */
  .episode-meta, .episode-detail-meta { padding-left: 0; }
}

/* The home page's pointer to a special edition, while it is the current week's
   (`render.featured_special`). Deliberately quiet: it sits above the latest
   edition, which is the product, and a loud banner above the clips would be the
   click the home page exists to remove. Soft panel, accent only on the link. */
.featured {
  max-width: var(--measure);
  margin: 28px 0 0;
  padding: 18px 20px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.featured h2 {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.2;
}
.featured h2 a { color: var(--accent); text-decoration: none; }
.featured h2 a:hover { text-decoration: underline; }
.featured p:last-child {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}