:root{
  --navy-900:#0E1B30; --navy-800:#12233F; --navy-700:#1F3864;
  --navy-500:#2E5E8C; --blue-400:#4F86C6; --blue-300:#8BB8E8;
  --paper:#F4F7FB; --paper-2:#E9F0F8; --ink:#16233b; --ink-soft:#48566d;
  --line:#d3deec; --white:#fff; --maxw:1120px; --readw:720px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--navy-500)}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.readwrap{max-width:var(--readw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--navy-500)}
h1,h2,h3{font-family:"Archivo",sans-serif;line-height:1.12;letter-spacing:-.01em;color:var(--navy-700)}

/* topbar (matches main site) */
.topbar{position:sticky;top:0;z-index:50;background:rgba(14,27,48,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(139,184,232,.18)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;font-family:"Archivo";font-weight:700;font-size:1.02rem;text-decoration:none}
.brand svg{width:26px;height:30px;flex:none}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-link{color:#c4d5ec;text-decoration:none;font-size:.92rem;font-weight:500}
.nav-link:hover{color:#fff}
.nav-cta{font-family:"Inter";font-weight:600;font-size:.9rem;color:var(--navy-900);background:var(--blue-300);padding:9px 18px;border-radius:8px;text-decoration:none;transition:transform .15s ease,background .15s ease}
.nav-cta:hover{background:#a7cbf0;transform:translateY(-1px)}

/* article header — quiet, book-title feel */
.art-head{background:var(--paper);color:var(--ink);padding:72px 0 8px;text-align:center;border-bottom:none}
.art-head .eyebrow{color:var(--navy-500);opacity:.85}
.art-head h1{font-family:"Source Serif 4",Georgia,serif;color:var(--navy-900);font-size:clamp(2rem,4vw,2.85rem);font-weight:600;letter-spacing:-.01em;line-height:1.16;margin:18px auto 20px;max-width:660px}
.art-meta{font-family:"IBM Plex Mono";font-size:.76rem;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase}
.art-dek{font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-size:1.24rem;color:var(--ink-soft);margin:22px auto 0;max-width:560px;line-height:1.5}
.art-rule{width:56px;height:2px;background:var(--blue-400);margin:34px auto 0;opacity:.7}

/* article body — published book feel */
article.post{padding:44px 0 40px;background:var(--paper)}
article.post .readwrap{max-width:640px}
article.post p{font-family:"Source Serif 4",Georgia,serif;font-size:1.19rem;line-height:1.75;color:#26313f;margin:0 0 1.4em}
article.post p + p{text-indent:0}
article.post .lead{font-size:1.28rem;line-height:1.66;color:#1c2733}
article.post .lead::first-letter{float:left;font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:3.9rem;line-height:.82;padding:.06em .09em 0 0;color:var(--navy-700)}
article.post h2{font-family:"Source Serif 4",Georgia,serif;font-size:1.55rem;font-weight:600;color:var(--navy-800);margin:2em 0 .55em;letter-spacing:-.005em}
article.post h3{font-family:"Source Serif 4",Georgia,serif;font-size:1.24rem;font-weight:600;font-style:italic;color:var(--navy-700);margin:1.6em 0 .5em}
article.post ul,article.post ol{margin:0 0 1.4em 1.4em}
article.post li{font-family:"Source Serif 4",Georgia,serif;font-size:1.19rem;line-height:1.7;color:#26313f;margin:.5em 0}
article.post .lead{font-weight:400}
article.post blockquote{font-family:"Source Serif 4",Georgia,serif;font-style:italic;border-left:3px solid var(--blue-400);background:none;padding:6px 0 6px 26px;margin:1.8em 0;font-size:1.3rem;line-height:1.55;color:var(--navy-700)}
.code-inline{font-family:"IBM Plex Mono";font-size:.86em;background:var(--paper-2);border:1px solid var(--line);padding:2px 6px;border-radius:5px;color:var(--navy-500);white-space:nowrap}
.divider{height:1px;background:var(--line);margin:40px 0}

/* CTA block — quiet end-of-essay note */
.cta-band{background:var(--paper-2);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:32px 30px;margin:52px 0 20px;text-align:center}
.cta-band h3{font-family:"Source Serif 4",Georgia,serif;color:var(--navy-800);font-size:1.35rem;font-weight:600;margin-bottom:12px}
.cta-band p{font-family:"Source Serif 4",Georgia,serif;color:var(--ink-soft);font-size:1.08rem;line-height:1.6;margin-bottom:22px;max-width:480px;margin-left:auto;margin-right:auto}
.btn-primary{font-family:"Inter";font-weight:600;font-size:1rem;background:var(--blue-300);color:var(--navy-900);padding:14px 30px;border-radius:10px;text-decoration:none;display:inline-flex;align-items:center;gap:9px;transition:transform .15s ease,background .15s ease}
.btn-primary:hover{background:#a7cbf0;transform:translateY(-2px)}

/* related / back */
.post-foot{border-top:1px solid var(--line);margin-top:20px;padding-top:30px}
.back-link{font-family:"IBM Plex Mono";font-size:.85rem;color:var(--navy-500);text-decoration:none}
.back-link:hover{text-decoration:underline}

/* blog index */
.idx-head{background:linear-gradient(150deg,#12233F,#1F3864 60%,#0E1B30);color:#fff;padding:76px 0 62px}
.idx-head .eyebrow{color:var(--blue-300)}
.idx-head h1{color:#fff;font-size:clamp(2.2rem,4.4vw,3.2rem);font-weight:900;margin:16px 0 14px}
.idx-head p{font-size:1.15rem;color:#c4d5ec;max-width:600px}
.cards{display:grid;grid-template-columns:1fr;gap:24px;padding:56px 0}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 28px;box-shadow:0 10px 30px rgba(31,56,100,.06);transition:transform .15s ease,box-shadow .15s ease;text-decoration:none;color:inherit;display:block}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(31,56,100,.12)}
.card .tag{font-family:"IBM Plex Mono";font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy-500)}
.card h2{font-size:1.4rem;font-weight:800;margin:10px 0 10px}
.card p{color:var(--ink-soft);font-size:1rem;margin-bottom:14px}
.card .rd{font-family:"IBM Plex Mono";font-size:.8rem;color:var(--navy-500);font-weight:600}

/* footer */
footer{background:var(--navy-900);color:#8fa2bd;padding:44px 0;border-top:1px solid rgba(139,184,232,.14);margin-top:20px}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center}
.foot-brand{display:flex;align-items:center;gap:10px;color:#fff;font-family:"Archivo";font-weight:700}
.foot-brand svg{width:22px;height:26px}
footer a{color:var(--blue-300);text-decoration:none}
footer a:hover{text-decoration:underline}
.foot-links{font-size:.9rem}

@media(min-width:820px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .art-head,.idx-head{padding:52px 0 44px} article.post{padding:40px 0 30px} }
:focus-visible{outline:3px solid var(--blue-300);outline-offset:3px;border-radius:6px}