/* ==========================================================================
   BIOS — homepage only (loaded by templates/index.html, never by other pages)
   The painting, the scroll-driven BIOS → BIO + OS transition, the two paths and the
   split reading layout come from the approved prototype; see static/home/README.md.
   Shared tokens, fonts and components come from static/theme/css.
   ========================================================================== */
body.page-home { display: block; font-size: 1.0625rem; line-height: 1.65; }
body.page-home::before, body.page-home::after { display: none; }   /* the homepage paints its own fresco layers */
.page-home .app-main { display: block; }
/* ---------- The fresco (one sheet for the whole page) ---------- */
.paper {
  position: fixed; inset: 0; z-index: -1;
  height: 100vh; height: 100lvh;
  background: var(--paper) url("../theme/art/paper.webp") center / cover no-repeat;
  pointer-events: none;
}
.paper__tint { position: absolute; inset: 0; }
.paper__tint--warm { background: #f0cf95; mix-blend-mode: multiply; opacity: var(--tint-warm, 0); }
.paper__tint--cool { background: #a7b2c4; mix-blend-mode: color; opacity: var(--tint-cool, 0); }
/* the same sheet again, above the painting and below the content: it washes over the receded world */
.paper--veil { z-index: 1; opacity: 0; display: none; }
.js-split .paper--veil { display: block; }
.js-split.path-bio .paper--veil {
  -webkit-mask-image: linear-gradient(90deg, transparent 47%, #000 58%);
  mask-image: linear-gradient(90deg, transparent 47%, #000 58%);
}
.js-split.path-os .paper--veil {
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 53%);
  mask-image: linear-gradient(90deg, #000 42%, transparent 53%);
}


/* the mini O used as a recurring mark */
.o-mini__fill { fill: var(--o-fill, #a9c1e8); }
.o-mini__ring { fill: none; stroke: var(--o-ring, currentColor); stroke-width: var(--o-stroke, 6); }
.o-mini__axis { stroke: #b07a35; stroke-width: var(--o-stroke, 6); }
.o-mini__dot  { fill: #cf9844; }

/* ==========================================================================
   HERO — the painting, pinned while the scroll drives the master progress
   ========================================================================== */
.hero { position: relative; height: 100vh; height: 100svh; --track: 1.9; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero { height: calc(100svh * (1 + var(--track))); }
}
.js-motion .hero { height: calc(100svh * (1 + var(--track))); }
.js-static .hero { height: 100svh; }
@media (max-aspect-ratio: 11/10) { .hero { --track: 1.45; } }

.hero__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100lvh;
  overflow: hidden;
  container-type: size;
  isolation: isolate;
}
/* with JS the painting stays pinned for the whole page: the hero is its scroll track,
   and the content later opens over the half its receding world leaves behind */
.js-split .hero__stage { position: fixed; top: 0; left: 0; right: 0; z-index: 0; }

/* The art frame is positioned by CSS alone (works without JS):
   landscape ≈ cover (capped), fingertip gap on the vertical centre line. */
.art-frame {
  --fw: min(max(100cqw, 177.68cqh), 1.15 * min(100cqw, 177.68cqh));
  position: absolute;
  width: var(--fw);
  aspect-ratio: 1672 / 941;
  left: calc(50% - var(--fw) * .50359);   /* 842 / 1672 */
  top: calc(50% - var(--fw) * .28140);    /* ½ · 941 / 1672 */
}
@container (max-aspect-ratio: 11/10) {
  /* portrait: an intentional vertical composition — the logo floats in the paper
     above, the plumb line drops through the negative space to the fingertips */
  .art-frame {
    --fw: min(152cqw, 90cqh);
    top: calc(58% - var(--fw) * .26375);  /* fingertips at 58% height */
  }
}
.art-frame.is-inset-x {
  /* ultrawide: the painting's side edges sit inside the viewport — let them dissolve into the paper */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent);
}
.gl-on .art-frame.is-inset-x { -webkit-mask-image: none; mask-image: none; }
.art-cam { position: absolute; inset: 0; transform-origin: 0 0; }
.art-layer { position: absolute; top: 0; height: 100%; }
.art-layer img { width: 100%; height: 100%; }
.art-layer--human { left: 0; width: 50.3589%; }
.art-layer--machine { left: 50.3589%; width: 49.6411%; }
.art-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* apparatus (plumb line, field ring, point of light) */
.thread { fill: none; stroke: url(#thread-grad); stroke-width: 1.9; }
.bead { fill: #5b3a17; }
.tick { fill: none; stroke: #a0661f; stroke-width: 1.3; stroke-opacity: .8; }
.orb { fill: url(#orb-grad); }
.orb-rays { fill: #c68526; }
.diamond { fill: #c08028; }
.field-ring { fill: none; stroke: #a36e2c; stroke-width: 1.3; stroke-opacity: .5; }

/* logo */
.glyph, .o__ring { fill: none; stroke: #16120f; stroke-width: 2.1; stroke-linejoin: miter; stroke-miterlimit: 8; }
.o__hand { fill: none; stroke: #ae7631; stroke-width: 1.8; }
.o__dot { fill: url(#dot-grad); }
.o__fill--gold { opacity: 0; }
.o--bio .o__ring, .o--bio .o__hand, .o--bio .o__dot { opacity: 0; }

/* WebGL takes over the painting once ready (DOM version stays for fallback + a11y label) */
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.gl-on .hero__gl { opacity: 1; }
.gl-on .art-cam { visibility: hidden; }

/* the point of light: a restrained breathing glow, compositor-only */
.hero__glint {
  position: absolute; left: 0; top: 0;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  pointer-events: none; opacity: 0;
}
.hero__glint span {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 222, 160, .7) 0%, rgba(250, 200, 120, .22) 30%, rgba(250, 200, 120, 0) 68%);
  animation: breathe 7.5s ease-in-out infinite;
}
.hero__glint.is-paused span { animation-play-state: paused; }
@keyframes breathe {
  0%, 100% { opacity: .35; transform: scale(.82); }
  50% { opacity: .85; transform: scale(1.06); }
}

/* captions that surface as BIO and OS separate */
.hero__captions { position: absolute; inset: 0; pointer-events: none; }
.caption {
  position: absolute; left: 0; top: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: .55em;
  font: 500 .6rem/1 var(--sans); letter-spacing: .34em; text-transform: uppercase;
  white-space: nowrap; opacity: 0;
  padding-left: .34em;
}
.caption::before { content: ""; width: 1px; height: 1.1rem; margin-bottom: .35rem; background: currentColor; opacity: .45; }
.caption--bio { color: #744524; }
.caption--os { color: #2e4786; font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; font-weight: 400; padding-left: .16em; }
.caption--os::before { width: 5px; height: 5px; border: 1px solid currentColor; background: none; margin: .4rem 0 .45rem; }
.caption--bio::before { border-radius: 1px; }

.hero__copy {
  position: absolute; left: 50%; bottom: 10vh; bottom: 10svh;
  width: min(88vw, 21rem);
  transform: translateX(-50%);
  text-align: center;
}
.hero__tagline {
  margin: 0;
  font: 500 clamp(1.15rem, 1.55vw, 1.4rem)/1.3 var(--serif);
  color: var(--ink-2);
  text-wrap: balance;
}
.hero__tagline em:first-of-type { color: var(--sepia); }
.hero__tagline em:last-of-type { color: var(--indigo); }
.hero__meta {
  margin: .85rem 0 0;
  display: flex; justify-content: center; gap: .6em; flex-wrap: wrap;
  font: 500 .58rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3);
}
.hero__cue {
  position: absolute; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); margin: 0;
  transform: translateX(-50%);
  font: 500 .56rem/1 var(--sans); letter-spacing: .38em; text-transform: uppercase;
  color: var(--ink-3);
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding-left: .38em;
}
.hero__cue::after { content: ""; width: 1px; height: 1.6rem; background: linear-gradient(var(--ink-3), transparent); }
@container (max-aspect-ratio: 11/10) {
  /* sits just beneath the painting */
  .hero__copy { bottom: auto; top: calc(58% + min(152cqw, 90cqh) * .29904 + 1.1rem); }
}
@media (max-width: 48rem) and (orientation: portrait) {
  /* Phones: the two ways in stay in view in the paper above the logo, and the line settles beneath the painting,
     near the foot of the screen, so nothing crowds the logo. The copy spans the screen, but only its words and
     buttons take the pointer, so the painting underneath still answers it. */
  .hero__copy {
    top: calc(var(--header-h, 4.5rem) + max(.75rem, env(safe-area-inset-top)));
    bottom: max(1.4rem, env(safe-area-inset-bottom));
    z-index: 2;
    display: flex; flex-direction: column;
    pointer-events: none;
  }
  .hero__copy > * { pointer-events: auto; }
  .hero__copy > .hero__actions { margin-bottom: auto; }
}
@media (max-width: 48rem) and (orientation: portrait) and (max-height: 700px) { .hero__meta { display: none; } }
@media (max-height: 780px) { .hero__cue span { display: none; } }
@media (max-height: 560px) and (orientation: landscape) {
  .hero__cue { display: none; }
  .hero__copy { bottom: .6rem; width: min(30vw, 15rem); }
  .hero__tagline { font-size: .98rem; line-height: 1.25; }
  .hero__meta { display: none; }
  /* short screens: the links sit on their band from the start, so they never cross the logo */
  html .site-header.site-header--home { background: var(--band, rgba(243, 230, 216, .95)); border-bottom-color: var(--rule); }
}

/* ==========================================================================
   CONTENT — the page keeps the painting's asymmetry.
   After the hero, the surviving world holds its own half of the painting and the
   content opens into the half the receding world leaves behind:

       BIO path    [ HUMAN · painting ] | [ BIO · content ]
       OS path     [ OS · content ] | [ MACHINE · painting ]

   (Without JS there is no path: the content follows the painting at full width.)
   ========================================================================== */
:root { --pad-l: var(--gutter); --pad-r: var(--gutter); --accent-line: color-mix(in oklab, var(--accent) 45%, transparent); }
@supports not (color: color-mix(in oklab, red 50%, blue)) { :root { --accent-line: var(--rule); } }
html { scroll-padding-top: 4.5rem; }

.js-split {
  --col-w: 50%; --col-x: 50%; --col-f: .5;
  --pad-in: clamp(2.5rem, 5.5vw, 6.5rem);   /* the side that faces the painting */
  --pad-out: clamp(1.5rem, 4.5vw, 5rem);    /* the window edge */
  --rail-x: calc(var(--pad-in) * .4);       /* where the vine / the rule runs */
}
.js-split.path-bio { --col-x: 50%; --pad-l: var(--pad-in); --pad-r: var(--pad-out); --emerge: -2.75rem; }
.js-split.path-os  { --col-x: 0%;  --pad-l: var(--pad-out); --pad-r: var(--pad-in); --emerge: 2.75rem; }
.js-split.path-os  { --ink-2: #2f3442; --ink-3: #4f5566; }   /* graphite, not sepia, on the machine's side */

@media (max-aspect-ratio: 11/10) {
  /* portrait: the surviving figure keeps a narrow margin on its own side and watches the content */
  .js-split { --col-w: 76%; --col-f: .76; --pad-in: clamp(1.9rem, 5vw, 3rem); --pad-out: clamp(1.1rem, 4vw, 2.6rem); --rail-x: .7rem; }
  .js-split.path-bio { --col-x: 24%; }
  .js-split.path-bio .paper--veil {
    -webkit-mask-image: linear-gradient(90deg, transparent 17%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 17%, #000 30%);
  }
  .js-split.path-os .paper--veil {
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 83%);
    mask-image: linear-gradient(90deg, #000 70%, transparent 83%);
  }
}

.reading, .site-footer { position: relative; z-index: 2; container: reading / inline-size; }
.js-split .reading, .js-split .site-footer { width: var(--col-w); margin-left: var(--col-x); }

/* the edge of the column that faces the painting carries its world's line:
   a climbing vine beside the human, an engineer's rule (and graph paper) beside the machine */
.js-split .reading::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 55vh);
  mask-image: linear-gradient(transparent, #000 55vh);
}
.js-split.path-bio .reading::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 160'%3E %3Cpath d='M12 0C15 13 15 27 12 40S9 67 12 80S15 107 12 120S9 147 12 160' fill='none' stroke='%239a6a36' stroke-width='.9' stroke-linecap='round'/%3E %3Cpath d='M12 40Q9 32 2 34Q6 41 12 40ZM12 120Q15 112 22 114Q18 121 12 120ZM10 66Q14 59 20 61Q16 67 10 66Z' fill='%2366785f' fill-opacity='.3' stroke='%2366785f' stroke-opacity='.75' stroke-width='.6' stroke-linejoin='round'/%3E %3Cpath d='M14.2 96c3-1 5 1 4 3s-3 1-2-1' fill='none' stroke='%239a6a36' stroke-width='.6' stroke-linecap='round'/%3E %3Ccircle cx='15.2' cy='82.5' r='1.5' fill='%23c9624a' fill-opacity='.85'/%3E %3C/svg%3E") left calc(var(--rail-x) - 12px) top 0 / 24px 160px repeat-y;
  opacity: .8;
}
.js-split.path-os .reading::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 200'%3E %3Cpath d='M12.5 0V200' stroke='%233d5a9c' stroke-width='1'/%3E %3Cpath d='M9 10.5H12.5M9 20.5H12.5M9 30.5H12.5M9 40.5H12.5M9 60.5H12.5M9 70.5H12.5M9 80.5H12.5M9 90.5H12.5M9 110.5H12.5M9 120.5H12.5M9 130.5H12.5M9 140.5H12.5M9 160.5H12.5M9 170.5H12.5M9 180.5H12.5M9 190.5H12.5' stroke='%233d5a9c' stroke-width='.8' stroke-opacity='.7'/%3E %3Cpath d='M5 .5H12.5M5 50.5H12.5M5 100.5H12.5M5 150.5H12.5' stroke='%233d5a9c' stroke-width='1'/%3E %3Crect x='10' y='122.5' width='5' height='5' fill='%23e6ddd3' stroke='%233d5a9c' stroke-width='1'/%3E %3C/svg%3E") right calc(var(--rail-x) - 3.5px) top 0 / 16px 200px repeat-y,
    radial-gradient(circle, rgba(43, 63, 124, .2) .75px, transparent 1.25px) 0 0 / 22px 22px;
  opacity: .8;
}

/* the first section emerges from the surviving world as the page settles (driven by the same scroll) */
.js-motion.js-split .concept > .section__head {
  opacity: calc(.1 + .9 * var(--read, 1));
  transform: translate3d(calc((1 - var(--read, 1)) * var(--emerge, 0px)), 0, 0);
  will-change: transform, opacity;
}

/* ---------- Sections ---------- */
.section {
  position: relative;
  padding: clamp(5.5rem, 14vh, 10rem) var(--pad-r) clamp(2rem, 4vw, 3rem) var(--pad-l);
}
html:not(.js-split) .section { max-width: 88rem; margin-inline: auto; }
.js-split .section { max-width: 56rem; }
.js-split.path-os .section { margin-left: auto; }   /* very wide screens: stay beside the machine */

.section__head { position: relative; max-width: 50rem; padding-bottom: 2.4rem; }
.section__head::before,
.section__head::after {
  /* one short rule, drawn by hand when the page leans BIO and engineered when it leans OS */
  content: ""; position: absolute; left: 0; bottom: 0; width: 7.5rem; height: 12px;
  background-position: left center; background-size: 100% 100%; background-repeat: no-repeat;
}
.section__head::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M1 6.4C12 4.6 22 8 34 6.2S56 4.4 68 6.6 92 8 104 5.8C110 4.9 115 5.6 119 6' fill='none' stroke='%239a6a36' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='119' cy='6' r='1.7' fill='%23c99343'/%3E%3C/svg%3E");
  opacity: calc(.45 + var(--bio) * .55 - var(--os) * .45);
}
.section__head::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M1 6H116M40 3V9M80 3V9' fill='none' stroke='%233d5a9c' stroke-width='.9'/%3E%3Crect x='115' y='3.5' width='5' height='5' fill='none' stroke='%233d5a9c' stroke-width='.9'/%3E%3C/svg%3E");
  opacity: calc(.3 + var(--os) * .7 - var(--bio) * .3);
}

/* which world you came in through */
.path-note { display: none; }
.js-split .path-note {
  display: block;
  max-width: 27rem; margin: 0 0 2.4rem;
  padding: .15rem 0 .15rem 1rem;
  border-left: 1px solid var(--accent-line);
  font: italic 500 1.02rem/1.5 var(--serif); color: var(--ink-3);
}
.path-bio .path-note__os, .path-os .path-note__bio { display: none; }
.path-note a { color: var(--ink-2); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.path-note a:hover { color: var(--ink); }

.eyebrow {
  display: flex; align-items: center; gap: .75em; margin: 0;
  font: 500 .7rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow span { color: var(--accent); }
.eyebrow__o { width: 1.05rem; height: 1.05rem; color: var(--ink-2); --o-stroke: 7; overflow: visible; }
/* BIO numbers its sections like a herbarium (italic figures, a sprig); OS like a spec (§, mono, a trace) */
.js-split.path-bio .eyebrow span { font: italic 500 1.1rem/1 var(--serif); letter-spacing: .02em; }
.js-split.path-os .eyebrow span { font: 400 .74rem/1 var(--mono); letter-spacing: .04em; }
.js-split.path-os .eyebrow span::before { content: "§\2009"; content: "§\2009" / ""; }
.js-split .eyebrow::after { content: ""; width: 2.6rem; height: .95rem; background: no-repeat center / contain; }
.js-split.path-bio .eyebrow::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E %3Cpath d='M1 8C10 7 20 9 37 6' fill='none' stroke='%239a6a36' stroke-width='.9' stroke-linecap='round'/%3E %3Cpath d='M11 7.6Q14 2 19 3Q16 7 11 7.6ZM20 8.2Q24 13 29 11.5Q25 8 20 8.2ZM27 6.9Q30 1.6 35 2.7Q32 6.3 27 6.9Z' fill='%2366785f' fill-opacity='.55'/%3E %3Ccircle cx='37.5' cy='6' r='1.6' fill='%23c9624a'/%3E %3C/svg%3E"); }
.js-split.path-os .eyebrow::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E %3Cpath d='M2.5 7H18L22 3H33.5' fill='none' stroke='%233d5a9c' stroke-width='.9'/%3E %3Crect x='33.5' y='.5' width='5' height='5' fill='none' stroke='%233d5a9c' stroke-width='.9'/%3E %3Ccircle cx='2.5' cy='7' r='1.5' fill='%233d5a9c'/%3E %3C/svg%3E"); }

h2 {
  margin: .55em 0 .35em;
  font: 300 clamp(2.1rem, 6.2cqi, 4.6rem)/1.04 var(--serif);
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}
h2 em { font-style: italic; color: var(--accent); }
h3 { margin: 0; font-weight: inherit; }
.js-split .section h2 { position: relative; isolation: isolate; }
.js-split .section h2::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
/* BIO: a loose gold watercolour swash under each heading */
.js-split.path-bio .section h2::before {
  left: -.32em; top: .04em; width: 4.4em; height: 1.18em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E %3Cpath d='M9 35C5 23 18 13 37 12C58 10 71 5 96 7C121 9 141 4 164 10C183 15 197 25 193 37C189 48 170 52 146 51C121 50 104 57 78 55C53 53 31 57 17 49C11 45 10 40 9 35Z' fill='%23dcaa55' fill-opacity='.17' stroke='%23b9823a' stroke-opacity='.22' stroke-width='1.1' vector-effect='non-scaling-stroke'/%3E %3Cpath d='M24 36C44 27 70 25 98 27C126 29 150 24 176 30' fill='none' stroke='%23dcaa55' stroke-opacity='.1' stroke-width='9' stroke-linecap='round'/%3E %3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.js-split.path-bio .section:nth-child(even) h2::before { transform: scaleX(-1) rotate(-2deg); }
/* OS: registration corners, as on a drawing sheet */
.js-split.path-os .section h2::before {
  left: -.8rem; top: .1em; width: .55rem; height: .55rem;
  border-left: 1px solid rgba(61, 90, 156, .6); border-top: 1px solid rgba(61, 90, 156, .6);
}

.lede {
  max-width: 36rem; margin: 0;
  font: 500 clamp(1.18rem, 3.2cqi, 1.5rem)/1.45 var(--serif);
  color: var(--ink-2);
  text-wrap: pretty;
}
.lede em { color: var(--accent); }
.lede--small { font-size: clamp(1.1rem, 2.6cqi, 1.25rem); }
p { text-wrap: pretty; }

/* ---------- 01 Concept ---------- */
.concept__title { margin: .6em 0 .5em; }
.wordmark-split { width: min(100%, 36rem); height: auto; overflow: visible; }
.wm-glyph, .wm-o circle { fill: none; stroke: var(--ink); stroke-width: 2.1; }
.wm-plus { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.concept__pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6cqi, 7rem);
  margin-top: clamp(3.5rem, 8cqi, 7rem);
  max-width: 66rem;
}
.concept__side h3 { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.side-label { font: 300 2.3rem/1 var(--sans); letter-spacing: .3em; }
.side-sub { font: italic 500 1.15rem/1.2 var(--serif); color: var(--ink-3); }
.concept__side p { max-width: 27rem; margin: 0; }
.concept__side--bio .side-label { color: var(--sepia); }
.concept__side--os .side-label { color: var(--indigo); }
.concept__side--bio { padding-top: 1.2rem; border-top: 1px solid rgba(138, 84, 36, .35); }
.concept__side--os { padding-top: 1.2rem; border-top: 1px solid rgba(43, 63, 124, .35); }
.js-split .concept__side h3 { flex-direction: column; align-items: flex-start; gap: .7rem; }


/* ---------- 05 Register ---------- */
.cta { padding-bottom: clamp(5rem, 11vw, 9rem); }
.cta h2 { margin-top: .2em; }
.cta__hands {
  --h: clamp(4.8rem, 10vw, 8.5rem);
  position: relative;
  display: flex;
  width: calc(var(--h) * 3.49); max-width: 100%;
  height: var(--h);
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem) -1.2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent), linear-gradient(transparent, #000 22%, #000 64%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 26%, #000 74%, transparent), linear-gradient(transparent, #000 22%, #000 64%, transparent);
  mask-composite: intersect;
}
.js-split .cta__hands { --h: clamp(4.4rem, 15cqi, 8rem); }
.cta__hand { display: block; width: calc(var(--h) * 1.745); height: 100%; background-repeat: no-repeat; }
.cta__hand--bio {
  background-image: url("../theme/art/art-human.webp");
  background-image: image-set(url("../theme/art/art-human.avif") type("image/avif"), url("../theme/art/art-human.webp") type("image/webp"));
  background-size: calc(var(--h) * 7.6545) auto;
  background-position: calc(var(--h) * -5.909) calc(var(--h) * -3.591);
}
.cta__hand--os {
  background-image: url("../theme/art/art-machine.webp");
  background-image: image-set(url("../theme/art/art-machine.avif") type("image/avif"), url("../theme/art/art-machine.webp") type("image/webp"));
  background-size: calc(var(--h) * 7.5455) auto;
  background-position: 0 calc(var(--h) * -3.591);
}
.cta__point { position: absolute; left: 50%; top: 42.5%; width: calc(var(--h) * .55); height: calc(var(--h) * .55); transform: translate(-50%, -50%); overflow: visible; }
.cta__ring { fill: none; stroke: #a36e2c; stroke-width: .8; stroke-opacity: .55; }
.cta__orb { fill: var(--gold-2); }
.cta__text { max-width: 30rem; margin: 0; font: 500 1.25rem/1.5 var(--serif); color: var(--ink-2); }
.cta__actions { display: flex; align-items: center; gap: 1.2rem 2rem; flex-wrap: wrap; margin: 2.4rem 0 0; }
.button {
  display: inline-flex; align-items: center; gap: .8em;
  padding: 1.05rem 1.9rem;
  font: 500 .74rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); text-decoration: none;
  border-radius: 999px;
  transition: background-color .3s ease;
}
.button::before {
  content: ""; width: .7em; height: .7em; border-radius: 50%;
  border: 1px solid currentColor;
  background: linear-gradient(90deg, transparent 50%, var(--accent-soft) 50%);
}
.button:hover { background: #33291f; }
.js-split.path-os .button { border-radius: 2px; font: 400 .74rem/1 var(--mono); letter-spacing: .12em; background: #1d2230; }
.js-split.path-os .button::before { border-radius: 1px; }
.js-split.path-os .button:hover { background: #2b3348; }
.link-quiet { font: italic 500 1.2rem/1 var(--serif); }


/* one colour per world, everywhere: life = sepia, computation = indigo, the intersection = the gold of the plumb line */
em.w-bio, .lede em.w-bio, .w-bio { color: var(--sepia); }
em.w-os, .lede em.w-os, .w-os { color: var(--indigo); }
em.w-mid, .lede em.w-mid, .w-mid { color: var(--gold); }

/* ---------- Responsive: the content answers to the width of its column ---------- */
@container reading (max-width: 36rem) {
  /* stacked: the world you came in through speaks first */
  .concept__pair { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .path-os .concept__side--os { order: -1; }
}
@container reading (max-width: 30rem) {
  .side-label { font-size: 2rem; }
}


/* ---------- to and from the Tracks page ----------
   Cross-document view transitions (browsers that support them; others simply load the page). The two painted
   figures and the two drawings on /tracks share their names, bios-human and bios-machine, so each figure travels
   between its place in the painting and its blueprint there. Leaving, home.js names the figures as the page goes
   and tracks.css, the arriving page, runs the animation. Coming back, the inline script in index.html names them on
   the first frame and the rules below run it: the mirror of the way out, each drawing flying back to its figure and
   developing from line into paint. */
@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-line-out .8s cubic-bezier(.45, 0, .3, 1) both; }
::view-transition-new(bios-human), ::view-transition-new(bios-machine) { animation: bios-paint-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 Tracks page melts into bare paper while the homepage 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-line-out { 0% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes bios-paint-in { 0%, 16% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bios-page-out { to { opacity: 0; } }
@keyframes bios-page-in { from { opacity: 0; } }


/* ---------- Reduced motion: the concept stays, the motion goes ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__glint span { animation: none; opacity: .5; }
  .site-header--home, .site-header--home .brand, .button { transition: none; }
}


/* ---------- Print ---------- */
@media print {
  .paper, .site-header--home, .hero__gl, .hero__glint, .hero__cue { display: none !important; }
  .hero, .js-motion .hero { height: auto; }
  .hero__stage, .js-split .hero__stage { position: relative; height: 60vw; }
  .js-split .reading, .js-split .site-footer { width: auto; margin-left: 0; }
  .js-split .reading::before { display: none; }
  .js-motion.js-split .concept > .section__head { opacity: 1; transform: none; }
}

/* ==========================================================================
   Homepage additions for the live content
   ========================================================================== */

/* ---------- the shared header (partials/site_header.html), laid over the painting ----------
   The same bar as every other page, with its links in the same centred place. Over the painting it is
   clear; once the page settles into reading it takes a band of the same paper, tinted by the current
   atmosphere (--band, set by home.js). */
.site-header.site-header--home {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; border-bottom-color: transparent; box-shadow: none;
  transition: background-color .45s ease, border-color .45s ease;
}
@supports (backdrop-filter: blur(6px)) { .site-header.site-header--home { -webkit-backdrop-filter: none; backdrop-filter: none; } }
html:not(.js-split) .site-header.site-header--home { position: absolute; }
.is-reading .site-header.site-header--home { background: var(--band, rgba(243, 230, 216, .92)); border-bottom-color: var(--rule); }
/* over the painting each link sits on a patch of the paper's own colour, just under the text: invisible on bare
   paper, it quietens any painted line behind a word so the link always reads */
.page-home { --hero-paper: rgb(238 223 209 / .92); }
html:not(.is-reading) .site-header--home .nav-link { position: relative; isolation: isolate; }
html:not(.is-reading) .site-header--home .nav-link::before {
  content: ""; position: absolute; z-index: -1; left: -.5em; right: -.28em; top: 50%; height: 1.8em; margin-top: -.9em;
  border-radius: .9em; background: var(--hero-paper); box-shadow: 0 0 .45em .25em var(--hero-paper); pointer-events: none;
}
/* the big logo is on the painting: the small one waits until the page is being read */
.site-header--home .brand { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.is-reading .site-header--home .brand { opacity: 1; visibility: visible; transition-delay: .2s, 0s; }

/* ---------- hero copy: the two ways in, then the prototype's line at the prototype's size ---------- */
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0 0 1.05rem; }
.hero__actions .btn { min-height: 2.35rem; padding: .42rem 1.05rem; font-size: .7rem; }
/* over the painting, the words sit on a strip of the site's own paper, so no painted line crosses them */
.hero__paper {
  padding: .04em .34em; border-radius: .25em;
  background: var(--hero-paper, rgb(238 223 209 / .92));
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero__meta {
  width: fit-content; margin-inline: auto; padding: .28em .5em .28em .72em; border-radius: .6em;
  background: var(--hero-paper, rgb(238 223 209 / .92)); box-shadow: 0 0 .5em .2em var(--hero-paper, rgb(238 223 209 / .92));
}
@media (max-height: 640px) and (orientation: landscape) { .hero__meta { display: none; } .hero__actions { margin-bottom: .6rem; } }

/* ---------- 01: the pair closes on the equation ---------- */
.concept__close {
  max-width: 40rem; margin: clamp(2.6rem, 6cqi, 4rem) 0 0; padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  font: 500 clamp(1.15rem, 2.6cqi, 1.35rem)/1.5 var(--serif); color: var(--ink-2);
}
.concept__close strong { font: 500 .8em/1 var(--sans); letter-spacing: .2em; color: var(--ink); white-space: nowrap; }

/* ---------- 02: the world you came in through (only one of the two shows once a path is chosen) ---------- */
.path-bio .only-os, .path-os .only-bio { display: none; }
.world__list { list-style: none; margin: clamp(2.2rem, 5cqi, 3.2rem) 0 0; padding: 0; max-width: 46rem; }
.world__list li {
  display: grid; grid-template-columns: minmax(8.5rem, 12rem) minmax(0, 1fr); gap: .4rem 2rem; align-items: baseline;
  margin: 0; padding: 1.35rem 0; border-top: 1px solid var(--rule);
}
.world__list li:last-child { border-bottom: 1px solid var(--rule); }
.world__term { margin: 0; }
.world__list p { margin: 0; max-width: 32rem; color: var(--ink-2); }
.world__close { max-width: 38rem; margin: 1.9rem 0 0; font: 500 clamp(1.12rem, 2.5cqi, 1.3rem)/1.5 var(--serif); color: var(--ink-2); }
.world__close em { color: var(--accent); }
/* BIO: a herbarium label, each entry tied to a sprig */
.world--bio .world__term { display: flex; align-items: baseline; gap: .65rem; font: italic 500 1.5rem/1.15 var(--serif); color: var(--sepia); }
.world--bio .world__term::before {
  content: ""; flex: none; width: 1.5rem; height: .85rem; transform: translateY(.05rem);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M2 14C12 13 22 15 38 10' fill='none' stroke='%239a6a36' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M13 13.4Q16 6 22 7Q19 12.5 13 13.4ZM23 13Q27 19 33 17Q29 12.8 23 13Z' fill='%2366785f' fill-opacity='.6'/%3E%3Ccircle cx='37.5' cy='10' r='2' fill='%23c9624a'/%3E%3C/svg%3E");
}
.world--bio .world__list li { border-color: rgba(138, 84, 36, .22); }
.world--bio .world__close em { color: var(--sepia); }
/* OS: a specification, numbered and ruled */
.world--os .world__list { counter-reset: spec; }
.world--os .world__list li { counter-increment: spec; border-top-style: dashed; border-color: rgba(43, 63, 124, .3); }
.world--os .world__list li:last-child { border-bottom-style: dashed; }
.world--os .world__term { display: flex; align-items: baseline; gap: .7rem; font: 500 .82rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--indigo); }
.world--os .world__term::before { content: "§2." counter(spec); font-weight: 400; letter-spacing: .04em; color: var(--ink-3); }
.world--os .world__close em { color: var(--indigo); font-style: normal; }
@container reading (max-width: 34rem) { .world__list li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 03 join ---------- */
.cta__text { max-width: 36rem; margin-top: .8rem; }
.cta__mentor { margin-top: 1.4rem; color: var(--ink-3); }
.cta__mentor .btn-link { font-weight: 500; }

/* ---------- footer in the column ---------- */
.home-footer { background: transparent; }
.js-split .home-footer .site-footer__inner { padding-left: var(--pad-l); padding-right: var(--pad-r); max-width: none; }
/* in the reading column: the logo, and beside it the small print with the community links beneath */
.home-footer .site-footer__inner { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-6); row-gap: var(--s-3); }
.home-footer .site-footer__logo { grid-row: span 2; }
.home-footer .site-footer__small { margin-top: 0; }
.home-footer__devfolio {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  margin-top: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.home-footer__devfolio-brand {
  display: grid;
  gap: .45rem;
  color: var(--ink-3);
  text-decoration: none;
}
.home-footer__devfolio-brand span {
  font: 500 var(--fs-xs)/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.home-footer__devfolio-brand img {
  display: block;
  width: min(9.5rem, 42vw);
  height: auto;
}
.home-footer__devfolio-brand:hover span { color: var(--ink); text-decoration: underline; }
.home-footer__devfolio .apply-button,
.home-footer__devfolio .devfolio-button-iframe { max-width: 100%; flex: none; }
@container reading (max-width: 30rem) {
  .home-footer .site-footer__inner { grid-template-columns: 1fr; }
  .home-footer .site-footer__logo { grid-row: auto; }
  .home-footer__devfolio { align-items: flex-start; }
}

/* ---------- the mentor dialog uses the shared modal; only its heading scale is tuned here ---------- */
.page-home .modal h3 { font: 300 clamp(1.8rem, 4vw, 2.4rem)/1.1 var(--serif); }
.page-home .modal h4 { margin-bottom: .4rem; font: 500 var(--fs-xs)/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }


/* the hero copy sits in the painting's negative space, at the prototype's width (21rem) */
@container (max-aspect-ratio: 11/10) { .hero__cue { display: none; } }
@media (max-height: 560px) and (orientation: landscape) {
  .hero__copy { width: min(44vw, 19rem); }
  .hero__actions .btn { min-height: 2.25rem; padding: .35rem .8rem; font-size: .66rem; }
}