/* ============================================================
   08 · Problem 02 — Atlas and the claw. Ported from
   06_Problems/Htmls/Problem 2.html.
   Spec: Board Specs/landing-07-problem-2.md
   ============================================================ */

#p2-act{height:380vh}
#p2{--chapter-bg:var(--ink);color: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) */
#p2 .board{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:100vw;aspect-ratio:1440/900;overflow:hidden;
  container-type:size;container-name:b}
#p2 .board > *{position:absolute}
#p2 .board img{display:block;object-fit:cover;pointer-events:none}

/* BACK TO FRONT: stars, Atlas, moon, arm, claw, text (spec LAYERS) */
#p2 .stars{z-index:1}
#p2 .man,#p2 .stand{z-index:2}
#p2 .moon{z-index:3}
#p2 .arm{z-index:4}
#p2 .claw{z-index:5}
#p2 .copy,#p2 .sol{z-index:9}

/* the stars are still (the §8 a11y pass, 24 Sep 2026). The spec's
   twinkle ran on its own clock, forever, with no way to stop it, and
   ran under reduced motion too — WCAG 2.2.2 (Pause, Stop, Hide), and
   §4.8. They still arrive with the moon, on scroll (the js). */
#p2 .stars svg{width:100%;height:100%;display:block;overflow:visible}

/* the words are their own layer: identical board geometry, never
   clipped, so the mobile pass below can move them into viewport space.
   After .board in the DOM = painted above the artwork. */
#p2 .text{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:100vw;aspect-ratio:1440/900;
  container-type:size;container-name:b}
#p2 .text > *{position:absolute}

/* 16.7% (was ~10%): the copy clears the opaque band, §12 #13.
   The PROBLEM 02 / 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) */
#p2 .copy{left:6.944%;top:16.7%;width:32.222%;
  will-change:transform}  /* own layer — pinned-text wobble, see 02-hero.css */
#p2 .copy .k{font-family:var(--mono);font-size:1.111cqw;line-height:.875em;
  letter-spacing:.08em;text-transform:uppercase}
/* 600 + 28/34 body: the board panel draws the same bolder headline and
   ~28px body as Problem 01's crop — the image wins over the spec text's
   "20/30" (Fred, 25 Aug 2026) */
#p2 .copy h2{font-size:5cqw;line-height:.9444em;letter-spacing:-.02em;
  /* 164.66% of the 464-board-px column = 764 board px: “worth” on the
     fourth line. The kit now serves forma-djr-deck, but its
     font-display:auto paints Archivo first — in [740, 792) BOTH faces
     break identically ("…challenging their worth."), so the swap can't
     re-wrap the headline mid-scroll. Measured in-DOM (Julian, 27 Aug 2026) */
  margin-top:1.667cqw;
  font-weight:500;width:164.66%}
/* +.015em tracking, width bumped to hold the breaks — see 07 note */
#p2 .copy p{margin-top:1.667cqw;font-size:1.9444cqw;line-height:1.2143em;font-weight:400;  /* board body is Deck Medium */
  /* 123% (was 113): Medium's window for the drawn 3 lines is [548, 592) px */
  letter-spacing:.015em;width:123%}

#p2 .sol{left:6.944%;top:57.162%;width:40.903%;height:34.444%;color:var(--ink);
  background:var(--cream);border-radius:1.389cqw;overflow: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))}
#p2 .sol .in{position:absolute;left:7.81%;top:50%;transform:translateY(-50%);width:76.91%}
#p2 .sol .k{font-family:var(--mono);font-size:1.111cqw;line-height:.875em;
  letter-spacing:.08em;text-transform:uppercase}
#p2 .sol h3{margin-top:1.111cqw;font-size:2.222cqw;line-height:1.1875em;
  letter-spacing:-.02em;font-weight:500}
#p2 .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 — Atlas, the moon and the claw, board x ~68% · y ~64% — 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){
  #p2{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) */
  #p2 .text{display:contents}
  #p2 .copy{position:relative;grid-area:1/1;left:auto;top:auto;width:auto;margin:0 var(--m);z-index:8}
  #p2 .copy .k{font-size:12px;line-height:1}
  #p2 .copy h2{font-size:clamp(30px,8.7vw,44px);line-height:1;margin-top:12px;width:auto}
  #p2 .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, review item MOB): centred and nudged up 14%, the lifted moon
     and the stars ran into the headline and a field of empty ink was
     left between Atlas and the card. Anchored to the band's foot and
     let 4% over it, the board's top edge is under the headline on every
     phone height, so the moon lifts into clear sky, and the figure's
     clipped foot lands a short way above the card. 150vw (was 140):
     the subject grows into the room that gives. -18% keeps the subject
     (board x ~68%) on the screen's centre line. Inside the board nothing
     changed — the claw and the moon still share their one dy (§4.6). */
  #p2 .board{position:relative;grid-area:2/1;left:auto;top:auto;
    width:150vw;justify-self:center;align-self:end;
    transform:translate(-18%,4%)}
  #p2 .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))}
  #p2 .sol .in{position:static;transform:none;width:auto;padding:22px 22px 24px}
  #p2 .sol .k{font-size:12px;line-height:1}
  #p2 .sol h3{font-size:21px;line-height:1.2;margin-top:10px}
  #p2 .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){
  #p2{padding-top:max(84px,10svh)}
  #p2 .copy h2{font-size:clamp(24px,7.4vw,32px)}
  #p2 .copy p{font-size:15px}
  #p2 .board{width:120vw}
  #p2 .sol .in{padding:16px 18px}
  #p2 .sol h3{font-size:18px}
  #p2 .sol p{font-size:14.5px}
}

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

/* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */
#p2 .copy h2,#p2 .copy p,#p2 .sol h3,#p2 .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){
  #p2 .copy .k, #p2 .sol .k{font-size:1rem!important;line-height:1.3!important}
  #p2 .copy h2{font-size:4.5rem!important;line-height:1.02!important}
  #p2 .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) */
  #p2{grid-template-rows:auto minmax(0,1fr) auto!important;padding-bottom:4rem!important}
  #p2 .sol{align-self:start!important;margin-top:1.5rem!important}
}