/* base.css — foundation that everything else builds on: reset, body
   typography, sheet container, headings, lede, generic marks (.muted /
   .hint / .ok / .down) and the .ico glyph sizing rules. */

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100vh; }

body {
  font-family: "Recursive", ui-monospace, "SFMono-Regular", monospace;
  font-variation-settings: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  /* The page must never scroll horizontally: a stray wide element (a long
     digest, an oversized table) would otherwise shift the centered sheet and
     desync the position:fixed detail-map tree. `clip` (not `hidden`) avoids
     creating a scroll container and doesn't clip the fixed tree itself. */
  overflow-x: clip;
}

a { color: var(--ink); }

/* Links share the ink color of body text, so inside running prose they must be
   distinguishable by more than color (WCAG 1.4.1): underline them. Limited to
   prose contexts so dense tables, nav, KPIs and chip/button-styled links stay
   clean. .post-body (docs + news) already underlines; this covers ledes and
   descriptive paragraphs elsewhere. Chip-styled links opt out via a.chip. */
.lede a:not(.chip),
.panel p a:not(.chip) {
  text-decoration: underline;
}

/* ---- sheet (centered content column) ---- */
.sheet {
  flex: 1;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding: 2.25rem 1.25rem 3rem;
}
.sheet { transition: opacity 70ms linear; }
/* Positioning context for corner overlays (e.g. the corner-clock) so they
   anchor to the content column without reflowing its content. */
.sheet { position: relative; }

.panel h1 {
  font-weight: 800;
  font-size: 1.7rem;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere; /* a long purl heading wraps instead of scrolling */
}

.lede {
  font-variation-settings: var(--prose);
  color: var(--grey);
  margin: 0 0 1.75rem;
  max-width: 64ch;
}
.lede em { font-style: oblique -8deg; color: var(--ink); }

/* ---- generic marks: muted/hint utilities + ok/down dot glyphs ---- */
.muted { color: var(--grey); }
.hint  { font-variation-settings: var(--prose); font-style: italic; color: var(--grey); margin-top: 1.75rem; font-size: 13px; }

.ok::before   { content: "● "; }   /* filled dot = up   */
.down::before { content: "○ "; }   /* hollow dot = down */
.down { font-weight: 700; }

/* ---- hand-drawn glyph sizing (icons that ride alongside text) ---- */
.ico {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.15em;
}
.warn .ico { width: 1.25em; height: 1.25em; vertical-align: -0.28em; margin-right: 0.25em; }
.chip .ico, .summary .ico { width: 0.95em; height: 0.95em; vertical-align: -0.13em; margin-right: 0.1em; }

/* crawling-snail "indexing" mark — a freshly-pulled version the indexer
   is still crawling. 5:3 source, so fix the height and let width follow. */
.crawl, .crawl img { display: inline-block; height: 1.6em; width: auto; vertical-align: -0.5em; }