/* Topic navigation, series labels, and the four-story editorial selection. */
.section-nav > div { gap: clamp(14px, 2.2vw, 30px); flex-wrap: wrap; }
.section-nav a[aria-current="location"] { font-weight: 700; }
.section-nav a[aria-current="location"]::after { position: absolute; content: ''; bottom: -1px; height: 3px; background: var(--ink); inset-inline: 0; }
.story-meta a:hover { text-decoration: underline; text-underline-offset: 4px; }
.story-meta .series { font-size: .875rem; }
.story-meta .series::before { content: '·'; margin-right: 10px; color: var(--muted); }
.three-stories { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 44px); }
.three-stories .story-card { grid-template-columns: 1fr; gap: 22px; }
.three-stories .mini-visual { aspect-ratio: 1.65; min-height: 200px; padding: 24px; }
.three-stories .story-card h2, .three-stories .story-card h3 { font-size: clamp(30px, 2.65vw, 44px); }
.mini-inflation { background: var(--acid); color: var(--ink); }
.mini-inflation > strong { font: 500 clamp(36px, 4.2vw, 64px)/1 var(--sans); letter-spacing: -.055em; white-space: nowrap; }
.mini-price-line { display: flex; flex-direction: column; gap: 5px; padding-top: 12px; border-top: 1px solid #12131060; }
.mini-price-line b { font: 500 1rem/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.archive-grid--single { grid-template-columns: 1fr; }
.archive-grid--single .story-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.archive-grid--single .mini-visual { aspect-ratio: 1.75; min-height: 260px; padding: 32px; }
.archive-grid--single .story-card h2 { font-size: clamp(38px, 4.4vw, 68px); }
.archive-head .eyebrow { display: block; margin-bottom: 16px; }
.series-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; font-size: .875rem; }
.series-links > span { color: var(--muted); }
.series-links a { text-decoration: underline; text-underline-offset: 4px; }
.editorial-note p + p { margin-top: 14px; }
.basket-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-block: 16px 24px; }
.basket-steps > div { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 2px solid var(--ink); }
.basket-steps > div:last-child { border-color: #687d00; }
.basket-steps span { font-size: .9375rem; }
.basket-steps strong { font: 500 clamp(24px, 2.6vw, 38px)/1.15 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.basket-steps small { font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.inflation-hero .comparison-hero-inner strong { font-size: clamp(44px, 7vw, 112px); }
@media (max-width: 1000px) {
  .section-nav > span { display: none; }
  .three-stories { grid-template-columns: 1fr; }
  .three-stories .story-card { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); align-items: start; }
  .three-stories .mini-visual { min-height: 200px; aspect-ratio: 1.45; }
}
@media (max-width: 760px) {
  .section-nav { min-height: 56px; }
  .section-nav > div { width: 100%; justify-content: space-between; column-gap: 10px; row-gap: 0; }
  .section-nav a { font-size: .875rem; }
  .three-stories .story-card, .archive-grid .story-card { grid-template-columns: 1fr; gap: 20px; }
  .three-stories .mini-visual, .archive-grid .mini-visual { min-height: 210px; aspect-ratio: 1.8; padding: 24px; }
  .three-stories .story-card h2, .three-stories .story-card h3 { font-size: 32px; }
  .mini-inflation > strong { font-size: clamp(40px, 7vw, 56px); }
  .mini-price-line b { font-size: .875rem; }
  .archive-grid--single .story-card { grid-template-columns: 1fr; gap: 24px; }
  .archive-grid--single .mini-visual { min-height: 220px; padding: 26px; }
  .archive-grid--single .mini-inflation > strong { font-size: clamp(40px, 9vw, 64px); }
  .archive-grid--single .story-card h2 { font-size: clamp(34px, 6.5vw, 48px); }
  .inflation-hero .comparison-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .inflation-hero .comparison-hero-inner strong { font-size: 64px; }
}
@media (max-width: 520px) {
  .basket-steps { grid-template-columns: 1fr; gap: 12px; }
  .basket-steps > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; }
  .basket-steps small { grid-column: 1 / -1; }
  .basket-steps strong { font-size: 30px; }
}
@media (max-width: 390px) {
  .three-stories .story-card { grid-template-columns: 1fr; }
  .three-stories .mini-visual { aspect-ratio: 1.8; }
  .mini-inflation > strong { font-size: 40px; }
}

/* Editorial hierarchy: a lead story, then a readable table of contents. */
.shell { max-width: 1640px; }
.masthead { padding-bottom: 20px; }
.publication-name { font-size: clamp(66px, 10vw, 152px); }
.masthead-note { font: 400 clamp(19px, 1.9vw, 28px)/1.1 var(--serif); }
.section-nav { min-height: 58px; }
.section-nav a { font-weight: 500; }
.feature { padding-block: 28px 38px; gap: clamp(30px, 4.3vw, 68px); }
.feature-image { aspect-ratio: 1.65; }
.feature h1 { font-size: clamp(44px, 5.9vw, 88px); }
.feature-copy > p { font-size: clamp(18px, 1.5vw, 21px); }
.story-meta { gap: 12px; }
.story-meta .category { border: 1px solid var(--ink); padding: 4px 7px; font-size: .75rem; letter-spacing: .045em; line-height: 1.2; }
.story-meta .category::before, .story-meta .series::before { display: none; }
.story-meta .series { font: italic 400 1.125rem/1 var(--serif); color: var(--muted); }
.section-title { margin-block: 30px 20px; }
.section-title h2 { font: 500 1.25rem/1.3 var(--sans); }
.section-title > span, .archive-count { font: 400 .8125rem/1.5 var(--mono); color: var(--muted); }
.story-list { border-top: 1px solid var(--ink); }
.story-row { display: grid; grid-template-columns: minmax(210px, .9fr) minmax(0, 2fr) 108px; gap: clamp(26px, 3.2vw, 50px); align-items: center; padding-block: 30px; border-bottom: 1px solid var(--line); }
.story-row:last-child { border-bottom: 0; }
.story-row-art { display: block; align-self: stretch; }
.story-row .mini-visual { height: 100%; min-height: 220px; aspect-ratio: 1.6; padding: 22px; }
.story-row-copy { padding-block: 4px; }
.story-row h2, .story-row h3 { font: 400 clamp(32px, 3.3vw, 52px)/1.05 var(--serif); letter-spacing: -.02em; margin: 14px 0 12px; max-width: 24ch; text-wrap: balance; }
.story-row h2 a:hover, .story-row h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.story-row-copy > p { font-size: 1rem; line-height: 1.6; max-width: 52ch; color: var(--muted); }
.story-row-end { display: flex; flex-direction: column; align-items: end; align-self: stretch; padding-block: 4px; }
.story-number { font: 400 2.75rem/1 var(--serif); color: #72776a; }
.story-row-end .read-time { font: 400 .75rem/1.4 var(--mono); margin-top: auto; padding-top: 20px; white-space: nowrap; }
.row-open { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: .875rem; white-space: nowrap; }
.row-open .arrow { transition: transform .2s; }
.row-open:hover .arrow { transform: translate(2px, -2px); }
.story-row .mini-cash strong { font-size: clamp(34px, 3vw, 48px); }
.story-row .mini-inflation > strong { font-size: clamp(34px, 3.3vw, 50px); }
.mini-bars { height: 110px; padding-top: 0; flex-shrink: 0; }
.mini-bars b, .mini-bars i { flex-shrink: 0; }
.story-row .mini-bars { height: 110px; max-width: none; }
.story-index { padding-bottom: 28px; }
.editorial-note { padding-block: 34px 40px; }
.editorial-note h2 { font-size: clamp(30px, 2.9vw, 42px); }
.editorial-note p { font-size: 1.0625rem; max-width: 66ch; }
.archive-head { padding-top: 42px; align-items: center; }
.archive-head h1 { font-size: clamp(58px, 7.5vw, 112px); }
.archive-intro { max-width: 42ch; }
.archive-count { display: block; margin-top: 16px; }
.archive-list { padding-bottom: 34px; }
.series-links > span { color: #c3c7b8; }

/* The article has a quiet reading column and a usable outline on every screen. */
.article-header h1 { text-wrap: balance; }
.article-header .article-deck { max-width: 55ch; }
.article-byline { border-top: 1px solid var(--line); padding-top: 17px; }
.article-layout { grid-template-columns: 185px minmax(0, 680px); gap: clamp(40px, 6vw, 100px); }
.article-aside { top: 24px; }
.article-aside a { padding: 6px 0 6px 12px; border-left: 2px solid transparent; line-height: 1.45; }
.article-aside li { margin-bottom: 7px; }
.article-aside a[aria-current="location"] { color: var(--ink); border-color: var(--ink); font-weight: 600; }
.article-aside .aside-subject { padding-top: 18px; }
.prose { line-height: 1.85; }
.prose h2 { font-size: clamp(27px, 2.65vw, 35px); margin-top: 46px; }
.prose .figure-panel { border-top: 2px solid var(--ink); }
.figure-top span { flex-shrink: 1; }
.figure-caption { color: #4d5345; }
.source-ref { display: inline-block; min-width: 18px; text-align: center; }
.comparison-hero-inner { padding: clamp(24px, 3.4vw, 44px); }
.mobile-contents { display: none; }
.risk-bar-row { grid-template-columns: 100px minmax(0, 1fr) 64px; gap: 16px; }
.risk-track { min-width: 0; }

/* Practice feedback keeps the reader's choice and the correct answer explicit. */
.learning-sample { padding: clamp(22px, 3.2vw, 36px); border-top: 4px solid var(--ink); }
.sample-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.sample-heading .eyebrow { background: var(--acid); padding: 5px 8px; }
.sample-subject { font-size: .8125rem; color: var(--muted); }
.learning-sample h2 { font: 400 clamp(32px, 3.1vw, 44px)/1.12 var(--serif); margin: 24px 0; text-wrap: balance; }
.learning-sample legend { margin-bottom: 20px; }
.sample-option { transition: background-color .15s, border-color .15s; }
.sample-option:hover { border-color: var(--ink); }
.sample-option:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.option-content { min-width: 0; flex: 1; }
.option-copy { display: block; }
.option-verdict { display: block; margin-top: 7px; font: 600 .75rem/1.4 var(--mono); }
form[data-quiz-state="answered"] .sample-option[data-answer-state="correct"] { background: #f1f5df; border: 2px solid var(--ink); padding: 13px; box-shadow: inset 4px 0 var(--acid); }
form[data-quiz-state="answered"] .sample-option[data-answer-state="selected"] { background: #f3f3ee; border-color: var(--ink); box-shadow: none; }
.sample-option[data-answer-state="other"] { background: var(--white); box-shadow: none; }
form[data-quiz-state="answered"] .sample-option { cursor: default; }
.sample-feedback { border-top: 0; padding-top: 2px; }
.result-status { display: block; font: 600 .8125rem/1.4 var(--mono); margin-bottom: 12px; }
.sample-feedback h3 { font-size: 1.25rem; }
.answer-explanations { margin: 22px 0 15px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.answer-explanations summary { padding: 15px 0; cursor: pointer; font-size: .9375rem; font-weight: 600; }
.answer-explanations dl { margin: 0; padding-bottom: 6px; }
.answer-explanations dl > div { padding-block: 14px; border-top: 1px solid var(--line); }
.answer-explanations dt { font-size: .9375rem; font-weight: 600; line-height: 1.55; }
.answer-explanations dd { margin: 8px 0 0; font-size: .9375rem; line-height: 1.65; color: var(--muted); }
.sample-feedback .btn-plain { min-height: 44px; }
@media (max-width: 1100px) {
  .story-row { grid-template-columns: minmax(180px, .9fr) minmax(0, 1.8fr) 90px; gap: 26px; }
  .story-row h2, .story-row h3 { font-size: 36px; }
  .story-row .mini-visual { min-height: 220px; padding: 20px; }
  .story-row .mini-cash > div { display: block; }
  .story-row .mini-cash strong { display: block; font-size: 36px; }
  .article-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 34px; }
}
@media (max-width: 760px) {
  .publication-name { font-size: clamp(58px, 13.2vw, 98px); }
  .feature { gap: 23px; }
  .feature h1 { font-size: clamp(46px, 9.5vw, 70px); }
  .story-row { grid-template-columns: 180px minmax(0, 1fr); gap: 14px 24px; align-items: start; padding-block: 26px; }
  .story-row-art { grid-row: 1 / 3; }
  .story-row h2, .story-row h3 { font-size: 32px; }
  .story-row-end { grid-column: 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 0; }
  .story-number { display: none; }
  .story-row-end .read-time { padding: 0; margin: 0; }
  .story-row .mini-inflation > strong { font-size: 32px; }
  .archive-head { padding-block: 32px 28px; }
  .archive-intro { margin-top: 18px; }
  .archive-head p { margin: 0; }
  .article-layout { display: block; padding-top: 24px; }
  .mobile-contents { display: block; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 30px; }
  .mobile-contents summary { display: flex; justify-content: space-between; align-items: center; list-style: none; font-size: .9375rem; font-weight: 600; padding: 16px 0; cursor: pointer; }
  .mobile-contents summary::-webkit-details-marker { display: none; }
  .mobile-contents summary > span { font-size: 24px; line-height: 1; transition: transform .2s; }
  .mobile-contents[open] summary > span { transform: rotate(45deg); }
  .mobile-contents ol { padding: 0 0 14px; list-style: none; margin: 0; }
  .mobile-contents a { display: block; padding-block: 10px; font-size: .9375rem; color: var(--muted); }
  .mobile-contents a[aria-current="location"] { color: var(--ink); font-weight: 600; }
  .prose h2 { margin-top: 34px; }
  .risk-bar-row { grid-template-columns: 80px minmax(0, 1fr) 58px; gap: 10px; }
  .inflation-hero .comparison-hero-inner > div + div { padding-left: 0; padding-top: 25px; border-left: 0; border-top: 1px solid #656b59; }
  .sample-heading { gap: 10px; }
}
@media (max-width: 540px) {
  .story-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .story-row-art { grid-row: auto; }
  .story-row .mini-visual { aspect-ratio: 1.85; min-height: 220px; padding: 24px; }
  .story-row .mini-cash > div { display: flex; }
  .story-row .mini-cash strong, .story-row .mini-inflation > strong { font-size: 44px; }
  .story-row-end { grid-column: auto; }
  .story-row h2, .story-row h3 { font-size: 36px; }
  .section-title { gap: 12px; }
  .price-comparison { grid-template-columns: 1fr; }
  .price-comparison > div + div { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .price-comparison .big-number { font-size: 48px; }
  .comparison-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .comparison-hero-inner > div { gap: 17px; }
  .comparison-hero-inner > div + div { border-left: 0; padding-left: 0; border-top: 1px solid #656b59; padding-top: 24px; }
  .comparison-hero-inner strong { font-size: clamp(58px, 14vw, 76px); }
  .learning-sample { padding: 20px; }
  .learning-sample h2 { font-size: 34px; }
  .sample-actions .btn { width: 100%; }
  .sample-option { padding: 13px 11px; gap: 10px; }
  form[data-quiz-state="answered"] .sample-option[data-answer-state="correct"] { padding: 12px 10px; }
  .risk-bar-row { grid-template-columns: minmax(0, 1fr) 65px; gap: 8px 12px; }
  .risk-bar-row > span:first-child { grid-column: 1 / -1; }
}
@media (max-width: 390px) {
  .publication-name { font-size: 15.1vw; }
}
@media (prefers-reduced-motion: reduce) {
  .sample-option, .row-open .arrow, .mobile-contents summary > span { transition: none; }
}
