:root{
 --ink:#1D1C1A; --body:#3F3B33; --muted:#6F6A62; --accent:#A65E45; --accent-soft:#C87A5E;
 --rule:#E4DED2; --line:#D7CFBE; --page:#FBF9F5; --surface:#FFFFFF; --warm:#F0E9DC;
 --zebra:#FAF8F4; --code:#F2F1EE; --draft:#B8791F; --active:#2E7D52;
 --danger:#A83A1B; --danger-bg:#FAEBE6; --warn:#8A6B22; --warn-bg:#FBF3E2;
 --info:#4F6B4A; --info-bg:#EEF2ED; --live:#5A564E; --live-bg:#F2F1EE;
 --sans:'Source Sans 3','Source Sans Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --mono:'SFMono-Regular',Menlo,Consolas,'Roboto Mono',monospace;
 --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
}
@media (prefers-color-scheme:dark){:root{
 --ink:#F3EFE8; --body:#D5CFC4; --muted:#9A9287; --accent:#D18A6E; --accent-soft:#E0A184;
 --rule:#3A362F; --line:#46413A; --page:#1A1815; --surface:#211F1B; --warm:#2C2721;
 --zebra:#232019; --code:#2A2721; --draft:#D9A24E; --active:#6FBF8F;
 --danger:#E28468; --danger-bg:#2E1F1A; --warn:#D7B15E; --warn-bg:#2B2517;
 --info:#8FB388; --info-bg:#1E2620; --live:#A9A296; --live-bg:#26231E;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--page);color:var(--body);
 font-family:var(--sans);font-size:17px;line-height:1.6;
 -webkit-font-smoothing:antialiased;display:grid;
 grid-template-columns:270px minmax(0,1fr) 220px;align-items:start}

/* ---- left nav ---- */
.nav{position:sticky;top:0;height:100vh;overflow-y:auto;padding:34px 22px 40px;
 border-right:1px solid var(--rule);background:var(--surface)}
.nav__brand{display:block;font-family:var(--serif);font-size:24px;line-height:1.15;
 color:var(--ink);text-decoration:none;margin-bottom:26px;letter-spacing:.01em}
.nav__group{margin:22px 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--muted);font-weight:600}
.nav ul{list-style:none;margin:0;padding:0}
.nav li{margin:0}
.nav a{display:block;padding:5px 10px;margin-left:-10px;border-radius:6px;
 color:var(--body);text-decoration:none;font-size:14.5px;line-height:1.35}
.nav a:hover{background:var(--warm);color:var(--ink)}
.nav a.on{background:var(--warm);color:var(--accent);font-weight:600}

/* ---- page ---- */
main{padding:56px 60px 96px;max-width:820px}
.head{margin-bottom:34px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.kicker{margin:0 0 6px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5vw,54px);line-height:1.04;
 letter-spacing:-.015em;color:var(--ink);margin:0}
.lede{font-size:19px;line-height:1.5;color:var(--muted);margin:12px 0 0;max-width:60ch}
section{margin:0 0 40px}
h2{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.15;color:var(--accent);
 margin:44px 0 12px;letter-spacing:-.005em}
section:first-of-type h2{margin-top:0}
h3{font-size:16px;font-weight:700;color:var(--ink);margin:26px 0 8px;
 letter-spacing:.01em}
p{margin:0 0 14px;max-width:68ch}
ul,ol{margin:0 0 16px;padding-left:22px;max-width:68ch}
li{margin-bottom:6px}
b,strong{color:var(--ink);font-weight:650}
.aside{color:var(--muted);font-size:16px}
a{color:var(--accent)}

/* ---- inline bits ---- */
.m,.path{font-family:var(--mono);font-size:.86em;background:var(--code);color:var(--ink);
 padding:2px 7px;border-radius:4px;border:1px solid var(--rule);white-space:nowrap}
.sd{color:var(--draft)}
.sa{color:var(--active)}
.sr{color:var(--warn)}

/* ---- tables ---- */
.scroll{overflow-x:auto;margin:0 0 22px;border:1px solid var(--rule);border-radius:8px;
 background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15px}
thead th{position:sticky;top:0;background:var(--warm);color:var(--ink);text-align:left;
 font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
 padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
tbody tr:nth-child(even) td{background:var(--zebra)}
tbody tr:last-child td{border-bottom:none}

/* ---- callouts ---- */
.note{margin:0 0 22px;padding:15px 20px;border-left:4px solid;border-radius:0 8px 8px 0;max-width:68ch}
.note p{margin:4px 0 0;font-size:16px}
.note__label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em}
.note__title{display:block;color:var(--ink);margin-top:3px;font-size:16.5px}
.note--danger{border-color:var(--danger);background:var(--danger-bg)}
.note--danger .note__label{color:var(--danger)}
.note--warn{border-color:var(--warn);background:var(--warn-bg)}
.note--warn .note__label{color:var(--warn)}
.note--info{border-color:var(--info);background:var(--info-bg)}
.note--info .note__label{color:var(--info)}
.note--live{border-color:var(--live);background:var(--live-bg)}
.note--live .note__label{color:var(--live)}

/* ---- steps ---- */
.steps{list-style:none;margin:0 0 24px;padding:0;counter-reset:s}
.steps>li{counter-increment:s;position:relative;padding:0 0 20px 44px;margin:0}
.steps>li::before{content:counter(s);position:absolute;left:0;top:-1px;
 width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
 font-family:var(--mono);font-size:13px;font-weight:700;
 color:var(--accent);background:var(--warm);border:1px solid var(--line)}
.steps>li::after{content:'';position:absolute;left:13.5px;top:32px;bottom:2px;
 width:1px;background:var(--line)}
.steps>li:last-child::after{display:none}
.step__title{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}
.steps .path{display:inline-block;margin-bottom:8px;white-space:normal}
.steps p{margin:0 0 6px;font-size:16px}
.check{color:var(--active);font-size:15px}
.check::before{content:'✓ ';font-weight:700}

/* ---- figures ---- */
figure{margin:0 0 24px}
figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:8px;
 background:var(--surface)}
figcaption{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.45}
.missing{color:var(--danger);font-family:var(--mono);font-size:14px}

/* ---- index cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.card{display:block;padding:18px 20px;border:1px solid var(--rule);border-radius:10px;
 background:var(--surface);text-decoration:none;color:var(--body);
 transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--accent-soft);transform:translateY(-2px)}
.card b{display:block;color:var(--ink);font-size:17px;margin-bottom:5px}
.card span{display:block;font-size:14.5px;color:var(--muted);line-height:1.45}
.card--lead{border-left:4px solid var(--accent)}

/* ---- right rail ---- */
.toc{position:sticky;top:0;padding:60px 24px 40px 0;max-height:100vh;overflow-y:auto}
.toc p{margin:0 0 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.toc ul{list-style:none;margin:0;padding:0}
.toc a{display:block;padding:4px 0 4px 12px;border-left:2px solid var(--rule);
 color:var(--muted);text-decoration:none;font-size:13.5px;line-height:1.35}
.toc a:hover{color:var(--ink)}
.toc a.on{border-left-color:var(--accent);color:var(--accent)}

.foot{margin-top:46px;padding-top:20px;border-top:1px solid var(--line);
 font-size:14px;color:var(--muted)}
.menu{display:none}

@media (max-width:1180px){
 body{grid-template-columns:250px minmax(0,1fr)}
 .toc{display:none}
 main{padding:48px 44px 90px}
}
@media (max-width:820px){
 body{display:block}
 .menu{display:block;position:fixed;top:14px;right:14px;z-index:20;
  padding:9px 15px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:600 14px/1 var(--sans);cursor:pointer}
 .nav{position:fixed;inset:0 auto 0 0;width:260px;z-index:19;
  transform:translateX(-100%);transition:transform .2s}
 .nav-open .nav{transform:none;box-shadow:0 0 40px rgba(0,0,0,.22)}
 main{padding:64px 22px 80px;max-width:none}
 h1{font-size:34px}
 h2{font-size:25px}
}
@media print{
 .nav,.toc,.menu{display:none}
 body{display:block;background:#fff}
 main{max-width:none;padding:0}
 .note,figure,.scroll,.steps>li{break-inside:avoid}
}