/* Shared shell for the light pages (/about, /about-infra, /privacy, /terms).
   Page-specific styling stays inline in each page. The home page and the white
   paper have their own systems and don't use this file. */

:root {
  --bg: #fbfaf8;        /* infra + legal pages */
  --paper: #f7f1e6;     /* the warmer paper of /about */
  --paper: #f7f1e6;     /* the warmer /about paper */
  --panel: #ffffff;
  --ink: #1d1a17;
  --muted: #6b6359;
  --brand: #8e2f32;
  --line: #e8e2d8;
  --code-bg: #221c1a;   /* dark code panel */
  --code-ink: #f1e9dd;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* A hairline of the painting, tying these pages to the art-led ones. */
.rule-art {
  height: 5px;
  background: url("/art/monet-low-tide-at-pourville.jpg") center 62% / cover no-repeat;
}

header.top { padding: 30px 0 4px; }
header.top img { width: 112px; height: auto; display: block; }

main.wrap { padding-top: 58px; padding-bottom: 92px; }

a { color: var(--brand); text-decoration: none; border-bottom: 1px solid rgba(142,47,50,.28); }
a:hover { border-bottom-color: var(--brand); }
.muted { color: var(--muted); }

footer {
  margin-top: 54px; border-top: 1px solid var(--line); padding-top: 22px;
  font-size: .92rem; color: var(--muted);
}