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

/* Massage — page, marginalia, probes, plates, mosaic. Values come from tokens.css. */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-grotesk); }

/* ---------- Page: one main column, two margin columns, one baseline ---------- */
/* Every line sits on a 28px baseline (the baseline token). Display sizes take whole baselines,
   small text takes three-quarter (21px) or half (14px) baselines. */
.ms-page {
  --fs-body: 18px; --lh-body: var(--baseline);
  container-type: inline-size; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-grotesk); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500;
  font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1, "calt" 1; font-variant-numeric: proportional-nums;
  font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  hanging-punctuation: first allow-end last;
}
.ms-page *, .ms-page *::before, .ms-page *::after { box-sizing: border-box; }
.ms-page__inner { display: flow-root; max-width: var(--page-max); margin: 0 auto; padding: var(--space-6) var(--space-3); }

/* body copy: hyphenated, no orphans; justified once the column is wide enough to avoid rivers */
.ms-page__inner > p, .ms-quote p {
  margin-block: 0 calc(var(--lh-body) / 2);
  orphans: 2; widows: 2; text-wrap: pretty;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 2; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 2;
}
@container (min-width: 34rem) {
  .ms-page__inner > p, .ms-quote p { text-align: justify; text-justify: inter-word; }
}
.ms-page__inner > .ms-quote { margin-block: 0 calc(var(--lh-body) / 2); padding: 0 0 0 1.5em; }
.ms-page h2 { font-size: 24px; line-height: var(--lh-body); font-weight: 700; letter-spacing: -.01em; text-wrap: balance; margin-block: calc(var(--lh-body) * 2) calc(var(--lh-body) / 2); }
.ms-page em, .ms-page i { font-style: italic; letter-spacing: .003em; }
.ms-page strong, .ms-page b { font-weight: 700; }
.ms-page a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--signal); text-decoration-thickness: 1.5px; text-underline-offset: .2em; text-decoration-skip-ink: auto; }
.ms-page a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ms-page mark { background: var(--note); color: var(--on-note); padding: 0 .1em; margin: 0 -.1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ms-page .ms-wide { clear: both; }
.ms-hang { margin-left: -.42em; }
@container (max-width: 44rem) { .ms-probe .ms-hang, .ms-masthead .ms-hang { margin-left: 0; } }
@container (min-width: 68rem) {
  /* main column centred; the margin columns are the space either side of it */
  .ms-page__inner { max-width: calc(var(--measure) + 2 * (var(--margin-col) + var(--gutter))); padding-inline: 0; box-sizing: content-box; }
  .ms-page__inner > * { max-width: var(--measure); margin-inline: auto; }
  .ms-page__inner > .ms-wide { max-width: none; }
}

/* ---------- Note: marginalia ---------- */
/* --n-fs, --n-lh: the note's size and leading. --n-k: the font's ascent minus half its content height (.36–.37 for Helvetica Neue and Inter Tight, .375 Plex Mono).
   --n-shift drops the float so its first baseline lands on the baseline of the body line it is anchored in. */
.ms-note-wrap { display: inline; }
.ms-note-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.ms-note-mark { display: none; }
.ms-note {
  --n-fs: 14px; --n-lh: 21px; --n-k: .36;
  --n-shift: calc((var(--lh-body) - var(--n-lh)) / 2 + .36 * var(--fs-body) - var(--n-k) * var(--n-fs));
  display: block; margin: var(--space-2) 0 var(--space-3);
  font-size: var(--n-fs); line-height: var(--n-lh); text-align: left; text-wrap: pretty;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 2;
}
.ms-note--gloss { font-weight: 700; letter-spacing: .004em; color: var(--ink); }
.ms-note--probe { --n-fs: 16px; font-weight: 700; letter-spacing: -.004em; color: var(--signal); }
.ms-note--cite  { --n-fs: 11px; --n-lh: 14px; --n-k: .375; font-family: var(--font-mono); font-weight: 500; letter-spacing: .01em; color: var(--ink-soft); -webkit-hyphens: manual; hyphens: manual; }
.ms-note--stamp { --n-fs: 11px; --n-lh: 14px; --n-shift: calc((var(--lh-body) - 1.22 * var(--fs-body)) / 2 + .25 * var(--fs-body)); font-family: var(--font-mono); font-weight: 500; color: var(--ink-soft); }
.ms-note__src { display: block; margin-top: calc(var(--lh-body) / 4); font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .01em; color: var(--ink-soft); -webkit-hyphens: manual; hyphens: manual; }

/* narrow page: the margin folds into the text behind a red square */
@container (max-width: 67.99rem) {
  .ms-note-mark { display: inline-block; width: .45em; height: .45em; margin: 0 .05em 0 .16em; background: var(--signal); vertical-align: .55em; cursor: pointer; }
  .ms-note-toggle:focus-visible + .ms-note-mark { outline: 2px solid var(--focus); outline-offset: 3px; }
  .ms-note { display: none; }
  .ms-note-toggle:checked ~ .ms-note { display: block; padding-top: var(--space-2); border-top: 1px solid var(--rule); max-width: 30em; }
  .ms-note--stamp.ms-note { max-width: 9rem; }
}
/* wide page: notes float into the margins as a narrow column hugging the outer edge,
   ragged toward the text, as in the book */
@container (min-width: 68rem) {
  .ms-note { float: right; clear: right; width: var(--note-measure); text-align: right;
    margin: var(--n-shift) calc(-1 * (var(--margin-col) + var(--gutter))) calc(var(--lh-body) / 2) 0; }
  .ms-note--left { float: left; clear: left; text-align: left;
    margin: var(--n-shift) 0 calc(var(--lh-body) / 2) calc(-1 * (var(--margin-col) + var(--gutter))); }
}

/* ---------- Halftone placeholder: a plate before it has a photograph ---------- */
.ms-halftone { display: block; background-color: var(--paper-2);
  background-image: linear-gradient(120deg, var(--paper-2) 8%, transparent 62%), radial-gradient(circle, var(--ink) 0 1.7px, transparent 2.1px);
  background-size: 100% 100%, 6px 6px; }

/* ---------- Stamp: a plate recalled at postage-stamp size ---------- */
.ms-stamp { display: block; text-decoration: none; color: inherit; }
.ms-stamp__img { display: block; width: 7rem; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--space-1); }
.ms-note:not(.ms-note--left) .ms-stamp__img { margin-left: auto; }
.ms-stamp:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- Plate: the full-bleed image ---------- */
.ms-plate { margin-block: var(--space-5); margin-inline: 0; }
.ms-plate--column { margin-inline: auto; }
.ms-plate--bleed { margin-inline: calc(50% - 50cqw); }
.ms-plate__img { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 16 / 9); object-fit: cover; }
.ms-plate figcaption { font-weight: 400; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 7px var(--space-3) 0; font-size: 13px; line-height: 21px; letter-spacing: .004em; }
.ms-plate--column figcaption, .ms-plate--wide figcaption { padding-inline: 0; }
.ms-plate__no { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; text-transform: uppercase; color: var(--ink-soft); }
.ms-plate--inverse { background: var(--inverse); color: var(--on-inverse); }
.ms-plate--inverse figcaption { padding: 7px var(--space-3) 7px; }
.ms-plate--inverse .ms-plate__no { color: var(--on-inverse); }
.ms-plate--inverse .ms-halftone { background-color: var(--inverse); background-image: linear-gradient(120deg, var(--inverse) 8%, transparent 62%), radial-gradient(circle, var(--on-inverse) 0 1.7px, transparent 2.1px); }

/* ---------- Probe: the aphorism at poster scale ---------- */
.ms-probe { --probe-ink: var(--ink); margin: var(--space-6) 0; padding: 0; font-weight: 700; font-size: clamp(32px, 5cqw, 56px); line-height: 1; letter-spacing: -.02em; color: var(--probe-ink); }
.ms-probe p { margin: 0; text-wrap: balance; }
.ms-probe__echo { color: transparent; -webkit-text-stroke: 1px var(--probe-ink); margin-top: .02em !important; }
.ms-probe cite { display: block; margin-top: var(--space-3); font: 500 11px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--ink-soft); }
.ms-probe--inverse, .ms-probe--signal { margin-inline: calc(50% - 50cqw); padding: var(--space-6) max(var(--space-4), calc(50cqw - 50% + var(--space-3))); }
.ms-probe--inverse { --probe-ink: var(--on-inverse); background: var(--inverse); }
.ms-probe--signal  { --probe-ink: var(--on-signal); background: var(--signal); }
.ms-probe--inverse cite, .ms-probe--signal cite { color: var(--probe-ink); }

/* ---------- Masthead ---------- */
.ms-masthead { margin-block: 0 var(--space-5); }
.ms-kicker { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); margin: 0 !important; font: 500 11px/14px var(--font-mono); letter-spacing: .08em; font-variant-numeric: tabular-nums; text-transform: uppercase; color: var(--ink-soft); }
.ms-kicker b { font-weight: 500; color: var(--signal); }
.ms-headline { margin: calc(var(--lh-body) / 2) 0 calc(var(--lh-body) / 2); font-size: 36px; line-height: 42px; font-weight: 700; letter-spacing: -.015em; text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; }
.ms-deck { margin: 0 !important; max-width: 30em; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; font-style: italic; letter-spacing: .003em; text-wrap: pretty; }
.ms-byline { margin: calc(var(--lh-body) / 2) 0 0 !important; font: 400 11px/14px var(--font-mono); letter-spacing: .04em; color: var(--ink-soft); }
.ms-masthead--poster .ms-headline { font-size: clamp(36px, 4cqw, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -.018em; max-width: 18ch; }
@container (min-width: 68rem) {
  .ms-masthead--poster .ms-deck, .ms-masthead--poster .ms-byline { margin-left: calc(var(--margin-col) + var(--gutter)) !important; }
}

/* ---------- Mosaic: fragments placed in relation ---------- */
.ms-mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(7.5rem, auto); grid-auto-flow: dense; gap: var(--space-1); margin: var(--space-5) 0; }
.ms-tile { grid-column: span var(--span, 2); grid-row: span var(--rows, 1); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3); background: var(--paper-2); color: var(--ink); font-size: 15px; line-height: 21px; letter-spacing: .002em; text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; }
.ms-tile__body > :last-child { margin-bottom: 0; }
.ms-tile--probe .ms-tile__body { font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; }
.ms-tile--numeral .ms-tile__body { font-size: 72px; line-height: .85; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ms-tile--image { padding: 0; gap: 0; }
.ms-tile__img { display: block; width: 100%; flex: 1; min-height: 7.5rem; object-fit: cover; }
.ms-tile--image .ms-tile__src { padding: var(--space-1) var(--space-2); }
.ms-tile__src { font: 500 11px/14px var(--font-mono); letter-spacing: .04em; color: var(--ink-soft); }
.ms-tile--inverse { background: var(--inverse); color: var(--on-inverse); }
.ms-tile--signal  { background: var(--signal); color: var(--on-signal); }
.ms-tile--note    { background: var(--note); color: var(--on-note); border-radius: var(--radius-1); }
.ms-tile--paper   { background: var(--paper-2); }
.ms-tile--inverse .ms-tile__src, .ms-tile--signal .ms-tile__src, .ms-tile--note .ms-tile__src { color: inherit; }
.ms-tile--inverse .ms-halftone { background-color: var(--inverse); background-image: linear-gradient(120deg, var(--inverse) 8%, transparent 62%), radial-gradient(circle, var(--on-inverse) 0 1.7px, transparent 2.1px); }
@container (max-width: 44rem) {
  .ms-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-tile { grid-column: span 1; grid-row: span 1; }
  .ms-tile[data-span="3"], .ms-tile[data-span="4"], .ms-tile[data-span="5"], .ms-tile[data-span="6"] { grid-column: span 2; }
}

/* ---------- Field: a coded plate (WebGL) ---------- */
.ms-field__canvas { background: var(--paper-2); touch-action: pan-y; }
.ms-plate--inverse .ms-field__canvas { background: var(--inverse); }
.ms-field--interactive .ms-field__canvas { cursor: crosshair; }

/* ---------- Playfield: a plate that is a small game ---------- */
.ms-playfield__stage { position: relative; }
.ms-playfield__canvas { background: var(--paper-2); touch-action: none; outline: none; cursor: pointer; }
.ms-plate--inverse .ms-playfield__canvas { background: var(--inverse); }
.ms-playfield__canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ms-playfield__hud { position: absolute; top: 0; left: 0; margin: 0 !important; padding: 10px var(--space-3); font: 500 11px/14px var(--font-mono); letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ink-soft); pointer-events: none; text-align: left !important; }
.ms-plate--inverse .ms-playfield__hud { color: var(--on-inverse); }
.ms-playfield__veil { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: calc(var(--baseline) / 2); padding: var(--space-4); background: color-mix(in srgb, var(--paper) 84%, transparent); }
.ms-plate--inverse .ms-playfield__veil { background: color-mix(in srgb, var(--inverse) 84%, transparent); color: var(--on-inverse); }
.ms-playfield__msg { margin: 0 !important; max-width: 26em; font-size: 18px; line-height: var(--baseline); font-weight: 700; text-align: left !important; text-wrap: balance; }
.ms-playfield__howto { margin: 0 !important; max-width: 34em; font-size: 14px; line-height: 21px; text-align: left !important; }
.ms-playfield__btn { font: 500 14px/1 var(--font-grotesk); letter-spacing: .01em; padding: 12px 20px; border: 0; border-radius: var(--radius-0); background: var(--signal); color: var(--on-signal); cursor: pointer; }
.ms-playfield__btn:hover { filter: brightness(1.08); }
.ms-playfield__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }