/* The page as a feature article: one centred reading column set in the publication serif, figures open on the page and a
   little wider than the text, captions beneath them in the sans, and quiet rules instead of cards. Loaded after the
   shared stylesheet, so it overrides only what it names; the colour tokens (and so the charts) are the shared ones. */
:root { --read: 54rem; --fig: var(--read); --serif-body: 1.25rem; }   /* figures within the text's margins */

/* the reading column */
main .page { width: auto; max-width: var(--fig); margin-inline: auto; }
.sec-head, .sec-head.stack, .step-copy, .verdict, .step > .prose { max-width: var(--read); margin-inline: auto; }
.sec-head { display: block; }
.sec-head .prose, .sec-head.stack .prose, .step-text, .step-text.one, .step-between, .prose.wide {
  columns: auto; max-width: var(--read); font-family: var(--display); font-size: var(--serif-body); line-height: 1.7; font-variation-settings: "opsz" 14; }
.step-text.one, .sec-head.stack .prose.one { max-width: var(--read); }   /* the template's inline 46rem, for short texts */
.step-text p, .sec-head .prose p { margin-bottom: 1.05rem; }
.step-text ul, .sec-head .prose ul { padding-left: 1.3rem; }
.step-text strong, .sec-head .prose strong { font-weight: 600; }

/* headings: the section's question large, the step's title quieter */
.sec-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.1rem); line-height: 1.06; letter-spacing: -0.01em; margin: 0 0 1.4rem; font-variation-settings: "opsz" 72; }
.step { margin-top: 3.6rem; }
.step-h { margin-bottom: 0.9rem; gap: 0.75rem; }
.step h3 { font-size: 1.62rem; line-height: 1.2; font-variation-settings: "opsz" 36; }
.step-n { width: 1.65rem; height: 1.65rem; font-size: 0.8rem; font-family: var(--sans); }
section { border-bottom: none; padding-block: clamp(3.2rem, 7vw, 5.5rem) 1rem; }
section + section { border-top: 1px solid var(--rule); }

/* the hero: the title at display size, a standfirst, the byline */
header .page { max-width: var(--read); margin-inline: auto; width: auto; }
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); line-height: 1.02; letter-spacing: -0.02em; max-width: none; margin-bottom: 2rem; font-variation-settings: "opsz" 72; }
.lede { columns: auto; max-width: var(--read); font-family: var(--display); font-size: 1.32rem; line-height: 1.55; color: var(--ink-2); font-variation-settings: "opsz" 24; }
.lede p { margin-bottom: 1.1rem; }

/* figures: open on the page, the caption beneath */
.chart, .chart.tail, .chart.plates, .chart.disc { display: block; background: none; border: none; border-radius: 0; padding: 0; margin: 2.4rem auto 0; max-width: var(--fig); }
.chart + .chart { margin-top: 3rem; }
.chart > .cap, .chart.tail > .cap { grid-column: auto; grid-row: auto; align-self: auto; max-width: var(--read); margin: 0.9rem auto 0; font-family: var(--sans);
  font-size: 0.86rem; line-height: 1.55; color: var(--ink); }
.chart .fig-scroll { max-width: var(--fig); margin-inline: auto; }
.chart.disc .fig-scroll { max-width: 50rem; }
.chart .plate-photo { margin-inline: auto; max-width: 40rem; }
.chart .blink-btns { max-width: var(--fig); margin: 0 auto 0.6rem; }
.chart .chart-table { max-width: var(--fig); margin-inline: auto; }
.step > .chart:first-child { margin-top: 1rem; }

/* photographs on the light box keep their box (they are images of the plates), at the figure width */
.labels2, .lightbox { max-width: var(--fig); margin-inline: auto; }

/* verdicts: each test's result in its own panel, raised from the page with a blue edge, under the heading "Result" */
.verdict, .verdict.one { display: block; border-top: none; border-left: 4px solid var(--ours); background: var(--surface); border-radius: 0 6px 6px 0;
  padding: 1.3rem 1.6rem 1.4rem; margin-top: 3.2rem; }
/* the summary cards: one per test, the question first in the display face */
.score.three { grid-template-columns: repeat(3, 1fr); margin-top: 1.6rem; }
@media (max-width: 900px) { .score.three { grid-template-columns: 1fr; } }
.score.three .sc .o p:first-child { font-family: var(--display); font-size: 1.22rem; line-height: 1.3; margin-bottom: 0.7rem; }
.score.three .sc { gap: 0.4rem; }
.verdict .vlab { font-family: var(--display); font-size: 1.3rem; color: var(--ours); margin-bottom: 0.45rem; }
.verdict .vtext { font-family: var(--display); font-size: 1.22rem; line-height: 1.6; }

/* the footer reads as notes */
footer .page { max-width: var(--fig); margin-inline: auto; width: auto; }
footer { font-size: 0.86rem; }

@media (max-width: 640px) {
  :root { --serif-body: 1.08rem; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .lede { font-size: 1.14rem; }
}

.chart-table .tables { grid-template-columns: 1fr; gap: 1.6rem; }   /* the two dates tables one above the other, within the text's width */
.chart-table .tables table { width: 100%; }
.chart-table th, .chart-table td:first-child { white-space: normal; }   /* long step names and headings wrap, so a table fits the page without scrolling */

/* figure numbers: the label opens the caption; references in the text link to the figure */
.fig-n { font-weight: 600; color: var(--ink); }
.fig-ref { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.15em; }
.fig-ref:hover { text-decoration-color: currentColor; }
.chart[id], .lightbox[id], .labels2[id] { scroll-margin-top: 1.5rem; }

/* the shadow plates: square panels, so narrower than the line charts */
.chart .fig-scroll:has(svg[data-fig="fig.shadow_plates"]) { max-width: 50rem; }
/* captions on the light box stay dark (the box is light in both themes); captions on the page follow the page's ink */
.lbcap { color: var(--ink-2); } .lbcap .fig-n { color: var(--ink); }
.lightbox .lbcap { color: #4f5961; } .lightbox .lbcap .fig-n { color: #13171b; }