/* Chapter scaffolding. <main> and sections let pointer events through to the canvas (3D hover/click);
   panels and interactive blocks take them back. */
main, .group, .chapter, .pin { pointer-events: none; }
.panel, .strip-wrap, .footer, .hero-note, .hero-inset { pointer-events: auto; }
#stage { touch-action: pan-y; }

.chapter {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--topbar-h) + 2rem) var(--gutter) var(--space-section);
}
.panel { width: 100%; max-width: var(--col); position: relative; }
.panel--wide { max-width: var(--wide); }
.panel p { max-width: 60ch; text-wrap: pretty; }
.panel .lede { max-width: min(34rem, 100%); }

/* Hero */
.chapter--hero { padding-bottom: 7rem; margin-bottom: 45vh; margin-bottom: 45svh; } /* a beat of open scene between the title and the setup, so the first camera move has room */
.chapter--hero .panel { max-width: min(46vw, 60rem); }
.hero-title {
  font-stretch: 125%; font-weight: 800; font-size: clamp(2.4rem, 4vw, 6.6rem);
  line-height: 0.94; letter-spacing: -0.015em; margin-bottom: 1.8rem; text-wrap: balance;
}
.hero-note {
  position: absolute; left: var(--gutter); bottom: 2.25rem; max-width: 26rem;
  font-size: var(--fs-caption); line-height: 1.5; color: var(--dim);
}
.hero-inset { width: 200px; margin: 1.75rem 0 0; }
.glance {
  display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; row-gap: 0.55rem; /* two by two: no separator dangles at a line break */
  margin: 1.5rem 0 0; padding-top: 0.9rem;
  border-top: 1px solid var(--hair); font-size: var(--fs-small); line-height: 1.3; color: var(--caption);
}
.glance li { display: inline-flex; align-items: baseline; gap: 0.4em; padding: 0 1rem; border-left: 1px solid var(--hair); white-space: nowrap; }
.glance b { font-stretch: 112%; font-weight: 760; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--accent-text); }
.chapter--hero .actions { margin-top: 1.4rem; }
.glance li:nth-child(odd) { padding-left: 0; border-left: 0; }
.glance li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--hair); }

.hero-inset figcaption { margin-top: 0.5rem; font-size: var(--fs-micro); color: rgba(var(--ivory-rgb), 0.78); }

/* Tall pinned chapters: sticky viewport, progress scrubbed by scroll */
.chapter--tall { display: block; padding: 0; height: 290vh; }
.chapter--arm { height: 340vh; }  /* pin scrub = height - 100vh: two beats (text, then the cost stat) get ~110vh each */
.chapter--data { height: 340vh; } /* 160 dots fill over the first 55 % of the scrub (~130vh), then the closing beats hold */
/* A step is one screen inside a chapter group: no pin, no full-height floor. Each owns a camera shot. */
.chapter--step { min-height: 64vh; min-height: 64svh; padding: 3rem var(--gutter) 2rem; }
.chapter--test { min-height: 90vh; min-height: 90svh; padding-bottom: 1.5rem; } /* tall enough that its shot holds while the headline is read */
.chapter--task { min-height: 125vh; min-height: 125svh; }
.chapter--task .panel > p + p { margin-top: 2.4rem; }
.pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center; padding: calc(var(--topbar-h) + 0.5rem) var(--gutter) 2rem;
  overscroll-behavior-y: none;
}
.scrub-in, [data-scrub-in] { will-change: opacity; }

/* Arm: two beats stacked in one cell, crossfaded by the scrub (JS adds .beats-on) */
.beats-on .beats { display: grid; }
.beats-on .beat { grid-area: 1 / 1; align-self: start; }
.stat-n {
  display: block; font-stretch: 125%; font-weight: 900; color: var(--noodle);
  font-size: clamp(3.4rem, 7.2vw, 7rem); line-height: 0.92; letter-spacing: -0.03em; white-space: nowrap;
}
.stat-l { display: block; margin-top: 0.9rem; max-width: 22rem; color: var(--ivory); }

@media (max-height: 760px) and (min-width: 821px) and (orientation: landscape), (max-height: 760px) and (min-width: 1101px) {
  .display { margin-bottom: 1rem; }
  .chapter--data .display { font-size: clamp(1.8rem, 3vw, 2.6rem); }
}
.chapter--data .panel { max-width: min(38rem, 41vw); }
.chapter--data .panel p { max-width: min(34rem, 100%); }

/* Portrait: the 3D owns the top ~46%. Text sits low on a scrim, with clear runs of scene between panels. */
@media (max-width: 820px), (orientation: portrait) and (max-width: 1100px) {
  :root { --fs-body: 1rem; --col: none; --wide: none; }
  .scrim { display: none; }
  .panel { text-shadow: none; }
  .chapter { padding: calc(var(--topbar-h) + 1rem) 0 0; align-items: flex-end; min-height: 135vh; min-height: 135svh; }
  .chapter--tall { padding: 0; min-height: 0; height: 220vh; height: 220svh; }
  .chapter--arm { height: 320vh; height: 320svh; }
  .chapter--data { height: 330vh; height: 330svh; }
  .chapter--step { height: auto; min-height: 68svh; padding: calc(var(--topbar-h) + 1rem) 0 0; align-items: flex-end; }
  .chapter--task { min-height: 108svh; }
  .chapter--test { min-height: 90svh; }
  .chapter--task .panel > p + p { margin-top: 1.6rem; }
  .glance { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); margin-top: 1rem; font-size: 0.8125rem; }
  .glance li { white-space: normal; }
  .glance li:nth-child(even) { padding-left: 0.85rem; }
  .glance b { font-size: 1rem; }
  .pin { padding: calc(var(--topbar-h) + 0.5rem) 0 0; align-items: flex-end; }
  .panel, .chapter--data .panel {
    max-width: none; padding: 3rem var(--gutter) 3.4rem;
    background: linear-gradient(to bottom, rgba(var(--veil-rgb), 0) 0, rgba(var(--veil-rgb), 0.6) 2.25rem, rgba(var(--veil-rgb), 0.86) 4.5rem, rgba(var(--veil-rgb), 0.9) 100%);
  }
  .pin .panel { padding-bottom: 3.4rem; padding-top: 3rem; }
  .display { font-size: clamp(1.75rem, 8vw, 2.4rem); }

  .chapter--hero { min-height: 100vh; min-height: 100svh; padding: 0; }
  .chapter--hero .panel {
    padding: 7rem var(--gutter) 4.6rem; max-width: none;
    background: linear-gradient(to top, rgba(var(--veil-rgb), 0.94) 0, rgba(var(--veil-rgb), 0.88) 62%, rgba(var(--veil-rgb), 0) 100%);
  }
  .hero-title { font-size: clamp(1.9rem, 8.6vw, 3.2rem); margin-bottom: 1rem; }
  .chapter--hero .lede { font-size: 0.9375rem; line-height: 1.5; }
  .chapter--hero .actions { flex-wrap: nowrap; gap: 0.5rem; margin-top: 1.1rem; }
  .chapter--hero .btn { min-height: 2.75rem; padding: 0 1rem; font-size: 0.875rem; white-space: nowrap; }
  .hero-note { left: var(--gutter); right: var(--gutter); bottom: 1rem; max-width: none; font-size: var(--fs-micro); line-height: 1.4; }
  .hero-inset { display: none; }
  .chapter--tall .panel > p, .chapter--tall .beat { font-size: 0.9375rem; line-height: 1.5; }
  .stat-n { font-size: clamp(3.2rem, 17vw, 4.6rem); }

  .chapter--data .pin .panel { padding-top: 2.75rem; padding-bottom: 3.2rem; }
  .chapter--data .display { font-size: 1.45rem; margin-bottom: 0.6rem; }
  .chapter--data .panel > p { font-size: 0.8125rem; line-height: 1.45; margin-top: 0.6rem; }
  .chapter--data .counter-main { font-size: clamp(1.6rem, 7.6vw, 2.1rem); }
  .chapter--data .counter-sub { font-size: 0.875rem; margin-top: 0.35rem; min-height: 0; }
  .chapter--data .counter-note { font-size: var(--fs-micro); margin-top: 0.35rem; }
  .chapter--data .stats { margin-top: 0.7rem; }
  .chapter--data .stats dd { font-size: 1.25rem; }
  .chapter--data .closing { margin-top: 0.6rem; font-size: 1.15rem; }
}
@media (max-width: 820px) and (max-height: 720px), (orientation: portrait) and (max-width: 1100px) and (max-height: 720px) {
  .chapter--tall .display { font-size: 1.6rem; margin-bottom: 0.7rem; }
}
@media (max-width: 360px) { .chapter--hero .btn { padding: 0 0.8rem; font-size: 0.8125rem; } }

/* No WebGL: the page still reads fully over the darkened footage */
.no-stage .hero-note { display: none; }
@media (max-height: 760px) and (min-width: 821px) and (orientation: landscape), (max-height: 760px) and (min-width: 1101px) { .hero-inset { display: none; } } /* short windows: the copy comes first */

/* ---- Portrait tablets (stacked layout, >= 600px wide): the phone composition with tablet-sized type and panels. Query = stacked.js isTabletStacked ---- */
@media (min-width: 600px) and (max-width: 820px) and (min-height: 700px), (orientation: portrait) and (min-width: 821px) and (max-width: 1100px) {
  :root { --fs-body: 1.1875rem; --fs-caption: 0.9375rem; --fs-micro: 0.875rem; --gutter: clamp(28px, 6vw, 4.5rem); --topbar-h: calc(4.75rem + var(--sat)); }
  .panel, .chapter--data .panel { padding: 4rem var(--gutter) 4.6rem; }
  .pin .panel { padding-top: 4rem; padding-bottom: 4.6rem; }
  .panel p, .panel .lede { max-width: 40rem; }
  .display { font-size: clamp(2.5rem, 5.4vw, 3.5rem); margin-bottom: 1.1rem; }
  .chapter--hero .panel { max-width: none; padding: 9rem var(--gutter) 6.4rem; }
  .hero-title { font-size: clamp(3.2rem, 7.4vw, 4.8rem); margin-bottom: 1.3rem; }
  .chapter--hero .lede { font-size: 1.3125rem; line-height: 1.5; max-width: 34rem; }
  .chapter--hero .panel .lede--sub { font-size: 1.3125rem; max-width: 34rem; }
  .chapter--hero .glance { font-size: 1.0625rem; margin-top: 1.4rem; }
  .chapter--hero .glance b { font-size: 1.375rem; }
  .chapter--hero .actions { margin-top: 1.7rem; gap: 0.75rem; }
  .chapter--hero .btn { min-height: 3.5rem; padding: 0 1.6rem; font-size: 1.0625rem; }
  .hero-note { bottom: 1.6rem; font-size: var(--fs-caption); }
  .chapter--tall .panel > p, .chapter--tall .beat { font-size: 1.1875rem; line-height: 1.5; }
  .stat-n { font-size: clamp(5rem, 14vw, 7.6rem); }
  .chapter--data .pin .panel { padding-top: 2.6rem; padding-bottom: 3rem; }
  .chapter--data .display { font-size: clamp(1.9rem, 4.2vw, 2.5rem); margin-bottom: 0.5rem; }
  .chapter--data .panel > p { font-size: 1rem; line-height: 1.45; margin-top: 0.5rem; }
  .chapter--data .counter { margin-top: 0.9rem; padding-top: 0.7rem; }
  .chapter--data .counter-main { font-size: clamp(2rem, 5vw, 2.9rem); }
  .chapter--data .counter-sub { font-size: 1rem; margin-top: 0.4rem; }
  .chapter--data .counter-note { font-size: var(--fs-caption); margin-top: 0.35rem; }
  .chapter--data .stats { margin-top: 0.7rem; }
  .chapter--data .stats dd { font-size: 1.6rem; }
  .chapter--data .closing { margin-top: 0.6rem; font-size: 1.5rem; }
}