/* truemanity studio — the home's main section (v-home-main, proposed 2026-11-11)
   DECISION.md says why it is built this way. In short:
   · the LIGHT is a photograph: one plate of the lit wall, multiplied over the whole section, so it cannot stop at a
     card's edge;
   · the OBJECTS are live HTML: thin boards held off the wall. Each has a height over the wall (--h). Its shadow stays
     on the wall, thrown right and a little down from the one window; its face moves against the wall with the
     viewpoint (--mx, --my from the pointer, --sy from scroll). The depth is in the shadow's throw, not in the
     board's thickness (the director, 2026-11-11: "not blocks").
   One unit, --u: a design pixel of the composition (390 wide when narrow, 1440 × 900 when wide). Everything is
   measured in it, so the scene keeps its proportions at any size.
   Outside the design system, by the director's leave (2026-11-11): the light crosses the film picture, --hm-blood,
   the thrown shadows, the small statement. Listed in REPORT.md. */

.hm {
  /* THE PHOTOGRAPH'S TONES (the director, 2026-11-11: "too crisp and too contrasty, it does not read as real").
     Measured on the desktop reference: no white and no black anywhere; warm paper on a cooler wall; ink that is a
     dark warm grey; a red that is pigment, not light. These replace the system's screen values in this section. */
  --hm-blood: #5E0A0D;                              /* the tabs: a deep blood red */
  --hm-wall: #E4E7ED;                               /* the wall in full daylight; the plate brings the shadow */
  --hm-paper: #E9E5DF;                              /* rag paper, warm */
  --hm-sheet: #E6E2DC;
  --hm-ink: #252321;
  --hm-ink-2: #4A4743;
  --hm-red: #A21A20;
  --hm-mark: rgba(34, 33, 35, 0.5);
  --hm-ease: var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  --hm-sans: var(--font-sans, "Inter", system-ui, sans-serif);
  --hm-label: var(--font-label, "Instrument Sans", "Inter", system-ui, sans-serif);
  --hm-mono: var(--font-mono, "JetBrains Mono", ui-monospace, Menlo, monospace);

  position: relative;
  isolation: isolate;                               /* the plate multiplies over this section and nothing else */
  container-type: inline-size;
  overflow: hidden;
  min-height: var(--hm-vh, 100svh);
  background-color: var(--hm-wall);
  color: var(--hm-ink);
  font-family: var(--hm-sans);
  -webkit-font-smoothing: antialiased;
}
.hm *, .hm *::before, .hm *::after { box-sizing: border-box; }

/* ——— THE CAMERA ———
   What a lens and a sensor do to a wall of paper, laid over the whole section, the light included:
   a lens is never as sharp as a screen (half a pixel of softness), its contrast is lower and its blacks are lifted,
   and the sensor leaves grain on everything, the film picture and the type too. */
.hm::before {
  content: ""; position: absolute; inset: 0; z-index: 42; pointer-events: none;
  background: rgba(168, 163, 156, 0.035);
  -webkit-backdrop-filter: blur(0.35px) contrast(0.95) saturate(0.92);
  backdrop-filter: blur(0.35px) contrast(0.95) saturate(0.92);
}
.hm::after {
  content: ""; position: absolute; inset: 0; z-index: 43; pointer-events: none;
  background: url("render/grain-film.png") 0 0 / 170px;
  mix-blend-mode: overlay; opacity: 0.17;
}

/* ——— THE LIGHT: one photographed plate over everything ——— */
.hm__light {
  position: absolute; inset: 0; z-index: 40;
  pointer-events: none;
  background: url("render/light-portrait.jpg") 50% 100% / 100% 108% no-repeat;
  mix-blend-mode: multiply;
}
.hm__veil { position: absolute; inset: 0; z-index: 41; pointer-events: none; background: var(--hm-paper); opacity: 0; }

/* ——— THE COMPOSITION, narrow: a column, the mobile reference's ——— */
.hm__in {
  --u: min(calc(100cqw / 390), 1.6px);
  --bleed: calc((100cqw - 390 * var(--u)) / 2);     /* the wall at the stage's sides, when the screen is wider than it */
  --mx: 0; --my: 0; --sy: 0;                        /* the viewpoint: pointer −1…1, scroll in px */
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: calc(390 * var(--u)); margin: 0 auto;
  padding-bottom: calc(44 * var(--u));
}

/* the wall's own plaster, photographed (its light divided out, so the plate above is the only light) */
.hm__in::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 0 calc(var(--bleed, 0px) * -1);
  background: var(--hm-wall) url("render/wall-plaster-portrait.jpg") 50% 50% / 100% 100% no-repeat;
  background-blend-mode: multiply;
}

.hm__top {
  order: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: calc(4 * var(--u)) calc(16 * var(--u));
  min-height: calc(56 * var(--u)); padding: calc(12 * var(--u)) calc(24 * var(--u));
}
.hm__brand { display: flex; align-items: center; gap: calc(10 * var(--u)); color: inherit; text-decoration: none; white-space: nowrap; }
.hm__brand i { width: calc(6 * var(--u)); height: calc(16 * var(--u)); background: var(--hm-red); flex: none; }
.hm__nav { display: flex; gap: calc(16 * var(--u)); list-style: none; margin: 0; padding: 0; }
.hm__nav a { display: block; padding: calc(6 * var(--u)) 0; color: inherit; text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; }
.hm__nav a:hover { border-bottom-color: var(--hm-red); }

.hm-label { font-family: var(--hm-label); font-weight: 600; font-size: max(10px, calc(10 * var(--u))); letter-spacing: 0.10em; line-height: 1.2; text-transform: uppercase; margin: 0; }
.hm-mono { font-family: var(--hm-mono); font-weight: 400; font-size: max(9.5px, calc(10 * var(--u))); letter-spacing: 0.04em; line-height: 1.35; margin: 0; }
.hm-slot { color: var(--hm-ink-2); }               /* a [COPY] slot: the director's words go here */
.hm-crop { display: none; }

/* ——— THE INK ———
   Every word and line is printed, not drawn by the screen (the director, 2026-11-11: "the same realism as the paper").
   The filter (#hm-ink, put in the page by home-main.js) does what a press does to type on rag paper: the edge follows
   the fibre, the ink spreads a little, and its density varies so the paper shows through. The numbers are those the
   biography's composite was finished with (84 % density, about half a pixel softer). The text stays text: it can be
   selected, read aloud and rewritten. Without the script the type is simply clean. */
.hm.has-ink :is(.hm__top, .hm-say__h, .hm-say__p, .hm-say__acts, .hm-dim, .hm-face, .hm-card__foot, .hm-head__who, .hm-bio > span:first-child, .hm-bio__pic span) { filter: url(#hm-ink); }

/* ——— AN OBJECT ON THE WALL ———
   --h   its face's height over the wall: the shadow's throw and the parallax both come from it
   --t   the board's own thickness: a paper edge, no more */
.hm-obj {
  --h: calc(20 * var(--u));
  --t: calc(1.6 * var(--u));
  --kx: 0.22; --ky: 0.10;                           /* how far the pointer moves the face against the wall */
  --tr: calc(var(--t) * (1 + 0.5 * var(--mx)));     /* the right and bottom edges the viewpoint shows */
  --tb: calc(var(--t) * (0.65 + 0.35 * var(--my)));
  --side-r: #BEB9B1;
  --side-b: #A8A39B;
  position: relative; display: block;
  color: inherit; text-decoration: none;
}
/* the shadow: it stays on the wall. Two parts thrown right and a little down, as the window throws them:
   the umbra, nearer and denser, and the penumbra, further out; both soft, so neither reads as a side of the board. (The contact shadow is the slab's.) */
.hm-obj__cast { position: absolute; inset: 0; pointer-events: none; }
.hm-obj__cast::before, .hm-obj__cast::after { content: ""; position: absolute; }
.hm-obj__cast::before {
  inset: 0;
  transform: translate(calc(var(--h) * 0.84), calc(var(--h) * 0.36));
  background: rgba(24, 26, 34, 0.31);
  filter: blur(calc(var(--h) * 0.09));
}
.hm-obj__cast::after {
  inset: 0;
  transform: translate(calc(var(--h) * 1.3), calc(var(--h) * 0.6));
  background: rgba(34, 38, 50, 0.12);
  filter: blur(calc(var(--h) * 0.36));
}
/* the face: it moves against the wall as the viewpoint moves */
.hm-slab {
  position: relative; display: block;
  transform: translate3d(calc(var(--h) * var(--kx) * var(--mx) * -1), calc(var(--h) * (var(--ky) * var(--my) + var(--sy) * 0.0005) * -1), 0);
  background-color: var(--hm-paper);
  background-image: url("render/paper-rag.jpg"), linear-gradient(128deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 58%, rgba(40, 34, 24, 0.05) 100%);   /* the paper itself, photographed */
  background-size: 320px, auto;
  background-position: var(--paper-at, 0 0), 0 0;
  background-blend-mode: multiply, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 247, 0.5),                                                    /* the top edge catches the window */
    calc(1 * var(--u)) calc(2 * var(--u)) calc(2.4 * var(--u)) calc(-0.6 * var(--u)) rgba(14, 16, 22, 0.36);   /* contact: tight and dark, below and right only */
}
/* the paper's edge: right and bottom, each a sheared strip */
.hm-slab::before, .hm-slab::after { content: ""; position: absolute; transform-origin: 0 0; pointer-events: none; }
.hm-slab::before { left: 100%; top: 0; width: var(--tr); height: 100%; background: var(--side-r); transform: skewY(33deg); }
.hm-slab::after  { left: 0; top: 100%; width: 100%; height: var(--tb); background: var(--side-b); transform: skewX(57deg); }
@supports (transform: skewY(atan2(1px, 2px))) {
  .hm-slab::before { transform: skewY(atan2(var(--tb), var(--tr))); }
  .hm-slab::after  { transform: skewX(atan2(var(--tr), var(--tb))); }
}

/* ——— THE WORDS ——— small, as in the references. Narrow: they stand on the wall itself, centred between the
   picture and the cards. */
.hm-obj--sheet, .hm-obj--sheet > .hm-slab, .hm-say { display: contents; }
.hm-obj--sheet > .hm-obj__cast { display: none; }
.hm-say__h {
  order: 2; align-self: center; max-width: calc(264 * var(--u)); margin: calc(44 * var(--u)) 0 0; text-align: center;
  font-family: var(--hm-sans); font-weight: 500; font-size: calc(16 * var(--u)); letter-spacing: -0.012em; line-height: 1.3;
  text-wrap: balance;
}
.hm-say__p {
  order: 3; align-self: center; max-width: calc(276 * var(--u)); margin: calc(10 * var(--u)) 0 0; text-align: center;
  font-size: calc(12 * var(--u)); letter-spacing: 0; line-height: 1.5; color: var(--hm-ink-2);
  text-wrap: pretty;
}
.hm-say__acts { order: 6; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 calc(24 * var(--u)); margin: calc(30 * var(--u)) calc(24 * var(--u)) 0; }
.hm-act {
  display: inline-flex; align-items: center; gap: calc(10 * var(--u)); min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--hm-ink); text-decoration: none;
}
.hm-act::before { content: ""; width: 24px; height: 1px; background: currentColor; transition: width 160ms var(--hm-ease), background 160ms var(--hm-ease); }
.hm-act:hover::before, .hm-act:focus-visible::before { width: 40px; background: var(--hm-red); }
.hm-act--red::before { background: var(--hm-red); }
.hm-act--play::before, .hm-act--play:hover::before, .hm-act--play:focus-visible::before { width: 8px; height: 10px; clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* ——— THE FILM PICTURE: a mounted print, the studio's own frame ——— */
.hm-obj--film {
  --h: calc(20 * var(--u)); --side-r: #B5B0A9; --side-b: #9F9A93;
  order: 1; margin: calc(4 * var(--u)) calc(24 * var(--u)) 0;
}
.hm-obj--film .hm-slab { background: #1A1917; box-shadow: calc(1 * var(--u)) calc(2 * var(--u)) calc(2.4 * var(--u)) calc(-0.6 * var(--u)) rgba(14, 16, 22, 0.36); }
.hm-film { display: block; aspect-ratio: 2.39 / 1; overflow: hidden; }
.hm-film img { display: block; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.08) saturate(1.06); }   /* the print keeps its own range under the camera's finish */
.hm-film picture { display: contents; }
.hm-dim { display: none; }

/* ——— THE TWO CARDS ——— narrow: two boards, the second smaller and set off to the right (the mobile reference) */
.hm-band { display: contents; }
.hm-band > .hm-obj__cast { display: none; }
.hm-card { --pad: calc(12 * var(--u)); --tab-w: calc(22 * var(--u)); --tab-h: calc(42 * var(--u)); --tab-out: calc(5 * var(--u)); }
.hm-card .hm-slab { padding: var(--pad) calc(var(--pad) + var(--tab-w) - var(--tab-out) + 6 * var(--u)) var(--pad) var(--pad); translate: 0 0; }
.hm-card--system { --paper-at: -90px -330px; --h: calc(27 * var(--u)); order: 4; z-index: 2; margin: calc(44 * var(--u)) calc(46 * var(--u)) 0 calc(24 * var(--u)); }
.hm-card--bio    { --h: calc(13 * var(--u)); order: 5; z-index: 1; margin: calc(12 * var(--u)) calc(46 * var(--u)) 0 auto; width: calc(232 * var(--u)); }
.hm-card:focus-visible { outline: 1px solid var(--hm-red); outline-offset: calc(10 * var(--u)); }

/* the tab: blood red, flush with the card's top, at its right edge */
.hm-tab {
  position: absolute; top: 0; right: calc(var(--tab-out) * -1); width: var(--tab-w); height: var(--tab-h);
  display: grid; place-items: center;
  background: url("render/paper-rag.jpg") -40px -60px / 420px, linear-gradient(170deg, #6E1216 0%, var(--hm-blood) 50%, #50090C 100%);
  background-blend-mode: multiply, normal;                       /* a dyed paper tab, not a coloured rectangle */
  color: #E6DCD4;
}
.hm-tab svg { width: calc(9 * var(--u)); height: calc(22 * var(--u)); overflow: visible; }

.hm-card__foot { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }
.hm-card__name { display: flex; align-items: center; gap: calc(8 * var(--u)); white-space: nowrap; }
.hm-card__name i { width: calc(4 * var(--u)); height: calc(12 * var(--u)); background: var(--hm-red); flex: none; }
.hm-card__foot .hm-slot { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* card 1's face: THE REPLACEABLE LAYER, 5 : 2. Whatever stands here (the zigzag now, the fly-through later) fills
   this box and nothing else of the card changes. */
.hm-face { position: relative; display: block; aspect-ratio: 5 / 2; }
.hm-face > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0.5px 0.9px 0.5px rgba(50, 14, 14, 0.30)); }
.hm-zig { fill: none; stroke: #8F171C; stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hm-pt { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.hm-pt::before { content: ""; position: absolute; left: calc(-2.25 * var(--u)); top: calc(-2.25 * var(--u)); width: calc(4.5 * var(--u)); height: calc(4.5 * var(--u)); border-radius: 50%; background: var(--hm-red); }
.hm-pt b { position: absolute; left: 0; bottom: calc(6 * var(--u)); transform: translateX(-50%); font-family: var(--hm-mono); font-weight: 400; font-size: max(8px, calc(8.5 * var(--u))); line-height: 1; color: var(--hm-ink); }
.hm-pt--low b { bottom: auto; top: calc(7 * var(--u)); }
.hm-face__caps { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: calc(14 * var(--u)); white-space: nowrap; overflow: hidden; }

/* card 2: the dotted timeline beside the portrait */
.hm-bio { display: grid; grid-template-columns: minmax(0, 1fr) calc(76 * var(--u)); gap: calc(10 * var(--u)); align-items: start; }
.hm-bio__line { position: relative; display: block; height: calc(60 * var(--u)); margin-top: calc(12 * var(--u)); }
.hm-bio__line::before {                              /* the axis, with its end ticks */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(5 * var(--u));
  background:
    linear-gradient(var(--hm-mark), var(--hm-mark)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--hm-mark), var(--hm-mark)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--hm-mark), var(--hm-mark)) 100% 0 / 1px 100% no-repeat;
}
.hm-bio__line::after {                               /* the dotted line that runs into the portrait */
  content: ""; position: absolute; left: 0; right: calc(-10 * var(--u)); top: calc(42 * var(--u)); height: calc(3 * var(--u));
  background: radial-gradient(circle, var(--hm-ink) 0 calc(0.8 * var(--u)), transparent calc(1 * var(--u))) 0 50% / calc(7 * var(--u)) calc(3 * var(--u)) repeat-x;
}
.hm-yr { position: absolute; left: var(--x); top: calc(43.5 * var(--u)); width: 0; height: 0; z-index: 1; }
.hm-yr::before { content: ""; position: absolute; left: calc(-2.25 * var(--u)); top: calc(-2.25 * var(--u)); width: calc(4.5 * var(--u)); height: calc(4.5 * var(--u)); border-radius: 50%; background: var(--hm-red); }
.hm-yr b { position: absolute; left: 0; bottom: calc(8 * var(--u)); transform: translateX(-50%); font-family: var(--hm-mono); font-weight: 400; font-size: max(8px, calc(8.5 * var(--u))); line-height: 1; color: var(--hm-ink); }
.hm-yr:first-of-type b { transform: none; }
.hm-yr:last-of-type b { transform: translateX(-100%); }
.hm-yr--quiet b { display: none; }
.hm-bio__say { display: block; margin-top: calc(8 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-bio__pic { display: block; margin: 0; }
.hm-bio__pic img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(0.92) brightness(0.97); }
.hm-bio__pic span { display: block; margin-top: calc(5 * var(--u)); color: var(--hm-ink-2); }

/* ——— THE COMPOSITION, wide: the desktop reference's, 1440 × 900 ———
   the text sheet flush to the left edge · the wide film picture from the sheet's edge to the right · the two cards
   joined in one band, tight under the picture and across the sheet's edge, its foot on the sheet's foot */
@container (min-width: 900px) {
  .hm__light { background-image: url("render/light-landscape.jpg"); background-size: 100% 100%; }
  .hm__in::before { background-image: url("render/wall-plaster-landscape.jpg"); }
  .hm__in {
    --u: min(calc(100cqw / 1440), calc(var(--hm-vh, 100svh) / 900));
    --bleed: calc((100cqw - 1440 * var(--u)) / 2);  /* the wall left of the stage, when the screen is wider than it */
    display: block; width: calc(1440 * var(--u)); height: calc(900 * var(--u)); padding: 0;
  }
  .hm__top { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: calc(56 * var(--u)); min-height: 0; padding: 0 calc(64 * var(--u)); flex-wrap: nowrap; }
  .hm__nav { gap: calc(32 * var(--u)); }
  .hm-label { font-size: max(10px, calc(11 * var(--u))); }
  .hm-mono { font-size: max(9.5px, calc(10.5 * var(--u))); }
  .hm-obj { position: absolute; margin: 0; }

  /* the words: a thin sheet, flush to the screen's left edge, the lowest thing on the wall */
  .hm-obj--sheet { display: block; --h: calc(7 * var(--u)); --t: calc(1 * var(--u)); z-index: 1; left: calc(var(--bleed) * -1); top: calc(116 * var(--u)); width: calc(480 * var(--u) + var(--bleed)); height: calc(592 * var(--u)); }
  .hm-obj--sheet > .hm-obj__cast { display: block; }
  .hm-obj--sheet > .hm-slab { display: block; height: 100%; background-color: var(--hm-paper); padding: calc(92 * var(--u)) 0 0 calc(176 * var(--u) + var(--bleed)); }
  .hm-say { display: block; width: calc(256 * var(--u)); }
  .hm-say__h { max-width: none; margin: 0; text-align: left; font-size: max(13px, calc(17 * var(--u))); font-weight: 600; line-height: 1.32; }
  .hm-say__p { max-width: none; margin: calc(12 * var(--u)) 0 0; text-align: left; font-size: max(11.5px, calc(12.5 * var(--u))); line-height: 1.55; }
  .hm-say__acts { justify-content: flex-start; flex-direction: column; margin: calc(14 * var(--u)) 0 0; gap: 0; }
  .hm-act { min-height: calc(34 * var(--u)); }

  .hm-obj--film { --h: calc(22 * var(--u)); z-index: 2; left: calc(480 * var(--u)); top: calc(116 * var(--u)); width: calc(860 * var(--u)); }
  .hm-dim {
    position: absolute; left: 27%; bottom: calc(100% + 13 * var(--u)); width: 46%;
    display: flex; align-items: center; gap: calc(10 * var(--u)); white-space: nowrap;
    font-family: var(--hm-mono); font-size: max(9px, calc(10 * var(--u))); letter-spacing: 0.06em; line-height: 1; color: var(--hm-ink-2);
  }
  .hm-dim::before, .hm-dim::after { content: ""; flex: 1; height: 7px; }
  .hm-dim::before { background: linear-gradient(var(--hm-mark), var(--hm-mark)) 0 3px / 100% 1px no-repeat, linear-gradient(var(--hm-red), var(--hm-red)) 0 0 / 1px 7px no-repeat; }
  .hm-dim::after  { background: linear-gradient(var(--hm-mark), var(--hm-mark)) 0 3px / 100% 1px no-repeat, linear-gradient(var(--hm-red), var(--hm-red)) 100% 0 / 1px 7px no-repeat; }

  /* the band: the two cards joined, one board with a seam, one shadow */
  .hm-band {
    --h: calc(30 * var(--u));
    display: flex; position: absolute; z-index: 3;
    left: calc(316 * var(--u)); top: calc(476 * var(--u)); width: calc(864 * var(--u)); height: calc(232 * var(--u));
  }
  .hm-band > .hm-obj__cast { display: block; }
  .hm-band > .hm-obj__cast::before {
    inset: 0;
    transform: translate(calc(var(--h) * 0.84), calc(var(--h) * 0.36));
    background: rgba(24, 26, 34, 0.31);
    filter: blur(calc(var(--h) * 0.09));
  }
  .hm-band > .hm-obj__cast::after {
    inset: 0;
    transform: translate(calc(var(--h) * 1.3), calc(var(--h) * 0.6));
    background: rgba(34, 38, 50, 0.12);
    filter: blur(calc(var(--h) * 0.36));
  }
  .hm-card { --h: calc(30 * var(--u)); --pad: calc(20 * var(--u)); --tab-w: calc(34 * var(--u)); --tab-h: calc(64 * var(--u)); position: relative; flex: 1 1 0; min-width: 0; margin: 0; width: auto; }
  .hm-card > .hm-obj__cast { display: none; }
  .hm-card .hm-slab { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: calc(24 * var(--u)) calc(var(--pad) + var(--tab-w) - var(--tab-out) + 12 * var(--u)) calc(18 * var(--u)) var(--pad); }
  .hm-card--system { --tab-out: 0px; z-index: 1; }
  .hm-card--bio { --tab-out: calc(8 * var(--u)); z-index: 2; }
  /* the seam: where the second card meets the first. A drafting leader, dotted, and the first card's edge beside it */
  .hm-card--bio .hm-slab { --paper-at: -210px -130px; }
  .hm-card--bio::before {
    content: ""; position: absolute; z-index: 3; left: -0.5px; top: calc(-10 * var(--u)); bottom: calc(-10 * var(--u)); width: 1px; pointer-events: none;
    background: linear-gradient(var(--hm-mark) 0 50%, transparent 50% 100%) 0 0 / 1px calc(4 * var(--u)) repeat-y;
    transform: translate3d(calc(var(--h) * var(--kx) * var(--mx) * -1), calc(var(--h) * (var(--ky) * var(--my) + var(--sy) * 0.0005) * -1), 0);
  }
  .hm-tab svg { width: calc(10 * var(--u)); height: calc(30 * var(--u)); }
  .hm-card__foot { margin-top: 0; }
  .hm-pt b, .hm-yr b { font-size: max(8px, calc(9.5 * var(--u))); }
  .hm-bio { grid-template-columns: minmax(0, 1fr) calc(112 * var(--u)); gap: calc(18 * var(--u)); }
  .hm-bio__line { height: calc(78 * var(--u)); margin-top: calc(14 * var(--u)); }
  .hm-bio__line::after { top: calc(54 * var(--u)); right: calc(-18 * var(--u)); }
  .hm-yr { top: calc(55.5 * var(--u)); }

  /* registration crosses on the wall, at the picture's and the band's corners (the system's own drafting marks) */
  .hm-crop {
    display: block; position: absolute; z-index: 1; width: calc(34 * var(--u)); height: calc(34 * var(--u)); margin: calc(-17 * var(--u)) 0 0 calc(-17 * var(--u)); pointer-events: none;
    background: linear-gradient(var(--hm-mark), var(--hm-mark)) 50% 0 / 1px 100% no-repeat, linear-gradient(var(--hm-mark), var(--hm-mark)) 0 50% / 100% 1px no-repeat;
  }
  .hm-crop--1 { left: calc(468 * var(--u));  top: calc(100 * var(--u)); }   /* the picture, top left */
  .hm-crop--2 { left: calc(1354 * var(--u)); top: calc(100 * var(--u)); }   /* the picture, top right */
  .hm-crop--3 { left: calc(302 * var(--u));  top: calc(476 * var(--u)); }   /* the band, top left, on the sheet */
  .hm-crop--4 { left: calc(302 * var(--u));  top: calc(724 * var(--u)); }   /* the band, bottom left */
  .hm-crop--5 { left: calc(748 * var(--u));  top: calc(730 * var(--u)); }   /* the seam */
  .hm-crop--6 { left: calc(1196 * var(--u)); top: calc(724 * var(--u)); }   /* the band, bottom right */
}

/* ——— ON THE SITE ———
   .hm--on-wall: the section stands on the page's own wall. Its plaster, its light and its camera layers fade out
   over the last fifth of the screen, so the photographed room gives way to the page's wall with no line between.
   The film: "Watch the film" (home-main.js) plays the final cut in the picture's place, with the system's player
   bar. The bar is a strip above the picture when wide, where the dimension line was, and under it when narrow. */
.hm--on-wall {
  background-color: transparent;
  /* on a page of the kit the section is printed on the kit's stock (paper B since 2026-11-11), not its own */
  --hm-paper: var(--paper-card, #E9E5DF);
  --hm-sheet: var(--paper-board, #E6E2DC);
  --hm-ink: var(--ink-primary, #252321);
  --hm-ink-2: var(--ink-secondary, #4A4743);
  --hm-red: var(--datum-red, #A21A20);
  --hm-wall: var(--wall-ambient, #E4E7ED);
}
/* the kit lays no camera over a page (the director, 2026-11-11: nothing over small pictures), so the section keeps
   its own lens and grain, inside its own box */
.hm--on-wall .hm__in::before, .hm--on-wall > .hm__light, .hm--on-wall::before, .hm--on-wall::after {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 10vh), transparent 100%);
  mask-image: linear-gradient(#000 calc(100% - 10vh), transparent 100%);
}
/* The next section shows (the director, 2026-11-11: "raise the next section, so the viewer sees there is more to
   scroll"). On the site the section does not take the whole screen: it ends just under the cards, at 750 of the
   stage's 900, and the room that follows starts at once, so the first screen shows the next section's head.
   Narrow, the column is drawn a little tighter for the same reason. */
.hm--on-wall { min-height: 0; }
.hm--on-wall + .room { padding-top: 0; }
.hm--on-wall .hm__in { padding-bottom: calc(6 * var(--u)); }
.hm--on-wall .hm-say__h { margin-top: calc(30 * var(--u)); }
.hm--on-wall .hm-card--system { margin-top: calc(28 * var(--u)); }
.hm--on-wall .hm-say__acts { margin-top: calc(16 * var(--u)); }
.hm-film.film-aperture { outline: 0; background: none; }
.hm-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hm:not(.is-film) .hm-film video { pointer-events: none; }
@container (min-width: 900px) {
  .hm--on-wall .hm__in { height: calc(750 * var(--u)); padding-bottom: 0; }
  .hm--on-wall .hm-say__h, .hm--on-wall .hm-card--system { margin-top: 0; }
  .hm--on-wall .hm-say__acts { margin-top: calc(14 * var(--u)); }
  .hm-obj--film .pvp__bar { position: absolute; left: 0; right: 0; bottom: 100%; }
  .hm.is-film .hm-dim { display: none; }
}

/* ——— CARD 2 IS THE HEAD OF THE BIOGRAPHY'S SHEET ——— (the director, 2026-11-11: "take the fragment that is on the
   paper"). The card is that fragment, measure for measure: the piece of the photographed sheet from 656,706, 703
   wide (data-scene-piece), drawn live. Everything on it is placed in hundredths of the card's own width (cqw), from
   the sheet's own numbers, so that when the camera is in the card and the photograph takes its place, nothing moves:
   the thread at 110.8 of 703, the name at 191.1 / 36.1 in 36.05 type, the portrait at 421.8 / 36.1, 252.3 × 336.5
   (measured on the biography's own sheet by tools/bio-measure.mjs; measure again if the sheet changes).
   "Who I am" stands in the name's place and becomes the name as the camera goes in. */
.hm-card--bio .hm-slab { padding: 0; aspect-ratio: 1.6 / 1; }
.hm-head { position: absolute; inset: 0; display: block; overflow: hidden; container-type: inline-size; }
.hm-head__thread { position: absolute; left: 15.76cqw; top: 0; bottom: 0; width: max(1px, 0.256cqw); background: var(--hm-red); opacity: 0.85; }
.hm-head__name { position: absolute; left: 27.18cqw; top: 5.135cqw; display: block; white-space: nowrap; font-family: var(--hm-sans); font-weight: 500; font-size: 5.128cqw; letter-spacing: -0.02em; line-height: 1.2; color: var(--hm-ink); opacity: 0; }
/* "Who I am": the card's name, written as the first card's is (the director, 2026-11-12: "in the same style as the
   system"): the red mark and the label, at the foot, on the name's own left edge so it clears the thread */
/* it stands beside .hm-head, not in it: .hm-head is a container of its own, and the section's unit is not to be
   reckoned from the card's width */
.hm-head__who { position: absolute; z-index: 1; left: 27.18%; bottom: var(--pad); }
@container (min-width: 900px) { .hm-head__who { bottom: calc(18 * var(--u)); } }
.hm-head__pic { position: absolute; left: 60cqw; top: 5.135cqw; width: 35.89cqw; height: 47.87cqw; display: block; }
.hm-head__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
@container (min-width: 900px) {
  .hm-card--bio .hm-slab { aspect-ratio: auto; padding: 0; }
}

/* ——— THE SCENE A CARD OPENS INTO ——— (home-main.js; the biography's photograph)
   Laid over the whole screen for the length of the move: the wall, and the scene's layers in their column, each
   carried by one transform. It is the next page's first frame by the end, so the page that loads changes nothing. */
.hm-scene { position: fixed; inset: 0; z-index: 2147483600; pointer-events: none; opacity: 0; }
.hm-scene__wall, .hm-scene__stage { position: absolute; inset: 0; }
.hm-scene__wall { background-color: var(--wall-ambient, #E3E6ED); }
.hm-scene__bar { position: absolute; inset: 0; opacity: 0; }
.hm-scene__stage > * { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; will-change: transform; backface-visibility: hidden; }
/* the words on the scene's wall, set as the Who I am page sets them (system/bio-stages.css, .bio-wall p: 7.4 % of a
   box 500 frame pixels wide, the reveal's own ink colour), and printed with the same ink (#hm-ink-wall) */
.hm-scene__text p { margin: 0; font-family: var(--hm-sans); font-weight: 400; font-size: 37px; line-height: 1.42; letter-spacing: -0.005em; color: #161717; opacity: 0.86; filter: url(#hm-ink-wall); }
.hm.is-scene { pointer-events: none; overflow: visible; z-index: 10; }   /* the falling camera carries the section over what follows it */
/* into the card, and out into the scene: as the camera goes in, "Who I am" becomes the name */
.hm-card.is-opening .hm-head__who { opacity: 0; transition: opacity 380ms linear; }
.hm-card.is-opening .hm-head__name { opacity: 1; transition: opacity 380ms linear 100ms; }

/* ——— MOTION: only where the visitor allows it ——— */

/* The room is one layer of its own from the start (the director, 2026-11-12: dark blocks while a card opens and after
   coming back). When the layer was made only as a press began, the browser had to draw the whole room again, with its
   inks and papers, in the middle of the move, and what was not drawn yet showed as dark blocks: the shadows and the
   film's black board without their faces. Held from the start, a press only moves what is already drawn. */
.hm__in { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .hm-card .hm-slab { transition: translate 420ms var(--hm-ease); }
  .hm-tab svg { transition: transform 420ms var(--hm-ease); }
  /* a card under the hand comes a little nearer, toward the window */
  .hm-card:hover .hm-slab, .hm-card:focus-visible .hm-slab { translate: calc(-1.5 * var(--u)) calc(-1 * var(--u)); }
  .hm-card:hover .hm-tab svg, .hm-card:focus-visible .hm-tab svg { transform: translateY(calc(3 * var(--u))); }

  /* the zigzag draws itself once */
  .hm-zig { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hm-draw 1600ms 300ms var(--hm-ease) forwards; }
  @keyframes hm-draw { to { stroke-dashoffset: 0; } }

  /* the push-in: the camera goes into the pressed card, the room's light gives way to the card's own paper */
  .hm.is-pushing { pointer-events: none; }
  .hm.is-pushing .hm__in { transition: transform 880ms cubic-bezier(0.62, 0, 0.18, 1); }
  .hm.is-pushing .hm__light { opacity: 0; transition: opacity 620ms 160ms linear; }
  .hm.is-pushing .hm__veil { opacity: 1; transition: opacity 260ms 640ms linear; }
}