:root{
  --ground:#F4F6F2; --surface:#FFFFFF; --ink:#16233A; --ink-2:#4B5968; --ink-3:#7A8791;
  --line:#D6DCD2; --line-strong:#B0B9AD;
  --green:#23492D; --green-soft:#E0E9DC; --on-green:#FFFFFF;
  --brass:#AD7A22; --brass-soft:#F2E5CA;
  --slate:#3F5C7C; --gmu:#5E8A94;
  --shadow:0 10px 30px -12px rgba(22,35,58,.28);
  --rail:0px;
  --display:"Zilla Slab", "Rockwell", "Roboto Slab", Georgia, serif;
  --body:"Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0D141C; --surface:#152029; --ink:#E3EAE7; --ink-2:#A2AEB6; --ink-3:#71808A;
    --line:#26333F; --line-strong:#3A4957;
    --green:#8DBB8A; --green-soft:#1C2B1E; --on-green:#0B1318;
    --brass:#DDAA52; --brass-soft:#382C15;
    --slate:#7E9FC3; --gmu:#86B0B8;
    --shadow:0 12px 32px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0D141C; --surface:#152029; --ink:#E3EAE7; --ink-2:#A2AEB6; --ink-3:#71808A;
  --line:#26333F; --line-strong:#3A4957;
  --green:#8DBB8A; --green-soft:#1C2B1E; --on-green:#0B1318;
  --brass:#DDAA52; --brass-soft:#382C15;
  --slate:#7E9FC3; --gmu:#86B0B8;
  --shadow:0 12px 32px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--green)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
h1,h2,h3{font-family:var(--display);line-height:1.1;text-wrap:balance;margin:0}
p{margin:0}
.shell{margin-left:var(--rail)}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* ---------- Section rail (desktop) / drawer (mobile) ---------- */
.rail{position:fixed;z-index:50;font-size:14px}
.rail-mark{font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink);text-decoration:none;letter-spacing:.02em}
.rail-mark span{color:var(--green)}
.rail ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:2px}
.rail li a{position:relative;display:block;padding:6px 0 6px 16px;color:var(--ink-3);text-decoration:none;line-height:1.3;transition:color .2s}
.rail li a::before{content:"";position:absolute;left:0;top:50%;width:6px;height:1.5px;background:var(--line-strong);transition:width .2s,background .2s}
.rail li a:hover{color:var(--ink)}
.rail li a.current{color:var(--ink);font-weight:600}
.rail li a.current::before{width:10px;background:var(--green);height:2.5px;margin-top:-.5px}

@media (min-width:1180px){
  :root{--rail:190px}
  .rail{left:32px;top:50%;transform:translateY(-50%);width:140px;background:transparent}
  .menu-btn,.scrim{display:none}
}
@media (max-width:1179.98px){
  .rail{top:0;bottom:0;left:0;width:min(82vw,300px);background:var(--ground);border-right:1px solid var(--line);
    padding:calc(28px + env(safe-area-inset-top,0px)) 28px 28px;transform:translateX(-100%);visibility:hidden;transition:transform .28s ease,visibility 0s .28s;box-shadow:var(--shadow)}
  .rail.open{transform:none;visibility:visible;transition:transform .28s ease}
  .rail li a{font-size:17px;padding-block:10px}
  .menu-btn{position:fixed;z-index:60;top:calc(12px + env(safe-area-inset-top,0px));right:14px;display:inline-flex;align-items:center;gap:10px;
    font:600 14px/1 var(--body);color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:3px;padding:10px 12px;cursor:pointer}
  .menu-btn .bars{display:grid;gap:4px}
  .menu-btn .bars i{display:block;width:18px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
  .menu-btn[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
  .menu-btn[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .scrim{position:fixed;inset:0;z-index:40;background:rgba(10,16,24,.35)}
}

/* ---------- Section headers ---------- */
.sec-head{border-top:3px solid var(--ink);padding-top:20px;margin-bottom:clamp(28px,4vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 48px;align-items:end}
.sec-head .kicker{grid-column:1/-1;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green);display:flex;align-items:center;gap:10px}
.sec-head .kicker::before{content:"";width:10px;height:10px;background:var(--green)}
.sec-head h2{font-size:clamp(36px,4.6vw,56px);font-weight:700;letter-spacing:-.01em}
.sec-head p{color:var(--ink-2);max-width:48ch;font-size:16px}


.btn{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--body);padding:14px 20px;border-radius:3px;text-decoration:none;border:1.5px solid var(--green);cursor:pointer}
.btn-primary{background:var(--green);color:var(--on-green)}
.btn-ghost{background:transparent;color:var(--green)}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.6;cursor:progress}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--surface);color:var(--ink);padding:8px 12px;border-radius:3px}
.skip:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} }