/* truemanity studio — the biography's stages: the timeline told again, in detail, under the sheet (builds/bio; a
   proposal, registered by the main session).

   Five scenes on the wall, one per stretch of the timeline, and between the fourth and the fifth the bank's plate
   redrawn as the studio (48 · PlateRedraw, the site's own). Two portraits only (the director, 2026-11-11): at the
   piano, and in profile beside the AI positions. Everywhere else the scene is paper and a picture.

   Everything is under .stages, so the scenes' type and tokens never reach the sheet above them: the scenes keep their
   own small scale (they are cards on a wall, set in their own width), the sheet keeps the system's.
   A scene's geometry is in its own width (cqw): one file reads at 390 and on the wall. */

.stages {
  --floor: #F6F7F9;
  --shadow-standing: inset 1px 1px 0 rgba(255,255,255,0.9), inset -1px 0 0 rgba(22,23,23,0.06), 0 1px 0 rgba(22,23,23,0.32), 0 22px 26px -20px rgba(30,36,46,0.42);
  --dur-colour: 900ms;
  --grain-paper-tile: url("textures/grain-paper-k035.png");
}

/* — the room: the page's own wall goes on behind the scenes (a wall of their own made a seam under the sheet) — */
.stages .stage {
  container-type: inline-size;
  padding: 40px 0;
  overflow-x: clip;
  color: var(--ink-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.stages .stage--bleed { padding: 0; }

/* — a scene — */
.stages .sc { position: relative; container-type: inline-size; max-width: 1180px; margin: 0 auto; outline: none; }
.stages .sc__floor { position: absolute; z-index: 0; left: -50vw; right: -50vw; bottom: -40px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(40, 46, 56, 0.10), rgba(40, 46, 56, 0) 34px), var(--floor); }

/* — type: the scenes' own scale (phone first) — */
.stages .t-label { font-family: var(--font-label, var(--font-sans)); font-weight: 600; font-size: 10px; letter-spacing: 0.10em; line-height: 1.2; text-transform: uppercase; margin: 0; }
.stages .t-mono { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.04em; line-height: 1.35; margin: 0; }
.stages .t-title { font-family: var(--font-sans); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.stages .t-year { font-size: 34px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; margin: 0; }
.stages .t-body { font-size: 15px; font-weight: 400; letter-spacing: -0.005em; line-height: 1.45; margin: 0; }
.stages .t-card-body { font-size: 12.5px; font-weight: 400; letter-spacing: 0; line-height: 1.42; margin: 0; }
.stages .name { font-weight: 500; }
.stages .tag { display: flex; align-items: center; gap: 10px; }
.stages .tag::before { content: ""; width: 6px; height: 16px; background: var(--datum-red); flex: none; }

.stages .entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.stages .entry { display: grid; gap: 4px; }
/* an entry reached from the chart: its date takes the red, and it stops clear of the screen's top */
.stages [id^="e-"] { scroll-margin-top: 96px; outline: none; }
.stages .is-marked > .t-mono:first-child, .stages .is-marked > .tag { color: var(--datum-red); }
.stages .bs-rule { height: 1px; background: var(--timeline-red); }
.stages .foot { margin: 0; }

/* — a picture as a pair: white by default; the whole scene turns to colour on hover, focus or tap — */
.stages .duo { position: relative; display: block; margin: 0; overflow: hidden; }
.stages .duo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stages .duo__white { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--dur-colour) var(--ease); }
.stages .sc:hover .duo__white, .stages .sc:focus-visible .duo__white, .stages .sc:active .duo__white { opacity: 0; }
.stages .duo--edge { box-shadow: 0 0 0 1px var(--hairline-light); }
.stages .bs-fig { position: absolute; }
.stages .bs-fig img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stages .caption { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .stages .duo__white { transition-duration: 1ms; } }

.stages .bs-dim { display: flex; align-items: center; gap: 10px; }
.stages .bs-dim__line { flex: 1; height: 1px; background: var(--mark); position: relative; }
.stages .bs-dim__line::before, .stages .bs-dim__line::after { content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--datum-red); }
.stages .bs-dim__line::before { left: 0; } .stages .bs-dim__line::after { right: 0; }

/* ============ 1 · Art: a narrow strip pinned to the wall, the drawing beside it ============ */
.stages .art2 { padding: 2cqw 0 6cqw; }
.stages .art2__strip { position: relative; z-index: 1; margin: 0 auto; width: 84cqw; box-sizing: border-box;
  padding: 9cqw 6cqw 6cqw; display: flex; flex-direction: column; gap: 22px;
  background-color: var(--paper-card); background-image: var(--grain-paper-tile); background-size: 192px; background-blend-mode: overlay;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.95), inset -1px -1px 0 rgba(22,23,23,0.06), 2px 3px 4px -1px rgba(22,25,29,0.14), 10px 18px 28px -6px rgba(40,46,56,0.14); }
.stages .art2__pin { position: absolute; top: 2.2cqw; left: 50%; width: 9px; height: 9px; margin-left: -4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #D9DBDF, #8F9399 70%); box-shadow: 1px 2px 2px rgba(22,25,29,0.35); }
.stages .art2__thread { position: relative; padding-left: 20px; flex: 1; align-content: start; gap: 28px; }
.stages .art2__thread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--timeline-red); }
.stages .art2__thread .entry { position: relative; }
.stages .art2__thread .entry::before { content: ""; position: absolute; left: -24px; top: 6px; width: 9px; height: 1px; background: var(--timeline-red); }
.stages .art2__mini { aspect-ratio: 4 / 3; }
.stages .art2__pic { display: none; }

/* ============ 2 · Piano: no card; a red thread, the text, his photograph at the piano ============ */
/* no padding on the scene itself: a container's cqw is its content box, and padding would shrink every measure inside */
.stages .pn { position: relative; container-type: inline-size; outline: none; }
.stages .pn:hover .duo__white, .stages .pn:focus-visible .duo__white, .stages .pn:active .duo__white { opacity: 0; }
.stages .pn__line { position: absolute; left: 7cqw; top: 0; bottom: 0; width: 1px; background: var(--timeline-red); }
.stages .pn__photo { top: 0; left: 0; width: 100cqw; aspect-ratio: 1392 / 1920; }
.stages .pn__photo img { object-fit: cover; }
/* the wall's music: red hand-drawn staves, schemes and notes on the wall of this scene — the director's picture
   (assets/patterns/music/), its ink taken off its board by the wall-drawings skill, as the bank's schemes were. It
   lies above the words, never under them, and its right end runs on behind the photograph, as a wall does.
   --pw is its width; its height follows (2447 : 664), and the words start below it. */
.stages .pn { --pw: 150cqw; --ph: calc(var(--pw) * 664 / 2447); }
.stages .pn__wall { position: absolute; pointer-events: none; opacity: 0.62; left: -6cqw; top: calc(138cqw + 14px); width: var(--pw); height: var(--ph);
  background: url("../media/bio/stages/wall-music.webp") left top / 100% 100% no-repeat; }
.stages .pn__text { position: relative; display: grid; gap: 26px; box-sizing: border-box; padding: calc(138cqw + var(--ph) + 34px) 6cqw 12cqw 14cqw; }
.stages .pn__cols { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }

/* ============ 3 · Mathematics: a card standing on the floor, the drawing on it ============ */
.stages .math2 { padding: 9cqw 0 6cqw; }
.stages .math2 .sc__floor { top: calc(100% - 6cqw); }
.stages .math2__card { position: relative; z-index: 1; margin: 0 3cqw; box-sizing: border-box; padding: 8cqw 6cqw; display: grid; gap: 8cqw;
  background-image: var(--grain-paper-tile), linear-gradient(100deg, #EDEDEF 0%, #E4E4E7 100%); background-size: 192px, auto; background-blend-mode: overlay, normal;
  background-color: #E9E9EC; box-shadow: var(--shadow-standing); }
/* a line drawing on white: multiplied, its white is the card's paper */
.stages .math2__drawing { margin: 0; }
.stages .math2__drawing img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.stages .math2__text { display: grid; gap: 24px; }

/* ============ 4 · AI positions: his profile behind the card and printed on it; on the wall behind him, the schemes ============ */
/* Back to front: the wall's drawings; the man, cut out of the keyframe; the card, plain paper, not
   see-through; on the card a window with a sharp print of the same photograph on its own plain ground. The window
   starts at the card's very top edge, and the print in it is larger than the man behind and off him, so at that edge
   his head steps: a print on a card, a man behind it. So the same head is seen twice, once on one tone, once against
   the drawings. Geometry in the scene's own width; the keyframe is 1800 x 1238. */
/* --ft lifts the keyframe by the empty room it has above his head, and the card with it (--st and --y1 are that
   much less; --tp is measured from the card's own top and stays): the scene begins at his head, not at the picture's edge */
.stages .ai2 { --fw: 210cqw; --fl: -86cqw; --ft: -20cqw; --st: 20cqw; --x0: 20cqw; --x1: 97cqw; --y1: 110cqw; --tp: calc(90cqw + 28px); --inset: 8cqw; --dx: -3.2cqw; --dy: 1.2cqw; }
/* the wall's drawings: red hand-drawn schemes of banking and its systems, across the whole wall and behind him —
   chaotic, lying horizontally (the director's picture; the wall-drawings skill took the ink off its own wall, so it
   lies on this one at this wall's brightness). The card and the print in it stay clean: that is the contrast.
   The scene starts at the top of his head: nothing but the head's own height stands between the scene before and
   the card's first line (the director, 2026-11-11: with more wall above, the title came too late). */
.stages .stage--ai { position: relative; }
.stages .ai-wall { position: absolute; inset: 0; pointer-events: none; opacity: 0.62;
  background: url("../media/bio/stages/wall-drawings.webp") center top -100px / max(100%, 1180px) auto no-repeat; }
.stages .ai2__frame { left: var(--fl); top: var(--ft); width: var(--fw); aspect-ratio: 1800 / 1238; }
.stages .ai2__person { z-index: 0; pointer-events: none; }   /* his box runs past the scene's sides: the wall there must not answer the pointer */
.stages .ai2__sheet { position: relative; z-index: 1; margin: var(--st) 3cqw 0; padding: 0 5cqw 28px;
  background-color: var(--paper-card); background-image: var(--grain-paper-tile); background-size: 192px; background-blend-mode: overlay;
  box-shadow: var(--shadow-card); }
.stages .ai2__win { position: absolute; z-index: 2; pointer-events: none; overflow: hidden; left: var(--x0); top: var(--st); width: calc(var(--x1) - var(--x0)); height: calc(var(--y1) - var(--st)); }
.stages .ai2__win .ai2__frame { left: calc(var(--fl) - var(--x0)); top: calc(var(--ft) - var(--st)); transform-origin: 70% 40%; transform: translate(var(--dx), var(--dy)) scale(1.06); }
.stages .ai2__topline { position: absolute; z-index: 3; left: var(--inset); right: var(--inset); top: calc(var(--st) + 46px); height: 1px; background: var(--timeline-red); }
.stages .ai2__text { position: relative; display: grid; gap: 26px; padding-top: var(--tp); }
.stages .ai__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
/* ============ 4½ · the bank's plate redrawn as the studio: the site's own board, on the same wall ============ */
.stages .bs-room { padding-top: 0; }

/* ============ 5 · Creative technology: a tall board standing on the floor ============ */
.stages .cr2 { padding: 0 0 9cqw; }
.stages .cr2 .sc__floor { top: calc(100% - 9cqw); }
.stages .cr2__board { position: relative; z-index: 1; margin: 0 auto; width: min(100% - 24px, 560px); box-sizing: border-box; padding: 7cqw 5cqw 7cqw;
  background-color: var(--paper-card); background-image: var(--grain-paper-tile); background-size: 192px; background-blend-mode: overlay;
  box-shadow: var(--shadow-standing); display: grid; gap: 28px; }
.stages .bs-spec { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.stages .bs-spec li { display: grid; grid-template-columns: 84px 1fr; column-gap: 12px; }
.stages .cr2__film { aspect-ratio: 2.39 / 1; }
.stages .cr2__prints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stages .cr2__prints .duo { aspect-ratio: 1 / 1; }
.stages .cr2__rule { height: 2px; background: var(--datum-red); margin: 0 -5cqw; }

/* ================================================ the wall (desktop) ================================================ */
@container (min-width: 760px) {
  .stages .stage { padding: 64px 0; }
  .stages .stage--bleed { padding: 0; }
  .stages .t-label { font-size: 11px; }
  .stages .t-mono { font-size: 11px; }
  .stages .t-title { font-size: 26px; }
  .stages .t-year { font-size: 44px; }
  .stages .t-body { font-size: 15.5px; }
  .stages .t-card-body { font-size: 13px; }

  /* two entries: the strip is as tall as they need and no taller, the drawing beside it in proportion (the
     director, 2026-11-12: "this section can be made smaller, there are only two points") */
  .stages .art2 { padding: 2cqw 0 4cqw; }
  .stages .art2__strip { margin: 0 0 0 22cqw; width: 21cqw; min-height: 44cqw; padding: 4.5cqw 2.2cqw 2.6cqw; }
  .stages .art2__pin { top: 1.4cqw; }
  .stages .art2__mini { display: none; }
  .stages .art2__pic { display: block; position: absolute; z-index: 0; left: 43cqw; top: 7cqw; width: 31cqw; }
  .stages .art2__pic .duo { aspect-ratio: 4 / 5; }

  /* the music runs along the top of the wall, from the red thread to behind the photograph; the words under it */
  .stages .pn { --pw: 72cqw; min-height: 52cqw; display: flex; align-items: center; }
  .stages .pn__wall { left: 2cqw; top: 2.4cqw; }
  .stages .pn__text { width: 100%; padding: calc(2.4cqw + var(--ph) + 1.2cqw) 50cqw 5cqw 14cqw; }
  /* what the music is for today: under the two columns, as wide as both */
  .stages .pn__use { grid-column: 1 / -1; max-width: 46ch; }
  .stages .pn__line { left: 8cqw; }
  .stages .pn__photo { top: 0; bottom: 0; left: auto; right: 0; width: auto; height: 100%; }
  .stages .pn__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }

  .stages .math2 { padding: 8cqw 0 4cqw; }
  .stages .math2 .sc__floor { top: calc(100% - 4cqw); }
  .stages .math2__card { margin: 0 9cqw; min-height: 46cqw; padding: 5cqw; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5cqw; align-items: center; }

  .stages .ai2 { --fw: 128cqw; --fl: -12cqw; --ft: -9cqw; --st: 18cqw; --x0: 52cqw; --x1: 92cqw; --y1: 78.5cqw; --tp: 78px; --inset: 6cqw; --dx: -2.4cqw; --dy: 0.9cqw; }
  .stages .ai2__sheet { margin: var(--st) 2cqw 0; padding: 0 4cqw 40px; }
  .stages .ai2__text { width: 47%; padding-bottom: 12px; }
  .stages .ai__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 28px; }

  .stages .cr2 { padding-bottom: 6cqw; }
  .stages .cr2 .sc__floor { top: calc(100% - 6cqw); }
  .stages .cr2__board { padding: 40px 28px 40px; }
  .stages .cr2__rule { margin: 0 -28px; }
  .stages .bs-spec li { grid-template-columns: 104px 1fr; }
}

/* between the mathematics card and the AI scene: the card's floor, then his head at once.
   Above it: the card comes up close under the piano scene, so its label is on the screen while the piano still is
   and the reader knows what is next (the director, 2026-11-12) */
.stages .stage--math { padding-top: 8px; padding-bottom: 40px; }
.stages .stage--math .math2 { padding-top: 6cqw; }
.stages .stage--ai { padding-top: 12px; }
@container (min-width: 760px) {
  .stages .stage--math { padding-top: 0; padding-bottom: 40px; }
  .stages .stage--math .math2 { padding-top: 3cqw; }
  .stages .stage--ai { padding-top: 0; }
  /* the drawings' busiest row (the banks) just above the card, whatever the wall's width */
  .stages .ai-wall { background-position: center top calc(150px - 17cqw); }
}

/* ============ the wall text: the director's words on the photograph's wall, before the zoom ============ */
/* A layer of the photograph like the others (its box in frame pixels, the room's depth), but type, not a picture: set
   in its own width, so it is the same lettering whatever the stage's size, with or without the reveal's script. */
.bio-wall { container-type: inline-size; }
.bio-wall p { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 7.4cqw; line-height: 1.42; letter-spacing: -0.005em; color: var(--ink-primary); opacity: 0.86; }