/* Piece-specific overrides only. Layout for the stage, controls and
 * scrollytelling comes from /assets/lab-kit/lab-kit.css; colours and type
 * from /assets/isegoria.css. Add rules here for this piece's own figures. */
.hero .kicker { font-family: var(--sans); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.hero { max-width: 46rem; }
.hero .ig-page-nav { margin-inline: 0; max-width: none; }
.hero h1 { margin: 0 0 .5rem; }
.hero .lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-soft); max-width: 44rem; font-style: italic; }
main > section > p, main > p, main > section > ul, main > section > ol { max-width: 42rem; }
main > section { margin-block: 3.5rem; }
main > section > h2 { margin-bottom: .9rem; }
main > section > h3 { margin: 1.6rem 0 .5rem; }
main > section + section { border-top: 1px solid var(--rule); padding-top: 3rem; }
main > section > p + p, main > section > h3 + p, .lab > p + p { margin-top: 1em; }
.lab { margin-block: 3rem; }
.lab > p { max-width: 44rem; margin-bottom: 1rem; }
.sources { border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1.5rem; }

/* stages, labels, part list */
.stage-bar { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .6rem; }
.stage-bar button, .part-list button { font: inherit; font-size: .78rem; padding: .3rem .65rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink-soft); cursor: pointer; }
.stage-bar button.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stage-bar button:hover, .part-list button:hover { border-color: var(--ink-soft); color: var(--ink); }
.stage-text { font-size: .95rem; color: var(--ink-soft); min-height: 3.2em; margin: 0 0 .8rem; max-width: 62rem; }
.lab-stage { aspect-ratio: 3 / 2; }
.lab-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lab-labels[hidden] { display: none; }
.lab-label { position: absolute; left: 0; top: 0; transform: translate(-100vw, -100vh); font-family: var(--sans); font-size: .72rem; line-height: 1.15; color: var(--ink); background: color-mix(in oklab, var(--paper) 90%, transparent); border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); border-radius: 4px; padding: .16rem .42rem; white-space: nowrap; box-shadow: 0 1px 3px rgb(0 0 0 / .12); transition: opacity .2s; }
.lab-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lab-leaders line { stroke: var(--ink); stroke-width: 1; opacity: .75; }
.lab-leaders circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
@media (max-width: 640px) { .lab-label { font-size: .66rem; padding: .1rem .32rem; } }
.part-list { margin: .8rem 0 0; font-size: .85rem; }
.part-list summary { cursor: pointer; color: var(--ink-soft); }
.part-list div { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lab-controls fieldset button + button { margin-left: .4rem; }
.lab-readout span { margin-right: 1rem; }
h3 { font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
@media (max-width: 640px) { .lab-stage { aspect-ratio: 1; } .stage-text { min-height: 0; } }