@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&display=swap");
:root{--wall:#EAF0EC;--paper:#FFFFFF;--ink:#17302A;--ink-soft:#4A615A;--pine:#2F6F5E;--line:#C9D6CF;--signal:#F2B544;--gutter:clamp(16px,5vw,56px)}
*{box-sizing:border-box}
body{margin:0;background:var(--wall);color:var(--ink);font-family:"Atkinson Hyperlegible",system-ui,sans-serif;font-size:17px;line-height:1.65}
a{color:var(--pine)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:6px}
.wrap{max-width:760px;margin:0 auto;padding-inline:var(--gutter)}
.top{display:flex;justify-content:space-between;align-items:center;padding-block:20px;font-size:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:22px;text-decoration:none;color:var(--ink)}
.lamp{width:12px;height:12px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(242,181,68,.25)}
.doc{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding-block:clamp(28px,5vw,48px);margin-block:12px 32px}
h1,h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.02em;line-height:1.1}
h1{font-size:clamp(34px,6vw,48px);margin:0}
h2{font-size:22px;margin:36px 0 8px}
.meta{color:var(--ink-soft);margin:8px 0 24px}
ul{padding-left:22px}
li{margin:6px 0}
.foot{display:flex;flex-wrap:wrap;gap:20px;padding-block:0 40px;font-size:15px}
.foot a{color:var(--ink-soft)}
@media (max-width:800px){.doc{margin-inline:12px;padding-inline:20px}}