/* ============================================================
   WWA 06 · The partners. Built from Board Specs/wwa-04-partners.md:
   ink ground (was beige), headline + sub, three arch portraits each on its
   own colour, names and (placeholder) bios beneath. Static.
   ============================================================ */

/* ink ground, paper type (Fred, 9 Sep 2026; was beige): the three arch
   colours — gum, moss, acid — read as flat against beige and the ink
   copy at 16px sat low on it; on ink the arches carry and the type is
   the opener's paper-on-ink at 15:1. Cobalt was tried the same day and
   put back: paper on it is 3.4:1 and ink on it 4.7:1, and neither read
   well. 10 Sep 2026: beige again, with ink type, by Julian's pick from
   Maddie's pairings — the page runs moss · paper · beige · acid. */
#wwa-partners{--chapter-bg:var(--beige);color:var(--ink);   /* beige, ink type — Maddie's pairings, Julian's pick, 10 Sep 2026 (ink 9 Sep–10 Sep; beige before that) */
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(90px,10.42vw,170px) var(--m) clamp(36px,6vh,80px)}

/* the headline ("The Partners behind Agency" — Fred, 9 Sep 2026, review
   WWA 03) in the deck face at the landing page's title treatment: the
   Problem sections' Semibold 72/68, -.02em, here 5vw so it holds one
   line on every desktop width. Forma for titles, the display face only
   for the big display moments (Fred, 9 Sep 2026 — it was display 900
   at 3.2vw for a few hours that day). */
#wwa-partners h2{font-family:var(--deck-display);font-weight:500;max-width:14em;
  font-size:clamp(30px,5vw,72px);line-height:.9444em;letter-spacing:-.02em}   /* 72px is Forma's Display optical size, not Deck (19 Sep 2026) */
/* "Agency." in the headline is the wordmark (Maddie, 10 Sep 2026): the
   display face, the nav's tracking, the coral full stop — base.css's
   .wordmark, at the headline's size */
#wwa-partners h2 .mark{font-family:var(--display);font-weight:900;letter-spacing:-.02em}
#wwa-partners h2 .mark i{font-style:normal;color:var(--coral)}
#wwa-partners .sub{margin-top:.9em;font-size:clamp(14px,1.25vw,18px);font-weight:400}

#wwa-partners .grid{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,5vw,90px);margin-top:clamp(36px,8vh,80px)}

#wwa-partners .card .arch{position:relative;width:min(100%,300px);
  aspect-ratio:252.89/310;border-radius:50% 50% 0 0/41% 41% 0 0;overflow:hidden}
/* Maddie's composites (4 Sep 2026) carry their own arch, the same
   1264px-wide arch in every canvas, but the canvases are not centred on
   it (Neena's paper and Julian's cut edge add margin on one side), so a
   cover-crop from the canvas centre put the arch off-centre. Each img
   is instead sized and offset by its canvas's measured margins so the
   baked arch lands exactly on the box; the box crops the bottom and
   the CSS ground behind matches the PNG's arch colour. */
#wwa-partners .card .arch img{position:absolute;top:0;height:auto;max-width:none;
  display:block}
#wwa-partners .card .arch img.neena {width:139.24%;left:-39.16%}  /* canvas 1760, arch x495 */
#wwa-partners .card .arch img.julian{width:105.62%;left:-13.45%}  /* canvas 1335, arch x170 */
#wwa-partners .card .arch img.fred  {width:119.78%;left:-2.22%}   /* canvas 1514, arch x28 */
/* the NAME in the display face, the ROLE beneath in the deck at the
   headline weight — legible on the ink, not a greyed run-on line
   (Maddie, 10 Sep 2026; was "Name, role" in one line at .75) */
#wwa-partners .card .nm{margin-top:clamp(14px,2vh,22px);line-height:1}
#wwa-partners .card .nm .name{display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(22px,1.8vw,26px);letter-spacing:-.015em}   /* the brand book's Aqva tracking; the mark above keeps the wordmark's */
/* the role at the bio's size, two weights up from it — Bold against the
   bio's Medium (Julian, 10 Sep 2026: at Semibold 18 over Medium 20 the
   two read alike; the kit serves the deck at 400/500/600/700) */
#wwa-partners .card .nm .role{display:block;margin-top:.45em;font-family:var(--deck-text);font-weight:500;
  font-size:clamp(17px,1.39vw,20px);letter-spacing:-.02em}   /* 17-20px running copy is Forma's Text optical size (19 Sep 2026) */
/* three paragraphs per bio since 9 Sep 2026 (Fred) — the founders' bio
   document's shape, a blank line between them (\n\n in copy.js); a
   step up in size so three paragraphs read as body text */
/* the BIO at the site's body type — the deck, Medium, 18–20px, paper
   at full strength on the ink (Maddie, 10 Sep 2026: 14–16px at .85 was
   not legible) */
#wwa-partners .card .bio{margin-top:.8em;font-family:var(--deck-text);font-weight:400;
  font-size:clamp(17px,1.39vw,20px);line-height:1.45;opacity:1;max-width:30em}   /* body Regular (brand book) — the role above stays Medium, so the two read apart. 17-20px is Forma's Text optical size (19 Sep 2026) */
/* Read more… (Fred, 9 Sep 2026): the site's small-label style (mono,
   uppercase, tracked); a 44px tap target from its padding; a visible
   focus ring in the ink. The revealed paragraphs keep the bio's rhythm. */
#wwa-partners .card .toggle{display:inline-block;margin:.2em 0 0 -4px;padding:16px 4px;   /* 12 + 32 = a 44px target */
  font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:.16em;text-transform:uppercase;
  color:currentColor;background:none;border:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
#wwa-partners .card .toggle:hover{text-decoration-color:var(--coral);text-decoration-thickness:2px}   /* the label stays ink on the beige (12px needs 4.5:1); the rule turns coral */
#wwa-partners .card .toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* THE CLAMP (Maddie, 10 Sep 2026): closed, the bio block shows five
   lines and cuts — -webkit-line-clamp on the block, which counts lines
   across its paragraphs in WebKit, Blink and Gecko — with Read more…
   beneath; open, the whole bio with Read less at its foot. The block's
   own top margin is the first paragraph's, so the rhythm holds. */
#wwa-partners .card .bios{margin-top:.8em}
#wwa-partners .card .bios .bio{margin-top:0}
#wwa-partners .card .bios .bio + .bio{margin-top:.8em}
#wwa-partners .card .bios.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
#wwa-partners .card .toggle[hidden]{display:none}

@media(max-width:760px),(pointer:fine) and (max-height:560px){
  /* the §3 phone headline, as the Problems' — it wraps in two ("The
     Partners / behind Agency"); the one-line min(28px,6.4vw) was sized
     for the display face (Fred, 9 Sep 2026) */
  #wwa-partners h2{font-family:var(--deck);font-size:clamp(30px,8.7vw,44px);line-height:1;max-width:none}   /* phone size drops under Display's 48px floor — back to Deck (19 Sep 2026) */
  #wwa-partners .grid{grid-template-columns:1fr;gap:40px}
}

/* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */
#wwa-partners h2,#wwa-partners .sub,#wwa-partners .card .bio{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-partners h2{font-size:4.5rem!important;line-height:1.02!important}
  #wwa-partners .name{font-size:1.6rem!important;line-height:1.1!important}
  #wwa-partners .role{font-size:1.25rem!important;line-height:1.2!important}
  #wwa-partners .bio{font-size:1.25rem!important;line-height:1.4!important}
  #wwa-partners .toggle{font-size:.75rem!important;line-height:1.3!important}
}