/* Mycelial — editorial identity. Shared by the live and static journeys. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/mycelial/cormorant-italic.ttf) format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/mycelial/cormorant-regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/mycelial/cormorant-medium.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./assets/fonts/mycelial/dm-sans-regular.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./assets/fonts/mycelial/dm-sans-medium.ttf) format('truetype');
}

:root {
  --gold: #f6b652;
  --gold-bright: #f6ca8a;
  --parchment: #f7ebd7;
  --ink: #f7ebd7;
  --muted: #c9baa4;
  --bg: #0b0704;
  --mycelial-display: 'Cormorant Garamond', Georgia, serif;
  --mycelial-body: 'DM Sans', Arial, sans-serif;
}
body, button, input, select, textarea { font-family: var(--mycelial-body); }
::selection { background: #f6b652; color: #0b0704; }
/* A single generous signature; it remains the home control during travel. */
.ui #site-nav { --header-left: 5.2vw; padding: 2.1rem var(--header-left); }
/* The artwork's bright ring spans 912px of its 1254px canvas. Render that
   ring at the menu's 44px diameter, independently of its transparent margin. */
.ui .logo {
  --brand-away: var(--logo-away-u, 0);
  --brand-reading-offset: calc(clamp(1rem, 4vw, 4rem) - var(--header-left));
  /* Position and wordmark share the journey's frame-stepped passage clock. */
  translate: calc(var(--brand-reading-offset) * var(--logo-reading-u, 0)) 0;
  transition: none;
  --brand-width: 240px;
  width: calc(44px + (var(--brand-width) - 44px) * (1 - var(--brand-away)));
  min-width: 44px;
  height: 44px;
  gap: 0;
}
.ui .logo .wordmark-window {
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--brand-width) - 44px);
  overflow: hidden;
  /* Fade on the slide's frame clock, gently at first because its mask also
     removes ink. Keep the lettering's font-ready fade independent. */
  opacity: calc(1 - var(--brand-away) * var(--brand-away));
  pointer-events: none;
}
.ui .logo .wordmark {
  /* Translate by the lettering plus its icon gap, not the wider window.
     Otherwise the visible name is clipped before the camera arrives. */
  width: max-content;
  font-family: var(--mycelial-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-left: 12px;
  color: var(--parchment);
  opacity: 1;
  filter: none;
  transform: translateX(calc(var(--brand-away) * -100%));
  /* Position tracks the journey; opacity only reveals the loaded font. */
  transition: opacity .18s ease;
}
.wordmark-font-pending .ui .logo .wordmark { opacity: 0; }
.ui .logo .mushroom-mark {
  width: 44px; height: 44px; left: 0;
  overflow: visible;
  clip-path: none; opacity: 1; filter: none;
  transform: translateY(-50%);
  transform-origin: center;
  z-index: 1;
}
.ui .logo .mushroom-mark img {
  width: 60.5px;
  height: 60.5px;
  inset: -7.43px auto auto -8.25px;
}
.ui .logo .mushroom-glow { display: none; }
.ui .logo:hover .wordmark { color: var(--gold-bright); }
.ui .logo:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 12px; }
.ui .logo:focus-visible::after { display: none; }
/* Preserve the original mission wording, with the scale and italic rhythm
   of the supplied identity boards. The 3D organism remains the hero art. */
.ui .hero {
  max-width: 57vw;
  padding: 0 0 9vh 5.2vw;
}
.ui .hero h1 {
  font-family: var(--mycelial-display);
  font-weight: 400;
  font-size: clamp(3.8rem, 5.8vw, 6.2rem);
  line-height: .96;
  letter-spacing: -.035em;
  margin-bottom: 1.7rem;
  text-shadow: none;
}
.ui .hero h1::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  margin-top: 1.6rem;
  background: #eeb665;
  animation: fade-on var(--hero-entry-duration) ease 0.15s both;
}
@media (prefers-reduced-motion: no-preference) {
  body.hero-entry-pending .ui .hero h1::after {
    opacity: 0;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui .hero h1::after { animation: none; }
}
.ui .hero h1 em {
  color: #f3bd7c;
  letter-spacing: -.045em;
  text-shadow: none;
  font-weight: 400;
}
.ui .hero .sub {
  font-family: var(--mycelial-body);
  max-width: 34rem;
  text-wrap: balance;
  color: #d0c2af;
  font-size: 13px;
  line-height: 2.1;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-shadow: none;
  margin-bottom: 0;
}
.j-h, .j-menu-h, .j-manifesto-panel h1 {
  font-family: var(--mycelial-display);
  font-weight: 400;
  letter-spacing: -.03em;
}
.j-h { font-size: clamp(2.35rem, 3.7vw, 3.75rem); line-height: 1.04; }
.j-menu-h, .menu-h {
  font-family: var(--mycelial-display);
  font-size: clamp(1rem, calc(20vw - 3rem), 1.5rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.1;
}
/* Purpose's longer headline needs a wider measure at this display scale.
   Keep its anchor and phone layout; let desktop copy form a balanced pair. */
.j-block[data-chapter="final"] .j-h { text-wrap: balance; }
@media (min-width: 901px) {
  .j-block.pos-topright[data-chapter="connect"] {
    width: min(42rem, 89.6vw);
    max-width: 42rem;
  }
  .j-block[data-chapter="connect"] .j-sub { max-width: 38rem; }
  .j-block.pos-bottomleft[data-chapter="final"] {
    width: min(56rem, 89.6vw);
    max-width: 56rem;
    translate: 0 calc(-1 * var(--purpose-copy-lift, 0px));
  }
  .j-block[data-chapter="final"] .j-sub { max-width: 36rem; }
}
.mycelial-heading-accent {
  color: #f3bd7c;
  font-family: var(--mycelial-display);
  font-style: italic;
  font-weight: 400;
  text-shadow: none;
}
.j-sub { font-family: var(--mycelial-body); font-size: 13px; line-height: 2; letter-spacing: .2em; text-transform: uppercase; }
.j-rail-name, .j-menu-kicker { font-family: var(--mycelial-body); letter-spacing: .16em; }
.j-manifesto-panel h1 { color: var(--parchment); font-size: clamp(3rem, 5vw, 5rem); }
.j-manifesto .j-manifesto-line {
  font-family: var(--mycelial-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .015em;
  text-transform: none;
}
.j-menu-panel { background-color: #100b06; }
/* The crawler/reduced-motion page shares the identity without inheriting
   the live scene's fixed composition. */
body:has(.manifesto-static) h1,
body:has(.manifesto-static) h2 { font-family: var(--mycelial-display); font-weight: 400; letter-spacing: -.025em; }
body:has(.manifesto-static) .manifesto-static .sub { font-size: 17px; line-height: 1.9; text-transform: none; letter-spacing: .015em; }
@media (min-width: 1800px) {
  .ui .hero { max-width: 60rem; }
}
@media (max-width: 1024px) {
  .ui #site-nav { --header-left: 5vw; padding: 2.1rem var(--header-left); }
  .ui .logo { --brand-width: 210px; }
  .ui .logo .wordmark { font-size: 18px; }
  .ui .hero { max-width: 100%; padding: 4.5vh 6vw 0; justify-content: flex-start; }
  .ui .hero h1 { font-size: clamp(2.9rem, 6.4vw, 4.5rem); line-height: 1; }
  .ui .hero .sub { max-width: 32rem; font-size: 12px; line-height: 2; }
  .j-h { font-size: clamp(2rem, 5vw, 3rem); }
}
@media (max-width: 600px) {
  .ui #site-nav { --header-left: 6vw; padding: 2.1rem var(--header-left); }
  .ui .logo { --brand-width: 180px; }
  .ui .logo .wordmark { font-size: 16px; }
  .ui .hero { padding: 3.5vh 6vw 0; text-align: center; }
  .ui .hero h1 { font-size: clamp(2.65rem, 10.8vw, 4rem); line-height: .97; width: calc(100% + 6vw); margin: 0 -3vw 1.3rem; text-wrap: balance; }
  .ui .hero h1 .hl { display: inline; white-space: normal; }
  .ui .hero h1::after { width: 32px; margin: 1.2rem auto 0; }
  .ui .hero .sub { max-width: 100%; font-size: 11px; line-height: 2; letter-spacing: .18em; margin: 0; }
  .j-h { font-size: clamp(2rem, 8vw, 2.8rem); }
  .j-sub { font-size: 11px; line-height: 1.9; letter-spacing: .16em; }
  .j-manifesto-panel h1 { font-size: 2.8rem; }
  .j-manifesto .j-manifesto-line { font-size: 16px; line-height: 1.9; letter-spacing: .015em; }
}
@media (max-height: 700px) and (min-width: 1025px) {
  .ui .hero h1 { font-size: clamp(3rem, 5vw, 4.5rem); }
  .ui .hero { padding-bottom: 5vh; }
}
@media (max-height: 740px) and (max-width: 600px) {
  .ui .hero { padding-top: 1vh; }
  .ui .hero h1 { font-size: 9.6vw; }
}
/* Secondary documents use the same recognizable signature. */
.logo:has(.mycelial-secondary-name) { display: flex; align-items: center; gap: 10px; width: auto; min-width: 170px; color: var(--parchment); }
.mycelial-secondary-mark { width: 46px; height: 46px; object-fit: contain; }
.mycelial-secondary-name { font: 500 34px/1 var(--mycelial-display); letter-spacing: -.04em; }
body:has(.mycelial-secondary-name) h1,
body:has(.mycelial-secondary-name) h2 { font-family: var(--mycelial-display); }

/* Supporting copy and wayfinding echo the reference's spaced small capitals. */
.j-rail .j-rail-slot .j-rail-name,
.j-menu-kicker,
.rail-label,
.nav-cta,
.kicker {
  font-family: var(--mycelial-body);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .2em;
}
.j-rail .j-rail-slot .j-rail-name {
  font-family: var(--mycelial-body) !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
}
.j-rail .j-rail-slot:is([data-chapter="inspire"], [data-chapter="equip"], [data-chapter="connect"]) .j-rail-name {
  font-size: 9px !important;
}
body:has(.mycelial-secondary-name) .sub:not([data-src="manifesto.body"]) {
  font-family: var(--mycelial-body);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .2em;
  line-height: 2;
}

/* Keep the existing heading as the manifesto region's accessible name;
   the fixed home signature supplies its one visible Mycelial title. */
.j-manifesto-panel #j-manifesto-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 621px) and (max-width: 900px) and (orientation: portrait) {
  .ui #site-nav { padding-top: 24px; }
}
@media (max-width: 620px) and (orientation: portrait) {
  .ui #site-nav { padding-top: 20.8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui .logo, .ui .logo .wordmark { transition: none; }
}
/* Reserve the fixed signature's band even when the reading column fills
   the viewport. Its existing clipped line lift stays inside this region. */
.j-manifesto {
  --mycelial-reading-top: 112px;
  padding-top: var(--mycelial-reading-top);
}
.j-manifesto .j-manifesto-panel {
  min-height: 0;
  max-height: min(52rem, calc(100dvh - var(--mycelial-reading-top) - var(--manifesto-reserve, 8.5rem)));
}
body .j-manifesto .j-manifesto-panel { translate: none; }
/* Layout belongs to the reading surface, not the chrome visibility flag.
   That flag is released before the exit fade finishes. */
.j-manifesto { padding-bottom: var(--manifesto-reserve); }
@media (max-width: 720px) {
  .ui .logo {
    --brand-reading-offset: calc(max(1rem, (100vw - 38rem) / 2 + .25rem) - var(--header-left));
  }
}
/* Give the complete manifesto a wider reading measure before its overflow
   lift is needed. Keep the signature and navigation clearances intact. */
@media (min-width: 721px) {
  .j-manifesto .j-manifesto-panel { width: min(44rem, 58vw); }
  body .j-manifesto.is-open {
    --manifesto-reserve: var(--manifesto-desktop-reserve, 8rem);
    align-items: flex-start;
  }
}
@media (max-width: 720px) {
  .j-manifesto {
    /* Header top padding + its 44px mark + a small clear gap. */
    --mycelial-reading-top: calc(2.1rem + 44px + 8px);
  }
  /* The reading column now starts at the top. Keep its scrim behind the
     words, releasing the scene below instead of darkening the empty footer. */
  .j-manifesto::before {
    inset: 0;
    width: 100%;
    background: linear-gradient(180deg,
      rgba(8, 7, 5, .76) 0%,
      rgba(8, 7, 5, .88) var(--mycelial-reading-top),
      rgba(8, 7, 5, .72) calc(100% - var(--manifesto-reserve, 8.5rem)),
      transparent 100%);
  }
  body .j-manifesto.is-open {
    /* Clear the actual upper navigation circle, rather than reserving the
       old always-visible label and the empty space above its hit target. */
    --manifesto-reserve: calc(var(--nav-centre-bottom) + var(--purpose-rail-lift-max)
      + var(--nav-major) * .95 + var(--nav-minor-ring-d) / 2 + 8px);
    align-items: flex-start;
  }
}

@media (max-width: 620px) and (orientation: portrait) {
  .j-manifesto { --mycelial-reading-top: calc(20.8px + 44px + 8px); }
}
@media (min-width: 621px) and (max-width: 720px) and (orientation: portrait) {
  .j-manifesto { --mycelial-reading-top: calc(24px + 44px + 8px); }
}

/* Inline reference, with its reading note above the clipped manifesto panel. */
.manifesto-note-trigger {
  appearance: none;
  border: 0;
  background: none;
  color: var(--mycelial-amber, #f6b652);
  padding: .15em 0;
  font: inherit;
  font-size: .65em;
  vertical-align: super;
  cursor: help;
  pointer-events: auto;
}
.manifesto-note-trigger:hover { color: #fff1d5; }
.manifesto-note-trigger:focus-visible { outline: 1px solid #f6b652; outline-offset: 3px; }
.j-manifesto-line:not(.shown) .manifesto-note-marker { visibility: hidden; }
.manifesto-note-tooltip {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  width: 22rem;
  max-width: calc(100vw - 24px);
  padding: 1rem 1.15rem;
  border: 1px solid rgba(246, 182, 82, .45);
  border-radius: 5px;
  background: #1a1006;
  color: #f7ebd7;
  box-shadow: 0 8px 30px #0009;
  font: 400 .9rem/1.6 var(--mycelial-body, sans-serif);
  letter-spacing: 0;
  text-transform: none;
}
.manifesto-note-tooltip[hidden] { display: none; }

/* Desktop retains its camera-paced CSS labels. Phone names have one
   displayed-frame controller in rail.js; no CSS opacity transitions. */
@media (min-width: 621px), (orientation: landscape) {
/* Purpose's child names share its arrival rather than snapping on when the
   travel class clears. A return from a gathered child also gets a soft reveal. */
.j-rail .j-rail-slot.j-rail-purpose-child .j-rail-name {
  /* Start transparent while the tree is hidden, including its first mount.
     A first visit must not fade down from the legacy opacity: 1 underneath
     the opening branches before it can fade up like a warmed visit. */
  opacity: var(--purpose-child-label-u, 0) !important;
  transition: opacity 1.25s cubic-bezier(.22, .6, .25, 1), color .35s ease;
}
.j-rail.j-rail-purpose-arriving:not(.j-rail-purpose-gathering)
  .j-rail-slot.j-rail-purpose-child .j-rail-name {
  opacity: var(--purpose-child-label-u, 0) !important;
  transition: color .35s ease;
}

/* The gathered tree persists across sibling travel; labels answer deliberate hover. */
body.j-manifesto-open .j-rail .j-rail-purpose-child .j-rail-name,
.j-rail.j-rail-purpose-gathering .j-rail-purpose-child .j-rail-name {
  opacity: 0 !important;
  transition-duration: .35s;
}
/* Touch browsers retain :hover after a tap. Only a real hover-capable
   pointer may reopen these labels; keyboard focus remains explicit. */
@media (hover: hover) and (pointer: fine) {
  .j-rail:not(.j-rail-purpose-travelling) .j-rail-slot.j-rail-purpose-child .j-rail-item:hover .j-rail-name {
    opacity: 1 !important;
  }
}
.j-rail:not(.j-rail-purpose-travelling) .j-rail-slot.j-rail-purpose-child .j-rail-item:focus-visible .j-rail-name {
  opacity: 1 !important;
}
.j-rail.j-rail-purpose-travelling:not(.j-rail-purpose-arriving) .j-rail-slot.j-rail-purpose-child .j-rail-name {
  opacity: 0 !important;
  transition-duration: .35s;
}

}

/* Related words share a colour, but each slow swell starts on its own reveal beat. */
.manifesto-concept.concept-sun {
  --concept-rest: var(--palette-sun);
  --concept-lit: #c1d0b4;
  --concept-glow: 180, 197, 165;
}
.manifesto-concept.concept-soil {
  --concept-rest: var(--palette-soil);
  --concept-lit: #e2bbb2;
  --concept-glow: 215, 170, 160;
}
.manifesto-concept.concept-passage {
  --concept-rest: var(--palette-passage);
  --concept-lit: #bcd0da;
  --concept-glow: 169, 191, 206;
}
.manifesto-concept {
  --palette-sun: #b4c5a5;
  --palette-soil: #d7aaa0;
  --palette-passage: #a9bfce;
  color: var(--concept-rest);
  text-shadow: 0 0 5px rgba(var(--concept-glow), .24), 0 1px 12px rgba(0, 0, 0, .62);
}
.concept-organism, .concept-contribution { opacity: .84; }
.j-manifesto-line.shown .concept-organism,
.j-manifesto-line.shown .concept-contribution {
  animation: manifesto-concept-pair 6s ease-in-out forwards;
  animation-delay: calc(var(--w) * var(--stagger));
}
@keyframes manifesto-concept-pair {
  0%, 100% { opacity: .84; color: var(--concept-rest); text-shadow: 0 0 5px rgba(var(--concept-glow), .24), 0 1px 12px rgba(0, 0, 0, .62); }
  40% { opacity: 1; color: var(--concept-lit); text-shadow: 0 0 10px rgba(var(--concept-glow), .42), 0 0 3px rgba(var(--concept-glow), .18), 0 1px 12px rgba(0, 0, 0, .62); }
}
/* The word spans still own reveal opacity. Phrase decoration lives outside
   those spans, while colour and fine vibration stay inside their ink. */
.manifesto-concept.concept-kinship {
  --concept-rest: #efd09b;
  --concept-lit: #ffdfa5;
  --concept-glow: 239, 187, 111;
}
@property --thread-strength {
  syntax: '<number>';
  inherits: false;
  initial-value: .48;
}
.manifesto-phrase-thread {
  background-image: linear-gradient(90deg,
    rgb(219 173 112 / calc(var(--thread-strength) * .65)),
    rgb(245 211 156 / var(--thread-strength)),
    rgb(219 173 112 / calc(var(--thread-strength) * .75)));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
  padding-bottom: .12em;
  box-decoration-break: slice;
  -webkit-box-decoration-break: slice;
}
.j-manifesto .manifesto-phrase-thread {
  background-size: 0% 1px;
  --thread-strength: 0;
}
.j-manifesto:not(.is-open) .manifesto-phrase-thread,
.j-manifesto-line:not(.shown) .manifesto-phrase-thread {
  background-image: none;
  animation: none;
}
.j-manifesto.is-open .j-manifesto-line.shown .manifesto-phrase-thread {
  animation: manifesto-thread 6s ease-in-out both;
  animation-delay: calc(var(--phrase-beat) * var(--stagger) + 300ms);
}
.j-manifesto-line.shown .concept-kinship {
  animation: manifesto-concept-pair 6s ease-in-out forwards;
  animation-delay: calc(var(--w) * var(--stagger));
}
@keyframes manifesto-thread {
  0% { background-size: 0% 1px; --thread-strength: 0; }
  36% { background-size: 100% 1px; --thread-strength: .9; }
  100% { background-size: 100% 1px; --thread-strength: .48; }
}
/* Each letter moves independently. Direct transform frames avoid making the
   effect depend on an animated custom property or moving a whole word as a block. */
.manifesto-concept.concept-vitality {
  --concept-rest: #efd09b;
  --concept-lit: #ffdb9a;
  --concept-glow: 239, 177, 94;
  white-space: nowrap;
}
.manifesto-vitality-glyph { display: inline-block; }
.j-manifesto-line.shown .concept-vitality {
  animation: manifesto-concept-pair 6s ease-in-out forwards;
  animation-delay: calc(var(--w) * var(--stagger));
}
.j-manifesto-line.shown .manifesto-vitality-glyph {
  animation: manifesto-vitality-burst 173ms steps(1, end) 30,
    manifesto-vitality-rest 227ms steps(1, end) infinite;
  animation-delay: calc(var(--w) * var(--stagger) + var(--jitter-phase)),
    calc(var(--w) * var(--stagger) + var(--jitter-phase) + 5190ms);
}
/* A very fine letter quiver settles into a barely perceptible tremble.
   Even the reveal peak stays below the former resting motion. Glyph transforms never alter line boxes or surrounding copy. */
@keyframes manifesto-vitality-burst {
  0%, 100% { transform: translate(-0.1px, 0.07px) rotate(-0.2deg); }
  20% { transform: translate(0.22px, -0.32px) rotate(0.4deg); }
  40% { transform: translate(-0.25px, 0.17px) rotate(-0.4deg); }
  60% { transform: translate(0.14px, 0.29px) rotate(0.2deg); }
  80% { transform: translate(-0.16px, -0.22px) rotate(-0.3deg); }
}
@keyframes manifesto-vitality-rest {
  0%, 100% { transform: translate(-0.04px, 0.05px) rotate(-0.08deg); }
  20% { transform: translate(0.09px, -0.13px) rotate(0.14deg); }
  40% { transform: translate(-0.1px, 0.08px) rotate(-0.14deg); }
  60% { transform: translate(0.05px, 0.14px) rotate(0.1deg); }
  80% { transform: translate(-0.07px, -0.09px) rotate(-0.12deg); }
}
.manifesto-concept.concept-imagination {
  color: #dccbd1;
  text-shadow: none;
}
.manifesto-spectrum-glyph {
  /* One restrained mineral spectrum sampled continuously across the phrase:
     honey, terracotta rose, pearl and champagne; no full hue-wheel sweep. */
  background-image: linear-gradient(90deg,
    #f4c781 0%, #e8ab90 27%, #d7a4b5 49%, #f0ddd5 72%, #ecd09f 100%);
  background-size: 4000% 100%;
  background-position: calc(var(--spectrum-index) * 2.5641%) 0;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: saturate(.84) brightness(1.02);
  text-shadow: 0 0 5px rgb(235 191 162 / .16);
}
.j-manifesto-line.shown .manifesto-spectrum-glyph {
  animation: manifesto-iridescence 7s ease-in-out forwards;
  animation-delay: calc(var(--w) * var(--stagger) + var(--glyph-delay));
}
/* One continuous pastel palette travels through both words: sage, dusty rose, blue.
   Each sampled glyph remains inside its word's original reveal envelope. */
.manifesto-concept.concept-synthesis { color: transparent; text-shadow: none; }
.manifesto-synthesis-glyph {
  background-image: linear-gradient(90deg, var(--palette-sun) 0%, var(--palette-sun) 15%,
    var(--palette-soil) 50%, var(--palette-passage) 85%, var(--palette-passage) 100%);
  background-size: 2200% 100%;
  background-position: var(--synthesis-position) 0;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: none;
  text-shadow: none;
  opacity: .84;
}
/* The pulse changes presence, never the palette's saturation or lightness. */
.j-manifesto-line.shown .manifesto-synthesis-glyph {
  animation: manifesto-synthesis-presence 6s ease-in-out forwards;
  animation-delay: calc(var(--w) * var(--stagger) + var(--glyph-delay));
}
@keyframes manifesto-synthesis-presence {
  0%, 100% { opacity: .84; }
  40% { opacity: 1; }
}
@keyframes manifesto-iridescence {
  0%, 100% {
    filter: saturate(.84) brightness(1.02);
    text-shadow: 0 0 5px rgb(235 191 162 / .16);
  }
  40% {
    filter: saturate(1.08) brightness(1.1);
    text-shadow: 0 0 8px rgb(235 191 162 / .20);
  }
}
@media (prefers-reduced-motion: reduce) {
  .j-manifesto-line.shown .manifesto-concept,
  .j-manifesto-line.shown .manifesto-phrase-thread,
  .j-manifesto-line.shown .manifesto-spectrum-glyph,
  .j-manifesto-line.shown .manifesto-synthesis-glyph,
  .j-manifesto-line.shown .manifesto-vitality-glyph { animation: none; transform: none; }
  .j-manifesto.is-open .j-manifesto-line.shown .manifesto-phrase-thread {
    animation: none; background-size: 100% 1px; --thread-strength: .48;
  }
}


/* A quiet colour emphasis keeps the final invitation upright. */
.mycelial-renaissance-accent { color: #f3bd7c; }

/* Mobile copy begins in the clear space between the header and the rail.
   Its measured offset yields to the actual mushroom growth, not a timer. */
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  body.hero-growth-lift .ui .hero {
    translate: 0 calc(var(--hero-growth-offset, 0px) * (1 - var(--hero-growth-progress, 0)));
  }
}

@media (max-width: 620px) and (orientation: portrait) {
  .j-block.pos-bottomleft[data-chapter="final"] {
    left: 0;
    width: 100%;
    max-width: none;
    text-align: left;
    /* The explanation shares the upper branch's height, using its left
       pocket. Only the main row reserves vertical space. */
    top: auto;
    bottom: calc(var(--nav-centre-bottom) + var(--purpose-rail-lift-max)
      + var(--nav-ring-d) / 2);
    translate: none;
  }
  .j-block[data-chapter="final"] .j-sub {
    margin-inline: 0;
    max-width: var(--purpose-copy-measure, 36ch);
    text-wrap: pretty;
  }
  /* Names sit beside their branch rings; rail.js retains sole ownership
     of their arrival/hover opacity on touch devices. */
  .j-rail:not(.j-rail-column) .j-rail-slot.j-rail-purpose-child .j-rail-name,
  .j-rail:not(.j-rail-column) .j-rail-slot.j-rail-purpose-child.j-rail-purpose-manifesto .j-rail-name {
    left: calc(50% + var(--item-d) / 2 + 7px);
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
  }
}

/* Mobile keeps the desktop reveal rhythm in one continuous native scroll
   surface. Reveal-driven following yields immediately to manual reading. */
.j-manifesto.is-scroll-reading .j-manifesto-lines {
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  pointer-events: auto;
  mask-image: none;
  -webkit-mask-image: none;
  scrollbar-width: thin;
  scrollbar-color: #b28a4b transparent;
  padding-right: .35rem;
}
.j-manifesto.is-scroll-reading .j-manifesto-line {
  transform: none;
  transition: none;
  pointer-events: auto;
}
@media (max-width: 720px) {
  .j-manifesto.is-scroll-reading .j-manifesto-line {
    font-size: clamp(16px, 4.25vw, 18px);
    line-height: 1.65;
    letter-spacing: .015em;
  }
  .j-manifesto.is-scroll-reading .j-manifesto-lines { gap: 1.2em; }
}

/* Soft edges indicate the continuation of a single flowing text column. */
@media (max-width: 720px) {
  .j-manifesto.is-scroll-reading .j-manifesto-panel {
    position: relative;
    height: calc(100dvh - var(--mycelial-reading-top) - var(--manifesto-reserve));
    max-height: none;
    padding-block: 0;
  }
  .j-manifesto.is-scroll-reading .j-manifesto-lines {
    box-sizing: border-box;
    height: 100%;
    flex: 1 1 auto;
    gap: 1.2em;
    padding-top: var(--reading-pad-top, 1rem);
    padding-bottom: var(--reading-pad-bottom, 1rem);
    scroll-behavior: auto;
    overflow-anchor: none; /* The reveal controller preserves visible ink while retiring the opening inset. */
    --reading-mask-top: #000;
    --reading-mask-bottom: #000;
    mask-image: linear-gradient(to bottom, var(--reading-mask-top), #000 1rem,
      #000 calc(100% - 2.5rem), var(--reading-mask-bottom));
    -webkit-mask-image: linear-gradient(to bottom, var(--reading-mask-top), #000 1rem,
      #000 calc(100% - 2.5rem), var(--reading-mask-bottom));
  }
  .j-manifesto.is-scroll-reading.has-reading-above .j-manifesto-lines { --reading-mask-top: transparent; }
  .j-manifesto.is-scroll-reading.has-reading-below .j-manifesto-lines { --reading-mask-bottom: transparent; }
  .j-manifesto.is-scroll-reading .j-manifesto-panel::before,
  .j-manifesto.is-scroll-reading .j-manifesto-panel::after {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    height: 2rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .j-manifesto.is-scroll-reading .j-manifesto-panel::before {
    content: '';
    top: 0;
    height: 1rem;
    mask-image: linear-gradient(#000, transparent);
    -webkit-mask-image: linear-gradient(#000, transparent);
  }
  .j-manifesto.is-scroll-reading .j-manifesto-panel::after {
    content: '';
    bottom: 0;
    mask-image: linear-gradient(transparent, #000);
    -webkit-mask-image: linear-gradient(transparent, #000);
  }
  .j-manifesto.is-scroll-reading.has-reading-above .j-manifesto-panel::before,
  .j-manifesto.is-scroll-reading.has-reading-below .j-manifesto-panel::after { opacity: 1; }
}

/* Readiness has its own inherited fade, leaving the rail's layout and
   chapter-specific opacity choreography untouched. */
@property --nav-readiness {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
.j-rail,
.j-rail:not(.j-rail-column) {
  --nav-readiness: 1;
  transition: opacity var(--rail-opacity-duration, .45s) ease, --nav-readiness 1.6s ease-in-out;
}
.j-rail.is-loading { --nav-readiness: 0; }
.j-rail .j-rail-item,
.j-rail .j-rail-menu,
.j-rail .j-rail-active-ring {
  filter: opacity(calc(.7 + .3 * var(--nav-readiness)))
    saturate(calc(.85 + .15 * var(--nav-readiness)));
}
.j-rail.is-loading .j-rail-item,
.j-rail.is-loading .j-rail-menu { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .j-rail, .j-rail:not(.j-rail-column) { transition: none; }
}

/* Decoration appears softly once its complete link is readable. Text keeps
   the original per-word opacity; only the dotted line changes strength. */
.manifesto-chapter-link {
  pointer-events: auto;
  color: inherit;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-skip-ink: auto;
  cursor: pointer;
  transition: color .2s ease, text-decoration-color .85s ease;
}
.manifesto-link-ink { text-decoration: none; }
.manifesto-chapter-link:hover,
.manifesto-chapter-link:focus-visible {
  color: #f6cb8b;
  text-decoration-color: color-mix(in srgb, currentColor 70%, transparent);
}
.manifesto-chapter-link:focus-visible { outline: 1px solid #d7ad6980; outline-offset: 4px; border-radius: 2px; }
.manifesto-chapter-link[aria-disabled="true"] {
  pointer-events: none;
  text-decoration-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .manifesto-chapter-link { transition: none; }
}
.manifesto-link-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: calc(100vw - 24px);
  padding: 8px 11px;
  border: 1px solid #b88c454d;
  border-radius: 5px;
  background: #160f08f5;
  color: #f1e2c6;
  box-shadow: 0 4px 18px #0005;
  font: 400 12px/1.4 'DM Sans', sans-serif;
  letter-spacing: .025em;
  pointer-events: none;
}
.manifesto-link-tooltip[hidden] { display: none; }

/* Desktop fits the entire manuscript before any ink appears; never lift or
   scroll away earlier paragraphs. Mobile retains its native reading surface. */
@media (min-width: 721px) {
  .j-manifesto.is-font-pending .j-manifesto-lines { visibility: hidden; }
  .j-manifesto .j-manifesto-line { font-size: var(--manifesto-fit-size, 17px); }
  .j-manifesto .j-manifesto-lines {
    font-size: var(--manifesto-fit-size, 17px);
    gap: .55em;
    overflow: hidden;
    padding-block: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }
}