:root { --teal:#0b4d4a; --teal-mid:#12716c; --gold:#b0892a; --ink:#1c2423; --muted:#5b6866; --line:#d7e0de; --paper:#f6f8f7; --tip:#fff8e8; --tip-border:#d4a84b; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,sans-serif; color:var(--ink); background:var(--paper); line-height:1.55; }
a { color:var(--teal-mid); }
img { max-width:100%; height:auto; display:block; border:1px solid var(--line); }
.topbar { background:var(--teal); color:#fff; padding:14px 28px; display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.topbar .brand { letter-spacing:.12em; font-size:12px; color:#d4c48a; }
.topbar h1 { margin:4px 0 0; font-size:18px; font-weight:600; }
.topbar a { color:#fff; text-decoration:none; font-size:13px; }
.wrap { display:grid; grid-template-columns:270px 1fr; min-height:calc(100vh - 58px); }
nav.side { background:#fff; border-right:1px solid var(--line); padding:20px 14px 40px; position:sticky; top:0; align-self:start; max-height:100vh; overflow:auto; }
nav.side p { margin:16px 8px 6px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
nav.side a { display:block; padding:6px 10px; border-radius:6px; text-decoration:none; color:var(--ink); font-size:13px; }
nav.side a:hover { background:#e7f3f1; }
nav.side a.sub { padding-left:18px; font-size:12px; color:#5b6866; }
main { padding:28px 36px 60px; max-width:980px; }
.kicker { color:var(--gold); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
h2 { margin:0 0 12px; font-size:26px; }
.lead { color:var(--muted); margin:0 0 24px; }
.callout { background:#e7f3f1; border-left:4px solid var(--teal-mid); padding:12px 14px; margin:16px 0 28px; font-size:14px; }
.callout ol { margin:8px 0 0; padding-left:20px; }
h3.section { margin:40px 0 8px; font-size:20px; color:var(--teal); border-bottom:1px solid var(--line); padding-bottom:8px; }
.section-note { color:var(--muted); font-size:14px; margin:0 0 20px; }
.form-block { margin:0 0 40px; scroll-margin-top:20px; padding-bottom:8px; border-bottom:1px dashed #e2ebe9; }
.form-block h4 { margin:0 0 6px; font-size:17px; }
.meta { font-size:12px; color:var(--muted); margin:0 0 10px; word-break:break-all; }
.narration { background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin:0 0 14px; font-size:14px; }
.narration p { margin:0 0 10px; }
.narration p:last-child { margin-bottom:0; }
.narration ul, .narration ol { margin:6px 0 10px; padding-left:20px; }
.narration li { margin:4px 0; }
.narration .before { color:var(--teal); font-weight:600; margin-bottom:8px; }
.tip { background:var(--tip); border-left:3px solid var(--tip-border); padding:8px 12px; margin:10px 0 0; font-size:13px; }
.caption { font-size:13px; color:var(--muted); margin:8px 0 0; }
footer { margin-top:48px; font-size:12px; color:var(--muted); }
@media (max-width: 880px) {
  .wrap { grid-template-columns:1fr; }
  nav.side { position:static; max-height:none; border-right:0; border-bottom:1px solid var(--line); }
}