/* ============================================================ 11 · The Five Agencies. Board Specs/landing-10-agencies.md, then Neena's hover-and-flip (27 Aug 2026), now MADDIE'S ACCORDION (4 Sep 2026, via Julian): the flip cards were hard to read. Five tabs in one row, each the agency's ground with its glyph up top and its name set vertically; one tab at a time is OPEN — grown to the rest of the row — showing the eyebrow, the question, the body and the collage. Hover (or focus) opens a tab; click PINS it open, which is how touch works (the spec's phone constraint); leaving the row returns to the pinned tab. WONDER is pinned on load (Julian, 4 Sep 2026): the section never sits empty, and opening from the middle keeps the five from reading as a left-to-right sequence. Order (Julian, 4 Sep 2026): Attention, Inquiry, Wonder, Judgment, Movement — set in the js, not copy.js. The grow is the one user-triggered transition on the page (as the flip was). The two faces hand over with SHORT FADES timed to it — the open face is gone in the first 150ms of a close, the tab face arrives in the last 200ms; the reverse on open — a deliberate §4.2 override for this UI transition (Julian, 4 Sep 2026: the cut left the closing card's content clipping and sliding, then its title popping in). Reduced motion cuts everything. The five grounds are the LOCKED GLYPH-SET COLOURS (§3), not the UI palette — the near-misses against the tokens are intentional and belong to the artwork. They exist only here (js). The glyphs are the intro-mark SVGs (assets/img/agencies/glyph-*.svg), masked and tinted in the card's type colour at 40%, as Maddie's comp draws them — the only place the glyphs are recoloured. ============================================================ */ /* --sh is the frame height: 62.5vw down to a 16:10 window, the viewport height on shorter, wider ones (laptops) — everything below is sized off it, so the whole composition fits above the fold (Fred, 28 Aug 2026). Comp geometry at 1440×900 (4 Sep 2026): row y291–819 (528 = 0.587), tabs 106 wide at an 11px gap, the open card takes the rest; the row spans margin to margin. */ /* a column: lead, then the row takes whatever height is left above a fixed foot — the comp's 81px (0.09) below the cards (Maddie, 4 Sep 2026). 0.167 on top: the lead clears the opaque band, §12 #13 (the comp draws the heading at y65, inside the band); the row gives up the difference, so the cards run ~460 tall at 1440×900 against the comp's 528 — the foot is the spacing that reads, the card height isn't. */ /* --fs is the ACCORDION's scale: the frame height, capped at the comp's 900. Below that the row and everything in it shrink with the frame (laptops); above it they hold the comp's size — 1262 wide, cards 528 tall, type as drawn — and the page's paper gutters grow either side (Julian, 4 Sep 2026). The lead's own clamps already cap at the same point (0.0544 × 900 = 49px). */ #agencies{--chapter-bg:var(--cream);--sh:min(62.5vw,100svh);--fs:min(var(--sh),900px); display:flex;flex-direction:column;height:100lvh; /* the box fills the large viewport, as base.css (14 Sep 2026); --sh keeps the composition in the small one */ padding:calc(0.167*var(--sh)) 0 calc(0.09*var(--sh))} /* the lead is CENTRED over the accordion (Maddie, 10 Sep 2026): the headline and the lede share the row's centre line, one centred group with the five tabs. (It was centred on 4 Sep, then on the Agency intro's copy edge, then left on the row's edge — Fred, 10 Sep — and is centred again by Maddie's review.) Phones too (Julian, 10 Sep 2026) — this lead is the one exception to §3's left-aligned stacked flow, so the words and the tabs read as one centred group there as well. */ #agencies .lead{text-align:center;margin:0;padding:0 var(--m)} #agencies .lead h2{font-family:var(--deck);font-weight:500; font-size:clamp(22px,0.0544*var(--sh),49px);line-height:1.05;letter-spacing:-.02em; /* settles at 49px at the 1440×900 board — 1px into Display's range, but within the tokens.css tie-break distance of the Deck/Display seam, so it stays on the smaller/more-open cut (19 Sep 2026) */ /* 16.5em: the drawn second line of the 3 Sep 2026 headline renders 798 in Archivo (730 Deck) — measured in-DOM with the fallback forced */ max-width:16.5em;margin:0 auto} #agencies .lead p{margin-top:calc(0.021*var(--sh));font-size:clamp(16px,0.0366*var(--sh),33px);font-weight:400} /* the lede: body Regular (brand book) */ /* the row: the comp's 1262 × 528 at 900, centred; margin to margin at 1440, narrower than the margins on wider screens. It shrinks (never grows) to the height left above the foot — on a short window the cards give up height, on a tall one the surplus lands below them. */ #agencies .row{display:flex;gap:calc(0.0122*var(--fs)); width:calc(100% - 2*var(--m));max-width:calc(1.402*var(--fs)); margin:calc(0.05*var(--fs)) auto 0; flex:0 1 auto;height:calc(0.587*var(--fs));min-height:0} #agencies .card{position:relative;flex:0 0 8.4%;min-width:0;height:100%; background:var(--sign-bg);color:var(--sign-fg); border:none;padding:0;cursor:pointer;text-align:left;font:inherit; border-radius:clamp(8px,0.016*var(--fs),16px);overflow:hidden; transition:flex-grow .45s cubic-bezier(.4,0,.2,1)} #agencies .card.is-open{flex-grow:1;cursor:default} #agencies .card:focus-visible{outline:3px solid var(--ink);outline-offset:3px} /* the glyph, masked from its SVG and tinted in the type colour */ #agencies .card .glyph{position:absolute;display:block; width:calc(0.048*var(--fs));height:calc(0.048*var(--fs)); background:currentColor;opacity:.4; -webkit-mask:var(--glyph) center/contain no-repeat; mask:var(--glyph) center/contain no-repeat} /* tab face: glyph up top, the name set vertically, reading down */ /* the faces hand over with short fades timed to the grow (header): tab face — fades in over the last 200ms of a close, out in the first 120ms of an open */ #agencies .card .tab{position:absolute;inset:0;display:block; opacity:1;visibility:visible;transition:opacity .2s ease .25s,visibility 0s .25s} #agencies .card .tab .glyph{left:50%;top:calc(0.024*var(--fs));transform:translateX(-50%)} #agencies .card .tab .label{position:absolute;left:50%;bottom:calc(0.022*var(--fs)); transform:translateX(-50%);writing-mode:vertical-rl;white-space:nowrap; font-family:var(--deck);font-weight:500;line-height:1;letter-spacing:-.02em; font-size:clamp(20px,0.048*var(--fs),44px)} #agencies .card.is-open .tab{opacity:0;visibility:hidden;transition:opacity .12s ease,visibility 0s .12s} /* open face: ONE GROUP — glyph, text column, collage — at the comp's internal spacing (glyph and eyebrow share a left edge; the collage starts 24px past the column), centred in the card between two gutters that start at the comp's 48 left / 12 right and take ALL the surplus, equally: widening the screen only lengthens them and the group keeps its shape (Maddie via Julian, 4 Sep 2026). The collage is 80% of the card's height, as drawn; our card runs shorter than the comp's (the band pushes the lead down), so at 1440×900 the collage is narrower than drawn and the gutters already carry some surplus (76 / 40). On a card tall enough for the collage to outgrow the box it shrinks instead — contain on its own ground, so nothing shows. Sizes are off --sh, not the card, so nothing reflows while the card grows. */ /* open face — gone in the first 150ms of a close (so the shrinking card is a plain block, its content neither clipped nor sliding), in over 250ms once an open has begun */ #agencies .card .open{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;gap:calc(0.027*var(--fs)); padding:0 calc(0.0133*var(--fs)) 0 calc(0.053*var(--fs)); opacity:0;visibility:hidden;transition:opacity .15s ease,visibility 0s .15s} #agencies .card.is-open .open{opacity:1;visibility:visible;transition:opacity .25s ease .15s,visibility 0s} /* the text column runs the card's height so the glyph can sit at the card's top ON THE COLUMN'S LEFT EDGE, wherever the column lands, while the words centre — a touch below the middle (53%), as the comp draws them */ #agencies .card .open .txt{position:relative;flex:0 0 auto;align-self:stretch; display:flex;flex-direction:column;justify-content:center;padding-top:6%; /* the column is measured so the questions break as the comp draws them — "What could / we do?", "What should / we do?" — in Deck AND the Archivo fallback (in-DOM at 1440, 4 Sep 2026, tracking included: "What could we" runs 256 at the 43.2px question, "make it real?" 220, so the column must sit between — 0.278 = 250, with room for Archivo's ~9% either way). Its clamp mirrors the question's (22–44px) so the ratio holds where the font stops scaling. If the copy changes, re-measure before shipping. (--fs caps at 900, so the 255px cap is the same point stated twice.) */ width:clamp(127px,0.278*var(--fs),255px)} #agencies .card .open .txt .glyph{left:0;top:calc(0.051*var(--fs))} #agencies .card .open .nm{display:block;font-family:var(--mono); font-size:clamp(11px,0.0178*var(--fs),16px);letter-spacing:.16em; text-transform:uppercase;opacity:.85} #agencies .card .open .q{display:block;margin-top:.5em;font-family:var(--deck);font-weight:500; font-size:clamp(22px,0.048*var(--fs),44px);line-height:1.05;letter-spacing:-.02em} #agencies .card .open .b{display:block;margin-top:1em;max-width:calc(0.26*var(--fs)); font-family:var(--deck-text);font-weight:400; font-size:clamp(12px,0.019*var(--fs),17px);line-height:1.45} /* settles ~17px at the 1440×900 board — Forma's Text optical size, not Deck (19 Sep 2026) */ /* the collage carries the card's ground, so it sits seamless. 78% of the card's height (the comp's 80% overran the box by 6px at the comp's own proportions), and it never shrinks: the row is always 1.402 --fs wide on desktop and at most 0.587 tall, so the group (0.371 + 0.861 × 0.587 = 0.876) always fits the card (0.882). Don't let it flex-shrink — Chromium stops painting a contain-fitted image with an aspect-ratio once flex has shrunk it (seen 4 Sep 2026). */ #agencies .card .open .art{flex:0 0 auto;height:78%; aspect-ratio:1744/1580;object-fit:contain;pointer-events:none} @media(prefers-reduced-motion:reduce),(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){ #agencies .card,#agencies .card .tab,#agencies .card .open{transition:none} } /* mobile, first pass (the mobile phase owns this, §13): the tabs stack as bars, the open one grows to its content, text then collage */ /* (Julian, 6 Sep 2026): the lead starts under the nav band (0.167 × 62.5vw put it 39px down, behind the band); lead type by the frame's height — 3.3svh / 2.2svh (the desktop's 49 and 33 of 900) — 48px bars, Wonder open on arrival as everywhere (the section runs past one screen when a card is open), the open card's collage capped at 24svh */ @media(max-width:760px),(pointer:fine) and (max-height:560px){ /* ONE SCREEN WITH A CARD OPEN (Fred, 10 Sep 2026, review item MOB): the lead, the five bars and the open card share the small viewport (svh — the toolbar-visible height; lvh let the last bar sit behind the toolbar). The section is a flex column; the row, the open card and its .open block all grow into the height that is left, and the collage is the one thing that gives: it starts at 80px and grows to fill, capped at 24svh. On a phone too short for all of it (667) the section runs past one screen with the collage at its floor. ONE SCREEN ON A REAL PHONE (Julian, 10 Sep 2026): at an iPhone's toolbar-visible height (~710) the stack ran 743 with the collage at its 80px floor — the open card's foot, or the last bars, sat under the toolbar (and Netlify's preview drawer), while a resized desktop window, ~100px taller, fitted. Sixty-odd px trimmed from the phone block: 44px bars (the §8 tap minimum), 5px gaps, 14px card padding, 10px glyph and collage margins, a 64px collage floor, 12px foot. aspect-ratio:auto — the desktop's 1744/1580 leaked in; WebKit is looser than Chromium about aspect-ratio against max-height. */ #agencies{height:auto;min-height:100svh;padding:max(88px,10svh) 0 12px} #agencies .lead{padding:0 var(--m);text-align:center} /* centred on phones too (Julian, 10 Sep 2026) — the one stacked-flow lead that is */ #agencies .lead h2{font-size:clamp(22px,3.3svh,30px);max-width:none} #agencies .lead p{margin-top:clamp(14px,2svh,20px);font-size:clamp(16px,2.2svh,20px)} /* was 8px — the headline sat on the lede (Fred, 10 Sep 2026) */ /* height:auto — the desktop row is a fraction of the desktop frame (0.587 × --fs = 137px at 375) and the stacked bars overflowed it; the chapter clips its overflow, so the accordion was cut at the screen's foot and the cut moved with the browser's toolbar (Julian, 6 Sep 2026) */ #agencies .row{flex-direction:column;flex:1 1 auto;min-height:0;height:auto;max-width:none;gap:5px;margin:16px var(--m) 0} #agencies .card{flex:0 0 auto;height:44px;transition:none;border-radius:10px} /* is-open selectors too: the desktop's fade-in on .is-open .open and the tab's fade-out outrank the plain rule and were still running on phones — the card grew at once, then sat blank for 150ms while its text faded in. A cut, as §4.2 (Fred, 10 Sep 2026). */ #agencies .card .tab,#agencies .card .open, #agencies .card.is-open .tab,#agencies .card.is-open .open{transition:none} #agencies .card.is-open{height:auto;flex:1 1 auto;min-height:0;display:flex;flex-direction:column} /* OWN LAYER (Julian, 26 Sep 2026): on an iPhone the closed tabs' glyphs flickered as the page scrolled — a masked, translucent element that WebKit re-painted with each scroll tile. will-change paints it once and moves it (the same cure as the pinned chapters' text, 02-hero.css), and the tab glyph centres by position, not a transform. */ #agencies .card .glyph{width:28px;height:28px;will-change:transform} #agencies .card .tab .glyph{left:14px;top:calc(50% - 14px);transform:none} #agencies .card .tab .label{left:56px;top:50%;bottom:auto;transform:translateY(-50%); writing-mode:horizontal-tb;font-size:22px} #agencies .card .open{position:static;display:block;padding:14px 16px 14px} #agencies .card.is-open .open{display:flex;flex-direction:column;align-items:stretch;flex:1 1 auto;min-height:0} #agencies .card .open .txt{position:static;display:block;width:auto;padding:0;flex:0 0 auto} #agencies .card .open .txt .glyph{position:static;margin-bottom:10px} #agencies .card .open .q{font-size:26px} #agencies .card .open .b{font-size:15px;max-width:32em} /* THE COLLAGE IS A PICTURE, NOT A STRIP (Julian, 10 Sep 2026): the one-screen rule above squeezed it to whatever height was left — on an iPhone that was its floor, a 64–93px band with the artwork cut off top and bottom (the two screenshots that opened the PR). It now keeps a picture's proportion, 8:5 of the card's width (195px at 393 — the crop a resized desktop window showed, where it looked right), and grows when a taller phone leaves room; it never gives. The section runs past one screen instead: with Wonder open the last bars sit a short scroll below the fold. The trims above stay. aspect-ratio with width:100% and height:auto is the well-supported form (Chromium and WebKit take the height from the width). */ #agencies .card .open .art{display:block;width:100%;height:auto;flex:1 1 auto;min-height:0;max-height:none; aspect-ratio:8/5;object-fit:cover;object-position:50% 40%;margin-top:10px;border-radius:8px} } /* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */ #agencies .lead h2,#agencies .lead p,#agencies .card .open .q,#agencies .card .open .b{white-space:pre-line} /* below 760 the lead wraps in the column — its forced break is a desktop measure (after the pre-line rule so it wins; Julian, 6 Sep 2026) */ @media(max-width:760px),(pointer:fine) and (max-height:560px){#agencies .lead h2,#agencies .lead p{white-space:normal}#agencies .lead h2 br{display:none}} /* 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){ #agencies .lead h2{font-size:3.05rem!important;line-height:1.08!important} #agencies .lead p{font-size:2.05rem!important;line-height:1.3!important} #agencies .tab .label{font-size:2.7rem!important;line-height:1!important} #agencies .txt .nm{font-size:1rem!important;line-height:1.3!important} #agencies .txt .q{font-size:2.7rem!important;line-height:1.1!important} #agencies .txt .b{font-size:1.1rem!important;line-height:1.4!important} } /* 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"] #agencies .card[data-agency="wonder"],html[data-contrast="high"] #agencies .card[data-agency="movement"]{--sign-fg:var(--ink)!important} html[data-contrast="high"] #agencies .card[data-agency="wonder"] .nm,html[data-contrast="high"] #agencies .card[data-agency="movement"] .nm{opacity:1}