/* Insights — the daily CIO report and the weekly research links (added 2 Nov 2026).
   One stylesheet for every insight page (build.py passes css="insights"). Hero: the morning window (CIO
   report) or the dark library (research links), with the navy veil every v7 hero carries. Below it, a
   tab rule between the two series, the AI notice, then the note pages' reading column: heads in the
   margin, serif prose, ruled data tables in mono figures, and link lists set like a sources list. */

body:is([data-page^="cio-report"], [data-page^="research-links"]) {
  --hero: url("../img/photos/morning-window.jpg"); --hero-pos: 50% 55%; --hero-blend: normal;
}
body[data-page^="research-links"] {
  --hero: url("../img/photos/hero-research.jpg"); --hero-pos: 50% 70%;
}
body:is([data-page^="cio-report"], [data-page^="research-links"]) .hero h1 { max-width: 18ch; font-size: clamp(2.4rem, 5.2vw, 4.6rem) }

/* the two series as a ruled tab row */
.insight-nav {
  display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin-top: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line); padding-bottom: .1rem;
}
.insight-nav a {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: .7rem 0;
}
.insight-nav a:hover { color: var(--red) }
.insight-nav a[aria-current] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--red) }

/* the AI notice */
.insight-lead {
  margin: 1.4rem 0 0; max-width: 52rem; font-family: var(--sans); font-size: .9rem; line-height: 1.55;
  color: var(--muted); padding-left: 1rem; border-left: 2px solid var(--red);
}

.insight .insight-note { font-family: var(--sans); font-size: .9rem; color: var(--muted); font-style: italic }

/* data tables: mono figures, hairline rules, scroll sideways on phones instead of the page */
.insight-table { margin: 1.4rem 0 .4rem; max-width: 44rem }
.insight-table .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }
.insight-table table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: .92rem }
.insight-table th {
  text-align: left; font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); padding: .55rem .9rem .55rem 0; border-bottom: 2px solid var(--fg);
  white-space: nowrap;
}
.insight-table td { padding: .6rem .9rem .6rem 0; border-bottom: 1px solid var(--line); color: var(--fg); white-space: nowrap }
.insight-table td + td { font-family: var(--mono); font-size: .86rem }
.insight-table figcaption { margin-top: .7rem; font-family: var(--sans); font-size: .82rem; line-height: 1.5; color: var(--muted) }

/* link lists: set like the notes' sources */
.insight-links { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.3rem; max-width: 44rem }
.insight-links li { padding-top: 1.1rem; border-top: 1px solid var(--line) }
.insight-links li:first-child { border-top: 0; padding-top: 0 }
.insight-links a { font-family: var(--sans); font-weight: 600; font-size: 1.08rem; color: var(--fg); text-decoration-color: var(--line) }
.insight-links a:hover { color: var(--red); text-decoration-color: currentColor }
.insight-links .insight-source { display: block; margin-top: .3rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted) }
.insight-links p { margin-top: .45rem; font-size: 1.04rem; line-height: 1.55 }

.insight-sources ul { margin: 0; padding-left: 1.1rem; font-family: var(--sans); font-size: .9rem; line-height: 1.5; color: var(--muted); display: grid; gap: .3rem }

/* archive */
.insight-archive { border-top: 2px solid var(--fg); margin-top: clamp(2.4rem, 4vw, 3.4rem) }
.insight-archive h2 { font-size: clamp(1.35rem, 2vw, 1.7rem); margin: 0 0 1rem }
.insight-archive ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; max-width: 44rem }
.insight-archive li a {
  display: block; padding: .7rem 0; border-bottom: 1px solid var(--line); font-family: var(--sans);
  color: var(--fg); text-decoration: none;
}
.insight-archive li a:hover { color: var(--red) }

@media (max-width: 640px) {
  .insight-nav { gap: .2rem 1.2rem }
  .insight-table table { font-size: .86rem }
}