/* Shared styles for the Insights section. Tokens mirror index.html. */
:root{
  --ink:#111418; --text-2:#4B525B; --text-3:#6B727B;
  --rule:#E2E4E7; --surface:#FFFFFF; --surface-2:#F4F4F2;
  --navy:#0F1B2D; --on-navy:#F4F4F2; --on-navy-2:#A9B2BE; --rule-navy:#2A3A50;
  --signal:#C4501E;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --pad:120px; --gap:24px; --col-a:384px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--surface); color:var(--text-2); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%}
[hidden]{display:none !important}
a{color:inherit}
h1,h2,h3,p{margin:0}
.wrap{max-width:1440px; margin:0 auto; padding:0 var(--pad)}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 16px; z-index:10}
.skip:focus{left:16px; top:16px}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px}

/* Type */
.h1{font-family:var(--serif); font-weight:400; font-size:clamp(44px,5.4vw,76px); line-height:1.02; letter-spacing:-0.025em; color:var(--ink); max-width:980px}
.h2{font-family:var(--serif); font-weight:400; font-size:clamp(32px,3.1vw,44px); line-height:1.12; letter-spacing:-0.015em; color:var(--ink)}
.h3{font-family:var(--serif); font-weight:400; font-size:30px; line-height:1.2; letter-spacing:-0.01em; color:var(--ink)}
.lead{font-size:clamp(18px,1.5vw,21px); line-height:1.5; max-width:700px}
.small{font-size:14px; line-height:1.4; color:var(--text-3)}
.eyebrow{font-size:14px; font-weight:500; color:var(--signal); letter-spacing:0.01em}
.link{font-weight:500; font-size:16px; color:var(--ink); text-decoration:none; border-bottom:1px solid transparent; padding:6px 0}
.link:hover{border-bottom-color:var(--ink)}
.btn{display:inline-block; white-space:nowrap; background:var(--ink); color:var(--surface); font-family:var(--sans); font-weight:500; font-size:16px; line-height:1.2; padding:17px 28px; border:0; border-radius:2px; text-decoration:none; cursor:pointer}
.btn:hover{background:#2A3038}
.btn--sm{font-size:15px; padding:12px 20px}
.btn--light{background:var(--on-navy); color:var(--ink)}
.btn--light:hover{background:#fff}

/* Header */
.header{border-bottom:1px solid var(--rule); background:var(--surface); position:sticky; top:0; z-index:5}
.header .wrap{display:flex; align-items:center; justify-content:space-between; gap:32px; padding-top:26px; padding-bottom:26px}
.brand{display:flex; white-space:nowrap; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-weight:600; font-size:20px; letter-spacing:-0.01em}
.brand img{width:34px; height:34px}
.nav{display:flex; align-items:center; gap:40px; font-size:15px}
.nav a:not(.btn){text-decoration:none; color:var(--ink); padding:8px 0}
.nav a:not(.btn):hover{text-decoration:underline; text-underline-offset:4px}
.nav a[aria-current]{text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--signal)}

/* Sections */
.section{padding:120px 0}
.section--alt{background:var(--surface-2)}
.section--navy{background:var(--navy); color:var(--on-navy-2)}
.section--navy .h2{color:var(--on-navy)}
.split{display:grid; grid-template-columns:var(--col-a) 1fr; gap:var(--gap)}

/* ---------- Listing page ---------- */
.b-hero{padding:136px 0 88px}
.b-hero__copy{display:flex; flex-direction:column; gap:28px}

.filters{display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-top:1px solid var(--ink); padding:24px 0}
.filters .small{margin-right:14px}
.chip{font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink); background:transparent; border:1px solid var(--rule); border-radius:2px; padding:8px 14px; cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink)}

.featured{display:grid; grid-template-columns:var(--col-a) 1fr; gap:var(--gap); padding:48px 0 64px; border-top:1px solid var(--rule); text-decoration:none; color:inherit}
.featured__meta{display:flex; flex-direction:column; gap:8px}
.featured__body{display:flex; flex-direction:column; gap:20px; max-width:760px}
.featured h2{font-family:var(--serif); font-weight:400; font-size:clamp(34px,3.6vw,52px); line-height:1.06; letter-spacing:-0.02em; color:var(--ink)}
.featured p{font-size:18px}
.featured:hover h2{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px}

.posts{list-style:none; margin:0; padding:0; border-bottom:1px solid var(--rule)}
.post-row{border-top:1px solid var(--rule)}
.post-row a{display:grid; grid-template-columns:var(--col-a) 1fr auto; gap:var(--gap); align-items:baseline; padding:32px 0; text-decoration:none; color:inherit}
.post-row .meta{display:flex; flex-direction:column; gap:6px}
.post-row h3{font-family:var(--serif); font-weight:400; font-size:26px; line-height:1.2; letter-spacing:-0.01em; color:var(--ink); max-width:720px}
.post-row p{font-size:16px; margin-top:8px; max-width:720px}
.post-row .arrow{font-size:20px; color:var(--ink); transition:transform .15s}
.post-row a:hover h3{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px}
.post-row a:hover .arrow{transform:translateX(4px)}
.empty{padding:40px 0; display:none}

.subscribe{display:grid; grid-template-columns:var(--col-a) 1fr auto; gap:var(--gap); align-items:center}

/* ---------- Article page ---------- */
.a-head{padding:112px 0 72px}
.crumb{font-size:14px; color:var(--text-3); text-decoration:none}
.crumb:hover{color:var(--ink)}
.a-head__copy{display:flex; flex-direction:column; gap:28px; margin-top:40px}
.a-meta{display:flex; gap:10px 32px; flex-wrap:wrap; border-top:1px solid var(--ink); padding-top:24px; margin-top:72px}
.a-meta div{display:flex; flex-direction:column; gap:4px; min-width:140px}
.a-meta dt{font-size:14px; color:var(--text-3)}
.a-meta dd{margin:0; font-weight:500; color:var(--ink); font-size:16px}

.a-body{display:grid; grid-template-columns:var(--col-a) 1fr; gap:var(--gap); padding-bottom:120px}
.a-aside{position:sticky; top:120px; align-self:start; display:flex; flex-direction:column; gap:32px; padding-right:48px}
.toc p{margin-bottom:12px}
.toc ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; border-left:1px solid var(--rule)}
.toc a{display:block; padding-left:16px; margin-left:-1px; border-left:1px solid transparent; font-size:15px; line-height:1.4; color:var(--text-2); text-decoration:none}
.toc a:hover{color:var(--ink)}
.toc a.is-active{color:var(--ink); border-left-color:var(--signal)}
.author{display:flex; gap:14px; align-items:center; border-top:1px solid var(--rule); padding-top:24px}
.author img{width:52px; height:52px; object-fit:cover; border-radius:50%; background:var(--rule)}
.author strong{display:block; font-weight:600; color:var(--ink); font-size:16px}
.share{display:flex; gap:20px; font-size:15px}

.prose{min-width:0; max-width:700px; font-size:18px; line-height:1.7}
.prose > * + *{margin-top:24px}
.prose h2{font-family:var(--serif); font-weight:400; font-size:32px; line-height:1.18; letter-spacing:-0.012em; color:var(--ink); margin-top:64px; scroll-margin-top:120px}
.prose h3{font-family:var(--sans); font-weight:600; font-size:19px; line-height:1.4; color:var(--ink); margin-top:40px}
.prose h2 + *, .prose h3 + *{margin-top:16px}
.prose a{color:var(--ink); text-decoration-color:var(--signal); text-underline-offset:3px}
.prose strong{color:var(--ink); font-weight:600}
.prose ul,.prose ol{padding-left:22px}
.prose li + li{margin-top:10px}
.prose li::marker{color:var(--signal)}
.prose blockquote{margin:48px 0; padding:4px 0 4px 28px; border-left:2px solid var(--signal); font-family:var(--serif); font-size:26px; line-height:1.35; color:var(--ink)}
.prose figure{margin:40px 0}
.prose figcaption{font-size:14px; color:var(--text-3); margin-top:12px}
.dropcap::first-letter{font-family:var(--serif); float:left; font-size:74px; line-height:0.9; padding:6px 10px 0 0; color:var(--ink)}

.takeaways{background:var(--surface-2); padding:32px 36px; border-top:2px solid var(--ink)}
.takeaways p.small{margin-bottom:14px}
.takeaways ul{margin:0; padding-left:20px}
.takeaways li{font-size:17px; line-height:1.55}

.table-wrap{overflow-x:auto}
.prose table{width:100%; border-collapse:collapse; font-size:16px; line-height:1.45}
.prose th{text-align:left; font-weight:600; color:var(--ink); border-bottom:1px solid var(--ink); padding:10px 16px 10px 0}
.prose td{border-bottom:1px solid var(--rule); padding:12px 16px 12px 0; vertical-align:top}
.prose td.num,.prose th.num{text-align:right; font-variant-numeric:tabular-nums; padding-right:0}
.prose tr.total td{border-bottom:1px solid var(--ink); font-weight:600; color:var(--ink)}

.note{font-size:15px; color:var(--text-3); border-top:1px solid var(--rule); padding-top:16px}

.cta{display:grid; grid-template-columns:486px 1fr; gap:var(--gap); align-items:end}
.cta__actions{display:flex; flex-direction:column; gap:28px; align-items:flex-start}
.cta__actions p{font-size:18px}

.related{display:grid; grid-template-columns:var(--col-a) 1fr; gap:var(--gap)}
.related .post-row a{grid-template-columns:180px 1fr auto}

/* Footer */
.footer .wrap > div{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; border-top:1px solid var(--rule); padding:32px 0 40px}
.footer nav{display:flex; gap:32px; font-size:14px}
.footer nav a{color:var(--text-2); text-decoration:none}
.footer nav a:hover{text-decoration:underline}

/* Responsive */
@media (max-width:1180px){
  :root{--pad:56px; --col-a:300px}
  .cta{grid-template-columns:1fr 1fr}
  .a-aside{padding-right:24px}
}
@media (max-width:900px){
  :root{--pad:24px}
  .nav a:not(.btn){display:none}
  .b-hero{padding:72px 0 56px}
  .a-head{padding:56px 0 48px}
  .a-meta{margin-top:48px}
  .split,.featured,.post-row a,.subscribe,.a-body,.cta,.related{grid-template-columns:1fr}
  .featured,.split,.related{gap:16px}
  .post-row a{gap:10px}
  .post-row .meta{flex-direction:row; gap:16px}
  .post-row .arrow{display:none}
  .a-aside{position:static; padding-right:0; gap:24px; margin-bottom:24px}
  .toc{display:none}
  .section{padding:80px 0}
  .a-body{padding-bottom:80px}
  .prose{font-size:17px}
  .prose h2{font-size:28px; margin-top:48px}
  .prose blockquote{font-size:22px}
  .takeaways{padding:24px}
}
@media (max-width:520px){
  .brand{font-size:16px; gap:8px}
  .brand img{width:28px; height:28px}
  .header .wrap{gap:12px}
  .btn--sm{padding:10px 14px; font-size:14px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} .post-row .arrow{transition:none}}

/* Article extras */
.prose ul.sources li{font-size:15px; line-height:1.5}
@media (max-width:900px){ .prose table{min-width:560px} }