/* v0.5 editorial layout and section-by-section reading.
   Uses the locked forest/cream tokens from styles.css without changing them. */

:root { --story-topbar: 66px; }

html {
  scroll-padding-top: var(--story-topbar);
  scroll-behavior: smooth;
}

.story-panel {
  min-height: calc(100svh - var(--story-topbar));
  display: flex;
  align-items: center;
  padding: clamp(60px, 8vh, 108px) 0 !important;
  scroll-snap-align: start;
  scroll-margin-top: 0;
}
.story-panel > .wrap { width: 100%; }
.argument-story .story-panel:first-child { padding-top: clamp(56px, 7vh, 94px) !important; }

.story-section-head { max-width: 870px; margin-bottom: 38px; }
.story-section-head .eyebrow { margin-bottom: 16px; }
.story-section-head h2 {
  font-size: clamp(32px, 3.9vw, 49px);
  line-height: 1.09;
  max-width: 25ch;
  text-wrap: balance;
  margin-bottom: 18px;
}
.story-section-head > p:last-child {
  max-width: 68ch;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--ink-soft);
}
.band-deep .story-section-head > p:last-child { color: #c5d1cc; }

/* Opening */
.story-opening-panel .eyebrow { margin-bottom: 26px; }
.story-opening-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .75fr); gap: clamp(34px, 5vw, 90px); align-items: center; }
.story-opening-grid h1 {
  font-size: clamp(42px, 5.4vw, 71px);
  line-height: 1.035;
  letter-spacing: -.035em;
  max-width: 13.5ch;
}
.story-hero-lede {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.52;
  max-width: 47ch;
  color: var(--ink-soft);
  margin-top: 28px;
}
.story-opening-grid .btn-row { margin-top: 32px; }
.story-opening-aside {
  padding-left: 27px;
  border-left: 3px solid var(--accent);
  align-self: center;
}
.story-overline {
  display: block;
  font: 700 11px/1.4 Inter, ui-sans-serif, sans-serif;
  letter-spacing: .115em;
  text-transform: uppercase;
  color: var(--accent);
}
.story-opening-aside p {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.28;
  margin: 15px 0 22px;
  max-width: 23ch;
}
.story-metadata { display: flex; flex-wrap: wrap; gap: 9px 14px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.story-metadata span + span::before { content: '·'; margin-right: 13px; color: var(--accent); }

/* From federal inputs to regional capacity */
.story-chain { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--deep-line); border-bottom: 1px solid var(--deep-line); margin: 40px 0 30px; }
.story-chain-step { padding: 28px 28px 28px 0; }
.story-chain-step + .story-chain-step { padding-left: 28px; border-left: 1px solid var(--deep-line); }
.story-chain-step > span { display: block; font-size: 12px; font-weight: 700; color: var(--deep-accent); margin-bottom: 20px; }
.story-chain-step b { display: block; color: #fff; font-size: 17px; font-weight: 600; margin-bottom: 9px; }
.band-deep .story-chain-step p { color: #c5d1cc; font-size: 14px; line-height: 1.55; }
.story-sources-inverse { max-width: 99ch; line-height: 1.65; font-size: 14px; }
.band-deep .story-sources-inverse { color: #c5d1cc; }
.story-sources-inverse a { color: #a9e3be; text-underline-offset: 3px; }

/* Policy foundations and focused institutions */
.story-two-lanes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.story-lane { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px,3vw,34px); display: flex; flex-direction: column; }
.story-lane-agency { border-top: 4px solid var(--accent); }
.story-lane h3 { margin-top: 14px; margin-bottom: 14px; font-size: clamp(21px,2.3vw,27px); max-width: 24ch; }
.story-lane p { font-size: 15px; color: var(--ink-soft); line-height: 1.65; max-width: 53ch; }
.story-lane-foot { display: block; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); margin-top: auto; padding-top: 17px; }
.story-caveat { font-size: 14px; line-height: 1.6; margin-top: 22px; max-width: 93ch; color: var(--muted); }

/* Work that agencies do */
.story-function-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: 18px 40px; }
.story-function-grid article { border-top: 2px solid var(--accent); padding: 22px 6px 14px 0; }
.story-function-number { color: var(--accent); font-size: 12px; font-weight: 700; }
.story-function-grid h3 { margin: 9px 0 10px; font-size: clamp(21px, 2.3vw, 26px); }
.story-function-grid p { font-size: 15px; line-height: 1.58; color: var(--ink-soft); max-width: 56ch; margin-bottom: 16px; }
.story-function-grid article > span:last-child { display:block; font-size: 12px; color: var(--accent); font-weight: 600; }

/* Three meaningful stages, each made up of three capabilities. */
.story-capability-groups { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.story-capability-group { border-top: 3px solid var(--accent); padding-top: 22px; }
.story-capability-group .eyebrow { margin-bottom: 9px; }
.story-capability-group h3 { font-size: clamp(20px, 2vw, 24px); margin-bottom: 20px; }
.story-capability-list { border-top: 1px solid var(--line); }
.story-capability { display:grid; grid-template-columns: 23px 1fr; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.story-capability-index { font-size: 11px; font-weight: 700; color: var(--accent); padding-top: 2px; }
.story-capability b { display:block; margin-bottom: 6px; font-size: 15px; font-weight: 600; color: var(--ink); }
.story-capability span span { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
.story-method-note { font-size: 13px; color: var(--muted); margin-top: 30px; }
.story-method-note a { color: var(--accent); }

/* Existing case cards are reused without replacing their source data. */
.story-institution-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap: 14px; }
.story-institution-grid .institution-card { padding: 22px; min-height: 205px; }
.story-institution-grid .institution-card .archetype { font-size: 12px; }
.story-institution-grid .institution-card p { font-size: 13px; }

/* These are episode-backed observations, not a leaderboard. */
.story-finding-grid { gap: 32px 48px; }
.story-finding-grid .finding-card { padding-top: 19px; }
.story-finding-grid .finding-card h3 { font-size: clamp(20px, 2vw, 23px); max-width: none; white-space: nowrap; }
.story-finding-grid .finding-card p { font-size: 15px; line-height: 1.6; min-height: 4.8em; max-width: 58ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story-evidence-link { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Final panel */
.story-last-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 70px; align-items: center; }
.story-last-grid h2 { font-size: clamp(37px, 4.5vw, 60px); line-height: 1.07; max-width: 16ch; }
.story-last-action > p:first-child { max-width: 53ch; font-size: 17px; color: #ced9d1; line-height: 1.65; }
.story-last-action .btn-row { margin-top: 26px; }
.band-deep .story-disclaimer { margin-top: 28px; font-size: 12px; color: var(--deep-muted); line-height: 1.55; }

/* Give each section on the other three routes its own visual viewport.
   Long matrices and source tables can grow without hiding content. */
#app > .page.has-scroll-panels { max-width: none; padding: 0; }
.page.has-scroll-panels > .screen-panel {
  min-height: calc(100svh - var(--story-topbar));
  scroll-snap-align: start;
  scroll-margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vh, 88px) var(--gutter);
  border-bottom: 1px solid var(--line);
}
.page.has-scroll-panels > .screen-panel:nth-child(even) { background: var(--wash); }
.page.has-scroll-panels > .screen-panel > * { width: 100%; max-width: var(--max-app); margin-left: auto; margin-right: auto; }
.page.has-scroll-panels .page-head { margin-bottom: 38px; }
.page.has-scroll-panels .section { margin-top: 0; }
.page.has-scroll-panels .rule { display: none; }
.page.has-scroll-panels .matrix-wrap { margin-block: 0; }
.page.has-scroll-panels .method-grid { margin-top: 0; }

/* Match the personal site's full-section navigation on generous desktop
   viewports. Smaller screens, short windows and reduced motion scroll normally. */
@media screen and (min-width: 1051px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y mandatory; }
  .argument-story > .story-panel,
  .page.has-scroll-panels > .screen-panel {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .footer { scroll-snap-align: end; }
}

@media(max-width:940px) {
  .story-opening-grid, .story-last-grid { grid-template-columns: 1fr; gap: 34px; }
  .story-opening-grid h1 { max-width: 16ch; }
  .story-opening-aside { max-width: 580px; }
  .story-capability-groups { grid-template-columns: 1fr 1fr; gap: 24px; }
  .story-institution-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .story-finding-grid .finding-card h3 { white-space: normal; }
  .story-finding-grid .finding-card p { display: block; min-height: 0; overflow: visible; }
}

@media(max-width:620px) {
  :root { --story-topbar: 58px; }
  html { scroll-snap-type: none; scroll-behavior: auto; }
  .story-panel { min-height: auto; padding: 56px 0 !important; }
  .argument-story .story-panel:first-child { padding-top: 42px !important; }
  .story-opening-grid h1 { font-size: clamp(36px, 10.5vw, 46px); }
  .story-hero-lede { font-size: 17px; margin-top: 22px; }
  .story-opening-grid { gap: 28px; }
  .story-section-head { margin-bottom: 26px; }
  .story-section-head h2 { font-size: clamp(30px, 8.5vw, 37px); }
  .story-section-head > p:last-child { font-size: 16px; }
  .story-chain { grid-template-columns: 1fr; }
  .story-chain-step, .story-chain-step + .story-chain-step { padding: 18px 0; border-left: 0; border-top: 1px solid var(--deep-line); }
  .story-chain-step:first-child { border-top: 0; }
  .story-chain-step > span { margin-bottom: 6px; }
  .story-two-lanes, .story-function-grid, .story-capability-groups, .story-institution-grid, .story-finding-grid { grid-template-columns: 1fr; }
  .story-opening-aside { padding-left: 18px; }
  .story-lane { padding: 22px; }
  .page.has-scroll-panels > .screen-panel { min-height: auto; padding: 48px var(--gutter); }
  .page.has-scroll-panels .page-head { margin-bottom: 26px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }
@media print {
  html { scroll-snap-type: none; }
  .story-panel, .page.has-scroll-panels > .screen-panel { min-height: auto; break-inside: avoid; }
}