/* ==========================================================================
   BIOS · the Tracks page (templates/tracks.html, static/theme/js/tracks.js)
   Between the two worlds: the human's blueprint stands on the left in sanguine, the machine's on the right in
   cyanotype; both are derived from the homepage painting. With JavaScript (html.tracks-deck) one screen holds one
   slide at a time: the overview, then each mode (see "one mode per screen" below); without it the modes are one
   scroll. The mode on screen is written to [data-tracks][data-active]:

       seed       the human's drawing deepens, the paper turns warm gold
       core       both drawings even, the paper a blend: gold on the human's side, blue on the machine's
       frontier   the same even blend
       forge      the machine's drawing deepens, the paper turns blue
       all        (before the first mode, and without JavaScript) the even blend
   ========================================================================== */

.tracks {
  --bio: .5; --os: .5;
  --col: 36rem;
  --side: max(0px, calc((100vw - var(--col)) / 2 + 2.5rem));
  --thread-gap: clamp(1.4rem, 3vw, 2.4rem);
  --sanguine: #9e4529; --cyan: #294a8c;
  position: relative;
}
.tracks[data-active="seed"] { --bio: 1; --os: .18; }
.tracks[data-active="forge"] { --bio: .18; --os: 1; }

/* ---------- the stage: fixed behind everything but the paper ---------- */
.tracks__stage { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.tracks__tint { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.tracks__tint--warm {
  background:
    radial-gradient(80% 70% at 16% 46%, rgba(246, 202, 112, .34), rgba(246, 202, 112, 0) 72%),
    linear-gradient(115deg, rgba(246, 210, 132, .4), rgba(246, 218, 164, .28) 55%, rgba(244, 226, 192, .22));
}
.tracks__tint--cool {
  background:
    radial-gradient(80% 70% at 84% 46%, rgba(116, 158, 230, .38), rgba(116, 158, 230, 0) 72%),
    linear-gradient(245deg, rgba(138, 172, 232, .42), rgba(166, 192, 236, .32) 55%, rgba(192, 208, 236, .26));
}
.tracks__tint--blend {
  background: linear-gradient(90deg,
    rgba(247, 206, 118, .42) 0%, rgba(246, 214, 160, .2) 28%, rgba(236, 226, 214, .05) 50%,
    rgba(166, 192, 236, .2) 72%, rgba(128, 166, 230, .4) 100%);
}
.tracks:not([data-active="seed"]):not([data-active="forge"]) .tracks__tint--blend,
.tracks[data-active="seed"] .tracks__tint--warm,
.tracks[data-active="forge"] .tracks__tint--cool { opacity: 1; }

/* each drawing keeps the painting's own proportions (842 × 941 and 830 × 941 art px), full height, its inner edge
   on the column's margin; the window crops the outer side. Whole figures let the homepage's painting land on them. */
.tracks__print {
  position: absolute; top: var(--header-h); height: calc(100% - var(--header-h)); width: auto; max-width: none;
  transition: opacity 1.1s ease;
}
.tracks__print--bio {
  right: calc(100% - var(--side)); opacity: var(--bio); view-transition-name: bios-human;
  -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent);
}
.tracks__print--os {
  left: calc(100% - var(--side)); opacity: var(--os); view-transition-name: bios-machine;
  -webkit-mask-image: linear-gradient(270deg, #000 84%, transparent); mask-image: linear-gradient(270deg, #000 84%, transparent);
}

/* ---------- the column ---------- */
.tracks__column {
  width: min(100% - 2 * var(--gutter), var(--col)); margin-inline: auto;
  padding-block: clamp(2.5rem, 7vh, 4.5rem) clamp(3rem, 10vh, 6rem);
}
.tracks__head { text-align: center; }
.tracks__head .eyebrow { justify-content: center; }
.tracks__head h1 { margin-top: var(--s-4); font: 300 clamp(2.4rem, 4.4vw, 3.5rem)/1.06 var(--serif); letter-spacing: -.005em; color: var(--heading); text-wrap: balance; }
.tracks__head .lede { margin: var(--s-4) auto 0; max-width: 30rem; }
.tracks__spectrum { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-3); }

/* the picker: the four modes, always at hand while scrolling */
.tracks__picker { position: sticky; top: calc(var(--header-h) + .75rem); z-index: 5; display: grid; justify-items: center; gap: .7rem; width: fit-content; max-width: 100%; margin: clamp(2rem, 6vh, 3.25rem) auto 0; }
.tracks__picker ol {
  display: flex; gap: .2rem; margin: 0; padding: .28rem; list-style: none;
  border: 1px solid var(--rule-2); border-radius: 999px;
  background: rgba(248, 241, 233, .8); box-shadow: var(--shadow-1);
}
@supports (backdrop-filter: blur(6px)) { .tracks__picker ol { background: rgba(248, 241, 233, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } }
.tracks__picker li { margin: 0; }
.tracks__pick {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.3rem; padding: .3rem .95rem .3rem .8rem;
  border-radius: 999px; font: 500 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-2); text-decoration: none;
  transition: background-color .35s ease, color .35s ease;
}
.tracks__pick::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--dot); }
.tracks__pick:hover { color: var(--ink); background: rgba(74, 48, 28, .07); }
.tracks__pick[aria-current] { color: #f7efe6; background: var(--ink); }
.tracks__pick[aria-current]::before { box-shadow: 0 0 0 2px rgba(247, 239, 230, .85); }
.tracks__pick--seed { --dot: var(--sanguine); }
.tracks__pick--core, .tracks__pick--frontier { --dot: linear-gradient(90deg, var(--sanguine) 50%, var(--cyan) 50%); }
.tracks__pick--forge { --dot: var(--cyan); }
.tracks__picker-note { color: var(--gold-text); font: 500 .6rem/1 var(--mono); letter-spacing: .17em; text-transform: uppercase; }
@media (max-width: 34rem) { .tracks__picker ol { flex-wrap: wrap; justify-content: center; } }

/* ---------- the four modes, strung on one thread from life to computation ---------- */
.tracks__list { position: relative; margin-top: clamp(1rem, 3vh, 2rem); padding-left: var(--thread-gap); }
.tracks__list::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, var(--sanguine), #c99343 45%, #c99343 55%, var(--cyan));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  opacity: .55;
}
.track {
  position: relative; min-height: min(86vh, 48rem);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(3rem, 9vh, 5.5rem);
  scroll-margin-top: calc(var(--header-h) + 4rem);
}
.track__index { position: relative; margin: 0; font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: .16em; color: var(--ink-3); transition: color .5s ease; }
.track__index::before {
  /* the bead on the thread */
  content: ""; position: absolute; left: calc(-1 * var(--thread-gap) - 5px); top: 50%;
  width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--bead); box-shadow: 0 0 0 3px rgba(251, 246, 238, .75);
  transition: box-shadow .6s ease, transform .6s ease;
}
.track.is-active .track__index { color: var(--gold-text); }
.track.is-active .track__index::before { transform: scale(1.3); box-shadow: 0 0 0 3px rgba(251, 246, 238, .8), 0 0 0 4.5px var(--ring), 0 0 18px 5px var(--glow); }
.track--seed { --bead: var(--sanguine); --ring: rgba(158, 69, 41, .45); --glow: rgba(240, 186, 110, .6); --title: #7f361f; }
.track--core, .track--frontier { --bead: linear-gradient(90deg, var(--sanguine) 50%, var(--cyan) 50%); --ring: rgba(150, 110, 80, .4); --glow: rgba(220, 196, 150, .55); }
.track--forge { --bead: var(--cyan); --ring: rgba(41, 74, 140, .45); --glow: rgba(140, 172, 232, .6); --title: var(--indigo); }

.track__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: var(--s-4); }
.track__title { margin-top: var(--s-4); font: 300 clamp(3rem, 6.2vw, 4.75rem)/.95 var(--serif); letter-spacing: .08em; color: var(--title, var(--heading)); }
.track__tagline { margin-top: .8rem; max-width: 30rem; font: italic 500 clamp(1.2rem, 1.8vw, 1.45rem)/1.4 var(--serif); color: var(--ink-2); }
.track__paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: var(--s-5); }
.track__path { border-top: 1px solid var(--rule-2); padding-top: .8rem; }
.track__path-label { color: var(--gold-text); font: 600 .68rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.track__path p { margin: .5rem 0 0; color: var(--ink-2); font: 400 .94rem/1.5 var(--sans); }
/* the mode's facts: team size and when it closes, in the same small capitals, each after a small gold bead */
.track__facts { display: grid; gap: .6rem; margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.track__facts li {
  display: flex; align-items: center; gap: .75rem; margin: 0;
  font: 500 .7rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3);
}
.track__facts li::before { content: ""; flex: none; width: .38rem; height: .38rem; border-radius: 1px; background: var(--gold-2); transform: rotate(45deg); }
.track__facts time { color: var(--ink); white-space: nowrap; }
.track__facts .track__dates { white-space: normal; }
.track__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-6); }
.track__note { flex: 1 1 100%; max-width: 32rem; margin: 0; font: 500 1.12rem/1.45 var(--serif); color: var(--ink-3); }
.track__note strong { color: var(--ink-2); font-weight: 600; }
.track__note--yours { color: var(--ink-2); }
.track__foot > .btn + .track__note { order: 1; }  /* a note under a button reads after the statements link beside it */
.track__statements {
  font: 500 .7rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--gold-text); text-underline-offset: .35em;
}
.track__statements:hover { color: var(--ink); }

/* ---------- smaller screens: the two drawings stand behind the column, fainter ---------- */
@media (max-width: 63.99rem) {
  .tracks { --side: 54vw; }
  .tracks__print { top: auto; bottom: 0; height: min(78vh, 46rem); }
  .tracks__print--bio { opacity: calc(var(--bio) * .34); }
  .tracks__print--os { opacity: calc(var(--os) * .34); }
  .track { min-height: min(78vh, 42rem); }
}
@media (max-width: 30rem) {
  .tracks__pick { gap: .4rem; padding-inline: .55rem .65rem; letter-spacing: .14em; }
  .tracks__head h1 { font-size: 2.3rem; }
}
@media (max-width: 38rem) { .track__paths { grid-template-columns: 1fr; gap: .7rem; } }

/* ---------- one mode per screen ----------
   html.tracks-deck is set by tracks.html before the first frame; tracks.js adds .deck-live once it drives the slides.
   The deck fills the window under the header: the picker on top, one slide in the middle, the steps below. Every
   slide sits in the same place and only the one on screen (and, while it lifts away, the one leaving) is visible;
   a mode taller than the window scrolls inside itself. Past the last mode the page scrolls on to the footer. */
.tracks-deck .tracks { height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 30rem; }
.tracks-deck .tracks__column {
  display: grid; grid-template-areas: "picker" "slides" "nav"; grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%; padding-block: clamp(.9rem, 2.6vh, 1.75rem) clamp(.8rem, 2.4vh, 1.5rem);
}
.tracks-deck .tracks__picker { grid-area: picker; position: relative; top: auto; margin: 0 auto; }
.tracks-deck .tracks__head { grid-area: slides; align-self: center; padding-block: 1rem; transform: translateY(-clamp(4rem, 13vh, 8rem)); }
.tracks-deck .tracks__list { grid-area: slides; position: relative; min-height: 0; margin: 0; padding: 0; pointer-events: none; }
.tracks-deck .tracks__list::before { transition: opacity .8s ease; }
.tracks-deck .tracks[data-active="all"] .tracks__list::before { opacity: 0; }
.tracks-deck .track {
  /* the box reaches past the thread (--bead-room) so the bead and its glow aren't cut by the slide's own scroll */
  --bead-room: 1.75rem;
  position: absolute; inset: 0 0 0 calc(-1 * var(--bead-room)); min-height: 0;
  display: flex; flex-direction: column; justify-content: safe center;
  padding: clamp(1rem, 3vh, 2rem) .25rem clamp(1rem, 3vh, 2rem) calc(var(--thread-gap) + var(--bead-room));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  pointer-events: auto;
}
.tracks-deck [data-slide] { visibility: hidden; }
.tracks-deck [data-slide]:focus { outline: none; }
/* before tracks.js runs: the overview, or the mode the address names */
.tracks-deck .tracks:not(.deck-live) .tracks__head,
.tracks-deck .tracks:not(.deck-live) .track:target { visibility: visible; }
.tracks-deck .tracks:not(.deck-live):has(.track:target) .tracks__head { visibility: hidden; }
/* once it does: the slide on screen, and the one leaving while it lifts away */
.tracks-deck .tracks.deck-live [data-slide].is-current,
.tracks-deck .tracks.deck-live [data-slide].is-leaving { visibility: visible; }

/* the steps: previous and next, named, with the place in the four between them */
.tracks__nav { grid-area: nav; display: flex; align-items: center; justify-content: center; gap: clamp(.35rem, 1.5vw, .8rem); }
.tracks-deck .tracks__nav[hidden] { display: flex; visibility: hidden; }   /* its room is kept until tracks.js fills it */
.tracks__step {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: .3rem 1rem;
  border: 1px solid var(--rule-2); border-radius: 999px; background: rgba(248, 241, 233, .72);
  font: 500 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2);
  cursor: pointer; transition: background-color .3s ease, color .3s ease, opacity .35s ease, visibility .35s;
}
@supports (backdrop-filter: blur(6px)) { .tracks__step { background: rgba(248, 241, 233, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } }
.tracks__step:hover { color: var(--ink); background: rgba(236, 222, 206, .85); }
.tracks__step.is-off { visibility: hidden; opacity: 0; }
.tracks__step-arrow { width: .9rem; height: .9rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tracks__count { min-width: 6.5rem; margin: 0; text-align: center; font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 30rem) {
  .tracks__step { padding-inline: .75rem; letter-spacing: .14em; }
  .tracks__count { min-width: 4.5rem; }
}
@media (max-height: 34rem) {
  .tracks-deck .track__title { font-size: clamp(2.4rem, 9vh, 3.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  .tracks__tint, .tracks__print, .tracks__pick, .track__index, .track__index::before, .tracks__step,
  .tracks-deck .tracks__list::before { transition: none; }
}

/* ---------- arriving from the homepage ----------
   A cross-document view transition (browsers that support one; others simply load the page). The homepage
   names its two painted figures bios-human and bios-machine as it leaves (static/home/home.js, pageswap), and
   the drawings above carry the same names: each figure travels from where it stood in the painting to its
   place here, and dissolves from paint into line on the way. Going back, the same names carry the drawings
   into the painting again; that animation is the homepage's to run (static/home/home.css). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-group(bios-human), ::view-transition-group(bios-machine) {
  animation-duration: .8s; animation-timing-function: cubic-bezier(.22, .74, .16, 1);
}
::view-transition-old(bios-human), ::view-transition-old(bios-machine) { animation: bios-paint-out .8s cubic-bezier(.45, 0, .3, 1) both; }
::view-transition-new(bios-human), ::view-transition-new(bios-machine) { animation: bios-line-in .8s cubic-bezier(.3, 0, .2, 1) both; }
/* the header stays where it is on both pages and crossfades on its own, above the travelling figures */
.site-header { view-transition-name: bios-header; }
::view-transition-group(bios-header) { animation-duration: .45s; }
/* the rest of the page: the homepage melts into bare paper while this page settles in over it */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: bios-page-out .28s cubic-bezier(.2, 0, .6, 1) both; }
::view-transition-new(root) { animation: bios-page-in .5s cubic-bezier(0, 0, .2, 1) .14s both; }
@keyframes bios-paint-out { 0% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes bios-line-in { 0%, 16% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bios-page-out { to { opacity: 0; } }
@keyframes bios-page-in { from { opacity: 0; } }
@media print {
  .tracks__stage, .tracks__picker, .tracks__nav { display: none; }
  .track { min-height: 0; break-inside: avoid; }
  .tracks-deck .tracks, .tracks-deck .tracks__column { height: auto; display: block; }
  .tracks-deck [data-slide] { position: static; visibility: visible; overflow: visible; }
}