:root{
  --navy:#091622;--navy2:#0D2030;--card:#102536;
  --gold:#C9A35A;--gold2:#E2C281;
  --text:#EDF1F5;--muted:rgba(237,241,245,.62);--faint:rgba(237,241,245,.36);
  --line:rgba(255,255,255,.09);--gline:rgba(201,163,90,.22);
  --maxw:1200px;--read:720px;--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--navy);color:var(--text);font-family:"Archivo",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.65}
img{max-width:100%;display:block}
a{color:var(--gold2);text-decoration:none}
a:hover{text-decoration:underline}
.serif{font-family:"Playfair Display",Georgia,serif;font-style:italic}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.read{max-width:var(--read);margin:0 auto;padding:0 24px}

/* ambient depth */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 85% 4%,rgba(201,163,90,.08),transparent 60%),radial-gradient(50% 40% at 8% 100%,rgba(60,110,160,.07),transparent 60%)}
.site, footer{position:relative;z-index:1}

/* header */
.nav{border-bottom:1px solid var(--line);background:rgba(9,22,34,.85);backdrop-filter:saturate(140%) blur(8px);position:sticky;top:0;z-index:10}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.14em;font-size:15px;color:var(--text)}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px 2px rgba(201,163,90,.5)}
.brand small{display:block;font-weight:500;letter-spacing:.18em;font-size:9px;color:var(--gold2);margin-top:2px}
.nav-cta{font-size:13px;font-weight:600;color:#1c1407;background:var(--gold);padding:9px 16px;border-radius:8px}
.nav-cta:hover{background:var(--gold2);text-decoration:none}

/* hero of index */
.lc-hero{padding:84px 0 40px;text-align:center}
.lbl{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);font-weight:600}
.lc-hero h1{font-size:clamp(34px,5vw,56px);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:18px 0 0}
.lc-hero h1 .serif{display:block;font-weight:600;color:var(--gold2);font-size:.82em}
.lc-hero p{color:var(--muted);max-width:62ch;margin:22px auto 0;font-size:17px}

/* category sections + cards */
.cat{padding:46px 0 8px}
.cat h2{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);font-weight:700;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:26px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.acard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;transition:transform .35s var(--ease),border-color .35s,box-shadow .35s}
.acard:hover{transform:translateY(-4px);border-color:var(--gline);box-shadow:0 24px 50px -30px rgba(0,0,0,.7);text-decoration:none}
.acard .k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.acard h3{font-size:18px;font-weight:700;margin:10px 0 8px;color:var(--text);line-height:1.25}
.acard p{color:var(--muted);font-size:14px;line-height:1.55;flex:1}
.acard .more{color:var(--gold2);font-size:13px;font-weight:600;margin-top:14px}

/* article page */
.crumb{padding:26px 0 0;font-size:12px;color:var(--faint);letter-spacing:.04em}
.crumb a{color:var(--muted)}
article{padding:14px 0 40px}
article header{padding:18px 0 8px;border-bottom:1px solid var(--line);margin-bottom:32px}
article .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
article h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:16px 0 14px}
article .sub{color:var(--muted);font-size:18px;margin-bottom:16px}
article .meta{font-size:13px;color:var(--faint);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.prose{font-size:17px;color:#dfe6ee}
.prose h2{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:42px 0 14px;color:var(--text)}
.prose h3{font-size:20px;font-weight:700;margin:30px 0 10px;color:var(--gold2)}
.prose p{margin:0 0 18px;line-height:1.75}
.prose ul,.prose ol{margin:0 0 18px 22px;line-height:1.75}
.prose li{margin:0 0 8px}
.prose strong{color:#fff;font-weight:700}
.prose a{text-decoration:underline}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.prose blockquote{border-left:3px solid var(--gold);padding:4px 0 4px 18px;margin:0 0 18px;color:var(--muted);font-style:italic}
.tags{margin:34px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:11px;letter-spacing:.06em;color:var(--gold2);border:1px solid var(--gline);border-radius:99px;padding:5px 12px}

/* related + cta */
.related{border-top:1px solid var(--line);margin-top:46px;padding-top:30px}
.related h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.cta{margin-top:40px;background:rgba(201,163,90,.07);border:1px solid var(--gline);border-radius:14px;padding:26px;text-align:center}
.cta p{color:var(--muted);margin-bottom:14px}
.btn-g{display:inline-block;background:var(--gold);color:#1c1407;font-weight:600;font-size:14px;padding:12px 22px;border-radius:9px}
.btn-g:hover{background:var(--gold2);text-decoration:none}

footer{border-top:1px solid var(--line);margin-top:60px;padding:40px 0;color:var(--faint);font-size:13px;text-align:center}
footer a{color:var(--muted)}