/* site2_v6.css — the front-page + section-page system. Built from the inline overrides in
   templates/site2_home_v10.html and templates/site2_consumer_v1.html (mockups, 2026-09-16). */
/* v4 additions on top of the /redesign system */
.snapshot-strip{margin-top:2px;color:#8b95a5;font-size:.48rem;font-weight:750;letter-spacing:.04em;line-height:1.1;text-transform:uppercase;white-space:nowrap}
.hero-eyebrow-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.hero-stamp{color:#8b95a5;font-size:.76rem}
.moment-tag.stress{color:#fbbf24}
.scene-copy .scene-figure{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font-size:1.65rem;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.scene-copy .scene-figure span{font-size:.78rem;font-weight:700;letter-spacing:.02em;color:#667085}
.scene-copy .scene-figure span.down{color:#c24132}.scene-copy .scene-figure span.up{color:#2f7d32}
.sections{border-top:1px solid var(--line);padding:26px 0 0}
.sections-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.sections h4{margin:0 0 8px;font-size:.76rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:#b45309}
.sections a{display:block;padding:3px 0;color:var(--muted);font-size:.86rem}
.sections a:hover{color:var(--ink)}
@media(max-width:760px){.sections-grid{grid-template-columns:1fr 1fr}}
/* v6 */
.snapshot-name{font-size:.92rem}
.lead h1{font-size:clamp(2rem,3.3vw,2.9rem);max-width:23ch;text-wrap:balance}
.lead-body p{break-inside:auto}
.story .fig span.neutral{color:var(--muted)}
/* v7 */
.lead-chart{border-top:0;padding-top:0}
.lead-chart .chart-source{margin-top:6px;color:#8b95a5;font-size:.76rem;text-align:right}
/* v8: period sits beside the title; value + delta on one row */
@media(max-width:760px){
  .snapshot-item{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
  .snapshot-quote{display:contents}
  .snapshot-name{order:0;font-size:.8rem}
  .snapshot-period{order:1;display:inline;margin:0 0 0 auto;font-size:.62rem}
  /* v9: no source strip on mobile; tighter cards */
  .snapshot-strip{display:none}
  /* v10: mobile lead chart keeps its aspect ratio instead of shrinking inside a fixed height */
}
@media(max-width:760px){.lead-chart svg{height:auto;aspect-ratio:732/280}.lead-chart .y-axis{bottom:22px}}
@media(max-width:760px){
  /* v10: hidden spark doubles as a full-width line break so value+delta always start row 2 */
  .snapshot-spark{display:block;order:2;flex-basis:100%;height:0;margin:0;overflow:hidden}
  .snapshot-spark svg{display:none}
  .mobile summary{font-size:1.5rem;line-height:1;padding:4px 0}
  .snapshot-value{order:3;display:inline;margin-top:4px;font-size:1.05rem}
  .snapshot-change{order:4;display:inline;margin-top:4px}
  .snapshot-item{padding:9px 10px 10px}
  .snapshot-grid{gap:8px}
  .snapshot{padding:10px 0}
}

/* section pages */
/* section page */
.lead h1{max-width:28ch}
@media(max-width:760px){.lead-chart svg{height:auto;aspect-ratio:732/280}.lead-chart .y-axis{bottom:22px}}
.lead-chart .chart-plot{padding-right:48px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;color:var(--muted);font-size:.78rem}
.legend span{white-space:nowrap}
.legend i{display:inline-block;width:18px;height:3px;vertical-align:middle;margin-right:6px;border-radius:2px}
.line.b{stroke:#0f172a}
.gridline.zero{stroke:#111;stroke-width:2}
.score .fig b{color:#b45309}
.you{padding:34px 0 40px;border-top:1px solid var(--line)}
.you-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)}
.you-grid>div{padding:18px 28px 0 0}
.you-grid>div+div{padding-left:28px;border-left:1px solid var(--line)}
.you h3{margin:0 0 6px;font-size:1.05rem;letter-spacing:-.02em}
.you p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}
.you .n{display:block;margin-bottom:8px;font-size:1.6rem;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
@media(max-width:820px){.you-grid{grid-template-columns:1fr}.you-grid>div,.you-grid>div+div{padding:16px 0;border-left:0;border-top:1px solid var(--line)}.you-grid>div:first-child{border-top:0}}

/* v11: trim long copy on mobile — full briefing is one tap away */
@media(max-width:760px){
  .lead .stand{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  .lead-chart .chart-reading{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .lead-body{display:none}
  .story p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
}