:root{--navy-950:#060D1F;--navy-900:#0A1530;--gold:#D9A93B;--gold-soft:#E9C979;--ivory:#F6F0E3;--ink:#14203F;--inkm:rgba(20,32,63,.78);--brown:#8A6516;
--tri:linear-gradient(90deg,#FF9933 0 33.3%,#F6F0E3 33.3% 66.6%,#3DAA55 66.6% 100%);--gutter:clamp(16px,5vw,88px);
--f-display:"DM Serif Display",Georgia,serif;--f-body:"Manrope","Segoe UI",system-ui,sans-serif;--f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box}html{scroll-padding-top:96px}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--brown)}:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.top{position:sticky;top:0;z-index:5;background:rgba(6,13,31,.95);backdrop-filter:blur(8px);padding:14px var(--gutter)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tri)}
.top .in{max-width:1160px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand svg{width:42px;height:42px;flex:none}
.bt{display:flex;flex-direction:column;gap:3px;line-height:1}
.b1{font-family:var(--f-display);font-size:18px;letter-spacing:.07em;text-transform:uppercase;color:var(--ivory);white-space:nowrap}
.b2{font-family:var(--f-display);font-size:11.3px;letter-spacing:.215em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.back{font-weight:600;font-size:14px;text-decoration:none;color:var(--ivory);border:1px solid rgba(217,169,59,.4);border-radius:999px;padding:9px 16px;white-space:nowrap}
.back:hover{border-color:var(--gold)}
.hero{background:linear-gradient(180deg,var(--navy-900),var(--navy-950));color:var(--ivory);padding:72px var(--gutter) 56px}
.hero .in,main .in{max-width:1160px;margin:auto}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:32px;height:1px;background:currentColor}
h1,h2{font-family:var(--f-display);font-weight:400;text-wrap:balance}
h1{font-size:clamp(2.3rem,4.4vw,3.6rem);line-height:1.05;margin:14px 0 10px}
.meta{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:rgba(246,240,227,.6);margin:0}
main{padding:56px var(--gutter) 88px}
.grid{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:56px;align-items:start}
.toc{position:sticky;top:100px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;border-left:2px solid rgba(20,32,63,.12);padding-left:16px}
.toc b{font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brown);margin-bottom:4px}
.toc a{text-decoration:none;color:var(--inkm)}.toc a:hover{color:var(--brown)}
article{max-width:46rem}
article h2{font-size:1.65rem;line-height:1.2;margin:44px 0 10px;color:var(--ink)}
article h2:first-child{margin-top:0}
article p,article li{color:var(--inkm)}
article ul{padding-left:1.2em}article li{margin-bottom:6px}
.note{background:#FFFCF5;border:1px solid rgba(20,32,63,.12);border-left:3px solid var(--gold);border-radius:6px;padding:16px 20px;margin:20px 0}
.card{background:#FFFCF5;border:1px solid rgba(20,32,63,.12);border-radius:8px;padding:20px 22px;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tri)}
.card p{margin:4px 0}
footer{background:var(--navy-950);color:rgba(246,240,227,.6);padding:28px var(--gutter);font-size:13px;position:relative}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tri)}
footer .in{max-width:1160px;margin:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}footer a{color:rgba(246,240,227,.8);text-decoration:none}footer a:hover{color:var(--gold-soft)}
@media (max-width:860px){.grid{grid-template-columns:minmax(0,1fr);gap:28px}.toc{position:static}}
@media (max-width:440px){.brand svg{width:34px;height:34px}.b1{font-size:14px}.b2{font-size:8.8px}.back{padding:8px 12px;font-size:13px}}