/* ============================================================
   09 · Problem 03 — the carousel horse. Ported from
   06_Problems/Htmls/Problem 3.html.
   Spec: Board Specs/landing-08-problem-3.md
   Beats are in the JS header: two cycles, card 60–86%, break
   at 86% with the card's landing (retimed 28 Aug 2026).
   ============================================================ */

/* 380vh, down from 630 (and the prototype's 760) — matching the P1/P2
   trim: two cycles per the spec, break with the card, release ~40vh
   after the break (Fred, 28 Aug 2026) */
#p3-act{height:380vh}
#p3{--chapter-bg:var(--cream)}

/* 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) */
#p3 .board{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:100vw;aspect-ratio:1440/900;
  container-type:size;container-name:b}
#p3 .board > *{position:absolute}
#p3 .board img{display:block;object-fit:cover;pointer-events:none}
#p3 .bar{background:var(--acid)}

/* the words are their own layer: identical board geometry, out of board
   space on mobile (see the pass below). After .board = painted above. */
#p3 .text{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:100vw;aspect-ratio:1440/900;
  container-type:size;container-name:b}
#p3 .text > *{position:absolute}

/* 16.7% (was ~10%): the copy clears the opaque band, §12 #13.
   The PROBLEM 03 / SOLUTION eyebrows are restored per the spec (Space
   Mono 16 = 1.1111cqw); on the y150 safe line they clear the band (Julian, 28 Aug 2026) */
#p3 .copy{left:7.014%;top:16.7%;width:43.783%;
  will-change:transform}  /* own layer — pinned-text wobble, see 02-hero.css */
#p3 .copy .k{font-family:var(--mono);font-size:1.111cqw;line-height:.875em;
  letter-spacing:.08em;text-transform:uppercase}
/* 600 + 28/34 body, matching Problems 01/02 — board image over spec
   text (Fred, 25 Aug 2026) */
/* 92.5% pins the crop's breaks at weight 600 — "organizations are" /
   "built to perform, not" (105% let "built" join line 2) */
#p3 .copy h2{margin-top:1.667cqw;font-size:5cqw;line-height:.9444em;letter-spacing:-.02em;
  font-weight:500;width:92.5%}
/* +.015em tracking, width bumped to hold the breaks — see 07 note */
#p3 .copy p{margin-top:1.667cqw;font-size:1.9444cqw;line-height:1.2143em;font-weight:400;  /* board body is Deck Medium */
  /* 86% (was 81.5): Medium's window for the drawn 2 lines is [514, 579) px */
  letter-spacing:.015em;width:86%}

#p3 .sol{left:6.944%;top:59.384%;width:40.903%;height:34.444%;
  background:var(--acid);border-radius:1.389cqw;overflow:hidden;visibility:hidden;
  will-change:transform;
  /* the rise: 46cqw of the board, scaled by --slide (1 = below, 0 =
     landed), which the JS writes each frame (Julian, 6 Sep 2026) */
  transform:translateY(calc(var(--slide,1) * 46cqw))}  /* own layer, like the P1/P2 cards */
#p3 .sol .in{position:absolute;left:7.81%;top:50%;transform:translateY(-50%);width:76.91%}
#p3 .sol .k{font-family:var(--mono);font-size:1.111cqw;line-height:.875em;
  letter-spacing:.08em;text-transform:uppercase}
#p3 .sol h3{margin-top:1.111cqw;font-size:2.222cqw;line-height:1.1875em;
  letter-spacing:-.02em;font-weight:500}
#p3 .sol p{margin-top:1.111cqw;font-size:1.181cqw;line-height:1.529em;font-weight:400;
  letter-spacing:.015em}

/* ---- stacked flow (§3 — Julian, 6 Sep 2026; replaces Fred's 25 Aug
   2026 first pass). Three bands: the copy at the top inside --m, the
   artwork centred in whatever height is left, the solution card in a
   row of its own at the foot. The chapter becomes a grid and .text
   dissolves (display:contents) so the copy and the card can each take
   a row while the DOM stays as the desktop needs it. The board is
   oversized so the scene crops rather than shrinks, and nudged so the
   SUBJECT — the horse and the bars, board x ~71.5% · y ~58% — sits mid-band, not the board's centre.
   The card rests in its row and rises into it from below the fold, the
   same beat as the desktop's 46cqw rise: the JS writes --slide, the
   CSS owns the distance in each layout. Nothing else changes: the
   scroll maths, the beats and the reverse are the desktop's. */
@media(max-width:760px),(pointer:fine) and (max-height:560px){
  #p3{display:grid;grid-template-rows:auto minmax(0,1fr) 33.3lvh;grid-template-columns:100%;
    padding:max(96px,11svh) 0 0}   /* the card's row IS the lower third; it centres in it (Julian, 6 Sep 2026) */
  #p3 .text{display:contents}
  #p3 .copy{position:relative;grid-area:1/1;left:auto;top:auto;width:auto;margin:0 var(--m);z-index:8}
  #p3 .copy .k{font-size:12px;line-height:1}
  #p3 .copy h2{font-size:clamp(30px,8.7vw,44px);line-height:1;margin-top:12px;width:auto}
  #p3 .copy p{font-size:17px;line-height:1.35;margin-top:12px;width:auto;max-width:30em}
  /* the scene sits on the FOOT of its band, not its centre (Fred, 10 Sep
     2026, as Problem 02 the same day): centred and nudged up 8%, a field
     of empty paper was left between the bars' feet and the card. Anchored
     to the band's foot and let 12% over it, the bars (their feet at board
     y 94.9%) stand a short way above the card on every phone height, and
     the board's top edge stays under the headline. 150vw (was 140): the
     subject grows into the room that gives. -21.5% keeps the subject on
     the screen's centre line. Inside the board nothing changed. */
  #p3 .board{position:relative;grid-area:2/1;left:auto;top:auto;
    width:150vw;justify-self:center;align-self:end;
    transform:translate(-21.5%,12%)}
  #p3 .sol{position:relative;grid-area:3/1;left:auto;top:auto;width:auto;height:auto;
    align-self:center;margin:0 var(--m);border-radius:16px;z-index:9;
    transform:translateY(calc(var(--slide,1) * 100lvh))}
  #p3 .sol .in{position:static;transform:none;width:auto;padding:22px 22px 24px}
  #p3 .sol .k{font-size:12px;line-height:1}
  #p3 .sol h3{font-size:21px;line-height:1.2;margin-top:10px}
  #p3 .sol p{font-size:16.5px;line-height:1.45;margin-top:8px}
}
/* short phones (≤760px tall, e.g. 667): smaller type and a smaller
   scene, so the three bands still share one screen */
@media(max-width:760px) and (max-height:760px),(pointer:fine) and (max-height:560px){
  #p3{padding-top:max(84px,10svh)}
  #p3 .copy h2{font-size:clamp(24px,7.4vw,32px)}
  #p3 .copy p{font-size:15px}
  #p3 .board{width:120vw}
  #p3 .sol .in{padding:16px 18px}
  #p3 .sol h3{font-size:18px}
  #p3 .sol p{font-size:14.5px}
}

@media(min-width:761px) and (not ((pointer:fine) and (max-height:560px))){
  #p3 .board,#p3 .text{width:min(100vw,160svh)}
}

/* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */
#p3 .copy h2,#p3 .copy p,#p3 .sol h3,#p3 .sol p{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){
  #p3 .copy .k, #p3 .sol .k{font-size:1rem!important;line-height:1.3!important}
  #p3 .copy h2{font-size:4.5rem!important;line-height:1.02!important}
  #p3 .sol h3{font-size:2rem!important;line-height:1.2!important}
  /* the card's row sizes to the card (the phone layout's fixed lower third
     is shorter than the card at this size, which spilled it into the next
     section), with room under it before the next chapter (Julian, 25 Sep 2026) */
  #p3{grid-template-rows:auto minmax(0,1fr) auto!important;padding-bottom:4rem!important}
  #p3 .sol{align-self:start!important;margin-top:1.5rem!important}
}