/* ==========================================================================
   hub-v11.css: the insights hub (/insights/), an editorial index on v11.

   Load order: the full subpage stack (see /Assets/site-v11.css header),
   then THIS FILE. Everything here reads the v11 tokens (tokens.css) and the
   surface-aware inks site-v11.css defines (--sv-ink / --sv-body / --sv-label
   / --sv-accent / --sv-rule), so no colour is hardcoded twice.

   Page rules (owner direction, 2026-10):
   - Headlines are ONE weight and wrap naturally. No forced two-line split,
     no bolder second line, no <em> in any heading on this page.
   - No decorative eyebrows or kickers above headings. The only small text is
     functional: each row's date, read time and primary topic.
   - No per-paper images or charts. The title is the hierarchy.

   Anatomy:
     header.page-hero.hub-hero          night hero: crumbs, h1, lede
     section.hub-start (night)          "start here": three typographic links
     .melt night -> cream
     section#library (cream)            h2, sticky topic filter, the list
     section.hub-reports (cream)        research reports block, always last
     .melt cream -> nightCool
     section#cta + footer               the standard diagnostic band

   Sections:
     1. Hero
     2. Section rhythm + headings
     3. Start here (night)
     4. Sticky topic filter
     5. Rows
     6. Reports block
     7. Small screens
     8. Reduced motion
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HERO
   A library page wants the reader in the list quickly, so the cover is
   shorter than the full subpage hero. One weight; the two sentences wrap
   where the measure puts them (balance keeps the lines even).
   -------------------------------------------------------------------------- */
.hub-hero { min-height: clamp(440px, 60svh, 640px); }
.page-hero.hub-hero h1 {
  max-width: 19ch;
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 400;
  line-height: 1.06;
}
.hub-hero .crumbs { font-size: 13px; }
.hub-hero .crumbs [aria-current] { color: var(--aeolus-text-on-dark-faint); }


/* --------------------------------------------------------------------------
   2. SECTION RHYTHM + HEADINGS
   One heading style for every section on the page: Zodiak, one weight,
   sentence case, one step above the row titles.
   -------------------------------------------------------------------------- */
.hub-sec { padding: clamp(1rem, 2vw, 2rem) var(--pad) clamp(4rem, 8vw, 7rem); }

main .hub-sec .hub-h2 {
  margin: 0 0 clamp(1.8rem, 3.4vw, 3rem);
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.6vw, 2.3rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: var(--aeolus-ls-display);
  color: var(--sv-ink);
  text-wrap: balance;
}


/* --------------------------------------------------------------------------
   3. START HERE (night, continues the hero's run)
   Three text columns on hairlines. No boxes, no labels: a gold tick on the
   rule, a title, one line of summary. The tick runs the width on hover.
   -------------------------------------------------------------------------- */
.ed-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2rem clamp(1.6rem, 3.4vw, 3.2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ed-pillar {
  position: relative;
  display: block;
  height: 100%;
  padding-top: clamp(1.3rem, 2vw, 1.7rem);
  border-top: 1px solid var(--aeolus-hairline-on-dark-strong);
  color: var(--sv-ink);
}
.ed-pillar::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 2.25rem; height: 1px;
  background: var(--aeolus-gold-400);
  transition: width 0.6s var(--ease-spring);
}
.ed-pillar:hover::before,
.ed-pillar:focus-visible::before { width: 100%; }
/* A title made of two sentences keeps each sentence whole where it can, so
   a wrap lands between them rather than stranding one word ("A" / "Not").
   Nothing is forced: on a wide line both sentences sit side by side. */
.ed-s { display: inline-block; }

.ed-ptitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: var(--aeolus-ls-display);
  color: var(--aeolus-text-on-dark);
  text-wrap: balance;
  transition: color 0.25s ease;
}
.ed-pillar:hover .ed-ptitle,
.ed-pillar:focus-visible .ed-ptitle { color: var(--aeolus-gold-400); }
.ed-pdek {
  margin: 0.85rem 0 0;
  max-width: 40ch;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--aeolus-text-on-dark-soft);
}


/* --------------------------------------------------------------------------
   4. STICKY TOPIC FILTER
   A row of text tabs on a hairline; the pressed one is ink with an ink rule
   under it. At rest it is just type on the page. Once it sticks under the
   nav dock the page script adds .is-stuck and a frosted strip fades in
   behind it (a pseudo-element, so nothing shifts).

   The library section uses overflow: clip instead of the canvas default
   (hidden): hidden makes the section a scroll container, which pins a sticky
   child to the section instead of the viewport. clip paints the same and
   does not. The bar's top is the nav's bottom edge, measured by the page
   script into --flt-top; the fallback matches the desktop dock.
   -------------------------------------------------------------------------- */
main > #library { overflow: hidden; overflow: clip; }

/* The aurora is percent-positioned, so on a section several screens tall its
   gold lobe would wash the whole right edge of the reading column. Keep it to
   the opening screen, where it meets the junction. */
main > #library > .bg-cream > .bg-aurora {
  top: -12vh;
  bottom: auto;
  height: max(1300px, 150vh);
}

.ed-wrap { position: relative; }

.ed-bar {
  position: sticky;
  top: var(--flt-top, 96px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid var(--sv-rule);
}
.ed-bar[hidden] { display: none; }
.ed-bar::before {
  content: "";
  position: absolute;
  inset: -10px -20px 0;
  z-index: -1;
  border-radius: var(--aeolus-radius-panel);
  border: 1px solid var(--aeolus-glass-light-border);
  background: rgba(241, 237, 229, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 14px 30px -12px rgba(26, 25, 22, 0.16);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.ed-bar.is-stuck::before { opacity: 1; }

.ed-filter {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(1.1rem, 2.1vw, 2rem);
}
.ed-filter button {
  position: relative;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--aeolus-text-on-light-body);
  font: 500 14.5px/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}
.ed-filter button::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--aeolus-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-spring);
}
.ed-filter button:hover,
.ed-filter button[aria-pressed="true"] { color: var(--aeolus-ink); }
.ed-filter button[aria-pressed="true"]::after { transform: scaleX(1); }
.ed-filter button:focus-visible { outline: 2px solid var(--aeolus-bronze); outline-offset: 2px; border-radius: 3px; }

.ed-status {
  flex: none;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--aeolus-text-on-light-body);
}


/* --------------------------------------------------------------------------
   5. ROWS
   Title and dek on the left; a narrow right-hand column carries the quiet
   meta (month, read time, primary topic), so the list scans like a ledger.
   Below 760px the meta folds into one line under the dek. The title link is
   stretched over the row: one tab stop per paper, the whole row clickable,
   the row draws the focus ring. On hover the title takes the bronze ink and
   an underline draws in.
   -------------------------------------------------------------------------- */
.ed-list { margin: 0; padding: 0; list-style: none; }
.ed-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem;
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(2rem, 3.2vw, 2.75rem) 0;
}
.ed-title, .ed-dek { grid-column: 1; }
/* A rule between VISIBLE rows only, so a filtered list never opens on a
   stray hairline under the bar. */
.ed-row:not([hidden]) ~ .ed-row:not([hidden]) { border-top: 1px solid var(--sv-rule); }
.ed-row[hidden] { display: none; }

.ed-title {
  margin: 0;
  max-width: 42ch;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.15vw, 1.95rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: var(--aeolus-ls-display);
  color: var(--sv-ink);
  text-wrap: balance;
}
.ed-link {
  color: inherit;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  padding-bottom: 2px;
  transition: background-size 0.5s var(--ease-spring), color 0.25s ease;
}
.ed-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ed-row:hover .ed-link,
.ed-link:focus-visible { color: var(--aeolus-bronze); background-size: 100% 1px; }
.ed-link:focus-visible { outline: none; }
.ed-row:has(.ed-link:focus-visible) { outline: 2px solid var(--aeolus-bronze); outline-offset: 6px; border-radius: 6px; }

.ed-dek {
  margin: 0.8rem 0 0;
  max-width: 64ch;
  font-size: clamp(0.98rem, 1.08vw, 1.04rem);
  line-height: 1.62;
  color: var(--sv-body);
  text-wrap: pretty;
}

.ed-meta {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  margin: 0;
  padding-top: 0.55rem;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: right;
  color: var(--aeolus-text-on-light-body);
}
.ed-meta time { color: var(--sv-ink); }
.ed-topic { color: var(--aeolus-bronze); }


/* --------------------------------------------------------------------------
   6. REPORTS BLOCK (cream continuation, always the last thing before the CTA)
   A closing ruled block, not a card: heading left, copy and one link right.
   The link is an ink outline (navigation, not conversion: the one gold chip
   on the way out belongs to the diagnostic band below).
   -------------------------------------------------------------------------- */
main > .hub-reports { padding-top: 0; }
main > #library { padding-bottom: clamp(3rem, 6vw, 5rem); }

.ed-reports {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 1.4rem clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding-top: clamp(2rem, 3.6vw, 3rem);
  border-top: 1px solid rgba(26, 25, 22, 0.55);
}
main .hub-sec .ed-reports .hub-h2 { margin: 0; }
.ed-reports p {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(0.98rem, 1.1vw, 1.06rem);
  line-height: 1.62;
  color: var(--sv-body);
}
.ed-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--aeolus-ink);
  border-radius: var(--v11-cta-radius, 5px);
  color: var(--aeolus-ink);
  font: 600 14px/1 var(--font-body);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ed-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.ed-links .ed-more { margin-top: 0; }
.ed-more .arrow { display: inline-block; transition: transform 0.35s var(--ease-spring); }
.ed-more:hover { background: var(--aeolus-ink); color: var(--aeolus-cream); }
.ed-more:hover .arrow { transform: translateX(3px); }

/* Cream focus ring: the house gold-400 ring is ~1.3:1 on cream. */
main .aeolus-canvas .ed-more:focus-visible { outline: 2px solid var(--aeolus-bronze); outline-offset: 3px; }
.ed-pillar:focus-visible { outline: 2px solid var(--aeolus-gold-400); outline-offset: 6px; border-radius: 2px; }

/* The closing band keeps the standard copy as one plain headline (no <em>
   second line); the lede avoids a one-word last line. */
.cta-band .cta-sub { text-wrap: pretty; }


/* --------------------------------------------------------------------------
   7. SMALL SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .ed-pillars { grid-template-columns: 1fr; gap: 2rem; }
  .ed-pdek { max-width: 52ch; }
  .ed-reports { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* One scrolling row of tabs: the bar is sticky, so every pixel of its
     height is taken from the list. The count stays for screen readers. */
  .ed-filter {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .ed-filter::-webkit-scrollbar { display: none; }
  .ed-filter button:last-child { margin-right: 24px; }
  .ed-status {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ed-bar::before { inset: -8px -14px 0; }
}

@media (max-width: 760px) {
  .page-hero.hub-hero h1 { max-width: none; }
  .ed-row { grid-template-columns: 1fr; grid-template-rows: none; padding: 1.75rem 0; }
  .ed-meta {
    grid-column: 1;
    grid-row: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    padding-top: 0;
    text-align: left;
  }
  .ed-meta > * + *::before {
    content: "\00B7";
    margin: 0 0.55rem;
    color: var(--aeolus-text-on-light-label);
  }
  .ed-title { font-size: clamp(1.4rem, 6vw, 1.7rem); }
  .ed-dek { margin-top: 0.65rem; font-size: 0.97rem; }
  .ed-meta { margin-top: 0.85rem; font-size: 13px; }
  .ed-filter button { font-size: 14px; }
}


/* --------------------------------------------------------------------------
   8. REDUCED MOTION: hover states still change, nothing travels.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ed-link, .ed-pillar::before, .ed-ptitle, .ed-more .arrow,
  .ed-filter button::after, .ed-bar::before { transition: none; }
  .ed-more:hover .arrow { transform: none; }
}