/* ============================================================
   insights.css — INSIGHTS SECTION (index + all article pages)
   Loads after site.css. One stylesheet for the whole section since
   the index and every article share the same list/prose components.
   No new photography, no card-in-card containers — a bordered list,
   matching the site's restraint rather than a blog-template grid.
   ============================================================ */
@layer route {

  .insight-list{list-style:none;margin:0;padding:0}

  .insight-item{padding-block:1.8rem;border-top:1px solid var(--rule)}
  .insight-item:first-child{border-top:none;padding-top:0}

  .insight-item h2{margin:0;font-size:clamp(1.05rem,.98rem + .3vw,1.3rem)}

  .insight-item h2 a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
  .insight-item h2 a:hover{border-bottom-color:var(--ink)}

  .insight-meta{margin:.5rem 0 0;font-family:var(--mono);font-size:.7rem;
    letter-spacing:.1em;text-transform:uppercase;color:var(--carbon)}

  .insight-item > p:last-child{margin-top:.6rem;max-width:60ch;color:var(--ink-soft)}

  /* article body: h2 sits inside .col, same measure as the surrounding prose */
  .insight-body h2{margin-top:2.2rem}
  .insight-body p{margin-top:1rem}
  .insight-body p:first-child{margin-top:0}

}