/* Shared by the Insights pages. Same tokens as the home page. */
:root{
  --bg:#E8E9E6; --bg2:#F2F3F0; --fg:#14171A; --muted:#4B5258; --line:#C3C7C5;
  --accent:#A8281F; --on-accent:#FFFFFF; --teal:#2F5A63; --soft1:26%; --soft2:22%;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1113; --bg2:#161A1D; --fg:#E8E9E6; --muted:#A3AAAF; --line:#2A3034;
    --accent:#E5604F; --on-accent:#0E1113; --teal:#5E9AA5; --soft1:20%; --soft2:18%;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1113; --bg2:#161A1D; --fg:#E8E9E6; --muted:#A3AAAF; --line:#2A3034;
  --accent:#E5604F; --on-accent:#0E1113; --teal:#5E9AA5; --soft1:20%; --soft2:18%;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
p{margin:0}
.wrap{width:min(1160px,100%); margin-inline:auto; position:relative;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
@media (min-width:720px){ .wrap{padding-left:max(32px, env(safe-area-inset-left, 0px)); padding-right:max(32px, env(safe-area-inset-right, 0px))} }
.mono{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
h1,h2,h3{font-family:var(--display); font-weight:600; text-transform:uppercase; margin:0; text-wrap:balance}

.top{position:relative; isolation:isolate; overflow:hidden}
.top::before{content:""; position:absolute; inset:-20%; z-index:-1;
  background:
    radial-gradient(45% 55% at 12% 90%, color-mix(in srgb, var(--teal) var(--soft1), transparent), transparent 72%),
    radial-gradient(42% 52% at 90% 10%, color-mix(in srgb, var(--accent) var(--soft2), transparent), transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 88%); mask-image:linear-gradient(to bottom,#000 30%,transparent 88%)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:22px}
.mark{font-family:var(--display); font-weight:700; font-size:1.55rem; letter-spacing:.32em; text-transform:uppercase; text-decoration:none}
.nav{display:flex; align-items:center; gap:28px}
.nav a{font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none}
.nav a:hover{color:var(--accent)}
.nav .pill{border:1px solid var(--fg); padding:9px 16px}
.nav .pill:hover{background:var(--fg); color:var(--bg)}
@media (max-width:640px){ .nav a:not(.pill){display:none} }

.head{padding-block:clamp(48px,8vw,96px) clamp(40px,6vw,72px)}
.head h1{font-size:clamp(2.4rem,6.4vw,5rem); line-height:.96; letter-spacing:.005em; max-width:18ch}
.head .dek{margin-top:22px; max-width:52ch; font-size:1.2rem; line-height:1.5; color:var(--muted)}
.head .meta{margin-top:26px; display:block}

.article{width:min(680px,100%); margin-inline:auto; padding-block:clamp(40px,6vw,72px) clamp(64px,9vw,112px)}
.article-wrap{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
@media (min-width:720px){ .article-wrap{padding-left:32px; padding-right:32px} }
.article p{margin-top:1.2em}
.article p:first-child{margin-top:0}
.article h2{margin-top:2.2em; font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.02; letter-spacing:.01em}
.article h2 + p{margin-top:.8em}
.article .src{margin-top:2.4em; padding-top:1.2em; border-top:1px solid var(--line); font-size:.9rem; color:var(--muted)}
.article .src a{text-decoration-thickness:1px; text-underline-offset:3px}
.cta-box{margin-top:2.6em; padding:28px; background:var(--bg2); border-radius:3px; position:relative; isolation:isolate; overflow:hidden}
.cta-box::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 70% at 100% 110%, color-mix(in srgb, var(--teal) 55%, transparent), transparent 72%)}
.cta-box p{margin:0; font-size:1.1rem}
.btn{display:inline-block; margin-top:18px; font-family:var(--display); font-weight:600; font-size:1.15rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--accent); color:var(--on-accent); padding:14px 28px; text-decoration:none}
.btn:hover{filter:brightness(1.08)}

.list{list-style:none; margin:0; padding:0 0 clamp(64px,9vw,112px)}
.list li{border-top:1px solid var(--line)}
.list li:last-child{border-bottom:1px solid var(--line)}
.list a{display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:6px 28px; padding-block:30px; text-decoration:none}
.list a:hover h2{color:var(--accent)}
.list h2{font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1.02}
.list p{margin-top:10px; color:var(--muted); max-width:56ch}
@media (max-width:620px){ .list a{grid-template-columns:minmax(0,1fr)} }

footer{border-top:1px solid var(--line); padding-block:28px}
footer .row{display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }