/* The reading surface for the portfolio's own documents.
   Archetype: document — one measure, generous leading, typography doing the
   work, with a contents rail that becomes a block at the top on a phone.
   It shares the ledger's palette (assets/theme.css, generated) and its two
   typefaces, so the apparatus reads as part of the same publication, and it
   holds a narrower measure than the ledger because this is prose to be read
   rather than a set to be scanned. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --pf-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --pf-ui: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
  --pf-s1: 0.5rem; --pf-s2: 1rem; --pf-s3: 1.75rem; --pf-s4: 3rem; --pf-s5: 5.5rem;
  --pf-rule: 1px;
  --pf-dur: 160ms;
  --pf-ease: cubic-bezier(0.2, 0, 0, 1);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--pf-bg);
  color: var(--pf-text);
  font-family: var(--pf-ui);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--pf-focus); outline-offset: 3px; border-radius: 2px; }
a { color: var(--pf-accent-text); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
a:active { color: var(--pf-text); }

.skip {
  position: absolute; left: var(--pf-s2); top: var(--pf-s2); z-index: 10;
  padding: 0.6rem 1rem; background: var(--pf-accent); color: var(--pf-on-accent);
  text-decoration: none; font-weight: 600;
  transform: translateY(-6rem);
  transition: transform var(--pf-dur) var(--pf-ease);
}
.skip:focus { transform: translateY(0); }

/* ---- head ---------------------------------------------------------------- */

.dochead {
  width: min(100% - 2rem, 74rem);
  margin-inline: auto;
  padding-block: var(--pf-s4) var(--pf-s3);
  border-block-end: var(--pf-rule) solid var(--pf-border-strong);
}
.back {
  display: inline-block;
  font-family: var(--pf-mono);
  font-size: 0.75rem;
  margin-block-end: var(--pf-s3);
}
.eyebrow {
  font-family: var(--pf-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pf-text-subtle); margin: 0;
}
.dochead h1 {
  font-family: var(--pf-display);
  font-variation-settings: "opsz" 120, "WONK" 1;
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.02; letter-spacing: -0.02em;
  margin: 0.35rem 0 0; max-width: 20ch; text-wrap: balance;
}
.lede {
  margin: var(--pf-s2) 0 0; max-width: 58ch;
  font-size: 1.0625rem; color: var(--pf-text-muted);
}

/* ---- the two columns ----------------------------------------------------- */

.docwrap {
  width: min(100% - 2rem, 74rem);
  margin-inline: auto;
  padding-block: var(--pf-s3) var(--pf-s5);
  display: grid;
  gap: var(--pf-s3);
}
@media (min-width: 60rem) {
  .docwrap { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--pf-s4); align-items: start; }
  .toc { position: sticky; top: var(--pf-s3); }
}

.toc h2 {
  font-family: var(--pf-mono); font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pf-text-subtle); font-weight: 400; margin: 0 0 var(--pf-s1);
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.toc li { min-width: 0; }
.toc a { font-size: 0.875rem; overflow-wrap: anywhere; }

/* ---- the document -------------------------------------------------------- */

.doc { min-width: 0; max-width: 74ch; }
.doc > * + * { margin-block-start: var(--pf-s2); }

.doc h2 {
  font-family: var(--pf-display);
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.12; letter-spacing: -0.015em;
  margin-block-start: var(--pf-s4);
  padding-block-start: var(--pf-s2);
  border-block-start: var(--pf-rule) solid var(--pf-border);
  scroll-margin-top: var(--pf-s2);
}
.doc h3 {
  font-family: var(--pf-ui); font-weight: 600; font-size: 1.0625rem;
  margin-block-start: var(--pf-s3); scroll-margin-top: var(--pf-s2);
}
.doc h4 { font-family: var(--pf-ui); font-weight: 600; font-size: 0.9375rem; margin-block-start: var(--pf-s2); }

.doc p { margin: 0; overflow-wrap: anywhere; }
.doc ul, .doc ol { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.4rem; }
.doc li { overflow-wrap: anywhere; }
.doc strong { font-weight: 600; color: var(--pf-text); }

.doc code {
  font-family: var(--pf-mono); font-size: 0.8125em;
  background: var(--pf-surface-2); color: var(--pf-text);
  padding: 0.1em 0.35em; border-radius: 2px; overflow-wrap: anywhere;
}
.doc pre {
  margin: 0; padding: var(--pf-s2);
  background: var(--pf-surface-1);
  border: var(--pf-rule) solid var(--pf-border);
  border-radius: 2px;
  overflow-x: auto;
}
.doc pre code { background: none; padding: 0; font-size: 0.8125rem; line-height: 1.55; }

.doc blockquote {
  margin: 0; padding-inline-start: var(--pf-s2);
  border-inline-start: 3px solid var(--pf-accent);
  color: var(--pf-text-muted);
}

.doc hr { border: 0; border-block-start: var(--pf-rule) solid var(--pf-border); margin-block: var(--pf-s3); }

/* A table wide enough to need it scrolls in its own box, never the page. */
.tablewrap { overflow-x: auto; }
.doc table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.doc th, .doc td {
  text-align: start; vertical-align: top;
  padding: 0.45rem var(--pf-s2) 0.45rem 0;
  border-block-end: var(--pf-rule) solid var(--pf-border);
  min-width: 0; overflow-wrap: anywhere;
}
.doc th { font-weight: 600; color: var(--pf-text); white-space: nowrap; }

/* ---- foot ---------------------------------------------------------------- */

.docfoot {
  width: min(100% - 2rem, 74rem);
  margin-inline: auto;
  padding-block: var(--pf-s2) var(--pf-s4);
  border-block-start: var(--pf-rule) solid var(--pf-border-strong);
  display: flex; flex-wrap: wrap; gap: var(--pf-s2) var(--pf-s3);
  font-family: var(--pf-mono); font-size: 0.75rem;
}