/* The public site (spec §6): system fonts (but the wordmark's), a readable measure, light unless the reader picks dark.
The episode page is the product. */
:root {
  --bg: #fcfbf8; --fg: #1c1b19; --muted: #6a655d; --line: #e6e1d7; --panel: #f3efe6;
  --accent: #9b2c3f; --accent-fg: #fff; --mark: #fbecc4; --map: #ebe4d6; --map-edge: #c4b9a6;
  --soft: #3d3a35; --pass: #2e6b3a; --fail: #a3361f;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236a655d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: ui-serif, "Iowan Old Style", Charter, "Palatino Linotype", Georgia, serif;
  --measure: 40rem;
  color-scheme: light;
}
/* Dark, picked with the network bar's button (theme.js) */
:root[data-theme="dark"] { color-scheme: dark;
  --bg: #141312; --fg: #ece7df; --muted: #a29b90; --line: #2f2c28; --panel: #1f1d1a;
  --accent: #f08da0; --accent-fg: #141312; --mark: #4a3b14; --map: #26231f; --map-edge: #4d473f;
  --soft: #cbc4b8; --pass: #9fcda2; --fail: #f2a08f;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a29b90' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 18px/1.6 var(--serif); }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4, h5, p, li { text-wrap: pretty; }
h1, h2, h3, h4, h5, .masthead, .when, .subscribe, .sources, .at, .ref, civicfm-player, .colophon, .chapters, .who, small {
  font-family: var(--sans); }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0.25rem 0 0.75rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.1rem; margin: 2rem 0 0.25rem; }
h4 { font-size: 1rem; margin: 1.5rem 0 0.25rem; }
small, .quiet { color: var(--muted); }

/* The network: its bar across the top of every page, and its wordmark (§6). Its 44 px tile outranks the show's 40 px
   cover in the masthead under it, and its letters stay smaller than the page's headline. */
.network-bar { background: var(--panel); border-bottom: 1px solid var(--line); font: 500 1rem var(--sans); }
.network-bar div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.4rem 1rem;
                   min-height: 4.5rem; max-width: calc(var(--measure) + 2.5rem); margin: 0 auto; padding: 0.5rem 1.25rem; }
.network-bar a { color: var(--muted); text-decoration: none; }
.network-bar a:hover { color: var(--fg); }
.network-bar a.wordmark { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--fg); font-size: 2.05rem; }
.network-bar .wordmark img { width: 44px; height: 44px; }
.network-bar nav { display: flex; align-items: center; gap: 1rem; white-space: nowrap; }
/* Light or dark: a moon in light, to pick dark, and a sun in dark. Its padding is a bigger target, taken back by its margin. */
.network-bar .theme { display: inline-flex; padding: 0.4rem; margin: -0.4rem; border: 0; background: none;
                      color: var(--muted); cursor: pointer; }
.network-bar .theme:hover { color: var(--fg); }
.network-bar .theme[hidden], .theme[aria-pressed="true"] .moon, .theme[aria-pressed="false"] .sun { display: none; }
.network-bar .theme svg { width: 1.25rem; height: 1.25rem; }
@media (max-width: 30rem) {             /* a phone: a smaller wordmark, and the links under it unless they fit beside it */
  .network-bar div { min-height: 3.75rem; column-gap: 0.75rem; }
  .network-bar a.wordmark { font-size: 1.55rem; gap: 0.5rem; }
  .network-bar .wordmark img { width: 34px; height: 34px; }
  .network-bar nav { gap: 0.65rem; font-size: 0.95rem; }
}
/* The wordmark's letters are the covers' Inter Display Black, cut down to these six (assets/FONT.md) */
@font-face { font-family: "CivicFM Wordmark"; font-weight: 800; font-display: block;
             src: url(wordmark.woff2) format("woff2"); }
.wordmark { font-family: "CivicFM Wordmark", var(--sans); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.wordmark img { display: block; flex: none; }
.wordmark b { color: var(--accent); font-weight: inherit; }
.listen { font: 600 0.95rem var(--sans); margin-top: 0.4rem !important; }
.listen a { text-decoration: none; }

.masthead { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
            max-width: calc(var(--measure) + 2.5rem); margin: 0 auto; padding: 1rem 1.25rem; font-size: 0.95rem; }
.masthead .show { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; color: var(--fg); text-decoration: none; }
.masthead img { border-radius: 0.4rem; }
.masthead nav { display: flex; gap: 1.25rem; margin-left: auto; }
.masthead nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
.masthead nav a:hover, .masthead .show:hover { color: var(--accent); }
main { max-width: calc(var(--measure) + 2.5rem); margin: 0 auto; padding: 0 1.25rem 4rem; }
.colophon { color: var(--muted); font-size: 0.85rem;
            max-width: calc(var(--measure) + 2.5rem); margin: 0 auto; padding: 0 1.25rem 3rem; }
.colophon p { border-top: 1px solid var(--line); margin: 0; padding-top: 1rem; }
.colophon a { color: inherit; }

/* Home */
.intro { padding: 2rem 0 1rem; }
.intro .title { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1rem; }
.intro .title img { flex: none; border-radius: 0.6rem; box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); }
.intro .title h1 { margin-top: 0; }
.tagline { font-family: var(--sans); font-weight: 600; color: var(--accent); margin: 0; }
.lede { font-size: 1.15rem; }
.subscribe { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.subscribe a { display: inline-block; padding: 0.35rem 0.9rem; border-radius: 2rem; border: 1px solid var(--accent);
               text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: background 0.15s, color 0.15s; }
.subscribe a:hover { background: var(--accent); color: var(--accent-fg); }
.subscribe small { margin-left: 0.25rem; }
.card { border-top: 1px solid var(--line); padding: 1rem 0; }
.card :is(h3, h4, h5) { margin: 0.1rem 0 0.4rem; font-size: 1.25rem; }
.card :is(h3, h4, h5) a { color: var(--fg); text-decoration: none; }
.card :is(h3, h4, h5) a:hover { color: var(--accent); }
.card p { margin: 0; }
.more { border-top: 1px solid var(--line); padding-top: 1rem; font-weight: 600; }
.when { color: var(--muted); font-size: 0.85rem; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
/* The network's index, by region and metro area (§6). The top division takes the heavy rule the topics page's areas
   do: each state when there are several, and each area otherwise. Each heading outranks what's under it: Shows, then
   the top division, then an area in a state, then a digest's title. Each shrinks with a phone, never past the page's
   headline. */
.shows-heading { font-size: clamp(1.6rem, 3.8vw, 2.1rem); line-height: 1.15; letter-spacing: -0.01em; }
.region { font-size: clamp(1.45rem, 3.2vw, 1.875rem); line-height: 1.2; letter-spacing: -0.01em;
          margin: 2.5rem 0 0.25rem; padding-top: 0.75rem; border-top: 2px solid var(--fg); }
.metro { font-size: clamp(1.45rem, 3.2vw, 1.875rem); line-height: 1.2; letter-spacing: -0.01em;
         margin: 2.25rem 0 0; padding-top: 0.75rem; border-top: 2px solid var(--fg); }
.region ~ .metro { font-size: clamp(1.35rem, 2.8vw, 1.65rem); margin-top: 1.75rem; padding-top: 0; border-top: 0; }
.network-shows > :first-child { margin-top: 0.75rem; }
.region + .metro { margin-top: 0.75rem; }
/* A state's map leads it, beside its roundup; an area with a locator keeps its rule under the state (app/maps.py) */
.state-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; }
.state-row .feature { flex: 1 1 18rem; }
.state-map { flex: none; max-width: 100%; height: auto; margin: 0.25rem 0 0.75rem; }
:is(.state-map, .locator) .land { fill: var(--map); stroke: var(--map-edge); stroke-linejoin: round; }
.state-map .land { stroke-width: 1.2; }
.state-map .pin { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.state-map .count { fill: var(--accent-fg); font: 700 11px var(--sans); text-anchor: middle; dominant-baseline: central; }
.state-map .label { fill: var(--fg); font: 600 13px var(--sans); paint-order: stroke; stroke: var(--bg); stroke-width: 4px;
                    stroke-linejoin: round; }
.state-map a:hover .label { fill: var(--accent); }
.state-map a:hover .pin { filter: brightness(1.15); }
.state-map a:focus-visible { outline: none; }
.state-map a:focus-visible .pin { stroke: var(--fg); }
.locator { display: inline-block; height: 1.7rem; width: auto; vertical-align: -0.45rem; margin-right: 0.55rem; }
.locator .land { stroke-width: 0.6; }
.locator .dot { fill: var(--accent); }
.region ~ .metro.located { margin-top: 2.25rem; padding-top: 0.75rem; border-top: 2px solid var(--fg); }
.metro[id] { scroll-margin-top: 1rem; }
/* A digest leads its area at its home page's size, and the shows it rounds up follow (§2.8) */
.feature { display: flex; align-items: center; gap: 1.25rem; padding: 1.1rem 0 1.25rem; }
.feature > div { min-width: 0; }
.feature :is(h3, h4, h5) { font-size: clamp(1.2rem, 2.2vw, 1.3rem); line-height: 1.2; margin: 0 0 0.2rem; }
.feature p { margin: 0; }
.feature :is(h3, h4, h5) + p { font-size: 1.05rem; }
.made-from { font: 600 0.75rem var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em;
             margin: 0 0 0.1rem; }
/* Every other show: one compact row, two to a line */
.show-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
             column-gap: 1.5rem; }
.show-list li { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; border-top: 1px solid var(--line); }
.show-list li > div { min-width: 0; }
.show-list :is(h3, h4, h5) { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.show-list p { margin: 0; font-size: 0.95rem; line-height: 1.4; color: var(--muted); }
:is(.region, .metro) + .show-list > li:nth-child(-n+2) { border-top: 0; }
:is(.feature, .show-list) :is(h3, h4, h5) a { color: var(--fg); text-decoration: none; }
:is(.feature, .show-list) :is(h3, h4, h5) a:hover { color: var(--accent); }
:is(.feature, .show-list) :is(img, .no-cover) { display: block; flex: none; border-radius: 0.4rem;
                                                box-shadow: 0 1px 3px rgb(0 0 0 / 0.15); }
.feature :is(img, .no-cover) { width: 112px; height: 112px; border-radius: 0.7rem; }
.show-list :is(img, .no-cover) { width: 48px; height: 48px; }
:is(.feature, .show-list) .no-cover { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 34rem) {
  .show-list { grid-template-columns: minmax(0, 1fr); }
  :is(.region, .metro) + .show-list > li:nth-child(2) { border-top: 1px solid var(--line); }
  .feature { align-items: flex-start; }
  .feature :is(img, .no-cover) { width: 88px; height: 88px; }
  .state-row .feature { flex-basis: 100%; padding-bottom: 0.5rem; }
  .state-map { width: 170px; margin-top: 0; }
}

/* An episode */
.episode-head { padding-top: 1.5rem; }
.episode [id] { scroll-margin-top: 8rem; }
.summary { font-size: 1.2rem; line-height: 1.5; }
.disclosure { color: var(--muted); font-size: 0.95rem; font-style: italic; }
.download { font: 0.9rem var(--sans); color: var(--muted); margin: 0.5rem 0; }
/* A sponsor's line (step 8.25): marked, set apart, and never in a story's place */
.sponsored { font: 0.9rem var(--sans); color: var(--muted); margin: 0.75rem 0; padding: 0.5rem 0.75rem;
             border: 1px solid var(--line); border-radius: 0.4rem; }
.tag { display: inline-block; font: 600 0.7rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
       color: var(--muted); border: 1px solid var(--line); border-radius: 0.25rem; padding: 0 0.3rem; margin-right: 0.2rem; }
.corrections { background: var(--mark); border-radius: 0.5rem; padding: 0.75rem 1rem; margin: 1rem 0; }
.corrections h2 { margin: 0 0 0.25rem; font-size: 1rem; }
.corrections p { margin: 0.25rem 0; }
/* Folds: the transcript by chapter, and what happened by meeting and item, each closed until opened (§6) */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 0.5rem; }
.section-head h2 { margin: 0; }
.unfold { font: 600 0.85rem var(--sans); color: var(--muted); background: none; border: 0; padding: 0.25rem 0;
          cursor: pointer; }
.unfold:hover { color: var(--accent); }
.fold { border-top: 1px solid var(--line); }
.fold > summary { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.7rem 0; cursor: pointer; list-style: none;
                  font-family: var(--sans); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; margin: 0 0.15rem 0 0.1rem;
                          border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-0.2em) rotate(-45deg);
                          transition: transform 0.15s; }
.fold[open] > summary::before { transform: translateY(-0.35em) rotate(45deg); }
.fold > summary:hover::before { border-color: var(--accent); }
.fold > summary :is(h3, h4) { flex: 1; min-width: 0; margin: 0; }
.fold > summary:hover :is(h3, h4) { color: var(--accent); }
.fold > summary .at, .fold > summary .count { flex: none; }
.fold > :not(summary) { margin-left: 1.4rem; }
.fold[open] > :last-child { margin-bottom: 1.25rem; }
.fold.meeting { border-top: 2px solid var(--fg); }
.fold.meeting > summary { padding: 0.85rem 0; }
.fold.meeting + .fold.meeting { margin-top: 0.5rem; }
.fold .date, .fold .count, .item .ref { color: var(--muted); font-weight: 400; }
.fold .count, .item .ref { font-size: 0.85rem; }
.item .ref { margin-left: 0.25rem; white-space: nowrap; }
.item.fold:first-of-type { border-top: 0; }
.sources { font-size: 0.9rem; margin: 0 0 0.75rem; }
.item p { margin-block: 0.25rem; }
.see { font: 0.9rem/1.6 var(--sans); color: var(--muted); margin-top: 0.75rem; }
.outcomes, .points { padding-left: 1.2rem; margin: 0.4rem 0; }
.outcomes li { font-weight: 600; }
.outcomes li.unclear { font-weight: 400; color: var(--muted); }
.points li { margin: 0.2rem 0; }
.at { font-size: 0.8rem; font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none;
      padding: 0 0.3rem; border-radius: 0.25rem; background: var(--panel); }
.at:hover { background: var(--mark); }
.transcript { font-size: 1rem; }
.transcript .fold > summary h3 { font-size: 1rem; }
.transcript .fold > :is(.cue, .said) { margin-left: 1rem; }   /* its words under the chapter's title */
.transcript .cue { margin: 0 0 0.6rem; padding: 0.1rem 0.4rem; border-radius: 0.3rem; cursor: pointer;
                   scroll-margin: 40vh; transition: background 0.2s; }
.transcript .cue:hover { background: var(--panel); }
.transcript .cue.now { background: var(--mark); }
.transcript .who { font-weight: 650; font-size: 0.85rem; margin-right: 0.3rem; }
.transcript .cue.from-meeting { border-left: 3px solid var(--mark); }   /* the meeting's own audio, played in the episode */
.transcript .cue.sponsored-read { color: var(--muted); border-left: 3px solid var(--line); }   /* a sponsor's read */
/* Where a line comes from (step 8.22): its Sources, and under it, each sentence with its moments */
.transcript .line-sources { font: 600 0.75rem var(--sans); color: var(--muted); background: none; border: 1px solid var(--line);
                            border-radius: 1rem; padding: 0 0.5rem; margin-left: 0.15rem; cursor: pointer; white-space: nowrap;
                            vertical-align: 0.1em; }
.transcript .line-sources:hover, .transcript .line-sources[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.transcript .said { display: grid; gap: 0.35rem; margin: -0.35rem 0 0.9rem; padding: 0.55rem 0.75rem; border-radius: 0.45rem;
                    background: var(--panel); font: 0.85rem/1.5 var(--sans); }
.transcript .said[hidden], .transcript .said.clip { display: none; }   /* a clip's moment is for the player alone */
.transcript .said p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; margin: 0; }
.transcript .said .ex { flex: 1 1 16rem; min-width: 0; color: var(--soft); }
.transcript .said .at { background: var(--bg); }
:is(.said, .now-source) .where { color: var(--soft); font-size: 0.8rem; }
.transcript .said.one .where { display: none; }   /* one meeting's: the player still says which, the list needn't */
.transcript .said .in-notes { font-weight: 600; text-decoration: none; }
.transcript .said p:not(.note) .in-notes { white-space: nowrap; }
.transcript .said .in-notes:hover { text-decoration: underline; }
.episode-foot { border-top: 1px solid var(--line); margin-top: 2.5rem; color: var(--muted); font-size: 0.95rem; }
.prose ul { padding-left: 1.2rem; }
/* Sponsor this show (step 8.25): the offers side by side, a column on a phone */
.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.offer { border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.75rem 1rem; background: var(--panel); }
.offer h3 { margin: 0; font: 600 1rem var(--sans); }
.offer .price { font: 700 1.6rem var(--sans); margin: 0.25rem 0; }
.offer p { margin: 0.25rem 0; }
.offer .pay { display: inline-block; font: 600 0.9rem var(--sans); text-decoration: none; color: var(--accent-fg);
              background: var(--accent); border-radius: 0.4rem; padding: 0.4rem 0.8rem; margin-top: 0.35rem; }
.retracted { padding: 3rem 0; }

/* Beside the episode (§6): the Monday email's form (step 8.1) and the highlights. On a phone they stand under the
   player, the highlights first; on a wide screen, the column to the right, the form on top (below). */
.side-stack { display: flex; flex-direction: column; }
.side-stack > .monday { order: 1; }

/* Highlights (step 8.15): the meetings' own voices, in a row under the player, in an item's fold, and on a page each */
.clips h2 { margin: 1.5rem 0 0.5rem; }
.clip-row { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
            gap: 0.6rem; }
.clip { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; align-items: start; padding: 0.7rem 0.8rem;
        background: var(--panel); border: 1px solid var(--line); border-radius: 0.6rem; }
.clip-play { font: 600 0.9rem var(--sans); text-decoration: none; color: var(--accent-fg); background: var(--accent);
             border-radius: 999px; min-width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center;
             justify-content: center; padding: 0 0.6rem; white-space: nowrap; }
.clip-play:hover { filter: brightness(1.1); }
.clip-play.hear { height: auto; min-width: 0; padding: 0.15rem 0.7rem; font-size: 0.85rem; }
.clip-title { display: block; font: 600 1rem/1.35 var(--sans); color: var(--fg); text-decoration: none; }
.clip-title:hover { color: var(--accent); }
.clip-who { font: 0.85rem/1.4 var(--sans); color: var(--muted); margin: 0.2rem 0 0; }
.clip-share { grid-column: 2; justify-self: start; font: 600 0.8rem var(--sans); border: 1px solid var(--line);
              background: var(--bg); color: var(--fg); border-radius: 0.4rem; padding: 0.2rem 0.6rem; cursor: pointer;
              max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hear-it { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.hear-it .clip-who { margin: 0; }
.clip-player { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1rem 0; }
.clip-player audio { width: 100%; }
.clip-download { font: 600 0.8rem var(--sans); border: 1px solid var(--line); background: var(--bg); color: var(--fg);
                 border-radius: 0.4rem; padding: 0.2rem 0.6rem; text-decoration: none; }
.clip-download:hover { color: var(--accent); }
video.short { display: block; width: min(100%, 22rem); aspect-ratio: 9 / 16; height: auto; margin: 0 0 1.5rem;
              background: #000; border-radius: 0.75rem; }
.captions .cue { margin: 0 0 0.5rem; padding: 0.1rem 0.4rem; border-radius: 0.3rem; }
.captions .cue.now { background: var(--mark); }
.captions .who { font-weight: 650; font-size: 0.85rem; margin-right: 0.3rem; }
.highlight .from ul { padding-left: 1.2rem; }

/* The player: a web component over an <audio>, with chapters, ±15 s, speed, Share, and the transcript following along */
civicfm-player { display: block; position: sticky; top: 0; z-index: 2; background: var(--bg);
                 padding: 0.75rem 0; margin: 1rem 0; border-bottom: 1px solid var(--line); }
civicfm-player audio { width: 100%; }
civicfm-player .controls { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: 0.5rem; }
civicfm-player button { font: 600 0.9rem var(--sans); border: 1px solid var(--line); background: var(--panel); color: var(--fg);
                        border-radius: 2rem; padding: 0.35rem 0.7rem; cursor: pointer; min-width: 2.75rem; }
civicfm-player button:hover { border-color: var(--muted); }
civicfm-player button.play { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); min-width: 4.5rem; }
civicfm-player button.play:hover { filter: brightness(1.1); }
civicfm-player .time { font: 0.85rem var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
civicfm-player input[type=range] { width: 100%; accent-color: var(--accent); }
civicfm-player .bar { display: flex; align-items: center; gap: 0.5rem; }
civicfm-player .now-chapter { display: flex; align-items: center; gap: 0.6rem; font: 600 0.85rem var(--sans);
                              margin: 0.5rem 0 0; min-height: 1.2em; }
civicfm-player .toggle::after { content: " ▾"; color: var(--muted); }
civicfm-player.open .toggle::after { content: " ▴"; }
civicfm-player .now-chapter .title { color: var(--muted); flex: 1; min-width: 0; }
/* the sentence playing's sources: one line high whatever it holds, so the player keeps its height */
civicfm-player .now-source { display: flex; align-items: baseline; gap: 0.35rem; margin: 0.4rem 0 0; min-height: 1.5rem;
                             font: 0.85rem/1.5 var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; }
civicfm-player .now-source .label { font-weight: 600; }
civicfm-player .share { margin-left: auto; }
civicfm-player .copy { margin: 0.5rem 0 0; }
civicfm-player .copy input { width: 100%; box-sizing: border-box; font: 0.85rem var(--sans); color: var(--fg); background: var(--panel);
                             border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.35rem 0.5rem; }
.chapters { list-style: none; padding: 0; margin: 0.5rem 0 0; font-size: 0.9rem; columns: 2 16rem; }
.chapters a { display: block; text-decoration: none; color: var(--fg); padding: 0.1rem 0.3rem; border-radius: 0.25rem; break-inside: avoid; }
.chapters a:hover { background: var(--panel); }
.chapters a.now { background: var(--mark); }
.chapters .t { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 0.3rem; }
civicfm-player:defined .chapters { max-height: 0; overflow: hidden; margin: 0; }
civicfm-player.open .chapters { max-height: 40vh; overflow: auto; margin-top: 0.5rem; }
@media (max-width: 30rem) {
  body { font-size: 17px; }
  .intro .title img { width: 88px; height: 88px; }
  civicfm-player .controls { grid-template-columns: repeat(4, auto) 1fr; }
  civicfm-player .bar { grid-column: 1 / -1; order: 9; }
  .fold .fold > :not(summary) { margin-left: 0; }
  .fold.meeting .date { display: block; font-size: 0.9rem; }
}

/* Topics, search, and the API, across every show (§6) */
.topics { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0 !important; font: 0.8rem var(--sans); }
.topics a { padding: 0.1rem 0.6rem; border-radius: 2rem; background: var(--panel); border: 1px solid var(--line);
            color: var(--muted); text-decoration: none; }
.topics a:hover { color: var(--accent); border-color: var(--accent); }
.topics small { margin-left: 0.2rem; }
.facets { margin: 0 0 1rem !important; }
.fold > summary:has(.topics) { flex-wrap: wrap; row-gap: 0.3rem; }      /* an item's topics, under its title, folded or not */
.fold > summary .topics { flex-basis: 100%; margin: 0 0 0 1.4rem !important; }
.find { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.5rem; font-family: var(--sans); }
.find input[type=search] { flex: 1 1 14rem; min-width: 0; font: 1rem var(--sans); padding: 0.5rem 0.75rem;
                           border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg); color: var(--fg); }
.find select, .find button { font: 600 0.95rem var(--sans); padding: 0.5rem 0.9rem; border-radius: 0.4rem;
                             border: 1px solid var(--line); background: var(--panel); color: var(--fg); }
.find select { appearance: none; -webkit-appearance: none; padding-right: 2rem; cursor: pointer;     /* the site's arrow */
               background: var(--panel) var(--chevron) no-repeat right 0.75rem center / 0.65rem auto; }
.find button { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); cursor: pointer; }
.find button:hover { filter: brightness(1.1); }
.hit h3 { font-size: 1.15rem; }
.hit h3 .ref { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.hit .sources { margin-top: 0.4rem; }
.hit .topics { margin: 0 0 0.4rem !important; }
.hit .outcomes li.more { font-weight: 400; color: var(--muted); list-style: none; margin-left: -1.2rem; }
.filter { font-family: var(--sans); }

/* Following a search by email (§6, step 8.5): the form, and the follower's page */
.follow { margin: 1rem 0 1.5rem; padding: 0.9rem 1rem 0.6rem; background: var(--panel); border: 1px solid var(--line);
          border-radius: 0.5rem; }
.follow-title { font: 600 0.95rem var(--sans); }
.follow .find { margin: 0.5rem 0; }
.follow input[type=email] { flex: 1 1 14rem; min-width: 0; font: 1rem var(--sans); padding: 0.5rem 0.75rem;
                            border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg); color: var(--fg); }
.follow .quiet { font: 0.85rem/1.5 var(--sans); margin: 0; }
.follow .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.follows { margin: 1.5rem 0; font-family: var(--sans); }
.follows h2 { font-size: 1.1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.follows ul { list-style: none; padding: 0; }
.follows li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.4rem 0;
              border-bottom: 1px solid var(--line); }
.follows button { font: 600 0.95rem var(--sans); padding: 0.45rem 0.9rem; border-radius: 0.4rem; cursor: pointer;
                  border: 1px solid var(--line); background: var(--panel); color: var(--fg); }
.follows button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.follows button:hover { filter: brightness(1.1); }
.banner { font-family: var(--sans); padding: 0.6rem 0.9rem; border-radius: 0.4rem; background: var(--mark); }

/* Want CivicFM in your town? (§6, step 8.13): the index's last section, in the follow box's panel, and its answer */
.your-town { margin: 3rem 0 0; padding: 1.1rem 1.25rem 0.9rem; background: var(--panel); border: 1px solid var(--line);
             border-radius: 0.5rem; font-family: var(--sans); }
.your-town h2 { margin: 0 0 0.35rem; }
.your-town > p { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.5; }
.your-town .find { margin: 0.75rem 0 0.6rem; }
.your-town .find input:is([type=text], [type=email]) { flex: 1 1 12rem; min-width: 0; font: 1rem var(--sans);
  padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg); color: var(--fg); }
/* Picking the place (step 8.14): one field, its suggestions as it's typed in (static/want.js), the place picked, and on
   the answer, the places a ZIP code or a name could mean */
.find.want, .find.want-pick { display: grid; gap: 0.5rem; }
.find.want input:is([type=text], [type=email]), .find.want-pick input[type=email] { width: 100%; }
.find:is(.want, .want-pick) > button { justify-self: start; }
.place-field { position: relative; }
.suggestions { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 0.3rem 0;
               list-style: none; background: var(--bg); border: 1px solid var(--line); border-radius: 0.45rem;
               box-shadow: 0 10px 28px rgb(0 0 0 / 0.16); max-height: 22rem; overflow-y: auto; font: 1rem/1.35 var(--sans); }
.suggestions li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5rem; align-items: center;
                  padding: 0.4rem 0.7rem; cursor: pointer; }
.suggestions li[aria-selected=true], .suggestions li[role=option]:hover { background: var(--panel); }
.suggestions .line { grid-column: 1; font-size: 0.8rem; color: var(--muted); }
.suggestions .pill, .choice .pill { grid-row: 1 / span 2; grid-column: 2; font: 600 0.7rem var(--sans); white-space: nowrap;
                                    background: var(--mark); color: var(--fg); border-radius: 1rem; padding: 0.1rem 0.5rem; }
.suggestions .head { display: block; cursor: default; padding: 0.3rem 0.7rem 0.15rem; color: var(--muted);
                     font: 600 0.72rem var(--sans); letter-spacing: 0.05em; text-transform: uppercase; }
.suggestions .note { display: block; cursor: default; font-size: 0.82rem; line-height: 1.4; color: var(--muted);
                     border-top: 1px solid var(--line); margin-top: 0.25rem; padding-top: 0.45rem; }
.suggestions .note.alone { border: 0; margin: 0; padding-top: 0.4rem; }
.want .picked { font: 0.85rem/1.45 var(--sans); color: var(--muted); margin: -0.1rem 0 0; }
.choices { display: grid; gap: 0.4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.choice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0.6rem;
          padding: 0.55rem 0.75rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg); }
label.choice { cursor: pointer; }
label.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice input { margin: 0; accent-color: var(--accent); }
.choice .mark { width: 13px; }
.choice .nm { line-height: 1.35; }
.choice small { display: block; font-size: 0.8rem; }
.choice a { font: 600 0.9rem var(--sans); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.your-town p.quiet { font-size: 0.85rem; margin: 0; }
.your-town .trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.town-link { margin: -0.4rem 0 0.25rem; font: 0.95rem/1.5 var(--sans); color: var(--muted); }
/* On a wide screen, a column to the right of the index, kept in view as it scrolls; the index, and its bar, widen to
   hold it, while the shows keep the measure. On a phone it ends the index, and the line under Shows leads to it.
   An episode's highlights and the Monday email's form take the same column, and its masthead and footer widen
   with the bar. The network's other pages share the frame (main.network, below). */
@media (min-width: 64rem) {
  body.beside .network-bar div, body.beside .masthead, body.beside .colophon, main.beside, main.network {
    max-width: calc(var(--measure) + 20rem + 2.5rem); }
  main.beside { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; column-gap: 3rem; align-items: start; }
  main.beside > aside { position: sticky; top: 1.5rem; }
  main.beside > aside .your-town { margin-top: 2.25rem; }
  main.beside > aside .your-town h2 { font-size: 1.2rem; line-height: 1.25; }
  main.beside > aside .your-town > p { font-size: 0.95rem; }
  main.beside > aside .find.want > button { justify-self: stretch; }
  main.beside .town-link { display: none; }
  /* What's beside an episode (the Monday email's form, step 8.1, and its highlights, step 8.15) stands under its
     player in the page, where a phone shows it. Here it's set over the grid's empty column, the episode's full
     height, so it stays in view as the page scrolls: the form on top, and the highlights' panel under it, scrolling
     on its own if the two are taller than the window. As a grid item of its own it would have to leave the episode,
     and so end the page on a phone. */
  main.beside > .episode { position: relative; }
  .episode > .side { position: absolute; top: 0; bottom: 0; left: calc(100% + 3rem); width: 17rem; }
  .side-stack { position: sticky; top: 1.5rem; margin-top: 1.5rem; max-height: calc(100vh - 3rem); gap: 1rem; }
  .side-stack > .monday { order: 0; flex: none; margin: 0; padding: 1rem 1rem 0.9rem; }
  .side-stack .follow-title { display: block; font-size: 1.2rem; line-height: 1.25; }
  .side-stack .follow .find { display: grid; margin: 0.75rem 0 0.6rem; }
  .side-stack > .clips { display: flex; min-height: 0; }
  .clips-panel { flex: 1; min-height: 0; overflow-y: auto;
                 padding: 1rem 1rem 1.1rem; background: var(--panel); border: 1px solid var(--line);
                 border-radius: 0.5rem; font-family: var(--sans); }
  .clips-panel h2 { font-size: 1.2rem; line-height: 1.25; margin: 0 0 0.75rem; }
  .clips-panel .clip-row { grid-template-columns: 1fr; }
  /* In the column, a card's title and who speaks take its full width, and ▶ and Share share its last line */
  .clips-panel .clip { background: var(--bg); grid-template-columns: auto 1fr; gap: 0.3rem 0.5rem;
                       grid-template-areas: "title title" "who who" "play share"; padding: 0.65rem 0.75rem; }
  .clips-panel .clip-text { display: contents; }
  .clips-panel .clip-title { grid-area: title; }
  .clips-panel .clip-who { grid-area: who; margin: 0; }
  .clips-panel .clip-play { grid-area: play; min-width: 2rem; height: 2rem; font-size: 0.8rem; margin-top: 0.25rem; }
  .clips-panel .clip-share { grid-area: share; align-self: center; margin-top: 0.25rem; }
}
main.beside > .main-column { min-width: 0; }
.answer .your-town { margin-top: 1rem; }
.answer .feature { padding-top: 0.5rem; }
.answer .feature h2 { font-size: 1.5rem; line-height: 1.2; margin: 0 0 0.2rem; }
.answer .feature h2 a { color: var(--fg); text-decoration: none; }
.answer .banner { margin: 1rem 0; }
.answer .next { font: 600 0.95rem var(--sans); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line);
         padding-top: 1rem; font: 600 0.95rem var(--sans); }
/* The network's pages (§6): on a wide screen, the index's frame, with the page's column at the measure under the
   wordmark, and to its right, kept in view, the page's <aside>: a search's topics and Follow by email, a topic's
   Follow by email, the API's contents. A page's wide parts, the topics' areas, take both. On a phone the aside
   stands where it is in the page, after its opening, but for the API's contents, which a phone has none of. */
.results { min-width: 0; }
main.network > .prose:not(.intro) { padding-top: 2rem; }       /* privacy and terms open where the others do */
main.network > aside { margin: 0 0 1.5rem; font-family: var(--sans); }
main.network > aside h2 { font-size: 1.1rem; line-height: 1.25; margin: 0 0 0.5rem; }
main.network > aside .follow { margin: 0; }
main.network > aside .facets { margin: 0 !important; }
main.network > aside .follow + .side-topics { margin-top: 1.25rem; }
.contents { display: none; }
.contents ul { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.contents li { border-top: 1px solid var(--line); }
.contents li a { display: block; padding: 0.35rem 0; color: var(--muted); text-decoration: none; }
.contents li a:hover { color: var(--accent); }
.contents p { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--muted); }
.prose h2[id] { scroll-margin-top: 1rem; }
@media (min-width: 64rem) {
  main.network { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; column-gap: 3rem; align-items: start; }
  main.network > * { grid-column: 1; }
  main.network > .wide { grid-column: 1 / -1; }
  main.network:has(> aside) { grid-template-rows: auto 1fr; }
  main.network > aside { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 1.5rem; margin: 2.25rem 0 0;
                         max-height: calc(100vh - 3rem); overflow-y: auto; }
  main.network > aside h2 { font-size: 1.2rem; }
  main.network > aside .follow .find { display: grid; margin: 0.75rem 0 0.6rem; }
  main.network > aside .follow-title { display: block; font-size: 1.2rem; line-height: 1.25; }
  .contents { display: block; }
  .area .topic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}
.area h2 { border-top: 2px solid var(--fg); padding-top: 0.75rem; }
.topic-list { list-style: none; padding: 0; margin: 0; }
.topic-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.topic-list a { font-weight: 600; font-family: var(--sans); }
.topic-list .about { display: block; color: var(--muted); font-size: 0.9rem; }
/* Code wraps rather than running off the page: a long address breaks anywhere. In the API's example, each line wraps
   under its own key, indented past it (--in is the line's own indent). */
pre { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 0.4rem; padding: 0.75rem 1rem;
      font-size: 0.8rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
pre.json span { display: inline-block; width: 100%; padding-left: calc(var(--in, 0ch) + 2ch);
                text-indent: calc(-1 * (var(--in, 0ch) + 2ch)); }
code { font-size: 0.9em; }
.endpoints dt { margin-top: 1rem; font-weight: 600; }
.endpoints dd { margin: 0.25rem 0 0 1rem; }
.fields { border-collapse: collapse; width: 100%; }
.fields td { padding: 0.4rem 0; border-top: 1px solid var(--line); vertical-align: top; }
.fields td:first-child { padding-right: 1rem; white-space: nowrap; }
.fields small { display: block; font-size: 0.8rem; }
.fields small a { color: inherit; }
.endpoints .fields { margin: 0.5rem 0 0.75rem; }
.endpoints dd p { margin: 0.75rem 0 0; }
@media (max-width: 34rem) {            /* a narrow screen: each field's line under its name */
  .fields td { display: block; }
  .fields td:first-child { white-space: normal; overflow-wrap: anywhere; padding-bottom: 0; }
  .fields td + td { border-top: 0; padding-top: 0.15rem; }
}

/* The front page (§6, step 8.19): the latest news from every public show, laid out as a newspaper's front page. Wider
   than the site's measure, under the network bar at its width; each story offers Read, Listen, and Watch. Every
   class is fp-, so nothing here reaches another page. */
body.fp-page .network-bar div { max-width: 78rem; }
.fp-wrap { max-width: 78rem; margin: 0 auto; padding-inline: 1.25rem; }
main.fp { max-width: 78rem; padding-bottom: 2rem; }
.fp-mast { padding-top: 1.1rem; }
/* One line under the bar: what the page is and the edition's date, then its sections */
.fp-dateline { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.35rem 1.5rem;
               padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.fp-motto { margin: 0; font: 700 1.05rem/1.35 var(--sans); color: var(--fg); }
.fp-motto span { margin-left: 0.5rem; font-weight: 400; font-size: 0.88rem; color: var(--muted); }
.fp-sections { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; font: 500 0.9rem var(--sans); }
.fp-sections a { color: var(--soft); text-decoration: none; }
.fp-sections a:hover { color: var(--fg); }
.fp-edition { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem; padding-top: 0.6rem;
              font: 0.8rem/1.4 var(--sans); color: var(--muted); }
.fp-edition b { color: var(--fg); font-weight: 600; }
.fp-empty { margin: 3rem 0; font-size: 1.1rem; }

/* A story's parts */
.fp-kicker { display: block; margin: 0; font: 650 0.7rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.fp-kicker a { color: var(--accent); text-decoration: none; }
.fp-page h1 a, .fp-page h2 a, .fp-page h3 a { color: var(--fg); text-decoration: none; }
.fp-page h1 a:hover, .fp-page h2 a:hover, .fp-page h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.fp-dek { margin: 0; color: var(--soft); }
.fp-chip { display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px; color: var(--muted);
           background: color-mix(in srgb, currentColor 14%, transparent);
           font: 650 0.7rem/1.5 var(--sans); white-space: nowrap; vertical-align: 0.1em; }
.fp-chip.fp-pass { color: var(--pass); }
.fp-chip.fp-fail { color: var(--fail); }
.fp-page svg[viewBox="0 0 16 16"] { flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5;
                                    stroke-linecap: round; stroke-linejoin: round; }
.fp-page svg .fill { fill: currentColor; stroke: none; }
/* Its one line under the summary: the vote, then Read, Listen, and Watch */
.fp-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.05rem; margin: 0.65rem 0 0; font: 600 0.8rem var(--sans); }
.fp-ways .fp-chip { margin-right: 0.15rem; }
.fp-ways a { display: inline-flex; align-items: center; gap: 0.32rem; text-decoration: none; }
.fp-ways a:hover { text-decoration: underline; }
.fp-rail-head { margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--fg);
                font: 800 1.2rem/1.2 var(--sans); letter-spacing: -0.015em; }
.fp-no-icon { display: block; flex: none; width: 2rem; aspect-ratio: 1; border-radius: 5px; background: var(--panel); }

/* Above the fold (2026-10-27, B of three mocks): the lead, the two under it, and "Also this week" under them, with
   Listen and the week's topics in the column to their right. Under 70rem the column goes below, its two side by side. */
.fp-fold { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: 1.8rem; }
.fp-main, .fp-rail { min-width: 0; }
.fp-rail { display: grid; gap: 2.2rem 2.8rem; align-content: start; margin-top: 2.4rem; }
@media (min-width: 46rem) { .fp-rail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 70rem) {
  .fp-fold { grid-template-columns: minmax(0, 2.9fr) minmax(0, 1fr); }
  .fp-main { padding-right: 2rem; border-right: 1px solid var(--line); }
  .fp-rail { grid-template-columns: minmax(0, 1fr); margin-top: 0; padding-left: 2rem; }
}
/* A features show's latest episode (§2.14): a strip across the top, above the lead (2026-10-30, A of three mocks:
   Strip, Rail, and Band), so it's on the first screen of a phone too. On a phone its Listen goes under the headline. */
.fp-depth { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.4rem 1.1rem;
            margin-top: 1.4rem; padding: 0.85rem 1.1rem; background: var(--panel); border-radius: 0.6rem; }
.fp-depth img, .fp-depth .fp-no-icon { display: block; width: 64px; height: 64px; border-radius: 7px; }
.fp-depth h2 { margin: 0.2rem 0 0.25rem; font: 700 1.35rem/1.18 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.fp-depth-places { margin: 0; font: 0.8rem/1.45 var(--sans); color: var(--muted); }
.fp-depth-listen { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: 999px;
                   background: var(--accent); color: var(--accent-fg); font: 650 0.85rem var(--sans); text-decoration: none;
                   font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-depth-listen:hover { filter: brightness(1.08); }
@media (max-width: 40rem) {
  .fp-depth { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 0.85rem; }
  .fp-depth img, .fp-depth .fp-no-icon { width: 44px; height: 44px; }
  .fp-depth h2 { font-size: 1.15rem; }
  .fp-depth-listen { grid-column: 2; justify-self: start; }
}
.fp-lead { display: grid; gap: 1.25rem; }
@media (min-width: 46rem) { .fp-lead.fp-with-art { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } }
.fp-lead h1 { margin: 0.3rem 0 0.65rem; font: 700 clamp(2.05rem, 1.35rem + 2.3vw, 3rem)/1.04 var(--serif); letter-spacing: -0.018em; text-wrap: balance; }
.fp-lead .fp-dek { font-size: 1.05rem; line-height: 1.55; }
.fp-art { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.fp-art video { display: block; width: min(100%, 17rem); aspect-ratio: 9 / 16; height: auto; border-radius: 0.6rem; background: #000; }
.fp-art figcaption { font: 600 1rem/1.3 var(--serif); }
.fp-art figcaption a { color: var(--fg); text-decoration: none; }
.fp-art-clip { padding: 1.1rem; background: var(--panel); border-radius: 0.6rem; }
.fp-clip-label { font: 700 0.68rem var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.fp-clip-title { font: 600 1.1rem/1.3 var(--serif); color: var(--fg); text-decoration: none; }
.fp-art-clip audio { width: 100%; }
.fp-art-clip figcaption { font: 0.78rem/1.4 var(--sans); color: var(--muted); }
.fp-pair { display: grid; gap: 1.4rem; margin-top: 1.5rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
@media (min-width: 46rem) {
  .fp-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .fp-pair > :first-child { padding-right: 1.3rem; border-right: 1px solid var(--line); }
  .fp-pair > :last-child { padding-left: 1.3rem; }
}
.fp-second h2 { margin: 0.25rem 0 0.45rem; font: 700 1.5rem/1.13 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.fp-second .fp-dek { font-size: 0.98rem; line-height: 1.5; }
.fp-also { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
@media (min-width: 46rem) { .fp-also-list { column-count: 2; column-gap: 2.6rem; } }
.fp-brief { break-inside: avoid; margin-bottom: 1.1rem; }
.fp-brief h3 { margin: 0.2rem 0 0; font: 700 1.15rem/1.2 var(--serif); text-wrap: balance; }
.fp-brief .fp-ways { margin-top: 0.45rem; }
.fp-roundup { display: flex; gap: 0.9rem; padding: 0.9rem; background: var(--panel); border-radius: 0.6rem; color: var(--fg); text-decoration: none; }
.fp-roundup + .fp-roundup { margin-top: 0.6rem; }
.fp-roundup img { flex: none; border-radius: 7px; }
.fp-roundup > span { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.fp-roundup b { font: 700 1.15rem/1.2 var(--serif); }
.fp-tagline { font: 0.76rem/1.35 var(--sans); color: var(--muted); }
.fp-roundup:hover b { text-decoration: underline; text-decoration-thickness: 1px; }
.fp-ep { font-size: 0.86rem; line-height: 1.35; color: var(--soft); }
.fp-length { display: inline-flex; align-items: center; gap: 0.3rem; font: 650 0.8rem var(--sans); color: var(--accent);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-rail-sub { margin: 1.3rem 0 0.15rem; font: 650 0.7rem var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.fp-episodes { list-style: none; margin: 0; padding: 0; }
.fp-episodes a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0.7rem; align-items: center;
                 padding-block: 0.55rem; border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none; }
.fp-episodes img, .fp-episodes .fp-no-icon { width: 36px; border-radius: 5px; }
.fp-episodes a > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.fp-episodes b { font: 650 0.82rem var(--sans); }
.fp-episodes .fp-ep { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fp-episodes a:hover .fp-ep { color: var(--fg); }
.fp-episodes .fp-length { color: var(--muted); font-weight: 400; font-size: 0.76rem; }
.fp-note { margin: 0.7rem 0 0; font: 0.78rem/1.45 var(--sans); color: var(--muted); }

/* Below the fold: Shorts, and a section per area */
.fp-band-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1.5rem;
                margin: 3.4rem 0 1.3rem; padding-top: 0.8rem; border-top: 1px solid var(--fg); }
.fp-band-head h2 { margin: 0; font: 800 clamp(1.7rem, 1.3rem + 1.1vw, 2.2rem)/1.1 var(--sans); letter-spacing: -0.025em; }
.fp-band-head p { margin: 0; font: 0.85rem var(--sans); color: var(--muted); }
.fp-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10rem, 1fr); gap: 1rem; overflow-x: auto;
            padding-bottom: 0.4rem; scroll-snap-type: x mandatory; }
.fp-tile { margin: 0; display: flex; flex-direction: column; gap: 0.45rem; scroll-snap-align: start; }
.fp-tile video { display: block; width: 100%; aspect-ratio: 9 / 16; height: auto; border-radius: 0.6rem; background: #000; }
.fp-tile figcaption a { display: block; color: var(--fg); text-decoration: none; font: 600 0.97rem/1.28 var(--serif); }
.fp-tile figcaption a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.fp-digest { display: flex; align-items: center; gap: 0.6rem; max-width: 36rem; color: var(--soft); text-decoration: none;
             font: 0.84rem/1.35 var(--sans); }
.fp-digest img, .fp-digest .fp-no-icon { flex: none; width: 28px; border-radius: 5px; }
.fp-digest b { color: var(--fg); margin-right: 0.2rem; }
.fp-digest:hover b { text-decoration: underline; }
.fp-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem 2.6rem; }
@media (min-width: 46rem) { .fp-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .fp-columns.fp-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                            .fp-columns:not(.fp-n1):not(.fp-n2):not(.fp-n3) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fp-show header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.2rem 0.6rem;
                  font: 0.76rem var(--sans); color: var(--muted); }
.fp-show header a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fg); text-decoration: none; font-size: 0.95rem; }
.fp-show header img, .fp-show header .fp-no-icon { width: 32px; border-radius: 5px; }
.fp-show h3 { margin: 0.7rem 0 0.2rem; font: 700 1.17rem/1.2 var(--serif); text-wrap: balance; }
.fp-tops { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.fp-tops li { padding-block: 0.55rem; border-top: 1px solid var(--line); font-size: 0.92rem; line-height: 1.35; }
.fp-tops li > a:first-child { color: var(--fg); text-decoration: none; font-weight: 600; margin-right: 0.2rem; }
.fp-tops li > a:first-child:hover { text-decoration: underline; }
.fp-at { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.45rem; font: 0.74rem var(--sans); color: var(--muted);
         text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fp-at:hover { color: var(--accent); }
.fp-topics { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.fp-topics a { display: block; padding: 0.22rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--fg);
               text-decoration: none; font: 0.8rem var(--sans); }
.fp-topics a:hover { border-color: var(--accent); }
.fp-topics span { margin-left: 0.2rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.colophon.fp-foot { max-width: 78rem; margin-top: 2rem; }
@media (max-width: 40rem) {             /* a phone: the date under the line it ends */
  .fp-motto span { display: block; margin: 0.1rem 0 0; }
}