/* ============================================================
   07 · Problem 01 — the conveyor. Ported from
   06_Problems/Htmls/agency-problem1_1.html.
   Spec: Board Specs/landing-06-problem-1.md
   ============================================================ */

#p1-act{height:370vh}
#p1{--chapter-bg:var(--gum)}

/* the 1440×900 board, centred */
/* 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) */
#p1 .board{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:100vw;aspect-ratio:1440/900;overflow:hidden;
  container-type:size;container-name:b}
#p1 .board > *{position:absolute}
#p1 .board img{display:block;pointer-events:none}

#p1 .rollers{inset:0}
/* the boxes are their own layer and nothing clips them (spec). A sibling
   of .board with identical geometry, so the board's overflow:hidden (which
   the plane's left entry needs) can't cut a falling box — only the chapter
   clips them, at the real screen edge. Before .board in the DOM = behind
   the belt, as the z-indexed layer was. */
#p1 .boxes{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:100vw;aspect-ratio:1440/900;overflow:visible;
  container-type:size;container-name:b;pointer-events:none}

/* the conveyor never moves. Only the rollers turn. */
#p1 .belt{left:14.2961%;top:69.8903%;width:72.9056%;height:24.7765%;z-index:2}
#p1 .roller{top:72.6960%;width:2.6750%;height:4.3858%;z-index:3;will-change:transform}
#p1 .box{top:52.0014%;width:11.9714%;height:19.0000%;
  transform-origin:100% 100%;will-change:transform}
#p1 .plane{left:0;top:50.2615%;width:35.3611%;height:22.3762%;z-index:4;
  transform-origin:50% 50%;will-change:transform;visibility:hidden}

/* the words are their own layer, like .boxes: 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. */
#p1 .text{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:100vw;aspect-ratio:1440/900;
  container-type:size;container-name:b;
  will-change:transform}  /* own layer — pinned-text wobble, see 02-hero.css */
#p1 .text > *{position:absolute}

/* 16.7% (was ~10%): the copy clears the opaque band, §12 #13.
   The PROBLEM 01 / 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) */
#p1 .copy{left:6.9444%;top:16.7%;width:32.0139%;z-index:8}
#p1 .copy .k{font-family:var(--mono);font-size:1.1111cqw;line-height:.875em;
  letter-spacing:.08em;text-transform:uppercase}
/* 600, not the §3 scale's 500: the board crop's headline is a step
   bolder than Display Medium renders (Fred, 25 Aug 2026) */
#p1 .copy h2{margin-top:1.6667cqw;font-size:5cqw;line-height:.9444em;
  letter-spacing:-.02em;font-weight:500;
  /* 738 board px: three lines, no widow (Julian, 27 Aug 2026 — was four).
     In [732, 744) the real Deck AND the Archivo fallback break identically
     ("Pointing AI at the work / you already do just / swaps payroll for
     tokens."), so the font-display swap can't re-wrap it. The wider
     identical windows ([816,836) / [856,932)) push line 1 into the
     plane's fly-off lane — keep the narrow one. Measured in-DOM */
  /* 55cqw (792 at 1440; was 51.25 = 738): the drawn third line, "swaps
     payroll for tokens.", renders 782 in Archivo (714 Deck) — measured
     in-DOM with the fallback forced, 3 Sep 2026 */
  width:55cqw}
/* 28/34 body large, ~510px wide — measured off the board crop, which
   wins over the spec text's "24/30 body, 461 wide" (breaks match the
   crop: "…another to / …efficiencies / …investment.") */
/* +.015em tracking: Display is cut tighter than the specced Deck at text
   sizes and reads squished without it (Fred, 25 Aug 2026). Width bumped
   ~3% so the crop's line breaks hold. */
#p1 .copy p{margin-top:1.6667cqw;font-size:1.9444cqw;line-height:1.2143em;
  font-weight:400;  /* body Regular — the brand book (10 Sep 2026); the board read as Medium (A/B vs crop, 25 Aug) */
  /* 123.5% (was 114): Medium's window for the drawn 3 lines is [553, 589) px */
  letter-spacing:.015em;width:123.5%}

#p1 .sol{left:6.9444%;top:57.1623%;width:40.9028%;height:34.4444%;z-index:9;
  background:var(--cream);border-radius:1.3889cqw;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))}
#p1 .sol .in{position:absolute;left:7.81%;top:50%;transform:translateY(-50%);width:76.91%}
#p1 .sol .k{font-family:var(--mono);font-size:1.1111cqw;line-height:.875em;
  letter-spacing:.08em;text-transform:uppercase}
#p1 .sol h3{margin-top:1.1111cqw;font-size:2.2222cqw;line-height:1.1875em;
  letter-spacing:-.02em;font-weight:500}
#p1 .sol p{margin-top:1.1111cqw;font-size:1.25cqw;line-height:1.444em;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 belt, board x 50.7% · y 72% — 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){
  #p1{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) */
  #p1 .text{display:contents}
  #p1 .copy{position:relative;grid-area:1/1;left:auto;top:auto;width:auto;margin:0 var(--m);z-index:8}
  #p1 .copy .k{font-size:12px;line-height:1}
  #p1 .copy h2{font-size:clamp(30px,8.7vw,44px);line-height:1;margin-top:12px;width:auto}
  #p1 .copy p{font-size:17px;line-height:1.35;margin-top:12px;width:auto;max-width:30em}
  #p1 .board,#p1 .boxes{position:relative;grid-area:2/1;left:auto;top:auto;
    width:130vw;justify-self:center;align-self:center;
    transform:translate(-0.7%,-22%)}
  #p1 .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))}
  #p1 .sol .in{position:static;transform:none;width:auto;padding:22px 22px 24px}
  #p1 .sol .k{font-size:12px;line-height:1}
  #p1 .sol h3{font-size:21px;line-height:1.2;margin-top:10px}
  #p1 .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){
  #p1{padding-top:max(84px,10svh)}
  #p1 .copy h2{font-size:clamp(24px,7.4vw,32px)}
  #p1 .copy p{font-size:15px}
  #p1 .board,#p1 .boxes{width:112vw}
  #p1 .sol .in{padding:16px 18px}
  #p1 .sol h3{font-size:18px}
  #p1 .sol p{font-size:14.5px}
}

@media(min-width:761px) and (not ((pointer:fine) and (max-height:560px))){
  #p1 .board,#p1 .boxes,#p1 .text{width:min(100vw,160svh)}
  /* the chapter still clips at the real screen edge, so the plane's
     left entry stays off-screen when the frame is height-fit */
  #p1 .board{overflow:visible}
}

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