/* ============================================================
   14 · Who We Are teaser. Fluid-unit layout — no artboard, no
   transform, no layout JS. --u is the arch width and the single
   unit every portrait is built from. Ported from
   10_Who We Are/agency-whoweare.html.
   Spec: Board Specs/landing-13-who-we-are-teaser.md
   NOTE: prototype ground was #5D8CD8; we ship the token cobalt
   #5B8AD9 (§3 — no second blue without a conversation).
   ============================================================ */

#who-teaser{--chapter-bg:var(--cobalt);color:var(--cream);
  /* --fu is the frame unit (Fred, 28 Aug 2026): 1vw down to a 16:10
     window, then height-capped so the whole teaser sits above the fold
     on laptop windows. The stacked content runs ~66 units tall (pad +
     5-line Archivo headline + button), hence 100svh/66 ≈ 1.51svh —
     re-measure if the headline's line count changes (Aqva, §3). */
  --fu:min(1vw, 1.51svh);
  /* the height floor (28.1svh) equals 17.562vw at exactly 16:10, so the
     two terms hand over continuously; on taller windows the arches keep
     the comp's u/height ratio (252.9/900) instead of shrinking to the
     230px floor and leaving the lower half of the chapter empty
     (Julian, 28 Aug 2026) */
  /* --u3 (Julian, 14 Sep 2026): the tallest unit at which Fred stands
     wholly below Neena — her canvas 80px down and 1.539u tall, his 1.487u
     tall on the foot, 0.15u of his dome's transparent corner allowed
     under her paper: (100svh − 80px) / 2.88. On the comp's proportions
     and on laptops it is slack (255px at 1440 × 813 against a 230 unit);
     on a short window it takes over from the 230 floor and the arches
     shrink until all three fit — 229 at 740 tall, 210 on an iPad Air in
     landscape — rather than dropping a person (a first cut hid Fred under
     760 tall, and Neena lost him on a wide, short desktop window). */
  --u3:calc((100svh - 80px) / 2.88);
  --u:max(180px, min(clamp(230px, max(calc(17.562*var(--fu)), 26svh), 420px), var(--u3)));   /* 26svh (was 28.1, 10 Sep 2026): a touch smaller on 16:10 windows so the headline keeps more of its size clear of Neena's paper — see --room */
  /* top clamp raised (8.51→10.42vw): the headline clears the opaque band */
  padding:clamp(48px,calc(10.42*var(--fu)),170px) clamp(24px,calc(6.946*var(--fu)),110px)
          clamp(24px,calc(3*var(--fu)),56px);
  isolation:isolate}

/* 52.57 units is the 756.98 of 1440. Deliberately --fu and not a
   percentage: a percentage would resolve against the section's padded
   content box, which is narrower, and the headline would break in the
   wrong place. (--fu = 1vw at 16:10 and wider-than-tall keeps the
   original vw reasoning intact.) */
/* cap raised 800→946px (Julian, 2 Sep 2026): the headline caps at 150px
   (= --fu 18) but the column capped at --fu 15.2, so between the two —
   every 16:9 window, e.g. 1920×1080 — "this moment" wrapped to a fifth
   line and the stack ran 1083px on a 1080px screen. 946 = 52.57 × 18:
   both caps now bite at the same --fu, the four-line break holds, and
   the chapter fits the height. */
/* the copy block spans from the headline's top to the chapter's foot, and
   the chip anchors to that foot at 11.03 units (= its old margin below a
   four-line headline at 1440×900, so nothing moved here) — the What We
   Do teaser uses the same anchor, so the two chips sit at one height
   whatever their headlines' line counts (Julian, 2 Sep 2026) */
#who-teaser .copy{position:absolute;z-index:2;
  top:clamp(48px,calc(10.42*var(--fu)),170px);left:clamp(24px,calc(6.946*var(--fu)),110px);bottom:0;
  /* 64 units (was 52.57) for the 3 Sep 2026 headline — 870px at 1440,
     ending at 975, still clear of Neena's arch at 992 */
  width:clamp(280px, calc(64*var(--fu)), 1152px)}
/* THE ROOM TO NEENA (Maddie's overlap, 10 Sep 2026): on a window that is
   tall for its width (a half-screen window, a portrait-ish one), --u is
   height-driven while the headline is width-driven, and the headline's
   longest line ran under Neena's arch — "working / you." behind her
   (Maddie's screenshot; §12 #17 had logged it at 1024 × 768). The
   headline is now also capped by the room between the copy's left edge
   and her PAPER (100vw − 2.3416u is the paper's left edge; 24px of air),
   divided by the longest line's width in ems — 7.1 in Aqva at 1440
   (799px at 113px), Archivo's is shorter — so the line always ends
   before her. On the comp's own proportions the cap is slack. */
#who-teaser{--room:calc(100vw - 2.3416*var(--u) - clamp(24px,calc(6.946*var(--fu)),110px) - 24px)}   /* 2.3416u = Neena's 0.95u offset + her arch + the 0.3916u of paper hanging left of it (10 Sep 2026: the first cap measured to the arch, and "working" ran under the paper at 1440 and below) */
#who-teaser .copy h2{font-family:var(--display);font-weight:900;
  font-size:min(clamp(44px,calc(8.333*var(--fu)),150px),calc(var(--room) / 7.1));line-height:.9167em;
  letter-spacing:-.015em;color:var(--cream)}
/* the button: the close's mono link label inside the comp's ink chip
   (Julian, 2 Sep 2026 — the dashed rule alone didn't read as a button).
   Position unchanged: the comp's vw figures rebased onto --fu keep the
   laptop height-fit. Queued for Maddie's design review with the rest
   of the teaser (§12 #17). */
#who-teaser .copy .btn{display:inline-flex;align-items:center;gap:.55em;position:absolute;
  bottom:clamp(32px,calc(11.03*var(--fu)),180px);
  left:clamp(2px,calc(0.797*var(--fu)),12px);cursor:pointer;
  font-family:var(--mono);font-size:clamp(12px,1vw,14px);
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  background:var(--cream);color:var(--ink);border:0;
  padding:clamp(13px,1.2vw,17px) clamp(18px,1.7vw,24px);
  border-radius:clamp(11px,1.05vw,17px);line-height:1}
/* DEV 02 (Fred, 9 Sep 2026): the chip read as a label, not a control. So:
   a slim arrow after the label, a hover fill, and one size up (type 13→14,
   box 43→48 tall at 1440; the contact Send keeps the old size). The fill
   CUTS paper → acid on hover / press / keyboard focus and cuts back when
   the pointer leaves — no transition (§4.2); the arrow is currentColor
   and never moves (§4.7). Hover is scoped to pointers that can hover, so
   a phone tap leaves no stuck lit state; :active carries the press. */
#who-teaser .copy .btn .arrow{flex:none;width:1.05em;height:.8em;overflow:visible}
#who-teaser .copy .btn .arrow path{fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){#who-teaser .copy .btn:hover{background:var(--acid)}}
#who-teaser .copy .btn:active,#who-teaser .copy .btn:focus-visible{background:var(--acid)}
/* the focus ring is acid, not base.css's coral: coral sits at 1.2:1 on
   the cobalt, acid at 3.1:1 — the contact Send made the same call */
#who-teaser .copy .btn:focus-visible{outline:2px solid var(--acid);outline-offset:3px}

/* The three portraits are Maddie's arch composites (4 Sep 2026): the
   arch is IN the PNG, the same 1264px-wide arch in all three canvases,
   so --u (the arch width) still drives everything. Each .fig is the
   arch's box; the img is the whole canvas, sized and offset by the
   canvas's margins around its arch (measured off the PNGs) so the
   baked arch lands exactly on the box. Nothing is clipped — the paper,
   Fred's shoulder and Julian's cut edge sit where Maddie drew them. */
#who-teaser .fig{position:absolute;z-index:1;width:var(--u)}
#who-teaser .fig img{position:absolute;top:0;display:block;max-width:none;
  pointer-events:none}

/* Neena — Maddie's canvas (1760×1818) is cut 127px into the dome, the
   state where the header hides the apex; teaser-neena.webp is that
   canvas with the dome completed (a 632px-radius cap in gum, fitted to
   the drawn curve — `New_Neenaa_arch-completed.png` beside the source),
   so the arch is whole wherever it clears the band (Maddie via Julian,
   4 Sep 2026). Canvas 1760×1945, arch x495–1758 (1264) y0–1894 (1895):
   the paper hangs 495px left of the arch and the hem 50px below it */
#who-teaser .f-neena{aspect-ratio:1264/1895}
#who-teaser .f-neena img{width:calc(var(--u) * 1.3924);left:calc(var(--u) * -0.3916)}
/* Julian — canvas 1335×1969, arch x170–1434 (1264) y0–1967 (1968); the
   canvas ends at x1335, so the arch's right side is cut 100px short —
   Maddie draws him cut by the frame edge, so the cut sits on the edge */
#who-teaser .f-julian{aspect-ratio:1264/1968}
#who-teaser .f-julian img{width:calc(var(--u) * 1.0562);left:calc(var(--u) * -0.1345)}
/* Fred — canvas 1514×1945, arch x28–1292 (1264) y0–1944 (1945); his
   right shoulder runs 220px past the arch */
#who-teaser .f-fred{aspect-ratio:1264/1945}
#who-teaser .f-fred img{width:calc(var(--u) * 1.1978);left:calc(var(--u) * -0.0222)}

/* Positions, in u-multiples from the frame's REAL right edge, measured
   off Maddie's 4 Sep 2026 comp at 1440 (the fluid strategy crops rather
   than shrinks; left-anchoring in shrunken units let the cluster drift
   off the edge — Julian, 28 Aug 2026). Neena's apex is flush with the
   frame top on the comp; 80px keeps it under the opaque nav band
   (72px condensed, §12 #13). Neena paints above Julian, as drawn. */
#who-teaser .f-neena {right:calc(var(--u) * 0.95);top:80px;z-index:2}   /* 0.95u (was the comp's 0.82, 10 Sep 2026): her arch stops 0.037u short of Julian's instead of lying 0.093u over it */
#who-teaser .f-julian{right:calc(var(--u) * -0.087);top:calc(var(--u) * 0.9095)}
#who-teaser .f-fred  {right:calc(var(--u) * 1.44);bottom:calc(var(--u) * -0.0514)}

#who-teaser .space{height:0}

/* TWO OF THREE ON VERY SHORT WINDOWS (Julian, 14 Sep 2026): below 180px
   the arches stop reading, so under 600 tall — where --u3 would fall
   under that floor and Neena's canvas would meet Fred's again — Fred
   steps out and the teaser shows Neena and Julian. Julian: two people
   beats an overlap. Widths under 861 stack all three (below). */
@media(min-width:861px) and (max-height:600px) and (not ((pointer:fine) and (max-height:560px))){
  #who-teaser .f-fred{display:none}
}

/* 860, not the site's 760 (§3): the desktop comp is a landscape picture
   — copy left, cluster right — and it runs the headline into the
   portraits on anything narrower than ~1200 (already so at 1024×768).
   The stacked layout covers portrait tablets until the comp is retuned
   in the §12 #17 design review; that retune retires this exception
   (Julian, 6 Sep 2026). */
@media(max-width:860px),(pointer:fine) and (max-height:560px){
  /* two halves (Julian, 6 Sep 2026): the copy centred in the top half
     (under the nav band), the three arches centred as a cluster in the
     bottom half. The unit is the smaller of 37vw and what lets a
     3.14u-tall cluster stand in the half; --lift centres it there. */
  #who-teaser{--u:clamp(100px,min(37vw,calc(50lvh / 3.2)),200px);--lift:calc((50lvh - var(--u) * 3.14) / 2);
    display:grid;grid-template-rows:50lvh 50lvh;grid-template-columns:100%;height:100lvh;padding:0}
  #who-teaser .copy{position:relative;grid-area:1/1;align-self:center;top:auto;left:auto;bottom:auto;
    width:min(88vw,520px);margin:0 clamp(20px,6vw,40px);padding-top:72px;z-index:3}   /* the band's height: centred in what is under it; above Neena (z2) should a short phone push the cluster up under the copy */
  #who-teaser .copy h2{font-size:clamp(36px,11.6vw,76px)}
  #who-teaser .copy .btn{position:static;margin-top:clamp(24px,7vw,44px);margin-left:0;
    min-height:44px;padding-left:24px;padding-right:24px}   /* the §8 tap floor */
  /* ALL THREE below the copy, NONE OVERLAPPING (Fred, 10 Sep 2026,
     review item MOB — Julian had been left out on phones since 6 Sep
     2026 for want of room, and a first three-up cut the same day laid
     Neena's arch over Fred's face). The desktop's order — Neena high,
     Julian right and cut by the frame edge as Maddie draws him, Fred
     lower left — with the desktop's own rule that Fred stands wholly
     BELOW Neena (0.1u of air between his arch and her hem), and Neena's
     arch stopping 0.187u short of Julian's so the two never touch. Julian
     from the right edge, Fred from the left, Neena between: the cluster
     is 3.14u tall and at most ~2.3u wide plus Julian's cut, so it fits the
     half at 37vw on tall phones and shrinks with the half on short ones
     (667: u = 104). Paint order as the desktop. */
  #who-teaser .space{grid-area:2/1;height:auto}
  #who-teaser .f-neena {left:auto;right:calc(var(--u) * 1.1);top:auto;bottom:calc(var(--lift) + var(--u) * 1.639)}
  #who-teaser .f-julian{display:block;right:calc(var(--u) * -0.087);top:auto;bottom:calc(var(--lift) + var(--u) * 0.3)}
  #who-teaser .f-fred  {left:calc(var(--u) * 0.12);right:auto;bottom:var(--lift)}
}

/* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */
#who-teaser .copy h2{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){
  #who-teaser .copy h2{font-size:6.7rem!important;line-height:.95!important}
  #who-teaser .btn .label{font-size:.875rem!important;line-height:1.2!important}
  /* the copy row sizes to the enlarged headline; the three arches get a
     row tall enough for their cluster (3.14u) beneath */
  #who-teaser{--u:clamp(100px,min(30vw,26lvh),200px);--lift:calc(var(--u) * .08);
    height:auto!important;grid-template-rows:auto calc(var(--u) * 3.3)!important}
  #who-teaser .copy{align-self:start;width:auto!important;max-width:none;margin:0 var(--m)!important;
    padding:max(96px,11svh) 0 32px!important}
}

/* HIGH CONTRAST (Julian, 25 Sep 2026): with <html data-contrast="high">
   (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"] #who-teaser,html[data-contrast="high"] #who-teaser .copy h2{color:var(--ink)}