/* ============================================================
   EBC — Insights / Article page styles
   Shares brand tokens with the main site (navy / gold / paper).
   ============================================================ */

:root { --gold:#C9973A; --gold-light:#E5C68E; --navy:#0D1B2A; --paper:#F5F2EC; --cream:#EDE7DC; }

*, *::before, *::after { box-sizing:border-box; }
*, *::before, *::after { cursor: none; }
*, *::before, *::after { font-family:'Montserrat',sans-serif !important; }
html { scroll-behavior: smooth; }
body {
  margin:0;
  font-family:'Montserrat',sans-serif;
  background:var(--paper);
  color:var(--navy);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
svg text { font-family:'Montserrat',sans-serif !important; }
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
::selection { background: var(--gold); color: var(--navy); }

.display { font-family:'Instrument Serif', Georgia, serif; font-weight:400; letter-spacing:-0.012em; line-height:.96; }
.display em { font-style: italic; }
.mono { font-family:'JetBrains Mono', monospace; }

/* ---- Custom cursor (desktop) ---- */
.cursor-dot { position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%; background:var(--navy); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); mix-blend-mode:difference; }
.cursor-ring { position:fixed; top:0; left:0; width:36px; height:36px; border:1px solid rgba(13,27,42,.4); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition: width .35s cubic-bezier(.2,.7,.2,1), height .35s cubic-bezier(.2,.7,.2,1), background .25s, border-color .25s; }
.cursor-ring.grow { width:80px; height:80px; background:var(--gold); border-color:var(--gold); mix-blend-mode:normal; }
@media (max-width:768px){ .cursor-dot, .cursor-ring { display:none; } *, *::before, *::after { cursor:auto !important; } }

/* ---- Nav (floating pill, matches home) ---- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:40;
  transform:translateY(0);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.nav.nav--hidden { transform:translateY(calc(-100% - 12px)); }
.nav-inner { margin:16px; border-radius:9999px; background:rgba(13,27,42,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.1); }
@media (min-width:1024px){ .nav-inner { margin:20px 24px; } }
.nav-row { display:flex; align-items:center; justify-content:space-between; height:56px; padding:0 20px; }
@media (min-width:1024px){ .nav-row { padding:0 28px; } }
.nav-brand { display:flex; align-items:center; gap:12px; }
.nav-brand svg { height:22px; width:auto; fill:#fff; }
.nav-brand .est { font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.4); }
@media (max-width:767px){ .nav-brand .est { display:none; } }
.nav-links { display:none; align-items:center; gap:30px; }
@media (min-width:768px){ .nav-links { display:flex; } }
.nav-links a { color:rgba(255,255,255,.75); font-size:13px; transition:color .25s; }
.nav-links a:hover { color:var(--gold); }
.nav-cta { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.45); color:#fff; border-radius:9999px; padding:9px 18px; font-size:12.5px; transition:background .3s,color .3s,border-color .3s; }
.nav-cta:hover { background:#fff; color:var(--navy); border-color:#fff; }
.nav-cta .dot { width:6px; height:6px; border-radius:50%; background:var(--gold); animation: pulseDot 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulseDot { 50% { opacity:.4; } }
.nav-back { display:inline-flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.6); transition:color .25s; }
.nav-back:hover { color:#fff; }
.nav-back svg { transition:transform .3s; }
.nav-back:hover svg { transform:translateX(-3px); }
@media (max-width:767px){ .nav-back span { display:none; } }

/* ---- Reading progress bar ---- */
.progress { position:fixed; top:0; left:0; height:2px; width:0; background:var(--gold); z-index:50; box-shadow:0 0 12px var(--gold); transition:width .1s linear; }

/* ---- Layout ---- */
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
@media (min-width:1024px){ .wrap { padding:0 40px; } }
.col { max-width:720px; margin:0 auto; }
article.wrap { max-width:none; padding:0; }
article.wrap .col { max-width:none; }
article.wrap > .art-head,
article.wrap > .art-cover,
article.wrap > .art-body {
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  padding-left:24px;
  padding-right:24px;
}
@media (min-width:1024px){
  article.wrap > .art-head,
  article.wrap > .art-cover,
  article.wrap > .art-body {
    padding-left:40px;
    padding-right:40px;
  }
}

/* ---- Article header ---- */
.art-head { padding-top:150px; padding-bottom:8px; }
@media (min-width:1024px){ .art-head { padding-top:190px; } }
.art-eyebrow { display:flex; align-items:center; gap:14px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:rgba(13,27,42,.55); margin-bottom:30px; }
.art-eyebrow::before { content:""; width:30px; height:1px; background:currentColor; opacity:.6; }
.art-eyebrow .cat { color:var(--navy); font-weight:500; }
.art-eyebrow .num { margin-left:auto; color:rgba(13,27,42,.4); }
.art-title { font-size:clamp(40px,6.2vw,76px); line-height:1; margin:0; }
.art-stand { font-family:'Instrument Serif',serif; font-size:clamp(21px,2.4vw,28px); line-height:1.4; color:rgba(13,27,42,.65); margin:28px 0 0; max-width:42ch; }
.art-meta { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:40px; padding-top:22px; border-top:1px solid rgba(13,27,42,.15); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(13,27,42,.55); }
.art-meta .author { display:flex; align-items:center; gap:11px; color:var(--navy); }
.art-meta .avatar { width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-family:'Instrument Serif',serif; font-size:16px; font-style:italic; }
.art-meta .sep { width:4px; height:4px; border-radius:50%; background:rgba(13,27,42,.3); }

/* ---- Cover ---- */
.art-cover { margin:48px 0 8px; border-radius:20px; overflow:hidden; aspect-ratio:16/9; position:relative; }
.art-cover .ph-label { position:absolute; top:18px; left:20px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.28em; text-transform:uppercase; }
.art-cover .ph-tag { position:absolute; bottom:18px; right:20px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; }

/* ---- Body prose ---- */
.art-body { padding:44px 0 0; }
.art-body > * { max-width:none; margin-left:0; margin-right:0; }
.art-body p { font-size:18px; line-height:1.78; color:rgba(13,27,42,.82); margin:0 0 26px; text-wrap:pretty; }
.art-body p a { color:var(--navy); border-bottom:1px solid var(--gold); transition:color .2s; }
.art-body p a:hover { color:var(--gold); }
.art-body .lead { font-size:22px; line-height:1.6; color:var(--navy); }
.art-body .lead::first-letter { font-family:'Instrument Serif',serif; font-size:78px; line-height:.7; float:left; padding:6px 14px 0 0; color:var(--gold); }
.art-body h2 { font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(28px,3.4vw,40px); line-height:1.08; letter-spacing:-.01em; margin:52px 0 20px; }
.art-body h2 em { font-style:italic; color:var(--gold); }
.art-body h3 { font-size:17px; font-weight:600; letter-spacing:.02em; margin:38px 0 14px; }
.art-body .kicker { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin:52px 0 -8px; }
.art-body ul, .art-body ol { font-size:18px; line-height:1.7; color:rgba(13,27,42,.82); margin:0 0 26px; padding-left:0; list-style:none; }
.art-body ul li, .art-body ol li { position:relative; padding-left:30px; margin-bottom:14px; }
.art-body ul li::before { content:""; position:absolute; left:4px; top:13px; width:7px; height:7px; background:var(--gold); border-radius:1px; transform:rotate(45deg); }
.art-body ol { counter-reset:item; }
.art-body ol li { counter-increment:item; }
.art-body ol li::before { content:counter(item,decimal-leading-zero); position:absolute; left:0; top:1px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--gold); font-weight:500; }

/* Pull quote */
.pullquote { max-width:none !important; margin:48px 0; padding:0 0 0 28px; border-left:2px solid var(--gold); }
.pullquote p { font-family:'Instrument Serif',serif; font-size:clamp(26px,3.4vw,38px); line-height:1.22; color:var(--navy); font-style:italic; margin:0; }
.pullquote .by { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(13,27,42,.5); margin-top:18px; font-style:normal; }

/* Stat block */
.stat-row { max-width:none !important; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(13,27,42,.15); border:1px solid rgba(13,27,42,.15); border-radius:14px; overflow:hidden; margin:44px 0; }
.stat-row .cell { background:var(--paper); padding:28px 22px; }
.stat-row .n { font-family:'Instrument Serif',serif; font-size:54px; line-height:.9; color:var(--navy); }
.stat-row .n em { font-style:italic; color:var(--gold); }
.stat-row .l { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(13,27,42,.5); margin-top:12px; }
@media (max-width:640px){ .stat-row { grid-template-columns:1fr; } }

/* Aside / note */
.note { max-width:none !important; background:var(--cream); border-radius:16px; padding:26px 28px; margin:40px 0; }
.note .tag { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.note p { font-size:16.5px; line-height:1.65; color:rgba(13,27,42,.8); margin:0; }

/* Signature / end */
.art-end { max-width:none !important; margin:56px 0 0; padding-top:30px; border-top:1px solid rgba(13,27,42,.15); display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.art-end .glyph { font-family:'Instrument Serif',serif; font-style:italic; font-size:30px; color:var(--gold); }
.art-share { display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(13,27,42,.5); }
.art-share a { width:36px; height:36px; border-radius:50%; border:1px solid rgba(13,27,42,.2); display:grid; place-items:center; transition:background .3s,color .3s,border-color .3s,transform .3s; }
.art-share a:hover { background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-2px); }

/* Author bio */
.author-card { max-width:none !important; margin:44px 0 0; display:flex; gap:20px; align-items:flex-start; background:#fff; border:1px solid rgba(13,27,42,.1); border-radius:18px; padding:26px 28px; }
.author-card .av { flex:none; width:56px; height:56px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; font-family:'Instrument Serif',serif; font-style:italic; font-size:24px; }
.author-card .name { font-size:16px; font-weight:600; }
.author-card .role { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:5px 0 12px; }
.author-card .bio { font-size:14.5px; line-height:1.6; color:rgba(13,27,42,.7); }

/* ---- Related / keep reading ---- */
.related { background:var(--cream); margin-top:90px; padding:80px 0; }
.related-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:44px; }
.related-head .e { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:rgba(13,27,42,.55); }
.related-head h2 { font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(34px,5vw,60px); margin:0; }
.related-head h2 em { font-style:italic; color:var(--gold); }
.related-grid { display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:768px){ .related-grid { grid-template-columns:1fr 1fr; } }
.rel-card { display:block; }
.rel-card .cov { aspect-ratio:16/10; border-radius:16px; overflow:hidden; position:relative; }
.rel-card .cov .arrow { position:absolute; bottom:16px; right:16px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; transition:transform .4s; }
.rel-card:hover .cov .arrow { transform:rotate(-45deg); }
.rel-card .rmeta { margin-top:18px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(13,27,42,.5); display:flex; gap:10px; }
.rel-card h3 { font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(24px,2.6vw,30px); line-height:1.1; margin:10px 0 0; transition:color .3s; }
.rel-card h3 em { font-style:italic; color:var(--gold); }
.rel-card:hover h3 { color:var(--gold); }

/* ---- Footer CTA ---- */
.foot { background:var(--navy); color:#fff; position:relative; overflow:hidden; padding:90px 0 50px; }
.foot .hero-grid { position:absolute; inset:0; opacity:.5; background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px); background-size:96px 96px; }
.foot .glow { position:absolute; inset:0; background:radial-gradient(60% 60% at 70% 10%, rgba(201,151,58,.18), transparent 60%); }
.foot-inner { position:relative; z-index:2; }
.foot .e { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:22px; }
.foot h2 { font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(52px,9vw,120px); line-height:.92; margin:0; }
.foot h2 em { font-style:italic; color:var(--gold); }
.foot-cta { margin-top:38px; display:inline-flex; align-items:center; gap:12px; background:#fff; color:var(--navy); border-radius:9999px; padding:18px 30px; font-size:13px; font-weight:600; transition:transform .3s,box-shadow .3s; box-shadow:0 8px 30px -10px rgba(0,0,0,.4); }
.foot-cta:hover { transform:translateY(-3px); box-shadow:0 18px 40px -12px rgba(201,151,58,.4); }
.foot-cta .ab { width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; transition:transform .4s; }
.foot-cta:hover .ab { transform:rotate(-45deg); }
.foot-bottom { position:relative; z-index:2; margin-top:70px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.foot-bottom .legal-links { display:inline-flex; gap:18px; }
.foot-bottom .legal-links a { color:rgba(255,255,255,.7); transition:color .25s; }
.foot-bottom .legal-links a:hover { color:var(--gold); }

/* Reveal on scroll */
.fade { opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.fade.in { opacity:1; transform:none; }

/* Images inside articles (Image block in the blog editor) */
.art-body .art-figure { margin: 40px 0; }
.art-body .art-figure img { width: 100%; height: auto; border-radius: 16px; display: block; }
.art-body .art-figure figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: rgba(13, 27, 42, .55); }
