/* Sections 02 to 05 as he picked them on 2026-11-06: answer 1 of the volgorde round,
   with answer 2's day-28 bars and words grafted into section 04. Built by lock-opbouw.py
   from template3-volgorde/variants.css; every state class became :root, which weighs the
   same as one class, so each rule keeps the weight it had behind the switch. */

/* Sections 02 to 05, three answers to the order. Every rule is scoped under its state's class on <html>,
   so state 0 (no class) renders exactly as checkpoints/template3-daarna. Sections 01 and 06 onward keep
   their markup; only their eyebrow numbers move, because answer 2 has one section fewer and answer 3 one more. */
/* ---------- the plumbing: the page's own contents step aside,
an answer's come on ---------- */
:root #who > .wrap,
:root #answer > .v2-night,
:root #answer > .v2-day{display:none}
/* ---------- the sections an answer adds, and the grammar they share ---------- */
:root .vsec{overflow:hidden; isolation:isolate}
:root .vsand{background:var(--d-sand)}
:root .vpaper{background:var(--d-paper)}
:root .vsec :is(h2,h3){color:var(--d-ink)}
:root .vsec .eyebrow{color:var(--d-ink)}
:root .vpaper .eyebrow{color:var(--d-teal)}
:root .vsec :is(h2,h3) em{--mk:rgba(255,254,253,.62); color:var(--d-ink); padding:0 .06em; margin:0 -.06em;
  background:linear-gradient(transparent 60%, var(--mk) 60%, var(--mk) 90%, transparent 90%); -webkit-box-decoration-break:clone; box-decoration-break:clone}
:root .vpaper :is(h2,h3) em{--mk:rgba(220,198,158,.85); color:var(--d-teal)}
:root .vsec h2{max-width:17em}
:root .vsec .lead{margin-top:clamp(20px, 2.2vw, 30px); color:rgba(15,35,38,.78)}
/* a row of short facts: the page's rule-above-a-block grammar, in ink */
:root .vfacts{list-style:none; margin:clamp(44px, 5vw, 72px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(22px, 2.6vw, 40px)}
:root .vfacts-2{grid-template-columns:repeat(2, minmax(0,1fr)); max-width:54em}
:root .vfacts li{border-top:2px solid var(--d-ink); padding-top:16px}
:root .vfacts b{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height:1.3; color:var(--d-ink); margin-bottom:10px}
:root .vfacts p{margin:0; font-size:clamp(.96rem, .92rem + .2vw, 1.04rem); line-height:1.6; color:rgba(15,35,38,.8)}
@media (max-width:860px) {
:root .vfacts,
:root .vfacts-2{grid-template-columns:minmax(0,1fr); gap:0}
:root .vfacts li{border-top-width:1px; padding:18px 0}
:root .vfacts li:first-child{border-top-width:2px}
}
/* ======================================================================================================
   02, in all three answers — WHAT COMES AFTER. The night comes up under section 01's day along the page's
   own edge; the four cancers, then the bar that runs the whole width. The bar and its caption move here
   out of 04, so the page states the one death number once and in the place where it explains the aim.
   ====================================================================================================== */
:root #who{background:var(--d-ink); padding-block:0; overflow:hidden; isolation:isolate}
:root #who::before{content:""; position:absolute; z-index:-1; left:0; right:0; top:-1px; height:clamp(56px, 8vw, 128px); pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V30C1000 70 820 104 600 98C400 92 180 40 0 70Z' fill='%23ECEDE6'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
:root #who .v2-night{padding-top:clamp(140px, 16vw, 232px)}
:root #who .v2-night .eyebrow{color:var(--d-sand)}
:root #who .v2-night .small-label{color:var(--d-sand)}
:root #who .four li{border-top:1px solid rgba(220,198,158,.55); color:var(--name); font-weight:300}
:root #who .four{margin-bottom:clamp(40px, 5vw, 72px)}
:root #who .v2-h{color:var(--name)}
:root #who .v2-h em{color:var(--d-sand); background:none; padding:0; margin:0}
/* the big number's "more than": the page sets this only inside 04, and the number's own tight tracking
   glues the small words together without it */
:root #who .fig-num em{font-size:.3em; font-style:italic; letter-spacing:0; margin-right:.22em}
:root #who .v2-num em{font-size:.24em}
/* ======================================================================================================
   1. FOUR BEATS. 02 what comes after · 03 the aim, and under it who it can help (SMAD4 arrives as the
   answer to "for whom", with the 100-bar it already had) · 04 what it did, the growth curves in mice ·
   05 the llama. The turn to day falls at the top of 03, where the answer begins.
   ====================================================================================================== */
:root #answer{background:var(--d-paper)}
:root #answer .v2-day{padding-block:clamp(190px, 15vw, 216px) clamp(104px, 10vw, 152px)}
:root #answer .aim-h{max-width:13em}
:root #answer .a1-whom{margin-top:clamp(64px, 7vw, 108px); padding-top:clamp(40px, 4.4vw, 60px); border-top:1px solid var(--d-line2)}
:root #answer .a1-whom .small-label{color:var(--d-teal); margin-bottom:clamp(20px, 2.2vw, 30px)}
:root #answer .a1-whom .fig-num{color:var(--d-ink); font-size:clamp(4.2rem, 1.6rem + 8.6vw, 10.5rem)}
:root #answer .a1-whom .fig-h{max-width:15em}
:root #answer .a1-whom .fig-sub{color:var(--d-ink3)}
:root #answer .a1-whom .range{margin-top:clamp(40px, 4.4vw, 64px)}
:root #answer .a1-whom .bars span{background:rgba(15,35,38,.12)}
:root #answer .a1-whom .bars span.a,
:root #answer .a1-whom .key i.bar.a{background:var(--d-ink); box-shadow:none}
:root #answer .a1-whom .bars span.b,
:root #answer .a1-whom .key i.bar.b{background:rgba(255,254,253,.7); box-shadow:inset 0 0 0 1.5px var(--d-ink)}
:root #answer .a1-whom .key{color:var(--d-ink3)}
:root #answer .a1-also{margin:clamp(34px, 3.6vw, 48px) 0 0; max-width:42em; font-size:clamp(1rem, .96rem + .2vw, 1.1rem); line-height:1.6; color:rgba(15,35,38,.82)}
:root #answer .a1-also em{font-style:normal; font-weight:700; color:var(--d-ink)}
@media (min-width:721px) {
:root #answer .a1-whom .bars{height:clamp(80px, 8.5vw, 124px)}
}
/* the end states at day 28 */
:root .ve{margin:clamp(44px, 5vw, 72px) 0 0}
:root .ve-h{margin:0 0 16px; font-size:.75rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--d-ink)}
:root .ve-rows{display:grid; gap:clamp(10px, 1.2vw, 16px)}
/* the value column is a fixed width, so all four tracks are the same length and the bars compare */
:root .ve-row{display:grid; grid-template-columns:minmax(0, 15em) minmax(0,1fr) 7.2em; gap:0 clamp(14px, 1.8vw, 26px); align-items:center}
:root .ve-nm{font-size:clamp(.95rem, .92rem + .2vw, 1.05rem); line-height:1.3; color:rgba(15,35,38,.78)}
:root .ve-row.lit .ve-nm{font-weight:700; color:var(--d-ink)}
:root .ve-track{position:relative; height:clamp(22px, 2.4vw, 32px); background:rgba(15,35,38,.1); border-radius:0 3px 3px 0}
:root .ve-track i{position:absolute; left:0; top:0; bottom:0; width:var(--w); background:rgba(15,35,38,.4); border-radius:0 3px 3px 0; transform-origin:left center}
:root .ve-row.lit .ve-track i{background:var(--d-ink)}
:root .ve-v{font-family:var(--serif); font-weight:300; font-size:clamp(1.05rem, 1rem + .5vw, 1.45rem); color:var(--d-ink); white-space:nowrap; font-variant-numeric:tabular-nums}
:root .ve figcaption{margin-top:clamp(16px, 1.8vw, 24px); max-width:50em; font-size:.82rem; line-height:1.55; color:rgba(15,35,38,.66)}
:root .ve figcaption b{font-weight:700; color:rgba(15,35,38,.88)}
:root.motion .ve-track i{transform:scaleX(0); transition:transform 1.2s var(--ease); transition-delay:calc(.25s + var(--i, 0) * 170ms)}
:root.motion .in .ve-track i{transform:none}
@media (max-width:620px) {
:root .ve-row{grid-template-columns:minmax(0,1fr) 6.4em; gap:6px clamp(12px, 3vw, 20px)}
:root .ve-nm{grid-column:1 / -1}
}
/* Section 06 as he picked it on 2026-11-06 ("3 is good"): answer 3 of the stand round,
   the arc. Built by lock-stand.py from template3-stand/variants.css; every .v3 became
   :root, which weighs the same as one class, so each rule keeps the weight it had behind
   the switch. The llama section and the old section 06 are gone from the markup, so the
   switch's own plumbing is not carried over. */
/* ---------- what all three share ---------- */
:root .sv .lead{color:var(--ink-soft)}
:root .sv .note{margin-top:14px}
:root .sv h3{color:var(--name)}
/* ---------- 3: the arc ---------- */
:root .sv-arc{list-style:none; margin:clamp(52px, 6vw, 92px) 0 0; padding:0}
:root .sv-arc li{position:relative; display:grid; grid-template-columns:minmax(0, 13em) minmax(0,1fr);
  gap:clamp(22px, 4vw, 76px); padding:clamp(22px, 2.6vw, 36px) 0; border-top:1px solid var(--line-strong)}
:root .sv-arc li:last-child{border-bottom:1px solid var(--line-strong)}
:root .sv-a-w{font-family:var(--serif); font-weight:300; line-height:1.08; letter-spacing:-.02em;
  font-size:clamp(1.55rem, 1.05rem + 1.5vw, 2.5rem); color:var(--sand)}
:root .sv-a-w small{display:block; font-family:var(--sans); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); margin-top:8px}
:root .sv-arc b{display:block; font-family:var(--serif); font-weight:300; line-height:1.24; color:var(--name);
  font-size:clamp(1.28rem, 1.05rem + .9vw, 1.85rem)}
:root .sv-arc p{margin:11px 0 0; color:var(--ink-soft); max-width:42em}
:root .sv-arc li.here{background:linear-gradient(90deg, rgba(220,198,158,.10), rgba(220,198,158,0) 68%)}
:root .sv-arc li.here .sv-a-w{color:var(--name)}
:root .sv-arc li.here .sv-a-w::before{content:""; display:inline-block; width:10px; height:10px; border-radius:50%;
  background:var(--sand); margin-right:.5em; vertical-align:.16em; box-shadow:0 0 0 6px rgba(220,198,158,.16)}
:root .sv-arc li.open{opacity:.6}
:root .sv-arc li.open .sv-a-w{font-style:italic}
@media (max-width:860px){
:root .sv-arc li{grid-template-columns:minmax(0,1fr); gap:10px}
:root .sv-a-w small{display:inline; margin:0; letter-spacing:.12em}
}