:root { color-scheme: dark; --ink:#f4f0e6; --muted:#aaa99f; --night:#07150f; --line:#33483d; --sun:#f2a52b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--night); color:var(--ink); font:18px/1.65 Archivo,Arial,sans-serif; }
main { width:min(820px,calc(100% - 40px)); margin:0 auto; padding:48px 0 80px; }
header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:48px; }
header img { width:min(310px,70vw); height:auto; }
a { color:#ffd07a; }
h1,h2 { line-height:1.15; }
h1 { font-size:clamp(2rem,7vw,3.4rem); margin:0 0 12px; }
h2 { margin-top:42px; font-size:1.35rem; }
.meta,.note { color:var(--muted); }
.note { border:1px solid var(--line); border-radius:18px; padding:18px 20px; }
li { margin:.45rem 0; }
footer { border-top:1px solid var(--line); margin-top:52px; padding-top:24px; color:var(--muted); }
@media (max-width:600px) { body{font-size:16px} main{width:min(100% - 28px,820px);padding-top:28px} header{align-items:flex-start;flex-direction:column} }