/* ── THE STUDY PANEL: its type and its page (27 Sept 2026) ────────────
   The room is a magazine page fitted to half a screen, so everything is
   measured against the panel, not the window: the panel is a size
   container and the scale below reads its width (cqw). Loads after
   density.css, which holds the house tokens and the Avenir Next faces.

   His call for this round: Avenir Next only, even for the large type,
   and no Ogg. The big type is set the way the board sets its own: 600
   to 800, tight tracking (about -0.05em at display sizes, -0.055em at
   the largest, -0.03em around 20 to 30px), line-height near 0.9 to 1.
   Figures go very large, so scale does what the serif used to.

   The vocabulary comes from the pieces he sent back from the Mind and
   the Brief (26 Sept): weights that change at close sizes (a regular
   lede, medium body, a short bold line), the two-tone lead, a kicker
   under a hairline, labels in small grey caps over a bold head, the spec
   table, swatches with the hex under them, a figure on a black field,
   and a small picture set beside its text. Ink, paper, one grey. Colour
   only from the study: its fill under the first pull quote, its palette
   in the title block, its lines' own squares. */

.sp { container: sp / inline-size; position: relative; min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--sans);
  overflow-x: clip; -webkit-font-smoothing: antialiased; --m: 34px; --vh: 800px; --gc: clamp(20px, 3.4cqw, 36px); --grey2: rgba(0, 0, 0, 0.3); }
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
/* the reset sits under :where() so every class rule below outranks it */
.sp :where(p, h1, h2, h3, blockquote, figure, dl, dd, ol, ul) { margin: 0; }
.sp :where(ul, ol) { padding: 0; list-style: none; }
.sp a { color: inherit; text-decoration: none; }
.sp-g { color: var(--grey); }
/* small grey caps: the label voice */
.sp-caps { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; color: var(--grey); }

/* ── the bar: the study's name once the title has gone, and Close ── */
.sp-bar { position: sticky; top: 0; height: 0; z-index: 5; }
.sp-bar-in { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px var(--m) 0;
  color: #fff; mix-blend-mode: difference; font-size: 12px; font-weight: 600; letter-spacing: -0.004em; line-height: 1.2; pointer-events: none; }
.sp-bar-t { opacity: 0; transition: opacity 0.25s ease; white-space: nowrap; overflow: hidden; text-overflow: clip; }
/* the section the reader is in, beside the study's name, and a rule of
   ink along the hairline as far as they have read */
.sp-bar-s { margin-left: 1.3em; font-size: 9.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--grey); }
.sp-bar-s b { margin-right: 0.8em; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-bar-in::after { content: ""; position: absolute; left: 0; right: 0; top: 39px; height: 1px; background: var(--ink);
  transform: scaleX(var(--pg, 0)); transform-origin: 0 50%; opacity: 0; transition: opacity 0.2s ease; }
.sp.sp-past .sp-bar-in::after { opacity: 1; }
.sp.sp-past .sp-bar-t { opacity: 1; }
/* once the title has gone the bar is a running head on paper, the height
   the sticky column titles and asides already clear (44px). Set in white
   with difference it read on the cover, but further down it printed the
   study's name through figures, heads and paragraphs (27 Sept review) */
.sp-bar-in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; background: var(--paper); border-bottom: 1px solid var(--hair); opacity: 0; transition: opacity 0.2s ease; }
.sp.sp-past .sp-bar-in { color: var(--ink); mix-blend-mode: normal; }
.sp.sp-past .sp-bar-in::before { opacity: 1; }
.sp-bar-t, .sp-x { position: relative; }
.sp.sp-past .sp-x { pointer-events: auto; }
.sp-x { pointer-events: auto; margin-left: auto; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.sp-x:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* ── pictures: edge to edge, no radius ── */
.sp-pic { position: relative; overflow: hidden; background: rgba(0, 0, 0, 0.045); }
.sp-pic.alpha { background: var(--cream); }
.sp-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s ease; }
/* a mark on its square of flat colour (study-panel.js MARKS): set small in
   the middle, the square's colour round it */
.sp-pic.mark img { inset: 0; margin: auto; width: calc(var(--mk, 0.5) * 100%); height: calc(var(--mk, 0.5) * 100%); object-fit: contain; }
.sp-pic.in img { opacity: 1; }

/* the cover: edge to edge, or at its honest size with air */
.sp-cover { position: relative; }
.sp-cover.small { padding: calc(var(--m) + 22px) var(--m) 0; }
.sp-cside { display: none; }
.sp-cover.side { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gc); }
.sp-cover.side .sp-cside { display: block; min-width: 0; }
.sp-cover.side .sp-cpic { flex: none; }
.sp-cside .sp-meta { margin: 0; }
.sp-cside .sp-lines { flex-direction: column; gap: 1px; margin-top: 10px; }
.sp-open.sp-bare { display: none; }

/* rows at one height; their width and place are set from the pixels */
.sp-plates { margin-top: clamp(44px, 9cqw, 88px); }
.sp-row { display: flex; gap: var(--g, 8px); }
/* ── a live page in a frame (study-panel.js livesEl; 1 Oct 2026, his "can
   we use live pages?"): the page at its own width, scaled into a stage
   with the pictures' corner; the frame never takes the wheel, and a
   click on it opens the page. Phones and emails sit two to a row ── */
.sp-lives { display: flex; flex-direction: column; gap: clamp(28px, 5cqw, 44px); margin-top: clamp(28px, 5cqw, 44px); }
.sp-lives.phone { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: clamp(20px, 4cqw, 36px) clamp(14px, 3cqw, 24px); }
.sp-live { margin: 0; min-width: 0; }
.sp-lives.phone .sp-live { flex: 0 1 calc(50% - clamp(7px, 1.5cqw, 12px)); max-width: 390px; }
.sp-live-stage { position: relative; overflow: hidden; border-radius: var(--pr, 4px); background: #F4F2EE; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.sp-live.phone .sp-live-stage { border-radius: 18px; }
.sp-live-stage iframe { position: absolute; left: 0; top: 0; display: block; border: 0; background: #fff; transform-origin: 0 0; pointer-events: none; }
.sp-live-open { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.sp-live-cap { margin-top: 10px; }
.sp-live-cap b { font-weight: 500; color: var(--ink); }
/* a module made for the column (mode "fit"): no frame, no corner, no
   ground of its own; it reads as part of the room */
.sp-lives.fit { margin-top: clamp(32px, 6cqw, 56px); }
.sp-live-fit .sp-live-stage { overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
.sp-live-fit .sp-live-stage iframe { background: transparent; }
/* a replay that draws its own laptop (3 Oct 2026, the Marketing OS demos):
   no box behind it, the laptop stands on the room's paper */
.sp-live-bare .sp-live-stage { border-radius: 0; background: transparent; box-shadow: none; }
.sp-live-bare .sp-live-stage iframe { background: transparent; }
/* a card to another study's room (study-link): its cover, what it is to
   this one, its name; it opens in place */
.sp-xlink { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(16px, 3cqw, 28px); align-items: end; margin: clamp(32px, 6cqw, 56px) var(--m) 0; padding: clamp(18px, 3.4cqw, 28px); border-radius: 6px; background: #F4F3F1; cursor: pointer; }
.sp-xlink .sp-caps { grid-column: 1; align-self: start; margin-bottom: clamp(18px, 4cqw, 34px); }
.sp-xlink-t { grid-column: 1; font-size: clamp(26px, 5.4cqw, 46px); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; transition: color 0.2s ease; }
.sp-xlink:hover .sp-xlink-t { color: var(--grey); }
.sp-xlink-n { grid-column: 1; margin-top: 10px; max-width: 34em; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--grey); }
.sp-xlink-pic { grid-column: 2; grid-row: 1 / span 3; width: clamp(84px, 19cqw, 160px); aspect-ratio: var(--ar); }
.sp-row + .sp-row { margin-top: var(--g, 8px); }
.sp-row > .sp-pic { flex: var(--r) 1 0; min-width: 0; aspect-ratio: var(--ar); }
.sp-cap { margin-top: 10px; font-size: 11.5px; font-weight: 500; line-height: 1.45; letter-spacing: -0.002em; color: var(--grey); }
/* a captioned plate is a numbered figure, the number set as the index sets its own */
.sp-fno { margin-right: 0.8em; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-cap + .sp-row, .sp-one + .sp-row, .sp-row + .sp-one, .sp-one + .sp-one { margin-top: clamp(28px, 5cqw, 44px); }
.sp-one { position: relative; }
.sp-one.side .sp-cap { position: absolute; bottom: 0; margin: 0; }

/* ── the head ── */
.sp-head { padding: clamp(22px, 3.8cqw, 34px) var(--m) 0; }
.sp-title { font-size: 72px; font-weight: 700; letter-spacing: -0.055em; line-height: 0.9; text-wrap: balance; margin-left: -0.04em; }
.sp-stand { margin-top: clamp(18px, 3cqw, 28px); max-width: 23em; font-size: clamp(19px, 3.2cqw, 26px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.18; }

/* ── the grid: a rail for small heads and facts, a column for text ── */
.sp-grid { padding: 0 var(--m); }
/* no rule over the opening block (2 Oct 2026, his "in the case studies we
   can remove some of the thin rules ... this first one i think we can
   drop from the system"): white space does the separating, and the 12px
   that sat under the rule goes with it */
.sp-open { margin: clamp(36px, 7cqw, 64px) var(--m) 0; padding: 0; }
.sp-solo .sp-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin: 0; }
.sp-solo .sp-lines { margin: 0; flex-direction: row; gap: 2px 14px; }
.sp-meta { margin-bottom: 22px; font-size: 12px; font-weight: 600; line-height: 1.45; letter-spacing: -0.004em; }
.sp-kk { color: var(--grey); }
.sp-kk .y { color: var(--grey2); margin-left: 0.35em; font-variant-numeric: tabular-nums; }
.sp-kk .sp-no { margin-right: 0.7em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-lines { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; }
.sp-line { white-space: nowrap; }
.sp-line i { display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.45em; vertical-align: 0.02em; }

/* body: one size, and the weight changes where a passage starts */
.sp-p { max-width: 34em; margin-bottom: 1.05em; font-size: 15px; font-weight: 500; letter-spacing: -0.006em; line-height: 1.62; }
.sp-p:last-child { margin-bottom: 0; }
/* the lede, the abstract's first paragraph (.sp-lede) and a section's
   (.sp-ls), is the body's size now, set apart by weight alone: demi over
   the medium body. It was a size up in the regular weight (27 Sept, his
   "let's make the font sizes on these sections (for all case studies,
   global) the same size and use weight or color to differentiate") */
.sp-ls, .sp-lede { font-weight: 600; }
.sp-col { margin-bottom: 0.6em; font-size: 15.5px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.22; }

/* two halves from 560px up: what labels a passage on the left, the copy
   itself on the right, starting just past the middle (27 Sept: "split
   the copy so it's half split and not slightly past half"; it was 3 to 7) */
@container sp (min-width: 560px) {
  .sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gc); align-items: start; }
  .sp-open { padding-left: 0; padding-right: 0; }
  .sp-rail { grid-column: 1; }
  .sp-text { grid-column: 2; }
  .sp-meta { margin: 0.2em 0 0; }
  .sp-lines { flex-direction: column; gap: 1px; margin-top: 10px; }
  .sp-col { position: sticky; top: 44px; margin-top: 0.1em; }
}

/* an item with a title of its own sits under a hairline, like a kicker */
.sp-run.sp-hasc { padding-top: 12px; border-top: 1px solid var(--hair); margin-left: var(--m); margin-right: var(--m); padding-left: 0; padding-right: 0; }
.sp-sec > .sp-run.sp-hasc + .sp-run.sp-hasc { margin-top: clamp(28px, 5cqw, 44px); }

/* ── figures: the figure large, the sentence it came from small ── */
.sp-fm { min-width: 0; }
.sp-fn { font-size: 120px; font-weight: 700; letter-spacing: -0.055em; line-height: 0.86; white-space: nowrap; margin-left: -0.05em; }
.sp-fn .sp-g { letter-spacing: -0.04em; }
.sp-fs { max-width: 25em; margin-top: 0.9em; font-size: 13.5px; font-weight: 500; letter-spacing: -0.004em; line-height: 1.52; }
.sp-fs b { font-weight: 700; }
.sp-band { display: grid; gap: clamp(36px, 7cqw, 64px) clamp(18px, 3.4cqw, 36px); margin: clamp(48px, 10cqw, 96px) var(--m) 0; }
.sp-figs { display: grid; gap: 28px 24px; margin: 2.1em 0 2.2em; }
.sp-figs:first-child { margin-top: 0.4em; }
.sp-figs:last-child { margin-bottom: 0; }
/* a band leads with its first figure across the page; the others step
   down the right half, where the copy runs (his canvas rough, 27 Sept).
   Figures inside the copy stack, one to a line, in its half */
@container sp (min-width: 560px) {
  .sp-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gc); align-items: start; }
  .sp-band > * { grid-column: 2; }
  .sp-band > :first-child, .sp-band.sp-stack > * { grid-column: 1 / -1; }
}

/* the black field: the room's one loud figure block. White figures, the
   label in caps, the sentence in grey, the study small at the foot */
.sp-black { margin: clamp(56px, 11cqw, 104px) 0 0; padding: clamp(34px, 6.4cqw, 58px) var(--m) clamp(22px, 3.6cqw, 30px); background: #000; color: #fff; }
.sp-black .sp-band, .sp-black .sp-nums { margin: 0; }
.sp-black .sp-fn { font-weight: 800; letter-spacing: -0.06em; }
.sp-black .sp-fs, .sp-black .sp-ns { color: rgba(255, 255, 255, 0.52); }
.sp-black .sp-fs b { color: #fff; }
.sp-black .sp-nl { color: #fff; }
.sp-black .sp-numt { border-color: rgba(255, 255, 255, 0.16); }
.sp-black .sp-nr { border-color: rgba(255, 255, 255, 0.16); }
.sp-black .sp-nr .s { color: rgba(255, 255, 255, 0.52); }
/* the solid blocks end where the pictures do (2 Oct 2026, his "it runs
   off the side to the right edge when we put padding on the case
   studies"): the room sets --rm, 20px on a desk and 0 on a phone, where
   pictures bleed too. A look that fills the glass (lk-fill) says its own
   margins further down and wins. Their corners are the pictures' (the
   round lever, in crossref2.css) */
.sp-black, .sp-field { margin-right: var(--rm, 0px); }
.sp-bcap { margin-top: clamp(40px, 7.4cqw, 68px); font-size: 12px; font-weight: 600; letter-spacing: -0.004em; line-height: 1.3; color: rgba(255, 255, 255, 0.55); }
.sp-bcap .y { margin-left: 0.35em; color: rgba(255, 255, 255, 0.32); font-variant-numeric: tabular-nums; }

/* ── sections ── */
.sp-sec { margin-top: clamp(80px, 15cqw, 150px); }
/* a section opens the way a section of the index does ("01 LINES"): its
   number bold, its name in ink caps, a rule of ink under them. The room
   reads as the article its contents page promised (27 Sept, the
   editorial pass; it was a grey label under a rule) */
/* no rule under the label (2 Oct 2026, his "let's also try removing the
   rule under the section labels in the case studies too"): the 8px and the
   1px ink rule that sat under it are gone, so the label stands on the air
   above its heading alone */
.sp-kick { display: flex; align-items: baseline; margin: 0 var(--m); padding: 0; border-bottom: 0;
  font-size: 9.5px; letter-spacing: 0.09em; color: var(--ink); }
.sp-kick b { margin-right: 0.8em; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-h { max-width: 12.5em; margin: clamp(20px, 3.6cqw, 34px) var(--m) 0; font-size: clamp(32px, 6.4cqw, 60px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.96; text-wrap: balance; margin-left: calc(var(--m) - 0.04em); }
.sp-deck { max-width: 25em; margin: clamp(14px, 2.4cqw, 22px) var(--m) 0; font-size: clamp(18px, 2.9cqw, 23px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.22; }
.sp-deck.sp-short { font-size: clamp(20px, 3.5cqw, 28px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; }
.sp-sec > .sp-run, .sp-sec > .sp-aside, .sp > .sp-run, .sp > .sp-aside { margin-top: clamp(32px, 6cqw, 56px); }
.sp-sec > .sp-plates { margin-top: clamp(40px, 8cqw, 76px); }
.sp-sec > .sp-plates + .sp-run, .sp-sec > .sp-plates + .sp-aside { margin-top: clamp(40px, 8cqw, 76px); }

/* a small or tall picture beside its text */
.sp-aside { padding: 0 var(--m); }
.sp-aw { width: min(100%, var(--pw, 100%)); margin-bottom: 24px; }
.sp-apic { width: 100%; aspect-ratio: var(--ar); }
.sp-acap { margin-top: 9px; }
.sp-in-aside { padding: 0; }
.sp-in-aside.sp-hasc { margin: 0; }
.sp-in-aside + .sp-in-aside { margin-top: clamp(26px, 4.6cqw, 40px); }
/* the picture hangs from the left margin in the left half, as wide as
   its pixels allow up to the half; the copy runs in the right half */
@container sp (min-width: 560px) {
  .sp-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gc); align-items: start; }
  .sp-aw { position: sticky; top: 44px; margin: 0; }
  .sp-aside .sp-at { min-width: 0; }
  .sp-aside .sp-in-aside { display: block; padding: 0; }
  .sp-aside .sp-in-aside .sp-col { position: static; }
  .sp-aside .sp-in-aside .sp-p { max-width: 30em; }
}

/* the pull quote: large, with room around it; the first on the study's fill */
.sp-pull { margin-top: clamp(80px, 15cqw, 150px); padding: 0 var(--m); }
.sp-pq { font-size: 64px; font-weight: 700; letter-spacing: -0.052em; line-height: 0.95; text-wrap: balance; margin-left: -0.04em; }
.sp-field { background: var(--fill); color: var(--fink); padding: clamp(56px, 12cqw, 120px) var(--m) clamp(26px, 4.4cqw, 38px); }
.sp-field .sp-g { color: inherit; opacity: 0.55; }
.sp-fcap { margin-top: clamp(56px, 11cqw, 104px); font-size: 12px; font-weight: 600; letter-spacing: -0.004em; opacity: 0.62; }
.sp-fcap .y { margin-left: 0.35em; opacity: 0.6; }
.sp-sec > .sp-pull:not(.sp-field) { margin-top: clamp(60px, 11cqw, 110px); }
.sp-pull:not(.sp-field) .sp-pq { max-width: 11em; }
.sp-pull.sp-field + .sp-plates { margin-top: 0; }
.sp-pull:not(.sp-field) + .sp-plates { margin-top: clamp(40px, 8cqw, 76px); }

/* the closing lines */
.sp-closing { margin: clamp(44px, 8cqw, 76px) var(--m) 0; }
.sp-closing p { max-width: 17em; margin-bottom: 0.4em; font-size: clamp(22px, 4.3cqw, 38px); font-weight: 700; letter-spacing: -0.042em; line-height: 1.06; }
.sp-closing p + p { font-weight: 600; font-size: clamp(18px, 2.9cqw, 23px); letter-spacing: -0.03em; line-height: 1.22; max-width: 25em; margin-top: 0.7em; }
.sp-closing p:last-child { margin-bottom: 0; }
/* a closing that runs past a couple of lines set at display size was a
   wall of bold; a long one steps down to the deck's scale and keeps the
   weight (27 Sept review) */
.sp-closing p.sp-long { max-width: 23em; font-size: clamp(19px, 3.2cqw, 25px); letter-spacing: -0.03em; line-height: 1.18; }

/* feature cards: items under hairlines */
.sp-cards { display: grid; gap: 30px 28px; margin: clamp(34px, 6cqw, 56px) var(--m) 0; }
.sp-card { padding-top: 12px; border-top: 1px solid var(--hair); }
.sp-card h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.022em; line-height: 1.25; }
.sp-card p { margin-top: 0.5em; font-size: 14px; font-weight: 500; letter-spacing: -0.004em; line-height: 1.55; }
@container sp (min-width: 560px) { .sp-cards { grid-template-columns: 1fr 1fr; } }

/* stats: four large, the rest as a ruled table */
.sp-nums { margin: clamp(40px, 8cqw, 76px) var(--m) 0; }
.sp-numg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6cqw, 54px) clamp(18px, 3.4cqw, 36px); align-items: start; }
.sp-numg.n1 { grid-template-columns: 1fr; }
.sp-nl { margin-top: 1.1em; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.3; text-transform: uppercase; }
.sp-ns { margin-top: 0.35em; font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--grey); }
.sp-numt { margin-top: clamp(36px, 7cqw, 64px); border-bottom: 1px solid var(--hair); }
.sp-nr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 5fr); gap: 4px 16px; padding: 9px 0; border-top: 1px solid var(--hair); font-size: 13px; line-height: 1.4; align-items: baseline; }
.sp-nr .v { font-size: 18px; font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.sp-nr .l { font-weight: 600; }
.sp-nr .s { font-weight: 500; color: var(--grey); }
@container sp (max-width: 559px) { .sp-nr { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .sp-nr .s { grid-column: 2; } }

/* a chart and a timeline, drawn from their numbers */
.sp-chart, .sp-steps { margin: clamp(44px, 9cqw, 84px) var(--m) 0; }
.sp-chart .sp-fn { margin-top: 16px; }
.sp-bar2 { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin-top: 18px; font-size: 13px; font-weight: 600; letter-spacing: -0.004em; }
.sp-bar2 + .sp-bar2 { margin-top: 14px; }
.sp-chart .sp-fn + .sp-bar2 { margin-top: 32px; }
.sp-bar2 span:last-of-type { font-weight: 500; font-variant-numeric: tabular-nums; }
.sp-bar2 i { grid-column: 1 / -1; display: block; height: 14px; background: var(--ink); }
.sp-dur { margin-top: 12px; font-size: clamp(26px, 5.4cqw, 48px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.sp-stl { display: grid; margin-top: 22px; border-top: 1px solid var(--ink); }
.sp-stl li { padding: 10px 12px 12px 0; border-bottom: 1px solid var(--hair); font-size: 13px; line-height: 1.35; }
.sp-stl li b { font-weight: 700; letter-spacing: -0.012em; }
.sp-stl li span:last-child { display: block; margin-top: 3px; font-weight: 500; color: var(--grey); }
@container sp (min-width: 560px) { .sp-stl { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .sp-stl li { border-bottom: 0; } }

/* ── the title block: the spec table, the services and stack as lists,
   the palette as swatches with the hex under them ── */
.sp-spec { margin: clamp(90px, 16cqw, 160px) var(--m) 0; padding-top: 12px; border-top: 1px solid var(--hair); }
.sp-spec-h { margin-bottom: clamp(26px, 5cqw, 44px); font-size: 12px; font-weight: 600; letter-spacing: -0.004em; line-height: 1.3; }
.sp-tb { border-bottom: 1px solid var(--hair); }
.sp-tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gc); padding: 11px 0 12px; border-top: 1px solid var(--hair); align-items: baseline; }
.sp-tr dt { padding-top: 0.15em; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; color: var(--grey); overflow-wrap: anywhere; }
.sp-tr dd { font-size: 14.5px; font-weight: 500; letter-spacing: -0.008em; line-height: 1.45; }
.sp-tcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gc); margin-top: clamp(34px, 6cqw, 54px); }
.sp-tcol { padding-top: 11px; border-top: 1px solid var(--hair); }
.sp-tcol ul { margin-top: 10px; }
.sp-tcol li { font-size: 14.5px; font-weight: 500; letter-spacing: -0.008em; line-height: 1.45; }
.sp-palw { margin-top: clamp(40px, 7cqw, 64px); }
.sp-pal { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 132px)); gap: clamp(6px, 1.2cqw, 10px); margin-top: 12px; }
.sp-sw i { display: block; aspect-ratio: 1; }
.sp-sw span { display: block; margin-top: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.07em; line-height: 1.3; text-transform: uppercase; color: var(--grey); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sp-sw span + span { margin-top: 1px; letter-spacing: 0.02em; text-transform: none; font-weight: 500; }

/* ── the foot ── */
.sp-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 28px; margin: clamp(80px, 14cqw, 130px) var(--m) 0; padding: 12px 0 clamp(32px, 6cqw, 56px); border-top: 1px solid var(--ink); }
.sp-next { flex: 1 1 60%; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(16px, 3cqw, 28px); align-items: end; min-width: 0; cursor: pointer; }
.sp-next .sp-caps { grid-column: 1; align-self: start; margin-bottom: clamp(26px, 5cqw, 44px); }
.sp-next-t { grid-column: 1; font-size: clamp(30px, 6.6cqw, 62px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.95; text-wrap: balance; transition: color 0.2s ease; margin-left: -0.04em; }
.sp-next:hover .sp-next-t { color: var(--grey); }
.sp-next-pic { grid-column: 2; grid-row: 1 / span 2; width: clamp(84px, 19cqw, 170px); aspect-ratio: var(--ar); }
.sp-full { font-size: 13px; font-weight: 600; letter-spacing: -0.004em; padding-bottom: 1px; border-bottom: 1px solid currentColor; }
.sp-full:hover { color: var(--grey); }

/* ── marks: what a caller points at, quietly ── */
.sp .sp-on { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.sp .sp-fm.sp-on, .sp .sp-tr.sp-on, .sp .sp-card.sp-on, .sp .sp-nr.sp-on { text-decoration: none; box-shadow: inset 0 1px 0 var(--ink); }
.sp .sp-black .sp-fm.sp-on, .sp .sp-black .sp-nr.sp-on { box-shadow: inset 0 1px 0 #fff; }
.sp .sp-fm.sp-on .sp-fn { text-decoration: underline; text-decoration-thickness: 0.035em; text-underline-offset: 0.1em; }
.sp .sp-pic.sp-on::after, .sp .sp-pal.sp-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink); }
.sp .sp-pal.sp-on::after { bottom: -8px; height: 2px; }

/* ── arriving ── */
@keyframes sp-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sp-enter .sp-head { animation: sp-up 0.7s var(--ease) 0.05s both; }
.sp-enter .sp-open { animation: sp-up 0.7s var(--ease) 0.16s both; }
@media (prefers-reduced-motion: reduce) {
  .sp-enter .sp-head, .sp-enter .sp-open { animation: none; }
  .sp-pic img { transition: none; }
}

/* ── MOTION (27 Sept): the live site's reveals, set out in study-panel.js
   above MOTION. Only a room with motion allowed (.mo) has start states;
   each block leaves its start state when it is given .rv-go, and .rv-now
   skips the travel. The curves: the headline curve for type, the wipe
   curve for pictures and fields, the house curve for rules ── */
.sp.mo { --ez-t: cubic-bezier(0.16, 1, 0.3, 1); --ez-w: cubic-bezier(0.22, 1, 0.36, 1); --ez-r: cubic-bezier(0.2, 0.7, 0.2, 1); }
.sp.mo.sp-enter .sp-head, .sp.mo.sp-enter .sp-open { animation: none; }
.sp.mo .rv-now, .sp.mo .rv-now *, .sp.mo .rv-now::before { transition: none !important; }

/* type through a mask: each word clipped to its line, rising into it */
.sp.mo .rv:is(.rv-mask, .rv-lines):not(.rv-go) { opacity: 0; }
.sp.mo .rv-mask { --dur: 1.2s; }
.sp.mo .rv-lines { --dur: 0.7s; }
.sp.mo .rv-split .rvw { display: inline-block; clip-path: inset(-0.3em -0.2em -0.3em -0.2em); }
.sp.mo .rv-split .rvi { display: inline-block; transform: translateY(128%); }
.sp.mo .rv-split.rv-go .rvi { transform: none; transition: transform var(--dur) var(--ez-t) var(--d, 0ms); }
/* a mark on a head that stays split underlines its words */
.sp .sp-on .rvw .rvi { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* a picture unveils down its frame while the image settles. The clip is
   on the image, not the frame: a frame clipped away is one the
   IntersectionObserver never sees arrive, so it never revealed */
.sp.mo .rv-pic:not(.alpha) { background-color: transparent; }
.sp.mo .rv-pic img { scale: 1.06; transition: opacity 0.45s ease, scale 1.6s var(--ez-t) var(--d, 0ms), clip-path 0.9s var(--ez-w) var(--d, 0ms); }
.sp.mo .rv-pic:not(.rv-go) img { clip-path: inset(0 0 100% 0); }
/* the end state is a shape too: from inset() to none cannot be
   animated, so the unveil never ran and the picture popped in */
.sp.mo .rv-pic.rv-go img { scale: 1; clip-path: inset(0 0 0 0); }
/* the drift: a tenth taller, moved up through it by the scroll */
.sp.mo .sp-pic.par img { bottom: auto; height: 110%; translate: 0 var(--py, 0px); }
/* the cover settles once the room is on stage, when nothing flew to it */
@keyframes sp-settle { from { scale: 1.07; } }
.sp.mo .sp-cpic.settle img { animation: sp-settle 1.8s var(--ez-t) both; }

/* a field of colour unveils down, like a picture: a sheet of paper over
   it draws back to its foot (again, the field itself is not clipped) */
.sp.mo .rv-field { position: relative; }
.sp.mo .rv-field::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; bottom: -1px; z-index: 2; background: var(--paper);
  transform-origin: 50% 100%; transition: transform 0.9s var(--ez-w) var(--d, 0ms); pointer-events: none; }
.sp.mo .rv-field.rv-go::after { transform: scaleY(0); }

/* a rule draws in from the left; the words it heads follow */
.sp.mo .rv-rule { position: relative; border-top-color: transparent !important; }
.sp.mo .rv-rule::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--rc, var(--hair));
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.66s var(--ez-r) var(--d, 0ms); pointer-events: none; }
.sp.mo .rv-rule.rv-go::before { transform: none; }
.sp.mo :is(.sp-kick, .sp-foot) { --rc: var(--ink); }
.sp.mo .sp-black .sp-nr { --rc: rgba(255, 255, 255, 0.16); }
/* the section's rule was under its number and name; it no longer draws
   (2 Oct 2026). The label keeps its place in the rule kind for the way
   its words come in, a beat after the line used to, so the timing of
   everything after it is as it was */
.sp.mo .sp-kick.rv-rule { border-bottom-color: transparent !important; }
.sp.mo .sp-kick.rv-rule::before { display: none; }
.sp.mo .sp-kick.rv { transition: color 0.5s ease calc(var(--d, 0ms) + 0.12s); }
.sp.mo .sp-kick.rv:not(.rv-go) { color: transparent; }
.sp.mo .sp-nr.rv > * { transition: opacity 0.5s ease calc(var(--d, 0ms) + 0.12s); }
.sp.mo .sp-nr.rv:not(.rv-go) > * { opacity: 0; }

/* small type lifts in; a chart's bars grow after their words */
.sp.mo .rv-fade { transition: opacity 0.7s ease var(--d, 0ms), transform 0.7s var(--ez-t) var(--d, 0ms); }
.sp.mo .rv-fade:not(.rv-go) { opacity: 0; transform: translateY(10px); }
.sp.mo .sp-bar2.rv i { transform-origin: 0 50%; transition: transform 0.9s var(--ez-r) calc(var(--d, 0ms) + 0.1s); }
.sp.mo .sp-bar2.rv:not(.rv-go) i { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  .sp .rvi { transform: none !important; }
  .sp .sp-pic img { scale: 1 !important; translate: none !important; animation: none !important; }
}

/* ── SIX WAYS IN (27 Sept, the motion exploration): html[data-motion]
   picks what a block does when its turn comes. The turns, the queue and
   the start states above are shared, and rise is exactly the rules
   above; each family here overrides them. What each one is for is set
   out in study-panel.js, above FAM ── */
html[data-motion]:not([data-motion="rise"]) .sp.mo .rv-now::after { transition: none !important; }
/* a replay puts every block back at its start with no travel */
.sp.mo.rv-reset .rv, .sp.mo.rv-reset .rv *, .sp.mo.rv-reset .rv::before, .sp.mo.rv-reset .rv::after { transition: none !important; animation: none !important; }
html:is([data-motion="set"], [data-motion="wipe"], [data-motion="focus"], [data-motion="cut"]) .sp.mo .rv-split .rvw { clip-path: none; }
html:is([data-motion="set"], [data-motion="wipe"], [data-motion="focus"], [data-motion="cut"]) .sp.mo .rv-split .rvi { transform: none; }
/* the band over a line is the words' own colour: solid over display
   type, a tint of it over text (on paper, the index's #ECECEC). Under
   a field's sheet, over the words */
.sp.mo .rvband { position: absolute; z-index: 1; pointer-events: none; }
.sp.mo .rvb-ink { background: currentColor; }
.sp.mo .rvb-grey { background: color-mix(in srgb, currentColor 7.5%, transparent); }
@keyframes rvwipe {
  0% { clip-path: inset(0 100% 0 0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  48% { clip-path: inset(0 0 0 0); }
  52% { clip-path: inset(0 0 0 0); animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
  100% { clip-path: inset(0 0 0 100%); }
}
@keyframes rvblink { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }

/* SET: typed across. A line is set left to right at a steady pace, each
   word opening over its share of the line's time; a picture opens from
   a slit like a shutter; a rule runs at the same even pace */
html[data-motion="set"] .sp.mo .rv-split .rvi { clip-path: inset(-0.3em 100% -0.3em -0.1em); }
html[data-motion="set"] .sp.mo .rv-split.rv-go .rvi { clip-path: inset(-0.3em -0.3em -0.3em -0.1em); transition: clip-path var(--wd, 60ms) linear var(--d, 0ms); }
html[data-motion="set"] .sp.mo .rv-pic img { scale: 1; transition: opacity 0.45s ease, clip-path 0.8s cubic-bezier(0.7, 0, 0.15, 1) var(--d, 0ms); }
html[data-motion="set"] .sp.mo .rv-pic:not(.rv-go) img { clip-path: inset(50% 0 50% 0); }
html[data-motion="set"] .sp.mo .rv-field::after { transform: none; background: linear-gradient(var(--paper), var(--paper)) top / 100% 50% no-repeat, linear-gradient(var(--paper), var(--paper)) bottom / 100% 50% no-repeat;
  transition: background-size 0.8s cubic-bezier(0.7, 0, 0.15, 1) var(--d, 0ms); }
html[data-motion="set"] .sp.mo .rv-field.rv-go::after { transform: none; background-size: 100% 0%, 100% 0%; }
html[data-motion="set"] .sp.mo .rv-rule::before { transition: transform 0.34s linear var(--d, 0ms); }
html[data-motion="set"] .sp.mo .rv-fade { transition: opacity 0.2s linear var(--d, 0ms); }
html[data-motion="set"] .sp.mo .rv-fade:not(.rv-go) { transform: none; }

/* WIPE: the index's own mark. A band sweeps in over a line from the
   left and leaves to the right, the words turning up under it. A
   picture is masked in along the same path, its own edge sweeping in
   from the left on the band's curve: it was uncovered from under an
   ink panel at first, and the ink read as passing over the picture
   (his "the wipe happens OVER the image ... can it mask the image
   in?", 27 Sept) */
html[data-motion="wipe"] .sp.mo .rvband { clip-path: inset(0 100% 0 0); }
html[data-motion="wipe"] .sp.mo .rv-go > .rvband { animation: rvwipe var(--bd, 700ms) linear var(--d, 0ms) both; }
html[data-motion="wipe"] .sp.mo .rv-split .rvi { opacity: 0; }
html[data-motion="wipe"] .sp.mo .rv-split.rv-go .rvi { opacity: 1; transition: opacity 0s linear var(--d, 0ms); }
html[data-motion="wipe"] .sp.mo .rv-pic img { scale: 1; transition: opacity 0.45s ease, clip-path 0.7s cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0ms); }
html[data-motion="wipe"] .sp.mo .rv-pic:not(.rv-go) img { clip-path: inset(0 100% 0 0); }
html[data-motion="wipe"] .sp.mo .rv-field::after { transform-origin: 100% 50%; transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0ms); }
html[data-motion="wipe"] .sp.mo .rv-field.rv-go::after { transform: scaleX(0); }
html[data-motion="wipe"] .sp.mo .rv-rule::before { transition: transform 0.36s cubic-bezier(0.45, 0, 0.2, 1) var(--d, 0ms); }
html[data-motion="wipe"] .sp.mo .rv-fade { transition: opacity 0.3s cubic-bezier(0.45, 0, 0.2, 1) calc(var(--d, 0ms) + 0.18s); }
html[data-motion="wipe"] .sp.mo .rv-fade:not(.rv-go) { transform: none; }

/* FOCUS: out of a blur, softness in proportion to the type's size; a
   picture settles from a little closer as it sharpens */
html[data-motion="focus"] .sp.mo .rv-split .rvi { opacity: 0; filter: blur(0.16em); transform: translateY(0.06em); }
html[data-motion="focus"] .sp.mo .rv-split.rv-go .rvi { opacity: 1; filter: none; transform: none;
  transition: opacity 0.9s ease var(--d, 0ms), filter 1.1s var(--ez-t) var(--d, 0ms), transform 1.1s var(--ez-t) var(--d, 0ms); }
html[data-motion="focus"] .sp.mo .rv-pic img { scale: 1.12; filter: blur(14px) opacity(0);
  transition: opacity 0.45s ease, scale 1.8s var(--ez-t) var(--d, 0ms), filter 1.2s ease var(--d, 0ms); }
html[data-motion="focus"] .sp.mo .rv-pic:not(.rv-go) img { clip-path: none; }
html[data-motion="focus"] .sp.mo .rv-pic.rv-go img { scale: 1; filter: none; }
html[data-motion="focus"] .sp.mo .rv-field::after { transition: opacity 1s ease var(--d, 0ms); }
html[data-motion="focus"] .sp.mo .rv-field.rv-go::after { transform: none; opacity: 0; }
html[data-motion="focus"] .sp.mo .rv-rule::before { transform: none; opacity: 0; transition: opacity 0.9s ease var(--d, 0ms); }
html[data-motion="focus"] .sp.mo .rv-rule.rv-go::before { opacity: 1; }
html[data-motion="focus"] .sp.mo .rv-fade { transition: opacity 0.9s ease var(--d, 0ms), filter 1s ease var(--d, 0ms); }
html[data-motion="focus"] .sp.mo .rv-fade:not(.rv-go) { transform: none; filter: blur(4px); }

/* CUT: hard cuts, a line at a time in Faux Reel's rhythm. Display type
   gets a blink of its own colour first; a picture a blink of ink */
html[data-motion="cut"] .sp.mo .rvband { opacity: 0; }
html[data-motion="cut"] .sp.mo .rv-go > .rvband { animation: rvblink 90ms linear var(--d, 0ms) forwards; }
html[data-motion="cut"] .sp.mo .rv-split .rvi { opacity: 0; }
html[data-motion="cut"] .sp.mo .rv-split.rv-go .rvi { opacity: 1; transition: opacity 0s linear var(--d, 0ms); }
html[data-motion="cut"] .sp.mo .rv-pic::before { content: ""; position: absolute; inset: 0; z-index: 2; background: var(--ink); opacity: 0; pointer-events: none; }
html[data-motion="cut"] .sp.mo .rv-pic.rv-go:not(.rv-now)::before { animation: rvblink 120ms linear var(--d, 0ms) forwards; }
html[data-motion="cut"] .sp.mo .rv-pic img { scale: 1; transition: opacity 0.45s ease, clip-path 0s linear calc(var(--d, 0ms) + 120ms); }
html[data-motion="cut"] .sp.mo .rv-pic:not(.rv-go) img { clip-path: inset(0 0 0 100%); }
html[data-motion="cut"] .sp.mo .rv-field::after { transition: transform 0s linear var(--d, 0ms); }
html[data-motion="cut"] .sp.mo .rv-rule::before { transition: transform 0s linear var(--d, 0ms); }
html[data-motion="cut"] .sp.mo .rv-fade { transition: opacity 0s linear calc(var(--d, 0ms) + 60ms); }
html[data-motion="cut"] .sp.mo .rv-fade:not(.rv-go) { transform: none; }

/* SCRUB: no clock. --p is how far a block has come up the glass (the
   driver in study-panel.js), and everything is as far along as that:
   display type rising through its masks a line at a time, a picture
   growing into its frame as the live plates do, a field's colour
   rising from its foot */
html[data-motion="scrub"] .sp.mo .rv-mask.rv-split .rvi { transform: translateY(calc((1 - clamp(0, var(--p, 1) * 1.4 - var(--li, 0) * 0.14, 1)) * 112%)); }
html[data-motion="scrub"] .sp.mo .rv-lines { opacity: calc(0.1 + 0.9 * var(--p, 1)); transform: translateY(calc((1 - var(--p, 1)) * 16px)); }
html[data-motion="scrub"] .sp.mo .rv-pic img { scale: calc(0.9 + 0.1 * var(--p, 1)); }
html[data-motion="scrub"] .sp.mo .rv-field::after { transform-origin: 50% 0; transform: scaleY(calc(1 - var(--p, 1))); }
html[data-motion="scrub"] .sp.mo .rv-rule::before { transform: scaleX(var(--p, 1)); }
html[data-motion="scrub"] .sp.mo .rv-fade { opacity: var(--p, 1); transform: translateY(calc((1 - var(--p, 1)) * 10px)); }
html[data-motion="scrub"] .sp.mo .sp-bar2.rv i { transform: scaleX(var(--p, 1)); }

/* ── THE BREAK SECTIONS' LOOKS (27 Sept): the black field of figures and
   the first pull quote, in seven looks chosen on a small row in the
   sections themselves. What each is for is set out in study-panel.js,
   above LOOKS ── */
.sp-brk { position: relative; }
.sp-bcap, .sp-fcap { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 8px; }
.sp-looks { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; padding-left: 24px; font-size: 9.5px; color: inherit; }
.sp-looks button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; opacity: 0.5; cursor: pointer; }
.sp-looks button:hover, .sp-looks button.on { opacity: 1; }
.sp-looks button.on { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
/* on paper, the captions are the room's grey */
.sp-brk:not(.sp-black):not(.sp-field) :is(.sp-bcap, .sp-fcap) { color: var(--grey); opacity: 1; }
.sp-brk:not(.sp-black):not(.sp-field) :is(.sp-bcap, .sp-fcap) .y { color: var(--grey2); opacity: 1; }

/* PULL: a magazine's pull quote on paper, between an ink rule and a
   hairline, its mark hung in the study's colour; a figure pulled out the
   same way, its sentence beside it */
.sp-pull.lk-pull { margin-left: var(--m); margin-right: var(--m); padding: clamp(20px, 3.6cqw, 32px) 0 clamp(16px, 2.8cqw, 24px); border-top: 3px solid var(--ink); border-bottom: 1px solid var(--hair); }
.sp-pull.lk-pull .sp-pq { max-width: 13em; }
.sp-pull.lk-pull .sp-pq::before { content: "\201C"; display: block; height: 0.52em; margin: 0 0 0.1em -0.05em; font-size: 1.8em; line-height: 0.9; color: var(--fill); }
.sp-pull.lk-pull .sp-fcap { margin-top: clamp(28px, 5.6cqw, 50px); }
.sp-brk-f.lk-pull { margin: clamp(56px, 11cqw, 104px) var(--m) 0; }
.sp-brk-f.lk-pull :is(.sp-band, .sp-nums, .sp-numg) { display: block; margin: 0; }
.sp-brk-f.lk-pull .sp-fm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px var(--gc); padding: clamp(16px, 3cqw, 24px) 0 clamp(20px, 3.6cqw, 30px); border-top: 3px solid var(--ink); }
.sp-brk-f.lk-pull .sp-fm + .sp-fm { border-top: 1px solid var(--hair); }
.sp-brk-f.lk-pull .sp-fs { margin: 0; }
.sp-brk-f.lk-pull .sp-bcap { margin-top: 14px; }
@container sp (min-width: 560px) {
  .sp-brk-f.lk-pull .sp-fm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .sp-brk-f.lk-pull .sp-fm > .sp-fn { grid-row: 1 / span 3; min-width: 0; }
  .sp-brk-f.lk-pull .sp-fm > :not(.sp-fn) { grid-column: 2; }
}

/* TAKEOVER: a glass tall, the words as large as it holds them, each
   figure to the edges */
.sp-brk.lk-takeover { box-sizing: border-box; min-height: var(--vh, 100vh); display: flex; flex-direction: column; justify-content: space-between; }
.sp-pull.lk-takeover { padding-top: clamp(40px, 8cqw, 80px); }
.sp-pull.lk-takeover .sp-pq { max-width: none; line-height: 0.86; letter-spacing: -0.058em; }
.sp-brk-f.lk-takeover :is(.sp-band, .sp-numg) { display: block; }
.sp-brk-f.lk-takeover .sp-fm + .sp-fm { margin-top: clamp(44px, 9cqw, 90px); }
.sp-brk-f.lk-takeover .sp-fn { line-height: 0.8; letter-spacing: -0.065em; margin-left: -0.055em; text-wrap: balance; }

/* ICONS: on paper, each figure over a drawing of what it counts, in the
   study's colour (in ink when the colour is too light to read); the
   quote under a mark drawn the same way */
.sp-brk-f.lk-icons { margin: clamp(56px, 11cqw, 104px) var(--m) 0; padding-top: 14px; border-top: 1px solid var(--ink); }
.sp-brk-f.lk-icons :is(.sp-band, .sp-numg) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(40px, 8cqw, 72px) var(--gc); margin: 0; }
.sp-brk-f.lk-icons .sp-nums { margin: 0; }
.sp-brk-f.lk-icons .sp-band > * { grid-column: auto !important; }
.sp-brk-f.lk-icons .sp-bcap { margin-top: clamp(36px, 7cqw, 64px); }
.sp-ico { margin-bottom: 20px; color: var(--dotc, var(--ink)); line-height: 0; }
.sp-picto { display: block; max-width: 100%; height: auto; }
.sp-picto rect, .sp-picto circle { fill: currentColor; }
.sp-picto circle.off { opacity: 0.16; }
.sp-pull.lk-icons { margin-left: var(--m); margin-right: var(--m); padding: 0; }
.sp-qmark { width: clamp(52px, 9cqw, 88px); margin-bottom: clamp(18px, 3.4cqw, 28px); color: var(--fill); }
.sp-qmark svg { display: block; width: 100%; height: auto; fill: currentColor; }
.sp-pull.lk-icons .sp-fcap { margin-top: clamp(28px, 5.6cqw, 50px); }

/* REPEAT: the words again and again in outline down the field, over
   the words themselves in solid */
.sp-wall { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--m)) clamp(28px, 5.4cqw, 50px); overflow: hidden; pointer-events: none; user-select: none; }
.sp-wl { display: block; padding-left: var(--m); white-space: nowrap; font-size: clamp(40px, 9.6cqw, 96px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.9;
  color: transparent; -webkit-text-stroke: 1px var(--wc, #fff); opacity: 0.7; }
/* the outline's colour is the field's ink: its own colour is transparent */
.sp-black .sp-wall { --wc: #fff; }
.sp-field .sp-wall { --wc: var(--fink); }
.sp-black.lk-repeat .sp-wall { margin-top: calc(-0.6 * clamp(34px, 6.4cqw, 58px)); }

/* AIR: small type in a tall page of paper, the study's colour one small
   square in its corner */
.sp-brk.lk-air { box-sizing: border-box; min-height: calc(var(--vh, 100vh) * 0.86); margin: clamp(64px, 13cqw, 128px) var(--m) 0; padding: 0 0 clamp(18px, 3.4cqw, 28px);
  display: flex; flex-direction: column; justify-content: flex-end; border-top: 1px solid var(--hair); }
.sp-dot { position: absolute; left: 0; top: 16px; width: 12px; height: 12px; background: var(--fill); }
.sp-pull.lk-air .sp-pq { max-width: 15em; font-size: clamp(22px, 3.3cqw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.16; }
.sp-brk-f.lk-air :is(.sp-band, .sp-numg) { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 8cqw, 72px) 0; margin: 0; }
.sp-brk-f.lk-air .sp-nums { margin: 0; }
.sp-brk-f.lk-air .sp-band > * { grid-column: auto !important; }
.sp-brk.lk-air :is(.sp-bcap, .sp-fcap) { margin-top: clamp(40px, 8cqw, 72px); }
@container sp (min-width: 560px) {
  .sp-pull.lk-air .sp-pq, .sp-brk-f.lk-air :is(.sp-band, .sp-nums) { margin-left: calc(50% + var(--gc) / 2); }
}

/* FILL: the live site's knockout (PressingQuote). The section two and a
   half glasses tall, a screen held in it, the fill rising at the
   screen's foot as the reader goes on; a copy of the words in the fill's
   own ink shows only where the fill has reached, so the type turns over
   along its edge. A copy and a clip rather than the live site's blend,
   so it holds on any fill, not only black on white */
.sp-brk.lk-fill { height: calc(var(--vh, 100vh) * 2.4); margin-left: 0; margin-right: 0; padding: 0; }
.sp-brk-f.lk-fill { margin-top: clamp(56px, 11cqw, 104px); }
.sp-kscr { position: sticky; top: 0; height: var(--vh, 100vh); overflow: hidden; display: grid; background: var(--paper); isolation: isolate; }
.sp-kf { position: absolute; left: 0; right: 0; bottom: 0; height: var(--fh, 0%); z-index: 0; }
.sp-kin { grid-area: 1 / 1; position: relative; z-index: 1; min-width: 0; padding: clamp(56px, 11cqw, 104px) var(--m) clamp(22px, 4cqw, 34px); color: var(--ink); }
.sp-kinr { display: flex; flex-direction: column; min-height: 100%; transform: translateY(var(--kt, 0px)); }
.sp-kinr > :is(.sp-pq, .sp-band, .sp-nums) { margin-top: auto; margin-bottom: auto; }
.sp-kin :is(.sp-band, .sp-nums) { margin-left: 0; margin-right: 0; }
.sp-kinv { z-index: 2; clip-path: inset(calc(100% - var(--fh, 0%)) 0 0 0); pointer-events: none; }
/* and the ink words stop at the edge, so no dark fringe shows round the
   copy's letters */
.sp-kin:not(.sp-kinv) { clip-path: inset(0 0 var(--fh, 0%) 0); }
.sp-klooks { position: absolute; right: var(--m); bottom: clamp(22px, 4cqw, 34px); z-index: 3; margin: 0; color: #fff; mix-blend-mode: difference; }
.sp-kinv * { color: inherit !important; }
.sp-kinv :is(.sp-g, .sp-fs, .sp-ns, .y) { opacity: 0.62; }
.sp-kin :is(.sp-bcap, .sp-fcap) { opacity: 1; }
.sp:not(.mo) .sp-brk.lk-fill { height: auto; }
.sp:not(.mo) .sp-kscr { position: relative; height: auto; min-height: var(--vh, 100vh); }

/* ── THE PALETTE'S LOOKS (27 Sept): six, on a row beside its label. What
   each is for is set out in study-panel.js, above PALS. Every look but
   swatch is a moment of its own before the title block, edge to edge ── */
.sp-palh { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px; }
.sp-pals { color: var(--grey); }
.sp-palx { position: relative; margin-top: clamp(90px, 16cqw, 160px); }
.sp-palx > .sp-palh { margin: 0 var(--m) 14px; }
/* inside the title block: edge to edge past its margins, the facts after */
.sp-spec > .sp-palx { margin: 0 calc(var(--rm, 0px) - var(--m)) clamp(44px, 8cqw, 72px) calc(-1 * var(--m)); }
/* its right edge is the pictures' and the solid blocks' (2 Oct 2026, his
   "bring the palette strip in to the margin too"): the spec's own right
   margin is m, so the strip takes back all of it but --rm, the 20px the
   room leaves on a desk and nothing on a phone */
.sp-palx .sp-pic { background-color: transparent; }
.sp-palx .sp-pic img { object-fit: cover; }

/* overlay: the colours as bars on the picture that holds most of them */
.sp-pov { position: relative; height: min(calc(var(--vh, 100vh) * 0.94), 128cqw); overflow: hidden; background: #111; }
.sp-povp { position: absolute; inset: 0; }
.sp-povs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(74%, 520px); display: grid; gap: clamp(6px, 1.2cqw, 10px); }
.sp-povb { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: clamp(52px, 10cqw, 84px); padding: 0 clamp(14px, 3cqw, 26px); }
.sp-povb:nth-child(even) { flex-direction: row-reverse; }
.sp-povb b { font-size: clamp(18px, 3.6cqw, 30px); font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.sp-povb span { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; opacity: 0.8; font-variant-numeric: tabular-nums; }

/* paired: a column to each colour, its hex up the column, over its picture */
.sp-ppr { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); height: min(calc(var(--vh, 100vh) * 0.96), 150cqw); }
.sp-pc { display: grid; grid-template-rows: minmax(0, 1fr) 38%; min-width: 0; }
.sp-pcc { position: relative; min-height: 0; overflow: hidden; }
.sp-pcc span { position: absolute; left: clamp(8px, 1.8cqw, 16px); top: clamp(10px, 2cqw, 18px); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.3; opacity: 0.8; font-variant-numeric: tabular-nums; max-width: 7em; }
.sp-pcc b { position: absolute; left: clamp(6px, 1.6cqw, 14px); bottom: clamp(12px, 2.4cqw, 22px); writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: clamp(24px, 6.4cqw, 60px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sp-pcp { min-height: 0; height: 100%; }

/* blocks: big blocks of colour, each with its picture on it */
/* taller boxes, so there is room in them, and the names a size down (his
   "i think we can make the font a little smaller and let's give more
   heights to the boxes so there's a little more negative in them") */
.sp-pbk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 42cqw, 380px); }
.sp-pbk.n3 .sp-pb:first-child, .sp-pbk.n5 .sp-pb:first-child { grid-row: span 2; }
.sp-pbk.n4 .sp-pb:first-child { grid-column: span 2; }
.sp-pb { position: relative; min-width: 0; padding: clamp(12px, 2.4cqw, 22px); overflow: hidden; }
.sp-pb > b { display: block; max-width: 11em; font-size: clamp(18px, 3.4cqw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
.sp-pbm { position: absolute; left: clamp(12px, 2.4cqw, 22px); bottom: clamp(12px, 2.4cqw, 22px); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.5; opacity: 0.8; font-variant-numeric: tabular-nums; }
.sp-pbp { position: absolute; right: clamp(12px, 2.4cqw, 22px); bottom: clamp(12px, 2.4cqw, 22px); width: 31%; max-height: calc(100% - 2 * clamp(12px, 2.4cqw, 22px)); aspect-ratio: 3 / 4; }
.sp-pbk.n3 .sp-pb:first-child .sp-pbp, .sp-pbk.n5 .sp-pb:first-child .sp-pbp { width: 44%; }

/* cycle: one block that runs through the colours, a picture on each */
.sp-pcy { position: relative; height: min(calc(var(--vh, 100vh) * 0.88), 124cqw); overflow: hidden; cursor: pointer;
  transition: background-color 0.7s cubic-bezier(0.45, 0, 0.2, 1), color 0.7s cubic-bezier(0.45, 0, 0.2, 1); }
.sp-pcyp { position: absolute; left: var(--m); right: var(--m); top: clamp(14px, 2.6cqw, 22px); z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 5px; }
.sp-pcyp i { height: 2px; background: currentColor; opacity: 0.28; transition: opacity 0.4s ease; }
.sp-pcyp i.on { opacity: 1; }
.sp-pcyi { position: absolute; left: 50%; top: 45%; width: min(40%, 300px); aspect-ratio: 4 / 5; transform: translate(-50%, -50%) scale(0.96); opacity: 0;
  transition: opacity 0.55s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.sp-pcyi.on { opacity: 1; transform: translate(-50%, -50%); }
.sp-pcyt { position: absolute; left: var(--m); right: var(--m); bottom: clamp(18px, 3.4cqw, 30px); z-index: 2; display: flex; align-items: baseline; gap: 6px 18px; flex-wrap: wrap; }
.sp-pcyt b { font-size: clamp(34px, 8cqw, 76px); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; font-variant-numeric: tabular-nums; }
.sp-pcyt span { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; opacity: 0.8; font-variant-numeric: tabular-nums; }
.sp-pcyn { flex-basis: 100%; }

/* chart: the colours by lightness, darkest first */
.sp-pch { margin: 0 var(--m); }
.sp-pchg { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: clamp(6px, 1.4cqw, 12px); align-items: end;
  height: clamp(260px, 60cqw, 480px); margin-left: 28px; border-bottom: 1px solid var(--ink);
  background: linear-gradient(var(--hair), var(--hair)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--hair), var(--hair)) 0 50% / 100% 1px no-repeat; }
.sp-pchb { display: block; min-height: 2px; }
.sp-pchy { position: absolute; left: -28px; transform: translateY(50%); font-size: 9.5px; font-weight: 600; color: var(--grey); font-variant-numeric: tabular-nums; }
.sp-pchl { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: clamp(6px, 1.4cqw, 12px); margin: 10px 0 0 28px; font-size: 10.5px; font-weight: 500; line-height: 1.4; color: var(--grey); font-variant-numeric: tabular-nums; }
.sp-pchl b { display: block; font-weight: 700; color: var(--ink); letter-spacing: 0.02em; }
.sp-pchk { margin: 18px 0 0 28px; }

/* ── THE COVER, as the live site opens a study (27 Sept; PressingCover
   and RisingPlate, their numbers kept, in the room's own units: a glass
   is the room's height, --vh). The room opens on a held glass with the
   title at its foot; the section is 2.1 glasses and the 0.96 the
   picture climbs through, and the picture pulls itself up by that 0.96
   so the room is no longer for it. Room for the drivers in
   study-panel.js, coverLay and choreo ── */
.sp-cvw { position: relative; height: calc(var(--vh, 100vh) * 3.06); }
.sp-cvs { position: sticky; top: 0; height: var(--vh, 100vh); overflow: hidden; }
.sp-ct { position: absolute; left: var(--m); right: var(--m); bottom: 28px; z-index: 1; margin: 0 0 0 -0.04em; font-weight: 700; letter-spacing: -0.045em; line-height: 0.84; text-wrap: initial; }
.sp-ct .rln { display: block; overflow: hidden; padding-bottom: 0.22em; margin-bottom: -0.22em; }
.sp-ct .rlnI { display: block; will-change: transform; }
.sp-cst { position: absolute; top: 22%; left: var(--m); right: var(--m); z-index: 2; margin: 0; max-width: 21em;
  font-size: clamp(24px, 3.2cqw, 44px); font-weight: 600; letter-spacing: -0.05em; line-height: 1.18; }
.sp-cst .csW { display: inline-block; will-change: transform; }
@container sp (max-width: 559px) { .sp-cst { font-size: clamp(19px, 5.4cqw, 30px); } }
.sp-riser { position: relative; z-index: 3; isolation: isolate; margin-top: calc(var(--vh, 100vh) * -0.96); }
.sp-riser .sp-cpic { transform-origin: 50% 50%; will-change: transform; background-color: transparent; }
/* a pair's pictures: a tenth taller, moved by the scroll, the neighbours
   against each other (the live PressingPlatesPair) */
.sp.mo .sp-pic.par2 img { bottom: auto; height: 110%; translate: 0 var(--py, 0px); }

/* ── THE BRIEF (27 Sept; PressingBrief and column-drop.ts, the live
   numbers): a section's head and deck held in the left half while its
   first runs of text scroll past in the right. The column starts under
   the head (its height and 34px), so it reads as a staircase until the
   head holds, 44px under the room's running head and a little more on
   a tall glass (live: the masthead and clamp(16px, 4dvh, its height)).
   A column title sits over its own text here, not in a rail: the left
   half is the head's. Two tracks only; narrow, it stacks and holds
   nothing, as live ── */
.sp-brief { margin: clamp(20px, 3.6cqw, 34px) var(--m) 0; }
.sp-brief .sp-h { margin: 0; }
.sp-brief .sp-bhd > .sp-deck { margin: clamp(14px, 2.4cqw, 22px) 0 0; }
.sp-bcol { margin-top: clamp(26px, 5cqw, 44px); }
.sp-bcol > .sp-run { display: block; margin: 0; padding: 0; }
.sp-bcol > .sp-run.sp-hasc { margin: 0; padding: 12px 0 0; }
.sp-bcol > .sp-run + .sp-run { margin-top: clamp(28px, 5cqw, 44px); }
.sp-bcol .sp-col { position: static; margin-top: 0; }
@container sp (min-width: 560px) {
  .sp-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gc); align-items: start; }
  .sp-bhd { position: sticky; top: calc(44px + clamp(16px, var(--vh, 800px) * 0.04, 44px)); }
}
/* feature cards in a held section's column stack, one to a line */
.sp-bcol > .sp-cards { margin: clamp(30px, 5.4cqw, 48px) 0 0; grid-template-columns: minmax(0, 1fr); }

/* COMBO, the default look since his "i like pull but i think it needs
   more air (maybe not AS tall as air but close) and maybe we put it on a
   solid background? and when we use it as a quote maybe we use the
   icons? so it's kinda of a combo of the 3" (27 Sept): pull's rule and
   pulled figures, most of air's height (0.72 of a glass to air's 0.86),
   on the field's solid ground (black for the figures, the study's fill
   for the quote), the quote under the drawn mark. The rules are the
   ground's own ink */
.sp-brk.lk-combo { box-sizing: border-box; min-height: calc(var(--vh, 100vh) * 0.72); display: flex; flex-direction: column;
  padding: clamp(40px, 8cqw, 76px) var(--m) clamp(18px, 3.4cqw, 28px); }
/* no thin rules in the solid blocks but the one over the caption (2 Oct
   2026, his "let's try removing the thin rules EXCEPT for the one at the
   bottom right above the label"). The rule across the top (27 Sept, his
   "thin like the others too"; it was 3px, full ink) and the one between
   two figures, further down, are gone, and the air that sat under the top
   one with them. A stats table's row rules go the same way, kept as
   transparent borders so its rows stay where they were */
.sp-black.lk-combo .sp-nr { border-top-color: transparent; }
.sp-black.lk-combo .sp-numt { border-bottom-color: transparent; }
.sp.mo .sp-black.lk-combo .sp-nr::before { display: none; }
.sp-brk.lk-combo :is(.sp-bcap, .sp-fcap) { margin-top: auto; padding-top: 14px; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
.sp-brk.lk-combo .sp-qmark { color: currentColor; }
.sp-pull.lk-combo .sp-pq { max-width: 13em; margin-bottom: clamp(40px, 8cqw, 72px); }
.sp-brk-f.lk-combo :is(.sp-band, .sp-nums, .sp-numg) { display: block; margin: 0; }
.sp-brk-f.lk-combo .sp-nums { margin-bottom: clamp(40px, 8cqw, 72px); }
.sp-brk-f.lk-combo .sp-band { margin-bottom: clamp(40px, 8cqw, 72px); }
/* a figure and its sentence start on one line, their tops meeting at the
   cap height, each trimmed to its letters (his "let's top align the
   headline with the sub copy"); the figures stand further apart ("and
   then let's give more space between the two"), 27 Sept */
.sp-brk-f.lk-combo .sp-fm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px var(--gc); align-items: start; padding: clamp(32px, 6.4cqw, 60px) 0; }
.sp-brk-f.lk-combo :is(.sp-fn, .sp-fs, .sp-nl) { text-box: trim-both cap alphabetic; }
.sp-brk-f.lk-combo .sp-fm:first-child { padding-top: 0; }
.sp-brk-f.lk-combo .sp-fs { margin: 0; }
@container sp (min-width: 560px) {
  .sp-brk-f.lk-combo .sp-fm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .sp-brk-f.lk-combo .sp-fm > .sp-fn { grid-row: 1 / span 3; min-width: 0; }
  .sp-brk-f.lk-combo .sp-fm > :not(.sp-fn) { grid-column: 2; }
}

/* ── NUMBER LABELS (27 Sept; the rule in crossref2.css): a study's own
   number on its kicker, a section's locator on its rule and in the
   running head, and a picture's figure number come off; the section's
   name and the picture's words stay. ?nums=on puts them back ── */
html:not([data-nums="on"]) :is(.sp-kick b, .sp-bar-s b, .sp-fno, .sp-kk .sp-no) { display: none; }

/* ── ONE TYPE SYSTEM (27 Sept, his "let's take an alignment pass on the
   number of fonts sizes, weight, styles, etc. in this one small section
   i could 7 different styles. can we simplify? what makes interesting
   typography is scale but trends right now arent super bold/heavy"),
   then set to his own values from the tweaks panel the same day. He
   tuned them in a 572px room: the sizes that follow the room are a
   share of it that reads his size there, and the fitted ones (the
   title, the pull quotes) take his size as their top in study-panel.js.
   The roles, few and plain:
   - display: the title (to 118px) and the section heads (36px there),
     demi; the figures, fitted, demi; the pull quotes (to 36px), the next
     study, the closing line and the palette's names, medium;
   - mid: a subtitle, a deck, a closing's second line, 15px there,
     medium, leading 1.3;
   - text: every paragraph, a figure's sentence, a card, a spec value,
     13px, regular, paragraphs on leading 2; a title inside the text 13px
     in demi, a figure named in its sentence medium;
   - small: captions, the kicker, a field's foot, 12px, regular;
   - label: small caps, 8.5px, bold, tracked wide (0.2em).
   Every selector here is a plain one: an :is() list takes the weight
   of its heaviest member, which is how his first settings lost to this
   block. ?type=bold shows the set it replaced ── */
html:not([data-type="bold"]) .sp .sp-title,
html:not([data-type="bold"]) .sp .sp-ct,
html:not([data-type="bold"]) .sp .sp-h,
html:not([data-type="bold"]) .sp .sp-fn { font-weight: 600; }
html:not([data-type="bold"]) .sp .sp-black .sp-fn { font-weight: 600; letter-spacing: -0.05em; }
html:not([data-type="bold"]) .sp .sp-pq,
html:not([data-type="bold"]) .sp .sp-next-t,
html:not([data-type="bold"]) .sp .sp-dur,
html:not([data-type="bold"]) .sp .sp-closing p,
html:not([data-type="bold"]) .sp .sp-pb > b,
html:not([data-type="bold"]) .sp .sp-povb b,
html:not([data-type="bold"]) .sp .sp-pcc b,
html:not([data-type="bold"]) .sp .sp-pcyt b,
html:not([data-type="bold"]) .sp .sp-wl { font-weight: 500; }
html:not([data-type="bold"]) .sp .sp-title,
html:not([data-type="bold"]) .sp .sp-h,
html:not([data-type="bold"]) .sp .sp-pq,
html:not([data-type="bold"]) .sp .sp-next-t { letter-spacing: -0.045em; }
html:not([data-type="bold"]) .sp .sp-h { font-size: clamp(26px, 6.3cqw, 44px); }
html:not([data-type="bold"]) .sp .sp-closing p:first-child { letter-spacing: -0.045em; }
html:not([data-type="bold"]) .sp .sp-stand,
html:not([data-type="bold"]) .sp .sp-deck,
html:not([data-type="bold"]) .sp .sp-closing p + p,
html:not([data-type="bold"]) .sp .sp-closing p.sp-long { max-width: 26em; font-size: clamp(14px, 2.62cqw, 18px); font-weight: 500; letter-spacing: -0.018em; line-height: 1.3; }
html:not([data-type="bold"]) .sp .sp-p,
html:not([data-type="bold"]) .sp .sp-fs,
html:not([data-type="bold"]) .sp .sp-card p,
html:not([data-type="bold"]) .sp .sp-ns,
html:not([data-type="bold"]) .sp .sp-tr dd,
html:not([data-type="bold"]) .sp .sp-tcol li,
html:not([data-type="bold"]) .sp .sp-stl li,
html:not([data-type="bold"]) .sp .sp-nr { font-size: 13px; font-weight: 400; letter-spacing: -0.004em; }
html:not([data-type="bold"]) .sp .sp-p,
html:not([data-type="bold"]) .sp .sp-fs { line-height: 2; }
/* TWO STYLES (10 Oct 2026, his "wondering if we just make the copy below
   all the headlines the same as the copy below the headline at the very
   top of case studies so we only have two type styles throughout?"): what
   sits under a head (a section's deck, the closing's second paragraph, a
   chapter's lead) reads as the opening's body, 13px regular at double
   leading on its 34em measure, so a room has its statement and its body.
   ?deck=old brings back the middle size (14-18px medium) */
html:not([data-type="bold"]):not(.deck-old) .sp .sp-stand,
html:not([data-type="bold"]):not(.deck-old) .sp .sp-deck,
html:not([data-type="bold"]):not(.deck-old) .sp .sp-closing p + p,
html:not([data-type="bold"]):not(.deck-old) .sp .sp-closing p.sp-long,
html:not([data-type="bold"]):not(.deck-old) .sp .sp-chap .sp-chap-lead { max-width: 34em; font-size: 13px; font-weight: 400; letter-spacing: -0.004em; line-height: 2; }
html:not([data-type="bold"]) .sp .sp-col,
html:not([data-type="bold"]) .sp .sp-card h3 { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
html:not([data-type="bold"]) .sp .sp-fs b,
html:not([data-type="bold"]) .sp .sp-stl li b,
html:not([data-type="bold"]) .sp .sp-nr .v,
html:not([data-type="bold"]) .sp .sp-nr .l { font-weight: 500; }
html:not([data-type="bold"]) .sp .sp-nr .v { font-size: 13px; letter-spacing: -0.01em; }
html:not([data-type="bold"]) .sp .sp-cap,
html:not([data-type="bold"]) .sp .sp-meta,
html:not([data-type="bold"]) .sp .sp-kk,
html:not([data-type="bold"]) .sp .sp-bcap,
html:not([data-type="bold"]) .sp .sp-fcap,
html:not([data-type="bold"]) .sp .sp-spec-h,
html:not([data-type="bold"]) .sp .sp-bar2,
html:not([data-type="bold"]) .sp .sp-full { font-size: 12px; font-weight: 400; }
html:not([data-type="bold"]) .sp .sp-caps,
html:not([data-type="bold"]) .sp .sp-kick,
html:not([data-type="bold"]) .sp .sp-bar-s,
html:not([data-type="bold"]) .sp .sp-nl,
html:not([data-type="bold"]) .sp .sp-tr dt,
html:not([data-type="bold"]) .sp .sp-sw span:first-of-type,
html:not([data-type="bold"]) .sp .sp-pbm,
html:not([data-type="bold"]) .sp .sp-povb span,
html:not([data-type="bold"]) .sp .sp-pcc span,
html:not([data-type="bold"]) .sp .sp-pcyt span,
html:not([data-type="bold"]) .sp .sp-pchy,
html:not([data-type="bold"]) .sp .sp-pchl { font-size: 8.5px; font-weight: 700; letter-spacing: 0.2em; }
html:not([data-type="bold"]) .sp .sp-pchl b { font-weight: 700; }
html:not([data-type="bold"]) .sp .sp-bar-in { font-weight: 500; }

/* ── the labels in title case (1 Oct 2026, his "yea do the rooms too - i
   like it more", after the index took them): out of capitals a label
   loses the cap height that carried it at 8.5px, so it steps up to 11px,
   demi, at normal tracking, as the index's. The words are cased in
   study-panel.js (lbl), since a study writes its section labels in
   capitals. Only where crossref2 asks (html[data-labels]); ?labels=caps
   brings the capitals back. The sizzle's row of cuts under a cover goes
   with them ── */
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-caps,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-kick,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-bar-s,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-nl,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-tr dt,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-sw span,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-pbm,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-povb span,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-pcc span,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-pcyt span,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-pchy,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-pchl,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .sp-pr-h,
html:is([data-labels="title"], [data-labels="sentence"]) .sp .szl-row { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; }

/* ── the shoutouts (30 Sept 2026): who posted or wrote about the work.
   A line under the cover, as a picture's credit sits (his "smaller more
   footnotes"), the verbs grey and the names ink; ?press=band sets a band
   of ink there instead, the names in paper, and ?press=ticker runs it ── */
.sp-pr-fn { margin: 12px var(--m) 0; max-width: 46em; font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: -0.002em; color: var(--ink); }
.sp-pr-fn .sp-g { color: var(--grey); }
.sp-press { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.sp-pr-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 30px; padding: 14px var(--m) 15px; }
.sp-pr-g { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 11px; }
.sp-pr-h { font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.sp-pr-n { font-size: clamp(14px, 1.6cqw, 18px); font-weight: 500; letter-spacing: -0.012em; line-height: 1.25; }
.sp-press.tick .sp-pr-track { display: flex; width: max-content; animation: sp-tick 36s linear infinite; }
.sp-press.tick .sp-pr-run { display: flex; align-items: baseline; gap: 30px; padding: 14px 15px 15px; white-space: nowrap; }
.sp-press.tick .sp-pr-g { flex-wrap: nowrap; }
@keyframes sp-tick { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sp-press.tick .sp-pr-track { animation: none; } }

/* ── tabs over a live frame (3 Oct 2026, his "one homepage section with a
   tab ... then we do 3 emails, same thing - a user can tab or toggle
   through"): a row of pills in the room's own type, the active one in
   ink, set right over the frame they switch ── */
.sp-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.sp-tab { height: 34px; padding: 0 15px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.055); color: var(--ink, #111); font: inherit; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.sp-tab:hover { background: rgba(0, 0, 0, 0.1); }
.sp-tab[aria-selected="true"] { background: var(--ink, #111); color: var(--paper, #fff); }
.sp-tab:focus-visible { outline: 2px solid var(--ink, #111); outline-offset: 2px; }
.sp-lives.phone .sp-live.tabbed { flex-basis: 100%; max-width: 420px; }

/* ── a page you can enter (3 Oct 2026, his "make the container it's in a
   lot taller and then when someone clicks into it they can scroll it"):
   the hint shows on hover (always, faintly, on touch), a click hands the
   frame the scroll and rings it in ink, and Done sits in its corner ── */
.sp-live-scroll .sp-live-open { display: flex; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; font: inherit; }
.sp-live-hint { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; background: rgba(17, 17, 17, 0.82); color: #fff; font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sp-live-scroll .sp-live-open:hover .sp-live-hint, .sp-live-scroll .sp-live-open:focus-visible .sp-live-hint { opacity: 1; transform: none; }
@media (hover: none) { .sp-live-scroll .sp-live-open { align-items: flex-end; padding-bottom: 12px; } .sp-live-hint { height: 34px; padding: 0 14px; font-size: 12.5px; opacity: 0.9; transform: none; } }
.sp-live.on .sp-live-open { display: none; }
.sp-live.on .sp-live-stage iframe { pointer-events: auto; }
.sp-live.on .sp-live-stage { box-shadow: 0 0 0 2px var(--ink, #111); }
.sp-live-done { position: absolute; bottom: 10px; right: 10px; z-index: 2; display: none; align-items: center; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(17, 17, 17, 0.86); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.sp-live.on .sp-live-done { display: inline-flex; }
.sp-live-ext { white-space: nowrap; color: var(--ink, #111); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@media (prefers-reduced-motion: reduce) { .sp-live-hint { transition: none; } }

/* ── a room's chapters (4 Oct 2026, chapters.js): a contents under the
   title, set as a studio's project table (his "make the list a little
   more designed"): across the whole measure, the number and the line at
   the subtitle's size and in its two tones (his "make the type size the
   same as the subhead so we arent adding another size"), the part of the
   work at the labels' size, column labels over them, a hairline between
   rows; and in the running head their numbers, the chapter the reader is
   in opened to its line ── */
.sp-chap { position: relative; margin: clamp(30px, 5.4cqw, 52px) var(--m) 0; }
.sp-chap-hd, .sp-chap-r { display: grid; grid-template-columns: 3em minmax(0, 1fr) minmax(7em, 19%); column-gap: clamp(12px, 2cqw, 24px); }
/* small, at the kicker's size and set under the title (4 Oct, his "can
   we try making the list text size small - maybe the size of the below
   text?"; it was the subtitle's): .sp-meta in whichever type set the room
   is in, the bold set's here and the room's present one after */
.sp-chap-hd, .sp-chap-r { font-size: 12px; }
.sp-chap-r { font-weight: 600; letter-spacing: -0.004em; line-height: 1.45; }
html:not([data-type="bold"]) .sp .sp-chap-r { font-weight: 400; }
.sp-chap-hd { align-items: end; padding: 0 0 10px; }
.sp-chap-hd span { font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--grey); }
/* each line just under its rule and the air below it (4 Oct, his "align
   the text closer to the top of the thin rule leaving more empty space
   below before the next one") */
.sp-chap-r { position: relative; align-items: baseline; width: 100%; margin: 0; padding: 7px 0 clamp(24px, 4cqw, 34px);
  border: 0; border-top: 1px solid var(--hair); border-radius: 0; background: none; font-family: inherit;
  text-align: left; color: var(--ink); cursor: pointer; }
.sp-chap-r:last-child { border-bottom: 1px solid var(--hair); }
.sp-chap-r:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }
.sp-chap-n { color: var(--grey); font-variant-numeric: tabular-nums; transition: color 0.2s ease; }
.sp-chap-t { text-wrap: pretty; }
.sp-chap-g { color: var(--grey); }
.sp-chap-a { color: var(--grey); }
.sp-chap-r:hover .sp-chap-n { color: var(--ink); }
/* the index's swipe under the pointer (5 Oct 2026, his "can we add a
   hover treatment on these? maybe the signature swipe?"): the grey fills
   the row from the left and leaves to the right, its corners the
   pictures', the values copied from the index's box (crossref2.css),
   inset from the rules so they stay drawn */
.sp-chap-r { z-index: 0; }
.sp-chap-r::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: -10px; right: -10px; pointer-events: none;
  background: var(--hl, #ECECEC); border-radius: var(--pr, 4px); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 0.36s cubic-bezier(0.45, 0, 0.2, 1); }
.sp-chap-r:is(:hover, :focus-visible)::before { transform: scaleX(1); transform-origin: 0 50%; }
@media (prefers-reduced-motion: reduce) { .sp-chap-r::before { transition: none; } }
/* a narrow room: the part of the work goes under its line */
@container sp (max-width: 559px) {
  .sp-chap-hd, .sp-chap-r { grid-template-columns: 2.6em minmax(0, 1fr); }
  .sp-chap-hd span:nth-child(3) { display: none; }
  .sp-chap-a { grid-column: 2; margin-top: 3px; }
}
/* the running head: the numbers in place of the section's name */
.sp-has-ch .sp-bar-s { display: none; }
.sp-chs { display: inline-flex; align-items: baseline; gap: 1px; margin-left: 1.1em; }
.sp-ch { display: inline-flex; align-items: baseline; min-width: 0; padding: 0 5px; border: 0; background: none; font: inherit; color: var(--grey);
  cursor: pointer; pointer-events: none; transition: color 0.2s ease; }
.sp.sp-past .sp-ch { pointer-events: auto; }
.sp-ch b { font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.sp-ch i { font-style: normal; max-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 0;
  transition: max-width 0.5s var(--ease, ease), opacity 0.3s ease, margin-left 0.5s var(--ease, ease); }
.sp-ch:hover, .sp-ch.on { color: var(--ink); }
.sp-ch.on i { max-width: calc(100cqw - 410px); margin-left: 0.55em; opacity: 1; }
.sp-ch:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
/* a narrow room gives the numbers the study's name's room, and an open
   line stops short of the last numbers, so all five stay in the head */
@container sp (max-width: 559px) { .sp-has-ch .sp-bar-tt { display: none; } .sp-has-ch .sp-chs { margin-left: -5px; } .sp-ch.on i { max-width: calc(100cqw - 250px); } }
@media (prefers-reduced-motion: reduce) { .sp-ch i { transition: none; } }

/* ── the title block's rows as the chapters' (4 Oct 2026, his "in the
   case study template at the bottom let's do the same with the font size
   and extra space below each row like we just did with the chapters"):
   the values and the lists at the kicker's small size, each row just
   under its rule with the air below it, the labels as they were ── */
.sp-tr { padding: 7px 0 clamp(24px, 4cqw, 34px); }
.sp-tcol { padding-top: 7px; }
html:not([data-type="bold"]) .sp .sp-tr dd, html:not([data-type="bold"]) .sp .sp-tcol li { font-size: 12px; line-height: 1.45; }

/* ── an edit's drawers (5 Oct 2026, ?edit=fold and ?edit=index): a row
   with a round + that turns to a minus, Studio.Build's, at the room's own
   sizes. The words are in the page closed or open. The row takes the
   index's grey swipe under the pointer ── */
.sp-morew { margin-top: clamp(2px, 0.6cqw, 8px); margin-bottom: clamp(18px, 3cqw, 30px); }
.sp-more { border-top: 1px solid var(--hair); }
.sp-more:last-child { border-bottom: 1px solid var(--hair); }
.sp-more-s { position: relative; z-index: 0; display: flex; align-items: center; gap: 0.6em; padding: 9px 0 10px; list-style: none; cursor: pointer;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.sp-more-s::-webkit-details-marker { display: none; }
.sp-more-s::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: -10px; right: -10px; pointer-events: none;
  background: var(--hl, #ECECEC); border-radius: var(--pr, 4px); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.36s cubic-bezier(0.45, 0, 0.2, 1); }
.sp-more-s:is(:hover, :focus-visible)::before { transform: scaleX(1); transform-origin: 0 50%; }
.sp-more-s:focus-visible { outline: none; }
.sp-more-i { position: relative; flex: none; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--ink); }
.sp-more-i::before, .sp-more-i::after { content: ""; position: absolute; left: 22%; right: 22%; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--paper, #fff);
  transition: transform 0.3s cubic-bezier(0.45, 0, 0.2, 1); }
.sp-more-i::after { transform: rotate(90deg); }
.sp-more[open] > .sp-more-s .sp-more-i::after { transform: rotate(0deg); }
.sp-more-b { padding: 4px 0 16px calc(1.05em + 0.6em); }
.sp-more[open] > .sp-more-b { animation: sp-more-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes sp-more-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sp-more-b .sp-p { margin-bottom: 0.85em; }
.sp-more-b .sp-p:last-child { margin-bottom: 0; }
.sp-mc { margin: 1.3em 0 0.25em; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; }
.sp-mc:first-child { margin-top: 0.3em; }
.sp-more-b .sp-mls { font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .sp-more-s::before, .sp-more-i::before, .sp-more-i::after { transition: none; } .sp-more[open] > .sp-more-b { animation: none; } }
/* the index: the drawers at the subtitle's size, What I did open on top */
.sp-idx { margin-top: clamp(26px, 5cqw, 48px); margin-bottom: clamp(26px, 5cqw, 48px); }
.sp-idx .sp-more-s { padding: 11px 0 12px; font-size: clamp(14px, 2.62cqw, 18px); font-weight: 500; letter-spacing: -0.018em; }
.sp-did { margin: 0; padding: 0; list-style: none; }
.sp-did li { position: relative; padding-left: 1.1em; font-size: clamp(14px, 2.62cqw, 18px); font-weight: 500; letter-spacing: -0.018em; line-height: 1.4; }
.sp-did li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.6em; height: 1.5px; background: var(--ink); }
/* the switch while he compares the edits */
.sp-edits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.sp-edit { padding: 4px 9px 5px; border-radius: 999px; background: var(--hl, #ECECEC); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 1; text-decoration: none; }
.sp-edit:hover { background: #DCDCDC; }
.sp-edit.on { background: var(--ink); color: var(--paper, #fff); }

/* ── the chapters' rows that open (5 Oct 2026, his "i like the index ... i
   think it can be designed like chapters", and for the longer studies "the
   chapter/index opens, explains with copy then also links down to that
   section"). The chapter table as it was, a thin mark at each row's end,
   What I did over the rows, one row open at a time. The row opens on the
   wipe's curve and its words come in as the room's do, each line under the
   band (his "when it animates open can it fit the way the animations
   across the site are a little more?") ── */
.sp-acc { --xw: 13px; }
.sp-acc:has(.sp-x-word) { --xw: 2.4em; }
.sp-acc .sp-chap-hd, .sp-acc .sp-chap-r, .sp-acc .sp-chap-did, .sp-acc .sp-chap-pi { display: grid; grid-template-columns: 3em minmax(0, 1fr) var(--xw); column-gap: clamp(12px, 2cqw, 24px); }
.sp-acc.sp-app .sp-chap-hd, .sp-acc.sp-app .sp-chap-r, .sp-acc.sp-app .sp-chap-did, .sp-acc.sp-app .sp-chap-pi { grid-template-columns: 3em minmax(0, 1fr) minmax(7em, 19%) var(--xw); }
.sp-acc .sp-chap-hd + .sp-chap-did { border-top: 1px solid var(--hair); }
.sp-chap-did { padding: 7px 0 clamp(24px, 4cqw, 34px); font-size: 12px; line-height: 1.45; }
.sp-chap-did > span:nth-child(2) { grid-column: 2 / -1; }
.sp-chap-did i { font-style: normal; color: var(--grey); }
.sp-acc .sp-chap-i:last-child { border-bottom: 1px solid var(--hair); }
.sp-acc .sp-chap-r { transition: padding-bottom 0.42s cubic-bezier(0.45, 0, 0.2, 1); }
.sp-acc .sp-chap-i.on .sp-chap-r { padding-bottom: 12px; }
/* the mark: grey, ink under the pointer and while open */
.sp-chap-x { position: relative; grid-row: 1; grid-column: -2 / -1; align-self: start; justify-self: end; color: var(--grey); transition: color 0.2s ease, transform 0.36s cubic-bezier(0.45, 0, 0.2, 1); }
.sp-chap-r:is(:hover, :focus-visible) .sp-chap-x, .sp-chap-i.on .sp-chap-x { color: var(--ink); }
.sp-x-plus { width: 9px; height: 9px; margin-top: 4px; }
.sp-x-plus i::before, .sp-x-plus i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; background: currentColor; }
.sp-x-plus i::after { transform: rotate(90deg); }
.sp-chap-i.on .sp-x-plus { transform: rotate(45deg); }
.sp-x-arrow { font-size: 12px; line-height: 1.45; }
.sp-chap-i.on .sp-x-arrow { transform: rotate(180deg); }
.sp-x-word { display: grid; font-size: 11px; font-weight: 600; line-height: 1.6; }
.sp-x-word b { grid-area: 1 / 1; justify-self: end; font-weight: inherit; transition: opacity 0.2s ease; }
.sp-x-word b + b, .sp-chap-i.on .sp-x-word b:first-child { opacity: 0; }
.sp-chap-i.on .sp-x-word b + b { opacity: 1; }
.sp-chap-p { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s cubic-bezier(0.45, 0, 0.2, 1); }
.sp-chap-i.on .sp-chap-p { grid-template-rows: 1fr; }
.sp-chap-pi { min-height: 0; overflow: hidden; }
.sp-acc .sp-chap-pi { font-size: 12px; }
.sp-chap-pb { grid-column: 2 / -2; padding: 0 0 clamp(24px, 4cqw, 34px); }
.sp-chap-pp { position: relative; max-width: 46em; margin: 0 0 0.85em; font-size: 12px; line-height: 1.7; color: var(--ink); text-wrap: pretty; }
.sp-chap-ph { position: relative; margin: 1.4em 0 0.25em; font-size: 12px; font-weight: 600; letter-spacing: -0.004em; line-height: 1.45; }
.sp-chap-pb > .sp-chap-ph:first-child { margin-top: 0; }
.sp-chap-go { display: inline-block; margin-top: 0.5em; font-size: 12px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.sp-chap-go:hover { color: var(--grey); }
@media (prefers-reduced-motion: reduce) { .sp-chap-p, .sp-acc .sp-chap-r, .sp-chap-x { transition: none; } }
@container sp (max-width: 559px) {
  .sp-acc .sp-chap-hd, .sp-acc .sp-chap-r, .sp-acc .sp-chap-did, .sp-acc .sp-chap-pi,
  .sp-acc.sp-app .sp-chap-hd, .sp-acc.sp-app .sp-chap-r, .sp-acc.sp-app .sp-chap-did, .sp-acc.sp-app .sp-chap-pi { grid-template-columns: 2.6em minmax(0, 1fr) var(--xw); }
  .sp-acc.sp-app .sp-chap-hd span:nth-child(3) { display: none; }
}

/* the kicker as What I did: the roles stacked in ink, the lines after them
   in grey; with no abstract beside it the block still stacks */
.sp-meta .sp-kdid { flex-direction: column; gap: 1px; margin-top: 10px; }
.sp-meta .sp-lgrey { color: var(--grey); margin-top: 12px; }
.sp-meta .sp-lgrey .sp-line i { display: none; }
.sp-solo .sp-meta.sp-hasdid { display: block; }
.sp-solo .sp-meta.sp-hasdid .sp-lgrey { flex-direction: row; gap: 2px 14px; }

/* ── the contents pushed (5 Oct 2026, his "maybe we push the big type
   more with this? ... more editorial and less clinical"). Scale, not
   weight: the rows at the heads' size in the pull quotes' weight, the
   numbers, apps and labels left small beside them ── */
.sp .sp-chap.sp-acc.toc-big { --xw: 18px; }
.sp .sp-chap.sp-acc.toc-big .sp-chap-r { grid-template-columns: 36px minmax(0, 1fr) var(--xw); padding: 12px 0 clamp(22px, 3.6cqw, 32px);
  font-size: clamp(26px, 5.6cqw, 44px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; }
.sp .sp-chap.sp-acc.sp-app.toc-big .sp-chap-r { grid-template-columns: 36px minmax(0, 1fr) minmax(84px, 17%) var(--xw); }
.sp .sp-chap.sp-acc.toc-big .sp-chap-hd, .sp .sp-chap.sp-acc.toc-big .sp-chap-pi { grid-template-columns: 36px minmax(0, 1fr) var(--xw); }
.sp .sp-chap.sp-acc.sp-app.toc-big .sp-chap-hd, .sp .sp-chap.sp-acc.sp-app.toc-big .sp-chap-pi { grid-template-columns: 36px minmax(0, 1fr) minmax(84px, 17%) var(--xw); }
.sp .sp-chap.toc-big .sp-chap-n, .sp .sp-chap.toc-big .sp-chap-a { align-self: start; margin-top: 0.35em; font-size: 12px; font-weight: 400; letter-spacing: -0.004em; line-height: 1.45; }
.sp .sp-chap.toc-big .sp-chap-t { text-wrap: balance; }
.sp .sp-chap.toc-big .sp-chap-i.on .sp-chap-r { padding-bottom: 16px; }
.sp .sp-chap.toc-big .sp-x-plus { width: 15px; height: 15px; margin-top: 0.3em; }
.sp .sp-chap.toc-big .sp-x-plus i::before, .sp .sp-chap.toc-big .sp-x-plus i::after { height: 1.5px; margin-top: -0.75px; }
.sp .sp-chap.toc-big .sp-x-arrow { font-size: 0.6em; margin-top: 0.15em; }
.sp .sp-chap.toc-big .sp-chap-r::before { top: 6px; bottom: 10px; }
.sp .sp-chap.toc-big .sp-chap-pp { font-size: 13px; line-height: 1.75; max-width: 42em; }
.sp .sp-chap.toc-big .sp-chap-ph { font-size: 13px; }
.sp .sp-chap.toc-big .sp-chap-go { font-size: 13px; }
@container sp (max-width: 559px) {
  .sp .sp-chap.sp-acc.toc-big .sp-chap-r, .sp .sp-chap.sp-acc.toc-big .sp-chap-hd, .sp .sp-chap.sp-acc.toc-big .sp-chap-pi,
  .sp .sp-chap.sp-acc.sp-app.toc-big .sp-chap-r, .sp .sp-chap.sp-acc.sp-app.toc-big .sp-chap-hd, .sp .sp-chap.sp-acc.sp-app.toc-big .sp-chap-pi { grid-template-columns: 26px minmax(0, 1fr) var(--xw); }
  .sp .sp-chap.toc-big .sp-chap-a { grid-column: 2; grid-row: 2; }
}
/* field: the same on the study's own colour, as its pull quotes sit */
.sp .sp-chap.toc-field { margin: clamp(30px, 5.4cqw, 52px) var(--m) 0; padding: clamp(28px, 5.6cqw, 56px) clamp(16px, 3cqw, 30px) clamp(16px, 3cqw, 30px);
  background: var(--fill); color: var(--fink); border-radius: var(--pr, 4px); }
.sp .sp-chap.toc-field :is(.sp-chap-r, .sp-chap-i, .sp-chap-hd + *) { border-color: color-mix(in srgb, currentColor 24%, transparent); }
.sp .sp-chap.toc-field .sp-chap-r { color: inherit; }
.sp .sp-chap.toc-field :is(.sp-chap-n, .sp-chap-a, .sp-chap-g, .sp-chap-hd span, .sp-chap-x) { color: color-mix(in srgb, currentColor 58%, transparent); }
.sp .sp-chap.toc-field .sp-chap-g { color: color-mix(in srgb, var(--fink) 55%, transparent); }
.sp .sp-chap.toc-field .sp-chap-r:is(:hover, :focus-visible) .sp-chap-x, .sp .sp-chap.toc-field .sp-chap-i.on .sp-chap-x { color: inherit; }
.sp .sp-chap.toc-field .sp-chap-r::before { background: color-mix(in srgb, currentColor 9%, transparent); }
.sp .sp-chap.toc-field :is(.sp-chap-pp, .sp-chap-ph, .sp-chap-go) { color: inherit; }
/* flow: the titles run as one paragraph, a small number after each, as
   the index's counts sit. A title's words open inside the paragraph, right
   after it, the titles after it carrying on below (5 Oct, his "it could open
   within the lines instead of below"); the open one stays in ink, the rest
   go grey. The subtitle leads the paragraph in its own two tones, so the
   title is followed by one block, not a subhead and then a list */
.sp .sp-chap.toc-flow > .sp-chap-hd { display: none; }
.sp .sp-chap.toc-flow .sp-flowp { padding: 14px 0 clamp(22px, 4cqw, 34px); border-top: 1px solid var(--hair);
  font-size: clamp(26px, 5.6cqw, 44px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.12; text-wrap: pretty; }
.sp .sp-chap.toc-flow.toc-lead { margin-top: clamp(18px, 3cqw, 28px); }
.sp .sp-chap.toc-flow.toc-lead .sp-flowp { padding-top: 0; border-top: 0; font-size: clamp(24px, 4.8cqw, 40px); line-height: 1.14; }
.sp .sp-chap.toc-flow .sp-flow-lead { color: var(--ink); }
.sp .sp-chap.toc-flow .sp-flow-lead .sp-g { color: var(--grey); }
.sp .sp-chap.toc-flow .sp-flowp .sp-chap-r { display: inline; width: auto; margin: 0; padding: 0 0.04em; border: 0; border-radius: 3px; background: none;
  font: inherit; letter-spacing: inherit; line-height: inherit; color: var(--ink); text-align: left; cursor: pointer;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 0.25s ease, color 0.25s ease; }
.sp .sp-chap.toc-flow .sp-flowp .sp-chap-r::before { display: none; }
.sp .sp-chap.toc-flow .sp-flowp .sp-chap-r:focus-visible { outline: none; }
.sp .sp-chap.toc-flow .sp-flowp .sp-chap-r:is(:hover, :focus-visible) { background: var(--hl, #ECECEC); }
.sp .sp-chap.toc-flow.toc-lead .sp-flowp .sp-chap-r:not(:has(.sp-chap-g)) { color: var(--grey); }
.sp .sp-chap.toc-flow.toc-lead .sp-flowp .sp-chap-r:not(:has(.sp-chap-g)):is(:hover, :focus-visible, .on) { color: var(--ink); }
.sp .sp-chap.toc-flow .sp-flowp:has(.sp-chap-r.on) .sp-chap-r:not(.on) { color: var(--grey); }
.sp .sp-chap.toc-flow .sp-flowp :is(.sp-chap-t, .sp-chap-g) { display: inline; }
.sp .sp-chap.toc-flow .sp-flowp :is(.sp-chap-a, .sp-chap-x) { display: none; }
.sp .sp-chap.toc-flow .sp-flow-n { position: relative; top: -0.05em; margin-left: 0.12em; font-size: 0.3em; font-weight: 600; letter-spacing: 0; color: var(--grey); vertical-align: super; line-height: 0; }
.sp .sp-chap.toc-flow .sp-flowp > .sp-chap-i, .sp .sp-chap.toc-flow .sp-flowp > .sp-chap-i:last-child { display: none; margin: 0.25em 0 0.6em; border: 0;
  font-size: 13px; font-weight: 400; letter-spacing: -0.004em; line-height: 1.75; }
.sp .sp-chap.toc-flow .sp-flowp > .sp-chap-i.on { display: block; }
.sp .sp-chap.toc-flow .sp-flowp > .sp-chap-i.on > .sp-chap-p { animation: sp-flow-open 0.42s cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes sp-flow-open { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } }
.sp .sp-chap.toc-flow .sp-chap-pi { grid-template-columns: minmax(0, 1fr); }
.sp .sp-chap.toc-flow .sp-chap-pb { grid-column: 1 / -1; max-width: 44em; padding: 0.3em 0 0.2em; }
.sp .sp-chap.toc-flow :is(.sp-chap-pp, .sp-chap-ph, .sp-chap-go) { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .sp .sp-chap.toc-flow .sp-flowp > .sp-chap-i.on > .sp-chap-p { animation: none; } }


/* ── seven more ways in (5 Oct 2026), after his references. Each keeps the
   rows' behaviour (one open at a time, the words in the page, the wipe on
   the first open); only the setting changes. The column labels and the
   marks give way to the type ── */
.sp .sp-chap.toc-c > .sp-chap-hd { display: none; }
.sp .sp-chap.toc-c .sp-chap-pi { grid-template-columns: minmax(0, 1fr); }
.sp .sp-chap.toc-c .sp-chap-pb { grid-column: 1 / -1; max-width: 44em; }
.sp .sp-chap.toc-c :is(.sp-chap-pp, .sp-chap-ph, .sp-chap-go) { font-size: 13px; }
.sp .sp-chap.toc-c .sp-chap-pp { line-height: 1.75; }
.sp .sp-chap.toc-c .sp-chap-r:focus-visible { outline: none; }
.sp .sp-chap.toc-c .sp-chap-i.on .sp-chap-r { padding-bottom: inherit; }
.sp-chap .serif, .sp-chap :is(.mq-m, .cd-t, .ld-t, .ld-n, .ld-g) { font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif; }

/* numerals (Doubleday & Cartwright's list): the number as large as the row,
   a rule of ink, the title small over its line, the section's own picture */
.sp .sp-chap.toc-numerals .sp-chap-r { display: grid; grid-template-columns: minmax(70px, 13%) minmax(0, 1fr); column-gap: clamp(12px, 2cqw, 20px); align-items: stretch;
  padding: clamp(14px, 2.4cqw, 22px) 0; border-top: 0; font-size: 13px; }
.sp .sp-chap.toc-numerals .sp-chap-r.nm-has { grid-template-columns: minmax(70px, 13%) minmax(0, 0.8fr) minmax(0, 1.45fr); }
.sp .sp-chap.toc-numerals .sp-chap-i, .sp .sp-chap.toc-numerals .sp-chap-i:last-child { border: 0; }
.toc-numerals .nm-n { align-self: start; font-size: clamp(76px, 15cqw, 136px); font-weight: 600; letter-spacing: -0.07em; line-height: 0.74; text-align: right; font-variant-numeric: tabular-nums; }
.toc-numerals .nm-b { display: flex; flex-direction: column; gap: 8px; padding-left: clamp(12px, 2cqw, 18px); border-left: 1.5px solid var(--ink); }
.toc-numerals .nm-t { font-size: clamp(14px, 1.9cqw, 16px); font-weight: 600; letter-spacing: -0.015em; line-height: 1.14; text-wrap: balance; }
.toc-numerals .nm-m { font-size: 12px; line-height: 1.4; color: var(--grey); }
.toc-numerals .nm-m i { font-style: normal; }
.toc-numerals .nm-p { position: relative; min-height: 100%; border-radius: var(--pr, 4px); overflow: hidden; }
.toc-numerals .nm-pic { position: absolute; inset: 0; }
.sp .sp-chap.toc-numerals .sp-chap-pi { grid-template-columns: minmax(70px, 13%) minmax(0, 1fr); column-gap: clamp(12px, 2cqw, 20px); }
.sp .sp-chap.toc-numerals .sp-chap-pb { grid-column: 2; padding: 4px 0 clamp(20px, 3.4cqw, 30px) clamp(13px, 2.1cqw, 19px); }
@container sp (max-width: 559px) {
  .sp .sp-chap.toc-numerals .sp-chap-r, .sp .sp-chap.toc-numerals .sp-chap-r.nm-has { grid-template-columns: 58px minmax(0, 1fr); }
  .toc-numerals .nm-n { font-size: 64px; }
  .toc-numerals .nm-p { grid-column: 2; min-height: 0; aspect-ratio: 2.2 / 1; margin-top: 10px; }
  .sp .sp-chap.toc-numerals .sp-chap-pi { grid-template-columns: 58px minmax(0, 1fr); }
}

/* spines (a magazine's contents): a column each, its number and line at the
   head under a rule, its title turned to run up from the foot */
.sp .sp-chap.toc-spines .sp-spines { display: flex; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--hair); }
.sp .sp-chap.toc-spines .sp-spines .sp-chap-r { display: flex; flex: 1 1 0; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; width: auto;
  height: clamp(300px, 60cqw, 480px); padding: 8px clamp(6px, 1.2cqw, 12px) 14px; border: 0; border-left: 1px solid var(--hair); font-size: 12px; }
.sp .sp-chap.toc-spines .sp-spines .sp-chap-r:first-child { border-left: 0; padding-left: 0; }
.sp .sp-chap.toc-spines .sp-spines .sp-chap-r::before { top: 0; bottom: 0; left: 0; right: 0; border-radius: 0; }
.toc-spines .sn-top { display: flex; flex-direction: column; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid var(--hair); font-size: 11px; line-height: 1.35; color: var(--grey); }
.toc-spines .sn-top b { font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.toc-spines .sn-top i { font-style: normal; }
.toc-spines .sn-w { display: flex; flex: 1 1 auto; align-items: flex-end; min-height: 0; overflow: hidden; }
.toc-spines .sn-t { max-height: 100%; writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(16px, 4.4cqw, 40px); font-weight: 600; letter-spacing: -0.045em; line-height: 0.94; transition: color 0.25s ease; }
.sp .sp-chap.toc-spines .sp-spines:has(.sp-chap-r.on) .sp-chap-r:not(.on) .sn-t { color: var(--grey); }
.sp .sp-chap.toc-spines > .sp-chap-i, .sp .sp-chap.toc-spines > .sp-chap-i:last-child { border: 0; }
.sp .sp-chap.toc-spines .sp-chap-pb { padding: 18px 0 clamp(20px, 3.4cqw, 30px); }

/* marquee (Mirror Mirror's exhibitions): capitals at full measure, a small
   serif line under each, a rule between */
.sp .sp-chap.toc-marquee .sp-chap-r { display: block; padding: 10px 0 14px; border-top: 1px solid var(--hair); font-size: 13px; }
.toc-marquee .mq-t { display: block; font-size: clamp(28px, 6.8cqw, 60px); font-weight: 400; letter-spacing: -0.045em; line-height: 0.9; text-transform: uppercase; text-wrap: balance; }
.toc-marquee .mq-m { display: block; margin-top: 9px; font-size: 13px; letter-spacing: 0; line-height: 1.35; color: var(--grey); }
.toc-marquee .mq-m i { font-style: normal; }
.sp .sp-chap.toc-marquee .sp-chap-pb { padding: 0 0 clamp(20px, 3.4cqw, 30px); }

/* ramp (a type foundry's transit poster): one block of titles between
   bars, black going to grey down the block, the study's name turned up the
   right edge. A title's words open inside the block, after its bar */
.sp .sp-chap.toc-ramp { position: relative; padding-right: 26px; }
.toc-ramp .sp-ramp { padding: 2px 0 clamp(20px, 3.6cqw, 30px); font-size: clamp(30px, 7cqw, 62px); font-weight: 600; letter-spacing: -0.055em; line-height: 0.98; }
.sp .sp-chap.toc-ramp .sp-ramp .sp-chap-r { display: inline; width: auto; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; line-height: inherit;
  color: color-mix(in srgb, var(--ink) var(--tone, 100%), #C8C8C8); text-align: left; cursor: pointer; transition: color 0.25s ease; }
.sp .sp-chap.toc-ramp .sp-ramp .sp-chap-r::before { display: none; }
.sp .sp-chap.toc-ramp .sp-ramp .sp-chap-r:is(:hover, :focus-visible, .on) { color: var(--ink); }
.toc-ramp .rp-bar { font-weight: 300; color: #C8C8C8; }
.toc-ramp .rp-meta { position: absolute; top: 4px; right: 0; writing-mode: vertical-rl; font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; color: var(--grey); }
.toc-ramp .rp-meta span { margin-top: 0.9em; color: var(--grey2, #9a9a9a); }
.sp .sp-chap.toc-ramp .sp-ramp > .sp-chap-i, .sp .sp-chap.toc-ramp .sp-ramp > .sp-chap-i:last-child { display: none; margin: 0.3em 0 0.6em; border: 0;
  font-size: 13px; font-weight: 400; letter-spacing: -0.004em; line-height: 1.75; }
.sp .sp-chap.toc-ramp .sp-ramp > .sp-chap-i.on { display: block; }
.sp .sp-chap.toc-ramp .sp-ramp > .sp-chap-i.on > .sp-chap-p { animation: sp-flow-open 0.42s cubic-bezier(0.45, 0, 0.2, 1) both; }

/* cards (a serif specimen's dark cards): the first one wide, a title set in
   serif on each, its number and app small over it; an open card takes the
   whole width and its words are set in the serif too */
.sp .sp-chap.toc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sp .sp-chap.toc-cards > .sp-chap-i, .sp .sp-chap.toc-cards > .sp-chap-i:last-child { border: 0; border-radius: 18px; background: #262624; color: #F2EEE7; overflow: hidden; }
.sp .sp-chap.toc-cards > .sp-chap-i.cd-wide, .sp .sp-chap.toc-cards > .sp-chap-i.on { grid-column: 1 / -1; }
.sp .sp-chap.toc-cards .sp-chap-r { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(26px, 6cqw, 56px); min-height: clamp(150px, 26cqw, 220px);
  padding: clamp(18px, 3.2cqw, 26px) clamp(18px, 3.4cqw, 28px); border: 0; color: inherit; font-size: 12px; }
.sp .sp-chap.toc-cards .cd-wide .sp-chap-r { min-height: clamp(190px, 34cqw, 300px); }
.sp .sp-chap.toc-cards .sp-chap-r::before { top: 0; bottom: 0; left: 0; right: 0; border-radius: 0; background: rgba(255, 255, 255, 0.06); }
.toc-cards .cd-l { font-size: 11.5px; letter-spacing: 0; color: rgba(242, 238, 231, 0.55); }
.toc-cards .cd-l i { font-style: normal; }
.toc-cards .cd-t { font-size: clamp(22px, 3.8cqw, 32px); font-weight: 400; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; }
.toc-cards .cd-wide .cd-t { font-size: clamp(30px, 6.6cqw, 58px); letter-spacing: -0.035em; }
.toc-cards .cd-g { color: rgba(242, 238, 231, 0.5); }
.sp .sp-chap.toc-cards .sp-chap-pb { max-width: none; padding: 0 clamp(18px, 3.4cqw, 28px) clamp(22px, 3.6cqw, 30px); }
.sp .sp-chap.toc-cards :is(.sp-chap-pp, .sp-chap-ph, .sp-chap-go) { color: inherit; }
.sp .sp-chap.toc-cards .sp-chap-pp { max-width: 34em; font-family: ui-serif, "New York", "Iowan Old Style", Georgia, serif; font-size: 16px; letter-spacing: -0.01em; line-height: 1.38; }
@container sp (max-width: 559px) { .sp .sp-chap.toc-cards { grid-template-columns: minmax(0, 1fr); } }

/* leaders (a book's contents): serif titles, a dotted leader to the number */
.sp .sp-chap.toc-leaders .sp-chap-r { display: block; padding: 10px 0 12px; border-top: 0; font-size: 13px; }
.sp .sp-chap.toc-leaders .sp-chap-i, .sp .sp-chap.toc-leaders .sp-chap-i:last-child { border: 0; }
.toc-leaders .ld-r { display: flex; align-items: last baseline; gap: 12px; }
.toc-leaders .ld-t { flex: 0 1 auto; min-width: 0; font-size: clamp(22px, 4.2cqw, 36px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; }
.toc-leaders .ld-l { flex: 1 1 24px; min-width: 24px; height: 4px; background: radial-gradient(circle, var(--grey) 0 1.1px, transparent 1.6px) left bottom / 9px 4px repeat-x; }
.toc-leaders .ld-n { flex: none; font-size: clamp(22px, 4.2cqw, 36px); letter-spacing: -0.01em; color: var(--grey); font-variant-numeric: tabular-nums; }
.toc-leaders .ld-g { display: block; margin-top: 5px; font-size: 15px; font-style: italic; letter-spacing: 0; color: var(--grey); }
.sp .sp-chap.toc-leaders .sp-chap-pb { padding: 2px 0 clamp(18px, 3cqw, 26px); }

/* split: the list in the right half; in the left, held as the list scrolls
   by, a giant number for the row under the pointer, wiping in as it changes */
.sp .sp-chap.toc-split .sl-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: var(--gc, 24px); align-items: start; }
.toc-split .sl-show { position: sticky; top: 60px; }
.toc-split .sl-n { display: block; font-size: clamp(120px, 30cqw, 280px); font-weight: 600; letter-spacing: -0.075em; line-height: 0.76; font-variant-numeric: tabular-nums; }
.toc-split .sl-show.flip .sl-n { animation: sl-in 0.5s cubic-bezier(0.45, 0, 0.2, 1) both; }
@keyframes sl-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.toc-split .sl-m { display: block; margin-top: 16px; font-size: 12px; line-height: 1.45; color: var(--grey); }
.toc-split .sl-m i { font-style: normal; }
.sp .sp-chap.toc-split .sp-chap-r { display: block; padding: 9px 0 18px; border-top: 1px solid var(--hair); font-size: clamp(17px, 2.6cqw, 22px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
.sp .sp-chap.toc-split .sl-list > .sp-chap-i:last-child { border-bottom: 1px solid var(--hair); }
.sp .sp-chap.toc-split .sp-chap-pb { padding: 0 0 clamp(18px, 3cqw, 26px); }
@container sp (max-width: 559px) {
  .sp .sp-chap.toc-split .sl-wrap { grid-template-columns: minmax(0, 1fr); }
  .toc-split .sl-show { position: static; margin-bottom: 14px; }
  .toc-split .sl-n { font-size: 96px; }
}
@media (prefers-reduced-motion: reduce) { .toc-split .sl-show.flip .sl-n, .sp .sp-chap.toc-ramp .sp-ramp > .sp-chap-i.on > .sp-chap-p { animation: none; } }

/* flow's statements told apart (6 Oct): a dot between them (default);
   ?flowsep=bar a thin bar, ?flowsep=lead the number leading each one */
.sp .sp-chap.toc-flow.fs-lead .sp-flowp .sp-chap-r { margin-left: 0.3em; }
.sp .sp-chap.toc-flow.fs-lead .sp-flow-n { margin: 0 0.24em 0 0; }
.sp .sp-chap.toc-flow .fs-mark { margin: 0 0.12em 0 0.2em; font-weight: 300; color: #C8C8C8; }
.sp .sp-chap.toc-flow .fs-mark:empty { display: inline-block; width: 0.2em; height: 0.2em; margin: 0 0.18em 0 0.32em; border-radius: 50%; background: var(--grey); vertical-align: 0.2em; }

/* home (6 Oct, his "should this section be designed like the TOC side of
   the site?"): the rows as the index's feature entries, their values the
   index's own (crossref2.css, .e.ef at 1440): the label at 11px over a
   hairline with the number at its right, the picture, the 21px title, the
   12px grey line, the column rules in the gutters, and the grey box that
   sweeps in under the pointer and stays on the open entry. The open
   entry's words come in under the entries */
.sp .sp-chap.toc-home { --eg: 26px; }
.toc-home .hm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--eg); row-gap: 36px; padding: 12px 0 10px; }
.toc-home .hm-grid.hc2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp .sp-chap.toc-home .hm-grid .sp-chap-r { display: block; position: relative; z-index: 0; width: auto; margin: 0; padding: 0 0 4px; border: 0; background: none;
  color: var(--ink); text-align: left; font-size: 11px; font-weight: 400; letter-spacing: -0.003em; line-height: 1.27; }
.toc-home .hm-grid .sp-chap-r::after { content: ""; position: absolute; top: -12px; bottom: -16px; left: calc(var(--eg) / -2); width: 1px; background: var(--hair); pointer-events: none; }
.toc-home .hm-grid.hc3 .sp-chap-r:nth-child(3n+1)::after, .toc-home .hm-grid.hc2 .sp-chap-r:nth-child(2n+1)::after { display: none; }
.toc-home .hm-kk { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 9px; padding: 0 0 5px; border-bottom: 1px solid var(--hair);
  font-size: 11px; font-weight: 600; line-height: 1.25; color: var(--grey); }
.toc-home .hm-wn { font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.toc-home .hm-th { position: relative; display: block; width: 100%; margin: 2px 0 11px; border-radius: var(--pr, 4px); overflow: hidden; }
.sp .sp-chap.toc-home .hm-pic { position: absolute; inset: 0; }
.toc-home .hm-t { display: block; font-size: clamp(17px, 2.9cqw, 21px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; }
.toc-home .hm-dk { display: block; margin-top: 8px; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--grey); text-wrap: pretty; }
.sp .sp-chap.toc-home .hm-grid .sp-chap-r::before { content: ""; position: absolute; z-index: -1; top: -9px; bottom: -9px; left: calc(var(--eg) / -4); right: calc(var(--eg) / -4);
  background: var(--hl, #ECECEC); border-radius: var(--pr, 4px); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.36s cubic-bezier(0.45, 0, 0.2, 1); pointer-events: none; }
.sp .sp-chap.toc-home .hm-grid .sp-chap-r:is(:hover, :focus-visible, .on)::before { transform: scaleX(1); transform-origin: 0 50%; }
.sp .sp-chap.toc-home > .sp-chap-i, .sp .sp-chap.toc-home > .sp-chap-i:last-child { border: 0; }
.sp .sp-chap.toc-home .sp-chap-pb { padding: 24px 0 clamp(20px, 3.4cqw, 30px); }
@container sp (max-width: 559px) {
  .toc-home .hm-grid.hc3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc-home .hm-grid.hc3 .sp-chap-r:nth-child(3n+1)::after { display: block; }
  .toc-home .hm-grid.hc3 .sp-chap-r:nth-child(2n+1)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sp .sp-chap.toc-home .hm-grid .sp-chap-r::before { transition: none; } }

/* flow with pictures in its lines (6 Oct): each statement opens with a
   small picture the height of the capitals, its corners the pictures'
   own; it fades with its statement when another one is open */
.sp .sp-chap.toc-flow.fs-pic .sp-flowp .sp-chap-r { margin-left: 0.12em; }
.sp .sp-chap.toc-flow .fl-th { position: relative; display: inline-block; width: 1.7em; height: 0.8em; margin: 0 0.22em 0 0.08em; vertical-align: -0.04em;
  border-radius: 0.14em; overflow: hidden; background: rgba(0, 0, 0, 0.06); transition: opacity 0.25s ease; }
.sp .sp-chap.toc-flow .sp-flowp:has(.sp-chap-r.on) .sp-chap-r:not(.on) .fl-th { opacity: 0.4; }
.sp .sp-chap.toc-flow .fl-glue { white-space: nowrap; }

/* flow's open words across the whole width, in columns (6 Oct, his "i
   wonder if the open text should span the entire width?"): one line of the
   body's 13px across the room would run near 200 characters, so the width
   is filled with columns of a readable measure, two or three as the room
   allows; a titled part stays whole in its column, the link runs under
   them all */
.sp .sp-chap.toc-flow .sp-chap-pb { max-width: none; columns: 3 19em; column-gap: clamp(22px, 3.4cqw, 48px); }
.sp .sp-chap.toc-flow .sp-chap-pb > :is(.sp-chap-pp, .sp-chap-grp) { break-inside: avoid; }
.sp .sp-chap.toc-flow .sp-chap-grp { margin-bottom: 1.1em; }
.sp .sp-chap.toc-flow .sp-chap-grp > .sp-chap-ph { margin-top: 0; }
.sp .sp-chap.toc-flow .sp-chap-grp > .sp-chap-pp:last-child { margin-bottom: 0; }
.sp .sp-chap.toc-flow .sp-chap-go { display: block; width: max-content; margin-top: 0.6em; column-span: all; }

/* flow on the room's margins (6 Oct, his "should these align on the left
   and right?"): a title's own spacing was repeated at the start of every
   line it wrapped onto (the clone that rounds its highlight on each line
   clones margins too), so wrapped lines stood 0.16em in from the column
   below. The titles take no spacing of their own now: the highlight
   reaches past the letters as a shadow, which moves nothing, and the gap
   before a statement belongs to its picture, dot or number. The block is
   pulled in by the 0.04em the room's title is, so the big letters' ink
   meets the kicker's edge */
.sp .sp-chap.toc-flow .sp-flowp { margin-left: -0.04em; }
.sp .sp-chap.toc-flow .sp-flowp .sp-chap-r,
.sp .sp-chap.toc-flow.fs-pic .sp-flowp .sp-chap-r,
.sp .sp-chap.toc-flow.fs-lead .sp-flowp .sp-chap-r { margin: 0; padding: 0; }
.sp .sp-chap.toc-flow .sp-flowp .sp-chap-r:is(:hover, :focus-visible) { box-shadow: 0 0 0 0.06em var(--hl, #ECECEC); }
.sp .sp-chap.toc-flow.fs-lead .sp-flow-n { margin: 0 0.24em 0 0.3em; }
/* the air before a statement's picture is kept at the end of the one before
   it, where a line can only end, never begin */
.sp .sp-chap.toc-flow .fl-glue > .fl-th { margin-left: 0; }
.sp .sp-chap.toc-flow.fs-pic .sp-flow-n { margin-right: 0.16em; }

/* flow swipes in as the room's big type does (6 Oct, his "can we make this
   new section swipe/animate in like everything else?"): its lines under
   the band one after another, a picture with the word it is held to. The
   bands are laid by each word's offset from the paragraph, so nothing
   between them may be positioned: the titles and the numbers sit static */
.sp .sp-chap.toc-flow .sp-flowp .sp-chap-r { position: static; z-index: auto; }
.sp .sp-chap.toc-flow .sp-flow-n { position: static; top: auto; }
html[data-motion="wipe"] .sp.mo .sp-flowp.rv-split .fl-th { opacity: 0; transition: none; }
html[data-motion="wipe"] .sp.mo .sp-flowp.rv-split.rv-go .fl-th { opacity: 1; transition: opacity 0s linear var(--d, 0ms); }
/* and the opening block close under it (6 Oct, his "let's tighten the gap
   here"): the paragraph keeps no air of its own below, and the kicker and
   abstract come in at about one of its lines rather than a section's gap */
.sp .sp-chap.toc-flow.toc-lead .sp-flowp { padding-bottom: 0; }
.sp .sp-chap.toc-flow + .sp-open { margin-top: clamp(24px, 4cqw, 40px); }
/* the opening pictures come straight after Flow, at the same close gap */
.sp .sp-chap.toc-flow + .sp-plates { margin-top: clamp(24px, 4cqw, 40px); }

/* an index edit closes in Flow's type: one paragraph, the first line in
   ink and the rest in grey, the way the subtitle leads the opening */
.sp .sp-closing.cl-flow { max-width: none; font-size: clamp(24px, 4.8cqw, 40px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.14; text-wrap: pretty; }
html .sp.sp .sp-closing.cl-flow p { display: inline; max-width: none; margin: 0; font: inherit; letter-spacing: inherit; line-height: inherit; color: var(--ink); }
html .sp.sp .sp-closing.cl-flow p + p { color: var(--grey); }

/* a row's own copy (6 Oct, after his AI-company references): what it
   does at the deck's size, then three specifics side by side under
   hairlines, each one's name a weight up, then the proof. No new sizes:
   the deck's, the body's, the rules' */
.sp .sp-chap .sp-chap-pb.au { columns: auto; max-width: none; }
.sp .sp-chap .sp-chap-lead { max-width: 30em; margin: 0 0 18px; font-size: clamp(14px, 2.62cqw, 18px); font-weight: 500; letter-spacing: -0.018em; line-height: 1.3; color: var(--ink); text-wrap: pretty; }
.sp .sp-chap .sp-chap-li { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15em), 1fr)); gap: 14px clamp(22px, 3.4cqw, 48px); margin: 0 0 18px; padding: 0; list-style: none; }
.sp .sp-chap .sp-chap-li li { position: relative; padding-top: 9px; border-top: 1px solid var(--hair); font-size: 13px; font-weight: 400; letter-spacing: -0.004em; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.sp .sp-chap .sp-chap-li li b { display: block; margin-bottom: 3px; font-weight: 600; letter-spacing: -0.01em; }
.sp .sp-chap .sp-chap-proof { max-width: 46em; margin: 0 0 0.4em; }

/* one statement style in an index edit (6 Oct): the Flow paragraph, the
   section titles and the closing at one size, one weight (medium), one
   leading and one measure; the titles lose their demi and their narrower
   measure. ?statement=big sets all three at the titles' old size */
.sp.sp-one { --st: clamp(24px, 4.8cqw, 40px); }
.sp.sp-one.st-big { --st: clamp(26px, 6.3cqw, 44px); }
html:not([data-type="bold"]) .sp.sp-one .sp-h,
html:not([data-type="bold"]) .sp.sp-one .sp-chap.toc-flow .sp-flowp,
html:not([data-type="bold"]) .sp.sp-one .sp-closing.cl-flow { font-size: var(--st); font-weight: 500; letter-spacing: -0.045em; line-height: 1.1; }
html:not([data-type="bold"]) .sp.sp-one .sp-h { max-width: 18em; text-wrap: pretty; }
/* every room (6 Oct): a closing's first line takes the style too, unless
   it is a long one, which reads at the deck's size */
html:not([data-type="bold"]) .sp.sp-one .sp-closing:not(.cl-flow) p:first-child:not(.sp-long) { max-width: 18em; font-size: var(--st); font-weight: 500; letter-spacing: -0.045em; line-height: 1.1; }

/* a framed picture's place in its frame (FRAME in study-panel.js) */
.sp-pic img { object-position: var(--opx, 50%) 50%; }

/* Flow's statements light as the index's rows do (6 Oct, his "we should
   adjust this like we did the section at the bottom", on a statement lit
   as three grey blocks touching line to line): each line of the statement
   gets its own band, swept in from the left under the pointer and let go
   to the right, the index's curve, with paper between the lines */
html .sp .sp-chap.toc-flow .sp-flowp .sp-chap-r { background: linear-gradient(var(--hl, #ECECEC), var(--hl, #ECECEC)) no-repeat 100% 47% / 0% 54%;
  box-shadow: none; border-radius: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 0.36s cubic-bezier(0.45, 0, 0.2, 1), color 0.25s ease; }
html .sp .sp-chap.toc-flow .sp-flowp .sp-chap-r:is(:hover, :focus-visible) { background: linear-gradient(var(--hl, #ECECEC), var(--hl, #ECECEC)) no-repeat 0 47% / 100% 54%; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { html .sp .sp-chap.toc-flow .sp-flowp .sp-chap-r { transition: none; } }

/* every room's subtitle in the statement style (6 Oct, his "we should
   update the styling on the subheads for all case studies, right?"): the
   line under the title takes the opening paragraph's size, weight and
   leading at the full measure, its grey half as it was. The one set beside
   a cover (.sp-cst) keeps its size. ?statement=demi shows the old */
html:not([data-type="bold"]) .sp.sp-one .sp-head > .sp-stand { max-width: none; font-size: var(--st); font-weight: 500; letter-spacing: -0.045em; line-height: 1.1; text-wrap: pretty; }

/* a link out to a source (Signal's entries), at the text's size, under the
   note it belongs to */
.sp-srcw { margin-top: 2px; }
.sp-srcw .sp-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* a reviewer's note under the text (Signal's drafts) */
.sp-note { font-size: 13px; line-height: 1.5; color: var(--grey); }
.sp-note p { margin: 0 0 6px; }
.sp-note .sp-note-h { margin-bottom: 4px; font-weight: 600; color: var(--ink); }
.sp-src { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.sp-src:hover { color: var(--grey); }