/* ==========================================================================
   ASTRŒGROUP — V2 · layered site
   One stylesheet for every page. The homepage introduces worlds; deeper pages
   explain them. Every scene should hold as a still frame without JS.
   Gold (--gold) is reserved for function: active, moving, connecting, focus.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../media/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../media/fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../media/fonts/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --green: #171E0B;
  --black: #050505;
  --gold: #BFA35A;
  --off: #F6F4EE;
  --ice: #D6E6F0;

  --off-72: rgba(246, 244, 238, .72);
  --off-50: rgba(246, 244, 238, .5);
  --line: rgba(214, 230, 240, .16);
  --line-strong: rgba(214, 230, 240, .32);

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 64px);
  --max: 1680px;
  --section: clamp(96px, 14vw, 220px);

  /* Motion language: heavy, slow, deliberate. No springs. */
  --ease: cubic-bezier(.19, .7, .12, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --t-slow: 1.4s;
  --t-med: .8s;
  --t-fast: .35s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--off);
  font-family: var(--sans);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.6;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Environmental grain — a static tiled noise, very low contrast */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  background-image: url("../media/grain.png");
  background-size: 160px;
  opacity: .06;
  mix-blend-mode: overlay;
}

img, svg, canvas, object { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

::selection { background: var(--gold); color: var(--black); }

/* Focus is functional → gold */
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  background: var(--off); color: var(--black); padding: 10px 16px;
  font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.skip:focus { top: 16px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------------------------------------------------------- type -- */
.eyebrow {
  font: 400 12px/1.4 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ice);
  opacity: .8;
  margin-bottom: clamp(20px, 2.4vw, 36px);
}
.h-xl, .h-lg {
  font-weight: 300;
  font-stretch: 100%;
  text-transform: uppercase;
  line-height: .94;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.h-xl { font-size: clamp(2.6rem, 7.2vw, 8.5rem); }
.h-lg { font-size: clamp(2.2rem, 5vw, 5.8rem); }
.h-xl .line, .h-lg .line { display: block; }

.prose { max-width: 38ch; color: var(--off-72); }
.prose p + p { margin-top: 1em; }
.prose .lede { color: var(--off); font-size: 1.25em; font-weight: 400; }

.caption {
  display: flex; gap: 20px; flex-wrap: wrap;
  margin-top: 14px;
  font: 400 11px/1.5 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ice); opacity: .65;
}
.caption span:first-child { color: var(--off); }
.fine { font: 400 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--off-50); }

/* ---------------------------------------------------------- navigation -- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  transition: transform var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
.nav.is-scrolled { background: linear-gradient(to bottom, rgba(5,5,5,.78), rgba(5,5,5,0)); }
.nav.is-hidden { transform: translateY(-110%); }
.nav__mark {
  position: relative; z-index: 2;
  font-weight: 500; font-stretch: 125%;
  font-size: 14px; letter-spacing: .28em;
  padding: 6px 0;
}
.nav__menu ul { display: flex; gap: clamp(20px, 3vw, 48px); }
.nav__menu a {
  position: relative; display: inline-block; padding: 8px 0;
  font: 400 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--off-72);
  transition: color var(--t-fast) var(--ease);
}
.nav__menu a::after { /* active indicator: gold hairline */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.nav__menu a:hover { color: var(--off); }
.nav__menu a[aria-current="true"] { color: var(--off); }
.nav__menu a[aria-current="true"]::after, .nav__menu a:hover::after { transform: scaleX(1); }
.nav__toggle { display: none; }

@media (max-width: 760px) {
  .nav { padding: 16px var(--gutter); }
  .nav__toggle {
    display: inline-flex; align-items: center; gap: 12px;
    background: none; border: 0; padding: 12px 0 12px 12px; min-height: 44px; cursor: pointer;
    font: 400 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
    position: relative; z-index: 2;
  }
  .nav__toggle-lines { width: 22px; height: 7px; border-block: 1px solid currentColor; transition: all var(--t-fast) var(--ease); }
  .nav__toggle[aria-expanded="true"] .nav__toggle-lines { height: 1px; border-bottom: 0; border-color: var(--gold); }
  .nav__menu {
    position: fixed; inset: 0; z-index: 1;
    background: var(--black);
    display: flex; align-items: flex-end;
    padding: 0 var(--gutter) 15vh;
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }
  .nav.is-open .nav__menu { opacity: 1; visibility: visible; transition-delay: 0s; }
  .nav.is-open { transform: none; }
  .nav__menu ul { flex-direction: column; gap: 6px; }
  .nav__menu a {
    font: 300 clamp(2.4rem, 12vw, 4rem)/1.1 var(--sans); letter-spacing: -.01em;
    padding: 6px 0;
  }
}

/* ============================== ASTRŒDON page · BioVent chapters (kept) */
/* --------------------------------------------------------- nature -- */

 /* headline overlaps the plate on purpose */

/* ------------------------------------------------------- 3 / translate -- */

/* Sticky reveal — only on wide screens with motion enabled */

/* TRACE — gold path drawing. Paths carry pathLength="1".
   Default (no JS / reduced motion): fully drawn. */

/* ----------------------------------------------------------- 4 / build -- */

@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(191,163,90,0); } }

/* ------------------------------------------------------ 7 / expedition -- */
.expedition {
  position: relative;
  min-height: 115svh;
  display: flex; align-items: flex-start;
  overflow: hidden;
  background: var(--black);
}
.expedition__scene { position: absolute; inset: 0; }
.expedition__static, .expedition__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.expedition__static { object-fit: cover; object-position: 50% 100%; transition: opacity 1.4s var(--ease); }
.expedition__canvas { opacity: 0; transition: opacity 1.8s var(--ease); }
.expedition.is-live .expedition__canvas { opacity: 1; }
.expedition.is-live .expedition__static { opacity: 0; }
.expedition__scene::after { /* keep type legible */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--black) 0%, rgba(5,5,5,.2) 30%, rgba(5,5,5,0) 60%, rgba(5,5,5,.6) 100%);
  pointer-events: none;
}
.expedition__text { position: relative; z-index: 1; padding-top: var(--section); text-align: center; }
.expedition__text .h-xl { max-width: 14ch; margin-inline: auto; }
.expedition__sub { margin-top: 28px; color: var(--ice); font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 300; }

/* --------------------------------------------------------- 8 / closing -- */
.closing { position: relative; background: var(--black); padding-top: var(--section); }
.closing__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.closing__monogram { width: 56px; height: 56px; margin-bottom: clamp(40px, 5vw, 72px); }
.closing__mark {
  font-weight: 200; font-stretch: 125%;
  font-size: min(12rem, calc((100vw - 2 * var(--gutter) - 12px) / 9.8));
  line-height: .9; letter-spacing: -.005em;
  white-space: nowrap;
}
.closing__statement {
  margin-top: clamp(24px, 3vw, 40px);
  font: 400 clamp(12px, 1.1vw, 15px)/1.6 var(--mono); letter-spacing: .4em; text-transform: uppercase;
}
.closing__statement span + span { margin-left: 1.4em; }
.closing__worlds { margin-top: 12px; font: 400 12px/1.6 var(--mono); letter-spacing: .3em; color: var(--ice); opacity: .7; }
.closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: clamp(48px, 6vw, 88px); }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border: 1px solid var(--line-strong);
  font: 500 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--off);
  background: transparent;
  overflow: hidden;
  transition: border-color var(--t-med) var(--ease), color var(--t-med) var(--ease), transform .6s var(--ease);
}
.btn::after { /* hover: gold line travels along the base */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease);
}
.btn:hover { border-color: var(--off-50); }
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn--primary { background: var(--off); color: var(--black); border-color: var(--off); }
.btn--primary:hover { background: transparent; color: var(--off); border-color: var(--gold); }

.join { width: 100%; max-width: 520px; margin-top: clamp(48px, 6vw, 80px); text-align: left; scroll-margin-top: 30vh; }
.join__label { display: block; margin-bottom: 12px; font: 400 11px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ice); }
.join__row { display: flex; border-bottom: 1px solid var(--line-strong); transition: border-color var(--t-med) var(--ease); }
.join__row:focus-within { border-color: var(--gold); }
.join__input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0;
  background: none; border: 0; outline: 0;
  font: 300 1.2rem/1 var(--sans); color: var(--off);
}
.join__input::placeholder { color: rgba(246,244,238,.3); }
.join__submit {
  background: none; border: 0; cursor: pointer; padding: 0 0 0 20px; min-height: 52px;
  font: 500 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
}
.join__submit:hover { color: var(--gold); }
.join__submit[disabled] { opacity: .5; cursor: progress; }
.join__status { min-height: 1.6em; margin-top: 12px; font: 400 12px/1.6 var(--mono); letter-spacing: .06em; color: var(--off-72); }
.join__status[data-state="error"] { color: #E7B9A6; }
.join__status[data-state="ok"] { color: var(--gold); }

.footer {
  display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center;
  margin-top: var(--section);
  padding-block: 32px;
  border-top: 1px solid var(--line);
  font: 400 11px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--off-50);
}
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer__nav a { padding: 10px 0; color: var(--off-72); transition: color var(--t-fast) var(--ease); }
.footer__nav a:hover { color: var(--off); }

@media (max-width: 760px) {
  .closing__statement { letter-spacing: .28em; }
  .closing__statement span + span { margin-left: .6em; }
  .btn { width: 100%; }
  .closing__actions { width: 100%; flex-direction: column; }
  .footer { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------- ambient breathing */
.arrival__bloom {
  position: absolute; right: -18vw; bottom: -30vh;
  width: 70vw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214,230,240,.06), rgba(191,163,90,.018) 55%, transparent 72%);
  opacity: .6; pointer-events: none;
}
.motion .arrival__bloom { animation: breathe 7.5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.arrival:focus, .expedition:focus { outline: none; }

/* ------------------------------------------------ system breath (space) */
.breath-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0; background: rgba(5,5,5,.09); }
.breath-layer::before { /* structure briefly visible */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(rgba(214,230,240,.07) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(214,230,240,.07) 1px, transparent 1px) 0 0 / 64px 64px;
}
.breath-layer::after { /* one low gold wave */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45vw;
  background: linear-gradient(90deg, transparent, rgba(191,163,90,.11), transparent);
  transform: translateX(-50vw);
}
.breath-layer.is-on { animation: breath-dim 1.9s ease-in-out; }
.breath-layer.is-on::after { animation: breath-wave 1.9s cubic-bezier(.45,0,.3,1); }
@keyframes breath-dim { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes breath-wave { to { transform: translateX(105vw); } }

/* ------------------------------------------------------ whisper (egg) */
.arrival__whisper {
  position: absolute; left: 50%; transform: translateX(-50%); top: -2.4em; white-space: nowrap;
  font: 400 11px/1 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: var(--ice);
  pointer-events: none;
}
.arrival__whisper span { opacity: 0; }
.arrival__whisper.is-speaking span { animation: whisper 6.2s ease-in-out both; }
.arrival__whisper.is-speaking span:nth-child(2) { animation-delay: .7s; }
.arrival__whisper.is-speaking span:nth-child(3) { animation-delay: 1.4s; }
@keyframes whisper { 0% { opacity: 0; } 22% { opacity: .85; } 70% { opacity: .85; } 100% { opacity: 0; } }

/* --------------------------------------------------- depth: dust layers */

/* fast scroll simplifies annotation; slow scroll lets it return (text is never touched) */
/* (annotation lives in its own composited layer so this is compositor-only) */

/* ------------------------------------------------ hold to reveal (Observe) */

/* -------------------------------------------- translate: nodes + memory */

.memory-trace { opacity: 0; transition: opacity 2.4s var(--ease); }
html[data-mem-hero] .memory-trace { opacity: .3; }

/* ---------------------------------------- closing: the site remembers */
[data-verb] { position: relative; display: inline-block; }
[data-verb]::after {
  content: ""; position: absolute; left: 0; right: .45em; bottom: -9px; height: 1px;
  background: rgba(191,163,90,.8);
  transform: scaleX(0); transform-origin: left;
  transition: transform 2.6s var(--ease) .4s;
}
html[data-mem-observe] [data-verb="observe"]::after,
html[data-mem-adapt] [data-verb="adapt"]::after,
html[data-mem-advance] [data-verb="advance"]::after { transform: scaleX(1); }

/* ==========================================================================
   LAYERED SITE — homepage worlds, deeper pages, one transition language
   ========================================================================== */

/* ------------------------------------------------ engine: Lenis + VT -- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* Cross-document view transitions (progressive: other browsers navigate normally).
   The clicked world's title and scene morph into the page they open. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
body:not([data-page="home"]) .page-title { view-transition-name: world-title; }
body:not([data-page="home"]) .page-hero__scene { view-transition-name: world-scene; }
.nav { view-transition-name: site-nav; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .7s; animation-timing-function: cubic-bezier(.19,.7,.12,1); }
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
::view-transition-group(world-title), ::view-transition-group(world-scene) { animation-duration: .9s; animation-timing-function: cubic-bezier(.19,.7,.12,1); }
@keyframes vt-out { to { opacity: 0; filter: blur(8px); } }
@keyframes vt-in { from { opacity: 0; filter: blur(8px); } }

/* ------------------------------------------ motion gates (see motion.js) */
.motion [data-dissolve], .motion [data-arrive] { opacity: 0; }
.motion [data-trace] path { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------------------------------------------------- glow hierarchy --
   Only identity, active lines, key nodes and selected states receive light.
   Body copy and metadata never glow. The darkness is what makes it valuable. */
.glow-group    { color: #FBF8F1; text-shadow: 0 0 36px rgba(246,244,238,.16), 0 0 110px rgba(191,163,90,.09); }
.glow-astrodon { color: #EEF5F8; text-shadow: 0 0 28px rgba(214,230,240,.3), 0 0 90px rgba(168,190,150,.2); }
.glow-caliber  { color: #F3EDFF; text-shadow: 0 0 18px rgba(119,33,250,.95), 0 0 56px rgba(119,33,250,.7), 0 0 140px rgba(119,33,250,.45); }
.glow-raeno    { color: #F4ECDD; text-shadow: 0 0 30px rgba(191,163,90,.26), 0 0 90px rgba(191,163,90,.14); }
.glow-fifth    { color: rgba(246,244,238,.82); }
.world.is-near .glow-astrodon { text-shadow: 0 0 34px rgba(214,230,240,.42), 0 0 110px rgba(168,190,150,.3); }
.world.is-near .glow-caliber  { text-shadow: 0 0 22px rgba(119,33,250,1), 0 0 70px rgba(119,33,250,.85), 0 0 170px rgba(119,33,250,.55); }
.world.is-near .glow-raeno    { text-shadow: 0 0 34px rgba(191,163,90,.4), 0 0 110px rgba(191,163,90,.22); }
.glow-astrodon, .glow-caliber, .glow-raeno { transition: text-shadow 1s var(--ease); }

.nav__menu a[aria-current="page"] { color: var(--off); }
.nav__menu a[aria-current="page"]::after { transform: scaleX(1); }

/* ------------------------------------------------------- handoff layer */
.handoff { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 40; pointer-events: none; will-change: transform; }

/* ============================================================ HOMEPAGE */

/* ---------------------------------------------------------- 01 arrival */
.arrival {
  position: relative; z-index: 0;
  min-height: 100svh;
  display: grid; place-items: center;
  background: radial-gradient(80% 60% at 50% 46%, rgba(23,30,11,.85) 0%, rgba(5,5,5,0) 70%), var(--black);
}
/* the field runs past the fold and is stretched/dissolved by scroll (FLOW) */
.arrival__field {
  position: absolute; inset: 0 0 -38% 0; transform-origin: 50% 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
.arrival__static, .arrival__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.arrival__static { object-fit: cover; opacity: .85; transition: opacity 1.6s var(--ease); }
.arrival__canvas { opacity: 0; transition: opacity 1.6s var(--ease); }
.arrival.is-live .arrival__canvas { opacity: 1; }
.arrival.is-live .arrival__static { opacity: 0; }
.arrival__bloom { left: 50%; top: 46%; right: auto; bottom: auto; width: 80vw; translate: -50% -50%; }
.arrival__inner { position: relative; z-index: 1; text-align: center; padding-top: 40px; }
.arrival__mark {
  font-weight: 200; font-stretch: 125%;
  font-size: min(11.5rem, calc((100vw - 2 * var(--gutter)) / 9.9));
  line-height: .9; letter-spacing: -.005em; white-space: nowrap;
  user-select: none;
}
.arrival__doctrine {
  margin-top: clamp(22px, 3vw, 44px);
  font-weight: 300; font-stretch: 100%; text-transform: uppercase;
  font-size: clamp(1.05rem, 2.1vw, 2rem); letter-spacing: .34em; line-height: 1.4;
}
.arrival__doctrine span { display: inline-block; margin-inline: .3em; }
@media (max-width: 560px) { .arrival__doctrine { letter-spacing: .2em; font-size: 1rem; } .arrival__doctrine span { margin-inline: .12em; } }
.arrival__line { margin-top: clamp(14px, 1.6vw, 22px); color: var(--off-72); font-size: clamp(.95rem, 1.2vw, 1.1rem); }
.arrival__cue { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; z-index: 2; width: 44px; height: 72px; display: grid; place-items: center; }
.arrival__cue i { display: block; width: 1px; height: 56px; background: var(--line-strong); position: relative; overflow: hidden; }
.arrival__cue i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gold); animation: cue 2.8s var(--ease-io) infinite; }
@keyframes cue { to { top: 100%; } }

/* ------------------------------------------------------- 02 observation */
.observation {
  position: relative; z-index: 1;
  padding: clamp(96px, 16vh, 200px) 0 clamp(96px, 14vw, 200px);
  background: linear-gradient(to bottom, rgba(5,5,5,0) 0, rgba(5,5,5,.7) 16vh, var(--black) 42vh);
}
.observation__title {
  max-width: 13ch;
  font-weight: 300; text-transform: uppercase; line-height: .95; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 6.4vw, 7rem);
}
.sources {
  display: flex; flex-wrap: wrap; gap: .45em .9em;
  margin-top: clamp(48px, 7vw, 110px);
  font-size: clamp(1.7rem, 3.6vw, 3.8rem);
}
.sources li { position: relative; }
.src {
  --wake: 0;
  position: relative; display: block; padding: .1em 0 1.05em; background: none; border: 0; cursor: default; text-align: left;
  color: rgb(246 244 238 / calc(.26 + var(--wake) * .74));
}
.src__word {
  display: block; font-weight: 250; text-transform: uppercase; line-height: 1; letter-spacing: calc(-.01em + var(--wake) * .03em);
  transition: letter-spacing .6s var(--ease), text-shadow .8s var(--ease);
}
.src.is-near .src__word, .src[aria-expanded="true"] .src__word { color: var(--off); text-shadow: 0 0 26px rgba(214,230,240,.35); }
.src__line {
  position: absolute; left: 0; top: calc(100% - 1.15em);
  font: 400 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--ice); opacity: 0; transform: translateY(-4px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.src.is-near .src__line, .src[aria-expanded="true"] .src__line { opacity: .85; transform: none; }
.observation__bridge { margin-top: clamp(48px, 6vw, 88px); max-width: 44ch; color: var(--off-50); font-size: .95rem; }

@media (max-width: 760px) {
  .sources { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gutter); font-size: clamp(1.25rem, 6vw, 1.7rem); }
  .src { width: 100%; padding: 14px 0; border-top: 1px solid var(--line); cursor: pointer; color: var(--off-72); }
  .src__line { position: static; display: grid; white-space: normal; max-height: 0; overflow: hidden; margin-top: 0; transition: max-height .6s var(--ease), opacity .6s var(--ease), margin .6s var(--ease); }
  .src[aria-expanded="true"] .src__line { max-height: 4.2em; margin-top: 8px; }
}

/* ------------------------------------------------------------ 03 worlds */
.worlds { position: relative; background: var(--black); }
.worlds__switch { display: none; }
.world {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter);
  align-items: center;
  padding: clamp(88px, 11vw, 150px) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  overflow: clip;
}
.world__scene { position: relative; z-index: 0; }
.world__cover { position: absolute; inset: 0; z-index: 1; cursor: pointer; }
.world__text { position: relative; z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; }
.world__text a { pointer-events: auto; }
.world::before { /* edge illumination on approach */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--edge, rgba(214,230,240,.5)), transparent);
  opacity: 0; transform: scaleX(.4); transition: opacity 1s var(--ease), transform 1.4s var(--ease);
}
.world.is-near::before { opacity: 1; transform: scaleX(1); }

.world__kind { font: 400 11px/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--off-72); }
.world__title {
  margin-top: 14px;
  font-weight: 250; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(2.8rem, 6.4vw, 7.4rem); line-height: .9; letter-spacing: -.005em;
}
.world__featured { display: flex; align-items: center; gap: 10px; margin-top: 22px; font: 400 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ice); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(191,163,90,.8); }
.world__cta {
  display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(28px, 3vw, 44px); padding: 12px 0;
  font: 500 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--off);
  background: linear-gradient(var(--cta-line, var(--off)), var(--cta-line, var(--off))) 0 100% / 28% 1px no-repeat;
  transition: background-size 1s var(--ease), color .6s var(--ease);
}
.world__cta i { font-style: normal; transition: transform .8s var(--ease); }
.world.is-near .world__cta, .world__cta:focus-visible { background-size: 100% 1px; }
.world.is-near .world__cta i { transform: translateX(8px); }
.world__cta.is-pending { color: var(--off-50); background-size: 28% 1px; cursor: default; }

/* ASTRŒDON — the observatory field fills the world */
.world--astrodon { --edge: rgba(214,230,240,.6); background: radial-gradient(70% 60% at 60% 40%, rgba(23,30,11,.55), transparent 70%), var(--black); }
.world--astrodon .world__scene { position: absolute; inset: 0; }
.world--astrodon .world__text { grid-column: 1 / span 6; align-self: end; }
.constellation canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.world--astrodon .world__scene {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}

/* CALIBER — graphite, luminous violet, the strongest coloured light */
.world--caliber {
  --edge: rgba(150,90,255,.9); --cta-line: #B18CFF;
  background: radial-gradient(55% 70% at 70% 50%, rgba(119,33,250,.16), transparent 70%), #0A0A0E;
}
.world--caliber .world__text { grid-column: 1 / span 4; grid-row: 1; }
.world--caliber .world__scene { grid-column: 5 / -1; grid-row: 1; z-index: 3; cursor: crosshair; }
.world__mark { width: 52px; height: 52px; object-fit: contain; margin-bottom: 22px; }
.world__headline { margin-top: 20px; font-stretch: 62%; text-transform: uppercase; line-height: .9; font-size: clamp(2.2rem, 4.4vw, 4.6rem); }
.world__headline span { display: block; font-weight: 700; }
.world__headline span + span { font-weight: 250; }
.world__small { margin-top: 18px; font: 400 11px/1.4 var(--mono); letter-spacing: .38em; text-transform: uppercase; color: var(--off-72); }
.caliber { height: clamp(360px, 66vh, 640px); }
.caliber__static, .caliber__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.caliber__static { object-fit: cover; transition: opacity .8s var(--ease); }
.caliber.is-live .caliber__static { opacity: 0; }

/* RÆNO — Royal Green, woven, warm material response */
.world--raeno {
  --edge: rgba(191,163,90,.7); --cta-line: #D9C08A;
  background: radial-gradient(90% 90% at 25% 70%, rgba(246,244,238,.04), transparent 60%), linear-gradient(165deg, #1b220f 0%, var(--green) 50%, #0b0e06 100%);
}
.world--raeno::after { /* woven texture: warp + weft */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(246,244,238,.035) 0 1px, transparent 1px 6px), repeating-linear-gradient(0deg, rgba(246,244,238,.024) 0 2px, transparent 2px 9px);
  -webkit-mask-image: radial-gradient(70% 90% at 35% 50%, #000, transparent 85%);
  mask-image: radial-gradient(70% 90% at 35% 50%, #000, transparent 85%);
}
.world--raeno .world__scene { grid-column: 1 / span 8; }
.world--raeno .world__text { grid-column: 9 / -1; }
.world--raeno .figure__labels, .world--raeno .figure__lines { z-index: 3; }

/* Fifth Element — mostly black, an occasional unresolved gold signal */
.world--fifth { --edge: rgba(214,230,240,.35); background: #000; }
.world--fifth .world__scene { grid-column: 2 / span 5; }
.world--fifth .world__text { grid-column: 8 / span 5; }

/* a template for a future world: image + text, no scene code needed */
.world--editorial .world__scene { grid-column: 1 / span 7; }
.world--editorial .world__scene img { width: 100%; }
.world--editorial .world__text { grid-column: 9 / -1; }

/* ---------------------------------------------- RÆNO figure + callouts */
.figure { --stacked: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(170px, .7fr); column-gap: clamp(48px, 6vw, 110px); align-items: center; }
.figure__stage { position: static; }
.figure__img { width: 100%; height: auto; display: block;
  /* the study's own backdrop dissolves into the world: no visible box */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 72%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 8%, #000 72%, transparent 100%);
  mask-composite: intersect;
  transition: transform 1.6s var(--ease), filter 1.2s var(--ease); filter: brightness(.92);
}
.world.is-near .figure__img { transform: scale(1.015); filter: brightness(1); }
.figure__lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.figure__lines path { fill: none; stroke: rgba(246,244,238,.2); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .6s var(--ease); }
.figure__lines circle { fill: rgba(246,244,238,.45); transition: fill .6s var(--ease); }
.figure__lines .ring { fill: none; stroke: #BFA35A; stroke-width: 1; opacity: 0; }
.figure__lines g.is-active path { stroke: #D9C08A; filter: drop-shadow(0 0 4px rgba(191,163,90,.7)); animation: callout-draw 1s var(--ease) both; }
.figure__lines g.is-active circle { fill: #E3CC92; }
.figure__lines g.is-active .ring { fill: none; opacity: .7; animation: ring 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes callout-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.figure__labels { position: relative; display: grid; grid-auto-rows: 1fr; row-gap: clamp(20px, 3vh, 36px); }
.callout {
  display: grid; gap: 8px; width: 100%; padding: 6px 0; text-align: left;
  background: none; border: 0; cursor: pointer; color: var(--off-72);
}
.callout__name { font: 400 11px/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; transition: color .6s var(--ease), text-shadow .8s var(--ease); }
.callout__line { font-size: .92rem; line-height: 1.45; color: var(--off-72); max-width: 26ch; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .8s var(--ease), opacity .8s var(--ease); }
.callout.is-active .callout__name { color: #F1E3C0; text-shadow: 0 0 18px rgba(191,163,90,.55); }
.callout.is-active .callout__line { max-height: 5em; opacity: 1; }
@media (max-width: 900px) {
  .figure { --stacked: 1; grid-template-columns: 1fr; row-gap: 34px; }
  .figure__labels { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; column-gap: var(--gutter); row-gap: 18px; }
  .figure__lines g:not(.is-active) { opacity: 0; }
  .callout { min-height: 48px; }
}

/* --------------------------------------------------- Fifth: black box */
.blackbox { position: relative; aspect-ratio: 1; width: 100%; background: #000; box-shadow: inset 0 0 0 1px rgba(214,230,240,.08); overflow: hidden; outline-offset: 6px; }
.blackbox__static, .blackbox__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.blackbox__static { transition: opacity .8s var(--ease); }
.blackbox.is-live .blackbox__static { opacity: 0; }
.blackbox__word {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px;
  font: 400 12px/1.4 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: rgba(214,230,240,.72);
  pointer-events: none;
}
.blackbox__word.is-in { animation: word-in 1.4s var(--ease) both; }
@keyframes word-in { from { opacity: 0; letter-spacing: .6em; filter: blur(4px); } to { opacity: 1; letter-spacing: .42em; filter: blur(0); } }

/* --------------------------------------------------- mobile: the worlds
   Editorial navigation, not desktop squeezed: one world ≈ one viewport,
   a sticky switcher, native vertical scroll (no swipe prison). */
@media (max-width: 900px) {
  .worlds__switch {
    position: sticky; top: 0; z-index: 30;
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
    padding: 10px var(--gutter);
    background: linear-gradient(rgba(5,5,5,.92) 60%, rgba(5,5,5,0));
    transition: top .6s var(--ease);
  }
  .worlds__switch::-webkit-scrollbar { display: none; }
  .nav:not(.is-hidden) ~ main .worlds__switch { top: 58px; }
  .worlds__switch a {
    flex: none; padding: 12px 9px; min-height: 44px;
    font: 400 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--off-50);
    background: linear-gradient(var(--gold), var(--gold)) 50% 100% / 0 1px no-repeat;
    transition: color .5s var(--ease), background-size .8s var(--ease);
  }
  .worlds__switch a[aria-current] { color: var(--off); background-size: 70% 1px; }
  .world { grid-template-columns: 1fr; row-gap: 28px; align-content: center; min-height: 100svh; padding-block: 88px 64px; }
  .world > .world__scene, .world > .world__text { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .world--astrodon .world__text { align-self: end; }
  .world--caliber .world__scene { order: -1; }
  .caliber { height: 46svh; }
  .world--fifth .world__scene { width: min(100%, 60svh); }
  .world__title { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .world__headline { font-size: clamp(2rem, 10vw, 2.8rem); }
}

/* -------------------------------------------------------- 04 expedition */
.expedition__title {
  max-width: 14ch; margin-inline: auto;
  font-weight: 300; text-transform: uppercase; line-height: .95; letter-spacing: -.02em;
  font-size: clamp(2.4rem, 6.4vw, 7rem);
}

/* ----------------------------------------------------------- 05 closing */
.closing { padding-block: var(--section) 40px; }
.closing__mark { margin-bottom: 0; }
.closing__legal { margin-top: clamp(80px, 10vw, 140px); text-align: center; font: 400 10px/1.6 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--off-50); }
.btn.is-pending { color: var(--off-50); border-color: var(--line); cursor: default; }
.btn.is-pending::after { display: none; }
button.btn { cursor: pointer; }

.drawer {
  margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(520px, 100%);
  padding: clamp(28px, 4vw, 56px);
  background: #080908; color: var(--off);
  border: 0; border-left: 1px solid var(--line);
}
.drawer::backdrop { background: rgba(5,5,5,.6); backdrop-filter: blur(6px); }
.drawer[open] { display: flex; flex-direction: column; justify-content: center; animation: drawer-in .8s var(--ease) both; }
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
.drawer__close { position: absolute; top: 20px; right: 24px; }
.drawer__close button { background: none; border: 0; padding: 12px 0 12px 12px; cursor: pointer; color: var(--off-72); font: 400 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.drawer__close button:hover { color: var(--off); }
.drawer__title { font-weight: 300; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
.drawer .join { margin-top: 36px; }
@media (max-width: 760px) {
  .drawer { margin: auto 0 0; width: 100%; max-width: 100%; height: auto; border-left: 0; border-top: 1px solid var(--line); padding-top: 64px; }
  @keyframes drawer-in { from { transform: translateY(40px); opacity: 0; } }
}

/* ========================================================= DEEPER PAGES */
.page-hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: clip; padding-bottom: clamp(56px, 8vw, 120px); }
.page-hero__text { position: relative; z-index: 2; }
.page-kind { font: 400 11px/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--off-72); }
.page-title {
  margin-top: 16px;
  font-weight: 200; font-stretch: 125%; text-transform: uppercase;
  font-size: min(12rem, calc((100vw - 2 * var(--gutter)) / 7.4)); line-height: .88; letter-spacing: -.005em;
}
.page-line { margin-top: 20px; max-width: 40ch; color: var(--off-72); font-size: clamp(1rem, 1.3vw, 1.2rem); }
.page-tags { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 26px; font: 400 11px/1.6 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ice); }
.page-tags li + li::before { content: "·"; margin: 0 12px; opacity: .5; }

/* ASTRŒDON opening: the observatory, more fully */
.page-hero--astrodon { background: radial-gradient(70% 60% at 60% 30%, rgba(23,30,11,.6), transparent 70%), var(--black); }
.page-hero--astrodon .page-hero__scene { position: absolute; inset: 0; z-index: 0; }

/* sticky program bar: the title stays while the chapters change beneath it */
.program-bar { position: sticky; top: 0; z-index: 30; background: rgba(5,5,5,.88); backdrop-filter: blur(10px); border-block: 1px solid var(--line); transition: top .6s var(--ease); }
.nav:not(.is-hidden) ~ main .program-bar { top: 62px; }
.program-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 56px; }
.program-bar__title { display: flex; align-items: baseline; gap: 14px; font-weight: 300; font-stretch: 125%; text-transform: uppercase; font-size: 1.1rem; letter-spacing: .06em; }

.program-bar__state { display: inline-flex; align-items: center; gap: 8px; font: 400 10px/1 var(--mono); letter-spacing: .18em; color: var(--ice); }
.program-bar__chapters { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.program-bar__chapters::-webkit-scrollbar { display: none; }
.program-bar__chapters a {
  flex: none; padding: 14px 12px; font: 400 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--off-50);
  background: linear-gradient(var(--gold), var(--gold)) 50% 100% / 0 1px no-repeat; transition: color .5s var(--ease), background-size .8s var(--ease);
}
.program-bar__chapters a:hover { color: var(--off); }
.program-bar__chapters a[aria-current] { color: var(--off); background-size: 70% 1px; }
@media (max-width: 760px) {
  .program-bar__inner { flex-direction: column; align-items: stretch; gap: 0; padding-top: 10px; }
  
  .nav:not(.is-hidden) ~ main .program-bar { top: 56px; }
}

.chapter { scroll-margin-top: 110px; }
.chapter__label { font: 400 11px/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ice); margin-bottom: clamp(18px, 2vw, 30px); }

.testing { padding-block: var(--section); border-top: 1px solid var(--line); }
.testing__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; }
.testing__grid > div { grid-column: 1 / span 6; }
.testing__list { grid-column: 8 / span 5; }
.testing__list li { display: flex; justify-content: space-between; padding: 18px 0; border-top: 1px solid var(--line); font-weight: 300; text-transform: uppercase; font-size: clamp(1.1rem, 1.6vw, 1.5rem); }
.testing__list li::after { content: ""; width: 6px; height: 6px; margin-top: .5em; border-radius: 50%; border: 1px solid var(--ice); opacity: .6; }

@media (max-width: 900px) {
  .testing__grid > div, .testing__list { grid-column: 1 / -1; }
}

.next-world { padding-block: clamp(64px, 8vw, 120px); border-top: 1px solid var(--line); }
.next-world a {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  font-weight: 250; font-stretch: 125%; text-transform: uppercase; font-size: clamp(2rem, 5vw, 5rem); line-height: 1;
  background: linear-gradient(var(--off), var(--off)) 0 100% / 0 1px no-repeat; padding-bottom: 12px;
  transition: background-size 1.1s var(--ease);
}
.next-world a span { font: 400 11px/1 var(--mono); letter-spacing: .24em; color: var(--off-50); }
.next-world a i { font-style: normal; transition: transform .8s var(--ease); }
.next-world a:hover { background-size: 100% 1px; }
.next-world a:hover i { transform: translateX(10px); }

/* RÆNO page */
.page-hero--raeno {
  align-items: center; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter);
  padding: 120px max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) 80px;
  background: linear-gradient(165deg, #1b220f 0%, var(--green) 55%, #0b0e06 100%);
}
.page-hero--raeno .page-hero__text { grid-column: 1 / span 4; padding: 0; }
.page-hero--raeno .page-hero__scene { grid-column: 5 / -1; }
.principles { padding-block: var(--section); }
.principles__title { max-width: 12ch; }
.principles__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-top: clamp(48px, 6vw, 96px); }
.principle { border-top: 1px solid var(--line-strong); }
.principle summary { list-style: none; cursor: pointer; padding: 18px 0 14px; font: 400 11px/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--off); }
.principle summary::-webkit-details-marker { display: none; }
.principle p { color: var(--off-72); font-size: .95rem; max-width: 30ch; }
.pairing { padding-block: var(--section); border-top: 1px solid var(--line); text-align: center; }
.pairing__title { font-weight: 200; font-stretch: 125%; font-size: clamp(2.2rem, 6vw, 6rem); line-height: 1; }
.pairing .prose { margin: 28px auto 0; }
@media (max-width: 900px) {
  .page-hero--raeno .page-hero__text, .page-hero--raeno .page-hero__scene { grid-column: 1 / -1; }
  .page-hero--raeno { row-gap: 40px; align-content: start; }
  .principles__list { grid-template-columns: 1fr; gap: 0; }
  .principle summary { display: flex; justify-content: space-between; min-height: 52px; align-items: center; }
  .principle summary::after { content: "+"; color: var(--ice); transition: transform .5s var(--ease); }
  .principle[open] summary::after { transform: rotate(45deg); }
  .principle p { padding-bottom: 18px; }
}

/* Fifth Element page */
.page-hero--fifth { background: #000; align-items: center; justify-items: center; text-align: center; padding-top: 110px; }
.page-hero--fifth .page-hero__scene { width: min(68vh, 88vw); margin-inline: auto; }
.page-hero--fifth .page-hero__text { margin-top: 40px; display: flex; flex-direction: column; align-items: center; }
.page-hero--fifth .page-title { font-size: min(9rem, calc((100vw - 2 * var(--gutter)) / 8.8)); }
.cell { padding-block: var(--section); background: #000; }
.cell__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; }
.cell__grid > div { grid-column: 1 / span 7; }
.cell__grid .prose { margin-top: 26px; }
.cell__list { grid-column: 9 / span 4; }
.cell__list li { padding: 14px 0; border-top: 1px solid rgba(214,230,240,.1); font: 400 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--off-72); }
.cell__question { margin-top: clamp(80px, 10vw, 160px); text-align: center; font-weight: 250; text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2.8rem); color: var(--off-72); }
@media (max-width: 900px) { .cell__grid > div, .cell__list { grid-column: 1 / -1; } }

/* ---------------------------------------------------- title fitting */
.page-title { font-size: min(12rem, calc((100vw - 2 * var(--gutter)) / 8.4)); }
.page-hero--raeno .page-title { font-size: clamp(3rem, 7vw, 8rem); }
.page-hero--fifth .page-title { font-size: min(8rem, calc((100vw - 2 * var(--gutter)) / 12.8)); white-space: nowrap; }
@media (max-width: 760px) {
  .page-hero--fifth .page-title { white-space: normal; font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .next-world a { font-size: clamp(1.6rem, 8vw, 2.4rem); }
}
/* RÆNO: the figure sits above the world's cover link so the callouts are
   reachable; the image itself lets clicks through to the cover (the door) */
.world--raeno .world__scene { z-index: 3; pointer-events: none; }
.world--raeno .figure__labels { pointer-events: auto; }
/* observation: the interpretation sits right under its word */
@media (min-width: 761px) {
  .sources { row-gap: 1.1em; }
  .src { padding: .1em 0 0; }
  .src__line { top: calc(100% + 8px); }
}
/* RÆNO: an elliptical vignette so the study's own backdrop never reads as a box */
.figure__img {
  -webkit-mask-image: radial-gradient(52% 56% at 50% 46%, #000 52%, transparent 100%);
  mask-image: radial-gradient(52% 56% at 50% 46%, #000 52%, transparent 100%);
  -webkit-mask-composite: source-over; mask-composite: add;
}

/* ==========================================================================
   POLISH — the instrument
   ========================================================================== */

:root {
  --mint: 166, 244, 211;               /* the shell's ambient light only */
  --e-settle: cubic-bezier(.16, .84, .22, 1);
  --e-drift: cubic-bezier(.36, .06, .3, .94);
  --codex-inset: 12px;
  --codex-top: calc(env(safe-area-inset-top, 0px) + var(--codex-inset));
}

/* ------------------------------------------------ the codex perimeter --
   Not a box inside the page: the site's own edge is lit. A 1px mint contour
   runs along the full viewport outline, with a soft falloff inward (the
   field), reinforced corners, and nothing between it and the browser edge.
   Dark field first, luminous outline second.
   Built from eight small fixed pieces (four edges, four corners) so the
   compositor never re-blends the whole viewport. Never blocks input. */
:root {
  --codex-inset: 0px;                 /* the site's edge IS the browser edge */
  --cl: calc(env(safe-area-inset-left, 0px) + var(--codex-inset));
  --cr: calc(env(safe-area-inset-right, 0px) + var(--codex-inset));
  --cb: calc(env(safe-area-inset-bottom, 0px) + var(--codex-inset));
  --codex-line: .44;                  /* the contour */
  --codex-field: .085;                /* the inward glow at the contour */
  --codex-depth: 26px;                /* how far the glow reaches in */
  --codex-boost: 0;                   /* lifted a touch inside key worlds (main.js) */
}
.codex { display: contents; }
.codex > i { position: fixed; z-index: 70; pointer-events: none; display: block; }
.codex__l {
  --a: calc(var(--codex-line) + var(--codex-boost) + var(--flow, 0) * .1);
  --g: calc(var(--codex-field) + var(--codex-boost) * .5 + var(--flow, 0) * .04);
  transition: --a 1.4s var(--e-drift);
}
.codex__l--t { top: var(--codex-top); left: var(--cl); right: var(--cr); height: var(--codex-depth);
  background: linear-gradient(to bottom, rgba(var(--mint), var(--a)) 0 1px, rgba(var(--mint), var(--g)) 1px, rgba(var(--mint), 0) 100%); }
.codex__l--b { bottom: var(--cb); left: var(--cl); right: var(--cr); height: var(--codex-depth);
  background: linear-gradient(to top, rgba(var(--mint), var(--a)) 0 1px, rgba(var(--mint), var(--g)) 1px, rgba(var(--mint), 0) 100%); }
.codex__l--l { top: var(--codex-top); bottom: var(--cb); left: var(--cl); width: var(--codex-depth);
  background: linear-gradient(to right, rgba(var(--mint), var(--a)) 0 1px, rgba(var(--mint), var(--g)) 1px, rgba(var(--mint), 0) 100%); }
.codex__l--r { top: var(--codex-top); bottom: var(--cb); right: var(--cr); width: var(--codex-depth);
  background: linear-gradient(to left, rgba(var(--mint), var(--a)) 0 1px, rgba(var(--mint), var(--g)) 1px, rgba(var(--mint), 0) 100%); }
/* corners: crisp brackets, a little brighter than the contour, with a
   reinforced glow where the edges meet */
.codex__c {
  width: 26px; height: 26px;
  border: 0 solid rgba(var(--mint), calc(.82 + var(--codex-boost)));
  filter: drop-shadow(0 0 4px rgba(var(--mint), .45));
}
.codex__c::after {
  content: ""; position: absolute; width: 90px; height: 90px;
  background: radial-gradient(closest-side, rgba(var(--mint), .11), rgba(var(--mint), 0));
}
.codex__c--tl { top: var(--codex-top); left: var(--cl); border-top-width: 2px; border-left-width: 2px; }
.codex__c--tr { top: var(--codex-top); right: var(--cr); border-top-width: 2px; border-right-width: 2px; }
.codex__c--bl { bottom: var(--cb); left: var(--cl); border-bottom-width: 2px; border-left-width: 2px; }
.codex__c--br { bottom: var(--cb); right: var(--cr); border-bottom-width: 2px; border-right-width: 2px; }
.codex__c--tl::after { top: -45px; left: -45px; }
.codex__c--tr::after { top: -45px; right: -45px; }
.codex__c--bl::after { bottom: -45px; left: -45px; }
.codex__c--br::after { bottom: -45px; right: -45px; }
/* it answers, briefly: corners take a breath of light, the contour lifts,
   both return to rest. Never loops. */
.codex.is-pulse .codex__c { animation: codex-corner 1.3s var(--e-settle) both; }
.codex.is-pulse .codex__l { animation: codex-edge 1.3s var(--e-settle) both; }
@keyframes codex-corner {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(var(--mint), .45)); }
  18% { filter: drop-shadow(0 0 calc(5px + var(--pulse, 1) * 8px) rgba(var(--mint), .85)); border-color: rgba(var(--mint), 1); }
}
@keyframes codex-edge {
  0%, 100% { filter: brightness(1); }
  20% { filter: brightness(calc(1 + var(--pulse, 1) * .6)); }
}
@property --a { syntax: "<number>"; inherits: false; initial-value: .44; }
/* the perimeter persists across pages: it does not cross-fade with them */
.codex__l--t { view-transition-name: codex-t; } .codex__l--r { view-transition-name: codex-r; }
.codex__l--b { view-transition-name: codex-b; } .codex__l--l { view-transition-name: codex-l; }
.codex__c--tl { view-transition-name: codex-tl; } .codex__c--tr { view-transition-name: codex-tr; }
.codex__c--bl { view-transition-name: codex-bl; } .codex__c--br { view-transition-name: codex-br; }
::view-transition-group(codex-t), ::view-transition-group(codex-r), ::view-transition-group(codex-b), ::view-transition-group(codex-l),
::view-transition-group(codex-tl), ::view-transition-group(codex-tr), ::view-transition-group(codex-bl), ::view-transition-group(codex-br) { animation: none; }
@media (max-width: 760px) {
  /* phones: follow the safe area, a hair in from rounded screen corners;
     thinner, dimmer, shorter reach */
  :root { --codex-inset: 1px; --codex-line: .36; --codex-field: .07; --codex-depth: 16px; }
  .codex__c { width: 18px; height: 18px; border-width: 0; border-color: rgba(var(--mint), .7); filter: drop-shadow(0 0 3px rgba(var(--mint), .35)); border-radius: 0; }
  .codex__c--tl { border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 10px; }
  .codex__c--tr { border-top-width: 1.5px; border-right-width: 1.5px; border-top-right-radius: 10px; }
  .codex__c--bl { border-bottom-width: 1.5px; border-left-width: 1.5px; border-bottom-left-radius: 10px; }
  .codex__c--br { border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 10px; }
  .codex__c::after { width: 60px; height: 60px; }
}
/* everything that pins to the top sits inside the frame */
.nav { top: var(--codex-top); left: 0; right: 0; }
.program-bar { top: var(--codex-top); }
.nav:not(.is-hidden) ~ main .program-bar { top: calc(var(--codex-top) + 58px); }
@media (max-width: 900px) {
  .worlds__switch { top: var(--codex-top); }
  .nav:not(.is-hidden) ~ main .worlds__switch { top: calc(var(--codex-top) + 52px); }
}
@media (max-width: 760px) { .nav:not(.is-hidden) ~ main .program-bar { top: calc(var(--codex-top) + 52px); } }
.nav.is-hidden { transform: translateY(calc(-110% - var(--codex-top))); }

/* ---------------------------------------------- outlined → solid (rare)
   Two words on the whole site: Observation's "observation." and Geometry's
   "architecture." Outlined while waiting, filled when the moment resolves. */
.stroke-word { transition: color 1.6s var(--e-settle), -webkit-text-stroke-color 1.6s var(--e-settle); }
.motion .stroke-word:not(.is-solid) { color: transparent; -webkit-text-stroke: 1px rgba(246, 244, 238, .72); }
.stroke-word.is-solid { color: var(--off); -webkit-text-stroke: 1px transparent; }

/* ---------------------------------------------- structural hairlines --
   Architecture, not boxes: only technical visualisations are outlined. */
.hairline, .world--caliber .caliber {
  box-shadow: inset 0 0 0 1px rgba(214, 230, 240, .11);
  transition: box-shadow 1.2s var(--e-drift);
}

.world--caliber .caliber { box-shadow: inset 0 0 0 1px rgba(150, 90, 255, .12); }
.world--caliber.is-near .caliber { box-shadow: inset 0 0 0 1px rgba(150, 90, 255, .26); }

/* --------------------------------------------- less noise, more presence */
                /* index numbers carried no meaning */

.testing__list li::after { display: none; }
.testing__list li { border-top-color: rgba(214, 230, 240, .09); }
.cell__list li { font: 300 1.02rem/1.4 var(--sans); letter-spacing: .01em; text-transform: none; color: var(--off-72); border-top-color: rgba(214, 230, 240, .07); }
.page-tags { color: var(--off-50); }
.program-bar { border-block: 0; box-shadow: 0 1px 0 rgba(214, 230, 240, .08); }
.program-bar__title { font-size: 1rem; }

/* model controls: quiet text toggles, a small light when on (no boxes) */

/* closing: one action carries weight; the others are quiet */
.closing__actions { align-items: center; gap: 40px; }
.closing__link {
  padding: 14px 2px; font: 500 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--off-72);
  background: linear-gradient(var(--off), var(--off)) 0 100% / 0 1px no-repeat;
  transition: color .6s var(--e-settle), background-size 1s var(--e-settle);
}
.closing__link:hover, .closing__link:focus-visible { color: var(--off); background-size: 100% 1px; }
.closing__link.is-pending { color: var(--off-50); cursor: default; background-size: 0 1px; }
@media (max-width: 760px) { .closing__actions { flex-direction: row; justify-content: center; gap: 28px; } .closing__actions .btn { width: auto; order: -1; flex-basis: 100%; } }

/* ------------------------------------------------ glow discipline ----
   One response colour per environment. ASTRŒGROUP: bone white. */
.src.is-near .src__word, .src[aria-expanded="true"] .src__word { text-shadow: 0 0 26px rgba(246, 236, 218, .28); }
.src__line { color: rgba(246, 240, 228, .8); }
.glow-astrodon { color: #EFF7F4; text-shadow: 0 0 28px rgba(214, 236, 232, .28), 0 0 90px rgba(var(--mint), .12); }
.world.is-near .glow-astrodon { text-shadow: 0 0 34px rgba(214, 236, 232, .4), 0 0 110px rgba(var(--mint), .18); }
.world--astrodon { --edge: rgba(var(--mint), .45); }
.world__featured { color: var(--off-72); }

/* ------------------------------------------ anticipation on arrival --
   A hairline sweeps across the world's top edge just before its words. */
.world.is-arriving::after { content: none; }
.world.is-arriving::before { animation: edge-sweep 1.6s var(--e-settle) both; }
@keyframes edge-sweep {
  0% { opacity: 0; transform: scaleX(0); }
  30% { opacity: .9; }
  100% { opacity: 0; transform: scaleX(1); }
}
.world.is-near::before { animation: none; }

/* ------------------------------------------ art direction: asymmetry --
   Not every composition is centred or balanced. */
@media (min-width: 901px) {
  .sources { margin-left: calc((100% + var(--gutter)) / 12 * 2); max-width: 64rem; }
  .observation__bridge { margin-left: auto; margin-right: calc((100% + var(--gutter)) / 12 * 1); text-align: right; }
  .world--caliber .world__text { align-self: start; padding-top: 6vh; }
  .world--raeno .world__text { align-self: end; padding-bottom: 8vh; }
  .world--fifth .world__text { align-self: start; padding-top: 14vh; }
  .world--fifth .world__scene { grid-column: 2 / span 5; align-self: end; }
  .expedition { margin-top: 22vh; }                       /* a long pause after the worlds */
  .expedition__text { text-align: left; padding-left: calc((100% - 2 * var(--gutter)) / 12 * 1 + var(--gutter)); }
  .expedition__title { margin-inline: 0; max-width: 12ch; }
  .expedition__sub { margin-left: calc((100% - 2 * var(--gutter)) / 12 * 3); }
}

/* ======================= OBSERVE → MEASURE → ADAPT → TRACE (six phases) */

[data-phase="2"], [data-phase="3"], [data-phase="4"], [data-phase="5"]) [data-layer="measure"] { opacity: 1; transform: none; }
[data-phase="3"], [data-phase="4"], [data-phase="5"]) [data-layer="grid"] { opacity: 1; }
[data-phase="4"], [data-phase="5"]) [data-layer="architecture"] { opacity: 1; transform: none; }
[data-phase="5"]) [data-layer="nodes"] { opacity: 1; }
/* once the structure resolves, the measurements step back */

/* the organic array quiets as the architecture takes over, then holds */

[data-phase="4"]) [data-layer="organic"] { opacity: .7; }
/* text becomes readable last */

.nav { padding: 18px var(--gutter); }
@media (max-width: 760px) { .nav { padding: 12px var(--gutter); } }

/* ------------------------------------------------------- the logo ----
   The supplied ASTROE Group mark (media/brand/, built by tools/brand_logo.py):
   serif ASTROE in bone white over widely spaced gold GROUP. Used as the
   identity wherever the company names itself: nav, arrival, closing. */
.nav__mark { display: block; padding: 4px 0; letter-spacing: 0; font-size: 0; line-height: 0; }
.nav__mark img { display: block; height: 30px; width: auto; transition: opacity .6s var(--e-settle); }
.nav__mark:hover img { opacity: .82; }
.arrival__mark { font-size: 0; line-height: 0; white-space: normal; }
.arrival__mark img {
  display: block; margin-inline: auto;
  width: min(760px, 66vw); height: auto;
  /* bone white, the faintest warm atmosphere: the company's own light */
  filter: drop-shadow(0 0 28px rgba(246, 244, 238, .12)) drop-shadow(0 0 90px rgba(191, 163, 90, .07));
}
.arrival__doctrine { margin-top: clamp(30px, 4vw, 56px); }
.closing__mark { font-size: 0; line-height: 0; white-space: normal; }
.closing__mark img { display: block; margin-inline: auto; width: min(560px, 62vw); height: auto; filter: drop-shadow(0 0 24px rgba(246, 244, 238, .1)); }
@media (max-width: 760px) {
  .nav__mark img { height: 26px; }
  .arrival__mark img { width: min(360px, 82vw); }
  .closing__mark img { width: min(320px, 78vw); }
}

/* ------------------------------------------------- CALIBER identity ----
   From the supplied CALIBER lockup (media/caliber/caliber-lockup-original.png),
   separated into its mark (the C and its violet arrow) and its wordmark
   (the brand's own letterforms), and a tagline set like the lockup's:
   wide spaced capitals between two fine gold rules. */
.caliber-mark {
  width: clamp(170px, 17vw, 280px); height: auto; margin: 0 0 clamp(18px, 2vw, 28px) -6%;
  /* the crop's hard left edge fades into the field, as the line does in the lockup */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%);
  transition: filter 1.2s var(--e-settle), transform 1.6s var(--e-settle);
}
/* the arrow already carries the violet light; on approach it brightens and leans forward */
.world--caliber.is-near .caliber-mark { filter: brightness(1.18); transform: translateX(6px); }
.caliber-wordmark { margin-top: 12px; font-size: 0; line-height: 0; }
.caliber-wordmark img { display: block; width: clamp(220px, 24vw, 400px); height: auto; filter: drop-shadow(0 0 14px rgba(246, 244, 238, .12)); }
.caliber-tagline {
  display: grid; gap: 10px; margin-top: clamp(22px, 2.4vw, 34px);
  font-weight: 300; font-stretch: 112%; text-transform: uppercase;
  font-size: clamp(.78rem, .9vw, .95rem); letter-spacing: .34em; line-height: 1.3; color: var(--off);
}
.caliber-tagline span { display: flex; align-items: center; gap: 16px; }
.caliber-tagline span:first-child::before, .caliber-tagline span:last-child::after {
  content: ""; flex: none; width: 34px; height: 1px;
  background: linear-gradient(90deg, rgba(191, 163, 90, 0), rgba(191, 163, 90, .9));
}
.caliber-tagline span:last-child::after { background: linear-gradient(90deg, rgba(191, 163, 90, .9), rgba(191, 163, 90, 0)); }
.caliber-tagline span:last-child { padding-left: 50px; }
@media (max-width: 900px) {
  .caliber-mark { width: 160px; margin-left: -4%; }
  .caliber-wordmark img { width: min(300px, 70vw); }
  .caliber-tagline { letter-spacing: .24em; }
  .caliber-tagline span:last-child { padding-left: 0; }
}

/* ------------------------------------------- perimeter: clearer line --
   The contour itself reads clearly on all four sides; the glow stays tight
   and quiet (a close halo, not a wash). */
:root { --codex-line: .8; --codex-field: .12; --codex-depth: 14px; --codex-w: 1.5px; }
.codex__l--t { background: linear-gradient(to bottom, rgba(var(--mint), var(--a)) 0 var(--codex-w), rgba(var(--mint), var(--g)) var(--codex-w), rgba(var(--mint), calc(var(--g) * .25)) 6px, rgba(var(--mint), 0) 100%); }
.codex__l--b { background: linear-gradient(to top, rgba(var(--mint), var(--a)) 0 var(--codex-w), rgba(var(--mint), var(--g)) var(--codex-w), rgba(var(--mint), calc(var(--g) * .25)) 6px, rgba(var(--mint), 0) 100%); }
.codex__l--l { background: linear-gradient(to right, rgba(var(--mint), var(--a)) 0 var(--codex-w), rgba(var(--mint), var(--g)) var(--codex-w), rgba(var(--mint), calc(var(--g) * .25)) 6px, rgba(var(--mint), 0) 100%); }
.codex__l--r { background: linear-gradient(to left, rgba(var(--mint), var(--a)) 0 var(--codex-w), rgba(var(--mint), var(--g)) var(--codex-w), rgba(var(--mint), calc(var(--g) * .25)) 6px, rgba(var(--mint), 0) 100%); }
@property --a { syntax: "<number>"; inherits: false; initial-value: .8; }
.codex__c { border-color: rgba(var(--mint), calc(.95 + var(--codex-boost))); filter: drop-shadow(0 0 3px rgba(var(--mint), .5)); }
.codex__c::after { width: 60px; height: 60px; background: radial-gradient(closest-side, rgba(var(--mint), .08), rgba(var(--mint), 0)); }
.codex__c--tl::after { top: -30px; left: -30px; } .codex__c--tr::after { top: -30px; right: -30px; }
.codex__c--bl::after { bottom: -30px; left: -30px; } .codex__c--br::after { bottom: -30px; right: -30px; }
@media (max-width: 760px) { :root { --codex-line: .7; --codex-field: .1; --codex-depth: 10px; --codex-w: 1px; } }

/* ======================================================================
   ASTRŒDON · the translation engine
   Observation → Principle → Architecture → Platform. Every visual is a
   principle diagram: translucent layers, airflow ribbons, nature as a ghost.
   No mechanism, no CAD, no layer geometry. Gold only where air or attention
   is moving (the live row, the ribbon, the selected branch).
   ====================================================================== */
.tag { display: inline-flex; align-items: center; gap: 10px; font: 400 11px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ice); margin-bottom: clamp(18px, 2vw, 30px); }
.tag::before { content: ""; width: 18px; height: 1px; background: var(--ice); opacity: .6; }
.chapter.engine, .chapter.platform, .chapter.lab { position: relative; padding-block: var(--section); border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------- hero */
.page-hero--engine { align-items: end; padding-top: 120px; }
.page-hero--engine .page-hero__scene { opacity: .7; }
.engine-hero { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; }
.engine-hero__id { grid-column: 1 / span 5; }
.page-hero--engine .page-title { font-size: clamp(3rem, 6.6vw, 7.6rem); }
.engine-line { margin-top: 22px; font: 400 clamp(.8rem, 1vw, .95rem)/1.4 var(--mono); letter-spacing: .36em; text-transform: uppercase; color: var(--off); }
.engine-line span + span { margin-left: .6em; }
.page-hero--engine .page-line { max-width: 44ch; }

.glyph { flex: none; width: 30px; height: 30px; fill: none; stroke: var(--ice); stroke-width: 1; opacity: .55; vector-effect: non-scaling-stroke; transition: opacity .9s var(--ease), stroke .9s var(--ease); }
/* the connectors: hairlines between cells, not arrows */

/* the live row: its air passes left to right */

@media (max-width: 1000px) {
  .engine-hero__id { grid-column: 1 / -1; }
  
  .page-hero--engine .page-title { font-size: min(8rem, calc((100vw - 2 * var(--gutter)) / 6.6)); }
}
@media (max-width: 640px) {
  
  
  
  
  .glyph { width: 24px; height: 24px; }
}

/* ------------------------------------------------------ engine: steps */
.engine__title { max-width: 18ch; }
.engine__lede { margin-top: 28px; font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 300; color: var(--ice); max-width: 36ch; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-top: clamp(56px, 7vw, 110px); }
.steps li { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line-strong); color: var(--off-72); line-height: 1.45; }
.steps .num { font: 400 11px/1 var(--mono); letter-spacing: .14em; color: var(--ice); }
.steps b { font-weight: 400; font-stretch: 125%; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(1rem, 1.25vw, 1.2rem); color: var(--off); }

.examples { margin-top: clamp(40px, 5vw, 72px); }
.examples__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.examples__tab {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px;
  font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--off-50);
  border: 1px solid var(--line); border-radius: 999px; transition: color .5s var(--ease), border-color .5s var(--ease);
}
.examples__tab .glyph { width: 22px; height: 22px; }
.examples__tab:hover { color: var(--off); }
.examples__tab[aria-selected="true"] { color: var(--off); border-color: var(--gold); }
.examples__tab[aria-selected="true"] .glyph { opacity: 1; }
.examples__panel { position: relative; margin-top: 22px; overflow: hidden; border-block: 1px solid var(--line); }
html:not(.js) .examples__panel + .examples__panel, .examples:not(.is-tabbed) .examples__panel + .examples__panel { margin-top: 10px; }
.examples__ghost { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ice); stroke-width: 1; opacity: .07; vector-effect: non-scaling-stroke; }
.examples__ghost path { vector-effect: non-scaling-stroke; }
.ex-cards { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); padding-block: clamp(28px, 3.4vw, 52px); }
.ex-card { display: flex; flex-direction: column; gap: 12px; }
.ex-card__step { font: 400 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ice); opacity: .7; }
.ex-card p { font-size: clamp(1rem, 1.3vw, 1.3rem); font-weight: 300; line-height: 1.35; color: var(--off); }
.ex-card:nth-child(3) p { color: #EEF5F8; }
.motion .is-tabbed .ex-card { opacity: 0; transform: translateX(28px); }
.motion .is-tabbed .is-in .ex-card { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: calc(var(--i) * 110ms); }
@media (max-width: 900px) {
  .steps, .ex-cards { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}
@media (max-width: 560px) {
  .steps, .ex-cards { grid-template-columns: 1fr; row-gap: 22px; }
}

/* ------------------------------------------------------------- BioVent */
.bv { position: relative; padding-top: var(--section); border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--black), #080b05 40%, var(--black)); overflow: clip; }
.bv__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; }
.bv__text { grid-column: 1 / span 5; }
.bv__label { display: flex; gap: 14px; font: 400 11px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ice); }
.bv__label span + span { color: var(--off-50); }
.bv__name { margin-top: 18px; font-weight: 200; font-stretch: 125%; text-transform: uppercase; font-size: clamp(3rem, 6vw, 6.6rem); line-height: .92; }
.bv__sub { margin-top: 16px; font-size: clamp(1.05rem, 1.4vw, 1.35rem); font-weight: 300; color: var(--off); max-width: 30ch; }
.bv__state { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ice); }
.bv__prose { margin-top: 30px; }
.bv__not { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 400 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--off-50); }
.bv__not li { text-decoration: line-through; text-decoration-color: rgba(214,230,240,.35); text-decoration-thickness: 1px; }
.bv__is { margin-top: 18px; max-width: 38ch; color: var(--off); font-size: 1.05rem; line-height: 1.5; }
.bv__fig { grid-column: 7 / -1; }

@keyframes mc-flow { to { stroke-dashoffset: -600; } }
.layers__visual .caption, .boundary .caption { display: flex; gap: 14px; margin-top: 18px; }
@media (max-width: 1000px) { .bv__text, .bv__fig { grid-column: 1 / -1; } .bv__fig { max-width: 560px; } }

/* ------------------------------------------------------ layer doctrine */
.layers { position: relative; padding-top: var(--section); }
.layers__head { margin-bottom: clamp(32px, 4vw, 64px); }
.layers__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
.layers__visual { grid-column: 1 / span 7; position: sticky; top: 140px; align-self: start; height: calc(100svh - 180px); display: flex; flex-direction: column; justify-content: center; }

.layers__list { grid-column: 9 / span 4; padding-bottom: 30svh; }
.layers__item { min-height: 62svh; display: flex; flex-direction: column; justify-content: center; gap: 10px; color: var(--off-50); transition: color .9s var(--ease); cursor: default; }
.layers__item .num { font: 400 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ice); opacity: .7; }
.layers__item b { font-weight: 300; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.8rem, 3.4vw, 3.4rem); line-height: 1; letter-spacing: .02em; color: var(--off-50); transition: color .9s var(--ease), text-shadow .9s var(--ease); }
.layers__item.is-past b { color: var(--off-72); }
.layers__item.is-current { color: var(--off); }
.layers__item.is-current b { color: var(--off); text-shadow: 0 0 30px rgba(214,230,240,.28); }
.layers__item.is-current .num { color: var(--gold); opacity: 1; }
.layers:not(.is-live) .layers__item b { color: var(--off); }
@media (max-width: 1000px) {
  .layers__visual { grid-column: 1 / -1; top: 104px; height: 44svh; z-index: 2; background: linear-gradient(180deg, var(--black) 88%, rgba(5,5,5,0)); padding-bottom: 12px; }
  .layers__visual .caption { display: none; }
  .layers__list { grid-column: 1 / -1; padding-bottom: 12svh; }
  .layers__item { min-height: 42svh; justify-content: flex-start; padding-top: 6svh; }
}

/* -------------------------------------------------------- platform map */
.platform__lede { margin-top: 26px; }
.pmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; margin-top: clamp(40px, 5vw, 80px); }
.pmap__map { position: relative; grid-column: 1 / span 7; aspect-ratio: 1; max-width: 680px; width: 100%; }
.pmap__map svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pmap__map path, .pmap__map circle { fill: none; vector-effect: non-scaling-stroke; }
.pmap__ring { stroke: rgba(214,230,240,.1); stroke-dasharray: 2 6; }
.pmap__ring--in { stroke: rgba(214,230,240,.07); }
.pmap__core-ring { stroke: rgba(214,230,240,.5); filter: drop-shadow(0 0 10px rgba(214,230,240,.25)); }
.pmap__spoke { stroke: rgba(214,230,240,.26); stroke-width: 1; transition: stroke .8s var(--ease), stroke-width .8s var(--ease); }
.pmap__spoke.is-on { stroke: rgba(191,163,90,.9); stroke-width: 1.4; }
.pmap__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; pointer-events: none; }
.pmap__core span:first-child { font-weight: 300; font-stretch: 125%; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(.9rem, 1.2vw, 1.15rem); }
.pmap__core span:last-child { font: 400 9px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--ice); }
.pmap__node {
  position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 6px; white-space: nowrap;
  font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--off-50);
  transition: color .5s var(--ease);
}
.pmap__node i { flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(214,230,240,.6); background: var(--black); transition: border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
.pmap__node[data-side="r"] { transform: translate(-5px, -50%); }
.pmap__node[data-side="l"] { transform: translate(calc(-100% + 5px), -50%); flex-direction: row-reverse; }
.pmap__node[data-side="t"] { transform: translate(-50%, calc(-100% + 16px)); flex-direction: column-reverse; }
.pmap__node[data-side="b"] { transform: translate(-50%, -16px); flex-direction: column; }
.pmap__node:hover { color: var(--off); }
.pmap__node[aria-pressed="true"] { color: var(--off); }
.pmap__node[aria-pressed="true"] i { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 12px rgba(191,163,90,.7); }
.pmap__detail { grid-column: 9 / span 4; }
.branch { padding-block: 8px; }
.branch + .branch { margin-top: 40px; }
.pmap.is-live .branch + .branch { margin-top: 0; }
.branch__art { width: min(240px, 70%); height: auto; fill: none; stroke: rgba(214,230,240,.55); stroke-width: 1; overflow: visible; }
.branch__art * { vector-effect: non-scaling-stroke; }
.branch__art .flow { stroke: rgba(191,163,90,.9); stroke-dasharray: 3 5; }
.branch__tag { margin-top: 26px; font: 400 10px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--off-50); }
.branch.is-first .branch__tag { color: var(--ice); }
.branch__title { margin-top: 12px; font-weight: 300; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.4rem, 2.2vw, 2.1rem); line-height: 1.05; }
.branch__text { margin-top: 14px; max-width: 36ch; color: var(--off-72); line-height: 1.5; }
.motion .pmap.is-live .branch.is-in > * { animation: branch-in 1s var(--ease) both; }
.motion .pmap.is-live .branch.is-in > :nth-child(2) { animation-delay: .06s; }
.motion .pmap.is-live .branch.is-in > :nth-child(3) { animation-delay: .12s; }
.motion .pmap.is-live .branch.is-in > :nth-child(4) { animation-delay: .18s; }
@keyframes branch-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 1000px) {
  .pmap__map, .pmap__detail { grid-column: 1 / -1; }
  .pmap__map { max-width: 560px; margin-inline: auto; }
  .pmap__detail { min-height: 360px; }
}
@media (max-width: 560px) {
  .pmap__node { font-size: 9px; letter-spacing: .1em; }
  .pmap__node span { max-width: 9ch; white-space: normal; line-height: 1.3; }
  .pmap__node[data-side="l"] span { text-align: right; }
  .pmap__map { width: 86%; }
}

/* ------------------------------------------------------------ gauntlet */

/* -------------------------------------------------------------- energy */


/* ---------------------------------------------------------------- RÆNO */

/* ----------------------------------------------------------------- lab */
.pipeline { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin-top: clamp(48px, 6vw, 96px); }
.pipeline::before { content: ""; position: absolute; left: 4px; right: 0; top: 4px; height: 1px; background: linear-gradient(90deg, rgba(214,230,240,.5), rgba(214,230,240,.12)); }
.pipeline li { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 26px; }
.pipeline i { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(214,230,240,.7); background: var(--black); }
.pipeline .num { font: 400 10px/1 var(--mono); letter-spacing: .16em; color: var(--ice); opacity: .7; }
.pipeline b { font-weight: 300; font-size: clamp(.9rem, 1.1vw, 1.05rem); line-height: 1.25; }
.pipeline li:nth-child(6) i { border-color: rgba(214,230,240,.9); box-shadow: 0 0 0 4px rgba(214,230,240,.06); }
.lab__note { margin-top: 26px; }
.lab__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; margin-top: clamp(64px, 8vw, 128px); }
.boundary { grid-column: 1 / span 6; }
.lab__text { grid-column: 8 / span 5; }
.lab__h { font-weight: 300; font-stretch: 125%; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1.3rem, 2vw, 1.9rem); margin-bottom: 18px; }
.lab__text .testing__list { grid-column: auto; }
.lab__prose { margin-top: 28px; }
@media (max-width: 900px) {
  .pipeline { grid-template-columns: 1fr; gap: 0; }
  .pipeline::before { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, rgba(214,230,240,.5), rgba(214,230,240,.12)); }
  .pipeline li { flex-direction: row; align-items: baseline; gap: 14px; padding: 12px 0 12px 30px; }
  .pipeline i { top: 17px; }
  .boundary, .lab__text { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------- protected */

@media (prefers-reduced-motion: reduce) {
  .ex-card { transition: none !important; }
}

/* translation engine · refinements */
.examples__tab, .pmap__node { background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pmap__node { border: 0; }
.page-hero--engine .page-title { font-size: clamp(3rem, calc((100vw - 2 * var(--gutter)) * .058), 7rem); }
.engine-hero__id { grid-column: 1 / span 6; }
.engine__title { max-width: none; font-size: clamp(2rem, 4.1vw, 4.8rem); }

@media (max-width: 1000px) {
  .engine-hero__id { grid-column: 1 / -1; }
  .page-hero--engine .page-title { font-size: min(8rem, calc((100vw - 2 * var(--gutter)) / 6.6)); }
}

.pmap__map { margin-left: clamp(0px, 4vw, 72px); }
.pmap__node[data-side="l"] span, .pmap__node[data-side="r"] span { max-width: 11ch; white-space: normal; line-height: 1.5; }
.pmap__node[data-side="l"] span { text-align: right; }
@media (max-width: 1000px) { .pmap__map { margin-left: auto; } }
@media (max-width: 1000px) { .page-hero--engine .page-title { font-size: min(7rem, calc((100vw - 2 * var(--gutter)) / 8)); } }

.engine__not { margin-top: 18px; max-width: 52ch; }

/* ---------------------------------------- BioVent · principle plate
   Microclimate as structured space: two boundaries, a held volume, one
   passage of air. Same line language as the layer doctrine. */

/* ---------------------------------------- layer doctrine · the real stack */
.layers__visual { gap: 0; }
.layers__frame { position: relative; }
.layers__frame::before { content: ""; position: absolute; inset: 6% 4%; background: radial-gradient(closest-side, rgba(23,30,11,.7), transparent); pointer-events: none; }
.specimen { position: relative; z-index: 2; aspect-ratio: 16 / 12; outline-offset: 8px; }
.specimen__poster, .specimen__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.specimen__poster { object-fit: contain; -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(75% 75% at 50% 50%, #000 55%, transparent 100%); transition: opacity 1.6s var(--e-settle); }
.specimen.is-live .specimen__poster { opacity: 0; }
.specimen__canvas { opacity: 0; transition: opacity 1.6s var(--e-settle); touch-action: pan-y; -webkit-touch-callout: none; user-select: none; cursor: grab; }
.specimen.is-live .specimen__canvas { opacity: 1; }
.specimen__hud { position: absolute; left: 0; bottom: 0; right: 0; z-index: 2; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font: 400 11px/1.5 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ice); opacity: 0; transition: opacity .8s var(--ease); }
.specimen.is-live .specimen__hud { opacity: 1; }
.specimen__hud [data-specimen-mode]::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--gold); vertical-align: 1px; }
.specimen__hud [data-specimen-layer] { color: var(--off); letter-spacing: .12em; }
.bv-controls { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 14px; }
.bv-controls button { min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--off-50); transition: color .5s var(--ease); }
.bv-controls button::before { content: ""; width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(214,230,240,.45); transition: background .6s var(--e-settle), box-shadow .8s var(--e-settle); }
.bv-controls button:hover, .bv-controls button[aria-pressed="true"] { color: var(--off); }
.bv-controls button[aria-pressed="true"]::before { background: var(--gold); box-shadow: 0 0 8px rgba(191,163,90,.8); }
.bv-controls button[data-bv="reset"] { margin-left: auto; }
.bv-controls button[data-bv="reset"]::before { display: none; }
.layers__visual:not(.is-interactive) .bv-controls { visibility: hidden; }
.layers__visual .caption { display: flex; gap: 14px; margin-top: 8px; }
/* the doctrine list is the legend: each verb opens its layer */
.layers__item button { display: flex; flex-direction: column; gap: 10px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.layers__item button[aria-pressed="true"] b { color: var(--off); text-shadow: 0 0 30px rgba(214,230,240,.28); }
.layers__item button[aria-pressed="true"] .num { color: var(--gold); opacity: 1; }
.layers__item button.is-hover b { color: var(--off-72); }
.layers__item b { color: var(--off-50); }
.layers:not(.is-live) .layers__item b { color: var(--off); }
@media (max-width: 1000px) {
  .layers__visual { height: auto; padding-bottom: 6px; }
  .specimen { aspect-ratio: 4 / 3; max-height: 36svh; margin-inline: auto; }
  .bv-controls { gap: 0 16px; margin-top: 4px; }
  .bv-controls button { min-height: 36px; }
  .layers__visual .caption { display: none; }
}

/* ------------------------------ BioVent: the stack beside its introduction */
.bv .layers { padding-top: 0; }
.layers__intro { min-height: calc(100svh - 180px); display: flex; flex-direction: column; justify-content: center; }
.layers__head { margin: 12svh 0 0; }
.layers__title { font-weight: 300; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.6rem, 2.6vw, 2.7rem); line-height: 1.02; letter-spacing: .01em; }
.layers__title .line { display: block; }
@media (min-width: 1001px) { .page-hero--engine .engine-hero__id { grid-column: 1 / span 7; } }
.lab__metric { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: baseline; padding: 20px 0 24px; border-top: 1px solid var(--line-strong); }
.lab__metric span:first-child { grid-column: 1 / -1; font: 400 10px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ice); margin-bottom: 14px; }
.lab__metric b { font-weight: 200; font-stretch: 125%; font-size: clamp(2.4rem, 4vw, 3.8rem); line-height: 1; color: #EEF5F8; text-shadow: 0 0 30px rgba(214,230,240,.25); }
.lab__metric b sub, .lab__rules sub { font-size: .45em; vertical-align: baseline; position: relative; top: .25em; }
.lab__metric span:last-child { color: var(--off-72); line-height: 1.45; max-width: 30ch; }
.lab__rules li { text-transform: none; font-size: clamp(1rem, 1.3vw, 1.2rem); }
@media (max-width: 1000px) {
  .layers__intro { min-height: 0; padding-block: 8svh 4svh; }
  .layers__head { margin-top: 6svh; }
}
.layers__intro .bv__name { font-size: clamp(2.6rem, 5vw, 5rem); }

/* ======================================================================
   ASTRŒDON · from observation to form
   Real notebook sheets on black: warm paper, thin outline, no glossy cards.
   The imperfection is the evidence; nothing is redrawn or "cleaned".
   ====================================================================== */
.sketches { position: relative; padding-block: var(--section); border-top: 1px solid var(--line); }
.sketches__lede { margin-top: 28px; max-width: 46ch; }
.sheets { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(28px, 4vw, 64px) var(--gutter); margin-top: clamp(56px, 7vw, 110px); align-items: start; }
.sheet--1 { grid-column: 1 / span 5; margin-top: 8%; }
.sheet--2 { grid-column: 6 / span 7; }
.sheet--3 { grid-column: 2 / span 4; }
.sheet--4 { grid-column: 6 / span 7; margin-top: -6%; }
.sheet__btn { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: zoom-in; font: inherit; }
.sheet__paper { display: block; position: relative; padding: clamp(10px, 1.2vw, 18px); background: #E8E1D1; outline: 1px solid rgba(246,244,238,.22); outline-offset: 5px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); transform: rotate(var(--tilt, 0deg)); transition: transform .9s var(--ease), box-shadow .9s var(--ease), outline-color .9s var(--ease); }
.sheet--1 { --tilt: -.8deg; } .sheet--2 { --tilt: .4deg; } .sheet--3 { --tilt: .9deg; } .sheet--4 { --tilt: -.5deg; }
.sheet__paper img { display: block; width: 100%; height: auto; filter: contrast(1) saturate(.95); opacity: .9; transition: filter .9s var(--ease), opacity .9s var(--ease); }
.sheet__cap { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 18px; font: 400 10px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--off-50); }
.sheet__num { color: var(--ice); }
.sheet__title { color: var(--off-72); }
.sheet__date { margin-left: auto; letter-spacing: .14em; }
.sheet__hover { display: block; margin-top: 8px; max-width: 42ch; font-size: .9rem; color: var(--off-72); opacity: 0; transform: translateY(-4px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (hover: hover) {
  .sheet__btn:hover .sheet__paper, .sheet__btn:focus-visible .sheet__paper { transform: translateY(-8px) rotate(0deg); box-shadow: 0 44px 80px -30px rgba(0,0,0,.95); outline-color: rgba(191,163,90,.55); }
  .sheet__btn:hover img, .sheet__btn:focus-visible img { filter: contrast(1.22) saturate(1.05); opacity: 1; }
  .sheet__btn:hover .sheet__hover, .sheet__btn:focus-visible .sheet__hover { opacity: 1; transform: none; }
  .sheet__btn:hover .sheet__num { color: var(--gold); }
}
@media (hover: none) { .sheet__hover { opacity: 1; transform: none; } }
.sketches__statement { margin-top: clamp(72px, 9vw, 140px); display: flex; flex-direction: column; gap: 6px; font-weight: 200; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.5rem, 3.2vw, 3.2rem); line-height: 1.05; }
.sketches__statement span:last-child { color: #EEF5F8; text-shadow: 0 0 30px rgba(214,230,240,.22); }
@media (max-width: 900px) {
  .sheets { grid-template-columns: 1fr; }
  .sheet--1, .sheet--2, .sheet--3, .sheet--4 { grid-column: 1 / -1; margin-top: 0; }
  .sheet--3 { max-width: 70%; }
}

/* ----------------------------------------- sketch → geometry → model */
.transform { border-top: 1px solid var(--line); }
.transform__track { position: relative; }
.motion .transform:not(.is-still) .transform__track { height: 380svh; }
.transform__stage { position: relative; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3vh, 40px); padding-block: 96px 40px; }
.motion .transform:not(.is-still) .transform__stage { position: sticky; top: 0; height: 100svh; }
.transform__title { font-weight: 200; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.8rem, 3.6vw, 3.8rem); line-height: 1; }
.transform__canvas { position: relative; width: 100%; aspect-ratio: 760 / 250; max-height: 56svh; margin-inline: auto; }
.tf__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tf__sketch { opacity: 1; }
.tf__svg path { fill: none; vector-effect: non-scaling-stroke; }
.tf__trace path { stroke: rgba(191,163,90,.95); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px rgba(191,163,90,.5)); }
.tf__clean { opacity: 0; }
.tf__layer path { stroke: rgba(214,230,240,.85); stroke-width: 1.1; }
.tf__layer[data-l="0"] path { stroke: rgba(246,244,238,.95); }
.tf__label { opacity: 0; }
.tf__label path { stroke: rgba(214,230,240,.45); }
.tf__label text { font: 400 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--off-72); }
.tf__model { position: absolute; left: 50%; top: 50%; height: 118%; width: auto; transform: translate(-50%, -50%) scale(.94); opacity: 0; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); mask-image: radial-gradient(closest-side, #000 70%, transparent); }
.transform__steps { display: flex; gap: clamp(14px, 3vw, 48px); flex-wrap: wrap; font: 400 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--off-50); }
.transform__steps span { margin-right: 8px; color: var(--ice); opacity: .6; }
.transform__steps li { transition: color .6s var(--ease); }
.transform__steps li.is-past { color: var(--off-72); }
.transform__steps li.is-current { color: var(--off); }
.transform__steps li.is-current span { color: var(--gold); opacity: 1; }
.transform.is-still .tf__svg { opacity: 1 !important; }
@media (max-width: 760px) {
  .motion .transform:not(.is-still) .transform__track { height: 300svh; }
  .transform__canvas { aspect-ratio: 520 / 250; }
  .tf__svg { overflow: hidden; }
  .tf__label text { font-size: 13px; }
}

/* ------------------------------------------------------------ method */
.method { position: relative; padding-block: var(--section); border-top: 1px solid var(--line); }
.method__steps { margin-top: clamp(40px, 5vw, 80px); }
.flowstudy { margin-top: clamp(48px, 6vw, 90px); display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px var(--gutter); align-items: baseline; padding-top: 22px; border-top: 1px solid var(--line); }
.flowstudy__label { grid-column: 1 / span 3; font: 400 10px/1.5 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ice); }
.flowstudy__text { grid-column: 4 / span 6; color: var(--off-72); line-height: 1.5; max-width: 52ch; }
.flowstudy__text em { font-style: normal; color: var(--off); }
.flowstudy__cta { grid-column: 10 / -1; justify-self: end; }
@media (max-width: 900px) { .flowstudy__label, .flowstudy__text, .flowstudy__cta { grid-column: 1 / -1; justify-self: start; } }

/* ---------------------------------------------------- research notes */
.notes { margin-top: clamp(64px, 8vw, 128px); }
.notes__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.notes__list { border-top: 1px solid var(--line-strong); }
.note-row button { width: 100%; display: grid; grid-template-columns: 76px 44px minmax(0, 2.2fr) minmax(0, 1.4fr) 90px; gap: 20px; align-items: center; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--off-72); text-align: left; font: inherit; cursor: pointer; transition: color .5s var(--ease); }
.note-row__thumb { display: block; aspect-ratio: 4 / 3; background: #E8E1D1; overflow: hidden; outline: 1px solid rgba(246,244,238,.18); }
.note-row__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.note-row__id { font: 400 11px/1 var(--mono); letter-spacing: .14em; color: var(--ice); }
.note-row__title { color: var(--off); font-size: 1.02rem; }
.note-row__title small { display: block; margin-top: 4px; font-size: .86rem; color: var(--off-50); line-height: 1.4; }
.note-row__status { font-size: .9rem; line-height: 1.4; }
.note-row__program { font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--off-50); text-align: right; }
.note-row button:hover { color: var(--off); }
.note-row button:hover .note-row__id { color: var(--gold); }
@media (max-width: 760px) {
  .note-row button { grid-template-columns: 64px 1fr; row-gap: 6px; }
  .note-row__id { display: none; }
  .note-row__status, .note-row__program { grid-column: 2; text-align: left; }
}

/* ---------------------------------- inspection plate (not a lightbox) */
.plate-view { width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; margin: 0; padding: 0; border: 0; background: #030303; color: var(--off); overflow: auto; }
.plate-view::backdrop { background: rgba(0,0,0,.92); }
.plate-view[open] { animation: plate-in .8s var(--ease) both; }
@keyframes plate-in { from { opacity: 0; } }
.plate-view__inner { position: relative; min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(64px, 8vh, 96px) var(--gutter) 48px; }
.plate-view__sheet { margin: 0; display: flex; justify-content: center; }
.plate-view__sheet img { max-width: 100%; max-height: 78svh; width: auto; height: auto; background: #E8E1D1; padding: clamp(10px, 1.4vw, 22px); outline: 1px solid rgba(246,244,238,.25); outline-offset: 6px; }
.plate-view.is-turn .plate-view__sheet img { animation: plate-sheet .9s var(--ease) both; }
.plate-view.is-turn .plate-view__meta > * { animation: branch-in .9s var(--ease) both; }
@keyframes plate-sheet { from { opacity: 0; transform: scale(.975); filter: blur(6px); } }
.plate-view__num { display: flex; gap: 18px; font: 400 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ice); }
.plate-view__num span:last-child { color: var(--off-50); letter-spacing: .14em; }
.plate-view__title { margin-top: 16px; font-weight: 200; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1; }
.plate-view__family { margin-top: 12px; font: 400 10px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--off-50); }
.plate-view__fields { margin-top: 30px; display: grid; gap: 6px; }
.plate-view__fields dt { margin-top: 14px; font: 400 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--ice); }
.plate-view__fields dd { margin: 0; color: var(--off-72); line-height: 1.5; max-width: 42ch; }
.plate-view__nav { display: flex; align-items: center; gap: 22px; margin-top: 36px; font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--off-50); }
.plate-view__nav button, .plate-view__close { min-height: 44px; padding: 0; border: 0; background: none; color: var(--off-72); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.plate-view__nav button:hover, .plate-view__close:hover { color: var(--off); }
.plate-view__close { position: absolute; top: 18px; right: var(--gutter); font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
.plate-view__close kbd { margin-left: 8px; padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: 3px; font: inherit; color: var(--off-50); }
html.is-inspecting { overflow: hidden; }
@media (max-width: 900px) {
  .plate-view__inner { grid-template-columns: 1fr; align-items: start; padding-top: 64px; }
  .plate-view__sheet img { max-height: 58svh; }
  .plate-view__close kbd { display: none; }
}
.platform__note { margin-top: 18px; max-width: 60ch; }
.transform__canvas { width: min(100%, calc(56svh * 760 / 250)); }
.tf__model { left: 31.6%; }
@media (max-width: 760px) { .transform__canvas { width: 100%; } .tf__model { left: 46%; height: 100%; } }

/* ======================================================================
   RÆNO · garment spotlight (js/spotlight.js)
   Silhouette is given; detail is discovered. The darkened base keeps the
   form readable; the same image, correctly exposed, is revealed inside a
   feathered ellipse that follows the pointer. Warm centre, neutral falloff.
   ====================================================================== */
.inspect { position: relative; padding-block: var(--section); border-top: 1px solid var(--line); background: radial-gradient(60% 50% at 70% 40%, rgba(40,32,20,.35), transparent 70%), var(--black); }
.inspect__head { margin-bottom: clamp(48px, 6vw, 96px); }
.inspect__moment { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: center; }
.inspect__moment + .inspect__moment { margin-top: clamp(80px, 11vw, 180px); }
.inspect__moment--form .inspect__text { grid-column: 1 / span 4; }
.inspect__moment--form .spot { grid-column: 5 / -1; }
.inspect__moment--material .spot { grid-column: 1 / span 8; grid-row: 1; }
.inspect__moment--material .inspect__text { grid-column: 9 / -1; grid-row: 1; }
.inspect__num { font: 400 11px/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--off-72); }
.inspect__num span { color: var(--gold); margin-right: 10px; }
.inspect__line { margin-top: 16px; font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 300; line-height: 1.35; max-width: 26ch; }
.inspect__hint { margin-top: 22px; max-width: 34ch; }
.fine-pointer { display: inline; } .coarse-pointer { display: none; }
@media (pointer: coarse) { .fine-pointer { display: none; } .coarse-pointer { display: inline; } }

.spot { margin: 0; }
.spot__stage {
  --x: 50%; --y: 50%; --i: 0; --dx: 0px; --dy: 0px;
  --rx: clamp(110px, 15vw, 220px); --ry: calc(var(--rx) * .84);
  position: relative; overflow: hidden; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  outline-offset: 6px;
}
.spot__drift { position: relative; transform: translate3d(var(--dx), var(--dy), 0) scale(1.012); }
.spot__base, .spot__detail { display: block; width: 100%; height: auto; }
.js .spot__base { filter: brightness(.34) contrast(1.12) saturate(.7); }
.spot__detail {
  position: absolute; inset: 0; filter: brightness(1.1) contrast(1.08) saturate(.95);
  -webkit-mask-image: radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), rgba(0,0,0,var(--i)) 0%, rgba(0,0,0,calc(var(--i) * .92)) 30%, rgba(0,0,0,calc(var(--i) * .5)) 56%, rgba(0,0,0,calc(var(--i) * .14)) 74%, transparent 88%);
          mask-image: radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), rgba(0,0,0,var(--i)) 0%, rgba(0,0,0,calc(var(--i) * .92)) 30%, rgba(0,0,0,calc(var(--i) * .5)) 56%, rgba(0,0,0,calc(var(--i) * .14)) 74%, transparent 88%);
  transition: filter .9s var(--ease);
}
html:not(.js) .spot__detail, html:not(.js) .spot__warm, html:not(.js) .spot__svg { display: none; }
/* the lamp itself: warm at the centre, neutral at the edge, never a white disc */
.spot__warm { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(calc(var(--rx) * .7) calc(var(--ry) * .7) at var(--x) var(--y), rgba(255,208,140,calc(.34 * var(--i))) 0%, rgba(255,236,214,calc(.12 * var(--i))) 45%, transparent 75%); }
/* each kind of detail answers differently */
.spot__stage[data-kind="mesh"] .spot__detail { filter: brightness(1.16) contrast(1.32) saturate(1); }
.spot__stage[data-kind="panel"] .spot__detail { filter: brightness(1.1) contrast(1.4) saturate(.9); }
.spot__stage[data-kind="material"] .spot__detail { filter: brightness(1.18) contrast(1.22) saturate(1.05); }
.spot__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transform: translate3d(calc(var(--dx) * .5), calc(var(--dy) * .5), 0); }
.spot__svg path, .spot__svg circle { fill: none; vector-effect: non-scaling-stroke; }
.spot__leader { stroke: rgba(246,244,238,.72); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.spot__svg.is-on .spot__leader { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease) .12s; }
.spot__anchor { fill: rgba(246,244,238,.9) !important; opacity: 0; }
.spot__ring { stroke: rgba(191,163,90,.9); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.spot__svg.is-on .spot__anchor { opacity: 1; transition: opacity .4s var(--ease); }
.spot__svg.is-on .spot__ring { opacity: 1; animation: spot-wake 1.2s var(--ease) both; }
@keyframes spot-wake { from { transform: scale(.3); opacity: 0; } }
.spot__edge { stroke: rgba(191,163,90,.85); stroke-width: 1.3; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 3px rgba(191,163,90,.45)); transition: opacity .6s var(--ease); }
.spot__stage[data-kind="seam"] .spot__svg.is-on .spot__edge, .spot__stage[data-kind="panel"] .spot__svg.is-on .spot__edge { opacity: calc(.35 + .5 * var(--i)); }
.spot__stage[data-kind="panel"] .spot__edge { stroke: rgba(214,230,240,.7); filter: none; }
.spot__glint { fill: rgba(255,255,255,.8) !important; opacity: 0; filter: blur(10px); mix-blend-mode: screen; }
.spot__stage[data-kind="closure"] .spot__svg.is-on .spot__glint { opacity: .5; transition: opacity .5s var(--ease); }
.spot__note { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 6px; width: max-content; max-width: min(260px, 44%); pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); transform: translate3d(calc(var(--dx) * .5), calc(var(--dy) * .5), 0); }
.spot__note[data-align="r"] { translate: -100% calc(-100% - 10px); text-align: right; align-items: flex-end; }
.spot__note[data-align="l"] { translate: 0 calc(-100% - 10px); }
.spot__note.is-on { opacity: 1; transition: opacity .8s var(--ease) .45s; }
.spot__cat { font: 400 10px/1.3 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--off); }
.spot__text { font-size: .9rem; line-height: 1.4; color: var(--off-72); }
.spot__label { font: 400 9px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.spot.is-locked .spot__cat::after { content: " · held"; color: var(--gold); letter-spacing: .2em; }
@media (prefers-reduced-motion: reduce) { .spot__detail, .spot__edge, .spot__note, .spot__leader { transition: none !important; } .spot__ring { animation: none !important; } }
@media (max-width: 900px) {
  .inspect__moment--form .inspect__text, .inspect__moment--form .spot, .inspect__moment--material .spot, .inspect__moment--material .inspect__text { grid-column: 1 / -1; grid-row: auto; }
  .spot__stage { --rx: clamp(90px, 30vw, 150px); max-height: 72svh; }
  .spot__note { max-width: 58%; }
  .spot__text { font-size: .82rem; }
}
.js .spot__base { filter: brightness(.5) contrast(1.08) saturate(.7); }
.spot__stage { --rx: clamp(140px, 17vw, 250px); }
.spot__note[data-align="r"][data-v="b"] { translate: -100% 10px; }
.spot__note[data-align="l"][data-v="b"] { translate: 0 10px; }
.inspect__moment--architecture .inspect__text { grid-column: 1 / span 3; }
.inspect__moment--architecture .spot { grid-column: 4 / -1; }
@media (max-width: 900px) { .inspect__moment--architecture .inspect__text, .inspect__moment--architecture .spot { grid-column: 1 / -1; } }
.spot__cat, .spot__text { text-shadow: 0 1px 12px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); }

/* ASTRŒDON identity: the supplied logo (media/brand/astrodon-*.svg) */
.astrodon-mark, .astrodon-wordmark { font-size: 0; line-height: 0; letter-spacing: 0; }
.astrodon-mark img, .astrodon-wordmark img { display: block; height: auto; filter: drop-shadow(0 0 18px rgba(214,230,240,.16)); }
.page-hero--engine .astrodon-mark { margin-top: 18px; }
.page-hero--engine .astrodon-mark img { width: min(760px, 100%); }
.astrodon-wordmark img { width: clamp(260px, 30vw, 520px); }
@media (max-width: 760px) { .astrodon-wordmark img { width: min(340px, 80vw); } }
.program-bar__title { align-items: center; }
.program-bar__mark { display: block; height: 13px; width: auto; }
@media (max-width: 760px) { .program-bar__mark { height: 11px; } }
.program-bar__mark--lockup { height: 26px; }
@media (max-width: 760px) { .program-bar__mark--lockup { height: 22px; } }

/* ------------------------------------------------ visual flow test rig (js/rig.js) */
.rig { margin-top: clamp(64px, 9vw, 120px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(214,230,240,.1); }
.rig__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px 48px; align-items: end; margin-bottom: 22px; }
.rig__head .chapter__label { grid-column: 1 / -1; margin-bottom: 0; }
.rig__head .lab__h { margin: 0; }
.rig__lede { margin: 0; max-width: 56ch; color: var(--off-70, rgba(246,244,238,.7)); }
.rig__fig { margin: 0; }
.rig__stage { position: relative; aspect-ratio: 21 / 9; background: radial-gradient(120% 90% at 50% 55%, #0b0f0d 0%, #050505 70%); border: 1px solid rgba(214,230,240,.08); overflow: hidden; touch-action: pan-y; }
.rig__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.rig__stage canvas:active { cursor: grabbing; }
.rig__poster { position: absolute; left: 50%; top: 50%; width: min(46%, 520px); height: auto; transform: translate(-50%, -50%); opacity: .7; transition: opacity .8s var(--ease); pointer-events: none; }
.rig__stage.is-live .rig__poster { opacity: 0; }
.rig__stage:not(.is-live) canvas { visibility: hidden; }
.rig__legend { position: absolute; left: 16px; bottom: 14px; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font: 400 9.5px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(246,244,238,.5); pointer-events: none; }
.rig__legend li { display: inline-flex; align-items: center; gap: 8px; }
.rig__key { width: 10px; height: 1px; background: rgba(214,230,240,.7); }
.rig__key--fan { height: 7px; width: 7px; background: none; box-shadow: inset 0 0 0 1px rgba(214,230,240,.6); }
.rig__key--smoke { height: 5px; width: 5px; border-radius: 50%; background: #c9d6dc; opacity: .8; }
.rig__key--glass { height: 7px; width: 10px; background: rgba(27,38,34,.8); box-shadow: inset 0 0 0 1px rgba(214,230,240,.5); }
.rig__key--bv { height: 5px; width: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(191,163,90,.7); }
.rig__flow { position: absolute; right: 16px; top: 14px; font: 400 9.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(214,230,240,.45); pointer-events: none; }
.rig__stage:not(.is-live) .rig__legend, .rig__stage:not(.is-live) .rig__flow { display: none; }
.rig__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin-top: 14px; }
.rig__fig:not(.is-interactive) .rig__controls { display: none; }
.rig__controls button { min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--off-50); transition: color .5s var(--ease); }
.rig__controls button::before { content: ""; width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(214,230,240,.45); transition: background .6s var(--e-settle), box-shadow .8s var(--e-settle); }
.rig__controls button:hover, .rig__controls button[aria-pressed="true"] { color: var(--off); }
.rig__controls button[aria-pressed="true"]::before { background: var(--gold); box-shadow: 0 0 8px rgba(191,163,90,.8); }
.rig__controls button[data-rig="glass"] span { color: var(--off); }
.rig__controls button[data-rig="reset"] { margin-left: auto; }
.rig__controls button[data-rig="reset"]::before { display: none; }
.rig__range { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; font: 400 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--off-50); }
.rig__range input { -webkit-appearance: none; appearance: none; width: 110px; height: 20px; background: none; margin: 0; cursor: pointer; }
.rig__range input::-webkit-slider-runnable-track { height: 1px; background: rgba(214,230,240,.3); }
.rig__range input::-moz-range-track { height: 1px; background: rgba(214,230,240,.3); }
.rig__range input::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: #050505; box-shadow: inset 0 0 0 1px rgba(214,230,240,.8); }
.rig__range input::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: #050505; box-shadow: inset 0 0 0 1px rgba(214,230,240,.8); }
.rig__range input:focus-visible { outline: 1px solid var(--ice, #d6e6f0); outline-offset: 4px; }
.rig__fig .caption { margin-top: 10px; }
@media (max-width: 760px) {
  .rig__head { grid-template-columns: 1fr; }
  .rig__stage { aspect-ratio: 4 / 3; }
  .rig__legend { left: 12px; bottom: 10px; gap: 4px 12px; font-size: 8.5px; }
  .rig__flow { right: 12px; top: 10px; }
  .rig__controls { gap: 0 16px; margin-top: 6px; }
  .rig__controls button, .rig__range { min-height: 36px; }
  .rig__range { flex: 1 1 40%; }
  .rig__range input { flex: 1; width: auto; min-width: 0; }
}

/* ------------------------------------------------ layered system (js/system.js) */
.sys { margin: 0; align-self: center; }
.sys__stage { position: relative; aspect-ratio: 1 / 1; background: radial-gradient(70% 60% at 50% 48%, #0b100e 0%, #050505 72%); border: 1px solid rgba(214,230,240,.07); border-radius: 18px; overflow: hidden; }
.sys__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sys__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .9s var(--ease); }
.sys__stage.is-live .sys__poster { opacity: 0; pointer-events: none; }
.sys__stage:not(.is-live) canvas { visibility: hidden; }
.sys__legend { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.sys__legend li { padding-left: calc(var(--d) * 14px); border-top: 1px solid rgba(214,230,240,.07); }
.sys__legend li:last-child { border-bottom: 1px solid rgba(214,230,240,.07); }
.sys__legend button { width: 100%; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; gap: 12px; text-align: left; font: 400 10px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--off-50); transition: color .5s var(--ease); }
.sys__legend button::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(214,230,240,.4); transition: background .6s var(--e-settle), box-shadow .8s var(--e-settle); }
.sys__legend button:hover, .sys__legend button.is-lead, .sys__legend button:focus-visible { color: var(--off); }
.sys__legend button.is-lead::before { background: var(--ice); box-shadow: 0 0 8px rgba(214,230,240,.7); }
.sys__legend button[data-sys-layer="core"].is-lead::before { background: var(--gold); box-shadow: 0 0 8px rgba(191,163,90,.8); }
.sys__legend button[aria-pressed="true"] span { border-bottom: 1px solid rgba(214,230,240,.5); padding-bottom: 3px; }
.sys__legend button:focus-visible { outline: 1px solid var(--ice); outline-offset: 2px; }
.sys:not(.is-interactive) .sys__legend button { cursor: default; }
.sys__note { margin: 14px 0 0; min-height: 3.2em; max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--off-50); }
.sys .caption { margin-top: 10px; }
@media (min-width: 1001px) {
  .sys { display: grid; grid-template-columns: minmax(0, 1fr) 190px; grid-template-rows: 1fr auto; column-gap: 22px; }
  .sys__stage { grid-column: 1; grid-row: 1 / span 2; }
  .sys__legend { grid-column: 2; grid-row: 1; margin: 0; align-self: end; }
  .sys__note { grid-column: 2; grid-row: 2; font-size: 13px; height: 9.5em; min-height: 0; }
  .sys .caption { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .sys__stage { aspect-ratio: 4 / 5; }
}

/* ======================================================================
   Polish · the perimeter as nervous system
   The codex light takes the world's temperature (html[data-world], set by
   js/presence.js) and moves between states slowly. It never flashes.
     group     warm bone, a trace of gold
     astrodon  ice / mint
     caliber   a faint violet influence
     raeno     warm material, gold
   ====================================================================== */
@property --pr { syntax: "<number>"; inherits: true; initial-value: 232; }
@property --pg { syntax: "<number>"; inherits: true; initial-value: 224; }
@property --pb { syntax: "<number>"; inherits: true; initial-value: 204; }
html { --pr: 232; --pg: 224; --pb: 204; transition: --pr 2.4s var(--e-drift), --pg 2.4s var(--e-drift), --pb 2.4s var(--e-drift); }
html[data-world="astrodon"] { --pr: 178; --pg: 238; --pb: 220; }
html[data-world="caliber"]  { --pr: 200; --pg: 186; --pb: 240; }
html[data-world="raeno"]    { --pr: 228; --pg: 200; --pb: 150; }
.codex { --mint: var(--pr), var(--pg), var(--pb); }
/* the answer to a major interaction: one slow breath of light, then rest */
.codex.is-pulse .codex__c { animation-duration: 2.2s; }
.codex.is-pulse .codex__l { animation-duration: 2.2s; }

/* ------------------------------------------------ field notes (js/presence.js)
   Notes from inside the studio. Rare, small, never decorative: a mono label,
   one line, a hairline in the world's temperature. */
.fnote {
  position: fixed; z-index: 75; right: clamp(22px, 3.2vw, 46px); bottom: clamp(22px, 3.2vw, 46px);
  max-width: 30ch; padding: 0 0 0 14px; pointer-events: none;
  border-left: 1px solid rgba(var(--pr), var(--pg), var(--pb), .55);
  opacity: 0; transform: translateY(6px); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease);
}
.fnote.is-on { opacity: 1; transform: none; }
.fnote.is-off { opacity: 0; transition-duration: 1.8s; }
.fnote__label { display: block; margin-bottom: 6px; font: 400 9.5px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: rgba(var(--pr), var(--pg), var(--pb), .85); }
.fnote__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--off-72, rgba(246,244,238,.72)); }
@media (prefers-reduced-motion: reduce) { .fnote { transform: none; } }
@media (max-width: 760px) { .fnote { right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); max-width: 24ch; } .fnote__text { font-size: 13px; } }

/* ------------------------------------------------ the thread (world → world)
   The element that survives a crossing. The origin mark is created where the
   visitor clicked (js/main.js); it becomes the destination's hairline above
   the page title, which stays as a quiet residue. */
.vt-thread { display: block; width: 132px; height: 1px; margin: 0 0 22px; opacity: .5; view-transition-name: thread;
  background: linear-gradient(90deg, rgba(var(--pr), var(--pg), var(--pb), .95), rgba(var(--pr), var(--pg), var(--pb), 0)); }
.vt-thread--raeno { width: 180px; }
.vt-origin { position: fixed; z-index: 90; pointer-events: none; }
.vt-origin--astrodon { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: rgba(191,163,90,.95); box-shadow: 0 0 12px rgba(191,163,90,.7); }        /* an observation node */
.vt-origin--raeno { width: 1px; height: 26px; margin: -13px 0 0 0;
  background: linear-gradient(rgba(228,200,150,0), rgba(228,200,150,.95), rgba(228,200,150,0)); }   /* a seam */
::view-transition-group(thread) { animation-duration: .74s; animation-timing-function: cubic-bezier(.2,.7,.1,1); }
::view-transition-old(thread), ::view-transition-new(thread) { height: 100%; width: 100%; animation-duration: .74s; }

/* CALIBER: the path runs forward from the click and resolves */
.path-run { position: fixed; z-index: 90; height: 1px; width: 0; margin-top: -.5px; pointer-events: none;
  background: linear-gradient(90deg, rgba(200,186,240,0), rgba(160,120,250,.9) 70%, rgba(236,230,255,1));
  box-shadow: 0 0 10px rgba(119,33,250,.45); animation: path-run .78s cubic-bezier(.2,.7,.1,1) forwards; }
@keyframes path-run { 0% { width: 0; opacity: 1; } 70% { opacity: 1; } 100% { width: 100vw; opacity: 0; } }

/* ------------------------------------------------ sound control (js/sound.js) */
.nav__menu { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); }
.nav__sound { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--off-50); transition: color .5s var(--ease); }
.nav__sound i { width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(214,230,240,.45); transition: background .6s var(--e-settle), box-shadow .8s var(--e-settle); }
.nav__sound:hover, .nav__sound[aria-pressed="true"] { color: var(--off); }
.nav__sound[aria-pressed="true"] i { background: rgba(var(--pr), var(--pg), var(--pb), .9); box-shadow: 0 0 6px rgba(var(--pr), var(--pg), var(--pb), .6); }
.nav__sound:focus-visible { outline: 1px solid var(--ice); outline-offset: 4px; }
@media (max-width: 760px) {
  .nav__menu { flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 34px; }
  .nav__sound { font-size: 11px; }
}

/* ------------------------------------------------ stillness (js/presence.js)
   Each scene answers observation in its own way. Faint, slow, no motion
   beyond a fade. .was-still keeps the smallest trace afterwards. */
.arrival.is-still .arrival__whisper span { opacity: .42; transition: opacity 2.6s var(--ease); }
.arrival.is-still .arrival__whisper span:nth-child(2) { transition-delay: .6s; }
.arrival.is-still .arrival__whisper span:nth-child(3) { transition-delay: 1.2s; }
.arrival .arrival__whisper span { transition: opacity 1.2s var(--ease); }
.arrival.is-still .arrival__bloom { opacity: 1; }
.sheets.is-still .sheet--1 .sheet__hover { opacity: .8; transform: none; }
.sheets.is-still .sheet--1 .sheet__paper { box-shadow: 0 0 0 1px rgba(var(--pr), var(--pg), var(--pb), .35); transition: box-shadow 1.6s var(--ease); }
.rig.is-still .rig__flow { color: rgba(191,163,90,.8); transition: color 1.6s var(--ease); }

/* ------------------------------------------------ residue: explored worlds */
.nav__menu a[data-section]::before { content: ""; position: absolute; right: -9px; top: 6px; width: 3px; height: 3px; border-radius: 50%; background: transparent; transition: background 1.6s var(--ease); }
html[data-mem-astrodon] .nav__menu a[data-section="astrodon"]::before { background: rgba(178,238,220,.7); }
html[data-mem-caliber] .nav__menu a[data-section="caliber"]::before { background: rgba(200,186,240,.7); }
html[data-mem-raeno] .nav__menu a[data-section="raeno"]::before { background: rgba(228,200,150,.7); }
@media (max-width: 760px) { .nav__menu a[data-section]::before { right: -14px; top: 18px; width: 4px; height: 4px; } }

/* ======================================================================
   RÆNO · astral haze
   RÆNO's own environment (this page only). Four layers, each tunable:
     A  base atmosphere   .haze: two slow smoke fields, pearl, screen-blended
     B  local bloom       soft pearl light behind the hero garment, the
                          studies and the logo
     C  hovering panels   text and notes float as light glass inside the haze
     D  inspection light  the garment studies (js/spotlight.js) + a lamp over
                          the hero figure (js/raeno-atmos.js)
   Black / charcoal is the ground, white haze the atmosphere, gold the accent.
   Motion is a drift you only notice by looking away and back.
   ====================================================================== */
body[data-page="raeno"] { --pearl: 238, 236, 230; --bone: 232, 222, 200; background: #060606; }
body[data-page="raeno"] main, body[data-page="raeno"] .closing { position: relative; z-index: 1; }

/* A · base atmosphere */
.haze { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.haze i { position: absolute; display: block; width: 125vmax; height: 125vmax; left: 50%; top: 50%;
  background-size: 100% 100%; background-repeat: no-repeat; will-change: transform; }   /* on near-black, plain alpha reads as screen, at a fraction of the cost */
.haze__a { background-image: url("../media/raeno/haze/haze-1.webp"); opacity: .22;
  translate: -58% -46%; animation: haze-a 140s ease-in-out infinite alternate; }
.haze__b { background-image: url("../media/raeno/haze/haze-2.webp"); opacity: .15;
  translate: -40% -62%; rotate: 160deg; animation: haze-b 190s ease-in-out infinite alternate; }
@keyframes haze-a { from { transform: translate3d(-3%, 1.5%, 0) scale(1); } to { transform: translate3d(3.5%, -2%, 0) scale(1.06); } }
@keyframes haze-b { from { transform: translate3d(2.5%, -1%, 0) scale(1.04); } to { transform: translate3d(-3%, 2.5%, 0) scale(1); } }
/* a pearl wash low in the frame and a darker crown, so the haze has a direction */
.haze::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 70% at 50% 110%, rgba(var(--pearl), .07), transparent 60%),
              radial-gradient(90% 60% at 50% -10%, rgba(0,0,0,.5), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .haze i { animation: none; } }

/* B · local bloom */
.raeno-bloom, .page-hero--raeno .page-hero__scene, .page-hero--raeno .page-hero__text, body[data-page="raeno"] .spot { position: relative; }
.page-hero--raeno .page-hero__scene::before, body[data-page="raeno"] .spot::before {
  content: ""; position: absolute; inset: -12% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--pearl), .085), rgba(var(--pearl), .03) 55%, transparent 78%);
  filter: blur(8px); transition: opacity 1.2s var(--ease); }
body[data-page="raeno"] .spot::before { inset: -8% -6%; opacity: .8; }
body[data-page="raeno"] .spot:hover::before, body[data-page="raeno"] .spot.is-locked::before { opacity: 1; }
/* the studies sit in the atmosphere, not as rectangles: their edges sink into black and mist */
body[data-page="raeno"] .spot__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 60px 24px rgba(6,6,6,.92), inset 0 0 140px 40px rgba(6,6,6,.4); }
/* a veil of the same haze over each study, parted by the light */
body[data-page="raeno"] .spot__drift::after { content: ""; position: absolute; inset: -10%; pointer-events: none;
  background: url("../media/raeno/haze/haze-2.webp") center / cover; mix-blend-mode: screen; opacity: .13;
  -webkit-mask-image: radial-gradient(calc(var(--rx, 170px) * 1.5) calc(var(--rx, 170px) * 1.3) at var(--x, 50%) var(--y, 50%), rgba(0,0,0,calc(1 - var(--i, 0))) 0%, rgba(0,0,0,calc(1 - var(--i, 0) * .6)) 45%, #000 100%);
          mask-image: radial-gradient(calc(var(--rx, 170px) * 1.5) calc(var(--rx, 170px) * 1.3) at var(--x, 50%) var(--y, 50%), rgba(0,0,0,calc(1 - var(--i, 0))) 0%, rgba(0,0,0,calc(1 - var(--i, 0) * .6)) 45%, #000 100%); }
/* a soft specular sheen where the light falls: leather, stitching, hardware and mesh catch it */
body[data-page="raeno"] .spot__drift::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(calc(var(--rx, 170px) * .5) calc(var(--rx, 170px) * .38) at var(--x, 50%) var(--y, 50%), rgba(var(--pearl), calc(var(--i, 0) * .08)), transparent 75%); }

/* the logo: clean gold cut-out, no halo or backlight behind it */
.raeno-mark { margin: 0; line-height: 0; }
.raeno-mark img { display: block; width: min(560px, 100%); height: auto; }
.page-hero--raeno .raeno-mark { position: relative; font-size: 0; }
.raeno-wordmark { line-height: 0; }
.raeno-wordmark img { display: block; width: min(380px, 70vw); height: auto; }
@media (max-width: 760px) { .raeno-mark img { width: min(340px, 86vw); } }

/* C · hovering panels: light glass inside the haze */
body[data-page="raeno"] .inspect__text,
body[data-page="raeno"] .principle,
body[data-page="raeno"] .pairing__inner {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, rgba(18,18,17,.62), rgba(12,12,12,.5)), linear-gradient(180deg, rgba(var(--pearl), .05), rgba(var(--pearl), .015));
  border: 1px solid rgba(var(--pearl), .1); border-top-color: rgba(var(--pearl), .16); border-radius: 3px;
  /* no backdrop blur: the haze behind is already soft, and blurring a moving field every frame is costly */
  box-shadow: 0 28px 60px -34px rgba(0,0,0,.9), 0 0 50px -28px rgba(var(--pearl), .16);
  transition: transform 1s var(--e-settle), border-color 1s var(--ease), box-shadow 1s var(--ease);
}
body[data-page="raeno"] .inspect__text { padding: clamp(22px, 2.4vw, 34px); align-self: center; }
body[data-page="raeno"] .principle { padding: 4px 22px 22px; }
body[data-page="raeno"] .pairing__inner { padding: clamp(28px, 4vw, 56px); }
/* the haze behind a panel blooms when it is approached */
body[data-page="raeno"] .inspect__text::before,
body[data-page="raeno"] .principle::before,
body[data-page="raeno"] .pairing__inner::before {
  content: ""; position: absolute; inset: -18%; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side at var(--hx, 50%) var(--hy, 50%), rgba(var(--pearl), .1), transparent 75%);
  transition: opacity 1.2s var(--ease); }
@media (hover: hover) {
  body[data-page="raeno"] .inspect__text:hover, body[data-page="raeno"] .principle:hover, body[data-page="raeno"] .pairing__inner:hover,
  body[data-page="raeno"] .inspect__moment:has(.spot:hover) .inspect__text, body[data-page="raeno"] .inspect__moment:has(.spot.is-locked) .inspect__text {
    transform: translateY(-3px); border-color: rgba(var(--pearl), .18); border-top-color: rgba(var(--pearl), .28);
    box-shadow: 0 34px 70px -34px rgba(0,0,0,.95), 0 0 60px -24px rgba(var(--pearl), .24); }
  body[data-page="raeno"] .inspect__text:hover::before, body[data-page="raeno"] .principle:hover::before, body[data-page="raeno"] .pairing__inner:hover::before,
  body[data-page="raeno"] .inspect__moment:has(.spot:hover) .inspect__text::before { opacity: 1; }
}
body[data-page="raeno"] .principle { border-top: 1px solid rgba(var(--pearl), .16); }
/* annotations on the studies: small glass notes */
body[data-page="raeno"] .spot__note { padding: 10px 12px; border: 1px solid rgba(var(--pearl), .14); border-radius: 2px;
  background: rgba(10,10,10,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 36px -18px rgba(var(--pearl), .3); }
@media (prefers-reduced-motion: reduce) { body[data-page="raeno"] .inspect__text, body[data-page="raeno"] .principle, body[data-page="raeno"] .pairing__inner { transition: none; transform: none !important; } }

/* D · the lamp over the hero figure: silhouette first, detail where the light is */
.figure--page .figure__stage { position: relative; }
.figure--page .figure__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(34% 30% at var(--lx, 62%) var(--ly, 42%), rgba(var(--pearl), calc(var(--li, .35) * .1)), transparent 60%),
              radial-gradient(60% 55% at var(--lx, 62%) var(--ly, 42%), transparent 30%, rgba(6,6,6, calc(.18 + var(--li, .35) * .3)) 80%);
  mix-blend-mode: normal; transition: opacity 1s var(--ease); }

/* close: the haze settles into a pearl fade */
body[data-page="raeno"] .closing::before { content: ""; position: absolute; inset: -30% 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 60%, rgba(var(--pearl), .06), transparent 70%); }

/* the hero sits in the haze too: charcoal ground, the figure's rectangle dissolved */
body[data-page="raeno"] .page-hero--raeno { background: radial-gradient(80% 70% at 62% 45%, rgba(20,20,19,.55), transparent 70%); }
body[data-page="raeno"] .figure--page .figure__img { filter: saturate(.55) brightness(.96); }
body[data-page="raeno"] .figure--page .figure__stage {
  -webkit-mask-image: radial-gradient(72% 68% at 52% 44%, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%);
          mask-image: radial-gradient(72% 68% at 52% 44%, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%); }
/* D · the inspection light, feathered: an editorial lamp, not a lens */
body[data-page="raeno"] .spot__stage { --rx: clamp(130px, 17vw, 250px); }
body[data-page="raeno"].js .spot__base, .js body[data-page="raeno"] .spot__base { filter: brightness(.42) contrast(1.08) saturate(.7); }
body[data-page="raeno"] .spot__detail {
  -webkit-mask-image: radial-gradient(calc(var(--rx) * 1.3) calc(var(--ry) * 1.3) at var(--x) var(--y), rgba(0,0,0,var(--i)) 0%, rgba(0,0,0,calc(var(--i) * .86)) 18%, rgba(0,0,0,calc(var(--i) * .6)) 36%, rgba(0,0,0,calc(var(--i) * .34)) 54%, rgba(0,0,0,calc(var(--i) * .14)) 72%, rgba(0,0,0,calc(var(--i) * .04)) 88%, transparent 100%);
          mask-image: radial-gradient(calc(var(--rx) * 1.3) calc(var(--ry) * 1.3) at var(--x) var(--y), rgba(0,0,0,var(--i)) 0%, rgba(0,0,0,calc(var(--i) * .86)) 18%, rgba(0,0,0,calc(var(--i) * .6)) 36%, rgba(0,0,0,calc(var(--i) * .34)) 54%, rgba(0,0,0,calc(var(--i) * .14)) 72%, rgba(0,0,0,calc(var(--i) * .04)) 88%, transparent 100%); }
/* the blooms may reach past a section's edge; the page never scrolls sideways */
body[data-page="raeno"] main, body[data-page="raeno"] .closing { overflow-x: clip; }
body[data-page="raeno"] .pairing__inner { max-width: 980px; margin-inline: auto; }

/* ------------------------------------------------ ASTRŒDON · the living sky
   night-sky video → dark atmospheric veil → constellations (blended) → title.
   The video is the environment; the canvas is screened into it, not laid on
   top; the constellation field drifts at the video's own rate (data-drift). */
.constellation--sky { background: #040505; overflow: hidden; }
.constellation--sky .sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  filter: saturate(.5) brightness(.82) contrast(1.06); }
.constellation--sky .sky__veil { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 28% 72%, rgba(4,5,5,.64), rgba(4,5,5,.3) 55%, rgba(4,5,5,.44) 100%),
              linear-gradient(to top, rgba(5,5,5,.85), rgba(5,5,5,0) 38%); }
.constellation--sky canvas { mix-blend-mode: screen; opacity: .92; }
@media (prefers-reduced-motion: reduce) { .constellation--sky .sky { display: none; } .constellation--sky { background: #040505 url("../media/astrodon/sky/night-sky-poster.webp") center / cover; } }

/* ------------------------------------------------ CALIBER · possibility field
   purple motion footage → graphite veil → calibration routes (js/caliber.js)
   → CALIBER mark and type → the door. The footage carries the colour; the
   veil only darkens it, towards the text side. */
.world--caliber { background: #07060A; }
.caliber-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.caliber-field__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.92) contrast(1.05); }
.caliber-field__veil { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,8,10,.9) 0%, rgba(8,8,10,.74) 32%, rgba(8,8,10,.42) 66%, rgba(8,8,10,.5) 100%),
              linear-gradient(to bottom, #07060A 0, rgba(7,6,10,0) 16%, rgba(7,6,10,0) 84%, #07060A 100%); }
.world--caliber .world__scene { z-index: 1; pointer-events: none; cursor: auto; }
.world--caliber .world__text { position: relative; z-index: 2; }
.world--caliber .caliber, .world--caliber.is-near .caliber { box-shadow: none; }
/* the phrase resolves after the path does (only when the sequence runs) */
.motion .world--caliber.cal-seq [data-cal-reveal] { opacity: 0; transform: translateY(6px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
.motion .world--caliber.cal-seq.is-cal-1 [data-cal-reveal="1"], .motion .world--caliber.cal-seq.is-cal-2 [data-cal-reveal="2"] { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .caliber-field__veil { background: linear-gradient(to bottom, #07060A 0, rgba(8,8,10,.45) 14%, rgba(8,8,10,.55) 50%, rgba(8,8,10,.88) 78%, #07060A 100%); }
}
@media (prefers-reduced-motion: reduce) { .caliber-field__video { display: none; } .caliber-field { background: url("../media/caliber/motion/caliber-motion-poster.webp") center / cover; } .caliber-field::after { content: ""; position: absolute; inset: 0; background: rgba(8,8,10,.55); } }

/* ------------------------------------------------ RÆNO · the floating figure
   The person study is a cut-out (media/raeno/figure-cutout.*): no backdrop,
   no box. It floats in the page's own dark, lifted by a faint pearl rim and a
   haze pooling beneath it; the crop at the waist dissolves downward. */
.figure__stage { position: relative; }
.figure__img, body[data-page="raeno"] .figure--page .figure__stage {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgba(0,0,0,.5) 82%, transparent 98%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 64%, rgba(0,0,0,.5) 82%, transparent 98%);
  -webkit-mask-composite: source-over; mask-composite: add; }
.figure__img { filter: brightness(.94) drop-shadow(0 0 1px rgba(238,236,230,.22)) drop-shadow(0 0 22px rgba(238,236,230,.06)); }
.world.is-near .figure__img { filter: brightness(1) drop-shadow(0 0 1px rgba(238,236,230,.26)) drop-shadow(0 0 26px rgba(238,236,230,.08)); }
body[data-page="raeno"] .figure--page .figure__img { filter: saturate(.55) brightness(.96) drop-shadow(0 0 1px rgba(238,236,230,.22)) drop-shadow(0 0 24px rgba(238,236,230,.07)); }
/* the haze it floats in: behind the shoulders, pooling below */
.figure__stage::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 8%; right: 8%; top: 6%; bottom: -4%;
  background: radial-gradient(46% 38% at 50% 34%, rgba(238,236,230,.055), transparent 72%),
              radial-gradient(60% 18% at 50% 88%, rgba(238,236,230,.07), transparent 74%);
  filter: blur(6px); }
.world--raeno .figure__stage, .figure--page .figure__stage { isolation: isolate; }
.motion .figure__img { animation: figure-float 11s ease-in-out infinite alternate; }
@keyframes figure-float { from { translate: 0 0; } to { translate: 0 -5px; } }
@media (prefers-reduced-motion: reduce) { .figure__img { animation: none !important; } }

/* ------------------------------------------------ RÆNO · aura behind open panels
   js/raeno-aura.js places an .aura behind the panel that opens.
   foreground: panel + text · midground: outline and hover bloom · background: this.
   z-index -1 inside <main>: it always paints under the panels, never over text. */
.aura { position: absolute; z-index: -1; pointer-events: none; opacity: 0; --aura: 1; --px: 0; --py: 0;
  transition: opacity 3s cubic-bezier(.3, 0, .2, 1);          /* out: it lingers */
  /* feathered on every side; the panel's centre kept mostly clear for the words */
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0,0,0,.5) 76%, transparent 100%),
                      radial-gradient(calc(var(--cw, 30%) * 1.02) calc(var(--ch, 30%) * 1.05) at 50% 50%, rgba(0,0,0,.34) 55%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(closest-side, #000 52%, rgba(0,0,0,.5) 76%, transparent 100%),
                      radial-gradient(calc(var(--cw, 30%) * 1.02) calc(var(--ch, 30%) * 1.05) at 50% 50%, rgba(0,0,0,.34) 55%, #000 100%);
          mask-composite: intersect; }
.aura.is-on { opacity: var(--aura); transition-duration: 1.8s; }   /* in: a slow gathering */
.aura > * { position: absolute; display: block; }
.aura__far, .aura__near { inset: -14%; background-repeat: no-repeat; background-size: cover; background-position: center; will-change: transform; }
.aura__far { filter: blur(16px); } .aura__near { filter: blur(9px); }   /* vapour, not cloud */
.aura__far  { background-image: url("../media/raeno/haze/haze-2.webp"); opacity: .34;
  translate: calc(var(--px) * -10px) calc(var(--py) * -8px); animation: aura-far 46s ease-in-out infinite alternate; }
.aura__near { background-image: url("../media/raeno/haze/haze-1.webp"); opacity: .3; rotate: 180deg;
  translate: calc(var(--px) * -26px) calc(var(--py) * -20px); animation: aura-near 34s ease-in-out infinite alternate; }
.aura__dust { inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: .34;
  filter: brightness(.86) contrast(1.05); translate: calc(var(--px) * -14px) calc(var(--py) * -10px); }
.aura__glow { inset: 12%; background: radial-gradient(closest-side, rgba(238,236,230,.07), transparent 80%); filter: blur(10px); }
@keyframes aura-far  { from { transform: translate3d(-2.5%, 1.5%, 0) scale(1.02); } to { transform: translate3d(2.5%, -2%, 0) scale(1.08); } }
@keyframes aura-near { from { transform: translate3d(3%, -1%, 0) scale(1.06); } to { transform: translate3d(-3%, 2%, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .aura__far, .aura__near { animation: none; } .aura, .aura.is-on { transition-duration: .6s; } }
/* principles become click-open panels once the aura is there to meet them */
body[data-page="raeno"] .principle summary::after { content: "+"; float: right; color: rgba(var(--bone), .7); transition: transform .5s var(--ease); }
body[data-page="raeno"] .principle[open] summary::after { transform: rotate(45deg); }
body[data-page="raeno"] .principle[open] { border-color: rgba(var(--pearl), .18); border-top-color: rgba(var(--pearl), .28); }
body[data-page="raeno"] .principles__list { align-items: start; }
/* each RÆNO section is its own stacking context, so an aura (z-index -1) sits over the section's ground, under its content */
body[data-page="raeno"] main > * { position: relative; isolation: isolate; }

/* ------------------------------------------------ RÆNO · the living environment (front page)
   full-bleed astral haze video (media/raeno/flame) → green-black veil → figure, callouts, logo, CTA.
   One atmosphere for the whole section: the footage is slowed and dimmed, and the veil keeps the
   refined green-black field and a calmer zone where the wordmark and copy sit. */
.raeno-field { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.raeno-field__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.46) saturate(.8) contrast(1.02); }
.raeno-field__veil { position: absolute; inset: 0; display: block;
  background:
    radial-gradient(36% 50% at 76% 50%, rgba(10,13,6,.62), transparent 80%),            /* a calmer ground under the wordmark + copy */
    linear-gradient(165deg, rgba(27,34,15,.7) 0%, rgba(23,30,11,.62) 48%, rgba(11,14,6,.8) 100%),   /* the green-black field */
    linear-gradient(to bottom, rgba(5,5,5,.55), transparent 16%, transparent 84%, rgba(5,5,5,.6)); }  /* seams to the neighbouring worlds */
@media (max-width: 760px) {
  .raeno-field__veil { background:
    linear-gradient(to bottom, rgba(5,5,5,.5), transparent 14%, transparent 44%, rgba(10,13,6,.62) 66%, rgba(5,5,5,.72)),   /* text stacks below the figure */
    linear-gradient(165deg, rgba(27,34,15,.66), rgba(23,30,11,.6) 50%, rgba(11,14,6,.8)); }
}
.world--raeno .figure__img { position: relative; z-index: 1;
  filter: brightness(.94) drop-shadow(0 0 1px rgba(236,196,128,.24)) drop-shadow(0 0 24px rgba(214,160,80,.1)); }
.world--raeno.is-near .figure__img { filter: brightness(1) drop-shadow(0 0 1px rgba(236,196,128,.3)) drop-shadow(0 0 28px rgba(214,160,80,.13)); }
/* the light wraps slightly in front: a warm rise where the figure dissolves at the waist */
.world--raeno .figure__stage::after { content: ""; position: absolute; z-index: 2; left: 4%; right: 4%; bottom: -6%; height: 40%; pointer-events: none;
  background: radial-gradient(closest-side at 50% 62%, rgba(214,160,80,.12), rgba(214,160,80,.04) 60%, transparent 100%); mix-blend-mode: screen; }
.motion .world--raeno .figure__stage::after { animation: flame-breathe 9s ease-in-out infinite alternate; }
@keyframes flame-breathe { from { opacity: .7; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .world--raeno .figure__stage::after { animation: none; } }

/* ==========================================================================
   MISSION — one directory page for a serious reader (mission.html)
   Huge type, black space, hairlines; very few boxes; information first.
   ========================================================================== */
.mission { background: var(--black); }
.m-kicker, .m-num { font: 500 11px/1.4 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--off-50); }
.m-num { margin-bottom: 22px; }
.m-num--center { text-align: center; }
.m-h { font-weight: 300; text-transform: uppercase; letter-spacing: -.02em; line-height: .96; font-size: clamp(2.2rem, 5.2vw, 5.6rem); max-width: 13ch; }
.m-h--sm { font-size: clamp(1.9rem, 3.8vw, 3.8rem); max-width: 18ch; }
.m-h--wide { max-width: 16ch; }
.m-body { color: var(--off-72); font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.6; max-width: 46ch; margin-top: 28px; }
.m-sec { position: relative; padding-block: clamp(84px, 11vw, 170px); border-top: 1px solid var(--line); }
.m-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.m-split--low { margin-top: clamp(40px, 5vw, 72px); align-items: end; }
.m-split--low .m-body { margin-top: 0; }

/* 01 opening */
.m-open { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: clip; padding-block: 120px 80px; }
.m-open__orbit { position: absolute; inset: 0; pointer-events: none; }
.m-open__orbit svg { width: 100%; height: 100%; }
.m-open__orbit ellipse { fill: none; stroke: rgba(214,230,240,.1); stroke-width: 1; }
.m-open__orbit ellipse + ellipse { stroke: rgba(214,230,240,.06); }
.m-open__active { fill: none; stroke: #7721FA; stroke-width: 1.2; opacity: .55; stroke-dasharray: 2400; stroke-dashoffset: 0; }
.motion .m-open__active { animation: m-draw 5.5s var(--ease) .6s both; }
@keyframes m-draw { from { stroke-dashoffset: 2400; } }
.m-open__inner { position: relative; }
.m-open__title { margin-top: 26px; font-weight: 300; text-transform: uppercase; letter-spacing: -.025em; line-height: .92; font-size: clamp(2.8rem, 8.4vw, 9.4rem); max-width: 12ch; }
.m-open__copy { display: grid; grid-template-columns: repeat(2, minmax(0, 34ch)); gap: clamp(20px, 4vw, 64px); margin-top: clamp(36px, 5vw, 64px); color: var(--off-72); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; }
.m-doctrine { margin-top: clamp(40px, 6vw, 80px); font: 400 clamp(.9rem, 1.1vw, 1.05rem)/1 var(--mono); letter-spacing: .42em; text-transform: uppercase; color: var(--off); }
.m-doctrine span + span { margin-left: .6em; }

/* 02 structure: a hierarchy you read at a glance */
.m-tree { margin: 0; padding-top: 10px; }
.m-tree__root { display: flex; align-items: baseline; gap: 18px; margin: 0; padding-bottom: 22px; }
.m-tree__root img { width: clamp(170px, 18vw, 260px); height: auto; display: block; }
.m-tree__root span, .m-tree__tag { font: 500 10px/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--off-50); }
.m-tree__branches { list-style: none; margin: 0 0 0 10px; padding: 0 0 0 28px; border-left: 1px solid var(--line-strong); }
.m-tree__branches > li { position: relative; padding: 18px 0; }
.m-tree__branches > li::before { content: ""; position: absolute; left: -28px; top: 34px; width: 20px; height: 1px; background: var(--line-strong); }
.m-tree__branches a { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 18px; align-items: baseline; color: var(--off); }
.m-tree__branches b { font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.9rem); letter-spacing: .08em; transition: color .5s var(--ease); }
.m-tree__branches a span { font: 400 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--off-72); }
.m-tree__branches a:hover b, .m-tree__branches a:focus-visible b { color: var(--gold); }
.m-tree__programs { list-style: none; margin: 12px 0 0 12px; padding: 0 0 0 22px; border-left: 1px solid var(--line); }
.m-tree__programs li { position: relative; padding: 6px 0; color: var(--ice); font-size: 1rem; }
.m-tree__programs li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 14px; height: 1px; background: var(--line); }
.m-tree__tag { margin-right: 10px; }

/* 03 portfolio: three columns, hairlines, no cards */
.m-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: clamp(44px, 5vw, 76px); }
.m-col { border-top: 1px solid var(--line-strong); padding-top: 24px; color: var(--off-72); line-height: 1.6; }
.m-col h3 { font-weight: 400; font-size: clamp(1.4rem, 2vw, 1.9rem); letter-spacing: .08em; color: var(--off); }
.m-col__kind { margin: 6px 0 18px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--off-50); }
.m-col--astrodon { border-top-color: rgba(166,244,211,.35); }
.m-col--raeno { border-top-color: rgba(191,163,90,.45); }
.m-col--caliber { border-top-color: rgba(119,33,250,.6); }
.m-program { margin-top: 22px; padding: 18px 0 0 18px; border-left: 1px solid var(--line); }
.m-program__name { color: var(--off); font-size: 1.05rem; }
.m-program__name span { display: block; font: 500 10px/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--off-50); margin-bottom: 4px; }
.m-program p + p { margin-top: 10px; }
.m-status { display: inline-block; margin-top: 16px !important; padding: 7px 10px; border: 1px solid var(--line-strong); font: 500 10px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ice); }
.m-col__note { margin-top: 16px; color: var(--off); }
.m-col__line { margin-top: 18px; font: 400 11px/1.8 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--off); }
.m-col__line span { display: block; }

/* 04 the progression: one horizontal line, six stations */
.m-path { list-style: none; margin: clamp(48px, 6vw, 96px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; counter-reset: st; }
.m-path::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line-strong); }
.m-path::after { content: ""; position: absolute; left: 0; top: 7px; height: 1px; width: 100%; background: linear-gradient(90deg, transparent, var(--ice) 45%, transparent); background-size: 22% 100%; background-repeat: no-repeat; opacity: .7; }
.motion .m-path::after { animation: m-run 9s linear infinite; }
@keyframes m-run { from { background-position: -30% 0; } to { background-position: 130% 0; } }
.m-path li { position: relative; padding-top: 34px; counter-increment: st; font-weight: 300; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1rem, 1.9vw, 1.9rem); }
.m-path li::before { content: ""; position: absolute; left: 0; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--black); border: 1px solid var(--ice); }
.m-path li::after { content: "0" counter(st); position: absolute; left: 0; top: -22px; font: 500 10px/1 var(--mono); letter-spacing: .2em; color: var(--off-50); }
.m-path li:last-child::before { background: var(--gold); border-color: var(--gold); }
.m-pairs, .m-roles { list-style: none; margin: 0; padding: 0; }
.m-pairs li, .m-roles li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--off-72); font-size: clamp(1rem, 1.3vw, 1.2rem); }
.m-pairs b, .m-roles b { font-weight: 400; color: var(--off); }
.m-roles b { letter-spacing: .06em; }

/* 06 stage: three factual lines */
.m-status-list { margin: clamp(40px, 5vw, 72px) 0 0; }
.m-status-list > div { display: grid; grid-template-columns: minmax(200px, .8fr) 2fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--line); align-items: baseline; }
.m-status-list > div:last-child { border-bottom: 1px solid var(--line); }
.m-status-list dt { font: 500 11px/1.5 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--off); }
.m-status-list dt::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 12px; vertical-align: 1px; background: var(--gold); opacity: .85; }
.m-status-list dd { margin: 0; color: var(--off-72); font-size: clamp(1rem, 1.3vw, 1.2rem); }

/* 07 thesis: the Earth, with one paragraph of intent */
.m-thesis { border-top: 1px solid var(--line); }
.m-thesis__copy { max-width: 58ch; margin: 28px auto 0; color: var(--off-72); line-height: 1.65; font-size: clamp(.98rem, 1.15vw, 1.1rem); }

/* 08 close: two clear paths, no fundraising banner */
.m-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 56px; margin-top: clamp(44px, 6vw, 80px); }
.m-action { padding: 14px 2px; font: 500 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--off);
  background: linear-gradient(var(--off), var(--off)) 0 100% / 100% 1px no-repeat; transition: color .5s var(--ease), background-size .9s var(--ease); }
.m-action i { font-style: normal; margin-left: .6em; transition: margin .5s var(--ease); }
.m-action:hover i, .m-action:focus-visible i { margin-left: 1em; }
.m-action.is-pending { color: var(--off-50); cursor: default; background-size: 0 1px; }

@media (max-width: 900px) {
  .m-split, .m-cols { grid-template-columns: 1fr; }
  .m-open__copy { grid-template-columns: 1fr; }
  .m-path { grid-template-columns: 1fr; row-gap: 0; }
  .m-path::before, .m-path::after { left: 4px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .m-path::after { background: linear-gradient(180deg, transparent, var(--ice) 45%, transparent); background-size: 100% 22%; }
  @keyframes m-run { from { background-position: 0 -30%; } to { background-position: 0 130%; } }
  .m-path li { padding: 14px 0 14px 34px; }
  .m-path li::before { top: 50%; margin-top: -5px; }
  .m-path li::after { left: auto; right: 0; top: 50%; margin-top: -5px; }
  .m-status-list > div { grid-template-columns: 1fr; gap: 8px; }
  .m-tree__branches a { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) { .m-path::after { animation: none; opacity: 0; } .m-open__active { animation: none; } }
/* the thesis reads above the planet, not across its limb; the scene sinks into the close */
.m-thesis .expedition__text { padding-top: clamp(64px, 7vw, 112px); }
.m-thesis .expedition__title { font-size: clamp(2.2rem, 5.6vw, 6rem); }
.m-thesis__copy { text-align: center; text-shadow: 0 0 18px rgba(5,5,5,.9); }
.m-thesis::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, transparent, var(--black)); }

/* the descriptor under the doctrine: a signature line, not body text.
   Cormorant Garamond (OFL, media/fonts) italic, Title Case, soft champagne, flanked by hairlines. */
@font-face { font-family: "Cormorant Garamond"; src: url("../media/fonts/cormorant-garamond-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
.arrival__line { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(18px, 2vw, 28px);
  font-family: "Cormorant Garamond", "Cormorant", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-style: italic; font-weight: 500; font-size: clamp(1.12rem, 1.55vw, 1.5rem); letter-spacing: .035em; line-height: 1.2;
  color: #D9C79C; }
.arrival__line span { background: linear-gradient(100deg, #cdb682 0%, #efe3c4 48%, #cdb682 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: none; }
.arrival__line::before, .arrival__line::after { content: ""; width: clamp(28px, 4vw, 56px); height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, rgba(217,199,156,.55)); }
.arrival__line::after { transform: scaleX(-1); }
@media (max-width: 560px) { .arrival__line { font-size: 1.08rem; text-align: center; } .arrival__line::before, .arrival__line::after { display: none; } }

/* ==========================================================================
   MOBILE PASS · global + homepage  (desktop unchanged: everything here is
   inside max-width / pointer: coarse queries)
   ========================================================================== */
@media (max-width: 760px) {
  /* nav: the mark and the toggle are real 44 px targets */
  .nav__mark { display: inline-flex; align-items: center; min-height: 44px; }
  /* the directory: an instrument index, not a generic hamburger list */
  .nav__menu { padding: calc(var(--codex-top) + 84px) calc(var(--gutter) + 6px) calc(var(--cb) + 9vh); justify-content: flex-end;
    background: radial-gradient(120% 60% at 0% 100%, rgba(214,230,240,.05), transparent 60%), var(--black); }
  .nav__menu ul { counter-reset: dir; width: 100%; gap: 0; }
  .nav__menu li { counter-increment: dir; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 16px; }
  .nav__menu li::before { content: "0" counter(dir); font: 400 10px/1 var(--mono); letter-spacing: .2em; color: var(--off-50); flex: none; width: 22px; }
  .nav__menu li:has(a[aria-current])::before { color: var(--gold); }
  .nav__menu li:last-child { border-bottom: 1px solid var(--line); }
  .nav__menu a { position: relative; display: flex; align-items: center; flex: 1; min-height: 56px; padding: 10px 0; font-size: clamp(1.9rem, 9.4vw, 3rem); }
  .nav__sound { min-height: 44px; padding: 0 14px 0 0; font-size: 11px; letter-spacing: .2em; }
  .nav__sound i { width: 7px; height: 7px; }

  /* type floors: statements stay large, reading copy stays readable */
  .arrival__whisper { font-size: 9.5px; letter-spacing: .26em; padding-inline: 18px; }
  .world__small { font-size: 13px; letter-spacing: .1em; line-height: 1.6; max-width: 34ch; }
  .observation__bridge { font-size: 16px; }
  .callout__line { font-size: 15px; }
  .world__cta, .closing__link { min-height: 44px; display: inline-flex; align-items: center; }

  /* CALIBER: the tagline is legible at once; the route resolves above it */
  .motion .world--caliber.cal-seq [data-cal-reveal="1"] { opacity: 1; transform: none; }
  .world--caliber .caliber { height: 42svh; }

  /* RÆNO: the figure stays dominant but leaves the logo its own moment */
  .world--raeno { row-gap: 6px; }
  .world--raeno { padding-block: 70px 40px; }
  .world--raeno .figure__stage { width: min(76%, 33svh); margin-inline: auto; }
  .world--raeno .figure__labels { row-gap: 10px; }
  .world--raeno .world__text { padding-top: 0; }
  .world--raeno .world__kind { margin-bottom: 6px; }
  .world--raeno .raeno-wordmark img { width: min(250px, 64vw); }
  .world--raeno .world__cta { margin-top: 4px; }
}
@media (max-width: 360px) {
  .arrival__whisper { display: none; }            /* at 320 the whisper would touch the frame */
  .arrival__doctrine { font-size: .92rem; letter-spacing: .16em; }   /* one line, no orphaned word */
  .arrival__line { font-size: 1rem; letter-spacing: .01em; }
  .world__title { font-size: clamp(2rem, 11vw, 2.6rem); }
}
/* phone landscape: short viewport — nothing needs a full 100svh */
@media (max-height: 500px) and (orientation: landscape) {
  .world { min-height: auto; padding-block: 72px 48px; }
  .caliber { height: 70svh; }
}

/* ==========================================================================
   MOBILE PASS · ASTRŒDON (desktop unchanged)
   Principle first by scroll; detail by tap. Native vertical scroll always wins.
   ========================================================================== */
@media (max-width: 760px) {
  /* chapter bar: 44 px targets, a clean edge fade instead of a hard cut */
  .program-bar__chapters a { min-height: 44px; display: inline-flex; align-items: center; }
  .program-bar__chapters { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }

  /* sketches: one featured drawing on entry, the rest a swipe away */
  .sheets { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sheets::-webkit-scrollbar { display: none; }
  .sheet--1, .sheet--2, .sheet--3, .sheet--4 { flex: 0 0 84%; max-width: none; margin: 0; scroll-snap-align: center; }
  .sheet--3 { max-width: none; }
  .sheets::after { content: ""; flex: 0 0 2px; }
  .sheet__paper img { max-height: 46svh; width: 100%; object-fit: contain; }
  .sketches__swipe { display: flex; justify-content: space-between; margin-top: 2px; font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--off-50); }

  /* BioVent model: tap to select; turning only inside the Rotate state */
  .specimen__canvas { touch-action: pan-y; }
  .bv-controls, .rig__controls { gap: 0 18px; }
  .bv-controls button, .rig__controls button { min-height: 44px; font-size: 11px; }
  .specimen.is-handling { box-shadow: inset 0 0 0 1px rgba(191,163,90,.35); }
  .caption #bv-help { display: none; }

  /* layered system: the legend becomes one row of layer chips; one lead at a time */
  .sys__legend { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .sys__legend::-webkit-scrollbar { display: none; }
  .sys__legend li { padding-left: 0; border: 0 !important; flex: none; }
  .sys__legend button { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 22px; white-space: nowrap; }
  .sys__legend button.is-lead, .sys__legend button[aria-pressed="true"] { border-color: rgba(191,163,90,.6); color: var(--off); }
  .sys__note { min-height: 4.8em; font-size: 15px; }

  /* test rig: recomposed, not shrunk — taller chamber, BioVent readable, fewer controls */
  .rig__stage { aspect-ratio: 4 / 3; }
  .rig__range { display: none; }                   /* sliders are a desktop affordance */
  .rig__legend { font-size: 10px; }
  .rig__controls button[data-rig="glass"] { order: 3; }

  /* lab notebook: title first; the finding opens with the entry */
  .note-row button { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 14px; min-height: 64px; }
  .note-row__id { display: none; }
  .note-row__title small, .note-row__status { display: none; }
  .note-row__program { grid-column: 2; text-align: left; }

  /* small labels that carry meaning stay readable */
  .lab__note, .platform__note, p.fine { font-size: 12px; line-height: 1.6; }
  .pmap__node { min-height: 44px; min-width: 44px; }
}
@media (max-width: 360px) {
  .sheet--1, .sheet--2, .sheet--3, .sheet--4 { flex-basis: 88%; }
  .sys__legend button { padding: 0 11px; font-size: 11px; }
}
.sketches__swipe { display: none; }
@media (max-width: 760px) { .sketches__swipe { display: flex; } }
@media (max-width: 760px) {
  /* sketch → model: a short scrubbed moment, not three screens of pinning */
  .motion .transform:not(.is-still) .transform__track { height: 180svh; }
  /* field notes float over content on a phone: give them their own ground */
  .fnote { background: rgba(5,5,5,.9); padding: 12px 14px; border-left-color: rgba(214,230,240,.28); box-shadow: 0 10px 30px rgba(0,0,0,.6); }
}
@media (max-width: 360px) {
  .engine-line { letter-spacing: .16em; font-size: 11px; white-space: nowrap; }   /* one line, never an orphaned word */
  .h-lg { font-size: clamp(1.7rem, 9.2vw, 2.1rem); overflow-wrap: normal; }       /* longest word ("ENVIRONMENTS.") fits the column */
}