/* themosaicledger.com :: generated by site-build.cjs. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/playfair-display-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2");
}
:root {
  --ink: #1b1c17;
  --paper: #fbfaf0;
  --paper-2: #f5f4ea;
  --rule: #d4d1c7;
  --muted: #5f5e58;
  --accent: #5e51ae;
  --accent-lift: #7D6FF7;
  --band: #30312b;
  --on-band: #f2f1e7;
  --on-band-dim: #b4b2a7;
  --on-band-faint: #75766d;
  --wash: #f1efe9;
  --serif: "Playfair Display", Palatino, "Palatino Linotype", Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}
main { max-width: 80rem; margin: 0 auto; padding: 2.6rem 2.5rem 5rem; }
/* the container is wide so the data surfaces can breathe; prose inside it is
   held to a reading measure rather than run to the full width */
.framing, .offer-lead, .offer-disclosure, .stat, .record .legs { max-width: 46rem; }
.doc { max-width: 54rem; }
.lede { font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; color: var(--muted); max-width: 50rem; }
.arg { max-width: 54rem; }
.m, code, pre, th, .callmeta { font-family: var(--mono); font-size: 0.92em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* chrome: solid bands top and bottom, content aligned to the page measure */
header.site, footer.site { background: var(--band); color: var(--on-band); }
header.site .wrap, footer.site .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  max-width: 80rem; margin: 0 auto; padding: 1rem 2.5rem;
}
header.site .brand { display: flex; align-items: center; gap: 0.7rem; color: var(--on-band); margin-right: auto; }
header.site .brand:hover { text-decoration: none; color: var(--accent-lift); }
svg.mark { height: 1.5rem; width: auto; display: block; fill: var(--accent-lift); }
svg.mark rect { rx: 6px; }
.wordmark { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.16em; }
header.site nav { display: flex; gap: 1.4rem; }
header.site nav a, footer.site a {
  color: var(--on-band); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
header.site nav a:hover, footer.site a:hover { color: var(--accent-lift); text-decoration: none; }
footer.site { margin-top: 5rem; }
footer.site .wrap { align-items: baseline; gap: 0.7rem; font-size: 0.78rem; }
footer.site .sep { color: var(--on-band-faint); }
footer.site .m { color: var(--on-band-dim); }
footer.site .disclosure { color: var(--on-band-dim); flex-basis: 100%; font-size: 0.75rem; }

/* type: serif for thought, grotesk for reading, mono for fact */
h1 { font-family: var(--serif); font-weight: 700; font-size: 2.75rem; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.8rem; }
/* the call subject carries class="m", but a page heading is a heading:
   restate the face, since .m alone outranks the bare h1 selector */
h1.m { font-family: var(--serif); font-size: 2.1rem; letter-spacing: -0.015em; }
/* the guide asks for real air before a section head; 48px was not it */
h2 {
  font-family: var(--serif); font-weight: 700; font-size: 1.6rem; line-height: 1.3;
  text-transform: none; letter-spacing: 0; margin: 5rem 0 1.1rem;
  border-left: 4px solid var(--accent); padding-left: 0.9rem;
}
.masthead {
  display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: baseline;
  justify-content: space-between; margin: 0 0 1.5rem; padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
}
.masthead .dateline { letter-spacing: 0.1em; color: var(--muted); }
h3 { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; margin: 2.2rem 0 0.4rem; }
p { margin: 0.6rem 0; }
/* The primer is the one page that is only reading. Its measure has to stay
   near 70 characters, so the fix for a wide container is to centre the
   column rather than widen it, and to set the long-form size the guide asks
   for. The accent rule moves above each section head: a left border on a
   centred column would drag the eye off the text block. */
.prose { max-width: 42rem; margin: 0 auto; font-size: 1.125rem; line-height: 1.7; }
.prose p { max-width: none; margin: 0 0 1.1rem; }
.prose h1 { font-size: 2.6rem; margin: 0 0 2.2rem; }
.prose h2 { border-left: none; padding-left: 0; font-size: 1.5rem; margin: 3.8rem 0 1.1rem; }
.prose h2::before { content: ""; display: block; width: 2.2rem; border-top: 2px solid var(--accent); margin-bottom: 0.9rem; }

/* scorecard */
/* The masthead statement, set at display scale and broken on its two
   structural ideas so the reader stops on each. It has to hold the top of the
   page against the record block, and stay under it: the tallies remain the
   largest thing here. */
/* kicker above, statement below: what this is, then what it promises */
.kicker {
  font-family: var(--sans); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 0.9rem;
}
h1.positioning {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.14; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 1.4rem; max-width: none;
}
/* coverage as data tags, separated by a tile from the mark */
.fields { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0 0 2.2rem; }
.fields-label {
  font-family: var(--sans); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-right: 0.2rem;
}
.field {
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: var(--sans); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.02em; text-transform: capitalize; color: var(--ink);
}
.field + .field::before { content: ""; flex: none; width: 5px; height: 5px; background: var(--accent-lift); }
/* the record as a module: bordered, lifted off the cream ground, so the
   page's most important object reads as an object and not as a paragraph */
.record { border: 1px solid var(--ink); border-top-width: 4px; background: #ffffff; padding: 2.2rem 2.4rem 2rem; margin: 0 0 2.4rem; }
.record p { margin: 0; }
.rlabel { font-family: var(--sans); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.1rem; }
/* the record is the page's headline: nothing else may be set larger */
/* Both rows read the same way, numeral then label on one baseline. Mixing a
   baseline row against a stacked column made the block look like a layout
   fault rather than a headline. */
.figs-lead .fig .num { font-size: 4.4rem; }
.figs-lead .fig .lbl { font-size: 0.85rem; }
.figs { display: flex; flex-wrap: wrap; gap: 1rem 2.6rem; margin: 0; }
.fig { display: flex; flex-direction: row; align-items: baseline; gap: 0.6rem; }
.fig .num {
  font-family: var(--serif); font-weight: 700; font-size: 3rem; line-height: 0.92;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.fig .lbl { font-family: var(--sans); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
/* total on the left, breakdown across the divider on the right, leg-level
   beneath the breakdown */
.record-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.6rem 3rem; align-items: start; }
.record-notes { border-left: 1px solid var(--rule); padding-left: 3rem; align-self: stretch; }
@media (max-width: 820px) {
  .record-grid { grid-template-columns: minmax(0, 1fr); }
  .record-notes { border-left: none; padding-left: 0; }
}
.record .legs { margin-top: 1.5rem; color: var(--muted); font-size: 0.9rem; }
.record .legs .m { font-weight: 700; color: var(--ink); }
.caveat, .stat { color: var(--muted); font-size: 0.85rem; }
.framing { max-width: 44rem; margin: 0 0 0.5rem; color: var(--muted); }
.framing a { font-weight: 700; }
/* the full section rhythm after a short muted line reads as a layout gap */
.framing + h2 { margin-top: 3rem; }
/* under the windowed resolved table: where the rest of the record lives */
.archive-link { color: var(--muted); font-size: 0.9rem; max-width: 46rem; margin-top: 0.9rem; }
.archive-link a { font-weight: 700; }
/* quarter page prev/next: plain links, no pager chrome */
.qnav { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 2.2rem; }
.qnav a { font-weight: 700; }

/* the offer, below the tables. Quieter than the record by construction:
   nothing in here is set larger than the tallies. Three tiers, column 2
   (the paid tier) carries slightly heavier visual weight as the primary
   offer -- no badges, no ribbons, just border + ground. */
.offer { background: var(--paper-2); border: 1px solid var(--rule); border-top: 4px solid var(--ink); margin-top: 6rem; padding: 2.6rem 2.4rem 2.4rem; }
.offer h2 { margin-top: 0; }
.offer-lead { font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; color: var(--muted); margin: 0 0 2rem; }
.offer-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0 0 2rem; align-items: start; }
@media (max-width: 820px) { .offer-tiers { grid-template-columns: minmax(0, 1fr); } }
.tier { background: #ffffff; border: 1px solid var(--rule); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; }
.tier h3 { margin: 0 0 0.5rem; font-family: var(--sans); font-size: 1rem; }
.tier-label { font-weight: 700; margin: 0 0 1.1rem; }
.tier-items { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.tier-items li { padding: 0.4rem 0; border-bottom: 1px solid var(--rule); font-size: 0.88rem; }
.tier-items li:last-child { border-bottom: none; }
.tier-close { font-style: italic; color: var(--muted); margin: 0 0 1.1rem; }
.tier-cadence { color: var(--muted); font-size: 0.8rem; margin: 0 0 1.1rem; }
/* the pre-paywall honesty line, directly under the price */
.tier-note { color: var(--muted); font-size: 0.8rem; margin: -0.6rem 0 1.1rem; }
/* the offer's closing pointer at the full case on /method/ */
.offer-method { max-width: 46rem; margin: 0 0 1.2rem; }
.offer-method a { font-weight: 700; }
.tier-cta, .tier-link { margin: 0; margin-top: auto; }
.tier-link a { font-weight: 700; }
/* the primary offer: heavier border + ground, no badge or ribbon */
.tier-assembled { border: 2px solid var(--ink); background: var(--paper); padding: 1.5rem 1.4rem; }
a.cta {
  display: inline-block; background: var(--accent); color: var(--paper);
  font-family: var(--sans); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.9rem 1.7rem;
}
a.cta:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.offer-disclosure { color: var(--muted); font-size: 0.8rem; margin: 0; }

/* data surfaces */
.tw { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th {
  font-family: var(--sans); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--ink);
}
tbody tr:hover { background: var(--paper-2); }
/* Type is metadata, not a badge. It used to be set caps, letterspaced and
   bold, which put three competing emphases in every row; the order that
   matters is ticker, then claim, then type. */
td.kind { font-family: var(--sans); font-size: 0.8rem; font-weight: 400; color: var(--muted); white-space: nowrap; }
tbody td:first-child { white-space: nowrap; font-weight: 700; }

/* The scorecard is an index, not a reader. Claims run to five lines of dense
   prose, which no institutional document puts in a table, so the cell is
   clamped to one line and the permalink carries the registered text. The
   clamp is presentational on purpose: the full first sentence stays in the
   document, so the verbatim record is unaltered and a reader without the
   stylesheet loses nothing. */
.calls table { table-layout: fixed; min-width: 46rem; }
.calls td.claim a { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.calls th:nth-child(1), .calls td:nth-child(1) { width: 7rem; }
.calls th:nth-child(2), .calls td:nth-child(2) { width: 9rem; }
.calls th:nth-child(4), .calls td:nth-child(4) { width: 6rem; }
.calls th:nth-child(5), .calls td:nth-child(5) { width: 7rem; }
/* structural and thematic calls have no ticker; an empty first cell reads as
   missing data, so the standard not-applicable mark stands in */
.calls tbody td:first-child:empty::after { content: "-"; color: var(--muted); font-weight: 400; }
/* Tier is live conviction and the reader's most useful scan dimension, so it
   carries weight. Verdicts stay flat: an outcome is not a signal strength. */
td.tier-high { color: var(--ink); font-weight: 700; }
td.tier-medium { color: var(--muted); font-weight: 400; }
td.tier-low { color: var(--rule); font-weight: 400; }
/* The claim is the row's link, and claims run to six lines. Underlining them
   turned both tables into a wall of ruled text, which was the loudest thing
   on the page. The row tint plus the hover colour carry the affordance now;
   nothing is underlined until you are pointing at it. */
tbody td a { color: var(--ink); text-decoration: none; }
tbody tr:hover td a { color: var(--accent); }
tbody td a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.18em; }
/* Dates were breaking mid-token into "2026-" / "08-12". Target the mono
   cells, which are the short machine-shaped ones: an earlier attempt keyed
   on column position and pinned the evidence table's catalyst description to
   a single line, which is what was forcing that table to scroll. */
tbody td.m, tbody td .m { white-space: nowrap; }
code { background: var(--paper-2); border: 1px solid var(--rule); padding: 0.05rem 0.3rem; }

/* call permalink */
.callmeta { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.6rem; }
blockquote.claim {
  font-family: var(--serif); font-size: 1.25rem; line-height: 1.45;
  margin: 0.6rem 0 1.3rem; padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 4px solid var(--accent);
}
ul.legs, ul.receipt { list-style: none; padding-left: 0; margin: 0.8rem 0; }
ul.legs li, ul.receipt li { border: 1px solid var(--rule); background: var(--paper-2); padding: 0.7rem 0.9rem; margin: 0 0 0.6rem; }
ul.history, ul.log { list-style: none; padding-left: 0; margin: 0.8rem 0; }
ul.history li, ul.log li { border-left: 2px solid var(--rule); padding: 0.1rem 0 0.1rem 0.9rem; margin: 0 0 0.55rem; }
.measure { display: block; color: var(--muted); font-size: 0.85rem; margin: 0.3rem 0 0; }
.ctx { color: var(--muted); font-size: 0.9em; }
.autopsy-wrap > summary {
  cursor: pointer; font-family: var(--sans); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent);
  padding: 0.5rem 0; list-style-position: outside;
}
.autopsy-wrap > summary:hover { text-decoration: underline; }
.autopsy-wrap[open] > summary { margin-bottom: 0.4rem; }
pre.autopsy {
  white-space: pre-wrap; background: var(--wash); padding: 1rem;
  border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  overflow-x: auto; font-size: 0.88rem;
}
.note { color: var(--muted); font-style: italic; margin-bottom: 0.6rem; }
.frozen { color: var(--muted); font-size: 0.85em; }

/* evidence */
svg.timeline { width: 100%; height: auto; display: block; margin: 1.5rem 0; }
.caution { color: var(--muted); font-size: 0.85rem; }
.arg { border-top: 1px solid var(--rule); padding-top: 0.8rem; margin: 1.2rem 0 1.6rem; }
.arg p { margin: 0.2rem 0; }
.arg .counts { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }
.arg .contra { color: var(--muted); margin-top: 0.4rem; }
.arg .contra .lbl { color: var(--ink); font-weight: 700; }
ul.defs { padding-left: 1.1rem; max-width: 54rem; }
ul.defs li { margin: 0.45rem 0; }
ul.defs .term { font-weight: 700; }
.scale { color: var(--muted); font-size: 0.85rem; margin-top: 2.5rem; border-top: 1px solid var(--rule); padding-top: 1rem; }

@media (max-width: 700px) {
  main { padding: 1.75rem 1.1rem 3rem; }
  h1 { font-size: 2rem; }
  h1.m { font-size: 1.55rem; }
  h2 { font-size: 1.25rem; margin-top: 2.2rem; }
  blockquote.claim { font-size: 1.1rem; }
  /* the record must still clear the fold on a phone, so the masthead gives
     way first and the tallies shrink only as far as they have to */
  /* size is the clamp's job now; this rule predates the display treatment
     and would have flattened the masthead back to body text on phones */
  h1.positioning { margin-bottom: 1.1rem; }
  .kicker { font-size: 0.72rem; letter-spacing: 0.13em; margin-bottom: 0.7rem; }
  .fields { margin-bottom: 1.6rem; }
  .record { padding: 1.5rem 0 1.3rem; }
  .figs-lead .fig .num { font-size: 3.2rem; }
  .fig .num { font-size: 2.3rem; }
  .figs { gap: 1rem 2.2rem; margin-top: 1.1rem; }
  .record .legs { margin-top: 1.2rem; }
  header.site .wrap, footer.site .wrap { padding: 0.8rem 1.1rem; }
  header.site nav { gap: 1rem; }
}
@media (max-width: 480px) {
  body { font-size: 15px; }
  .tw > svg.timeline { width: 900px; max-width: none; }
}
@media print {
  header.site, footer.site { background: none; color: var(--ink); }
  svg.mark { fill: var(--ink); }
  main { max-width: none; padding: 0; }
}