/* ============================================================
   Insights section — article subpages + landing page.
   Loads AFTER tokens.css + styles.css and reuses the site shell
   (nav, footer, buttons); everything here is reading-page chrome.
   Articles live on the About-section ivory so the shell's navy
   nav/footer bookend the page the same way they do the one-pager.
   ============================================================ */

body.insights-page{background:var(--ivory-about);color:var(--navy-900)}

/* ---------- landing hero (navy band under the nav) ---------- */
.ins-hero{background:var(--navy-900);padding:88px 0 64px;position:relative;overflow:hidden}
.ins-hero .kicker{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px;
}
.ins-hero h1{
  font-family:'Newsreader',serif;font-weight:500;color:var(--ivory);
  font-size:clamp(34px,5vw,52px);line-height:1.12;letter-spacing:-0.01em;
  margin:0 0 18px;max-width:720px;
}
.ins-hero p{color:var(--slate);font-size:17px;line-height:1.7;max-width:640px;margin:0}

/* ---------- landing groups + cards ---------- */
.ins-groups{padding:64px 0 90px}
.ins-group{margin-bottom:56px}
.ins-group:last-child{margin-bottom:0}
.ins-group-head{
  display:flex;align-items:center;gap:16px;margin-bottom:22px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.2em;
  text-transform:uppercase;color:#9a7d34;
}
.ins-group-head::after{content:"";flex:1;height:1px;background:rgba(10,24,40,0.14)}
.ins-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ins-card{
  display:flex;flex-direction:column;background:#f6f1e5;
  border:1px solid rgba(10,24,40,0.12);border-radius:2px;
  padding:24px 24px 20px;
  transition:border-color .25s ease,transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.ins-card:hover{
  border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(10,24,40,0.10);
}
.ins-num{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;color:#9a7d34}
.ins-card h3{
  font-family:'Newsreader',serif;font-weight:500;font-size:20.5px;line-height:1.32;
  color:var(--navy-900);margin:9px 0 10px;
}
.ins-card p{font-size:14px;line-height:1.62;color:#55657d;margin:0}
.ins-meta{
  margin-top:auto;padding-top:16px;display:flex;gap:12px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.08em;
  text-transform:uppercase;color:#8a97a8;
}

/* ---------- article page ---------- */
.article-wrap{max-width:764px;margin:0 auto;padding:68px 32px 36px}
.article-head{border-bottom:1px solid rgba(10,24,40,0.14);padding-bottom:28px;margin-bottom:36px}
.article-kicker{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:#9a7d34;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;margin:0;
}
.article-kicker a{color:#9a7d34;border-bottom:1px solid rgba(154,125,52,0.4);transition:color .2s ease,border-color .2s ease}
.article-kicker a:hover{color:var(--navy-900);border-color:var(--navy-900)}
.article-kicker .k-sep{color:rgba(154,125,52,0.55)}
.article-page h1{
  font-family:'Newsreader',serif;font-weight:500;color:var(--navy-900);
  font-size:clamp(30px,4.6vw,44px);line-height:1.16;letter-spacing:-0.01em;
  margin:18px 0 16px;
}
.article-byline{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:0.06em;
  color:#6a7a90;margin:0;
}
.article-byline .dot{color:#9a7d34;margin:0 7px}

.article-body{font-family:'Newsreader',serif;font-size:18px;line-height:1.78;color:#2b3b53}
.article-body p{margin:0 0 20px}
.article-body .lede{font-size:21px;line-height:1.62;color:var(--navy-900)}
.article-body h2{
  font-family:'Newsreader',serif;font-weight:500;font-size:27px;line-height:1.3;
  color:var(--navy-900);margin:46px 0 16px;
}

/* inline citation markers -> reference list */
a.cite{
  color:#9a7d34;font-size:0.72em;vertical-align:0.28em;letter-spacing:0.02em;
  font-family:'IBM Plex Mono',monospace;
}
a.cite:hover{color:var(--navy-900)}

/* ---------- key-takeaways / definition callouts ---------- */
.takeaways,.callout{
  background:rgba(10,24,40,0.045);border-left:3px solid var(--gold);
  border-radius:0 2px 2px 0;padding:20px 24px 18px;margin:0 0 26px;
}
.tk-head{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:#9a7d34;margin:0 0 12px;
}
.takeaways ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.takeaways li{position:relative;padding-left:18px;font-size:16px;line-height:1.6}
.takeaways li::before{
  content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  background:var(--gold);transform:rotate(45deg);
}
.callout p{font-size:16px;line-height:1.62;margin:0}
.callout p + p{margin-top:10px}

/* ---------- data tables ---------- */
.table-scroll{overflow-x:auto;margin:4px 0 26px;-webkit-overflow-scrolling:touch}
.article-body table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5;min-width:560px}
.article-body th{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:#9a7d34;text-align:left;font-weight:500;
  padding:10px 14px 10px 0;border-bottom:1.5px solid rgba(154,125,52,0.5);
}
.article-body td{
  padding:11px 14px 11px 0;vertical-align:top;
  border-bottom:1px solid rgba(10,24,40,0.12);color:#33425a;
}
.article-body tr td:last-child,.article-body tr th:last-child{padding-right:0}

/* ---------- closing CTA ---------- */
.article-cta{
  background:var(--navy-900);border-radius:2px;
  padding:30px 32px;margin:46px 0 0;
}
.article-cta p{
  font-family:'Newsreader',serif;font-size:18px;line-height:1.66;
  color:#d6dde8;margin:0 0 20px;
}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- references ---------- */
.refs{margin-top:48px;border-top:1px solid rgba(10,24,40,0.14);padding-top:28px}
.refs h2{font-family:'Newsreader',serif;font-weight:500;font-size:21px;color:var(--navy-900);margin:0 0 16px}
.refs ol{margin:0;padding-left:26px;display:flex;flex-direction:column;gap:9px}
.refs li{font-size:13.5px;line-height:1.58;color:#5a6a80;overflow-wrap:anywhere}
.refs a{color:#33425a;border-bottom:1px solid rgba(10,24,40,0.2);transition:color .2s ease,border-color .2s ease}
.refs a:hover{color:#9a7d34;border-color:#9a7d34}

/* ---------- prev / next pager ---------- */
.article-pager{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  border-top:1px solid rgba(10,24,40,0.14);margin-top:40px;padding:24px 0 10px;
  font-size:13.5px;font-weight:500;
}
.article-pager a{color:#33425a;transition:color .2s ease;max-width:42%}
.article-pager a:hover{color:#9a7d34}
.article-pager .pager-all{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#9a7d34}
.article-pager .pager-next{text-align:right}

/* ---------- small screens ---------- */
@media (max-width:760px){
  .ins-grid{grid-template-columns:1fr}
  .ins-hero{padding:68px 0 48px}
  .article-wrap{padding:52px 22px 28px}
  .article-body{font-size:17px}
  .article-body .lede{font-size:19px}
  .article-body h2{font-size:23.5px;margin-top:38px}
  .article-cta{padding:26px 22px}
  .article-pager{flex-wrap:wrap}
  .article-pager a{max-width:100%}
}

/* selection color matches the one-pager */
.insights-page ::selection{background:var(--gold);color:var(--navy-900)}

/* ---------- v7: match the one-pager ---------- */
/* solid navy banner (the translucent nav lightened over the ivory body) */
.insights-page header.nav{background:var(--navy-900);backdrop-filter:none}
/* navy article cards, gold-framed like the homepage arms */
.ins-card{background:var(--navy-850);border:1px solid rgba(200,162,83,0.38)}
.ins-card:hover{border-color:var(--gold);box-shadow:0 18px 40px rgba(10,24,40,0.28)}
.ins-num{color:var(--gold)}
.ins-card h3{color:var(--ivory)}
.ins-card p{color:var(--slate)}
.ins-meta{color:var(--slate-dim)}
/* per-arm anchors land below the sticky nav */
.ins-group{scroll-margin-top:96px}

/* ---------- v7.2 parity with the one-pager ---------- */
/* warm top radial on the page itself */
body.insights-page{background:radial-gradient(120% 60% at 50% 0%, #f4efe2 0%, var(--ivory-about) 55%) fixed var(--ivory-about)}
/* hero: depth gradient + star speckle + gold seam */
.ins-hero{
  background:radial-gradient(130% 110% at 50% -10%, #163150 0%, var(--navy-900) 62%);
  border-bottom:1px solid rgba(200,162,83,0.55);
}
.ins-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(1.2px 1.2px at 32px 44px, rgba(241,236,224,.5), transparent 100%),
    radial-gradient(1px 1px at 180px 120px, rgba(241,236,224,.38), transparent 100%),
    radial-gradient(1px 1px at 90px 210px, rgba(241,236,224,.3), transparent 100%),
    radial-gradient(.9px .9px at 240px 60px, rgba(217,187,112,.32), transparent 100%),
    radial-gradient(.8px .8px at 140px 290px, rgba(241,236,224,.22), transparent 100%),
    radial-gradient(.8px .8px at 300px 180px, rgba(241,236,224,.18), transparent 100%);
  background-size:360px 360px, 420px 420px, 480px 480px, 540px 540px, 600px 600px, 660px 660px;
  opacity:.8;
}
.ins-hero .wrap{position:relative}
/* kicker parity */
.ins-group-head{font-size:15px;font-weight:700;letter-spacing:0.2em}
.ins-group-head::after{background:rgba(10,24,40,0.26)}
/* cards: identical feel to the What-We-Do arms */
.ins-card{border-width:2px;border-color:rgba(200,162,83,0.38)}
.ins-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 18px 44px rgba(10,24,40,0.3)}
/* line contrast on article pages */
.article-head{border-bottom-color:rgba(10,24,40,0.26)}
.refs{border-top-color:rgba(10,24,40,0.26)}
.article-pager{border-top-color:rgba(10,24,40,0.26)}
.article-body td{border-bottom-color:rgba(10,24,40,0.26)}
/* the closing CTA joins the unified card system */
.article-cta{border:1.5px solid rgba(200,162,83,0.38)}

/* ---------- v7.3 SEO/GEO: author box + related-arm link on articles ---------- */
.related-arm{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.04em;
  color:#6a7a90;margin:26px 0 0;line-height:1.7;
}
.related-arm a{color:#9a7d34;border-bottom:1px solid rgba(154,125,52,0.4);transition:color .2s ease}
.related-arm a:hover{color:var(--navy-900)}
.author-box{
  display:flex;gap:18px;align-items:flex-start;
  background:rgba(10,24,40,0.045);border-left:3px solid var(--gold);
  border-radius:0 2px 2px 0;padding:20px 24px;margin:22px 0 0;
}
.author-box img{width:72px;height:auto;border-radius:3px;flex:none;border:1px solid rgba(154,125,52,0.45)}
.ab-label{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:#9a7d34;margin:0 0 8px;
}
.ab-bio{font-size:14.5px;line-height:1.65;color:#3b4b63;margin:0}
.ab-bio strong{color:var(--navy-900)}
.ab-bio a{color:#9a7d34;border-bottom:1px solid rgba(154,125,52,0.4)}
.ab-bio a:hover{color:var(--navy-900)}
@media(max-width:560px){.author-box{flex-direction:column;gap:12px}}