:root{
  --ink:#0e1b2a;--ink-soft:#1c3047;--paper:#fbfaf7;--paper-2:#f3f0ea;
  --gold:#b08d3f;--gold-soft:#cbb074;--line:#dfd9cd;--grey:#566273;--white:#fff;--maxw:1180px;
}
*{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.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Source Serif 4',Georgia,serif;font-weight:500;line-height:1.14;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:'Inter';font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:12px 24px;border-radius:2px;font-size:.86rem;font-weight:600;border:1px solid var(--ink);transition:.2s;letter-spacing:.02em}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-soft);border-color:var(--gold-soft)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(251,250,247,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand{display:flex;flex-direction:column;line-height:1.05}
.brand .name{font-family:'Source Serif 4';font-size:1.18rem;font-weight:600}
.brand .role{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:3px}
.menu{display:flex;gap:30px;align-items:center}
.menu a{font-size:.87rem;color:var(--ink-soft);font-weight:500;transition:color .2s}
.menu a:hover{color:var(--gold)}
.menu .btn{padding:10px 20px;background:var(--gold);border-color:var(--gold);color:var(--ink)}
.menu .btn:hover{background:var(--gold-soft);border-color:var(--gold-soft);color:var(--ink)}
.hamburger{display:none;background:none;border:0;cursor:pointer;width:34px;height:34px;flex-direction:column;justify-content:center;gap:6px}
.hamburger span{height:2px;background:var(--ink);width:26px;transition:.3s}

/* page hero band (interior pages) */
.page-hero{background:var(--ink);color:var(--paper);padding:60px 0 54px}
.crumbs{font-size:.8rem;color:#9fb0c2;margin-bottom:18px}
.crumbs a:hover{color:var(--gold-soft)}
.page-hero h1{font-size:clamp(2rem,4.2vw,3.05rem);color:var(--paper);max-width:22ch;margin-top:14px}
.page-hero p{margin-top:18px;color:#c8d2de;font-size:1.1rem;max-width:56ch}

/* article layout */
.layout{display:grid;grid-template-columns:1fr 290px;gap:56px;padding:64px 0}
article h2{font-size:1.65rem;margin:40px 0 14px}
article h2:first-child{margin-top:0}
article h3{font-size:1.16rem;margin:26px 0 10px}
article p{margin-bottom:16px;color:var(--ink-soft);font-size:1.04rem}
article ul{margin:0 0 18px 0;padding-left:0;list-style:none}
article ul li{position:relative;padding:7px 0 7px 24px;color:var(--ink-soft);font-size:1.01rem}
article ul li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;background:var(--gold);border-radius:50%}
article ol{margin:0 0 18px 22px}
article ol li{padding:6px 0;color:var(--ink-soft);font-size:1.01rem}
article a{color:var(--gold);font-weight:500}
article a:hover{text-decoration:underline}
.callout{background:var(--white);border:1px solid var(--line);border-left:3px solid var(--gold);padding:22px 26px;border-radius:2px;margin:28px 0}
.callout .lab{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:8px}
.callout p{margin:0;font-size:1rem}
.refs{font-size:.85rem;color:var(--grey);border-top:1px solid var(--line);margin-top:40px;padding-top:20px}
.refs p{font-size:.85rem;color:var(--grey);margin-bottom:8px}
.figure{margin:28px 0}
.figure img{border-radius:3px}
.figure figcaption{font-size:.82rem;color:var(--grey);margin-top:10px}

/* sidebar */
.side{align-self:start;position:sticky;top:100px}
.side-card{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:26px;margin-bottom:22px}
.side-card h4{font-size:1.02rem;margin-bottom:14px}
.side-card p{font-size:.9rem;color:var(--grey)}
.toc a{display:block;font-size:.9rem;color:var(--ink-soft);padding:7px 0;border-bottom:1px solid var(--line)}
.toc a:last-child{border-bottom:0}
.toc a:hover{color:var(--gold)}
.side-cta{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.side-cta h4{color:var(--paper)}
.side-cta p{font-size:.9rem;color:#c8d2de;margin-bottom:16px}
.side-cta .btn{width:100%;text-align:center;background:var(--gold);border-color:var(--gold);color:var(--ink)}

/* related cards */
.related{background:var(--paper-2);padding:60px 0}
.related h2{font-size:1.6rem;margin-bottom:24px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:24px;transition:.2s;display:block}
.rel:hover{border-color:var(--gold)}
.rel h3{font-size:1.06rem;margin-bottom:6px}
.rel p{font-size:.9rem;color:var(--grey)}
.rel .go{font-size:.8rem;color:var(--gold);font-weight:600;margin-top:12px;display:inline-block}

/* footer */
footer{background:var(--ink);color:#b9c5d3;padding:56px 0 32px;font-size:.88rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:36px}
footer h4{color:var(--paper);font-size:1rem;margin-bottom:16px;font-family:'Source Serif 4'}
.foot-links{display:flex;flex-direction:column;gap:9px}
footer a:hover{color:var(--gold-soft)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.78rem;color:#7f8fa0}
.disc{max-width:62ch;color:#8294a6}

/* responsive */
@media(max-width:900px){
  .layout{grid-template-columns:1fr;gap:36px}
  .side{position:static}
  .rel-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .menu{position:fixed;inset:76px 0 auto 0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 24px;border-bottom:1px solid var(--line);transform:translateY(-120%);transition:transform .35s;box-shadow:0 20px 40px rgba(14,27,42,.08)}
  .menu.open{transform:none}
  .menu a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .menu .btn{margin-top:14px;text-align:center}
  .hamburger{display:flex}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}