:root{
  --ink:#10201c;--ink-soft:#3a4a44;--paper:#f6f4ee;--paper-2:#efece3;
  --line:#d8d3c6;--green:#12433a;--green-deep:#0d322b;
  --gold:#b08a3e;--gold-soft:#c9a95f;--white:#ffffff;--maxw:820px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.68;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:500;line-height:1.15;letter-spacing:-0.01em}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--gold)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.doc{max-width:var(--maxw);margin:0 auto;padding:0 28px}

.topbar{background:var(--green-deep);color:#cdd8d2;font-size:.78rem;letter-spacing:.03em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar a{color:#cdd8d2}.topbar a:hover{color:#fff}
.topbar .r{display:flex;gap:1.6rem}
@media(max-width:720px){.topbar .l{display:none}.topbar .wrap{justify-content:center}}

header{position:sticky;top:0;z-index:50;background:rgba(246,244,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:.75rem}
.mark{width:40px;height:40px;flex:none}
.brand .name{font-family:'Fraunces',serif;font-weight:600;font-size:1.18rem;line-height:1;color:var(--ink)}
.brand .sub{font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}
nav ul{display:flex;gap:1.9rem;list-style:none;font-size:.9rem;font-weight:500}
nav ul a{color:var(--ink-soft)}
nav ul a:hover{color:var(--green)}
@media(max-width:820px){nav ul{display:none}}

.page-hero{background:var(--green-deep);color:#eef3f0;padding:64px 0 56px}
.page-hero .eyebrow{font-weight:600;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft)}
.page-hero h1{color:#fff;font-size:clamp(2.1rem,4vw,3rem);margin:14px 0 10px}
.page-hero p{color:#a9bab3;font-size:.98rem;max-width:60ch}
.page-hero .updated{color:#7f938c;font-size:.82rem;margin-top:14px}

main{padding:60px 0 80px}
.doc h2{font-size:1.4rem;color:var(--green);margin:38px 0 12px}
.doc h3{font-size:1.08rem;color:var(--ink);margin:24px 0 8px;font-family:'Inter',sans-serif;font-weight:700}
.doc p{color:var(--ink-soft);margin-bottom:14px}
.doc ul{margin:0 0 16px 22px;color:var(--ink-soft)}
.doc li{margin-bottom:8px}
.doc .lead{font-size:1.05rem;color:var(--ink)}
.doc strong{color:var(--ink)}
.callout{background:var(--paper-2);border-left:3px solid var(--gold);padding:18px 22px;margin:22px 0;border-radius:2px}
.callout p{margin:0;color:var(--ink-soft);font-size:.95rem}

footer{background:var(--green-deep);color:#9fb2ab;padding:48px 0 26px;margin-top:20px}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-row .name{color:#fff;font-family:'Fraunces',serif;font-size:1.1rem}
.foot-row .sub{font-size:.85rem;margin-top:6px}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;font-size:.86rem}
.foot-links a{color:#9fb2ab}.foot-links a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:20px;font-size:.8rem;color:#7f938c}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}