/* Behind v2 palette and type (contracts/design-extract.md §1–2). */
:root { --black: #0A0A0F; --ink: #16150F; --paper: #F5F2EC; --cream: #E8E4DB; --sand: #D8D0C2;
        --stone: #A89C8B; --muted: #5F574F; --merlot: #5C1F2A; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--cream); color: var(--ink); }
body { font: 400 16px/1.55 "Inter Tight", system-ui, -apple-system, sans-serif; padding: 0 22px; }
main { max-width: 660px; margin: 0 auto; padding: 58px 0 72px; }
.mark { font: italic 500 20px/1 Fraunces, Georgia, serif; color: var(--ink); text-decoration: none; }
.mark::after { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--merlot); margin-left: 6px; vertical-align: 2px; }
h1 { font: 500 clamp(34px, 8vw, 46px)/1.02 Fraunces, Georgia, serif; letter-spacing: -0.025em; margin: 44px 0 12px; }
h2 { font: 500 20px/1.25 Fraunces, Georgia, serif; letter-spacing: -0.01em; margin: 34px 0 8px; }
.sub { font: italic 400 20px/1.35 Fraunces, Georgia, serif; color: var(--muted); margin: 0 0 32px; }
p, li { color: var(--ink); }
li { margin-bottom: 7px; }
.muted { color: var(--muted); font: 400 10px/1.4 "Space Mono", ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; }
h3 { font: 500 16px/1.3 "Inter Tight", system-ui, sans-serif; letter-spacing: 0; margin: 22px 0 6px; }
/* An unfilled fact. Every .todo must be replaced before these pages are relied on. */
.todo { color: var(--merlot); font: 400 13px/1.4 "Space Mono", ui-monospace, monospace;
  border-bottom: 2px solid var(--merlot); white-space: nowrap; }
a { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--merlot); outline-offset: 3px; }
.button { display: inline-block; background: var(--ink); color: var(--paper); font: 500 16px/1 "Inter Tight", system-ui, sans-serif;
  padding: 19px 26px; text-decoration: none; box-shadow: 6px 6px 0 var(--merlot); }
.button:hover { transform: translate(1px, 1px); box-shadow: 5px 5px 0 var(--merlot); }
.button:focus-visible { outline: 2px solid var(--merlot); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .button:hover { transform: none; } }
.card { background: var(--paper); border: 1px solid var(--sand); padding: 22px 24px; margin: 26px 0;
  box-shadow: 0 18px 34px rgba(22,21,15,.10); }
footer { max-width: 660px; margin: 0 auto; padding: 22px 0 44px; border-top: 1px solid var(--sand); }
footer a { color: var(--muted); margin-right: 18px; font: 400 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; }