/* ==========================================================================
   Insight pages — article + index. Loads after base.css.
   The .hd header from base.css blends via difference over this white page,
   so its text renders ink automatically.
   ========================================================================== */
.post-page{background:var(--w)}
.post-page .hd{animation:hd-in .8s var(--ease) both}
@keyframes hd-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.art{max-width:760px;margin:0 auto;padding:clamp(130px,18vh,180px) var(--gut) clamp(60px,8vh,90px);
  animation:art-in .9s var(--ease) both .1s}
@keyframes art-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.art-kick{display:block}
.art-h{font-family:var(--f-disp);font-weight:370;letter-spacing:-.022em;line-height:1.02;
  font-size:clamp(2.3rem,6.4vw,4.4rem);margin-top:26px;text-wrap:balance}
.art-ne{font-family:var(--f-dev);font-weight:600;color:var(--blu);font-size:clamp(1.1rem,2.4vw,1.5rem);
  margin-top:14px;line-height:1.6}
.art-meta{margin-top:22px;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gr)}
.art-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.art-tags span{border:1px solid var(--gr2);border-radius:99px;padding:5px 12px;
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gr)}
.art-cover{margin:clamp(30px,5vh,50px) 0 0;border:1px solid var(--hl)}
.art-cover img{width:100%;height:auto}

/* ---- prose ---- */
.prose{margin-top:clamp(36px,6vh,60px);font-size:clamp(1rem,1.15vw,1.09rem);line-height:1.85;color:#23282E}
.prose>*+*{margin-top:1.2em}
.prose h2{font-family:var(--f-disp);font-weight:410;letter-spacing:-.015em;line-height:1.15;
  font-size:clamp(1.5rem,2.8vw,2.1rem);margin-top:2em;padding-top:.9em;border-top:1px solid var(--hl)}
.prose h3{font-family:var(--f-disp);font-weight:470;font-size:clamp(1.15rem,2vw,1.4rem);margin-top:1.8em}
.prose strong{color:var(--ink2);font-weight:600}
.prose em{font-family:var(--f-disp);font-style:italic}
.prose a{color:var(--tr);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--tr2)}
.prose ul,.prose ol{padding-left:1.3em}
.prose ul{list-style:none}
.prose ul li{position:relative;padding-left:.2em}
.prose ul li::before{content:"—";position:absolute;left:-1.3em;color:var(--tr)}
.prose ol{list-style:decimal}
.prose ol li::marker{font-family:var(--f-mono);font-size:.85em;color:var(--tr)}
.prose li+li{margin-top:.55em}
.prose blockquote{border-left:2px solid var(--tr);padding:.3em 0 .3em 1.4em;
  font-family:var(--f-disp);font-style:italic;font-size:1.12em;color:var(--ink2)}
.prose hr{border:0;border-top:1px solid var(--hl);margin:2.4em 0}
.prose code{font-family:var(--f-mono);font-size:.85em;background:var(--hl);padding:.15em .45em;border-radius:3px}
.prose img{border:1px solid var(--hl);display:block;max-width:100%;height:auto;margin:1.6em 0}

/* ---- end CTA ---- */
.art-cta{margin-top:clamp(50px,8vh,80px);border:1px solid var(--gr2);padding:clamp(24px,4vw,40px);position:relative}
.art-cta::before,.art-cta::after{content:"+";position:absolute;color:var(--gr2);font-size:1rem;line-height:1}
.art-cta::before{top:5px;left:8px}
.art-cta::after{bottom:5px;right:8px}
.art-cta-l{display:block;margin-top:16px;font-family:var(--f-disp);font-weight:410;letter-spacing:-.015em;
  line-height:1.08;font-size:clamp(1.6rem,4vw,2.6rem);color:var(--ink2)}
.art-cta-l span{display:block;font-size:.5em;color:var(--gr);font-weight:400;font-style:italic;margin-top:8px;
  transition:color .3s}
.art-cta-l:hover{color:var(--tr)}
.art-cta-l:hover span{color:var(--tr)}

.art-back{margin-top:clamp(40px,6vh,60px);display:flex;justify-content:space-between;gap:16px;
  border-top:1px solid var(--hl);padding-top:22px}
.art-back a{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gr)}
.art-back a:hover{color:var(--tr)}

.art-ft{max-width:760px;margin:0 auto;padding:clamp(36px,6vh,60px) var(--gut) 48px}
.art-ft-top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:24px 40px;
  border-top:1px solid var(--hl);padding-top:32px}
.art-ft-brand{max-width:38ch}
.art-ft-logo{font-family:var(--f-disp);font-weight:560;font-size:1.15rem;color:var(--ink2)}
.art-ft-logo i{font-style:normal;font-family:var(--f-mono);font-size:.5rem;letter-spacing:.22em;color:var(--gr)}
.art-ft-tag{margin-top:12px;font-size:.82rem;line-height:1.6;color:var(--gr)}
.art-ft-c{display:flex;flex-direction:column;gap:9px}
.art-ft-c a{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.04em;color:var(--gr);width:fit-content;transition:color .3s var(--ease)}
.art-ft-c a:hover{color:var(--tr)}
.art-ft-bar{margin-top:30px;padding-top:22px;border-top:1px solid var(--hl);display:flex;flex-wrap:wrap;gap:8px 24px}
.art-ft-bar span{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.12em;color:var(--gr);text-transform:uppercase}

/* ---- insights index list ---- */
.ilist{margin-top:clamp(40px,7vh,70px);display:flex;flex-direction:column}
.ilist .il{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;
  padding:24px 0;border-top:1px solid var(--hl);color:var(--ink2);flex-wrap:wrap;position:relative}
.ilist .il:last-child{border-bottom:1px solid var(--hl)}
.ilist .il::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--blu);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.ilist .il:hover::after{transform:scaleX(1)}
.ilist .il-t{font-family:var(--f-disp);font-weight:410;font-size:clamp(1.2rem,2.6vw,1.7rem);
  letter-spacing:-.01em;line-height:1.2;transition:transform .5s var(--ease)}
.ilist .il:hover .il-t{transform:translateX(12px)}
.ilist .il-ne{display:block;font-family:var(--f-dev);font-weight:600;font-size:.72em;color:var(--blu);margin-top:5px}
.ilist .il-m{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gr);flex:0 0 auto}
.ilist .il-empty{padding:30px 0;color:var(--gr);font-style:italic}

@media(max-width:720px){.art-ft-top{grid-template-columns:1fr 1fr}.art-ft-brand{grid-column:1/-1;max-width:none}}
@media(max-width:520px){
  .art{padding-top:120px}
  .art-back{flex-direction:column;gap:12px}
  .art-ft-top{grid-template-columns:1fr}
}