:root { color-scheme: light; --ink:#17231d; --green:#167257; --mint:#d9f2e8; --paper:#f7f4ec; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 system-ui,sans-serif; }
header,main,footer { width:min(920px,calc(100% - 40px)); margin:auto; }
header { padding:34px 0 18px; display:flex; gap:18px; align-items:center; }
.logo { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--green); color:white; font-size:26px; }
nav { margin-left:auto; display:flex; flex-wrap:wrap; gap:14px; }
a { color:var(--green); }
article { background:white; padding:clamp(24px,5vw,54px); border-radius:28px; margin:24px 0; }
h1 { font-size:clamp(2rem,6vw,3.2rem); line-height:1.08; }
h2 { margin-top:2em; }
.notice { background:#fff1cf; border-left:5px solid #a05a00; padding:14px 18px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.button { display:inline-block; padding:12px 18px; border-radius:999px; background:var(--green); color:white; text-decoration:none; font-weight:700; }
footer { padding:20px 0 50px; font-size:.9rem; }
@media(max-width:680px){ header{align-items:flex-start}.brand{display:none} nav{margin-left:0} }