/* drayn.eu: tokens from design/drayn/020_system.md (light mode). Fraunces is self-hosted; no external requests. */
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --linen:#eef0ea; --surface:#fbfcf8; --sunk:#e3e6dd; --pine:#0d2b2a; --ink-2:#4a5d5e; }
* { box-sizing: border-box; }
html { background: var(--linen); }
body { margin: 0; color: var(--pine); font: 400 18px/1.5 "Fraunces", Georgia, serif; min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-underline-offset: .18em; }
main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(40px, 10vh, 120px) 24px 48px; }
.lockup { display: block; width: min(320px, 70vw); height: auto; margin: 0 0 clamp(40px, 8vh, 80px) -6px; }
h1 { font-weight: 360; font-size: clamp(34px, 7vw, 60px); line-height: 1.05; letter-spacing: -.015em; margin: 0 0 .6em; font-variation-settings: "opsz" 72; }
.lead { font-size: clamp(18px, 2.4vw, 21px); max-width: 36em; margin: 0 0 1.4em; }
.facts { list-style: none; padding: 0; margin: 2.2em 0 0; border-top: 1px solid var(--sunk); }
.facts li { padding: .75em 0; border-bottom: 1px solid var(--sunk); display: grid; grid-template-columns: 9em 1fr; gap: 1em; }
.facts b { font-weight: 450; }
.muted { color: var(--ink-2); }
footer { width: 100%; max-width: 760px; margin: 0 auto; padding: 24px; font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .4em 1.4em; }
footer nav { display: flex; gap: 1.2em; }
.note { font-size: 13.5px; margin-top: 2.4em; }
/* legal pages */
.legal h1 { font-size: clamp(30px, 6vw, 44px); }
.legal h2 { font-weight: 450; font-size: 20px; margin: 2em 0 .4em; }
.legal p, .legal li { max-width: 40em; }
.legal .back { display: inline-block; margin-bottom: 2em; font-size: 15px; }
.legal .lockup { width: 120px; margin-bottom: 2em; }
@media (max-width: 520px) { .facts li { grid-template-columns: 1fr; gap: .1em; } }