/* The homepage on the round ten web system. Every gap is a token measured from the letters (base.css trims every
   heading, paragraph and label to cap height and baseline). Sections: hero, how a study works and its line,
   studies, why (the cost chart), markets, validation, closing statement, footer. Two layouts:
   live:  the hero stands in a hold pinned for 30 svh, so the door you see is the door that becomes the walk-through's
          stage; the walk-through, the selector and the markets pin;
   still: captures, automated renders and reduced motion; the sections stack in order, each settled.
   The gaps between sections are set by home.js after layout (fitGaps), because the pinned sections centre their
   content in the viewport and the white left inside a pin counts toward the gap. */
/* headline A stays ink-2 on this page (the owner, 25 Oct), where the system draws a compared concept on the ramp */
:root { --data-compare: var(--ink-2); }

/* ---------- 1. Hero (docs/brand/web/hero.html): stack 120 / 48 / 40 / 24 from the letters, copy in columns 1 to 8
   (1 to 7 from 768 to 1279), the door 0.667 of the viewport tall on the content's right edge, its top on the
   headline's cap line; 210 by 420 under 1024; under 768 the door stands under the stack, 48 below the actions. */
.hero { padding-top: var(--s11); align-items: start; }
.hero-copy { grid-column: 1 / span 8; }
.hero h1 { white-space: nowrap; }
.hero h1 .ln { display: block; }
.hero .lead { margin-top: var(--s8); max-width: 34em; text-wrap: balance; }
.hero-acts { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s7); }
.hero-door { grid-column: 9 / span 4; justify-self: end; height: round(down, min(calc(100svh * 2 / 3), 720px), 2px); aspect-ratio: 1 / 2; }
/* The reach of the door's light: its far reflection (--light-far-reach of its height) is the last ink the hero puts
   on the page; masked from 45 % and blurred, it stays visible to about 0.95 of its length (iteration 1: measured from
   the near layer, the far layer's tail ran into the walk-through's question line). The next section is measured from
   here. Drawn nowhere; a box for the gap. */
.door-reach { position: absolute; left: 0; top: 100%; width: 100%; height: calc(var(--light-far-reach) * 100%); pointer-events: none; }
@media (max-width: 1279px) { .hero-copy { grid-column: 1 / span 7; } }
@media (max-width: 1023px) { .hero-door { height: 420px; } }
@media (max-width: 767px) {
  .hero { padding-top: var(--s9); }
  .hero-copy, .hero-door { grid-column: 1 / -1; }
  .hero-door { margin-top: var(--s8); }
}
/* The entrance (Aaru's, on our values): each line rises 8 px and fades in over 640 ms, 60 ms apart; the door fades. */
.hero-door.rv { transform: none; }
.measuring .rv { transform: none !important; transition: none !important; }

/* ---------- The opening, live. The hero stands in a hold pinned for 30 svh: the copy is carried up exactly as far as
   the page scrolls and fades on the ease curve, the light on the floor goes over the first half, and the door waits.
   The walk-through's section overlaps the hold's last viewport, so its stage pins at progress 0 the moment the hold
   lets go, with the door drawn where the hero's stood. ---------- */
.merged .hold, .frame-walk .hold { height: calc(100svh + 30svh); }
.merged .hold-pin, .frame-walk .hold-pin { position: sticky; top: 0; height: 100svh; overflow: clip; }
.merged #walk { margin-top: -100svh; }
.merged .hero-copy { will-change: opacity, transform; }
.merged .walk-canvas { opacity: 0; }
/* While the hero is on show the walk-through's section lies over the hold's last viewport; the section and all it
   holds let the pointer through, so the hero's button and link stay reachable (iteration 8, live watch: the section
   itself caught the pointer when only its pin was let through). */
.merged #walk.opening { pointer-events: none; }
/* A walk-through frame (?p=): the stage alone at the top of the viewport, as the visitor sees it there. */
.frame-walk #nav, .frame-walk #studies, .frame-walk #why, .frame-walk #markets, .frame-walk #validation,
.frame-walk #close, .frame-walk #foot { display: none; }
.frame-walk .hold { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; }

/* ---------- 2. How a study works (walk.js): heading to list 40, the list in columns 1 to 3, the stage in 5 to 12. The
   list is A.steps at its compact size (walk.js; number, 12, title, 8, line; steps 48 apart, from the letters;
   iterations/it2-steps-1to1.png). Under 1024 the three stand side by side over the stage, 48 apart; under 768 the
   lines go and the titles stay three across at the UI size, so the pinned view still holds the 3:4 stage. */
.walk-h { white-space: nowrap; }
@media (max-width: 1023px) { #walk .walk-list { column-gap: var(--s8); } }
@media (max-width: 767px) {
  #walk .walk-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s4); }
  #walk .step-t { font-size: var(--ui); line-height: var(--ui-lh); }
}

/* ---------- 2b. The line under the walk (r11): one body line at 52 em with its link, 80 under the walk's lowest ink. */

/* ---------- 3. Studies (selector.js): the list at 24 on a 56 pitch (the system), the panel in columns 6 to 12. The
   card's audience line is untrimmed so its descenders show (base.css trims .ui). */
#studies .m1 .aud .ui { text-box: none; }
#studies .sel-foot .sel-text { text-wrap: balance; }
/* The panel holds its tallest card with 40 of sky above and below at least (home.js sets the height where the square
   is too short). */
#studies .sel-pin .sel-panel.fitted { aspect-ratio: auto; max-height: none; }
#studies .sel-pin .sel-panel.fitted .sel-objs { padding-block: var(--s7); }

/* ---------- 4. Why Archetypes (A4's measure): the h3 and its line in columns 1 to 4, the chart in 5 to 12 with the h3's
   cap line on the chart's top gridline (32 into the chart, charts.js); under 1280 the chart takes the content width,
   48 under the line. */
.why { align-items: start; }
.why-copy { grid-column: 1 / span 4; padding-top: var(--s6); padding-right: var(--s8); }
.why-lead { margin-top: var(--s5); max-width: 22em; }
.why-chart { grid-column: 5 / span 8; min-width: 0; }
.why-ink { position: absolute; left: 0; right: 0; top: 27px; bottom: 10px; pointer-events: none; }
@media (max-width: 1279px) {
  .why-copy, .why-chart { grid-column: 1 / -1; }
  .why-copy { padding-top: 0; padding-right: 0; }
  .why-chart { margin-top: calc(var(--s8) - 27px); }   /* 48 from the line's baseline to the cap of the chart's top label */
}
.why-chart { position: relative; }
@media (max-width: 1279px) { .why-chart { margin-top: var(--s8); } }

/* ---------- 5. Validation (D2 order, C4 stat cards): the h3, the sentence 24 under it, the link 24 under that, in
   columns 1 to 4; the two dataset scores as stat cards in columns 5 to 12, the cards' hairline on the h3's cap line. */
.strip { align-items: start; }
.strip-copy { grid-column: 1 / span 4; padding-right: var(--s8); }
.strip-text { margin-top: var(--s5); max-width: 30em; }
.strip-act { margin-top: var(--s5); }
.strip-proof { grid-column: 5 / span 8; }
.strip-proof .ch-stat .label { max-width: 17em; text-wrap: balance; }
@media (max-width: 1279px) {
  .strip-copy, .strip-proof { grid-column: 1 / -1; }
  .strip-copy { max-width: 34em; padding-right: 0; }
  .strip-proof { margin-top: var(--s8); }
}

/* ---------- 6. Closing statement (C3): one centred serif line, the actions 48 under it, 200 above and below. */
.close { display: grid; justify-items: center; text-align: center; margin-top: var(--statement-space); padding-bottom: var(--statement-space); }
.close-acts { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s8); }

/* ---------- One section alone, for shots (?only=studies|markets|validation|close). */
.only main > :not(.only-on), .only #foot:not(.only-on), .only #nav { display: none; }
.only .only-on { margin-top: 0 !important; }
/* Under 480 the walk's steps stand in one column (device.css, round twelve); this page's three-abreast rule above yields. */
@media (max-width: 479px) { #walk .walk-list { grid-template-columns: minmax(0, 1fr); column-gap: 0; } }