/* ============================================================
   04 · The Promise (quotes). The one section on its own clock
   (§4.8). Ported from 03_Quote/agency-quotes_2.html.
   Spec: Board Specs/landing-03-quotes.md
   ============================================================ */

/* coral ground, paper type (Maddie, 10 Sep 2026; was paper and ink) */
#promise{--chapter-bg:var(--coral);color:var(--cream)}
/* the pin (Maddie, 10 Sep 2026): 70vh of hold, over which the headline's
   second half fades in — see the html's header and 04-quotes.js */
#promise-act{height:170vh}
#promise .h .now{opacity:1}   /* the js drives it; without the js the line is whole */
@media(prefers-reduced-motion:reduce),(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){#promise .h .now{opacity:1!important}}   /* the conclusion; base.css releases the pin */

/* the 1440×900 frame, centred; cqw units size the headline to it */
/* the 1440×900 frame IS the viewport — the header band is drawn inside
   its top 120px, so it renders full-width from the top-left and the real
   nav rides over the band (Julian, 25 Aug 2026) */
#promise .board{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:100vw;aspect-ratio:1440/900;
  container-type:size;container-name:b}
#promise .board > *{position:absolute}

/* back on the spec's 84px (5.8333cqw) now Aqva renders — the 76px Archivo
   retune (24 Aug) no longer applies. At 84 the spec's own 1174.48 width
   holds the drawn 4-line wrap: the Aqva break window at this width is
   [1131, 1204) px (measured 25 Aug 2026; re-verified in the kit's
   rl-aqva at 1440, 27 Aug 2026). */
/* centred in the frame, like the transition (Julian, 26 Aug 2026);
   the width still holds the drawn 4-line wrap window */
#promise .h{left:50%;top:50%;transform:translate(-50%,-50%);width:81.561%;
  text-align:center;
  font-family:var(--display);font-weight:900;
  font-size:5.8333cqw;line-height:.9524em;letter-spacing:-.015em}

/* eyebrow centred just above the headline block (Julian, 27 Aug 2026 —
   was the band-clearing y150): the 4-line block at 84px spans y290–610
   of the 900 board, so y240 (16.6667cqw) sits ~50px above its top edge.
   Re-derive if the headline's line count changes. Mono 16 in cqw units */
#promise .eyebrow{left:50%;transform:translateX(-50%);top:16.6667cqw;
  font-family:var(--mono);font-size:1.1111cqw;line-height:.875em;
  letter-spacing:.08em;text-transform:uppercase;color:var(--cream);white-space:nowrap}   /* paper on the coral (10 Sep 2026; was ink on paper) */

/* ---- mobile (Julian, 6 Sep 2026) ----
   The board's 50% put the headline's centre 117px down a 234px strip —
   under the nav band — and the eyebrow's board offset landed on the
   headline. Below 760 the board is the screen: a column centred in the
   viewport under the band, the eyebrow 24px above the headline, both
   centred as the board draws them (this section is centred by design;
   the left-aligned rule is for the sections the board sets left). Type
   by the board's height ratio (the mobile type rule): the headline's
   four lines of 80 are 320 of 900 — 35.6% of the screen — so the
   headline takes the largest size at which its wrapped block is within
   that share (04-quotes.js, fitMobile). */
@media(max-width:760px),(pointer:fine) and (max-height:560px){
  #promise .board{position:relative;left:auto;top:auto;transform:none;width:auto;aspect-ratio:auto;
    min-height:100lvh;display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:max(96px,11svh) var(--m) 8svh}
  #promise .board > *{position:static}
  #promise .eyebrow{transform:none;font-size:12px;line-height:1;margin-bottom:24px}
  #promise .h{transform:none;width:100%;font-size:clamp(28px,9vw,40px)}   /* size: the JS's */
}
/* reduced motion: the pin released (base.css), the second half shown — above */

/* the chapter is one viewport tall and the frame fits inside it:
   full-width down to a 16:10 window, height-fit and centred on shorter,
   wider ones (laptops) — the paper ground makes the gutters seamless
   (Fred, 28 Aug 2026; supersedes the 62.5vw frame, Julian, 25 Aug 2026) */
@media(min-width:761px) and (not ((pointer:fine) and (max-height:560px))){
  #promise .board{width:min(100vw,160svh)}
}

/* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */
#promise .h,#promise .eyebrow{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){
  #promise .eyebrow{font-size:1rem!important;line-height:1.3!important}
  #promise .h{font-size:5.2rem!important;line-height:1!important}
  #promise .h .now{font-size:1em!important;line-height:inherit!important}   /* the same size as the line it finishes (Julian, 25 Sep 2026) */
  /* the board sizes to its text (size containment kept it one screen tall
     and clipped the enlarged headline); cqw still resolves on inline-size */
  #promise .board{container-type:inline-size!important;min-height:100lvh;height:auto}
}

/* HIGH CONTRAST (Julian, 25 Sep 2026): with <html data-contrast="high">
   (the switch in the footer, the phone menu, or the privacy page; or the
   device's increase-contrast setting) the light type on this section's
   coloured ground turns ink. Nothing else changes. */
html[data-contrast="high"] #promise,html[data-contrast="high"] #promise .eyebrow{color:var(--ink)}