/* Heroes (builder A2, reworked by FX-H and W4, 11 Nov 2026). Version 2 (hero A, the river): copy straight on the photo under a left-half navy veil.
   Version 1 (hero B, the portrait): navy ground, the words, his portrait and one role box. Version 3 (hero C): the fan. The switch.
   Loaded by sec_heroes.py after home.css. Version 1 is the default and the only top without JavaScript (W4, planner V4: his face leads);
   assets/js/heroes.js sets html[data-hero] to 1, 2 or 3 from ?hero=. */

/* ---- hero A: no box. The words sit directly on the photo (as Plesner sets its H1); the legibility is the pinned photo's own veil, .hero-scrim:
   from 768 px up a left-half navy 22,51,70 gradient, .74 at the left edge, .68 at gutter + 700 px, .58 at gutter + 920, .26 at gutter + 1090 and
   0 at gutter + 1300, so the right of the photo stays bright (stops are measured from the left edge in px because the text block is about 800 px
   wide at every viewport), plus a .3 shade over the top 160 px. Below 768 px the words fill the width and rise over every part of the photo, so
   the veil is even: .56 to .82 across the first 72 px, then .82. Real-pixel contrast of every text run is in HANDOFF-FXH.md; the gate's computed
   row reads the container's data-contrast-bg (the lightest measured pixel behind any hero A text, set in sec_home.r_hero). */
.hero-text { background: none; }
.hero-text .hero-text__in { width: 100%; max-width: none; margin-inline: 0; padding: 0; background: none; }
.hero-scrim { display: block; background:
  linear-gradient(to bottom, rgba(22, 51, 70, 0.56) 0, rgba(22, 51, 70, 0.82) 72px, rgba(22, 51, 70, 0.82) 100%); }   /* phone: the words rise over every part of the pinned photo, so the veil is even below the header (72 px) */
/* phone: without the old box the words are about 600 px tall, so the hero is 840 px (home.css had 920) and its last line stays above the fold on an 844 px phone */
@media (max-width: 767px) { .stage { --hero-h: max(92vh, 840px); } }
@media (min-width: 768px) {
  .hero-scrim { background:
    linear-gradient(to bottom, rgba(22, 51, 70, 0.3) 0, rgba(22, 51, 70, 0) 160px),
    linear-gradient(90deg, rgba(22, 51, 70, 0.74) 0, rgba(22, 51, 70, 0.68) calc(var(--gutter) + 700px), rgba(22, 51, 70, 0.58) calc(var(--gutter) + 920px),
      rgba(22, 51, 70, 0.26) calc(var(--gutter) + 1090px), rgba(22, 51, 70, 0) calc(var(--gutter) + 1300px)); }
}

/* ---- which top shows (W4, planner V4): version 1 = the portrait top (.hero-b), the default and the only top without JavaScript; version 2 = the river
   top (.hero-media and .hero-text); version 3 = the fan (.hc). assets/js/heroes.js sets html[data-hero] to 1, 2 or 3 from ?hero=. */
.hc { display: none; }
html[data-hero="3"] .hc { display: block; }
html[data-hero="2"] .hero-b, html[data-hero="3"] .hero-b { display: none; }
html:not([data-hero="2"]) .hero-media, html:not([data-hero="2"]) .hero-text { display: none; }
.hero-text :focus-visible, .hero-b :focus-visible, .hc :focus-visible, .hero-switch :focus-visible { outline-color: #fff; }

/* ---- entrances of B and C (their own, so a switch can replay them; the engine's data-anim stays hero A's) */
@media (prefers-reduced-motion: no-preference) {
  html.hero-js [data-hx] { opacity: 0; transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0); }
  [data-hx="x"] { --ax: max(-40px, calc(3px - var(--gutter))); }   /* W4: the portrait top is the default now, so the gate sees its closed state: -40 px, never further left than 3 px inside the screen edge (D11, as base.css does for [data-anim="x"]) */
  [data-hx="y"] { --ay: 40px; }
  [data-hx="y14"] { --ay: 14px; }
  html.hero-js [data-hx].is-in { opacity: 1; transform: none; transition: opacity 0.44s var(--ease-out) var(--delay, 0s), transform 0.44s var(--ease-out) var(--delay, 0s); }
}

/* ---- hero B (planner R10 and C1): navy ground, the words left, and on the right HIS real black and white portrait in a tall mist frame (the file's
   own pixels: never drawn wider than 594 px) with ONE role box overlapping the frame's lower-left corner by about 80 px (a panel a little lighter
   than the navy: #224960 under white text = 9.4:1). The other two role boxes are gone. At 390 the portrait sits under the rating, full content
   width, about 420 px tall. His row 4 portrait is hidden while this hero shows (see the end of this block), so his face is never on screen twice. */
.hero-b { position: relative; background: var(--navy); color: #fff; --hb-gap: clamp(32px, 5vw, 120px); }
.hero-b__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: calc(var(--head-h) + 36px); padding-bottom: 96px; }
.hero-b__text > * { max-width: 700px; }
.hero-b__fig { margin: 0; width: 100%; max-width: 520px; }
.hero-b__frame { background: var(--mist); padding: 12px; }
.hero-b__frame picture, .hero-b__frame img { display: block; width: 100%; }
.hero-b__frame img { height: 392px; object-fit: cover; object-position: 50% 12%; }   /* phone: 90vw frame, the photo about 392 px tall, so the figure is about 420 */
.hero-b__role { position: relative; z-index: 1; width: min(86%, 360px); margin-top: -80px; padding: 22px 24px 24px; background: #224960; color: #fff; }
.hero-b__yr { margin: 0; font-weight: 200; font-size: clamp(32px, 8.4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; color: #fff; overflow-wrap: anywhere; }
.hero-b__rl { margin: 10px 0 0; font-weight: 300; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: 0.0174em; color: #fff; }
.hero-b__role { margin-bottom: 0; }
@media (min-width: 850px) {
  .hero-b__in { grid-template-columns: minmax(0, 1fr) minmax(0, clamp(420px, 36vw, 520px)); gap: var(--hb-gap); align-items: center; min-height: 90vh; padding-top: calc(var(--head-h) + 28px); padding-bottom: 100px; }
  .hero-b__fig { max-width: none; }
  .hero-b__frame img { height: auto; aspect-ratio: 594 / 681; }
  .hero-b__role { margin-left: calc(-1 * min(80px, var(--hb-gap) - 6px)); width: min(360px, 86%); }   /* hangs out of the frame on the left, but never into the words */
}
/* row 4's portrait: hidden while the portrait top (version 1, the default, and without JavaScript) shows his face, shown when version 2 or 3 is picked (never twice on screen) */
html:not([data-hero="2"]):not([data-hero="3"]) .statement__card { display: none; }
html:not([data-hero="2"]):not([data-hero="3"]) .statement__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body"; }

/* ---- hero C, the end state (no pin): headline above, three cards. This is what reduced motion shows; JavaScript adds .is-live for the pinned fan. */
.hc { position: relative; background: var(--navy); color: #fff; }
.hc__stage { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: center; padding: calc(var(--head-h) + 36px) var(--gutter) 80px; background: var(--navy); overflow: hidden; }
.hc__copy { grid-column: 1 / -1; margin-bottom: 36px; padding: 0; }
.hc__copy > * { max-width: 855px; }
.hc__main, .hc__card { position: relative; display: block; overflow: hidden; background: var(--navy); color: #fff; text-decoration: none; }
.hc__main { grid-column: 2; grid-row: 2; aspect-ratio: 3 / 2; }
.hc__side { grid-row: 2; }
.hc__side--l { grid-column: 1; transform: rotate(-4deg); }
.hc__side--r { grid-column: 3; transform: rotate(4deg); }
.hc__card { aspect-ratio: 456 / 396; }
.hc__photo { position: absolute; inset: 0; display: block; }
.hc__photo picture, .hc__photo img, .hc__card picture, .hc__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the phone crop of the DWI card is a tall picture of the river (fix wave 3, Q1): keep the barge and the island in whatever window the card shows */
@media (max-width: 799px) { .hc__photo img { object-position: 70% 90%; } }
.hc__scrim { display: none; }
.hc__label { position: absolute; left: 0; bottom: 0; z-index: 2; display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--navy); color: #fff; font-weight: 200; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: 0.011em; transform-origin: 0 100%; }
.hc__side--r .hc__label { left: auto; right: 0; }
@media (max-width: 799px) {
  .hc__stage { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hc__main, .hc__side { grid-column: 1; grid-row: auto; width: 100%; max-width: 520px; margin-inline: auto; }
  .hc__side--l { transform: rotate(-3deg); }
  .hc__side--r { transform: rotate(3deg); }
}

/* ---- hero C, live: pinned stage, every transform driven by heroes.js (transform and opacity only) */
.hc.is-live .hc__stage { position: sticky; top: 0; display: block; padding: 0; height: 100vh; height: 100svh; }
.hc.is-live .hc__copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0; padding-inline: var(--gutter); padding-bottom: 120px; will-change: transform, opacity; }
.hc.is-live .hc__main { position: absolute; inset: 0; z-index: 3; aspect-ratio: auto; transform-origin: 50% 50%; pointer-events: none; will-change: transform; }
.hc.is-live .hc__scrim { display: block; position: absolute; inset: 0; background-image: linear-gradient(to top, rgba(22, 51, 70, 0.9) 0%, rgba(22, 51, 70, 0.78) 45%, rgba(22, 51, 70, 0.5) 100%); will-change: opacity; }
.hc.is-live .hc__photo { transform-origin: 50% 50%; will-change: transform; }
.hc.is-live .hc__label { will-change: transform, opacity; }
.hc.is-live .hc__side { position: absolute; left: 0; top: 0; grid-column: auto; margin: 0; max-width: none; transform-origin: 50% 50%; pointer-events: none; will-change: transform; }
.hc.is-live .hc__side--l { z-index: 2; }
.hc.is-live .hc__side--r { z-index: 1; }
.hc.is-live .hc__card { aspect-ratio: auto; width: 100%; height: 100%; }
.hc.is-live.is-done .hc__main, .hc.is-live.is-done .hc__side { pointer-events: auto; }

/* ---- the switch (only with JavaScript) */
.hero-switch { display: none; }
html.hero-js .hero-switch.is-placed { display: flex; position: absolute; right: var(--gutter); bottom: 20px; z-index: 6; align-items: center; gap: 2px; padding: 4px; background: var(--navy); color: #fff; border: 1px solid var(--hair-light); }
.hero-switch__label { padding: 0 10px 0 8px; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 0.05em; }
.hero-switch__btn { min-width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; color: #fff; font: 600 13px/20px var(--font); letter-spacing: 0.05em; cursor: pointer; }
.hero-switch__btn[aria-pressed="true"] { background: #fff; color: var(--navy); }
html.menu-open .hero-switch { visibility: hidden; }