/* MARSA type canon — 2026-08-04
 *
 * Every image the brand puts into the world is set in three voices, never more,
 * and all three come from ONE superfamily:
 *
 *   DISPLAY   IBM Plex Serif 600      the claim.
 *   VOICE     IBM Plex Sans 400/600   the explanation.
 *   STRUCTURE IBM Plex Mono 400/500   eyebrows, sources, counters, the mark.
 *
 * Why Plex. IBM commissioned the family under an explicit brief: the relationship
 * between mankind and machine. That is this company's thesis, so the type is not
 * decoration on the argument, it is the argument. It reads rigorous without
 * reading cold — which is what an audience of founders being spoken to upward,
 * over 175 peer-reviewed sources, actually needs. Serif, sans and mono are drawn
 * by the same hand, so a headline, its explanation and its source line belong to
 * each other on every card.
 *
 * What three rounds of testing established, in order:
 *   1. A hairline display serif (Instrument Serif, Fraunces) optically thins on
 *      black and dissolves to grey at 150px. Ruled out on rendered tiles.
 *   2. Young Serif survives the tile but reads warm and editorial — wrong register
 *      for this audience, and it cannot carry "scientific".
 *   3. SCALE, not family, is the lever that makes a card travel. The old sizes let
 *      the headline occupy a third of the card and it was unreadable in a feed.
 *      The sizes below are tuned so the claim fills the card. Never shrink them to
 *      fit more words — cut the words.
 *
 * The rules that make it recognisable at thumbnail size:
 *   · emphasis is BRIGHTNESS, not italic and not colour: the headline sits at 84%
 *     ink and the emphasised words go to full. A slope disappears in a thumbnail;
 *     a brightness step does not.
 *   · nothing is green. That rule predates this one and outlives it.
 *
 * Loaded by the carousel decks. The generators (og-gen.js, og-insights.js,
 * insight-diagram.js) inline the same stack because they render over file://.
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,600;0,700;1,400;1,600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --type-display: 'IBM Plex Serif', 'Iowan Old Style', Georgia, serif;
  --type-voice: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --type-structure: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---- voice ------------------------------------------------------------- */
body,
.lead, .sub {
  font-family: var(--type-voice);
}
.lead, .sub { letter-spacing: -.006em; word-spacing: .03em; }

/* 2026-08-07 — the claim owns the card, but the sub was sinking at feed size.
   Ratio moved from ~4.6:1 to ~3.8:1: headline untouched (see the note above —
   cut words, never the size), sub lifted so the second voice survives 150px. */
.sub { font-size: 3.9cqw; }
.slide.cover .sub { font-size: 3.7cqw; }

/* ---- display ----------------------------------------------------------- */
/* Both selectors are named so this block outranks `.slide.cover .head` above it. */
.head,
.slide.cover .head {
  font-family: var(--type-display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -.028em;
  word-spacing: normal;
}
/* Feed scale. A card is judged as a ~150px tile, and at the old sizes the
   headline filled a third of it and read as grey texture. The claim now fills the
   card. If a headline overflows, cut words — do not reduce these. */
.head { line-height: 1.0; font-size: 11.4cqw; }
.slide.cover .head { line-height: .96; font-size: 14.2cqw; }
/* The diagram slide is the one exception: it has a chart to seat, so the headline
   steps down rather than crowding it off the card. */
.slide.dia .head { font-size: 7.2cqw; line-height: 1.04; }

/* Full white. The 84% base was the quiet half of a two-part system: normal type
   at 84%, *emphasis* at 100%. In 372 written cards the emphasis half was never
   used once, so the base was not a hierarchy — it was a dimmer headline. The
   hierarchy it was meant to carry already exists in weight and in the 56% sub. */
.head { color: #FFFFFF; }
body.lt .head { color: #0A0A0A; }
body.lt .slide.inv .head { color: #FFFFFF; }

/* emphasis = full ink, in every theme. never italic, never green. */
.head .g,
.slide.cover .head .g {
  font-style: normal;
  font-weight: 600;
  color: #FFFFFF;
}
body.lt .head .g { color: #0A0A0A; }
body.lt .slide.inv .head .g { color: #FFFFFF; }

/* emphasis in body copy stays a weight shift — the display rule doesn't apply */
.lead .g, .sub .g,
body.lt .lead .g, body.lt .sub .g {
  font-weight: 600;
  font-style: normal;
}

/* ---- composition ------------------------------------------------------- */
/* Optical centre, weighted slightly high — the padding-bottom biases the block
   above the true middle so it reads composed rather than parked.
   2026-08-09: the single auto margin (claim parked at the bottom) is retired. It
   only read as composition when the copy filled the card; on a short headline it
   left a third of the card empty above and a hair below, and every crop the post
   meets — feed tile, story, link preview — took the empty half. */
/* Every deck builds its slide the same way: .dots, .row, then a BARE <div> holding
   the copy, then .row. The unclassed div is the copy block — target it by the
   absence of a class rather than by position, which .dots and .glow would shift. */
.slide { justify-content: flex-start; }
.slide > div:not([class]) { margin-top: auto; margin-bottom: auto; padding-bottom: 8%; }

/* ---- structure --------------------------------------------------------- */
.kick, .brand, .src, .num, .mark, .swipe, .sig, .hint {
  font-family: var(--type-structure);
}

/* ---- scale ladder — 2026-08-09 ----------------------------------------- */
/* One ladder, stated once. Before this block the sizes lived in two files:
   carousel-en.html declared a full set inline, this file overrode most (not all)
   of it, and the working values could only be known by reading both. Worse, the
   micro sizes had drifted into seven near-identical steps (1.95 / 2.0 / 2.05 /
   2.1 / 2.4cqw) — half-pixel differences nobody chose. A step in this ladder is
   either a visible decision or it does not exist.

     DISPLAY   cover 14.2 · card 11.4 · inverse-close 11.4 · diagram 7.2 · list 6.4
               (the headline fitter in carousel-en.html snaps to the display
                ladder's lower rungs — see FIT_LADDER there)
     VOICE     standard 3.9 · dense 3.15 (list items, notes — where six lines
               must hold one card) · lead 3.5
     STRUCTURE 2.0 everywhere · signature 2.4 (the one deliberate exception)

   These override the inline declarations in carousel-en.html by load order.
   Change sizes HERE; the inline set is the fallback skeleton, not the spec. */
.kick, .num, .mark, .swipe, .brand, .foot { font-size: 2.0cqw; }
.src, .dia-cap { font-size: 2.0cqw; }
.sig { font-size: 2.4cqw; }

.lead { font-size: 3.5cqw; }
.li, .note { font-size: 3.15cqw; }

.slide.inv .head { font-size: 11.4cqw; }
.slide.list .head { font-size: 6.4cqw; }
.slide.list .sub { font-size: 3.15cqw; }
/* inline declarations in carousel-en.html that outrank the flat selectors above —
   restated at equal specificity so this file stays the last word */
.slide.cover .sub { font-size: 3.7cqw; }
.slide.cover .kick { font-size: 2.0cqw; letter-spacing: .3em; }
.slide.dia .sub { font-size: 3.15cqw; }
.slide.inv .sub { font-size: 3.9cqw; }