/* Șirul, round 2: the index is each body's yearly number sequence.
   One element, the numbered line hung on a red margin rule; marks replace the explanations. */

@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* Tokens. Contrast on paper: ink 15.42, ink-2 6.85, margin 6.31 (light);
   ink 14.73, ink-2 8.15, margin 7.87 (dark). Rule is decorative and never draws a mark.
   Hover is the band behind a hovered link; on it ink 12.67, ink-2 5.63, margin 5.19 (light);
   ink 10.60, ink-2 5.86, margin 5.67 (dark). */
:root {
  color-scheme: light dark;
  --paper: #FAFBFC;
  --ink: #14213D;
  --ink-2: #4A5878;
  --margin: #B3261E;
  --rule: #A9BCD6;
  --hover: #DDE6F1;
  --line: 1.5rem;
  --half: .75rem;
  --g: 9ch;            /* gutter: one margin on every page */
  --t-body: 1rem;      /* ADR-0051 § 12 T4: the reading size */
  --l-body: 1.5rem;    /* T5: the reading line, 1.75rem from 1280 px */
  --G: 15rem;          /* T12: from 1280 px the gutter track, up to the red margin and its 2 px */
  --gap-m: 1.5rem;     /* T12: from 1280 px the space either side of the red margin */
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1724;
    --ink: #E3E9F2;
    --ink-2: #9FB0C8;
    --margin: #FF8A80;
    --rule: #3A4C66;
    --hover: #22324A;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 "JetBrains Mono", ui-monospace, monospace;
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums;
}

/* Full width for the reader: no cap from 1280 px up. */
.sheet { margin: 0 auto; padding: var(--line) 1rem calc(var(--line) * 2); }
@media (min-width: 768px) { .sheet { padding: calc(var(--line) * 1.5) 2rem calc(var(--line) * 3); } }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
/* Hover: a band behind the link; the underline never changes, so it cannot read as a second line. */
a:hover { background-color: var(--hover); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.skip { position: absolute; left: 1rem; top: -20rem; z-index: 1; padding: .5rem 1rem; background: var(--paper); border: 2px solid var(--ink); font-weight: 700; }
.skip:focus { top: 1rem; }

/* Marks: drawn for this register, monochrome, coloured only through `color`. */
.mk { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; color: inherit; }
.mk-l { width: 1.5em; height: 1.5em; }
.w { display: inline-flex; align-items: center; gap: .5ch; }        /* a mark and its datum */
.marks { display: flex; flex-wrap: wrap; gap: .25rem 2.5ch; margin: 0; color: var(--ink-2); }
.line1 + .marks { margin-top: .25rem; }
.marks a { display: inline-flex; align-items: center; min-height: 24px; }
.mk-lipsa, .is-lipsa, .marks .is-lipsa { color: var(--margin); }
.mk-t { font-weight: 700; }
.mk-a { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 44px; color: var(--ink); text-decoration: none; }

/* Masthead: one line, the key one step away. */
.mast { display: flex; flex-wrap: wrap; gap: 0 2ch; align-items: baseline; padding-bottom: var(--half); border-bottom: 2px solid var(--ink); }
.mast > a:first-child { font-weight: 800; }
.mast .tag { color: var(--ink-2); }
.mast .to-key { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; }

/* The gutter: every block that carries a number hangs on the same rule. */
.hang { display: grid; grid-template-columns: minmax(calc(var(--g) + .75rem + 2px), min-content) minmax(0, 1fr); }
.hang > .g { padding-right: .75rem; border-right: 2px solid var(--margin); text-align: right; }
.hang > .c { padding-left: .75rem; min-width: 0; }

/* The form: the number is written in the margin, like on the document. */
.ask { margin: var(--line) 0 0; padding-bottom: var(--half); }
.ask > .g, .ask > .c { padding-top: .25rem; padding-bottom: .25rem; }
.ask > .c { display: flex; flex-wrap: wrap; gap: var(--half) 1.5rem; align-items: flex-start; }
.f { display: flex; flex-direction: column; gap: .25rem; min-width: 0; max-width: 100%; }
.f-q { flex: 1 1 100%; }
/* From 768 px: q is never narrower than 36ch, the select keeps its own width, and the
   button, which has no label, drops by one label line to sit level with the inputs. */
@media (min-width: 768px) {
  .f-q { flex-basis: 36ch; }
  .ask > .c > button { margin-top: calc(var(--line) + .25rem); }
}
.ask label { color: var(--ink-2); }
.ask > .g label { text-align: right; }
input, select, button {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink-2); border-radius: 0;
  min-height: 44px; padding: .375rem .5rem; max-width: 100%;
}
.ask > .g input { width: 100%; text-align: right; }
.f-q input { width: 100%; }
select { min-width: 0; }
button { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 700; padding: .375rem 1.25rem; cursor: pointer; }
button:hover { background: var(--paper); color: var(--ink); }
button:focus-visible { outline-offset: 3px; }
/* Fields and the skip link have a border: their focus outline covers it and adds 2 px
   outside, one frame instead of two. An invalid field keeps its red frame while focused. */
input:focus-visible, select:focus-visible, .skip:focus-visible { outline-width: 4px; outline-offset: -2px; }
[aria-invalid="true"]:focus-visible { outline-color: var(--margin); }

/* Headings and data strips. One h1 per page. */
h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-weight: 800; font-size: 1.5rem; margin: calc(var(--line) * 1.5) 0 var(--half); }
h2 { font-weight: 800; font-size: 1.25rem; }
h3 { font-weight: 700; font-size: 1rem; }
@media (min-width: 768px) { h1 { font-size: 2rem; } }
h1.w, h2.w { display: flex; align-items: center; gap: .5ch; }
p { margin: 0 0 var(--half); }
.back { margin: calc(var(--line) * 1.5) 0 0; }
.back a { display: inline-block; padding: .625rem 0; line-height: 1.5rem; }
.back + h1 { margin-top: var(--half); }
.quiet { color: var(--ink-2); }
.strip { display: flex; flex-wrap: wrap; gap: .25rem 2.5ch; align-items: center; margin: 0 0 var(--half); }
.strip b { font-weight: 700; }
.strip .k { color: var(--ink-2); }

/* Years: a ruler; only the year with data is marked. */
.years { display: flex; flex-wrap: wrap; margin: var(--line) 0 0; padding: 0; list-style: none; color: var(--ink-2); }
.years li { padding: .5rem .75ch 0; border-top: 2px solid var(--rule); }
.years li.on { color: var(--ink); font-weight: 800; border-top: 6px solid var(--ink); padding-top: .25rem; }

/* Volumes: stacked, side by side from 1024 px. */
.volumes { display: grid; gap: calc(var(--line) * 2) 2rem; margin-top: calc(var(--line) * 1.5); }
@media (min-width: 1024px) { .volumes { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.volume > h2 { margin-bottom: .25rem; }

/* The sequence table. Number as text in a row header. */
.sir { border-collapse: collapse; width: 100%; }
.sir caption { caption-side: top; text-align: left; color: var(--ink-2); padding-bottom: var(--half); }
.sir caption .strip { margin: 0; }
.sir thead th { font-weight: 400; color: var(--ink-2); text-align: left; padding: 0 0 .25rem .75rem; border-bottom: 2px solid var(--ink); }
.sir thead th:first-child { box-sizing: content-box; width: var(--g); text-align: right; padding: 0 .75rem .25rem 0; border-right: 2px solid var(--margin); }
.sir th.n { box-sizing: content-box; width: var(--g); text-align: right; vertical-align: top; padding: 0 .75rem 0 0; border-right: 2px solid var(--margin); border-bottom: 1px solid var(--rule); font-weight: 700; }
.sir th.n > a, .sir th.n > span { display: block; padding: .75rem 0; }
.sir th.n > a { min-height: 44px; }
.sir th.n > .cell { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; min-height: 44px; padding: .125rem 0; }
.sir th.n > .cell > a:not(.mk-a) { display: inline-flex; align-items: center; min-height: 44px; }
.sir td { vertical-align: top; padding: .75rem 0 .75rem .75rem; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.sir td p { margin: 0; }
.sir td p + p { margin-top: .25rem; }

.lipsa th.n { color: var(--margin); border-right-style: dashed; }
.sarit th.n { color: var(--ink-2); font-weight: 400; border-right-style: dotted; }
.punct th.n { color: var(--ink-2); font-weight: 400; }
.skip-row th.n, .skip-row td { color: var(--ink-2); font-weight: 400; }

.k { color: var(--ink-2); }
.d { font-weight: 700; }
.line1 { display: flex; flex-wrap: wrap; gap: 0 2ch; }

/* A decision line: title left, vote right from 768 px. */
.r { display: grid; gap: .25rem; }
@media (min-width: 768px) { .r { grid-template-columns: minmax(0, 1fr) minmax(16ch, 32ch); gap: 0 3ch; } }
.v { display: flex; gap: .5ch; align-items: flex-start; }
.v .mk { margin-top: .125em; }

/* Edges of the slice: the neighbouring sessions, above and below. */
.edge > .g, .edge > .c { padding-top: .75rem; padding-bottom: .75rem; color: var(--ink-2); }
.edge > .g { font-weight: 700; }

/* A single decision: the number large in the gutter. */
.leaf { margin-top: calc(var(--line) * 1.5); }
.leaf-nr { font-weight: 800; font-size: 4rem; line-height: 1; padding-bottom: var(--half); border-bottom: 2px solid var(--margin); overflow-wrap: anywhere; }
.leaf.lipsa .leaf-nr { color: var(--margin); border-bottom-style: dashed; }
.leaf-body > .strip { margin-top: var(--line); }
.leaf h1 { font-size: 1.25rem; margin: var(--half) 0 var(--line); max-width: none; }
@media (min-width: 768px) {
  .leaf { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .leaf-nr { font-size: 6rem; text-align: right; padding: 0 1.5rem 0 0; border-bottom: 0; border-right: 2px solid var(--margin); }
  .leaf.lipsa .leaf-nr { border-right-style: dashed; }
  .leaf-body { padding-left: 1.5rem; }
  .leaf-body > .strip { margin-top: .5rem; }
  .leaf h1 { font-size: 1.5rem; }
}

.ledger { margin: 0; border-top: 2px solid var(--ink); }
.ledger > div { display: grid; align-items: baseline; padding: .125rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 480px) { .ledger > div { grid-template-columns: minmax(0, 14ch) minmax(0, 1fr); gap: 0 2ch; } }
@media (min-width: 1024px) { .ledger > div { grid-template-columns: minmax(0, 24ch) minmax(0, 1fr); } }
.ledger dt { color: var(--ink-2); }
.ledger dd { margin: 0; overflow-wrap: break-word; min-width: 0; }
.ledger dd.is-lipsa { font-weight: 700; }
/* Ledgers and section spacing (ADR-0051 § 11). A mark inside a ledger label or value
   flows with its text: the label starts at the column edge, wraps back to it and keeps
   its baseline, so label and value start on one line. */
.ledger .w { display: inline; }
.ledger .w .mk { margin-right: .5ch; }
/* A state with a mark, then the next datum in the same value: the strip's 2.5ch gap. */
.ledger dd > .w { margin-right: 1.5ch; }
/* The note under the agenda table: as far from the table's last rule as from the next edge. */
.sir + .quiet { margin-top: var(--half); }
/* A page that ends on a ledger: the footer rule closes it, no second rule 24 px above. */
main > .ledger:last-child > div:last-child { border-bottom: 0; }

.extras { margin: 0; }
.extras h2 { margin-bottom: var(--half); }
.extras blockquote { margin: 0; padding-left: 2ch; border-left: 2px solid var(--ink-2); max-width: none; }

.vecini { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 2ch; margin-top: calc(var(--line) * 1.5); border-top: 2px solid var(--ink); }
.vecini a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem 0; font-weight: 700; }

/* Search: one volume under the other, so each line keeps room for title and vote. */
.results { display: grid; gap: calc(var(--line) * 2); margin-top: calc(var(--line) * 1.5); }

/* The key: the only explanation, at the foot of every page. */
.cheia { margin-top: calc(var(--line) * 3); padding-top: var(--half); border-top: 2px solid var(--ink); }
.cheia > h2 { margin-bottom: var(--half); }
.key-grid { display: grid; gap: var(--line) 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 32ch), 1fr)); }
.key-grid h3 { color: var(--ink-2); font-weight: 400; margin-bottom: .25rem; }
.key-grid ul { margin: 0; padding: 0; list-style: none; }
.key-grid li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0 1ch; align-items: center; min-height: 2rem; }
.key-grid li > .mk, .key-grid li > .mk-t { justify-self: center; }
.cheia .all { margin-top: var(--line); }

/* The footer (ADR-0051 § 13): the project's text, then its links; one column below
   768 px, the links a list of 44 px rows split by hairlines; from 768 px the list on
   the right, its first link level with the first text line. Sizes, the space above and
   the grid from 1280 px: § 12. */
.foot { margin-top: calc(var(--line) * 3); padding-top: var(--line); border-top: 1px solid var(--rule); }
.foot-about p { margin: 0; color: var(--ink); font-size: var(--t-body); line-height: var(--l-body); }
.foot-about p + p { margin-top: var(--half); }
.foot-about .foot-name { color: var(--ink-2); font-size: .875rem; line-height: 1.5rem; }
.foot-nav { margin-top: var(--line); }
.foot-nav ul { margin: 0; padding: 0; list-style: none; }
.foot-nav li + li { border-top: 1px solid var(--rule); }
@media (min-width: 768px) {
  .foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28ch); gap: 0 4rem; justify-content: start; }
  .foot-nav { margin-top: -.5rem; }
}

@media (forced-colors: active) {
  .hang > .g, .sir th.n, .sir thead th:first-child, .leaf-nr { border-color: CanvasText; }
  .mk { color: CanvasText; }
  a .mk, .mk-a .mk { color: LinkText; }
  :focus-visible { outline-color: Highlight; }
  [aria-invalid="true"]:focus-visible { outline-color: Highlight; }
  button { border-color: ButtonText; }
  .years li.on { border-top-color: CanvasText; }
}

/* Captions share a height, so the three tables start on one line. */
@media (min-width: 1024px) { .volumes .sir caption { min-height: calc(4.5em + var(--half)); } }

/* Links that sit in a data strip, a ledger or an edge keep a usable height. */
.strip.links a { display: inline-flex; align-items: center; gap: .5ch; min-height: 44px; }
.ledger a { display: inline-flex; align-items: center; gap: .5ch; min-height: 44px; }
.ledger dt, .ledger dd { padding: .375rem 0; }
.ledger dd:has(> a) { padding: 0; }
.edge > .c { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2ch; padding-top: .125rem; padding-bottom: .125rem; }
.edge > .c a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 700; }
.k.w { display: flex; }
.leaf h1 .mk { margin-right: .25ch; }
.nw { white-space: nowrap; }
.cheia .all a, .mast > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }

/* Rules the site's pages need and the preview lacks (ADR-0032 § 1). */
.mast .name, .legenda .full, .foot-nav a, .years a, .examples a, .ways a { display: inline-flex; align-items: center; min-height: 44px; }
.help { margin: 0; color: var(--ink-2); }
.examples { margin: 0; color: var(--ink-2); }
.ask > .examples { align-items: baseline; gap: 0 1ch; }
.ledger dd ul { margin: 0; padding: 0; list-style: none; }

/* The error state of /cauta (ADR-0032 § 5). */
[aria-invalid="true"] { scroll-margin-top: var(--line); border-color: var(--margin); }
.ask > .err { grid-column: 1 / -1; margin: 0; padding: .25rem 0; color: var(--margin); font-weight: 700; }
.err-sum { margin: var(--line) 0 var(--half); padding: var(--half) 0; border-top: 2px solid var(--margin); border-bottom: 2px solid var(--margin); }
.err-sum h2 { margin: 0 0 .25rem; }
.err-sum p { margin: 0; }
.err-sum a { display: inline-block; padding-block: 0; }

/* Links in running text and long addresses: a link at least 24 px high, and no
   horizontal scroll (C27). */
a { padding-block: .1rem; }
.ledger dd a { max-width: 100%; overflow-wrap: anywhere; }

/* The decision's text keeps its lines, in the site's type, and wraps inside the page
   (ADR-0032 § 2, C27). */
pre { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
/* The scan note in place of a text read by OCR (ADR-0051 § 2, Text): the link sits
   inside a sentence, so it is inline and a wrapped note keeps its 24 px line. */
.scan { margin: 0; max-width: none; }
.scan a { display: inline; min-height: 0; }

/* The legend (ADR-0032 § 2, amendment f): a closed details after the page's heading
   block; its summary keeps the native marker, the h2 its size and weight, and is at
   least 44 px high. */
.legenda { margin: var(--line) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.legenda > summary { min-height: 44px; padding: .5625rem 0; cursor: pointer; }
.legenda > summary > h2 { display: inline; }
.legenda > .key-grid { margin-top: var(--half); }
.legenda .all { margin: var(--line) 0 var(--half); }

/* The count tables of /statistici (ADR-0042 § 9): numbers right-aligned in the page's
   font; a table wider than the page scrolls inside its own region, never the page. */
.stats h3.w { display: flex; align-items: center; gap: .5ch; }
.cifre-wrap { max-width: 100%; overflow-x: auto; margin: 0 0 var(--half); }
.cifre { border-collapse: collapse; }
.cifre th, .cifre td { padding: .25rem 1.5ch .25rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; font-weight: 400; }
.cifre thead th { color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.cifre thead th + th, .cifre td { text-align: right; }
.cifre td { white-space: nowrap; }
.cifre td a { display: inline-block; min-width: 24px; }
.cifre .t { text-align: left; white-space: normal; }

/* Mark tips: the name of a mark alone, drawn on hover and on keyboard focus of its link,
   in CSS only (ADR-0042). The name stays the svg's aria-label (ADR-0032 § 2); the tip
   repeats data-tip for the eye only (content alt ""), so a screen reader reads it once.
   The tip hangs under the mark's line, from the left of the strip, cell, vote, ledger,
   back or edge line that holds it (a gutter mark: its row), never wider than that, so
   it never passes the page's edge. Ink on paper 15.42 (light), 14.73 (dark); hairline
   ink-2 6.85, 8.15. No motion. */
.tip { display: inline-flex; align-items: center; position: relative; }
.strip, .sir tr, .sir td, .v, .ledger > div, .back, .edge { position: relative; }
:is(.strip, .sir tr, .ledger, .back, .edge) .tip { position: static; }
.tip::after {
  content: attr(data-tip);
  content: attr(data-tip) / "";
  display: none;
  position: absolute; z-index: 2; left: 0; align-self: flex-start;
  /* A transparent top border bridges the gap, so the pointer can move from the mark
     onto the tip when the tip lies under the mark. */
  margin-top: 1.25em; border-top: calc(1.125rem + 1px) solid transparent;
  width: max-content; max-width: min(40ch, calc(100vw - 2rem));
  padding: .375rem 1ch;
  background: var(--paper) padding-box; box-shadow: inset 0 0 0 1px var(--ink-2);
  color: var(--ink); font-size: .875rem; line-height: 1.25rem; font-weight: 400;
  text-align: left; white-space: normal; overflow-wrap: break-word;
}
:is(.strip, .sir tr, .ledger, .back, .edge) .tip::after { max-width: min(40ch, 100%); }
.mk-a.tip::after { margin-top: 44px; }
a:focus-visible .tip::after, .tip:focus-visible::after { display: block; }
@media (hover: hover) {
  .tip:hover::after, a:hover .tip::after { display: block; }
}
@media (forced-colors: active) {
  .tip::after { margin-top: calc(1.25em + 1.125rem); border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .mk-a.tip::after { margin-top: calc(44px + 1.125rem); }
}

/* The stamp (ADR-0051 § 2): check.end, else check.start, in UTC, ISO 8601 basic form,
   a link to /stare when there is a check. Below 768 px and in print: the masthead's
   last line, right-aligned, the link 44 px high. On screen from 768 px: a vertical
   strip on the sheet's right edge, beside a full-height rule, the link 44 px wide and
   its glyphs where they were. ink-2 on paper: 6.85 light, 8.15 dark; the rule is
   decorative (--rule). */
.sheet { position: relative; }
.stamp { flex-basis: 100%; margin: 0; color: var(--ink-2); font-size: .75rem; line-height: 1.5; letter-spacing: .1em; text-align: right; }
.stamp a { display: inline-flex; align-items: center; min-height: 44px; }
@media screen and (min-width: 768px) {
  .sheet { padding-right: 5.5rem; }
  .stamp {
    position: absolute; top: 0; bottom: 0; right: 2rem;
    padding: calc(var(--line) * 1.5 - .5rem) 0 0 0;
    border-right: 1px solid var(--rule);
    writing-mode: vertical-rl;
    letter-spacing: .14em; text-align: start;
  }
  .stamp a { min-height: 0; min-width: 44px; padding: .5rem .625rem .5rem 1rem; }
}

/* Typography (ADR-0051 § 12, the designer's T1, T4-T10, T12). One face, JetBrains Mono.
   Below 1280 px the root is 16 px; from 1280 px it grows with the viewport (16 px at 1280,
   24 at 2000, 28 from 2360, max/min 1.75), so every rem grows with it. No measure cap:
   text runs to the edge of its grid column. */
@media (min-width: 1280px) {
  html { font-size: clamp(1rem, calc(.111rem + 1.111vw), 1.75rem); }
  :root { --l-body: 1.75rem; }
}
main > ul, main > ol { padding-left: 2ch; }
/* T4, T5, T7: running text, half a line between blocks. */
main > p, main > ul, main > ol { font-size: var(--t-body); line-height: var(--l-body); margin: 0 0 var(--half); }
main li + li { margin-top: .25rem; }
/* T6: a heading belongs to the block below it, 36 : 6 px below 768 px, 48 : 6 px from 768 px;
   the space is the heading's, so a section and a ledger under a heading add none. */
main > h2, main section > h2, .stats h2 {
  font-size: 1.25rem; line-height: 1.75rem;
  margin: calc(var(--line) * 1.5) 0 .375rem;
}
main > :is(.ledger, .edge) + h2 { margin-top: calc(var(--line) * 1.5); }
:is(main, .leaf-body) > section:not(:first-child) { margin-top: 0; }
main > h3, .stats h3 { line-height: 1.5rem; margin: var(--line) 0 .25rem; }
main > h1 + p.quiet { margin-bottom: var(--line); }
@media (min-width: 768px) {
  h1 { line-height: 2.5rem; }
  main > h2, main section > h2, .stats h2, main > :is(.ledger, .edge) + h2 { margin-top: calc(var(--line) * 2); }
}
main section > h2 + .ledger { margin-top: 0; }
/* T8: the byline of /despre, one block, the name then the role. */
.by { margin: 0 0 var(--half); }
.by b { display: block; }
.by .role { display: block; color: var(--ink-2); }
/* T9: line breaking, where the browser supports it. */
main p, main li, .ledger dd, .foot p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
main > p, .ledger dd { hanging-punctuation: first; }
main p a[href^="http"] { overflow-wrap: anywhere; }
/* T10: the decision's text keeps its source lines; from 480 px its ledger row has one
   column, the label above, so the transcription gets the ledger's full width. */
pre.text { line-height: 1.625; margin: 0; }
@media (min-width: 480px) { .ledger > div:has(> dd > pre) { grid-template-columns: minmax(0, 1fr); } }
/* T12: from 1280 px one red margin for every page, 15rem from the sheet's content edge;
   labels and numbers to its left, content from 16.5rem to the sheet's edge. */
@media (min-width: 1280px) {
  :root { --g: calc(var(--G) - var(--gap-m) - 2px); }
  .hang { grid-template-columns: var(--G) minmax(0, 1fr); }
  .hang > .g { padding-right: var(--gap-m); }
  .hang > .c { padding-left: var(--gap-m); }
  .ask > .g input { width: 9ch; align-self: flex-end; }
  /* The fields and the button on one line; the filter row of /cauta still wraps, its five
     fields do not fit one line without squeezing the dates. */
  .ask > .c:has(> button) { flex-wrap: nowrap; }
  .sir thead th:first-child, .sir th.n { padding-right: var(--gap-m); }
  .sir thead th, .sir td { padding-left: var(--gap-m); }
  .sir thead th:first-child { padding-left: 0; }
  .leaf { grid-template-columns: minmax(var(--G), max-content) minmax(0, 1fr); }
  .leaf-nr { padding-right: var(--gap-m); }
  .leaf-body { padding-left: var(--gap-m); }
  .ledger > div { grid-template-columns: var(--G) minmax(0, 1fr); column-gap: var(--gap-m); }
  /* A prose page: headings in the gutter, flush right against the margin, on the baseline
     of the block they head; with the paragraph's half line above, two lines between blocks. */
  main.prose { display: grid; grid-template-columns: var(--G) minmax(0, 1fr); column-gap: var(--gap-m); align-items: baseline; }
  main.prose > * { grid-column: 2; }
  main.prose > h2 { grid-column: 1; text-align: right; padding-right: var(--gap-m); margin: calc(var(--line) * 2 - var(--half)) 0 0; }
  main.prose > h2 + * { margin-top: calc(var(--line) * 2 - var(--half)); }
  main.prose > h1 + p.quiet { margin-bottom: var(--half); }
  /* The footer on the same lines: its text from the content line, the list in a 24ch third
     column, the first link's text level with the first text line (the 44 px link box does
     not grow with the root, the text line does). */
  .foot { grid-template-columns: var(--G) minmax(0, 1fr) minmax(0, 24ch); column-gap: var(--gap-m); }
  .foot-about { grid-column: 2; }
  .foot-nav { grid-column: 3; margin-top: calc(var(--l-body) / 2 - 22px); }
}