/* ============================================================
   06 · Transition — "So what is going wrong?"
   Built from Board Specs/landing-05-transition.md: a brief
   transition beat. The line holds centred on screen, then the
   page scrolls naturally into the problem sequence. No
   additional animation — the section itself is the transition
   (§4.9).
   ============================================================ */

#transition{--chapter-bg:var(--beige);
  display:flex;align-items:center;justify-content:center}

#transition h2{
  font-family:var(--display);font-weight:900;color:var(--ink);   /* ink on the beige — the brand book's pairing (acid until 10 Sep 2026) */
  /* Two lines as drawn — "So what is / going wrong?" — restored per the
     board now Aqva renders (Julian, 25 Aug 2026; reverses Fred's 25 Aug
     one-line nowrap). The crop's "going wrong?" measures ~795 board px
     → 121px at 1440. Wrap window in Aqva 900 with the tracking is
     [6.55em, 7.65em) — 7em holds the drawn break at every size. */
  font-size:clamp(28px,8.4vw,121px);line-height:1;letter-spacing:-.015em;
  text-align:center;max-width:7em}

/* the chapter is one viewport tall (base .chapter) with the line flex-
   centred in it — no frame maths needed, so nothing can tuck below the
   fold (Fred, 28 Aug 2026; supersedes the 62.5vw frame, Julian,
   25 Aug 2026) */

/* mobile (Julian, 6 Sep 2026): the line takes the column and its size
   comes from the frame's height ratio (the fit in the html's script) —
   8.4vw gave 31px at 375, a tenth of the desktop's share of the screen */
@media(max-width:760px),(pointer:fine) and (max-height:560px){
  #transition{padding:0 var(--m)}
  #transition h2{max-width:none;font-size:clamp(28px,15vw,72px)}   /* size: the JS's */
}

/* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */
#transition h2{white-space:pre-line}

/* ZOOMED (WCAG 1.4.4 — the zoom pass, Julian, 25 Sep 2026): on a computer
   at a narrow or short window — where 200% browser zoom lands — this
   section is in its stacked, still layout, and its type is set at the
   size the board draws it, in rem, so zoom enlarges it (the phone sizes
   above are fitted to the screen and would cancel the zoom). !important
   beats the sizes the js writes inline; utils.js zoomFit() then eases
   back any line whose longest word would run past the edge. */
@media(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){
  #transition h2{font-size:7.5rem!important;line-height:1!important}
  #transition{height:auto!important;min-height:100lvh;padding:max(96px,11svh) var(--m) 8svh!important}   /* the enlarged line starts below the nav rather than centring up under it */
}