/* Copyright (c) 2026 Ships It Friday. All rights reserved. */
:root {
  --bg:       #fbfbfa;
  --ink:      #16161a;
  --ink-soft: #63636b;
  --line:     #e4e4e0;
  --accent:   #f0501e;
  --player:   #f1f0ed;
  --vinyl:    #121214;
  --gold:     #c9a967;

  /* The comic art is drawn for white. It sits on this surface in both themes
     so the panels never pick up a tint from the page behind them. */
  --art:      #ffffff;
  --raise:    0 1px 2px rgba(16, 16, 18, 0.04), 0 8px 24px rgba(16, 16, 18, 0.06);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --step-0: 1.0625rem;
  --step-1: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --step-3: clamp(2.4rem, 1.4rem + 4.2vw, 4.5rem);

  /* page shell vs reading measure — the shell is wide, prose stays readable */
  --wrap:    1120px;
  --measure: 62ch;
  /* The legal pages read as a wide page rather than a narrow column, to sit
     with /about (whose hero and cast roster fill the wrap) and the comic
     page (whose strip is 768px). A 62ch column beside those looked like a
     different site. Capped rather than left to fill, so a 1680px wrap does
     not produce 1500px lines. */
  --measure-wide: 96ch;
  --feed:    40rem;   /* the comic column: wide enough to read a 4-panel strip */
  --pad:     clamp(1.25rem, 4vw, 3rem);
  --radius:  12px;
}

@media (prefers-color-scheme: dark) {
  :root { --bg:#101012; --ink:#f2f2f0; --ink-soft:#9a9aa2; --line:#2a2a2f;
          --player:#19191c;
          --raise: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35); }
}
:root[data-theme="dark"]  { --bg:#101012; --ink:#f2f2f0; --ink-soft:#9a9aa2; --line:#2a2a2f;
                            --player:#19191c;
                            --raise: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35); }
:root[data-theme="light"] { --bg:#fbfbfa; --ink:#16161a; --ink-soft:#63636b; --line:#e4e4e0;
                            --player:#f1f0ed;
                            --raise: 0 1px 2px rgba(16,16,18,0.04), 0 8px 24px rgba(16,16,18,0.06); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Past 1792px the shell widens with the screen, so the third column of comics
   is a real column at the same width as the other two rather than three
   thumbnails inside the old 1120px. Header, footer and page all share --wrap,
   so they widen together and stay aligned. */
@media (min-width: 112rem) {
  :root { --wrap: 1680px; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.brand img { width: 34px; height: 34px; }
.brand b { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; }

.nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

.toggle {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.toggle:hover { color: var(--ink); border-color: var(--ink-soft); }
.toggle-icon { width: 1.25rem; height: 1.25rem; display: block; }
.theme-glyph { display: none; }
.toggle[data-mode="auto"] .theme-glyph--auto,
.toggle[data-mode="light"] .theme-glyph--light,
.toggle[data-mode="dark"] .theme-glyph--dark { display: initial; }
.toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- type ---------- */
main { flex: 1; padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 7vw, 6rem); }

h1 {
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0 0 1rem;
  max-width: 16ch;
}
.lede {
  font-size: var(--step-1);
  color: var(--ink-soft);
  margin: 0;
  max-width: 46ch;
}
.lede a { color: var(--accent); }

.label {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 0.6rem;
}

/* ---------- about: animated intro + introduction ---------- */
.about-hero {
  display: block;
}

.about-intro-video {
  width: 100%;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
}
.about-intro-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0;
  background: #111;
  box-shadow: none;
}
.about-intro-video figcaption {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
}
.about-intro-video figcaption strong { color: var(--ink); font-weight: 700; }
.about-intro-disclaimer {
  display: block;
  margin-top: 0.25rem;
  line-height: 1.45;
}

.about-copy { grid-area: copy; }
.about-copy h1 { max-width: 11ch; }
.about-kicker {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.75rem;
}
.about-action {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 650;
  text-decoration: none;
}
.about-action:hover { border-color: var(--ink-soft); }
.about-action--primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.about-action--primary:hover { border-color: var(--accent); filter: brightness(0.96); }
.about-details { margin-top: clamp(2.75rem, 6vw, 4rem); border-top: 1px solid var(--line); }
.about-block { padding-block: 1.4rem; border-bottom: 1px solid var(--line); }
.about-block p { margin: 0; max-width: var(--measure); }
.about-block .status-follow { margin-top: 0.4rem; }
.about-block a { color: var(--accent); }

/* The cast is a section of the about page rather than a page of its own, so it
   is set off by a rule rather than by its own <h1>. */
.cast {
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-top: clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid var(--line);
}
.cast-title {
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 0.8rem;
}

.music-player {
  grid-area: player;
  width: 100%;
  max-width: 27rem;
  margin-inline: auto;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 1.75rem;
  background: var(--player);
  box-shadow: var(--raise);
}
@media (min-width: 860px) {
  .music-player { position: sticky; top: 5.5rem; }
}
.player-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.player-topline .label { margin: 0; color: var(--ink); }
.player-runtime {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.vinyl-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.98;
  margin: 0.8rem auto 0.25rem;
}
.vinyl-record {
  position: absolute;
  z-index: 1;
  top: 3%;
  left: 1%;
  width: 89%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #09090a;
  border-radius: 50%;
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,0.11), transparent 23%),
    repeating-radial-gradient(circle at center, #121214 0 8px, #303033 9px, #121214 10px 16px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 1rem 1.8rem rgba(0,0,0,0.18);
  animation: vinyl-spin 8s linear infinite;
  animation-play-state: paused;
}
.vinyl-record::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 220deg, transparent 0 19%, rgba(255,255,255,0.055) 24%, transparent 30% 66%, rgba(255,255,255,0.035) 73%, transparent 79%);
}
.music-player.is-playing .vinyl-record { animation-play-state: running; }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
.vinyl-label {
  position: relative;
  z-index: 2;
  width: 48%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.45);
}
.vinyl-label img { width: 100%; height: 100%; object-fit: cover; }
.vinyl-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #08080a;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.34);
}
.vinyl-shadow {
  position: absolute;
  z-index: 0;
  left: 5%;
  bottom: 2.5%;
  width: 82%;
  height: 7%;
  border-radius: 50%;
  background: rgba(25,22,19,0.14);
  filter: blur(1px);
}
.tonearm {
  position: absolute;
  z-index: 3;
  top: 2%;
  right: 7%;
  width: 6px;
  height: 47%;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 1px 1px rgba(0,0,0,0.22);
  transform: rotate(40deg);
  transform-origin: 50% 0;
  transition: transform 0.45s ease;
}
.tonearm::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.15rem;
  width: 0.8rem;
  height: 1.25rem;
  border-radius: 0.2rem;
  background: var(--gold);
  transform: translateX(-50%);
}
.tonearm-pivot {
  position: absolute;
  top: -0.35rem;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(-50%);
}
.music-player.is-playing .tonearm { transform: rotate(34deg); }
.player-meta { text-align: center; }
.player-meta h2 {
  margin: 0;
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.player-meta p { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 0.85rem; }
.player-timeline { margin-top: 1.15rem; }
.player-progress {
  --seek-progress: 0%;
  display: block;
  width: 100%;
  height: 1rem;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  accent-color: var(--accent);
  cursor: pointer;
  touch-action: none;
}
.player-progress::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--accent) 0 var(--seek-progress), var(--line) var(--seek-progress) 100%);
}
.player-progress::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  -webkit-appearance: none;
}
.player-progress::-moz-range-track {
  height: 3px;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(to right, var(--accent) 0 var(--seek-progress), var(--line) var(--seek-progress) 100%);
}
.player-progress::-moz-range-progress { height: 3px; border-radius: 99px; background: var(--accent); }
.player-progress::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--accent); }
.player-button {
  width: 4rem;
  height: 4rem;
  margin: 1rem auto 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0.55rem 1.2rem rgba(240,80,30,0.24);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.player-button:hover { filter: brightness(0.96); transform: translateY(-1px); }
.player-button:active { transform: translateY(0); }
.player-icon { width: 1.65rem; height: 1.65rem; }
.player-icon--pause { display: none; }
.music-player.is-playing .player-icon--play { display: none; }
.music-player.is-playing .player-icon--pause { display: block; }
.player-status { margin: 0.75rem 0 0; color: var(--accent); font-size: 0.78rem; text-align: center; }
.player-status:empty { display: none; }
.music-player audio { display: block; width: 100%; margin-top: 1rem; }
.music-player.is-enhanced audio { display: none; }

/* ---------- lyrics ---------- */
/* A window of three lines rather than the whole song: the player is a card,
   not a page. Before the song plays it reads as a plain transcript, which is
   also what a visitor without JavaScript gets.

   The height is the line box (0.9rem x 1.35) times three, plus the two 0.5rem
   gaps between them — so exactly the line being sung and one either side.
   site.js centres the lit line on the scroller's own clientHeight, so it
   follows this number without needing to know it. */
.lyrics {
  position: relative;
  max-height: 4.7rem;
  margin-top: 1.1rem;
  padding-block: 0.25rem;
  border-top: 1px solid var(--line);
  overflow-y: auto;
  scrollbar-width: none;
  /* The first and last lines fade rather than being cut mid-letter. The fade
     scales with the window: at 1.6rem it would have swallowed both neighbours
     and left only the middle line legible. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 1.05rem, #000 calc(100% - 1.05rem), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 1.05rem, #000 calc(100% - 1.05rem), transparent);
}
.lyrics::-webkit-scrollbar { display: none; }
.lyrics-lines {
  /* Half the window, less half a line — lets the opening and closing lines
     reach the middle instead of stalling against the end of the scroll. */
  list-style: none;
  margin: 0;
  padding: 1.75rem 0;
  display: grid;
  gap: 0.5rem;
  text-align: center;
}
.lyrics-line {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.35;
  opacity: 0.55;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.lyrics-line.is-current {
  color: var(--ink);
  opacity: 1;
  font-weight: 650;
}
@media (prefers-reduced-motion: reduce) {
  .lyrics-line { transition: none; }
}
.music-player:not(.is-enhanced) .player-timeline,
.music-player:not(.is-enhanced) .player-button { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vinyl-record { animation: none; }
  .tonearm, .player-button { transition: none; }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.25rem;
  font-weight: 600;
  color: var(--accent);
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.more {
  display: inline-block;
  margin-top: 1rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.more:hover { text-decoration: underline; }

/* ---------- meta line ---------- */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}
.meta .sep { opacity: 0.5; }
.meta .num { font-variant-numeric: tabular-nums; }

/* ---------- home: the comic grid ---------- */
/* The strip is four panels in a 2×2, so the card's own width decides whether
   the dialogue can be read at all: below about 30rem the lettering goes to
   mush. That is the floor, and the column count follows from it rather than
   the other way round — a column is only added once every card in the row can
   still be 30rem wide. In practice: one column to 70rem, two to 112rem, three
   beyond it, with every card landing between 30rem and the 40rem of the
   single-column feed. */
.cards {
  list-style: none;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 0;
  max-width: var(--feed);
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 70rem) {
  .cards {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.75rem, 3vw, 2.75rem);
  }
}
@media (min-width: 112rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Every card in a row is the same height: the art is square so it always
   matches, and the chain of flex columns below hands the leftover height to
   the body, where the meta line is pushed to the bottom edge. A one-line
   caption beside a three-line one then still gives two cards that line up. */
.card { display: flex; }
.card article {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.card article:hover {
  border-color: var(--ink-soft);
  box-shadow: var(--raise);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .card article, .card article:hover { transition: none; transform: none; }
}

.card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

/* The art always sits on white — it is drawn for white. */
.art {
  position: relative;
  background: var(--art);
  border-bottom: 1px solid var(--line);
}
.art img { width: 100%; }

.badge {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  background: rgba(16, 16, 18, 0.72);
  color: #fff;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.25rem 1.25rem;
}
.card-body .meta { margin-top: auto; }
.card-title {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.4rem;
}
.card-link:hover .card-title { color: var(--accent); }
.card-caption { margin: 0 0 0.7rem; color: var(--ink-soft); }

/* ---------- load more ---------- */
.more-wrap { max-width: var(--feed); margin: clamp(2.5rem, 6vw, 3.5rem) auto 0; text-align: center; }
.load-more {
  width: 100%;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  cursor: pointer;
}
.load-more:hover:not(:disabled) { border-color: var(--ink-soft); }
.load-more:disabled { opacity: 0.5; cursor: default; }
.load-more .count { color: var(--ink-soft); font-weight: 400; }

/* ---------- one comic ---------- */
.comic .back { margin-bottom: 1.5rem; }

.viewer {
  position: relative;
  max-width: 48rem;
  margin-inline: auto;
}
.track {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--art);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.track.is-single .slide { width: 100%; }

/* A real scroll container: swipe and scrollbar drag work with no JS at all. */
.viewer.is-carousel .track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.viewer.is-carousel .track::-webkit-scrollbar { display: none; }
.viewer.is-carousel .slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.slide img { width: 100%; }

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--raise);
}
.arrow.prev { left: -0.75rem; }
.arrow.next { right: -0.75rem; }
.arrow:hover:not(:disabled) { border-color: var(--ink-soft); }
.arrow:disabled { opacity: 0.3; cursor: default; }

.viewer-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.9rem;
}
.dots { display: flex; gap: 0.4rem; }
.dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}
.dot.is-current { background: var(--accent); }
.counter { margin: 0; color: var(--ink-soft); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

.comic-head { max-width: var(--measure); margin: clamp(2rem, 5vw, 3rem) auto 0; }
.comic-head h1 { font-size: var(--step-2); max-width: none; margin-bottom: 0.6rem; }
.comic-head .meta { margin-bottom: 0.9rem; }

.prose { max-width: var(--measure); margin: 2rem auto 0; }
.prose h2 {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 2rem 0 0.6rem;
}
.prose p { margin: 0 0 1rem; }
.prose ol, .prose ul { margin: 0 0 1rem; padding-left: 1.4rem; }
.prose li { margin-bottom: 0.35rem; }
.prose li strong { font-weight: 600; }
.prose a { color: var(--accent); }

.topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  max-width: var(--measure);
  margin: 1.75rem auto 0;
  padding: 0;
}
.topics li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ---------- share ---------- */
.share {
  max-width: var(--measure);
  margin: clamp(2rem, 5vw, 3rem) auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.share-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: none;
  cursor: pointer;
}
.chip:hover { border-color: var(--ink-soft); }
.chip.is-done { color: var(--accent); border-color: var(--accent); }

/* ---------- pager ---------- */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  border-top: 1px solid var(--line);
  padding-block: 1.5rem;
}
.pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  min-width: 0;
}
.pager-link:hover { border-color: var(--line); }
.pager-link.is-older { text-align: right; align-items: flex-end; }
.pager-link.is-empty { border: 0; }
.pager-dir { font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; }
.pager-title {
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pager-link:hover .pager-title { color: var(--accent); }

/* ---------- links ---------- */
.back {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
}
.back:hover { color: var(--accent); }

/* ---------- cast sheets — always on white, the art is drawn for white ---------- */
figure {
  margin: 0;
  background: var(--art);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
figcaption {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.sheets {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.roster {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.75rem 2.5rem;
  /* Wide enough for "Ines Marchetti — the designer · finds them" to sit on one
     line; at 16rem the grid made four columns and broke every name in half. */
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  font-size: 0.95rem;
}
.roster li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.swatch {
  width: 10px; height: 10px;
  border-radius: 2px;
  flex: none;
  transform: translateY(-1px);
}
.roster .who { min-width: 0; }
.roster b { font-weight: 600; white-space: nowrap; }
.roster .role { color: var(--ink-soft); }

/* ---------- privacy / terms ---------- */
/* A wide column, left-aligned to the wrap.
 *
 * These pages used to sit at the 62ch reading measure, which next to /about
 * (whose hero and cast roster span the wrap) read as a different site. Width is
 * what fixes that, not alignment: they now take --measure-wide and start at the
 * wrap's left edge, so the title and the body share the page's left margin the
 * way every other page does.
 *
 * The heading sits in its own `.legal-head` wrapper rather than being given the
 * measure directly, the same way `.comic-head` does it. `--measure` is 62ch and
 * `ch` resolves against the ELEMENT'S OWN font size, so putting it on an h1 set
 * in --step-3 yields about 1584px rather than the 664px the same token gives
 * body text — the heading ended up wider than the page instead of narrower.
 * On a wrapper at body size the token means what it says, and the h1 inside is
 * bounded by its parent. Text inside stays left-aligned. */
.legal-head,
.legal .prose,
.legal .consent-settings { max-width: min(100%, var(--measure-wide)); margin-inline: 0; }
.legal .meta { margin-block: 0.9rem 0; }
.legal .prose { margin-block: 2.5rem 0; }
.legal .prose h2:first-child { margin-top: 0; }
.consent-settings {
  max-width: var(--measure);
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.consent-settings h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.consent-settings p { margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.9rem; }
.consent-settings p:last-child { margin-bottom: 0; }

/* ---------- consent dialog ---------- */
/* A full-width bar across the bottom, not a floating card. As a 34rem card the
   copy wrapped to four or five lines and the box stood 240px tall — a third of
   a phone screen of comics hidden behind a question. Full width lets the same
   sentence sit on one or two lines, and above 46rem the buttons move beside it
   so the whole bar is a single row. */
.consent {
  position: fixed;
  z-index: 20;
  inset: auto 0 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  box-shadow: var(--raise);
}
.consent[hidden] { display: none; }
.consent-body {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 0.9rem var(--pad);
  /* Clear of the iOS home indicator when the bar sits on the viewport edge. */
  padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
  display: grid;
  gap: 0.75rem 2rem;
}
@media (min-width: 46rem) {
  .consent-body {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}
.consent-title {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.consent-body p { margin: 0; color: var(--ink-soft); font-size: 0.875rem; }
.consent-body a { color: var(--accent); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consent-button {
  min-height: 2.5rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 650;
  cursor: pointer;
}
.consent-button:hover { border-color: var(--ink-soft); }
.consent-button--primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.consent-button--primary:hover { border-color: var(--accent); filter: brightness(0.96); }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding-block: 1.75rem 3rem;
  color: var(--ink-soft);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  text-align: center;
}
.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.links a { color: var(--ink); text-decoration: none; font-weight: 600; }
.links a:hover { color: var(--accent); }
.fine { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; }
.fine a { color: inherit; }
.fine a:hover { color: var(--accent); }
.fine .sep { opacity: 0.5; }

@media (max-width: 480px) {
  .nav { gap: 1rem; }
  .nav a { font-size: 0.85rem; }
  footer { flex-direction: column; align-items: center; }
  .pager { grid-template-columns: 1fr; }
  .pager-link.is-empty { display: none; }
  .arrow.prev { left: 0.4rem; }
  .arrow.next { right: 0.4rem; }
}