/* ============================================================ WWA 04+05 · AI fluency + the five agencies — one section on the board. Built from Board Specs/wwa-03-ai-fluency.md: pinned; two vertical card tracks move in opposite directions, each column one rigid strip, cards already extending past both edges. Left copy fixed. Only translateY changes; reverses exactly. ============================================================ */ #wwa-fluency-act{height:300vh} #wwa-fluency{--chapter-bg:var(--cream)} /* copy column measured off wwa-03-ai-fluency.jpg (24 Aug 2026): intro starts at ~15vh in a narrower column, headline ~48vh breaking "Tool literacy is / the easy part.", closing para at ~70vh — the comp distributes the block down the full frame rather than centring it. */ /* --sh caps at the viewport so the copy's top anchor tracks the real frame on laptop windows (Fred, 28 Aug 2026) */ #wwa-fluency{--sh:min(62.5vw,100svh)} #wwa-fluency .copy{position:absolute;top:calc(0.15*var(--sh)); left:calc(50vw - .43056*min(100vw,160svh)); width:min(31.6vw,455px); will-change:transform; /* own layer — pinned-text wobble, see 02-hero.css */ z-index:2} /* 9 Sep 2026 (Fred, review item WWA 02): the column is reset around a display headline. Its left edge is the opener's text edge, not --m: the opener's text board is min(100vw,160svh) wide, centred, with its copy at 6.944% — so left = 50vw − (50% − 6.944%) × that width. On a 1440 × 900 window that is 100px; on a 1440 × 800 laptop the board is 1280 wide and the edge moves to 169px, and this follows it. The column keeps the comp's 455 measure, so there is clear air (~235px at 1440) between the copy and the tracks. The stack, top to bottom, on one rhythm: h2 in the deck face at the landing page's title treatment — Semibold, -.02em, as the Problem headlines — at the landing page's COLUMN headline size (the Five Agencies lead, 11-agencies.css: 0.0544 × the frame height, 49px at 900, on 1.05), since the Problems' 72 is drawn for a 792 measure and this column is 455. Forma for titles, the display face only for the big display moments (Fred, 9 Sep 2026 — the display 900 headline lasted a few hours that day). The lede (hidden while its copy is empty) at the §3 body-large size in deck Semibold; then the two sub-points, each a §3 section eyebrow (mono 16px uppercase .08em, regular — the Problems' PROBLEM 01 / SOLUTION, not bold) over a paragraph at the §3 body size, 20/30 in Deck Medium with the landing page's +.015em, like every body block on the site. */ #wwa-fluency h2{font-family:var(--deck);font-weight:500;color:var(--ink); font-size:clamp(22px,0.0544*var(--sh),49px);line-height:1.05;letter-spacing:-.02em} /* same 49px-at-1440 seam as 11-agencies.css .lead h2 — the tokens.css tie-break keeps boundary cases on the smaller/more-open cut (19 Sep 2026) */ /* each sentence its own block, a half-line of air between (Fred, 9 Sep 2026) */ #wwa-fluency h2 .ln{display:block} #wwa-fluency h2 .ln + .ln{margin-top:.5em} #wwa-fluency .lede{margin-top:.8em;font-size:clamp(15px,1.88vw,28px);line-height:1.21;font-weight:400; letter-spacing:-.01em} /* the two sub-points are nested rows on every size (Fred, 9 Sep 2026): the site's small-label style, bold, on two rows ruled above and below, a + / − at the right; the open row's text sits in place beneath it, between the rules, at the §3 body size. Sizes here are the desktop's; the phone block below re-sizes them. */ #wwa-fluency .points.nested{margin-top:clamp(28px,2.8vw,40px);border-top:1px solid var(--ink)} #wwa-fluency .pt-row{display:flex;align-items:center;justify-content:space-between;gap:12px; width:100%;min-height:clamp(44px,3.9vw,56px);padding:0;background:none;border:0; border-bottom:1px solid var(--ink);cursor:pointer;text-align:left;color:var(--ink)} #wwa-fluency .pt-row .k{display:block;margin:0;font-family:var(--mono); font-size:clamp(12px,1.11vw,16px);line-height:1;letter-spacing:.08em;text-transform:uppercase; font-weight:400;color:var(--ink)} /* the §3 section eyebrow, as the Problems' — regular, not bold (Fred, 9 Sep 2026) */ #wwa-fluency .pt-row.is-open .k{text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:2px} /* open: an underline, not a cobalt cut — ink stays the type on cream (10 Sep 2026) */ #wwa-fluency .pt-row .pm{font-family:var(--mono);font-size:clamp(18px,1.5vw,22px);line-height:1;color:var(--ink)} #wwa-fluency .pt-row:hover .k{text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:2px} #wwa-fluency .pt-row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px} #wwa-fluency .pt-body{margin:0;padding:clamp(12px,1.2vw,18px) 0 clamp(16px,1.6vw,24px); border-bottom:1px solid var(--ink);font-family:var(--deck-text); font-size:clamp(15px,1.39vw,20px);line-height:1.5;letter-spacing:.015em;font-weight:400;white-space:pre-line} /* 15-20px running copy is Forma's Text optical size (19 Sep 2026) */ #wwa-fluency .tracks{position:absolute;right:var(--m);top:0;bottom:0; width:min(44vw,560px);display:flex;gap:clamp(14px,1.6vw,24px);z-index:1} #wwa-fluency .trk{flex:1;display:flex;flex-direction:column; gap:clamp(14px,1.6vw,24px);will-change:transform} #wwa-fluency .trk img{display:block;width:100%;border-radius:clamp(10px,1vw,18px)} /* composed stand-ins for the two cut-off card exports. The overlay text is sized to match the text BAKED INTO the full card exports, measured off wwa-card-inquiry.webp (26 Aug 2026): label ≈ 6.6% of card width, question ≈ 10.7% at ~1.19 line pitch, foot space ≈ 15.5%. */ #wwa-fluency .cardx{position:relative;width:100%;aspect-ratio:1470/2085; border-radius:clamp(10px,1vw,18px);overflow:hidden;flex:none; container-type:inline-size; padding:9%;padding-bottom:15.5%;display:flex;flex-direction:column;justify-content:flex-end} /* art held clear of the text block (was 56% tall and touching it) */ #wwa-fluency .cardx img{position:absolute;left:50%;top:6%;transform:translateX(-50%); width:72%;height:46%;object-fit:contain;border-radius:0} /* cqw resolves against the container's CONTENT box (card minus the 9% padding), so the export-measured fractions scale up: 6.6% → 8cqw, 10.7% → 13cqw */ #wwa-fluency .cardx .nm{font-family:var(--mono);font-size:6.6cqw; letter-spacing:.16em;text-transform:uppercase;opacity:.9} #wwa-fluency .cardx .q{margin-top:.55em;font-family:var(--deck);font-weight:500; font-size:13cqw;line-height:1.19;letter-spacing:-.02em} /* mobile (Julian, 6 Sep 2026; re-laid 9 Sep 2026, Fred): the chapter stays pinned, as every chapter on the site, and the copy and the cards share the one screen — the copy on the stacked-flow rhythm (§3 — the nav-band top padding, the type floors) at the top, and beneath it the five cards as ONE strip that takes whatever height is left (the chapter is a column: copy auto, strip flex:1, cards sized by that height at the export's 1470:2085). The strip travels left 1:1 as the section scrolls, the cards passing in the landing page's row order, and stops with the last at the right margin. The act is 200vh on phones so the travel is close to the strip's overflow. Two vertical strips running opposite ways read as noise at phone width; one row reads as five cards. */ @media(max-width:760px),(pointer:fine) and (max-height:560px){ #wwa-fluency-act{height:200vh} #wwa-fluency{display:flex;flex-direction:column} #wwa-fluency .copy{position:relative;left:auto;top:auto;width:auto;flex:none; padding:max(96px,11svh) var(--m) 16px;will-change:auto} #wwa-fluency h2{font-size:clamp(30px,8.7vw,44px);line-height:1} /* the §3 phone headline on the Problems' line-height */ #wwa-fluency .lede{margin-top:16px;font-size:17px;line-height:1.3;max-width:30em} #wwa-fluency .points.nested{margin-top:18px} #wwa-fluency .pt-row{min-height:44px} #wwa-fluency .pt-row .k{font-size:12px} /* the §3 phone eyebrow; the tracking stays the desktop's .08em */ #wwa-fluency .pt-row .pm{font-size:18px} #wwa-fluency .pt-body{padding:12px 0 16px;font-size:16.5px;line-height:1.45} /* the Problem card's phone body */ #wwa-fluency .tracks{position:relative;right:auto;top:auto;bottom:auto; flex:1;min-height:0;width:auto;height:auto;display:flex;align-items:stretch; margin:8px 0 24px var(--m);will-change:transform} #wwa-fluency .trk-r{display:none} /* the row is as tall as the slot; every card is the row's height and its width follows from the ratio (img: intrinsic; .cardx: aspect-ratio). width:auto on the row, not max-content — an inline-size container inside a max-content box resolves its cqw against a collapsed width. --cw (the JS, from the measured height) gives the composed cards a padding in card units, since % padding would resolve against the row. */ #wwa-fluency .trk-l{flex-direction:row;gap:14px;width:auto;height:100%;align-items:stretch} #wwa-fluency .trk > img{width:auto;height:100%;flex:none} /* the card exports only — not the art inside a composed card */ #wwa-fluency .cardx{width:auto;height:100%;flex:none; padding:calc(var(--cw,200px) * .09);padding-bottom:calc(var(--cw,200px) * .155)} } /* short phones (≤760px tall, e.g. 667): a step down in type so the cards keep a readable height */ @media(max-width:760px) and (max-height:760px),(pointer:fine) and (max-height:560px){ #wwa-fluency .copy{padding-top:max(84px,10svh)} #wwa-fluency h2{font-size:clamp(24px,7.4vw,32px)} #wwa-fluency .lede{font-size:15px} #wwa-fluency .pt-body{font-size:14.5px} /* the Problem card's short-phone body */ } /* reduced motion: a static representative arrangement (spec) */ @media(prefers-reduced-motion:reduce),(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){ #wwa-fluency-act{height:auto !important} #wwa-fluency .trk,#wwa-fluency .copy,#wwa-fluency .tracks{transform:none !important} /* phones: the strip is the conclusion — all five cards, reached by a user-driven swipe rather than the scroll travel */ @media(max-width:760px),(pointer:fine) and (max-height:560px){ #wwa-fluency .tracks{overflow-x:auto;padding-right:var(--m)} } } /* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */ #wwa-fluency .lede,#wwa-fluency h2,#wwa-fluency .pt-body,#wwa-fluency .cardx .q{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){ #wwa-fluency .copy h2, #wwa-fluency .copy h2 .ln{font-size:3.05rem!important;line-height:1.05!important} #wwa-fluency .pt-row .k{font-size:1rem!important;line-height:1.3!important} #wwa-fluency .tracks{display:none!important} /* the agency cards (Julian, 25 Sep 2026) */ } /* HIGH CONTRAST (Julian, 25 Sep 2026): with (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"] #wwa-fluency .cardx.movement{color:var(--ink)!important} html[data-contrast="high"] #wwa-fluency .cardx.movement .nm{opacity:1} /* the Wonder export's words are baked in (cream on cobalt): its composed twin, words in ink, takes its place (wwa-04-fluency.js) */ #wwa-fluency .cardx.hc-only{display:none} html[data-contrast="high"] #wwa-fluency .cardx.hc-only{display:flex} html[data-contrast="high"] #wwa-fluency .trk > img.card-wonder{display:none} html[data-contrast="high"] #wwa-fluency .cardx.wonder .nm{opacity:1}