@font-face { font-family: 'Hanken Grotesk'; font-weight: 400; font-display: swap; src: url(/hanken-grotesk-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 800; font-display: swap; src: url(/hanken-grotesk-latin-800-normal.woff2) format('woff2'); }
:root { --bg: #f5f0e6; --surface: #dcc9a5; --yellow: #d9b65d; --ink: #40362f; --soft: #6e4f39; --r: clamp(16px, 1.6vw, 28px); }
* { box-sizing: border-box; margin: 0; }
html { background: var(--bg); color: var(--ink); font-family: 'Hanken Grotesk', system-ui, sans-serif; }
body { padding: 24px 16px 56px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
a { color: inherit; text-underline-offset: 3px; }
.back { display: inline-block; font-weight: 800; margin-bottom: 24px; }
article { max-width: 68ch; margin-inline: auto; background: #fff; border-radius: var(--r); padding: clamp(24px, 5vw, 56px) clamp(18px, 4vw, 48px); }
h1 { font-weight: 800; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: 8px; }
h2 { font-weight: 800; font-size: 1.25rem; margin-top: 32px; }
p { line-height: 1.6; margin-top: 10px; }
nav { max-width: 68ch; margin-inline: auto; }