/* The read: the homepage's one scroll-driven piece.
   A memorandum is read the way an investment committee reads it: out of order,
   marking what cannot be proved, and finally pointing at what is not there.
   Then the same figures are shown prepared.

   Rebuilt for the simplification pass. The first version pinned a frame with
   overflow hidden and centred a stage inside it that was taller than the
   frame on most laptops, so the notes were cut off top and bottom and the
   prepared sheet never fitted a screen. It also showed all four notes at
   once. Four rules stop that returning:

     1. One note is visible at a time, and the sheet carries one live mark.
     2. The pin never clips. It is as tall as the screen at least, and the
        script only pins when the stage measures shorter than the pin.
     3. The stage keeps one height through every beat, because the notes share
        one grid cell and the two sheets share another.
     4. Below 961px wide or 720px tall, under reduced motion, and with no
        script, nothing is pinned: the sheet, the four notes and the prepared
        sheet follow each other down the page.

   Tokens only. */

.read { position: relative; padding-block: var(--section-y); }
.read-stage {
  width: min(100% - var(--gutter) * 2, max(var(--container-wide), 72vw)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8);
}

/* ── the sheet ────────────────────────────────────────────────────── */
.sheet {
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--fg-3);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--elev-card);
  padding: clamp(1.25rem, 2.2vw, 2.25rem);
  font: 400 clamp(0.875rem, min(1.75vh, 1.15vw), 1.25rem)/1.5 var(--font-body);
}
.sheet-h { font: 600 1.25em/1.25 var(--font-display); color: var(--fg-2); margin: 0; max-width: none; }
.sheet-sub { font: 500 0.9em/1.4 var(--font-supporting); color: var(--fg-3); margin: 0.25em 0 1.1em; max-width: none; }
.sheet table { width: 100%; table-layout: fixed; font-variant-numeric: tabular-nums; }
.sheet col.lab { width: 46%; }
.sheet th, .sheet td { padding: 0.45em 0.6em; text-align: left; vertical-align: top; }
.sheet th:first-child, .sheet td:first-child { padding-left: 0.6em; }
.sheet thead th { font: 500 0.9em/1.3 var(--font-supporting); color: var(--fg-3); border-bottom: 1px solid var(--border); }
.sheet tbody tr + tr td { border-top: 1px solid var(--border-soft); }
.sheet td.n, .sheet th.n { font-family: var(--font-supporting); font-weight: 500; color: var(--fg-2); text-align: right; white-space: nowrap; }
.sheet-line { margin: 1em 0 0; padding: 0 0.6em; max-width: none; }
.sheet-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em 1.5em;
  margin-top: 1.1em; padding-top: 0.8em; border-top: 1px solid var(--border);
  font: 500 0.875em/1.3 var(--font-supporting); color: var(--fg-3);
}

/* The space at the foot of the page where a sources and uses statement would
   be. It takes whatever height the prepared sheet needs, so the two sheets are
   one size and the page does not jump when one replaces the other. */
.mk-gap {
  position: relative; flex: 1 1 auto; min-height: 4.5rem; margin-top: 1em;
  border: 1px dashed var(--meta); border-radius: var(--radius-md);
}

/* ── the marks ────────────────────────────────────────────────────────
   With no script every mark is already drawn. */
.mk { position: relative; }
.mk-line { background: linear-gradient(var(--meta), var(--meta)) 0 100% / 100% 2px no-repeat; padding-bottom: 2px; }
.mk-strike { background: linear-gradient(var(--fg-3), var(--fg-3)) 0 58% / 100% 1px no-repeat; }
.mk-n {
  display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-left: 0.5em;
  border-radius: var(--radius-pill); background: var(--fg-2); color: var(--bg);
  font: 600 0.8em/1 var(--font-supporting); vertical-align: 0.1em;
}
.mk-gap .mk-n { position: absolute; right: 0.75em; top: 0.75em; margin: 0; }

/* the prepared sheet's sources, each on its own row under the figure it explains */
.sheet .src td { padding-top: 0; border-top: 0; font-size: 0.9em; line-height: 1.45; color: var(--fg-3); }
.sheet .src td::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em; border-radius: var(--radius-pill); background: var(--accent-soft); }
.sheet-su { margin-top: 1em; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.35em 0.3em; flex: 1 1 auto; }
.sheet-su table { font-size: 0.925em; }
.sheet-su col.su-lab { width: 34%; }
.sheet-su col.su-num { width: 16%; }
.sheet-su tbody tr:last-child td { font-weight: 600; color: var(--fg-2); }

/* ── the notes ────────────────────────────────────────────────────── */
.read-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-8); }
.read-notes > li { margin: 0; max-width: none; }
.read-note .num {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: var(--space-4);
  border-radius: var(--radius-pill); background: var(--fg-2); color: var(--bg);
  font: 600 0.9375rem/1 var(--font-supporting);
}
.read-note h3 { font: var(--type-h2-xl); letter-spacing: var(--track-display); margin: 0 0 var(--space-4); text-wrap: balance; }
.read-note p { font: var(--type-lead-xl); color: var(--fg-3); margin: 0; max-width: 30rem; }
.read-note .call-quiet { margin-top: var(--space-6); }
.read-status, .read-dots { display: none; }
.read-fine { font: var(--type-caption); color: var(--fg-3); margin: var(--space-8) 0 0; }

/* ── pinned: only when the script has measured that it fits ───────── */
.read-beats { display: none; }
.read.is-pinned { padding-bottom: var(--space-16); }
.read.is-pinned .read-track { position: relative; height: calc(100vh + 6 * 55vh); height: calc(100svh + 6 * 55vh); }
.read.is-pinned .read-beats {
  display: grid; position: absolute; inset: 0; pointer-events: none;
  grid-template-rows: calc(50vh + 55vh) repeat(4, 55vh) 1fr;
}
.read.is-pinned .read-pin {
  position: sticky; top: var(--head-h);
  min-height: calc(100vh - var(--head-h)); min-height: calc(100svh - var(--head-h));
  display: grid; align-content: center; padding-block: var(--space-4);
}
/* A laptop with the browser's own bars showing has 600 to 720 pixels for the
   page. The stage still pins there: the sheet is set tighter, the status line
   is dropped, and the gap at the foot of the page is shallower, so the whole
   stage fits one screen instead of falling back to the long column. */
@media (min-width: 961px) and (max-height: 719px) {
  .read.is-pinned .read-pin { padding-block: var(--space-2); }
  .read.is-pinned .sheet { font-size: 0.8125rem; padding: 1rem 1.25rem; }
  .read.is-pinned .sheet th, .read.is-pinned .sheet td { padding-block: 0.3em; }
  .read.is-pinned .sheet-sub { margin-bottom: 0.7em; }
  .read.is-pinned .sheet-foot { margin-top: 0.7em; padding-top: 0.5em; }
  .read.is-pinned .mk-gap { min-height: 3rem; margin-top: 0.7em; }
  .read.is-pinned .read-status { display: none; }
  .read.is-pinned .read-stage { row-gap: var(--space-4); }
  .read.is-pinned .read-note h3 { font: var(--type-h3-xl); }
  .read.is-pinned .read-note p { font: var(--type-body-xl); }
}
/* The commonest laptop, 1366 by 768 with the browser's bars, leaves about 640
   pixels. The prepared sheet with its sources and uses table decides the
   stage's height, so it is set one size smaller again here. Below about 620
   pixels the script measures that it no longer fits and shows the column. */
@media (min-width: 961px) and (max-height: 680px) {
  .read.is-pinned .sheet { font-size: 0.75rem; padding: 0.75rem 1rem; }
  .read.is-pinned .sheet th, .read.is-pinned .sheet td { padding-block: 0.25em; }
  .read.is-pinned .sheet-su table { font-size: 0.9em; }
  .read.is-pinned .mk-gap { min-height: 2.5rem; }
}
.read.is-pinned .read-stage {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "doc status" "doc side" "doc dots";
  column-gap: clamp(2rem, 5vw, 5.5rem); row-gap: var(--space-6);
}
.read.is-pinned .sheet { grid-area: doc; transition: opacity 0.45s var(--ease-standard); }
.read.is-pinned .read-marks, .read.is-pinned .read-hold, .read.is-pinned .read-fix { grid-area: side; align-self: center; }
.read.is-pinned .read-notes { gap: 0; }
.read.is-pinned .read-notes > li { grid-area: 1 / 1; }

/* one note at a time */
.read.is-pinned .read-notes > li, .read.is-pinned .read-hold, .read.is-pinned .read-fix {
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.35s var(--ease-standard), transform 0.5s var(--ease-out);
}
.read.is-pinned[data-beat="1"] .read-notes > li:nth-child(1),
.read.is-pinned[data-beat="2"] .read-notes > li:nth-child(2),
.read.is-pinned[data-beat="3"] .read-notes > li:nth-child(3),
.read.is-pinned[data-beat="4"] .read-notes > li:nth-child(4),
.read.is-pinned[data-beat="5"] .read-hold,
.read.is-pinned[data-beat="6"] .read-fix { opacity: 1; transform: none; pointer-events: auto; }

/* one sheet at a time, in one cell, so nothing moves when they change places */
.read.is-pinned .sheet-repaired { opacity: 0; pointer-events: none; }
.read.is-pinned[data-beat="6"] .sheet-marked { opacity: 0; pointer-events: none; }
.read.is-pinned[data-beat="6"] .sheet-repaired { opacity: 1; pointer-events: auto; }

/* the marks draw as they are reached: teal while it is the one being read,
   slate once the reader has moved on */
.read.is-pinned .mk-line { background-size: 0% 2px; transition: background-size var(--motion-draw) var(--ease-out); }
.read.is-pinned .mk-strike { background-size: 0% 1px; transition: background-size var(--motion-draw) var(--ease-out); }
.read.is-pinned .mk-line.is-marked { background-size: 100% 2px; }
.read.is-pinned .mk-strike.is-marked { background-size: 100% 1px; }
.read.is-pinned .mk-line.is-live { background-image: linear-gradient(var(--accent), var(--accent)); }
.read.is-pinned .mk-n { opacity: 0; transform: scale(0.6); transition: opacity 0.25s var(--ease-standard), transform 0.35s var(--ease-out), background var(--motion-base) linear, width 0.3s var(--ease-out), margin 0.3s var(--ease-out); }
.read.is-pinned .is-marked + .mk-n, .read.is-pinned .mk-gap.is-marked .mk-n { opacity: 1; transform: none; }
.read.is-pinned .is-live + .mk-n, .read.is-pinned .mk-gap.is-live .mk-n { background: var(--accent); }
/* The numeral inside a sentence takes no room until its mark is made, so the
   sentence reads as written until the reader gets to it. */
.read.is-pinned .mk-strike + .mk-n { width: 0; margin-left: 0; }
.read.is-pinned .mk-strike.is-marked + .mk-n { width: 1.5em; margin-left: 0.4em; }
.read.is-pinned .sheet-marked tbody tr { transition: background var(--motion-base) var(--ease-standard); }
.read.is-pinned .sheet-marked tbody tr.is-live { background: color-mix(in srgb, var(--accent-tint) 70%, var(--bg)); }
.read.is-pinned .mk-gap { border-color: var(--border); transition: border-color var(--motion-base) linear, background var(--motion-base) linear; }
.read.is-pinned .mk-gap.is-marked { border-color: var(--meta); }
.read.is-pinned .mk-gap.is-live { border-color: var(--accent); background: color-mix(in srgb, var(--accent-tint) 45%, var(--bg)); }

/* where the reading stands, and how far through it is */
.read.is-pinned .read-status {
  display: block; grid-area: status; margin: 0; max-width: none;
  font: 500 0.875rem/1 var(--font-supporting); color: var(--fg-3);
}
.read-status b { font-weight: 600; color: var(--fg-2); margin-left: var(--space-2); }
.read.is-pinned[data-beat="6"] .read-status b { color: var(--accent); }
.read.is-pinned .read-dots { display: flex; grid-area: dots; gap: var(--space-2); }
.read-dots i { width: 1.75rem; height: 3px; border-radius: var(--radius-pill); background: var(--border); transition: background var(--motion-base) linear; }
.read[data-beat="1"] .read-dots i:nth-child(-n+1),
.read[data-beat="2"] .read-dots i:nth-child(-n+2),
.read[data-beat="3"] .read-dots i:nth-child(-n+3),
.read[data-beat="4"] .read-dots i:nth-child(-n+4),
.read[data-beat="5"] .read-dots i:nth-child(-n+5),
.read[data-beat="6"] .read-dots i:nth-child(-n+6) { background: var(--fg-2); }

/* ── stacked: the order a printed page would give it ──────────────── */
.read:not(.is-pinned) .read-stage { width: min(100% - var(--gutter) * 2, 46rem); }
.read:not(.is-pinned) .read-hold { padding-top: var(--space-8); border-top: 1px solid var(--border); }
.read:not(.is-pinned) .read-note h3 { font: var(--type-h3-xl); letter-spacing: normal; }
.read:not(.is-pinned) .read-note p { font: var(--type-body-xl); }
.read:not(.is-pinned) .read-hold h3, .read:not(.is-pinned) .read-fix h3 { font: var(--type-h2-xl); letter-spacing: var(--track-display); }
.read:not(.is-pinned) .read-notes > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--space-4); }
.read:not(.is-pinned) .read-notes > li > :not(.num) { grid-column: 2; }
.read:not(.is-pinned) .read-note .num { margin-bottom: 0; }
.read:not(.is-pinned) .sheet-repaired { box-shadow: none; }
@media (max-width: 640px) {
  .sheet { font-size: 0.875rem; padding: var(--space-4); }
  .sheet col.lab { width: 40%; }
  .sheet th, .sheet td { padding-inline: 0.3em; }
  .sheet-su col.su-lab { width: 32%; }
  .sheet-su col.su-num { width: 18%; }
}