:root{
  --bg:#fff;--text:#111;--muted:#555;--line:#e9e9e9;--accent:#f2b400;
  --max:1120px;--pad:28px;--side:320px;
  --font:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 var(--font);color:var(--text);background:var(--bg)}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
header{border-bottom:1px solid var(--line);padding:18px 0}
.top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.logo{display:flex;gap:16px;align-items:flex-end}
.logo img{height:64px}
.tagline{font-size:14px;color:var(--muted)}
nav{display:flex;gap:20px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
nav a{text-decoration:none;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--accent);color:var(--text)}
main{padding:36px 0}
.layout{display:grid;grid-template-columns:1fr var(--side);gap:36px}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
aside{position:relative;padding-left:28px}
aside:after{
  content:"";position:absolute;left:-4px;top:0;bottom:0;width:14px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='18'><g stroke='%23f2b400' stroke-width='2'><line x1='3' y1='2' x2='11' y2='10'/><line x1='11' y1='2' x2='3' y2='10'/></g></svg>");
  background-repeat:repeat-y;
}
h1{font-size:clamp(2rem,3vw,2.6rem);margin:0 0 12px}
h2{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.lead{color:var(--muted);max-width:70ch}
.section{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
footer{border-top:1px solid var(--line);padding:18px 0;font-size:13px;color:var(--muted)}
.side-block{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px;font-size:14px}