/* About, Privacy and the 404, on the Covers walnut (CPO, 2026-10-09: "one ground is the Covers rule, and a 404 on paper
   reads as a different site"; look C, docs/art-direction.md). The yosegi inlay band on top, the voice for headings,
   body text at a reading measure in cream; on a wide screen, the column centred like the home. */
@font-face { font-family: "Young Serif"; src: url("/fonts/young-serif-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-wght.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --shelf: #1f150e; --walnut: #2b1d12; --cream: #f6e9d2; --tan: #c9b08a; --gold: #f2b705; --ink: #2b1d12;
  --wood1: #d8b98a; --wood2: #a8743f; --wood3: #6b4423;
  --voice: "Young Serif", Georgia, serif;
  --ui: "Figtree", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { background: #160f0a; }
body { margin: 0; min-height: 100dvh; color: var(--cream); font: 400 16px/1.5 var(--ui); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.box { max-width: 440px; min-height: 100dvh; margin: 0 auto; background: var(--shelf); display: flex; flex-direction: column;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.6); }
.inlay { height: 10px; flex: none;
  background: conic-gradient(from 45deg at 50% 50%, var(--wood1) 0 25%, var(--wood2) 0 50%, var(--wood3) 0 75%, var(--wood1) 0) 0 0 / 10px 10px; }

/* The 404 */
.lost { padding: 32px 20px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.lost h1 { margin: 0; font: 400 1.75rem/1.1 var(--voice); }
.lost p { margin: 0; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 22px; background: var(--gold); color: var(--ink);
  font-weight: 800; text-decoration: none; }

/* About and Privacy */
.page { padding: 26px 20px 8px; max-width: 62ch; }
.page h1 { margin: 0 0 12px; font: 400 1.75rem/1.1 var(--voice); }
.page h2 { margin: 24px 0 6px; font: 400 1.15rem/1.2 var(--voice); }
.page p, .page li { margin: 0 0 10px; }
.page ul { padding-left: 1.2em; margin: 0 0 10px; }
.page a { color: var(--gold); }
.page a.btn { color: var(--ink); }
.page .fine { margin-top: 24px; font-size: .78rem; color: var(--tan); }

/* The footer every page ends on */
.site { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 16px 20px 24px; margin-top: auto; font-size: .82rem; color: var(--tan); }
.site a { color: var(--tan); }
.site a[aria-current] { color: var(--cream); font-weight: 700; text-decoration: none; }