:root { color-scheme: light dark; --paper:#f5f0e6; --ink:#17372f; --muted:#5f6d67; --accent:#d9754b; --line:#cfc7b6; }
* { box-sizing:border-box; }
body { margin:0; font:17px/1.65 ui-serif, Georgia, serif; background:var(--paper); color:var(--ink); }
main { width:min(760px, calc(100% - 40px)); margin:0 auto; padding:64px 0 96px; }
header { border-bottom:1px solid var(--line); padding-bottom:28px; margin-bottom:36px; }
.mark { font:700 14px/1.2 ui-sans-serif, system-ui; letter-spacing:.13em; text-transform:uppercase; color:var(--accent); }
h1,h2 { font-family:ui-sans-serif, system-ui; line-height:1.15; letter-spacing:-.025em; }
h1 { font-size:clamp(40px,8vw,64px); margin:.3em 0 .15em; }
h2 { font-size:24px; margin-top:2em; }
p,li { max-width:68ch; }
a { color:var(--ink); text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:3px; }
.lede { font-size:21px; color:var(--muted); }
.meta { font:14px/1.5 ui-sans-serif, system-ui; color:var(--muted); }
.card { border:1px solid var(--line); border-radius:14px; padding:22px; margin:28px 0; background:color-mix(in srgb, var(--paper) 88%, white); }
footer { border-top:1px solid var(--line); margin-top:48px; padding-top:24px; font:14px/1.5 ui-sans-serif, system-ui; }
@media (prefers-color-scheme:dark) { :root { --paper:#10231e; --ink:#f5f0e6; --muted:#bdc8c2; --line:#3b5149; --accent:#f09a72; } }