/* Et Al.
   The printed journal page: paper white, ink black, the typeface scientific publishers set their journals in,
   generous margins. Page furniture is the interface: masthead and running head, hanging section numbers, marginal
   notes, footnotes, numbered figures, tables and listings.
   One accent per family. Sic takes proofreader's red and the bracketed [sic]. QED takes a quieter ink blue and the
   end-of-proof square.

   Layout, on a wide sheet (all lengths in rem of a 16px root):
     | hang 4 | text 39 | gutter 3.25 | margin 17.5 |      = 63.75
   Section numbers hang in the first column, notes sit in the last, figures may run across text + gutter + margin. */

@font-face { font-family: "STIX Two Text"; src: url("../fonts/STIXTwoText-Roman.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url("../fonts/STIXTwoText-Italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "STIX Two Symbols"; src: url("../fonts/STIXTwoMath-Symbols.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+2016, U+203B, U+2190-2193, U+21A9, U+21B5, U+220E, U+2234, U+2236, U+25A0-25A1, U+25AA, U+261E, U+2713, U+2717; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500 600; font-style: normal; font-display: swap; }

:root {
  --paper: #fcfbf7; --sheet: #fffefb; --tint: #f4f1e8; --tint-2: #e9e5d8;
  --ink: #15140f; --ink-2: #48453c; --ink-3: #7c786c; --hair: #cdc8b9;
  --sic: #bd2a1f; --sic-wash: rgba(189, 42, 31, 0.11); --sic-faint: rgba(189, 42, 31, 0.05);
  --qed: #1d3b63; --qed-wash: rgba(29, 59, 99, 0.09);
  --serif: "STIX Two Text", "STIX Two Symbols", "Times New Roman", Times, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --hang: 4rem; --measure: 39rem; --gutter: 3.25rem; --margin: 17.5rem;
  --sheet-w: calc(var(--hang) + var(--measure) + var(--gutter) + var(--margin));
  --pad: 2.5rem;
  --lh: 1.52;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 1.1875rem;
  line-height: var(--lh); font-kerning: normal; font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums; font-synthesis: none; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.2em;
  text-decoration-color: var(--ink-3); transition: text-decoration-color 0.12s; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; }
::selection { background: #ecdfae; color: var(--ink); }
p { margin: 0 0 0.9em; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.16; margin: 0; text-wrap: balance; }
em, i, cite, dfn { font-style: italic; }
strong, b { font-weight: 650; }
img, svg { max-width: 100%; }
sup { font-size: 0.68em; line-height: 0; vertical-align: 0.48em; font-variant-numeric: lining-nums; }
code, kbd, samp, pre { font-family: var(--mono); font-size: 0.79em; font-variant-numeric: lining-nums tabular-nums;
  font-variant-ligatures: none; }
:not(pre) > code { background: var(--tint); padding: 0.1em 0.32em 0.12em; border-radius: 2px; white-space: nowrap; }
abbr, .sc { font-variant-caps: all-small-caps; letter-spacing: 0.055em; text-decoration: none; }
.num { font-variant-numeric: lining-nums tabular-nums; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.sic { color: var(--sic); }
.qed { color: var(--qed); }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the end-of-proof square, drawn so it is the same size in every face */
.tombstone { display: inline-block; width: 0.56em; height: 0.56em; background: currentColor; vertical-align: 0.03em; }
.arrow { font-family: "STIX Two Symbols", var(--serif); }

/* ------------------------------------------------------------------ masthead and running head */
.masthead { max-width: calc(var(--sheet-w) + 2 * var(--pad)); margin: 0 auto; padding: 1.75rem var(--pad) 0; }
.masthead-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 0.9rem; }
.wordmark { font-style: italic; font-weight: 500; font-size: 2.25rem; line-height: 0.9; letter-spacing: -0.012em; text-decoration: none;
  white-space: nowrap; }
.masthead nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 0.25rem 1.7rem;
  font-variant-caps: all-small-caps; letter-spacing: 0.085em; font-size: 1.0625rem; line-height: 1.3; }
.masthead nav a, .masthead nav button { text-decoration: none; padding: 0.15rem 0 0.1rem; border-bottom: 1.5px solid transparent;
  transition: border-color 0.12s; }
.masthead nav a:hover, .masthead nav button:hover { border-bottom-color: var(--ink-3); }
.masthead nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.masthead nav .console-link { border: 1px solid var(--ink); padding: 0.12rem 0.75rem 0.1rem; margin-left: 0.3rem; transition: background 0.12s, color 0.12s; }
.masthead nav .console-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.masthead nav button { font: inherit; font-variant-caps: inherit; letter-spacing: inherit; background: none; border: 0; border-bottom: 1.5px solid transparent;
  color: inherit; cursor: pointer; }
.rule-double { height: 6px; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); }
.running { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: baseline; padding-top: 0.5rem; font-size: 0.8125rem;
  line-height: 1.3; color: var(--ink-2); font-variant-caps: all-small-caps; letter-spacing: 0.09em; }
.running > :nth-child(2) { text-align: center; font-variant-caps: normal; font-style: italic; letter-spacing: 0; font-size: 0.875rem; }
.running > :last-child { text-align: right; }

/* ------------------------------------------------------------------ the sheet */
.sheet { max-width: calc(var(--sheet-w) + 2 * var(--pad)); margin: 0 auto; padding: 4rem var(--pad) 5rem; }
.article { margin-left: var(--hang); width: var(--measure); max-width: 100%; position: relative; }
.article > section { margin-top: 3.6rem; }
.wide { width: calc(var(--measure) + var(--gutter) + var(--margin)); max-width: none; }
.full { width: var(--sheet-w); margin-left: calc(-1 * var(--hang)); max-width: none; }

/* title block */
.kicker { font-variant-caps: all-small-caps; letter-spacing: 0.12em; font-size: 0.9375rem; line-height: 1.3; color: var(--ink-2); margin: 0 0 1.6rem;
  display: flex; align-items: center; gap: 0.7rem; }
.title { font-size: clamp(2.5rem, 5.6vw, 3.9rem); font-weight: 400; letter-spacing: -0.016em; line-height: 1.03; margin: 0 0 0 -0.04em; }
.title em { letter-spacing: -0.01em; }
.subtitle { font-size: 1.4rem; line-height: 1.32; font-style: italic; color: var(--ink-2); margin: 1.1rem 0 0; text-wrap: balance; }
.byline { margin: 1.7rem 0 0; font-size: 1.0625rem; line-height: 1.4; }
.byline .affil { display: block; font-size: 0.875rem; color: var(--ink-2); font-style: italic; margin-top: 0.2rem; }
.dates { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-2); margin: 0.9rem 0 0; }
.abstract { margin-top: 2.1rem; padding: 1.15rem 0 1.2rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.abstract p { font-size: 1.0625rem; line-height: 1.5; margin: 0; }
.abstract p + p { margin-top: 0.7rem; }
.abstract .keywords { font-size: 0.875rem; line-height: 1.45; color: var(--ink-2); }
.runin { font-variant-caps: all-small-caps; letter-spacing: 0.09em; font-weight: 650; margin-right: 0.4em; }
.lede { font-size: 1.34rem; line-height: 1.4; }

/* headings: numbers hang in the left margin */
h2 { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.004em; margin: 0 0 1rem; position: relative; }
.secno { position: absolute; right: 100%; margin-right: 1.1rem; font-weight: 400; color: var(--ink-3); font-variant-numeric: lining-nums; white-space: nowrap; }
h3 { font-size: 1.1875rem; font-weight: 650; margin: 2rem 0 0.55rem; position: relative; }
h3 .secno { font-size: 1rem; top: 0.14em; }
h4 { font-size: 1rem; font-variant-caps: all-small-caps; letter-spacing: 0.09em; font-weight: 650; margin: 1.5rem 0 0.4rem; }
.paper-title { font-size: 2.05rem; font-weight: 400; letter-spacing: -0.012em; line-height: 1.1; margin: 0; }

/* running prose: justified, hyphenated, paragraphs marked by an indent as in print */
.prose p.kicker { margin-bottom: 1.6rem; }
.prose p.byline { margin-top: 1.7rem; }
.prose p.dates { margin-top: 0.55rem; }
.prose .family p { margin: 0 0 1.1rem; }
.prose p { text-align: justify; hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
  text-wrap: pretty; margin: 0; }
.prose p + p { text-indent: 1.45em; }
.prose p.lede, .prose p.flush, .prose header p, .prose .family p, .prose figcaption, .prose .footnotes p, .prose .board p, .prose p.table-note { text-align: left; hyphens: manual; text-indent: 0; }
.prose .abstract p { text-align: justify; hyphens: auto; text-indent: 0; }
.prose .abstract p.keywords { text-align: left; }
.prose p.lede + p { text-indent: 0; margin-top: 0.9rem; }
.prose p + :is(ul, ol, figure, .listing, .table-scroll, table, dl, blockquote, .families, .actions) { margin-top: 1.1rem; }
.prose :is(ul, ol, figure, .listing, .table-scroll, table, dl, blockquote, .families) + p { margin-top: 1.1rem; text-indent: 0; }
.prose .runin-i { font-style: italic; margin-right: 0.3em; }
ul, ol { margin: 0 0 1em; padding-left: 1.35em; }
li { margin-bottom: 0.35em; }
li::marker { color: var(--ink-3); font-variant-numeric: lining-nums; }
ul.dash { list-style: none; padding-left: 1.45em; }
ul.dash > li::before { content: "–"; position: absolute; margin-left: -1.45em; color: var(--ink-3); }
dl.terms { margin: 0; }
dl.terms dt { font-style: italic; float: left; clear: left; margin-right: 0.45em; }
dl.terms dt::after { content: "."; }
dl.terms dd { margin: 0 0 0.6em; text-align: justify; hyphens: auto; }
blockquote { margin: 1.2em 0; padding-left: 1.3em; border-left: 1px solid var(--ink); color: var(--ink-2); }

/* marginal notes */
.sidenote { float: right; clear: right; width: var(--margin); margin-right: calc(-1 * (var(--gutter) + var(--margin)));
  margin-top: 0.34rem; margin-bottom: 1.2rem; font-size: 0.8125rem; line-height: 1.46; color: var(--ink-2); text-align: left; text-indent: 0;
  hyphens: manual; font-style: normal; font-weight: 400; letter-spacing: 0; font-variant-caps: normal; }
.sidenote b { font-variant-caps: all-small-caps; letter-spacing: 0.08em; font-weight: 650; color: var(--ink); }
.sidenote a { text-decoration-color: var(--hair); }

/* footnotes */
.footnotes { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--hair); font-size: 0.875rem; line-height: 1.48; color: var(--ink-2); }
.footnotes ol { padding-left: 0; margin: 0; list-style: none; }
.footnotes li { margin: 0 0 0.5em; padding-left: 1.5em; position: relative; }
.footnotes li > .mark { position: absolute; left: 0; top: 0; font-variant-numeric: lining-nums; color: var(--ink); }
.footnotes li:target { color: var(--ink); background: linear-gradient(var(--tint), var(--tint)) no-repeat; }
.footnotes .back { text-decoration: none; font-family: "STIX Two Symbols", var(--serif); margin-left: 0.25em; color: var(--ink-3); }
.footnotes .back:hover { color: var(--ink); }
a.fn { text-decoration: none; font-variant-numeric: lining-nums; padding: 0 0.08em 0 0.06em; }
a.fn:hover { color: var(--sic); }

/* ------------------------------------------------------------------ figures, tables, listings */
figure { margin: 2.2rem 0 0; }
.prose figure + p, .prose .table-scroll + p { margin-top: 1.6rem; }
figcaption, .caption { font-size: 0.875rem; line-height: 1.46; color: var(--ink-2); margin-top: 0.85rem; max-width: var(--measure); text-align: left; }
.label { font-variant-caps: all-small-caps; letter-spacing: 0.085em; font-weight: 650; color: var(--ink); margin-right: 0.4em; white-space: nowrap; }

table.ruled { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.36; font-variant-numeric: lining-nums tabular-nums;
  border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
table.ruled caption { caption-side: top; text-align: left; font-size: 0.875rem; color: var(--ink-2); padding-bottom: 0.65rem; line-height: 1.46;
  font-variant-numeric: oldstyle-nums proportional-nums; }
table.ruled th { text-align: left; font-weight: 400; font-style: italic; padding: 0.5rem 1.1rem 0.42rem 0; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
table.ruled td, table.ruled tbody th { padding: 0.42rem 1.1rem 0.42rem 0; vertical-align: top; border-bottom: 1px solid var(--hair); font-style: normal; font-weight: 400; }
table.ruled tbody tr:last-child > * { border-bottom: 0; }
table.ruled tr > :last-child { padding-right: 0; }
table.ruled .r { text-align: right; }
table.ruled .c { text-align: center; }
table.ruled tr.group > * { font-variant-caps: all-small-caps; letter-spacing: 0.085em; padding-top: 1rem; padding-bottom: 0.3rem; color: var(--ink-2); border-bottom: 0; }
table.ruled tr.group:first-child > * { padding-top: 0.6rem; }
table.ruled .n { color: var(--ink-3); font-size: 0.86em; white-space: nowrap; }
table.ruled .best { font-weight: 650; }
table.ruled td small, table.ruled th small { display: block; color: var(--ink-3); font-size: 0.86em; font-style: normal; }
.table-scroll { overflow-x: auto; }
.table-note { font-size: 0.8125rem; color: var(--ink-2); margin: 0.65rem 0 0; line-height: 1.46; max-width: var(--measure); text-align: left; text-indent: 0 !important; hyphens: manual; }

/* listings: code set as a numbered exhibit */
.listing { margin: 1.3rem 0 1.4rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.listing-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.38rem 0 0.32rem; border-bottom: 1px solid var(--hair);
  font-size: 0.8125rem; line-height: 1.3; color: var(--ink-2); }
.listing-head .label { margin: 0; }
.listing-head .lang { font-variant-caps: all-small-caps; letter-spacing: 0.085em; }
.listing pre { margin: 0; padding: 0.85rem 0 0.95rem; overflow-x: auto; font-size: 0.8125rem; line-height: 1.6; tab-size: 2; }
.listing pre code { font-size: inherit; background: none; padding: 0; white-space: pre; }
.copy { font: inherit; font-family: var(--serif); font-variant-caps: all-small-caps; letter-spacing: 0.085em; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink-2); border-bottom: 1px solid transparent; }
.copy:hover { color: var(--ink); border-bottom-color: var(--ink); }
.listing .c { color: var(--ink-3); font-style: italic; }
.listing .s { color: #6a4a12; }
.listing .k { color: var(--qed); }

/* ------------------------------------------------------------------ controls */
.btn { display: inline-flex; align-items: baseline; font: inherit; font-size: 1rem; line-height: 1.2; padding: 0.68rem 1.25rem 0.7rem; border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); text-decoration: none; cursor: pointer; border-radius: 0; white-space: nowrap;
  transition: background 0.14s, color 0.14s; }
.btn:hover { background: var(--paper); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.small { font-size: 0.875rem; padding: 0.36rem 0.8rem 0.38rem; }
.btn.danger { background: transparent; color: var(--sic); border-color: var(--sic); }
.btn.danger:hover { background: var(--sic); color: var(--paper); }
.btn[disabled] { opacity: 0.45; cursor: default; pointer-events: none; }
.btn.block { display: flex; justify-content: center; width: 100%; }
.linkbtn { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-thickness: 0.05em;
  text-underline-offset: 0.2em; text-decoration-color: var(--ink-3); color: inherit; }
.linkbtn:hover { text-decoration-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; gap: 0.9rem 1.5rem; align-items: center; margin: 1.9rem 0 0; }
.actions .more { font-size: 1rem; }
label { display: block; font-size: 0.9375rem; font-variant-caps: all-small-caps; letter-spacing: 0.085em; color: var(--ink-2); margin-bottom: 0.3rem; line-height: 1.3; }
input[type=text], input[type=email], input[type=number], textarea, select { font: inherit; font-size: 1rem; line-height: 1.4; width: 100%; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--ink-3); border-radius: 0; padding: 0.55rem 0.7rem; transition: border-color 0.12s;
  font-variant-numeric: lining-nums; }
select { appearance: none; -webkit-appearance: none; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 55%, calc(100% - 0.7rem) 55%; background-size: 0.3rem 0.3rem; background-repeat: no-repeat; }
textarea { line-height: 1.5; resize: vertical; min-height: 9rem; }
input:hover, textarea:hover, select:hover { border-color: var(--ink-2); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--ink); outline: 1px solid var(--ink); outline-offset: 0; }
::placeholder { color: var(--ink-3); opacity: 1; }
.field { margin-bottom: 1.15rem; }
.hint { font-size: 0.8125rem; color: var(--ink-2); margin-top: 0.35rem; line-height: 1.45; }
.notice { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 0.75rem 0; font-size: 1rem; margin: 1.2rem 0; }
.notice.error { border-color: var(--sic); color: var(--sic); }
.badge { font-variant-caps: all-small-caps; letter-spacing: 0.085em; font-size: 0.8125rem; line-height: 1.2; border: 1px solid var(--ink-3); color: var(--ink-2);
  padding: 0.05rem 0.42rem 0.1rem; white-space: nowrap; display: inline-block; }
.badge.live { border-color: var(--ink); color: var(--ink); }
.tabs { display: flex; flex-wrap: wrap; gap: 0.2rem 1.6rem; border-bottom: 1px solid var(--ink); margin-bottom: 1.3rem; }
.tabs button { font: inherit; font-variant-caps: all-small-caps; letter-spacing: 0.085em; font-size: 1.0625rem; background: none; border: 0;
  padding: 0.3rem 0 0.35rem; margin-bottom: -1px; border-bottom: 2.5px solid transparent; cursor: pointer; color: var(--ink-2); display: inline-flex; align-items: baseline; gap: 0.4em; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { border-bottom-color: var(--ink); color: var(--ink); }

/* ------------------------------------------------------------------ home: the two families */
.families { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.family { padding: 1.6rem 2.2rem 1.5rem 0; display: flex; flex-direction: column; }
.family + .family { border-left: 1px solid var(--ink); padding: 1.6rem 0 1.5rem 2.2rem; }
.family .mark { font-size: 2.1rem; line-height: 1; height: 2.1rem; display: flex; align-items: center; margin-bottom: 1rem; font-weight: 500; }
.family .mark .tombstone { width: 1.45rem; height: 1.45rem; }
.family h3 { margin: 0 0 0.5rem; font-size: 1.45rem; font-weight: 600; letter-spacing: -0.004em; }
.family p { font-size: 1.0625rem; line-height: 1.48; margin: 0 0 1.1rem; }
.family table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: auto 0 1.1rem; font-variant-numeric: lining-nums; }
.family td { padding: 0.36rem 0; border-top: 1px solid var(--hair); vertical-align: baseline; }
.family tr:last-child td { border-bottom: 1px solid var(--hair); }
.family td:last-child { text-align: right; }
.family .go { font-size: 1rem; }

/* home: the headline comparison, three dots on one axis */
.dotline { display: block; width: 100%; height: auto; overflow: visible; }
.dotline text { font-family: var(--serif); fill: var(--ink-2); font-size: 13px; font-variant-numeric: lining-nums; }
.dotline .axis { stroke: var(--ink); stroke-width: 1; }
.dotline .tick { stroke: var(--ink); stroke-width: 1; }
.dotline .lead { stroke: var(--ink-3); stroke-width: 0.75; }
.dotline .name { fill: var(--ink); font-size: 14px; }
.dotline .val { fill: var(--ink); font-size: 14px; font-weight: 650; }
.dotline .sicdot { fill: var(--sic); }
.dotline .odot { fill: var(--paper); stroke: var(--ink); stroke-width: 1.25; }
.dotline .sicname, .dotline .sicval { fill: var(--sic); }
.headline { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1.9rem; align-items: end; margin: 1.5rem 0 0; }
.headline .big { font-size: clamp(3.6rem, 9vw, 5.6rem); line-height: 0.82; font-weight: 400; letter-spacing: -0.035em; font-variant-numeric: lining-nums; color: var(--sic); }
.headline .what { font-size: 1.0625rem; line-height: 1.42; padding-bottom: 0.1rem; }

/* score distribution: every text is a dot */
.dots { display: block; width: 100%; height: auto; }
.dots text { font-family: var(--serif); font-size: 12.5px; fill: var(--ink-2); font-variant-numeric: lining-nums; }
.dots .rowlabel { fill: var(--ink); font-size: 13.5px; }
.dots .count { fill: var(--ink-3); font-size: 12px; }
.dots .axis, .dots .tick { stroke: var(--ink); stroke-width: 1; }
.dots .thr { stroke: var(--sic); stroke-width: 1; }
.dots .thr.sens { stroke-dasharray: 3 3; }
.dots .thrlabel { fill: var(--sic); font-size: 12px; }
.dots .zone { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 1 3; }
.dots circle { fill: var(--ink-3); }
.dots circle.c1 { fill: #d98a82; }
.dots circle.c2 { fill: var(--sic); }

/* scoreboard: same texts, three detectors */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.board > div { padding: 1.1rem 1.4rem 1.2rem 0; }
.board > div + div { border-left: 1px solid var(--hair); padding-left: 1.4rem; }
.board > div:last-child { padding-right: 0; }
.board h4 { margin: 0 0 0.2rem; font-size: 0.875rem; }
.board .q { font-size: 0.9375rem; line-height: 1.36; margin: 0 0 0.9rem; min-height: 5.5em; }
.prose .board .q { margin: 0 0 0.9rem; }
.prose .board .verdict { margin: 0.75rem 0 0; }
.prose p.table-note { margin: 0.65rem 0 0; }
.prose p.table-note + p { margin-top: 1.5rem; text-indent: 0; }
.prose p + p:has(> .runin-i) { margin-top: 0.8rem; text-indent: 0; }
.prose .abstract + h3 { margin-top: 2.4rem; }
.prose p.byline.flush { margin-top: 1.1rem; font-size: 1rem; color: var(--ink-2); }
.prose dl.terms + p { margin-top: 1.1rem; }
.prose p.qd-for { text-align: left; hyphens: manual; margin: 0 0 0.9rem; }
.qd-col h4 .meta { font-weight: 400; color: var(--ink-2); }
.board .verdict { font-size: 0.8125rem; font-style: italic; color: var(--ink-2); margin: 0.75rem 0 0; line-height: 1.4; }
.bars { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.42rem 0.6rem; align-items: center; font-size: 0.8125rem; line-height: 1.2; font-variant-numeric: lining-nums tabular-nums; }
.bars .who { color: var(--ink-2); white-space: nowrap; }
.bars .who.me { color: var(--sic); font-weight: 650; }
.bars .who.qed { color: var(--qed); font-weight: 650; }
.bars .track i.qed { background: var(--qed); }
.board.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board.three .q { min-height: 5.5em; }
.prose figure + script + p { margin-top: 1.6rem; text-indent: 0; }
.bars .track { height: 0.5rem; background: var(--tint-2); position: relative; }
.bars .track i { position: absolute; inset: 0 auto 0 0; background: var(--ink-3); }
.bars .track i.me { background: var(--sic); }
.bars .track i.zero { width: 1.5px !important; background: var(--ink); }
.bars .v { text-align: right; white-space: nowrap; color: var(--ink); }

/* ------------------------------------------------------------------ the manuscript: Sic's demo and the playground */
.ms { border: 1px solid var(--ink); background: var(--sheet); }
.ms-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding: 0.55rem 1.25rem 0.5rem; border-bottom: 1px solid var(--ink);
  font-size: 0.9375rem; line-height: 1.3; }
.ms-title { font-variant-caps: all-small-caps; letter-spacing: 0.09em; font-weight: 650; display: flex; align-items: baseline; gap: 0.5em; white-space: nowrap; }
.ms-title .sic { font-variant-caps: normal; letter-spacing: 0; font-weight: 500; font-size: 1.05em; }
.picker { display: flex; flex-wrap: wrap; gap: 0.15rem 1.25rem; }
.picker button { font: inherit; background: none; border: 0; padding: 0.12rem 0; cursor: pointer; color: var(--ink-2); border-bottom: 1.5px solid transparent; }
.picker button:hover { color: var(--ink); }
.picker button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.ms-body { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) 12.5rem; }
.ms-lines { padding: 1.35rem 0 1.2rem; text-align: right; font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-3); user-select: none; position: relative; }
.ms-lines span { position: absolute; right: 0.85rem; line-height: 1; }
.ms-text { padding: 1.35rem 1.5rem 1.2rem 0.4rem; font-size: 1.0625rem; line-height: 1.66; min-height: 13rem; }
.ms-text p { margin: 0; hyphens: manual; text-align: left; }
.ms-text p + p { text-indent: 1.45em; }
.ms-margin { border-left: 1px solid var(--hair); position: relative; font-family: var(--mono); font-size: 0.6875rem; line-height: 1; }
.ms-margin .mark { position: absolute; left: 0.9rem; right: 0.6rem; display: flex; align-items: center; gap: 0.4rem; color: var(--sic); white-space: nowrap; opacity: 0;
  transform: translateX(-0.3rem); transition: opacity 0.3s, transform 0.3s; cursor: default; }
.ms-margin .mark.on { opacity: 1; transform: none; }
.ms-margin .mark .tag { font-family: var(--serif); font-size: 0.875rem; font-weight: 500; }
.ms-margin .mark.sens { color: #c9695f; }
.ms-margin .mark.hot, .ms-margin .mark.hot .tag { font-weight: 650; }
.ms-foot { border-top: 1px solid var(--hair); padding: 0.7rem 1.25rem 0.75rem; font-size: 0.875rem; line-height: 1.42; color: var(--ink-2); display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 2rem; align-items: start; }
.ms-foot .tally { color: var(--ink); font-variant-numeric: lining-nums; }
.ms-foot .note { display: block; color: var(--ink); margin-bottom: 0.25rem; }
.ms-foot .note:empty { display: none; }
.ms-foot .note b { font-variant-caps: all-small-caps; letter-spacing: 0.085em; font-weight: 650; margin-right: 0.4em; }
.tex { white-space: nowrap; }
.tex math { font-size: 1.04em; }
.fact.tex { padding-bottom: 0.12em; }
.ms-foot .tally b { font-weight: 650; }
.switch { display: inline-flex; border: 1px solid var(--ink); font-size: 0.875rem; line-height: 1.2; }
.switch button { font: inherit; background: none; border: 0; padding: 0.28rem 0.75rem 0.3rem; cursor: pointer; color: var(--ink-2); font-variant-numeric: lining-nums; }
.switch button + button { border-left: 1px solid var(--ink); }
.switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
/* the proofreader's line under a sentence; it is drawn from left to right */
.sent { background-image: linear-gradient(var(--sic), var(--sic)); background-repeat: no-repeat; background-position: 0 calc(100% - 0.08em); background-size: 0 0.085em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.5s cubic-bezier(0.3, 0.6, 0.3, 1), background-color 0.3s; cursor: default; border-radius: 1px; }
.sent.marked { background-size: 100% 0.085em; background-color: var(--sic-wash); }
.sent.marked.sens { background-image: linear-gradient(#dba39c, #dba39c); background-size: 100% 0.06em; background-color: var(--sic-faint); }
.sent.hot { background-color: rgba(189, 42, 31, 0.2); }
.sent.hot:not(.marked) { background-color: var(--tint-2); }
.ms.compact .ms-body { grid-template-columns: 2.6rem minmax(0, 1fr) 9.5rem; }

/* ------------------------------------------------------------------ QED's demo: notes in, passage out */
.qd { border: 1px solid var(--ink); background: var(--sheet); }
.qd-body { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
.qd-col { padding: 1.3rem 1.5rem 1.3rem; min-width: 0; }
.qd-col + .qd-col { border-left: 1px solid var(--hair); }
.qd-col h4 { margin: 0 0 0.8rem; font-size: 0.875rem; color: var(--ink-2); display: flex; justify-content: space-between; gap: 1rem; }
.qd-for { font-size: 0.875rem; line-height: 1.4; color: var(--ink-2); margin: 0 0 0.9rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--hair); }
.qd-notes { font-family: var(--mono); font-size: 0.75rem; line-height: 1.62; white-space: pre-wrap; color: var(--ink-2); margin: 0; background: none; border: 0; padding: 0; overflow-wrap: anywhere; }
.qd-out { font-size: 1.0625rem; line-height: 1.62; min-height: 14rem; }
.qd-out p { margin: 0; text-align: left; hyphens: manual; }
.qd-out p + p { text-indent: 1.45em; }
.qd-out .tomb { color: var(--qed); margin-left: 0.4em; display: inline-block; width: 0.56em; height: 0.56em; background: currentColor; }
.fact { background-image: linear-gradient(var(--qed), var(--qed)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1.5px;
  transition: background-size 0.45s ease, background-color 0.2s; }
.fact.on { background-size: 100% 1.5px; }
.fact.hot { background-color: var(--qed-wash); }
.caret::after { content: ""; display: inline-block; width: 0.42em; height: 1em; background: var(--qed); vertical-align: -0.16em; margin-left: 0.12em; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.qd-foot { border-top: 1px solid var(--hair); padding: 0.7rem 1.25rem 0.75rem; font-size: 0.875rem; line-height: 1.42; color: var(--ink-2); display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 0.4rem 2rem; }
.qd-foot .tally { color: var(--ink); font-variant-numeric: lining-nums; }

/* ------------------------------------------------------------------ research: contents with dot leaders */
.toc { list-style: none; padding: 0; margin: 0; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.toc li { margin: 0; }
.toc li + li { border-top: 1px solid var(--hair); }
.toc a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; column-gap: 0.4rem; padding: 0.95rem 0 1rem; text-decoration: none; align-items: baseline; }
.toc .no { color: var(--ink-3); font-variant-numeric: lining-nums; }
.toc .t { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.toc a:hover .t { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.2em; }
.toc .d { display: block; font-size: 0.9375rem; line-height: 1.42; color: var(--ink-2); margin-top: 0.25rem; grid-column: 2; }
.toc .pp { color: var(--ink-2); font-size: 0.875rem; font-variant-caps: all-small-caps; letter-spacing: 0.085em; white-space: nowrap; padding-left: 1.5rem; }
.issue { list-style: none; padding: 0; margin: 0.35rem 0 0; font-size: 0.8125rem; }
.issue li { margin: 0; display: flex; align-items: baseline; gap: 0.35rem; line-height: 1.75; }
.issue li::after { content: ""; flex: 1; order: 1; border-bottom: 1px dotted var(--ink-3); transform: translateY(-0.28em); }
.issue a { text-decoration: none; order: 0; color: var(--ink); }
.issue a:hover { text-decoration: underline; }
.issue .pg { order: 2; font-variant-numeric: lining-nums tabular-nums; color: var(--ink-2); }

/* ------------------------------------------------------------------ docs */
.docs { display: grid; grid-template-columns: 12.5rem minmax(0, 42rem); gap: 4.25rem; }
.docs-nav { font-size: 1rem; position: sticky; top: 1.75rem; align-self: start; }
.docs-nav h4 { margin: 0 0 0.6rem; color: var(--ink-3); font-weight: 400; }
.docs-nav ol { list-style: none; padding: 0; margin: 0 0 1.6rem; counter-reset: d; }
.docs-nav li { margin: 0; counter-increment: d; }
.docs-nav ol > li > a { display: grid; grid-template-columns: 1.4rem 1fr; padding: 0.24rem 0; text-decoration: none; color: var(--ink-2); line-height: 1.35; }
.docs-nav ol > li > a::before { content: counter(d); color: var(--ink-3); font-variant-numeric: lining-nums; }
.docs-nav ol a:hover { color: var(--ink); }
.docs-nav ol a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.docs-nav .sub { list-style: none; padding: 0 0 0.3rem 1.4rem; margin: 0; font-size: 0.875rem; }
.docs-nav .sub li { counter-increment: none; }
.docs-nav .sub a { display: block; padding: 0.14rem 0; text-decoration: none; color: var(--ink-2); }
.docs-body h1 { font-size: 2.6rem; font-weight: 400; letter-spacing: -0.014em; line-height: 1.06; margin-bottom: 1.3rem; }
.docs-body > .lede { margin-bottom: 1.6rem; }
.docs-body h2 { margin-top: 3.2rem; padding-top: 1.3rem; border-top: 1px solid var(--ink); font-size: 1.5rem; }
.docs-body h2 .secno { position: static; margin-right: 0.6em; }
.docs-body h3 { font-size: 1.1875rem; margin-top: 2rem; }
.docs-body p, .docs-body li { font-size: 1.0625rem; line-height: 1.52; }
.docs-body p { margin-bottom: 0.9em; }
.endpoint { font-family: var(--mono); font-size: 0.875rem; display: flex; gap: 0.75rem; align-items: center; margin: 0.5rem 0 1rem; flex-wrap: wrap; }
.endpoint .verb { font-weight: 600; border: 1px solid var(--ink); padding: 0.05rem 0.45rem; font-size: 0.75rem; letter-spacing: 0.04em; }
table.params { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 0.6rem 0 1.4rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
table.params td { border-top: 1px solid var(--hair); padding: 0.55rem 1.1rem 0.6rem 0; vertical-align: top; line-height: 1.45; }
table.params tr:first-child td { border-top: 0; }
table.params td:first-child { white-space: nowrap; width: 1%; }
table.params td:last-child { padding-right: 0; }
table.params .ty { color: var(--ink-3); font-size: 0.8125rem; display: block; font-style: italic; margin-top: 0.1rem; }

/* ------------------------------------------------------------------ console */
.console { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 4.25rem; max-width: calc(var(--sheet-w) + 2 * var(--pad)); margin: 0 auto; padding: 3.25rem var(--pad) 5rem; }
.console-nav { font-size: 1.0625rem; align-self: start; position: sticky; top: 1.75rem; }
.console-nav h4 { margin: 0 0 0.6rem; color: var(--ink-3); font-weight: 400; }
.console-nav ol { list-style: none; padding: 0; margin: 0 0 2rem; counter-reset: toc; }
.console-nav li { margin: 0; counter-increment: toc; }
.console-nav a { display: grid; grid-template-columns: 1.4rem 1fr; padding: 0.28rem 0; text-decoration: none; color: var(--ink-2); line-height: 1.35; }
.console-nav a::before { content: counter(toc); color: var(--ink-3); font-variant-numeric: lining-nums; }
.console-nav a:hover { color: var(--ink); }
.console-nav a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.console-nav .who { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.45; border-top: 1px solid var(--ink); padding-top: 0.75rem; }
.console-nav .who .num { color: var(--ink); font-size: 0.9375rem; }
.console-main { min-width: 0; }
.console-main h1 { font-size: 2.6rem; font-weight: 400; letter-spacing: -0.014em; line-height: 1.06; margin-bottom: 0.7rem; }
.console-main > .sub { color: var(--ink-2); margin-bottom: 2.2rem; max-width: 40rem; font-size: 1.125rem; line-height: 1.45; }
.console-main section { margin-top: 3rem; }
.console-main h2 { font-size: 1.3rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ink); margin-bottom: 1.1rem; }
.console-main p { max-width: 41rem; }
.meter { margin: 0.4rem 0 0; }
.meter .track { height: 0.45rem; background: var(--tint-2); position: relative; }
.meter .track i { position: absolute; inset: 0 auto 0 0; background: var(--ink); min-width: 1.5px; }
.meter .track.high i { background: var(--sic); }
.meter .scale { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--ink-2); margin-top: 0.35rem; font-variant-numeric: lining-nums tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.stat { padding: 1rem 1.2rem 0.95rem 0; }
.stat + .stat { border-left: 1px solid var(--hair); padding-left: 1.2rem; }
.stat .k { font-variant-caps: all-small-caps; letter-spacing: 0.085em; font-size: 0.875rem; color: var(--ink-2); line-height: 1.3; }
.stat .v { font-size: 2rem; line-height: 1.2; font-variant-numeric: lining-nums; letter-spacing: -0.01em; }
.stat .s { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.4; }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.4rem; margin-bottom: 1.4rem; }
.steps > li::before { content: counter(step) "."; color: var(--ink-3); font-variant-numeric: lining-nums; }
.keyreveal { border: 1px solid var(--ink); padding: 1rem 1.15rem 1.05rem; margin: 1.1rem 0 1.6rem; background: var(--sheet); }
.keyreveal code { font-size: 0.875rem; white-space: normal; word-break: break-all; background: none; padding: 0; }
.inline-form { display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap; }
.inline-form .field { margin: 0; flex: 1 1 14rem; max-width: 26rem; }
.chart { width: 100%; height: auto; display: block; }
.chart rect { fill: var(--ink); }
.chart rect:hover { fill: var(--sic); }
.chart .axis { stroke: var(--ink); stroke-width: 1; }
.chart text { font-family: var(--serif); font-size: 11.5px; fill: var(--ink-2); font-variant-numeric: lining-nums; }
.play { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; max-width: 50rem; }
.play .controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 1rem; }
.play .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.play details { margin-bottom: 1.15rem; }
.play summary { cursor: pointer; font-size: 1rem; color: var(--ink-2); padding: 0.2rem 0; }
.play summary:hover { color: var(--ink); }
.play details[open] summary { margin-bottom: 0.6rem; color: var(--ink); }
.play .result-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.3rem; }
.play .result-head label { margin: 0; }
.play .out { border: 1px solid var(--ink); background: var(--sheet); padding: 1.2rem 1.35rem; min-height: 9rem; font-size: 1.0625rem; line-height: 1.6; }
.play .out.empty { color: var(--ink-3); font-style: italic; border-color: var(--ink-3); border-style: dashed; }
.play .out p { margin: 0; }
.play .out p + p { text-indent: 1.45em; }
.play .out ul { font-size: 1rem; margin-top: 0.6rem; }
.play .meta { font-size: 0.8125rem; color: var(--ink-2); margin-top: 0.7rem; line-height: 1.5; font-variant-numeric: lining-nums; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.narrow { max-width: 28rem; margin: 0 auto; padding: 5rem 1.25rem 6rem; }
.narrow h1 { font-size: 2.5rem; font-weight: 400; letter-spacing: -0.014em; line-height: 1.06; margin-bottom: 0.9rem; }
.or { display: flex; align-items: center; gap: 0.9rem; color: var(--ink-3); font-variant-caps: all-small-caps; letter-spacing: 0.085em; font-size: 0.9375rem; margin: 1.5rem 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--hair); }

.promptbox { border: 1px solid var(--ink); background: var(--sheet); padding: 1rem 1.15rem 1.05rem; margin: 1rem 0 1.4rem; }
.prose .promptbox p { text-align: left; hyphens: manual; text-indent: 0; }
.promptbox .text { font-family: var(--mono); font-size: 0.875rem; line-height: 1.55; margin: 0; overflow-wrap: anywhere; }
.promptbox .row { display: flex; align-items: center; gap: 1rem; margin-top: 0.8rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ colophon */
.colophon { max-width: calc(var(--sheet-w) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad) 3.5rem; font-size: 0.875rem; color: var(--ink-2); line-height: 1.52; }
.colophon-grid { border-top: 1px solid var(--ink); padding-top: 1.4rem; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1.4fr); gap: 2rem 3rem; }
.colophon h4 { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--ink); }
.colophon p { margin: 0 0 0.6em; }
.colophon ul { list-style: none; padding: 0; margin: 0; }
.colophon li { margin: 0 0 0.2rem; }
.colophon a { text-decoration: none; }
.colophon a:hover { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.2em; }
.cite { font-family: var(--mono); font-size: 0.6875rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; color: var(--ink-2); background: none; border: 0; padding: 0; }
.folio-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; margin-top: 2.2rem; padding-top: 0.75rem; border-top: 1px solid var(--hair);
  font-size: 0.8125rem; color: var(--ink-3); }
.folio-foot > :last-child { text-align: right; font-style: italic; }

/* ------------------------------------------------------------------ narrower sheets */
@media (max-width: 1160px) {
  :root { --margin: 0rem; --gutter: 0rem; }
  .sheet { max-width: calc(var(--hang) + var(--measure) + 2 * var(--pad)); }
  .masthead, .colophon { max-width: calc(var(--hang) + var(--measure) + 2 * var(--pad) + 6rem); }
  .wide { width: var(--measure); max-width: 100%; }
  .full { width: calc(var(--hang) + var(--measure)); max-width: calc(100% + var(--hang)); }
  /* without a margin column a note follows its paragraph, set in from the left */
  .sidenote { float: none; display: block; width: auto; margin: 0.8rem 0 0.3rem 1.45em; padding: 0 0 0 0.9rem; border-left: 1px solid var(--ink); order: 2; }
  .prose p:has(> .sidenote) { display: flex; flex-direction: column; }
  .sidenote.margin-only { display: none; }
  .figure-scroll { overflow-x: auto; }
  .figure-scroll > svg { min-width: 42rem; }
  .board, .board.three { grid-template-columns: 1fr 1fr; }
  .board > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .board > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .board .q { min-height: 0; }
  .ms-body { grid-template-columns: 2.6rem minmax(0, 1fr) 9.5rem; }
  .colophon-grid { grid-template-columns: 1fr 1fr; }
  .console, .docs { gap: 2.75rem; }
}
@media (max-width: 800px) {
  :root { --hang: 0rem; --pad: 1.25rem; }
  .dotline text { font-size: 19px; }
  .dotline .name, .dotline .val { font-size: 20px; }
  body { font-size: 1.0625rem; }
  .masthead { padding-top: 1.15rem; }
  .masthead-top { flex-direction: column; align-items: flex-start; gap: 0.85rem; padding-bottom: 0.7rem; }
  .wordmark { font-size: 1.9rem; }
  .masthead nav { justify-content: flex-start; gap: 0.2rem 1.15rem; font-size: 1rem; }
  .running { grid-template-columns: 1fr auto; }
  .running > :nth-child(2) { display: none; }
  .sheet { padding-top: 2.5rem; padding-bottom: 3.5rem; }
  .article > section { margin-top: 2.8rem; }
  .secno { position: static; margin-right: 0.55em; }
  .prose p { text-align: left; hyphens: manual; }
  .lede { font-size: 1.2rem; }
  .families { grid-template-columns: 1fr; }
  .family { padding-right: 0; }
  .family + .family { border-left: 0; border-top: 1px solid var(--ink); padding-left: 0; }
  .headline { grid-template-columns: 1fr; gap: 0.8rem; }
  .ms-body, .ms.compact .ms-body { grid-template-columns: minmax(0, 1fr); }
  .ms-lines, .ms-margin { display: none; }
  .ms-text { padding: 1.1rem 1.1rem 1rem; font-size: 1rem; min-height: 0; }
  .ms-head, .ms-foot, .qd-foot { padding-left: 1.1rem; padding-right: 1.1rem; }
  .ms-foot { grid-template-columns: 1fr; }
  .switch { justify-self: start; }
  .qd-body { grid-template-columns: 1fr; }
  .qd-col + .qd-col { border-left: 0; border-top: 1px solid var(--hair); }
  .qd-col { padding: 1.1rem; }
  .toc a { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .toc .pp { display: none; }
  .docs, .console { grid-template-columns: 1fr; gap: 1.5rem; }
  .console { padding-top: 2rem; }
  .docs-nav, .console-nav { position: static; border-bottom: 1px solid var(--hair); padding-bottom: 0.4rem; }
  .docs-nav ol, .console-nav ol { display: flex; flex-wrap: wrap; gap: 0 1.3rem; margin-bottom: 0.6rem; }
  .docs-nav .sub, .console-nav .who { display: none; }
  .play .pair { grid-template-columns: 1fr; }
  .colophon-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .folio-foot > :last-child { display: none; }
  .docs-body h1, .console-main h1, .narrow h1 { font-size: 2.1rem; }
}
@media (max-width: 520px) {
  .board, .board.three { grid-template-columns: 1fr; }
  .board > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); }
  .row2 { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .masthead nav, .actions, .picker, .switch, .copy, .colophon ul { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }
  .sheet { padding-top: 1.5rem; }
  a { text-decoration: none; }
  .ms, .qd, figure, table { break-inside: avoid; }
}