:root { --bg: #fffdf7; --ink: #24211c; --muted: #6b6457; --line: #ebe4d2; --yellow: #f2b705; --link: #24211c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #141310; --ink: #efeae0; --muted: #a39a8a; --line: #34302a; --link: #f2b705; color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #141310; --ink: #efeae0; --muted: #a39a8a; --line: #34302a; --link: #f2b705; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; padding-block: 32px 48px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
main { max-width: 680px; margin: 0 auto; }
.brand { font: 700 22px "Familjen Grotesk", system-ui, sans-serif; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
.brand i { font-style: normal; color: var(--yellow); }
h1 { font: 700 clamp(30px, 6vw, 42px)/1.1 "Familjen Grotesk", system-ui, sans-serif; letter-spacing: -0.03em; margin: 28px 0 6px; border-bottom: 4px solid var(--yellow); padding-bottom: 10px; text-wrap: balance; }
h2 { font: 700 21px "Familjen Grotesk", system-ui, sans-serif; margin: 28px 0 6px; }
.meta { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
a { color: var(--link); }
ul { padding-left: 20px; }
li { margin: 4px 0; }
.foot { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }