/* truemanity studio — the biography sheet (builds/bio, test 1, "the paper reveal"; proposed, registered by the main
   session). One P1 board, mobile-first and vertical: the director's biography as a timeline, 2006 → 2026.

     .bio                the sheet. Everything on it is measured in --p, one 390th of the sheet's own width (one pixel of
                         a phone), so the sheet is the same picture at any width: 741 px wide in the photograph, the
                         screen's width after the reveal. The system's phone type scale is tied to --p here, so the
                         system's own type classes (.t-title, .t-body, .t-label, .t-mono) are used as they are.
     .bio__rest          the at-rest area, exactly 741 : 2115. It is what the photograph shows, so nothing in it is
                         placed by flow: every mark has its number (--y, in --p from the chart's top; the table below).
                         Pressing an entry goes to its record below and marks it there; nothing in the area moves.
     .bio__more          the sheet goes on below the at-rest area: the introduction, the record lane by lane, the
                         context engineering, what it adds up to, the skills.
     html[data-still]    the still: the at-rest area alone, 741 px wide, nothing moving (pages/sheet.html?still).

   The sheet carries no light of its own (REVEAL-PRINCIPLE, "One light"): the paper's grain, and no shaft, falloff or
   cast shadow — at the hand-over the photograph's light is the only one.

   The chart's scale. A year in which something starts is a full row; the years between are ticks, 16 apart. Row tops,
   in --p from the chart's top:
     2006 0 · 2007 44 · 2008 60 · 2009 76 · 2010 92 · 2011 136 · 2012 180 · 2013 196 · 2014 212 · 2015 228 · 2016 244 ·
     2017 260 · 2018 276 · 2019 374 · 2020 472 · 2021 488 · 2022 504 · 2023 520 · 2024 580 · 2025 678 · 2026 694 ·
     the present 792
   A year's tick, and the first line of an entry that starts in it, sit 8.5 below the row's top. An entry is 30.5 tall
   (47.5 with a title of two lines); two entries in one row stand 10 apart. A lane's line runs from its first entry's
   node to the tick of the year after its last, or to the present. */

.bio { container-type: inline-size; width: 100%; font-family: var(--font-sans); }
/* the grain tile by its own path: a url() inside a variable is resolved from the sheet that uses it, not paper.css */
.bio.paper-board-light { background-image: url("textures/grain-paper-k035.png"); background-size: var(--grain-size); background-blend-mode: overlay; background-attachment: scroll; box-shadow: none; }
.bio > * {
  --p: calc(100cqw / 390);
  --type-title-size: calc(var(--p) * 20); --type-body-size: calc(var(--p) * 13.5); --type-card-body-size: calc(var(--p) * 12.5);
  --type-label-size: calc(var(--p) * 10); --type-mono-size: calc(var(--p) * 10);
  --hair: max(1px, var(--p));
}
.bio a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

/* ——— the at-rest area ——— */
.bio__rest { position: relative; aspect-ratio: 741 / 2115; overflow: hidden; }
.bio__rest > * { position: absolute; margin: 0; }

/* the thread: the red line of the timeline, from the sheet's top edge to the present */
.bio__thread { left: calc(var(--p) * 61.5); top: 0; width: var(--hair); height: calc(var(--p) * 1076); background: var(--timeline-red); }

/* the flush head, on the text column: the paper names itself at its own top edge */
.bio__head { left: calc(var(--p) * 106); right: calc(var(--p) * 16); top: 0; height: calc(var(--p) * 44); display: flex; align-items: center; gap: calc(var(--p) * 8); }
.bio__head .flush-head__mark { width: calc(var(--p) * 6); height: calc(var(--p) * 16); }

.bio__who { left: calc(var(--p) * 106); top: calc(var(--p) * 60); width: calc(var(--p) * 116); }
.bio__who .t-body { margin-top: calc(var(--p) * 10); }

/* the director's photograph: a picture in its aperture, its caption beside it on the paper, never over it */
.bio__portrait { left: calc(var(--p) * 234); top: calc(var(--p) * 60); width: calc(var(--p) * 140); }
.bio__aperture { aspect-ratio: 3 / 4; overflow: hidden; outline: var(--hair) solid var(--hairline-light); }
.bio__aperture img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the portrait is in colour, on the photographed sheet and on the live one (the director, 2026-11-11: a white print
   that turned to colour under the pointer was tried first and dropped) */
.bio__portrait figcaption { margin-top: calc(var(--p) * 7); color: var(--ink-secondary); }

/* the chart */
.bio__chart { left: 0; right: 0; top: calc(var(--p) * 284); height: calc(var(--p) * 792); }
.bio__chart > *, .bio__years > li { position: absolute; margin: 0; }
.bio__years { inset: 0; padding: 0; list-style: none; }
.bio__years > li { left: 0; top: calc(var(--p) * (var(--y) + 8.5)); width: calc(var(--p) * 50); transform: translateY(-50%); text-align: right; color: var(--ink-secondary); }
/* a year's mark on the thread: a tick, and a node where something starts */
.bio__years > li::after { content: ""; position: absolute; left: calc(var(--p) * 62); top: 50%; width: calc(var(--p) * 4); height: var(--hair); background: var(--timeline-red); transform: translateY(-50%); }
.bio__years > li.is-start { color: var(--ink-primary); }
.bio__years > li.is-start::after { width: calc(var(--p) * 5); height: calc(var(--p) * 5); background: var(--datum-red); transform: translate(-50%, -50%); }

/* a lane: one line of his life, drawn for as long as something in it runs */
.bio__lane { left: calc(var(--p) * var(--x) - var(--hair) / 2); top: calc(var(--p) * var(--y0)); width: var(--hair); height: calc(var(--p) * (var(--y1) - var(--y0))); background: var(--ink-primary); }

/* an entry: its title and its years, tied to its lane by a leader with a node at the lane's end of it */
.bio__entry { left: calc(var(--p) * 106); top: calc(var(--p) * var(--y)); width: calc(var(--p) * 268); display: block; }
.bio__entry::before { content: ""; position: absolute; left: calc(var(--p) * (var(--x) - 106)); top: calc(var(--p) * 8.5); width: calc(var(--p) * (100 - var(--x))); height: var(--hair); background: var(--mark); transform: translateY(-50%); }
.bio__entry::after { content: ""; position: absolute; left: calc(var(--p) * (var(--x) - 106)); top: calc(var(--p) * 8.5); width: calc(var(--p) * 4); height: calc(var(--p) * 4); background: var(--ink-primary); transform: translate(-50%, -50%); }
.bio__entry-title { display: block; font-size: calc(var(--p) * 13); font-weight: 500; letter-spacing: -0.005em; line-height: calc(var(--p) * 17); }
.bio__entry-meta { display: block; line-height: calc(var(--p) * 13.5); color: var(--ink-secondary); white-space: nowrap; }
.bio__entry > .bio__hit { position: absolute; inset: calc(var(--p) * -6.75) 0; }   /* the press area, 44 on a phone */
@media (hover: hover) { .bio__entry:hover .bio__entry-title { box-shadow: inset 0 calc(var(--hair) * -1) 0 var(--mark); } }
.bio__entry:focus-visible { outline: 1px solid var(--datum-red); outline-offset: calc(var(--p) * 3); }

/* the present: the datum across the sheet, where every line that still runs arrives */
.bio__present { left: calc(var(--p) * 14); right: calc(var(--p) * 16); top: calc(var(--p) * 792); height: calc(var(--p) * 2); background: var(--datum-red); transform: translateY(-50%); }
.bio__present-label { right: calc(var(--p) * 16); top: calc(var(--p) * 801); color: var(--ink-secondary); }

/* ——— below the at-rest area: the sheet goes on ——— */
.bio__more { padding: calc(var(--p) * 56) calc(var(--p) * 16) calc(var(--p) * 72) calc(var(--p) * 106); }
.bio__more > * { margin: 0; }
.bio__more .hr { margin: calc(var(--p) * 56) 0 calc(var(--p) * 40); }
.bio__intro { max-width: 34em; }
.bio__sec-label { color: var(--ink-secondary); margin-bottom: calc(var(--p) * 20); }

/* the lanes' switch: which line of the record is shown */
.bio__lanes { display: flex; flex-wrap: wrap; gap: 0 calc(var(--p) * 14); margin: 0 0 calc(var(--p) * 16) calc(var(--p) * -4); }
.bio__lanes button { appearance: none; min-height: 44px; padding: 0 calc(var(--p) * 4); border: 0; border-radius: 0; background: none; color: var(--ink-secondary); cursor: pointer; text-transform: uppercase; }
.bio__lanes button[aria-pressed="true"] { color: var(--ink-primary); box-shadow: inset 0 -2px 0 var(--datum-red); }
.bio__lanes button:hover { color: var(--ink-primary); }
.bio__lanes button:focus-visible { outline: 1px solid var(--datum-red); outline-offset: 2px; }

.bio__group { margin-top: calc(var(--p) * 40); }
.bio__group:first-of-type, .bio__group[hidden] + .bio__group { margin-top: calc(var(--p) * 8); }
.bio__group > .t-label { margin-bottom: calc(var(--p) * 20); }
.bio__record { position: relative; padding-top: calc(var(--p) * 2); scroll-margin-top: calc(var(--p) * 24); }
.bio__record + .bio__record { margin-top: calc(var(--p) * 26); }
.bio__record-years { color: var(--ink-secondary); }
.bio__record-title { margin-top: calc(var(--p) * 4); font-size: calc(var(--p) * 15); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.bio__record .t-card-body { margin-top: calc(var(--p) * 6); max-width: 36em; }
.bio__record .copy-slot { display: block; margin-top: calc(var(--p) * 6); font-size: var(--type-mono-size); }
/* the record the visitor came to from the chart: the datum mark stands at its edge */
.bio__record::before { content: ""; position: absolute; left: calc(var(--p) * -14); top: calc(var(--p) * 3); width: calc(var(--p) * 4); height: calc(var(--p) * 12); background: var(--datum-red); opacity: 0; transition: opacity var(--dur-enter) var(--ease); }
.bio__record:target::before, .bio__record.is-marked::before { opacity: 1; }

.bio__list { padding: 0; list-style: none; }
.bio__list > li + li { margin-top: calc(var(--p) * 10); }
.bio__list b { font-weight: 500; }
.bio .spec { grid-template-columns: calc(var(--p) * 84) 1fr; gap: calc(var(--p) * 12) calc(var(--p) * 12); font-size: var(--type-mono-size); }
.bio .spec dd { font-family: var(--font-sans); font-size: var(--type-card-body-size); letter-spacing: 0; line-height: var(--type-card-body-leading); }
.bio__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--p) * 8) calc(var(--p) * 16); margin-top: calc(var(--p) * 56); color: var(--ink-secondary); }
.bio__foot a { display: inline-flex; align-items: center; min-height: 44px; margin: -15px 0; border: 0; }
.bio__foot a:hover, .bio__foot a:focus-visible { color: var(--ink-primary); outline: 0; box-shadow: inset 0 -1px 0 var(--datum-red); }

/* ——— the still ——— */
html[data-still], html[data-still] body { margin: 0; width: 741px; background: var(--paper-board); }
html[data-still] .bio { width: 741px; }
html[data-still] .bio__more { display: none; }
html[data-still] *, html[data-still] *::before, html[data-still] *::after { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) { .bio__record::before { transition: none; } }