:root {
  --paper: #F1F2EF; --paper-sunk: #E6E8E4; --ink: #15181A; --ink-muted: #58615E; --line: #CDD2CE; --line-strong: #7E8783;
  --hum: var(--ink); --on-ink: var(--paper);
  --font-serif: "Literata", "Iowan Old Style", Georgia, serif;
  --font-mono: "Source Code Pro", ui-monospace, Menlo, monospace;
  --content-max: 1120px; --gutter: 20px; --stroke-hum: 2px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --paper: #121415; --paper-sunk: #1B1E20; --ink: #E6E9E6; --ink-muted: #9BA39F; --line: #2D3234; --line-strong: #6C7572; }
}
:root[data-theme="dark"] { color-scheme: dark; --paper: #121415; --paper-sunk: #1B1E20; --ink: #E6E9E6; --ink-muted: #9BA39F; --line: #2D3234; --line-strong: #6C7572; }
@media (max-width: 479.98px) { :root { --gutter: 16px; } }

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-serif); font-size: 18px; line-height: 1.6; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, dl, dd, ul, ol { margin: 0; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-muted); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.wrap { max-width: var(--content-max); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.eyebrow, .label { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.display { font-size: 36px; line-height: 42px; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }
.heading { font-size: 22px; line-height: 29px; font-weight: 500; text-wrap: balance; }
.lede { font-size: 20px; line-height: 31px; }
.small { font-size: 16px; line-height: 25px; }
.measure { max-width: 34em; }
.measure-wide { max-width: 44em; }
.muted { color: var(--ink-muted); }
.rule { border-top: 1px solid var(--line); }

.lockup { display: inline-flex; align-items: baseline; gap: 0.4em; color: var(--ink); font-size: 21px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; text-decoration: none; }
.lockup svg { display: block; height: 0.6em; width: auto; flex: none; }

header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); padding-block: 18px; border-bottom: 1px solid var(--line); }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 28px; font-size: 16px; }
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }
nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }

/* opening */
.opening { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-16); padding-block: 84px var(--space-16); }
.opening .words { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.opening .mark { flex: 0 1 300px; display: flex; justify-content: center; color: var(--hum); }
.opening .mark svg { width: min(100%, 272px); height: auto; display: block; }

/* the keel: the hum runs edge to edge under the opening; the defaults stand on it. The section clips the overrun so it never widens the page. */
#defaults { overflow-x: clip; }
.hum { position: relative; height: var(--stroke-hum); }
.hum::after { content: ""; position: absolute; left: -4000px; right: -4000px; top: 0; height: var(--stroke-hum); background: var(--hum); }
.keel { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-16); padding-block: var(--space-16); counter-reset: house; }
.keel li { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line); counter-increment: house; }
.keel li::before { content: counter(house, decimal-leading-zero); font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.keel li p { font-size: 17px; line-height: 1.55; max-width: 34em; }

footer { border-top: 1px solid var(--line); }
footer .wrap { padding-block: var(--space-8) var(--space-12); }
.status { font-family: var(--font-mono); font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.status time { color: var(--ink); font-weight: 500; }

/* notes */
.note-head { padding-block: 72px var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); }
/* a note is one centred column: the header stays full width, the article sits at a reading measure */
article .wrap { max-width: calc(38em + 2 * var(--gutter)); }
.prose { padding-block: var(--space-8) var(--space-16); display: flex; flex-direction: column; gap: var(--space-5); }
.prose h2 { font-size: 22px; line-height: 29px; font-weight: 500; margin-top: var(--space-8); }
.prose ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-3); }
.prose em { font-style: italic; }
.note-list { list-style: none; padding: 0; padding-block: var(--space-8) var(--space-24); display: flex; flex-direction: column; gap: var(--space-6); }
.home-notes { border-top: 1px solid var(--line); padding-top: var(--space-8); }
.home-notes .note-list { padding-top: var(--space-4); }
.note-list li { border-top: 1px solid var(--line); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }