.opening-band { background: var(--peach); }
.opening-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); align-items: center; gap: 4.5rem; padding-block: 3.5rem 4rem; }
.opening-copy h1 { max-width: 13ch; margin-bottom: 1.5rem; }
.opening-copy .opening-deck { margin-bottom: 1.7rem; }
.opening-copy > .quiet-link { display: flex; margin-top: .55rem; width: fit-content; }
.first-entry { background: var(--sky); padding: 2.5rem 2rem 1.5rem; border-radius: 80px 80px 20px 20px; border-bottom: 8px solid var(--blue); }
.entry-label { margin-bottom: .8rem; }
.first-entry h2 { margin-bottom: 1rem; font-size: 2rem; }
.first-entry p { font-size: 1rem; }
.first-entry .entry-takeaway { padding-top: 1rem; margin-top: 1rem; border-top: 2px solid var(--white); }
.first-entry .source-jump { margin-top: .5rem; }
.reading-pages { padding-top: 1.5rem; }
.chapter { display: grid; grid-template-columns: minmax(0, .68fr) minmax(0, 1.45fr); gap: 4rem; padding-block: 3.8rem; border-bottom: 3px solid var(--sky); }
.chapter-heading p:last-child { margin-top: 1rem; max-width: 28ch; }
.chapter-tab { display: inline-block; padding: .1rem .7rem; border-radius: 100px; background: var(--mustard); margin-bottom: .9rem; }
.chapter-content { max-width: 72ch; }
.chapter-content > .source-jump { margin-top: .7rem; }
.comparison-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-block: 1.35rem .5rem; font-size: 1rem; overflow: hidden; border-radius: 18px; border: 2px solid var(--blue); text-align: left; table-layout: fixed; }
.comparison-table caption { text-align: left; font-size: 1rem; font-weight: 700; color: var(--blue-deep); padding-bottom: .7rem; caption-side: top; }
.comparison-table thead { background: var(--blue); color: var(--white); }
.comparison-table th, .comparison-table td { padding: 1rem 1.1rem; vertical-align: top; font-size: 1rem; font-weight: 400; overflow-wrap: break-word; }
.comparison-table thead th { font-weight: 700; }
.comparison-table th:first-child { width: 34%; }
.comparison-table tbody th { color: var(--blue-deep); font-weight: 700; background: var(--sky); }
.comparison-table tbody td { background: var(--white); }
.comparison-table tbody tr + tr > * { border-top: 3px solid var(--paper); }
.comparison-table .question-prompt { margin-top: .8rem; }
.product-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--sky); border-radius: 22px; overflow: hidden; margin-top: 1.5rem; }
.product-comparison > div { padding: 1.4rem; }
.product-comparison > div + div { background: var(--peach); }
.product-comparison h4 { margin-bottom: .75rem; }
.evidence-spread { margin-block: 3.5rem 1rem; padding: 2.5rem; border-radius: 36px; background: var(--sky); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem; }
.evidence-intro .chapter-title { margin-bottom: 1rem; }
.evidence-intro .question-prompt { margin-top: 1rem; }
.trial-figure { align-self: center; padding: 1.8rem; background: var(--white); border-radius: 22px; }
.chart-heading { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.3rem; }
.chart-row p { font-size: 1rem; margin-bottom: .5rem; }
.chart-row + .chart-row { margin-top: 1.2rem; }
.change-track { display: grid; grid-template-columns: 1fr 1fr; height: 32px; position: relative; background: var(--paper); }
.change-track::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; border-left: 2px solid var(--ink); }
.change-bar { height: 32px; align-self: center; }
.change-bar-less { grid-column: 1; justify-self: end; width: 76%; background: var(--blue); border-radius: 12px 0 0 12px; }
.change-bar-more { grid-column: 2; width: 25%; background: var(--mustard); border-radius: 0 12px 12px 0; }
.chart-direction { display: flex; justify-content: space-between; margin-top: .7rem; font-size: 1rem; }
.trial-figure figcaption { padding-top: 1.2rem; margin-top: 1.2rem; border-top: 2px solid var(--sky); }
.trial-figure figcaption p { font-size: 1rem; }
.faq-notes details { border-top: 2px solid var(--rule); }
.faq-notes details:last-child { border-bottom: 2px solid var(--rule); }
.faq-notes summary { min-height: 64px; padding: 1rem 2rem 1rem 0; font-size: 1.15rem; font-weight: 700; line-height: 1.4; cursor: pointer; position: relative; list-style: none; color: var(--blue-deep); }
.faq-notes summary h4 { font: inherit; color: inherit; text-wrap: wrap; }
.faq-notes summary::-webkit-details-marker { display: none; }
.faq-notes summary::after { content: "+"; position: absolute; right: .2rem; top: .8rem; font-size: 1.4rem; }
.faq-notes details[open] summary::after { content: "−"; }
.faq-notes .answer { padding-bottom: 1.2rem; }
.faq-notes .source-jump { margin-top: .5rem; }
.next-spread { padding: 2rem; background: var(--mustard); border-radius: 28px; margin-block: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.next-spread h2 { font-size: 2rem; max-width: 26ch; margin-bottom: .7rem; }
.next-spread p { max-width: 52ch; }
.next-spread .button { flex-shrink: 0; }
.page-footnotes { padding-block: 2rem; border-top: 3px solid var(--blue); }
.page-footnotes > h2 { font-size: 2rem; margin-bottom: 1.5rem; }
.footnote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
.source-note { min-width: 0; scroll-margin-top: 2rem; }
.source-note h3 { font-size: 1.35rem; margin-bottom: .6rem; }
.source-note p { font-size: 1rem; max-width: 64ch; }
.source-note a { font-size: 1rem; display: flex; width: fit-content; align-items: center; min-height: 48px; min-width: 44px; padding-block: .55rem; line-height: 1.45; overflow-wrap: anywhere; }
.source-note:target { background: var(--sky); border-radius: 14px; outline: 10px solid var(--sky); }
.missing-page { min-height: 55vh; padding-block: 4rem; }
.missing-page h1 { max-width: 17ch; margin-bottom: 1.5rem; }
.missing-page > p { max-width: 62ch; }
.missing-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

@media (max-width: 1000px) {
  .opening-layout { gap: 2rem; }
  .chapter { gap: 2rem; }
  .evidence-spread { padding: 2rem; gap: 1.5rem; }
  .next-spread { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 800px) {
  .opening-layout { grid-template-columns: 1fr; padding-block: 2rem 2.5rem; }
  .opening-copy h1 { max-width: 17ch; }
  .first-entry { max-width: 600px; padding: 2rem 1.5rem 1rem; border-radius: 48px 48px 18px 18px; }
  .chapter { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 2.7rem; }
  .chapter-heading p:last-child { max-width: 60ch; }
  .evidence-spread { grid-template-columns: 1fr; margin-block: 2.5rem .5rem; }
}
@media (max-width: 520px) {
  .opening-copy .opening-deck { font-size: 1.1rem; }
  .opening-copy .button { width: 100%; }
  .product-comparison { grid-template-columns: 1fr; }
  .comparison-table th, .comparison-table td { padding: .8rem .7rem; }
  .comparison-table th:first-child { width: 36%; }
  .evidence-spread { padding: 1.4rem 1rem; border-radius: 26px; }
  .trial-figure { padding: 1.2rem 1rem; }
  .next-spread { padding: 1.5rem; border-radius: 22px; }
  .footnote-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .page-footnotes { padding-top: 1.5rem; }
}

@media print {
  .opening-layout, .chapter, .evidence-spread { display: block; padding: 1rem 0; }
  .opening-layout > * + *, .chapter > * + *, .evidence-spread > * + * { margin-top: 1rem; }
  .first-entry, .trial-figure, .evidence-spread { background: white; border: 1px solid #888; border-radius: 0; }
  .next-spread, .site-footer { background: white; }
  .faq-notes details::details-content { content-visibility: visible; }
}
