* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--body); background: var(--paper); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
::selection { background: rgba(216, 197, 154, .6); color: var(--navy-deep); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Serif headings set like the app's: regular weight, gentle negative tracking. */
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--serif); font-weight: 400; line-height: 1.14; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 4.6vw, 4.6rem); letter-spacing: -.022em; line-height: 1.07; }
h2 { font-size: clamp(1.9rem, 2.7vw, 2.75rem); letter-spacing: -.018em; }
h3 { font-size: 1.45rem; letter-spacing: -.01em; }
p { margin: 0; }
strong, b { font-weight: 700; }

.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: 16px; z-index: 1000; transform: translateY(-150%); background: var(--paper); color: var(--navy); padding: 10px 14px; border-radius: 6px; box-shadow: var(--shadow-soft); }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 640px) { .shell { width: min(calc(100% - 32px), var(--shell)); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }