:root{--ink:#203532;--muted:#5b6d66;--paper:#f6f3ea;--line:#cdd5c9;--accent:#a94526}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.7 system-ui,-apple-system,sans-serif}
a{color:inherit;text-underline-offset:4px}a:hover{color:var(--accent)}a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
.wrap{max-width:1120px;padding:0 32px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:26px 0;border-bottom:1px solid var(--line);gap:24px}
.brand{font-size:22px;letter-spacing:-1px;font-weight:750;text-decoration:none}.brand span{color:var(--accent)}nav{display:flex;gap:28px;font-size:14px}
.hero{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:48px;padding:72px 0 60px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:700;text-transform:uppercase;color:var(--muted)}
h1{font-size:clamp(38px,5.2vw,66px);letter-spacing:-2.8px;line-height:1.07;margin:18px 0 24px;font-weight:650}h2{line-height:1.25;font-size:28px;letter-spacing:-.8px}h3{line-height:1.35;font-size:21px}
.intro{font-size:19px;color:var(--muted);max-width:540px}.drawing{background:#dce3d5;padding:22px;border-radius:2px}.drawing svg{display:block;width:100%;height:auto}
.section-label{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding:20px 0}.section-label p{font-size:13px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:0 0 64px}.card{border-bottom:1px solid var(--line);padding:12px 0 28px}.number{color:var(--accent);font-size:13px}.card p{color:var(--muted);font-size:15px}.card a{font-size:14px}
.article{max-width:720px;margin:60px auto 80px}.article h1{font-size:clamp(36px,5vw,54px)}.article h2{margin-top:40px}.article li{padding-left:6px;margin:10px 0}.note{border-left:3px solid var(--accent);padding:14px 22px;background:#eeeadf}.back{font-size:14px;color:var(--muted)}
footer{display:flex;justify-content:space-between;gap:24px;padding:24px 0 36px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}footer .links{display:flex;gap:20px}
@media(max-width:720px){.wrap{padding:0 22px}.hero{grid-template-columns:1fr;gap:26px;padding:40px 0}.hero h1{letter-spacing:-1.7px}.drawing{max-width:460px}.cards{grid-template-columns:1fr;gap:0}.section-label{display:block}.section-label p{margin:0}.article{margin:36px auto 56px}header{padding:22px 0}nav{gap:14px}footer{flex-direction:column;gap:10px}}