/* ============================================================
   03 · What We Do — intro. One strip of three columns travelling
   left on a pinned 1440×900 board. Ported from
   02_What We Do/agency-whatwedo_1.html.
   Spec: Board Specs/landing-02-what-we-do.md
   ============================================================ */

#wwd-act{height:420vh}
#wwd{--chapter-bg:var(--ink);color:var(--cream)}

/* everything inside is in 1440×900 board units; .stage carries the fit.
   The stage CLIPS to the board (Julian, 2 Sep 2026): on windows wider
   than 16:10 the height-fitted board leaves ink gutters, and the next
   column's text was showing in the right one at settle. Now only the
   rule, inside the board's right margin, tells you something is coming. */
#wwd .stage{width:1440px;height:900px;overflow:hidden}
#wwd .track{position:absolute;left:0;top:0;will-change:transform}
#wwd .col{position:absolute;top:256px;width:630px}

/* coral, full strength (was dim paper) — more visible (Julian, 26 Aug 2026) */
/* ONE kicker — "We're Agency." — fixed in stage coords at the settled
   columns' old kicker spot, holding while the columns travel past
   (Julian, 27 Aug 2026; replaces the per-column What/With/So That).
   Own layer per the pinned-text wobble fix. */
#wwd .kicker{font-family:var(--display);font-weight:900;font-size:56px;line-height:56px;
  letter-spacing:-.015em;white-space:nowrap;position:absolute;left:104.5px;top:249px;
  color:var(--coral);will-change:transform}
/* "We're" coral · "Agency." the WORDMARK (Julian, 11 Sep 2026): cream, the
   coral full stop set tight against the y exactly as base.css's .wordmark
   sets it — no margin, no lift, the wordmark's −.02em. (Until then the stop
   sat .12em off and 4px up, and it read as a word with a dot, not the logo.) */
#wwd .kicker .name{color:var(--cream);letter-spacing:-.02em}
#wwd .kicker i{font-style:normal;color:var(--coral)}
#wwd .col h2{position:absolute;left:0;top:79.93px;width:630.48px;
  font-family:var(--deck-display);font-weight:500;font-size:72px;line-height:68px;letter-spacing:-.02em}   /* 72px is Forma's Display optical size, not Deck (19 Sep 2026) */
/* Widths for the 27 Aug 2026 copy (Julian, rev 3): cols 2/3 sit inside
   the window where Deck and the Archivo fallback break identically at
   four lines, no widow ([680, 732) · [700, 724)), measured in-DOM.
   Col 1's three-line break is drawn by the JS (no width can wrap it
   widow-free); 800 holds its longest drawn line — "transformation
   initiatives." runs 704px in Deck, 781 in Archivo.
   nth-child counts col/rule/col/rule/col. */
/* widths for the 3 Sep 2026 copy (Julian): all three columns hold drawn
   breaks (see the JS); each width clears its widest line as Archivo
   really renders it — col 1 818 Deck / 810 Archivo, col 2 724 / 777,
   col 3 690 / 753 (measured in-DOM with the fallback forced). Col 1's
   box ends at 1004.5, well short of its rule at 1335.5. */
#wwd .col:first-child h2{width:900px}
#wwd .col:nth-child(3) h2{width:790px}
#wwd .col:nth-child(5) h2{width:770px}

/* the rule belongs to the column it stands in front of and rides with it
   (209px ahead since 2 Sep 2026, so it sits at the board's right margin
   while the column waits off-board). Its top/height are set by the JS to
   match that column's headline block exactly (Julian, 27 Aug 2026 — was
   a fixed kicker-to-body band), and the JS cuts it out once its column
   settles on the left */
#wwd .rule{position:absolute;width:1px;
  background:var(--cream);opacity:.28}

/* reduced motion: pin released, the kicker leads, the three panes stack
   in order (§4) */
@media(prefers-reduced-motion:reduce),(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){
  #wwd-act{height:auto !important}
  #wwd .stage{position:static;transform:none!important}
  #wwd .track{position:static;transform:none!important;display:flex;flex-direction:column;gap:8vh;
    padding:0 0 9vh}
  #wwd .col{position:static;width:min(88vw,630px);margin:0 auto;left:auto!important}
  #wwd .kicker{position:static;width:min(88vw,630px);margin:9vh auto 0}
  #wwd .col h2{position:static;width:auto;margin-top:24px}
  #wwd .rule{display:none}
}

/* 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 ink ground makes the gutters
   seamless (Fred, 28 Aug 2026; supersedes the 62.5vw frame,
   Julian, 25 Aug 2026). The contain fit lives in this section's JS. */

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

/* ---- mobile (§3 stacked flow; Julian, 6 Sep 2026) ----
   The strip IS the section, so it stays a strip: the board goes (at
   375 it scaled the type to 4px) and the frame becomes the viewport —
   one column per screen, pitch 100vw instead of 1440 board px, the
   same 6–44 / 56–94 windows, 1:1 with scroll. The kicker holds at the
   top as before; each column's text sits under it inside --m; the
   desktop's hairline is not shown here (it distracted). The drawn line
   breaks are desktop measures — here the type wraps naturally in the
   column. 03-what-we-do.js switches the pitch and drops the board fit
   below 760. Runway 300vh (desktop 420).
   THE MOBILE TYPE RULE (Julian, 6 Sep 2026): the board's HEIGHT ratios
   carried to the tall frame, left-aligned — the tallest statement is
   30.2% of the screen (272 of 900), the kicker 56:72 of the statement
   size on two lines, the gap 3.4%, the kicker's top 27.7%. Nothing here
   is hand-measured: the JS (fitMobile) finds the statement size from
   the height budget and sets the tops from the percentages. The kicker
   never moves between statements. New copy is re-measured. */
@media(max-width:760px),(pointer:fine) and (max-height:560px){
  #wwd-act{height:300vh}
  #wwd .stage{position:absolute;left:0;top:0;width:100%;height:100%;transform:none!important}
  #wwd .kicker{left:var(--m);right:var(--m);text-align:left;white-space:normal;
    top:27.7svh;font-size:clamp(22px,5.8vw,30px);line-height:1}   /* top + size: the JS's */
  #wwd .col{width:100vw;top:calc(27.7svh + 2*clamp(22px,5.8vw,30px) + 12px)}   /* top: the JS's */
  #wwd .col:nth-child(1){left:0!important}
  #wwd .col:nth-child(3){left:100vw!important}
  #wwd .col:nth-child(5){left:200vw!important}
  #wwd .col:nth-child(n) h2{position:static;width:auto;margin:0 var(--m);text-align:left;
    font-family:var(--deck);font-size:clamp(28px,7.5vw,38px);line-height:1.05;white-space:normal}   /* size: the JS's. font-family: phone size drops under Display's 48px floor — back to Deck (19 Sep 2026) */
  #wwd .col h2 br{display:none}
  #wwd .rule{display:none}   /* no hairline on a phone — it distracted (Julian, 6 Sep 2026) */
}

/* 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){
  #wwd .kicker{font-size:3.5rem!important;line-height:1.05!important}
  #wwd .kicker span,#wwd .kicker i{font-size:1em!important}   /* its words and full stop follow it as one line */
  #wwd .col h2{font-size:4.5rem!important;line-height:1.02!important}
  /* the three statements stacked in flow (the phone layout parks them in
     a 300vw strip that the scroll drives; still, they stack) */
  #wwd{height:auto!important}
  #wwd .stage{position:static!important;width:auto!important;height:auto!important;transform:none!important}
  #wwd .track{position:static!important;transform:none!important;display:flex;flex-direction:column;gap:3.5rem;
    padding:max(96px,11svh) var(--m) 8svh}
  #wwd .kicker{position:sticky!important;top:72px;z-index:2;left:auto!important;right:auto!important;display:block;width:auto!important;
    margin:0 0 -1.5rem;padding:1.25rem var(--m);background:var(--ink);white-space:normal}   /* the kicker spans the stage edge to edge, so its ink band does too; the words sit on the statements' margin */   /* "We're Agency." holds just under the nav; the statements pass beneath it */
  #wwd .col{position:static!important;width:auto!important;left:auto!important;top:auto!important}
  #wwd .col:nth-child(n) h2{margin:0!important;width:auto!important}
  #wwd .stage,#wwd{overflow:visible!important}   /* the display kicker's ascenders ran a few px past the stage's edge */
}