/* about/hero.css: the hero of about.html. His name leads, his face is beside it, and the three
   roles are the page's only portrait switcher: a frosted segmented control floating over the
   foot of the portrait at every width (hero.js). Light ground, as before.
   Owned by the hero builder; every new name starts a-hero-.

   Removed, do not re-add:
   - the ghost "2008" behind the title, the 56x3 teal bar above it, and the stat line
     (an unverified follower count and two numbers the homepage already spends);
   - round 2: the full stops after the three words (they read as a slogan, not as controls),
     the underlined text tabs (one control, one design), and the sentence that walked through
     his whole training, which the training section now tells.

   Nothing in the hero changes size when its fonts or its script arrive: the name lines never
   wrap (nowrap inside a clipping mask), the Bebas fallback below is size matched, the role
   lines share one cell with a fixed minimum height, and the control floats over the photo. */

/* Size matched fallbacks for Bebas Neue: widths match the name, and the vertical metrics are
   Bebas's own (0.90 up, 0.30 down) divided by the size-adjust, so the baseline lands on the
   same pixel before and after the swap. Measured in Chromium (about-100x/hero/fbtest.py). */
@font-face {
  font-family: 'a-hero-fb-impact';
  src: local('Impact');
  size-adjust: 76.3%;
  ascent-override: 118%;
  descent-override: 39.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'a-hero-fb-sans';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Roboto Bold'), local('Roboto-Bold');
  size-adjust: 55.4%;
  ascent-override: 162.5%;
  descent-override: 54.2%;
  line-gap-override: 0%;
}

.a-hero {
  /* Portrait width: 500px at most, never taller than the first screen allows. */
  --a-hero-pw: max(300px, min(500px, 38vw, calc((100svh - 250px) * 0.8)));
  --a-hero-display: 'Bebas Neue', 'a-hero-fb-impact', 'a-hero-fb-sans', var(--display);
  position: relative;
  padding: 0 5vw;
  background: var(--bg);
  overflow: hidden;
  overflow: clip;
}
.a-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  /* Clears the announcement bar and the nav island, which float over the top of the page. */
  padding: 148px 0 clamp(64px, 9vh, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--a-hero-pw);
  /* The name holds the top of the portrait, the line and the door hold its foot. */
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "name stage" ". stage" "facts stage" "cta stage";
  column-gap: clamp(48px, 6.5vw, 96px);
}

/* ── The name ─────────────────────────────────────────────────────────────── */
.a-hero-name {
  grid-area: name;
  margin: 0;
  font-family: var(--a-hero-display);
  font-weight: 400;
  font-size: clamp(3.25rem, min(9.6vw, 16svh), 9rem);
  line-height: 0.88;
  letter-spacing: 0.005em;
  color: var(--ink);
}
/* Each line is a mask the words rise out of, once, at load. It never wraps. */
.a-hero-line { display: block; overflow: hidden; overflow: clip; padding-top: 0.06em; margin-top: -0.06em; }
.a-hero-line__in { display: inline-block; white-space: nowrap; }
/* The post-nominals: one plain line in the UI face, under the display name. */
.a-hero-post {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--text-2);
  white-space: nowrap;
}
.a-hero-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── The control: three roles in a frosted segment over the photograph ─────── */
.a-hero-roles {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  z-index: 3;
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0 auto;
  padding: 4px;
  font-family: var(--a-hero-display);
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  line-height: 1;
  letter-spacing: 0.02em;
  /* Waits for hero.js (the words are not controls until then). It floats, so showing it
     moves nothing. */
  visibility: hidden;
}
.a-hero-roles.h-glass { --hg-tint: rgba(255, 255, 255, 0.8); border-radius: var(--h-r-pill); }
.a-hero--live .a-hero-roles { visibility: visible; }
.a-hero-role {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0.16em clamp(12px, 1.4vw, 18px) 0.08em;
  border: 0;
  border-radius: var(--h-r-pill);
  background: none;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  color: rgba(11, 15, 46, 0.74);
}
.a-hero-role--btn {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--h-t) var(--h-ease-out),
    scale var(--h-spring-dur) var(--h-spring);
}
.a-hero-role--btn[aria-pressed="true"] { color: var(--ink); cursor: default; }
.a-hero-role--btn:not([aria-pressed="true"]):active { scale: 0.96; transition-duration: var(--h-t-press); }
.a-hero-role--btn:focus-visible { outline: 2px solid var(--h-focus); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .a-hero-role--btn:not([aria-pressed="true"]):hover { color: var(--ink); }
}
/* The thumb: a white pill under the pressed word that travels to the word you press. */
.a-hero-mark {
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: var(--a-hero-mw, 0px);
  border-radius: var(--h-r-pill);
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 15, 46, 0.12), 0 4px 12px -4px rgba(11, 15, 46, 0.28);
  translate: var(--a-hero-mx, 0px) 0;
  pointer-events: none;
  opacity: 0;
}
.a-hero-mark--on {
  opacity: 1;
  transition:
    translate var(--h-t-content) var(--h-ease-sheet),
    width var(--h-t-content) var(--h-ease-sheet),
    opacity var(--h-t) var(--h-ease-out);
}

/* ── The line for the pressed role ────────────────────────────────────────── */
.a-hero-facts {
  grid-area: facts;
  display: grid;
  max-width: 30em;
  /* Room for the longest line at every width in either face (three lines below 1200px, two
     above), so neither the font swap nor a role change moves anything. Lines sit at the foot. */
  min-height: calc(3 * 1.42em);
  align-items: end;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.25vw, 1.1875rem);
  line-height: 1.42;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--ink);
}
/* All three share one cell, so the block is as tall as the longest line and nothing around
   it moves when the role changes. The old line leaves fast, the new one rises in after it. */
.a-hero-fact {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  translate: 0 -4px;
  filter: blur(4px);
  transition:
    opacity 160ms var(--h-ease-std),
    translate 160ms var(--h-ease-std),
    filter 160ms var(--h-ease-std),
    visibility 0s linear 160ms;
}
.a-hero-fact.a-hero-on { opacity: 1; visibility: visible; translate: none; filter: none; transition: none; }
@media (min-width: 1200px) { .a-hero-facts { min-height: calc(2 * 1.42em); } }
@keyframes a-hero-fact-in { from { opacity: 0; translate: 0 10px; filter: blur(6px); } }
.a-hero--armed .a-hero-fact.a-hero-on { animation: a-hero-fact-in var(--h-t-content) var(--h-ease) 160ms backwards; }

/* ── The door: the patient's next step, matching the homepage hero ─────────── */
.a-hero-cta { grid-area: cta; margin: 24px 0 0; }

/* ── The portrait ─────────────────────────────────────────────────────────── */
.a-hero-media { grid-area: stage; align-self: start; position: relative; }
.a-hero-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--h-r-box);
  overflow: hidden;
  overflow: clip;
  background: var(--bg-2);
  box-shadow: var(--h-shadow-2);
  isolation: isolate;
}
.a-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0;
}
.a-hero-photo.a-hero-on { opacity: 1; z-index: 1; }
/* A hairline ring over the photograph, so a bright window at its edge never melts into the page. */
.a-hero-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(11, 15, 46, 0.08);
  pointer-events: none;
}

/* ── The one entrance on this page: one beat, 900ms ────────────────────────────
   The name rises out of its line masks, the rest comes into focus after it, and the
   portrait settles in scale only: it is painted from its first frame (it is the LCP image). */
@keyframes a-hero-rise { from { translate: 0 108%; } }
@keyframes a-hero-in { from { opacity: 0; translate: 0 var(--h-rise, 18px); filter: blur(var(--h-blur, 8px)); } }
@keyframes a-hero-up { from { opacity: 0; translate: 0 12px; } }
@keyframes a-hero-settle { from { scale: 1.05; } }
@media (prefers-reduced-motion: no-preference) {
  .a-hero-line__in { animation: a-hero-rise var(--h-t-arrive) var(--h-ease) backwards; }
  .a-hero-line:nth-child(2) .a-hero-line__in { animation-delay: var(--h-step); }
  .a-hero-post { animation: a-hero-in var(--h-t-arrive) var(--h-ease) 140ms backwards; }
  .a-hero-facts { animation: a-hero-in var(--h-t-arrive) var(--h-ease) 210ms backwards; }
  .a-hero-cta { animation: a-hero-in var(--h-t-arrive) var(--h-ease) 280ms backwards; }
  /* No filter on the glass (a filtered element frosts nothing). */
  .a-hero-roles { animation: a-hero-up var(--h-t-arrive) var(--h-ease) 280ms backwards; }
  .a-hero-photo:first-child { animation: a-hero-settle var(--h-t-arrive) var(--h-ease) backwards; }
}

/* ── Phone: the name, the portrait with its control, the line, the door ─────── */
@media (max-width: 719px) {
  .a-hero-inner {
    padding: 122px 0 64px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "name" "stage" "facts" "cta";
  }
  .a-hero-name { font-size: clamp(2.6rem, 18.5vw, 4.75rem); }
  .a-hero-post { margin-top: 0.6rem; font-size: 1.0625rem; }
  .a-hero-media { margin-top: 22px; }
  .a-hero-roles { bottom: 12px; font-size: clamp(1.15rem, 5.6vw, 1.45rem); }
  .a-hero-role { padding-inline: clamp(10px, 3.6vw, 16px); }
  .a-hero-facts { margin-top: 22px; font-size: 1.0625rem; }
  .a-hero-cta { margin-top: 20px; }
}

/* ── Reduced motion, or no script: one portrait, no control, all three lines ── */
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .a-hero-roles { display: none; }
  .a-hero-facts { display: block; min-height: 0; text-wrap: pretty; }
  .a-hero-fact { opacity: 1; visibility: visible; translate: none; filter: none; transition: none; }
  .a-hero-fact + .a-hero-fact { margin-top: 0.45em; }
}

/* Reduce transparency or more contrast: the control turns solid, like every base glass. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .a-hero-roles.h-glass { --hg-tint: var(--h-glass-solid); }
}
/* Windows high contrast: the thumb becomes a system colour edge. */
@media (forced-colors: active) {
  .a-hero-mark { background: Highlight; }
  .a-hero-role--btn[aria-pressed="true"] { text-decoration: underline; }
}