/* Layout: one reading column; the key runs as a strip of number-over-letter cells; tables scroll in their own boxes. */
:root {
  --bg: #f2f5f4; --surface: #ffffff; --fg: #162127; --muted: #53626a; --rule: #cdd7d5;
  --accent: #0d6767; --accent-soft: #dcebea; --warn: #7a4e00; --warn-soft: #fbefd2;
  --display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --body: "Newsreader", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1719; --surface: #172326; --fg: #e4ecea; --muted: #9fb0b0; --rule: #2c3d40;
  --accent: #6cc5c0; --accent-soft: #17393a; --warn: #f0c877; --warn-soft: #3a2e12; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0f1719; --surface: #172326; --fg: #e4ecea; --muted: #9fb0b0; --rule: #2c3d40;
  --accent: #6cc5c0; --accent-soft: #17393a; --warn: #f0c877; --warn-soft: #3a2e12; color-scheme: dark }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 1.125rem; line-height: 1.55; padding-inline: 1.1rem; padding-block: 2.5rem 4rem; }
main { max-width: 44rem; margin-inline: auto; display: flex; flex-direction: column; gap: 2.6rem; }
section { display: flex; flex-direction: column; gap: 0.95rem; min-width: 0; }
h1, h2, h3 { font-family: var(--display); font-stretch: 87%; text-wrap: balance; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 1.45rem; font-weight: 700; padding-top: 0.9rem; border-top: 2px solid var(--fg); }
h3 { font-size: 1.05rem; font-weight: 600; }
p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.45rem; }
a { color: var(--accent); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eyebrow { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: 1.28rem; line-height: 1.45; }
.byline { color: var(--muted); font-size: 1rem; }
.notice { background: var(--warn-soft); color: var(--warn); font-family: var(--display); font-stretch: 87%; font-weight: 600; font-size: 0.98rem; padding: 0.7rem 0.9rem; line-height: 1.35; }
.keystrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.9rem, 1fr)); gap: 3px; }
.kc { background: var(--surface); border: 1px solid var(--rule); display: flex; flex-direction: column; align-items: center; padding: 0.35rem 0 0.3rem; }
.kn { font-family: var(--mono); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.kl { font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.1; color: var(--accent); }
.letter { background: var(--surface); border-left: 4px solid var(--accent); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.letter p { font-size: 1.16rem; }
.letter .nl { font-style: italic; }
.code { font-family: var(--mono); font-size: 0.86em; background: var(--accent-soft); padding: 0.05em 0.3em; white-space: nowrap; }
.small { font-size: 0.98rem; color: var(--muted); }
.scroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 0.42rem 0.6rem; border-bottom: 1px solid var(--rule); }
thead th { font-family: var(--display); font-stretch: 87%; font-weight: 600; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--fg); }
tbody th { font-family: var(--mono); font-weight: 400; color: var(--muted); white-space: nowrap; }
td.num { font-family: var(--mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; min-width: 22rem; color: var(--muted); }
td.let { font-family: var(--mono); font-size: 0.9rem; white-space: nowrap; }
td.num .q { color: var(--warn); } td.num .d { color: var(--accent); font-weight: 500; } td.num .sg { font-style: italic; }
.status { font-family: var(--display); font-stretch: 87%; font-weight: 600; font-size: 0.82rem; white-space: nowrap; }
.status.open { color: var(--warn); } .status.ok { color: var(--accent); }
details { border: 1px solid var(--rule); background: var(--surface); }
summary { cursor: pointer; padding: 0.7rem 0.9rem; font-family: var(--display); font-stretch: 87%; font-weight: 600; }
details .scroll { border: 0; border-top: 1px solid var(--rule); }
footer { color: var(--muted); font-size: 0.95rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
/* Additions for the standalone website: page frame, navigation, long-form text, figures. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
nav.site { max-width: 44rem; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding-bottom: 1.6rem; font-family: var(--display); font-stretch: 87%; font-weight: 600; font-size: 0.95rem; }
nav.site a { color: var(--muted); text-decoration: none; padding-block: 0.2rem; border-bottom: 2px solid transparent; }
nav.site a:hover { color: var(--fg); }
nav.site a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }
nav.site a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
footer.site { max-width: 44rem; margin-inline: auto; margin-top: 3rem; color: var(--muted); font-size: 0.95rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
/* the sheets are pictures of paper: white card and dark caption in both themes, on purpose */
:root { --sheet-bg: #ffffff; --sheet-fg: #53626a; }
figure.sheet { background: var(--sheet-bg); border: 1px solid var(--rule); padding: 0.5rem; margin: 0; }
figure.sheet img { display: block; width: 100%; height: auto; }
figure.sheet figcaption { font-size: 0.9rem; color: var(--sheet-fg); padding-top: 0.5rem; }
.printout { font-family: var(--mono); font-size: 0.86rem; overflow-wrap: anywhere; }
td.let { white-space: normal; min-width: 13rem; word-break: break-word; }

/* long-form pages written in plain text */
.prose { display: block; min-width: 0; }
.prose > * + * { margin-top: 0.95rem; }
.prose h1 { font-size: clamp(2rem, 6vw, 3rem); }
.prose h1 + p { color: var(--muted); font-size: 1.05rem; }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 1.7rem; }
.prose ul, .prose ol { margin-top: 0.8rem; }
.prose blockquote { margin: 1.1rem 0 0; background: var(--surface); border-left: 4px solid var(--accent); padding: 1rem 1.2rem; }
.prose blockquote p { margin: 0; font-size: 1.12rem; }
.prose blockquote p + p { margin-top: 0.7rem; }
.prose code { font-family: var(--mono); font-size: 0.86em; background: var(--accent-soft); padding: 0.05em 0.3em; overflow-wrap: anywhere; }
.prose table { font-size: 0.95rem; }
.prose td, .prose tbody th { font-family: var(--body); color: var(--fg); white-space: normal; }
.prose tbody th { font-weight: 600; }
.prose td { font-variant-numeric: tabular-nums; }