/* Position, flow and the eight-pixel spacing grid. */
* { box-sizing: border-box; }
html { scroll-padding-block: 24px; }
body { margin: 0; }
[hidden] { display: none !important; }
.page__wrap { width: min(100%, 1280px); margin-inline: auto; padding-inline: 24px; }
.page__header { padding-block: 24px 0; }
.page__identity { margin: 0 0 8px; }
.breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 0; margin: 0; list-style: none; }
.breadcrumb__item { display: flex; align-items: center; min-height: 44px; min-width: 0; }
.breadcrumb__item + .breadcrumb__item::before { content: '/'; padding-right: 16px; }
.breadcrumb__link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
.page__main { padding-block: 40px 64px; }
.hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: end; padding-bottom: 40px; }
.hero__copy, .hero__aside { min-width: 0; }
.hero__kicker { margin: 0 0 16px; }
.hero__title { margin: 0 0 24px; max-width: 18ch; }
.hero__intro { max-width: 62ch; }
.hero__intro p { margin: 0 0 16px; }
.hero__aside { padding: 24px; border-radius: 24px; }
.hero__aside p { margin: 0 0 16px; }
.hero__jump { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 16px; }
.heat-key { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-block: 24px; }
.heat-key__item { display: flex; align-items: center; gap: 8px; }
.heat-key__dot { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 4px; }
.question-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.question-matrix__cell { display: grid; grid-template-columns: minmax(0, 1fr) 24px; grid-template-rows: auto 1fr auto; gap: 16px 8px; min-height: 224px; padding: 24px; border-radius: 24px; }
.question-matrix__category, .question-matrix__title, .question-matrix__copy { grid-column: 1; margin: 0; }
.question-matrix__arrow { grid-column: 2; grid-row: 1 / 4; align-self: end; }
.question-matrix__cell:last-child { grid-column: span 3; min-height: 176px; }
.hub__start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-block: 40px; align-items: center; }
.hub__start .answer { padding-block: 16px; border: 0; }
.editorial { margin: 0; min-width: 0; }
.editorial__frame { position: relative; border-radius: 24px; overflow: hidden; }
.editorial__image { display: block; width: 100%; height: auto; aspect-ratio: var(--image-ratio, 8 / 5); object-fit: cover; padding: 0; }
.editorial__caption { margin-top: 16px; max-width: 60ch; }
.page__reading { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 2fr); gap: 48px; align-items: start; }
.answer-stack { min-width: 0; }
.answer { padding-block: 32px; border-top: 1px solid; }
.answer__title { margin: 0 0 16px; }
.answer__body { max-width: 72ch; }
.answer__body p { margin-block: 0 16px; }
.answer__body p:last-child { margin-bottom: 0; }
.page__rail { display: grid; gap: 32px; min-width: 0; }
.myth { padding: 24px; border-radius: 24px; }
.myth__kicker { margin: 0 0 16px; }
.myth__title { margin: 0 0 24px; }
.myth__toggle { min-height: 48px; width: 100%; padding: 12px 16px; cursor: pointer; border-radius: 16px; }
.myth__answer { margin-top: 24px; }
.myth__answer p { margin-block: 0 16px; }
.myth__answer p:last-child { margin-bottom: 0; }
.sources { padding: 24px; border: 1px solid; border-radius: 24px; }
.sources__title { margin: 0 0 16px; }
.sources__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sources__link { display: flex; align-items: center; min-height: 48px; padding: 8px 0; overflow-wrap: anywhere; }
.next-question { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 8px 24px; padding: 24px; margin-top: 32px; border-radius: 24px; min-height: 104px; }
.next-question__label, .next-question__title { grid-column: 1; }
.next-question__arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.page__footer { padding-block: 32px 48px; border-top: 1px solid; }
.page__footer-copy { max-width: 72ch; margin: 0 0 16px; }
.page__footer-link { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 16px; }
.skip-link { position: absolute; left: 24px; top: 8px; transform: translateY(-200%); padding: 12px 16px; min-height: 48px; z-index: 5; }
.skip-link:focus { transform: none; }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero__title { max-width: 23ch; }
  .hero__aside { max-width: 72ch; }
  .question-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-matrix__cell:last-child { grid-column: span 2; }
  .page__reading { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .page__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page__rail .editorial { grid-column: 1 / -1; max-width: 720px; }
}
@media (max-width: 600px) {
  .page__header { padding-top: 16px; }
  .page__main { padding-block: 24px 40px; }
  .hero { padding-bottom: 24px; }
  .hero__title { max-width: 18ch; margin-bottom: 16px; }
  .hero__aside { padding: 24px; }
  .question-matrix, .page__rail, .hub__start { grid-template-columns: minmax(0, 1fr); }
  .question-matrix__cell, .question-matrix__cell:last-child { grid-column: 1; min-height: 192px; }
  .hub__start { gap: 24px; padding-block: 24px; }
  .answer { padding-block: 24px; }
  .breadcrumb__item + .breadcrumb__item::before { padding-right: 8px; }
}
@media print {
  .page__wrap { width: 100%; padding-inline: 0; }
  .hero, .page__reading, .page__rail, .hub__start { display: block; }
  .hero__aside, .editorial, .myth__toggle, .skip-link { display: none !important; }
  .myth__answer[hidden] { display: block !important; }
  .answer, .myth, .sources { break-inside: avoid; }
  .question-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .question-matrix__cell:last-child { grid-column: span 2; }
}