:root {
  --ink:#0f172a;--text:#2d3748;--muted:#64748b;--light:#94a3b8;
  --paper:#FAF8F4;--tint:#f6f3ec;--warm:#ede9e1;--rule:#e8e4d8;
  --gold:#B8860B;--gold-l:#FAF6E8;--orange:#E8640A;--navy:#1E3264;
  --fh:'Instrument Serif',Georgia,serif;
  --fb:'DM Sans',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--paper);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;font-weight:300}
#prog{position:fixed;top:0;left:0;z-index:999;height:1px;width:0%;background:var(--gold)}

/* NAV */
nav{
    background: #15203b;
}

@media (max-width: 768px){
  nav{
    background: #ffffff;
  }
}

/* BREADCRUMB */
.crumb{max-width:780px;margin:0 auto;padding:140px 32px 0}
.crumb-row{font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.crumb-row a{color:var(--muted);text-decoration:none;transition:color .2s}
.crumb-row a:hover{color:var(--ink)}
.crumb-sep{color:var(--gold);margin:0 10px}
.crumb-cat{color:var(--gold)}

/* ARTICLE HEADER */
.article-header{max-width:780px;margin:0 auto;padding:36px 32px 56px;border-bottom:1px solid var(--rule)}
.art-cat{font-family:var(--fm);font-size:.62rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.art-cat::before{content:'';width:20px;height:1px;background:var(--gold)}
.art-h1{font-family:var(--fh);font-size:clamp(2.4rem,5vw,4rem);font-weight:400;line-height:1.05;letter-spacing:-.022em;color:var(--ink);margin-bottom:24px}
.art-h1 em{font-style:italic;color:var(--gold)}
.art-deck{font-family:var(--fh);font-size:1.25rem;font-style:italic;color:var(--muted);line-height:1.55;margin-bottom:36px}
.art-byline{display:flex;align-items:center;gap:16px;padding-top:24px;border-top:1px solid var(--rule);flex-wrap:wrap}
.byline-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--navy),#0a1530);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid rgba(184,134,11,.4)}
.byline-avatar span{font-family:var(--fh);font-style:italic;color:var(--gold);font-size:1.1rem}
.byline-info{display:flex;flex-direction:column;gap:2px}
.byline-name{font-family:var(--fh);font-size:.95rem;font-style:italic;color:var(--ink)}
.byline-meta{font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.byline-share{margin-left:auto;display:flex;gap:8px}
.share-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .2s}
.share-btn:hover{color:var(--gold);border-color:var(--gold)}

/* ARTICLE BODY */
.article-body{max-width:780px;margin:0 auto;padding:64px 32px 0}
.lead{font-family:var(--fh);font-size:clamp(1.15rem,1.6vw,1.3rem);line-height:1.7;color:var(--text);margin-bottom:32px;font-style:italic}
.lead::first-letter{font-family:var(--fh);font-size:5.5rem;font-weight:400;font-style:normal;color:var(--gold);float:left;line-height:.85;margin:8px 12px 0 0}
.body-p{font-size:1.02rem;color:var(--text);line-height:1.85;font-weight:300;margin-bottom:22px}
.body-p strong{color:var(--ink);font-weight:500}
.body-p em{font-style:italic;color:var(--ink)}
.body-p a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(184,134,11,.4);transition:border-color .2s}
.body-p a:hover{border-color:var(--gold)}

/* H2 in article */
.body-h2{font-family:var(--fh);font-size:clamp(1.6rem,2.5vw,2.1rem);font-weight:400;line-height:1.25;letter-spacing:-.012em;color:var(--ink);margin:56px 0 20px}
.body-h2 em{font-style:italic;color:var(--gold)}
.body-h3{font-family:var(--fh);font-size:1.3rem;font-weight:400;line-height:1.3;color:var(--ink);margin:36px 0 14px;font-style:italic}

/* Body list */
.body-list{margin:24px 0;padding:0;list-style:none}
.body-list li{font-size:1.02rem;color:var(--text);line-height:1.85;font-weight:300;padding:6px 0 6px 28px;position:relative}
.body-list li::before{content:'';position:absolute;left:0;top:18px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.body-list li strong{color:var(--ink);font-weight:500}

/* Pull quote */
.pull-q{margin:48px 0;padding:0 0 0 32px;border-left:1px solid var(--gold)}
.pull-q-text{font-family:var(--fh);font-size:clamp(1.4rem,2.2vw,1.75rem);font-style:italic;color:var(--ink);line-height:1.45;margin-bottom:14px}
.pull-q-attr{font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* Section break */
.section-break{text-align:center;margin:48px 0;font-family:var(--fh);font-style:italic;color:var(--gold);letter-spacing:.5em;font-size:.9rem}

/* Callout */
.callout{margin:40px 0;padding:24px 28px;background:var(--gold-l);border-left:2px solid var(--gold);border-radius:0 8px 8px 0}
.callout-label{font-family:var(--fh);font-style:italic;font-size:.78rem;color:var(--gold);letter-spacing:.04em;margin-bottom:10px}
.callout-text{font-family:var(--fh);font-size:1.05rem;font-style:italic;color:var(--ink);line-height:1.55}

/* Code/inline mono */
.body-p code{font-family:var(--fm);font-size:.88em;background:var(--tint);padding:2px 7px;border-radius:4px;color:var(--ink)}

/* Article footer — author + share */
.article-footer{max-width:780px;margin:80px auto 0;padding:48px 32px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.author-card{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start}
.author-avatar-lg{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--navy),#0a1530);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid rgba(184,134,11,.4)}
.author-avatar-lg span{font-family:var(--fh);font-style:italic;color:var(--gold);font-size:1.6rem}
.author-info{}
.author-label{font-family:var(--fm);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.author-name{font-family:var(--fh);font-size:1.3rem;font-style:italic;color:var(--ink);margin-bottom:8px}
.author-bio{font-size:.92rem;color:var(--muted);line-height:1.7;font-weight:300;margin-bottom:14px}
.author-link{font-family:var(--fb);font-size:.78rem;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:2px;font-weight:500}

/* Related posts */
.related{max-width:1100px;margin:0 auto;padding:80px 32px}
.related-label{font-family:var(--fm);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:32px;display:flex;align-items:center;gap:10px}
.related-label::before{content:'';width:20px;height:1px;background:var(--gold)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.rel-card{display:block;text-decoration:none;color:inherit;padding-top:24px;border-top:2px solid var(--ink);transition:opacity .25s}
.rel-card:hover{opacity:.7}
.rel-card:hover .rel-arrow{transform:translateX(4px);color:var(--gold)}
.rel-cat{font-family:var(--fm);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.rel-h{font-family:var(--fh);font-size:1.2rem;font-weight:400;line-height:1.3;color:var(--ink);margin-bottom:12px;letter-spacing:-.012em}
.rel-h em{font-style:italic;color:var(--gold)}
.rel-arrow{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:transform .25s,color .25s}

/* CTA banner at end */
.cta-banner{max-width:1100px;margin:0 auto 96px;padding:48px;background:var(--ink);border-radius:12px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;color:#fff;position:relative;overflow:hidden}
.cta-banner::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(184,134,11,.15),transparent 65%);pointer-events:none}
.cta-banner-h{font-family:var(--fh);font-size:1.6rem;font-style:italic;color:#fff;line-height:1.3;margin-bottom:8px;position:relative;z-index:2}
.cta-banner-h em{color:var(--gold)}
.cta-banner-deck{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.6;font-weight:300;position:relative;z-index:2}
.cta-banner-btn{font-family:var(--fb);font-size:.82rem;font-weight:500;color:var(--ink);background:var(--gold);text-decoration:none;padding:14px 28px;border-radius:6px;flex-shrink:0;transition:background .2s;position:relative;z-index:2;white-space:nowrap}
.cta-banner-btn:hover{background:#9A7209}

@media(max-width:900px){
  nav{padding:18px 32px}
  .nav-links{display:none}.hbg{display:flex}
  .crumb{padding:120px 24px 0}
  .article-header{padding:32px 24px 48px}
  .article-body{padding:48px 24px 0}
  .article-footer{padding:40px 24px}
  .related{padding:64px 24px}
  .related-grid{grid-template-columns:1fr;gap:32px}
  .cta-banner{margin:0 24px 80px;padding:36px;grid-template-columns:1fr;gap:24px}
  footer{padding:56px 32px 36px}
  .ft-top{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:540px){
  .lead::first-letter{font-size:4rem;margin:6px 8px 0 0}
  .author-card{grid-template-columns:1fr;gap:16px}
  footer{padding:48px 24px 32px}
  .ft-top{grid-template-columns:1fr;gap:28px}
  .ft-bot{flex-direction:column;align-items:flex-start}
}