/* Reef legal / reading surfaces — Paper mode, tokens from docs/architecture/DESIGN.md */
:root {
  --paper: #FAF9F5;
  --paper-soft: #F2EFE9;
  --paper-hairline: #E3DED4;
  --ink: #141413;
  --body: #3D3D3A;
  --muted: #6C6A64;
  --coral: #D97857;
  --link: #0B7285;
  --serif: "New York", ui-serif, "Fraunces", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font: 16px/1.65 var(--sans); color: var(--body); background: var(--paper); -webkit-font-smoothing: antialiased; }
main { max-width: 720px; margin: 0 auto; padding: 48px 24px 96px; }
header.site { display: flex; align-items: baseline; gap: 16px; margin-bottom: 48px; }
header.site a.brand { font: 400 21px/1 var(--serif); color: var(--ink); text-decoration: none; letter-spacing: -0.2px; }
header.site nav { margin-left: auto; display: flex; gap: 20px; }
header.site nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
header.site nav a:hover { color: var(--ink); }
h1 { font: 400 40px/1.1 var(--serif); letter-spacing: -0.8px; color: var(--ink); margin-bottom: 12px; }
h2 { font: 400 24px/1.2 var(--serif); letter-spacing: -0.2px; color: var(--ink); margin: 36px 0 10px; }
p, ul, ol { margin-bottom: 14px; color: var(--body); }
ul, ol { padding-left: 24px; }
li { margin-bottom: 6px; }
strong { color: var(--ink); }
a { color: var(--link); }
.muted { color: var(--muted); }
.hero { padding: 48px 0 24px; }
.hero h1 { font-size: 44px; margin-bottom: 16px; }
.hero p.tag { font-size: 20px; color: var(--muted); max-width: 560px; }
footer { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--paper-hairline); font-size: 14px; color: var(--muted); }
footer a { color: var(--muted); }
.badge { display: inline-block; font-size: 13px; color: var(--muted); border: 1px solid var(--paper-hairline); border-radius: 9999px; padding: 3px 12px; margin-bottom: 20px; }