/* about/training.css: the training section of about.html (key: training). Owned by the training builder.
   THE WALL HE EARNED. His office wall of framed diplomas, rebuilt as a salon wall: his portrait in the middle and
   every stage of his life as a framed piece (a fine wood moulding, a white mat with a bevel cut, the paper behind
   it, glass over it; text only: no seals, crests, signatures or anything that imitates a real diploma).
   training.js adds .a-training--wall, hangs the frames in the order of his life, strings one gold thread nail to
   nail and opens a frame into the card. Without script the same markup is a plain ordered list of framed stages.

   The wall is a container. Three compositions, picked by the wall's own width, place every piece in design units
   (--a-training-x/-y/-w/-h), so each scales as one object: wide (1000px and up, 1200 units), mid (600 to 999px,
   900 units), narrow (under 600px, 358 units, two columns). Every composition is laid out so the thread can drape
   along the top lines and nails in life order without ever crossing a frame: a frame whose thread has to change
   rows says which way it loops around the wall's edge (--a-training-turn: left | right).
   The old version's sticky photo, frosted plate, odometer and dotted rail are gone; nothing of them is kept. */

.a-training {
  position: relative;
  background: var(--bg-2);
  padding: 8rem 5vw;
}
.a-training-inner { max-width: var(--max-w); margin: 0 auto; }

/* The page's chapter heading size (positions, nairobi, affil use the same), no closing stop. */
.a-training-title {
  margin: 0 0 3.5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.75rem, 5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ── THE FRAME ─────────────────────────────────────────────────────────────── */
.a-training-piece { margin: 0; }
.a-training-frame { position: relative; height: 100%; }
.a-training-body {
  position: relative;
  box-sizing: border-box;
  height: 100%;
  border: var(--a-training-mould, 4px) solid var(--ink-2);              /* the moulding, lit from above */
  border-top-color: var(--ink-3);
  border-bottom-color: var(--ink);
  outline: 1px solid rgba(255, 255, 255, 0.16);                          /* its bevel catching the light */
  outline-offset: calc(-0.5 * var(--a-training-mould, 4px) - 0.5px);
  background: var(--white);                                             /* the mat */
  padding: var(--a-training-mat, 14px);
  box-shadow:
    inset 0 1px 3px rgba(11, 15, 46, 0.22),                             /* the moulding's lip shades the mat */
    inset 0 0 1px rgba(11, 15, 46, 0.22),
    0 1px 1px rgba(11, 15, 46, 0.08),
    0 7px 12px -6px rgba(11, 15, 46, 0.22),
    0 18px 32px -18px rgba(11, 15, 46, 0.22);
}
.a-training-window {                                                    /* the paper, a step behind the mat's cut */
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--a-training-pad, 12px);
  background: var(--card-2);
  box-shadow:
    0 0 0 1px var(--white),                                             /* the bevel of the cut */
    0 0 0 2px rgba(11, 15, 46, 0.07),
    inset 1px 2px 3px rgba(11, 15, 46, 0.10);
  overflow: hidden;
}
.a-training-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: pretty;
}
.a-training-line {
  margin: 0.4em 0 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-2);
  text-wrap: pretty;
}
.a-training-lead { margin: 0; }
.a-training-jane {
  display: block;
  margin: 0.55em 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.a-training-more {
  display: block;
  margin: 0.6em 0 0;
  max-width: 44ch;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-2);
  text-wrap: pretty;
}
/* Gold marks time on this wall: the thread that orders it and the date on every frame (legacy gold ink:
   4.9:1 on the mat, 4.6:1 on the paper). */
.a-training-when {
  margin: auto 0 0;
  padding-top: 0.5em;
  font-family: 'Bebas Neue', var(--display);
  font-size: 1.75rem;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--legacy-gold-ink);
}
.a-training-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.a-training-piece--portrait .a-training-window { padding: 0; background: var(--bg-3); }
.a-training-piece--virginia .a-training-body {                         /* the gold slip: where the legacy is */
  box-shadow:
    inset 0 0 0 var(--a-training-slip, 3px) var(--legacy-gold),
    inset 0 1px 3px var(--a-training-slip, 3px) rgba(11, 15, 46, 0.18),
    0 1px 1px rgba(11, 15, 46, 0.08),
    0 9px 16px -7px rgba(11, 15, 46, 0.24),
    0 24px 40px -22px rgba(11, 15, 46, 0.24);
}

/* ── NO SCRIPT: a readable list of framed stages, in order ───────────────── */
.a-training-board { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.a-training-piece--portrait { aspect-ratio: 4 / 5; }
.a-training-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.75rem; align-items: start;
}
.a-training:not(.a-training--wall) .a-training-body { min-height: 10rem; }
@media (max-width: 640px) {
  .a-training:not(.a-training--wall) .a-training-board { grid-template-columns: minmax(0, 1fr); }
  .a-training:not(.a-training--wall) .a-training-piece--portrait { width: min(70%, 16rem); }
}

/* ── THE WALL (script on) ──────────────────────────────────────────────────── */
/* The wall picks the composition by its width; the board is the object every unit is measured on. */
.a-training--wall .a-training-wall { container: a-training-wall / inline-size; }
.a-training-board { --a-training-W: 1200; --a-training-H: 716; --a-training-wire: 22; --a-training-js: 28; }
.a-training--wall .a-training-board {
  --a-training-u: calc(100cqi / var(--a-training-W));
  container-type: inline-size;
  position: relative;
  display: block;
  aspect-ratio: var(--a-training-W) / var(--a-training-H);
  transform-origin: 50% 40%;
  transition: scale 0.6s var(--h-ease-sheet, ease);
  overflow-anchor: none;                     /* Firefox and WebKit anchor on the receding wall and nudge the page */
}
.a-training--wall .a-training-list { display: block; }
.a-training--wall .a-training-piece {
  --a-training-mould: calc(4 * var(--a-training-u));
  --a-training-mat: calc(15 * var(--a-training-u));
  --a-training-pad: calc(12 * var(--a-training-u));
  position: absolute;
  z-index: 1;
  left: calc(var(--a-training-x) * var(--a-training-u));
  top: calc(var(--a-training-y) * var(--a-training-u));
  width: calc(var(--a-training-w) * var(--a-training-u));
  height: calc(var(--a-training-h) * var(--a-training-u));
  aspect-ratio: auto;
}
/* Each piece was framed at a different time, as on a real wall: the finest frames and widest mats for the
   early years, slightly heavier mouldings for the medical record, the heaviest (with the gold slip) for Virginia. */
.a-training--wall .a-training-piece--iran,
.a-training--wall .a-training-piece--bellevue { --a-training-mould: calc(3 * var(--a-training-u)); --a-training-mat: calc(18 * var(--a-training-u)); }
.a-training--wall .a-training-piece--uw,
.a-training--wall .a-training-piece--ucla,
.a-training--wall .a-training-piece--chief { --a-training-mould: calc(4.5 * var(--a-training-u)); --a-training-mat: calc(14 * var(--a-training-u)); }
.a-training--wall .a-training-piece--seattle { --a-training-mould: calc(3.5 * var(--a-training-u)); --a-training-mat: calc(16 * var(--a-training-u)); }
.a-training--wall .a-training-piece--portrait { --a-training-mould: calc(4.5 * var(--a-training-u)); --a-training-mat: calc(16 * var(--a-training-u)); }
.a-training--wall .a-training-piece--virginia {
  --a-training-mould: calc(6.5 * var(--a-training-u));
  --a-training-mat: calc(20 * var(--a-training-u));
  --a-training-pad: calc(17 * var(--a-training-u));
  --a-training-slip: calc(2.5 * var(--a-training-u));
  --a-training-ys: 34;
}
/* The nail: brass, fixed in the wall; it never moves when the frame swings. */
.a-training--wall .a-training-piece::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(-1 * var(--a-training-wire) * var(--a-training-u));
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--legacy-gold-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 1.5px rgba(11, 15, 46, 0.35);
  transition: opacity 0.18s var(--h-ease-out, ease-out), scale 0.4s var(--h-spring, ease-out);
}
.a-training--wall .a-training-piece.a-training-piece--waiting::before { opacity: 0; scale: 0.3; }   /* the nail goes in just before its frame */
/* The frame swings about its nail. */
.a-training--wall .a-training-frame {
  z-index: 2;
  transform-origin: 50% calc(-1 * var(--a-training-wire) * var(--a-training-u));
  will-change: transform;
}
/* The picture wire, nail to the frame's back. */
.a-training--wall .a-training-frame::before {
  content: "";
  position: absolute;
  left: max(24%, calc(50% - 4.5 * var(--a-training-wire) * var(--a-training-u)));
  right: max(24%, calc(50% - 4.5 * var(--a-training-wire) * var(--a-training-u)));
  bottom: calc(100% - var(--a-training-mould));
  height: calc(var(--a-training-wire) * var(--a-training-u) + var(--a-training-mould));
  background:
    linear-gradient(to top left, transparent calc(50% - 0.7px), rgba(80, 88, 128, 0.72) 50%, transparent calc(50% + 0.7px)) left / 50% 100% no-repeat,
    linear-gradient(to top right, transparent calc(50% - 0.7px), rgba(80, 88, 128, 0.72) 50%, transparent calc(50% + 0.7px)) right / 50% 100% no-repeat;
  pointer-events: none;
}
/* The glass: a faint glare that slides across it as the frame swings (--a-training-tilt is set while it moves). */
.a-training--wall .a-training-body::before {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0.05) 53%, rgba(255, 255, 255, 0) 60%) no-repeat;
  background-size: 300% 100%;
  background-position: calc(42% + var(--a-training-tilt, 0) * 9%) 0;
}
.a-training--wall .a-training-body {
  transition: translate 0.32s var(--h-ease-out, ease-out), box-shadow 0.32s var(--h-ease-out, ease-out), scale 0.56s var(--h-spring, ease-out);
}
.a-training--wall .a-training-name { font-size: clamp(14px, calc(var(--a-training-ts, 17.5) * var(--a-training-u)), 22px); }
.a-training--wall .a-training-line { font-size: clamp(12px, calc(var(--a-training-ls, 14) * var(--a-training-u)), 17px); }
.a-training--wall .a-training-jane { font-size: clamp(17px, calc(var(--a-training-js, 28) * var(--a-training-u)), 34px); }
.a-training--wall .a-training-more { font-size: clamp(12px, calc(var(--a-training-ms, 13.5) * var(--a-training-u)), 15px); }
.a-training--wall .a-training-when { font-size: clamp(20px, calc(var(--a-training-ys, 26) * var(--a-training-u)), 34px); }
.a-training--wall .a-training-piece--virginia .a-training-name { font-size: clamp(15px, calc(var(--a-training-ts, 17.5) * 1.06 * var(--a-training-u)), 23px); }

/* The stretched button: the whole frame is the target. Its ring is drawn on the frame. */
.a-training-open {
  appearance: none; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer;
}
.a-training-open::after { content: ""; position: absolute; z-index: 1; inset: calc(-1 * var(--a-training-mould)); }
.a-training-open:focus-visible { outline: none; }
.a-training-piece:has(.a-training-open:focus-visible) .a-training-body {
  outline: 2px solid var(--h-focus, #0284C7);
  outline-offset: 6px;
}

/* Lift: a frame you can open comes a little off the wall under the pointer or the keyboard. */
.a-training--wall .a-training-piece:has(.a-training-open:focus-visible) .a-training-body,
.a-training--wall .a-training-piece.a-training-piece--near .a-training-body {
  translate: 0 -3px;
  box-shadow:
    inset 0 1px 3px rgba(11, 15, 46, 0.22),
    inset 0 0 1px rgba(11, 15, 46, 0.22),
    0 2px 3px rgba(11, 15, 46, 0.07),
    0 18px 28px -12px rgba(11, 15, 46, 0.22),
    0 36px 56px -28px rgba(11, 15, 46, 0.22);
}
.a-training--wall .a-training-piece--virginia:has(.a-training-open:focus-visible) .a-training-body,
.a-training--wall .a-training-piece--virginia.a-training-piece--near .a-training-body {
  box-shadow:
    inset 0 0 0 var(--a-training-slip, 3px) var(--legacy-gold),
    inset 0 1px 3px var(--a-training-slip, 3px) rgba(11, 15, 46, 0.18),
    0 2px 3px rgba(11, 15, 46, 0.07),
    0 20px 32px -12px rgba(11, 15, 46, 0.24),
    0 42px 64px -30px rgba(11, 15, 46, 0.24);
}
.a-training--wall .a-training-piece:active .a-training-body { scale: 0.985; transition-duration: 0.32s, 0.32s, 0.12s; }

/* The gold thread, nail to nail in the order of his life. It runs on the wall, behind every frame. */
.a-training-string {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.a-training-thread {
  fill: none;
  stroke: var(--legacy-gold);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.a-training-thread.a-training-thread--drawn { stroke-dashoffset: 0; }

/* A frame off the wall leaves its nail and a clean patch where it hung. */
.a-training--wall .a-training-piece.a-training-piece--lifted .a-training-frame { visibility: hidden; }
.a-training--wall .a-training-piece.a-training-piece--lifted::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(11, 15, 46, 0.05);
}
.a-training--open .a-training-board { scale: 0.97; }

/* ── COMPOSITIONS (x, y, w, h in design units; each nail sits --a-training-wire above its frame) ─────────── */
/* wide: the early years along one top line, the thread loops down the right edge at Virginia and runs home
   along the second line to Seattle, under the portrait that hangs inside the loop */
.a-training-piece--iran     { --a-training-x: 0;   --a-training-y: 46;  --a-training-w: 210; --a-training-h: 210; }
.a-training-piece--bellevue { --a-training-x: 238; --a-training-y: 30;  --a-training-w: 228; --a-training-h: 232; }
.a-training-piece--portrait { --a-training-x: 494; --a-training-y: 70;  --a-training-w: 196; --a-training-h: 245; }
.a-training-piece--uw       { --a-training-x: 718; --a-training-y: 30;  --a-training-w: 228; --a-training-h: 232; }
.a-training-piece--ucla     { --a-training-x: 974; --a-training-y: 30;  --a-training-w: 226; --a-training-h: 250; }
.a-training-piece--virginia { --a-training-x: 760; --a-training-y: 358; --a-training-w: 440; --a-training-h: 326; --a-training-turn: right; }
.a-training-piece--auckland { --a-training-x: 516; --a-training-y: 358; --a-training-w: 216; --a-training-h: 250; }
.a-training-piece--chief    { --a-training-x: 268; --a-training-y: 358; --a-training-w: 220; --a-training-h: 236; }
.a-training-piece--seattle  { --a-training-x: 0;   --a-training-y: 358; --a-training-w: 240; --a-training-h: 270; }

/* mid: three lines of frames read as an S, the portrait hung low in the middle line, inside the S */
@container a-training-wall (min-width: 600px) and (max-width: 999.98px) {
  .a-training-board { --a-training-W: 900; --a-training-H: 948; --a-training-ts: 18; --a-training-ls: 14.5; --a-training-js: 22; --a-training-ys: 28; }
  .a-training-piece--iran     { --a-training-x: 0;   --a-training-y: 30;  --a-training-w: 280; --a-training-h: 160; }
  .a-training-piece--bellevue { --a-training-x: 310; --a-training-y: 30;  --a-training-w: 280; --a-training-h: 164; }
  .a-training-piece--uw       { --a-training-x: 620; --a-training-y: 30;  --a-training-w: 280; --a-training-h: 180; }
  .a-training-piece--ucla     { --a-training-x: 620; --a-training-y: 262; --a-training-w: 280; --a-training-h: 320; --a-training-turn: right; }
  .a-training-piece--portrait { --a-training-x: 340; --a-training-y: 310; --a-training-w: 220; --a-training-h: 275; }
  .a-training-piece--virginia { --a-training-x: 0;   --a-training-y: 262; --a-training-w: 280; --a-training-h: 380; --a-training-turn: none; }
  .a-training-piece--auckland { --a-training-x: 0;   --a-training-y: 690; --a-training-w: 280; --a-training-h: 190; --a-training-turn: left; }
  .a-training-piece--chief    { --a-training-x: 310; --a-training-y: 690; --a-training-w: 280; --a-training-h: 180; }
  .a-training-piece--seattle  { --a-training-x: 620; --a-training-y: 690; --a-training-w: 280; --a-training-h: 230; }
  .a-training--wall .a-training-piece--virginia { --a-training-ys: 30; --a-training-mat: calc(13 * var(--a-training-u)); --a-training-pad: calc(13 * var(--a-training-u)); }
}

/* narrow: a two column wall read in pairs, the thread looping at each edge; Virginia and Seattle span it */
@container a-training-wall (max-width: 599.98px) {
  .a-training-board {
    --a-training-W: 358; --a-training-H: 1540; --a-training-wire: 18;
    --a-training-ts: 15.5; --a-training-ls: 13; --a-training-js: 19; --a-training-ms: 13; --a-training-ys: 24;
    max-width: 460px; margin-inline: auto;
  }
  .a-training--wall .a-training-piece { --a-training-mould: calc(3.5 * var(--a-training-u)); --a-training-mat: calc(11 * var(--a-training-u)); --a-training-pad: calc(10 * var(--a-training-u)); }
  .a-training--wall .a-training-piece--virginia { --a-training-mould: calc(5 * var(--a-training-u)); --a-training-mat: calc(13 * var(--a-training-u)); --a-training-pad: calc(13 * var(--a-training-u)); --a-training-slip: calc(2 * var(--a-training-u)); --a-training-ys: 28; }
  .a-training-piece--iran     { --a-training-x: 0;   --a-training-y: 26;   --a-training-w: 172; --a-training-h: 150; }
  .a-training-piece--bellevue { --a-training-x: 186; --a-training-y: 26;   --a-training-w: 172; --a-training-h: 176; }
  .a-training-piece--uw       { --a-training-x: 186; --a-training-y: 248;  --a-training-w: 172; --a-training-h: 184; --a-training-turn: right; }
  .a-training-piece--ucla     { --a-training-x: 0;   --a-training-y: 248;  --a-training-w: 172; --a-training-h: 218; --a-training-turn: none; }
  .a-training-piece--portrait { --a-training-x: 81;  --a-training-y: 500;  --a-training-w: 196; --a-training-h: 245; }
  .a-training-piece--virginia { --a-training-x: 0;   --a-training-y: 793;  --a-training-w: 358; --a-training-h: 276; --a-training-turn: left; }
  .a-training-piece--auckland { --a-training-x: 186; --a-training-y: 1117; --a-training-w: 172; --a-training-h: 172; --a-training-turn: right; }
  .a-training-piece--chief    { --a-training-x: 0;   --a-training-y: 1117; --a-training-w: 172; --a-training-h: 172; --a-training-turn: none; }
  .a-training-piece--seattle  { --a-training-x: 0;   --a-training-y: 1337; --a-training-w: 358; --a-training-h: 180; --a-training-turn: left; }
}

/* ── THE CARD: the frame off the wall, toward you ─────────────────────────── */
.a-training-sheet[open] {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--ink);
  overflow: hidden;
  overscroll-behavior: contain;
}
.a-training-sheet::backdrop { background: transparent; }
/* Base keeps focused things clear of the fixed nav with scroll margins; inside the fixed sheet they would only
   make the browser scroll the page under the card. */
.a-training-sheet [id], .a-training-sheet button, .a-training-sheet [tabindex] { scroll-margin: 0; }
.a-training-scrim {
  position: absolute; inset: 0;
  background: rgba(11, 15, 46, 0.42);
  opacity: 0;
  transition: opacity 0.5s var(--h-ease, ease);
}
.a-training--open .a-training-scrim { opacity: 1; }
.a-training-card {
  --a-training-cs: 2;                                                    /* how far the frame was scaled up */
  position: relative;
  box-sizing: border-box;
  display: flex; flex-direction: column;
  width: var(--a-training-cw, min(720px, 90vw));
  min-height: var(--a-training-ch, 0px);
  max-height: calc(100dvh - 48px);
  border: var(--a-training-cmould, 10px) solid var(--ink-2);
  border-top-color: var(--ink-3);
  border-bottom-color: var(--ink);
  outline: 1px solid rgba(255, 255, 255, 0.16);
  outline-offset: calc(-0.5 * var(--a-training-cmould, 10px) - 0.5px);
  background: var(--white);
  padding: var(--a-training-cmat, 28px);
  padding-bottom: calc(var(--a-training-cmat, 28px) * 0.6);
  box-shadow:
    inset 0 2px 5px rgba(11, 15, 46, 0.2),
    0 2px 4px rgba(11, 15, 46, 0.10),
    0 40px 80px -20px rgba(11, 15, 46, 0.45);
  container-type: inline-size;
}
.a-training-card--virginia {
  box-shadow:
    inset 0 0 0 var(--a-training-cslip, 5px) var(--legacy-gold),
    inset 0 2px 5px var(--a-training-cslip, 5px) rgba(11, 15, 46, 0.18),
    0 2px 4px rgba(11, 15, 46, 0.10),
    0 40px 80px -20px rgba(11, 15, 46, 0.45);
}
.a-training-card__window {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: clamp(22px, 5.2cqi, 64px) clamp(22px, 5.6cqi, 72px) clamp(20px, 4cqi, 48px);
  background: var(--card-2);
  box-shadow: 0 0 0 1px var(--white), 0 0 0 2px rgba(11, 15, 46, 0.07), inset 1px 2px 4px rgba(11, 15, 46, 0.09);
  overflow: auto;
  overscroll-behavior: contain;
}
.a-training-card__name {
  margin: 0;
  padding-right: 3rem;                                                  /* clear of the close control */
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.875rem, calc(17.5px * var(--a-training-cs)), 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.a-training-card__name:focus { outline: none; }
.a-training-card__line {
  margin: 0.7em 0 0;
  max-width: 40ch;
  font-family: var(--sans);
  font-size: clamp(1.0625rem, calc(10px * var(--a-training-cs)), 1.375rem);
  line-height: 1.45;
  color: var(--text-2);
}
/* The biggest type in the section: one size above the chapter heading at every width. */
.a-training-card__jane {
  margin: 0.32em 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.875rem, 5.5vw, 5.5rem);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.a-training-card__more {
  margin: 1.1em 0 0;
  max-width: 48ch;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.4cqi, 1.1875rem);
  line-height: 1.55;
  color: var(--text-2);
}
.a-training-card__when {
  margin: auto 0 0;
  padding-top: 0.45em;
  font-family: 'Bebas Neue', var(--display);
  font-size: clamp(2.75rem, calc(26px * var(--a-training-cs)), 6rem);
  line-height: 0.85;
  letter-spacing: 0.02em;
  color: var(--legacy-gold-ink);
}
.a-training-card--virginia .a-training-card__name { font-size: clamp(1.25rem, 2.4cqi, 1.875rem); letter-spacing: -0.015em; }
.a-training-card--virginia .a-training-card__line { margin-top: 0.35em; }
.a-training-card--virginia .a-training-card__jane { margin-top: 0.42em; }
.a-training-card [hidden] { display: none; }
.a-training-card__nav {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: calc(var(--a-training-cmat, 28px) * 0.45);
  min-height: 44px;
}
.a-training-card__nav .h-btn { font-variant-numeric: lining-nums; }
.a-training-card__next { margin-left: auto; }
.a-training-card__close {
  position: absolute; z-index: 2;
  top: calc(var(--a-training-cmat, 28px) + 10px);
  right: calc(var(--a-training-cmat, 28px) + 10px);
}
.a-training-card__close svg { width: 18px; height: 18px; }
.a-training-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Phones: the card is a full height sheet that keeps the frame's moulding. */
@media (max-width: 599.98px) {
  .a-training { padding: 5rem 16px; }
  .a-training-title { margin-bottom: 2.25rem; }
  .a-training-sheet[open] { place-items: end center; }
  .a-training-card {
    width: 100%;
    min-height: 0;
    height: calc(100dvh - 10px);
    max-height: none;
    border-width: 5px 5px 0;
    border-radius: 18px 18px 0 0;
    outline: none;
    padding: 18px 14px 12px;
    box-shadow: inset 0 2px 5px rgba(11, 15, 46, 0.2), 0 -10px 40px -10px rgba(11, 15, 46, 0.4);
  }
  .a-training-card--virginia { box-shadow: inset 0 0 0 3px var(--legacy-gold), 0 -10px 40px -10px rgba(11, 15, 46, 0.4); }
  .a-training-card::before {                                            /* the grabber: this sheet pulls down */
    content: ""; position: absolute; top: 6px; left: 50%;
    width: 40px; height: 4px; margin-left: -20px; border-radius: 2px;
    background: rgba(11, 15, 46, 0.18);
  }
  .a-training-card__window { padding: 28px 22px 22px; border-radius: 10px 10px 0 0; }
  .a-training-card__name { font-size: 2.25rem; }
  .a-training-card--virginia .a-training-card__name { font-size: 1.25rem; }
  .a-training-card__line { font-size: 1.0625rem; }
  /* The date as big as the sheet allows (training.js passes its length), so a short stage reads as a poster. */
  .a-training-card__when { font-size: min(8rem, calc(76cqi / (var(--a-training-wn, 4) * 0.42))); line-height: 0.82; }
  .a-training-card__close { top: 26px; right: 22px; }
}

/* View Transitions: only the frame and the card are named; the page under them stays live, so the wall
   recedes and the scrim fades by their own transitions while the frame flies. */
html.a-training-vt::view-transition-old(root) { display: none; }
html.a-training-vt::view-transition-new(root) { animation: none; }
html.a-training-vt--swap::view-transition-old(root) { display: block; animation: a-training-vt-out 0.3s var(--h-ease-std, ease) both; }
html.a-training-vt--swap::view-transition-new(root) { animation: a-training-vt-in 0.3s var(--h-ease, ease) both; }
::view-transition-group(a-training-lift) {
  animation-duration: 0.58s;
  animation-timing-function: var(--h-ease-sheet, ease);
}
::view-transition-image-pair(a-training-lift) { isolation: isolate; }
/* Complementary fades with plus-lighter keep the flying object solid the whole way. Opening hands over to the
   crisp live card early; closing keeps the crisp card until the frame is nearly home. */
::view-transition-old(a-training-lift),
::view-transition-new(a-training-lift) {
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  animation-duration: 0.17s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  mix-blend-mode: plus-lighter;
}
::view-transition-old(a-training-lift) { animation-name: a-training-vt-out; }
::view-transition-new(a-training-lift) { animation-name: a-training-vt-in; }
html.a-training-vt--close::view-transition-old(a-training-lift),
html.a-training-vt--close::view-transition-new(a-training-lift) { animation-duration: 0.22s; animation-delay: 0.26s; }
html.a-training-vt--swap::view-transition-old(a-training-lift),
html.a-training-vt--swap::view-transition-new(a-training-lift) { animation-duration: 0.3s; animation-delay: 0.04s; }
@keyframes a-training-vt-out { to { opacity: 0; } }
@keyframes a-training-vt-in { from { opacity: 0; } }

/* Reduced motion: everything hung and still, the thread complete, the card opens and closes at once. */
@media (prefers-reduced-motion: reduce) {
  .a-training--wall .a-training-board,
  .a-training--wall .a-training-body,
  .a-training-scrim { transition: none; }
  .a-training--open .a-training-board { scale: none; }
  .a-training--wall .a-training-piece.a-training-piece--near .a-training-body { translate: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .a-training-scrim { background: rgba(11, 15, 46, 0.7); }
  .a-training--wall .a-training-body::before { display: none; }
}
@media (forced-colors: active) {
  .a-training-body, .a-training-card { border-color: CanvasText; }
  .a-training-thread { stroke: CanvasText; }
}
@media print {
  .a-training--wall .a-training-frame { transform: none !important; opacity: 1 !important; }
  .a-training-thread { stroke-dashoffset: 0; }
}