/* ============================================================
   SCIENCE — full-bleed split system

   The bar is two pieces of approved work:
   · the DMA science reference (full-bleed 50/50, huge macro,
     gold caps headline, bold uppercase lead)
   · the LIVE MCI /muse-exosomes split (dark copy panel with a
     real left margin against a bright product half)

   Both are STILL. Ours beats them on the one axis they left
   open — the media is alive: a curtain wipe on entry and a slow
   scale drift, the same material-and-light language as the
   Atelier menu. No frames, no badges: the confidence is the
   crop, exactly as in the reference.

   Reveal piggybacks the existing .reveal/.is-in observer
   (assets/site.js). Playback gating: assets/sci-media.js.
   ============================================================ */

/* ============================================================
   GLASS OVERLAY — full-bleed media, copy on a frosted card

   Beats the 50/50 panel: the product macro is never cut in half,
   and the copy arrives as a glass plate that fades up and SNAPS
   into place (a touch of overshoot on the transform curve).
   Glass recipe is the site's own — same blur/saturate/inset-
   highlight as .nav-menu-panel — so it reads as house language.
   ============================================================ */
.chapter--glass{
  position:relative;overflow:hidden;
  padding:0;min-height:100vh;display:flex;align-items:stretch;z-index:3;
}
.sci-bleed{position:absolute;inset:0;z-index:0;overflow:hidden}
.sci-bleed img,.sci-bleed video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  /* every bleed sits BACK — it is a ground, not a competing hero image */
  filter:saturate(.86) brightness(.76);
  transform:scale(1.12);transition:transform 5s cubic-bezier(.16,1,.3,1);
}
/* --soft: for footage far more luminous than the page (the bubbles loop).
   Blur turns it into atmosphere; the base scale stays >1 so the blur never
   exposes an edge. */
.chapter--glass--soft .sci-bleed img,.chapter--glass--soft .sci-bleed video{
  filter:blur(5px) saturate(.70) brightness(.58);
}
/* bias the frame away from the panel so the vials stay in open air */
.chapter--glass .sci-bleed img,.chapter--glass .sci-bleed video{object-position:70% 50%}
.chapter--glass--cardright .sci-bleed img,.chapter--glass--cardright .sci-bleed video{object-position:30% 50%}
/* the bleed carries .reveal only to time its drift — no fade of its own.
   STILLS, not clips: the source film cuts every ~1s, so any loop short enough
   to sit in a panel boomerangs. A best-framed frame + this one slow drift is
   the brand's register (and what the live MCI panel does). */
.sci-bleed.reveal{opacity:1;transform:none;transition:none}
.sci-bleed.is-in img,.sci-bleed.is-in video{transform:scale(1.05)}
/* legibility scrim — weighted toward the side the card sits on */
.sci-bleed::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,33,38,.80) 0%,rgba(0,33,38,.42) 42%,rgba(0,33,38,.14) 70%,rgba(0,33,38,.30) 100%);
}
.chapter--glass--cardright .sci-bleed::after{
  background:linear-gradient(270deg,rgba(0,33,38,.80) 0%,rgba(0,33,38,.42) 42%,rgba(0,33,38,.14) 70%,rgba(0,33,38,.30) 100%);
}

/* full-height panel, square edges — the MCI /muse-exosomes proportion */
.sci-glass{
  position:relative;z-index:2;
  /* exactly half — so the divide sits at the SAME x whether the panel is on the
     left or the right, and the vertical seam runs unbroken down the page */
  width:50%;flex:0 0 auto;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(34px,4vw,64px) clamp(28px,3.6vw,60px);
  border-radius:0;
  /* Panel tint (Lonnie 2026-07-26: "decrease the glass opacity"). Legibility does not
     rest on this layer — .sci-bleed::after already lays ~.80 of scrim under whichever
     side the panel sits on — so the tint is free to thin out and let the footage read
     through the blur. Base is the SMALLER decrease (.60 -> .52), per her ruling that
     "Characterized, not assumed" comes down less than the cardright beat. */
  background:
    linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.028) 42%,rgba(255,255,255,.09) 100%),
    rgba(0,33,38,.52);
  backdrop-filter:blur(26px) saturate(165%);
  -webkit-backdrop-filter:blur(26px) saturate(165%);
  /* NO OUTLINE (Lonnie 2026-07-26, asked repeatedly). Two things drew that edge, and
     removing only the border leaves the other: the 1px border AND the inset white
     highlight in the box-shadow. Both gone. Depth now comes from the drop shadows and
     the backdrop-blur alone — which is what makes it read as glass, not as a card. */
  border:0;
  box-shadow:
    0 30px 80px -44px rgba(0,0,0,.75),
    0 60px 140px -70px rgba(0,0,0,.5);
}
.chapter--glass--cardright .sci-glass{margin-left:auto}
/* the cardright beat ("Lyophilized for point-of-use freshness") takes the LARGER
   decrease — .60 -> .40 — so more of its film carries through the panel. Only the
   tint is overridden; the white sheen gradient and the blur stay as authored. */
.chapter--glass--cardright .sci-glass{
  background:
    linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.028) 42%,rgba(255,255,255,.09) 100%),
    rgba(0,33,38,.40);
}

/* PANEL DOES NOT ANIMATE (Lonnie 2026-07-26: "dont animate in the left side glass panel —
   have it just be there from the start ... but have the whole section 'click in'").
   The panel is furniture: it should already be present when the beat arrives. The ENTRANCE
   moves up to the whole chapter below, so the section arrives as one object instead of the
   copy assembling itself inside a frame that is already there. */
.sci-glass.reveal,
.sci-glass.reveal.is-in{opacity:1;transform:none;filter:none;transition:none}

/* SECTION "CLICK IN" — REVERTED 2026-07-26, unfinished.
   Attempt: .chapter--glass starts at opacity:0 and a :has(.sci-glass.is-in) rule reveals it.
   The selector MATCHES (verified in-page) but the declaration is not winning the cascade, so
   the section stayed invisible — a shipping hazard, reverted rather than half-debugged at the
   end of a long session. The panel-does-not-animate half of the request IS done and kept above.
   NEXT THREAD: something else sets opacity on .chapter--glass with higher specificity — find it
   before re-attempting, and prefer adding a class via the existing IntersectionObserver in
   site.js over a :has() rule (the observer already drives every other entrance on this site). */

/* half a viewport is wider than a readable measure — hold the text block */
.sci-glass > *{max-width:620px;width:100%}
.sci-glass .display{
  font-weight:600;text-transform:uppercase;letter-spacing:.012em;
  font-size:clamp(1.8rem,2.9vw,2.7rem);line-height:1.07;text-wrap:balance;
}
.sci-glass .body{font-size:16.5px;line-height:1.72;max-width:none;margin-top:18px}
.sci-glass .body + .body{margin-top:14px}
.sci-glass .pillars{font-size:11px;gap:9px 18px;margin-top:24px}

@media (max-width:900px){
  .chapter--glass{min-height:0;padding:12vh 0}
  .sci-bleed::after,.chapter--glass--cardright .sci-bleed::after{
    background:linear-gradient(180deg,rgba(0,33,38,.62),rgba(0,33,38,.78))}
  .sci-glass,.chapter--glass--cardright .sci-glass{
    width:calc(100% - var(--gutter) * 2);margin:0 var(--gutter)}
  .sci-glass .display{font-size:clamp(1.65rem,6.6vw,2.1rem)}
}
@media (prefers-reduced-motion:reduce){
  .sci-glass.reveal,.sci-glass.reveal.is-in{opacity:1;transform:none;filter:none;transition:none}
  .sci-bleed video{transform:none;transition:none}
}

/* ============================================================
   STRESS CHAIN — the last link is a DESTINATION, not an output

   Three gold nodes joined by identical arrows read as one causal
   chain, i.e. "our cells produce stressed skin" — the opposite of
   the claim. The words are DMA's and stay untouched; the fix is
   grammatical: gold = what the platform makes, framed white chip =
   who it is for, and the final connector points INTO it.
   ============================================================ */
.stress-chain .sc-node:last-of-type{
  color:var(--text-light);
  border:1px solid rgba(211,173,90,.55);
  background:rgba(0,33,38,.42);
  padding:.55em 1.1em;
  margin-top:2px;
}
.stress-chain .sc-arrow:last-of-type{
  color:var(--gold);
  transform:translateX(1px);
}

/* the section stops being a padded chapter and becomes a full-bleed stage */
.chapter--split-full{
  padding:0;min-height:100vh;display:block;position:relative;z-index:3;
}
.sci-split{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:100vh;position:relative;
}
/* VERTICAL SEAM REMOVED 2026-07-26 (Lonnie). With the frosted pane carrying the copy, the
   two halves already read as distinct — the gold hairline down the centre was one more drawn
   line doing work the composition does on its own. Same subtraction as the glass outlines. */

/* ---- copy half ---- */
.sci-split__copy{
  position:relative;display:flex;align-items:center;
  padding:15vh clamp(26px,4.4vw,84px);
  background:linear-gradient(148deg,#00272c 0%,#00363f 52%,#013f49 100%);
  overflow:hidden;
}
/* DMA topography, barely there — keeps the flat panel from reading as dead ink */
.sci-split__copy::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;
  background:url('patterns/da-topography-teal.webp') center/cover no-repeat;
}
.sci-split__inner{position:relative;z-index:2;width:100%;max-width:540px;margin-right:auto}

/* headline — gold caps, the reference's voice */
.sci-split__copy .display{
  font-weight:600;text-transform:uppercase;letter-spacing:.012em;
  font-size:clamp(1.85rem,3.15vw,3.05rem);line-height:1.07;
  text-wrap:balance;
}
/* bold uppercase lead under the headline */
.sci-lead{
  font-family:var(--font-sans);font-weight:700;
  font-size:16.5px;line-height:1.5;letter-spacing:.03em;text-transform:uppercase;
  color:var(--text-light);margin-top:clamp(20px,2.6vh,30px);max-width:44ch;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
}
/* sentence-case lead (the "simple difference" panel) */
.sci-statement{
  font-family:var(--font-sans);font-size:18px;line-height:1.6;color:var(--text-light);
  margin-top:clamp(20px,2.6vh,30px);max-width:42ch;text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.sci-statement strong{font-weight:700}
.sci-verdict{
  font-family:var(--font-sans);font-weight:700;font-size:15.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold);margin-top:22px;
}
.sci-split__copy .body{font-size:16.5px;line-height:1.72;max-width:50ch;margin-top:20px}
.sci-split__copy .body + .body{margin-top:15px}
.sci-split__copy .eyebrow{margin-bottom:22px}
.sci-split__copy .pillars{font-size:11px;gap:9px 18px;margin-top:26px}

/* ---- media half ---- */
.sci-split__media{position:relative;overflow:hidden;background:var(--blue-deep)}
.sci-split__vid{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transform:scale(1.1);
  transition:transform 3.4s cubic-bezier(.16,1,.3,1) .08s;
}
/* MEDIA DOES NOT TRAVEL (Lonnie 2026-07-27: the left video "should not animate upwards" —
   the curtain wipe read as a slide-up and exposed a section gap on entry). Same law the
   glass panel and copy plate already carry: present from the start; .is-in remains only
   as the timing hook for the slow scale drift. */
.sci-split__media.reveal,
.sci-split__media.reveal.is-in{opacity:1;transform:none;clip-path:none;transition:none}

/* CONTENT SITS POSITIONED IN ITS SECTION (Lonnie 2026-07-27, punch 6b — "they shouldn't
   roll up"): inner reveals inside the split/glass science beats are static. .is-in still
   fires (film drifts keep their timing); nothing translates or fades in. */
html.js .sci-split .reveal,html.js .sci-split .reveal.is-in,
html.js .chapter--glass .reveal,html.js .chapter--glass .reveal.is-in{opacity:1;transform:none;transition:none}
.sci-split__media.is-in .sci-split__vid{transform:scale(1)}
/* the faintest seat into the page's teal — never a frame */
.sci-split__media::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,33,38,.20) 0%,transparent 22%,transparent 78%,rgba(0,33,38,.18) 100%);
}

/* media on the left: swap the visual order, DOM order stays readable */
.sci-split--media-left .sci-split__media{order:-1}

/* ---- overlay variant (§ The simple difference) ----
   copy sits ON the media half; the list gets its own teal panel */
/* the cells film is dark-on-black; dropped straight in it reads as a brightness
   cliff off the teal panel above it. Screen-blending it over a teal ground keeps
   the glow and loses the black, so the beat belongs to the same world. */
/* UN-FLIPPED 2026-07-26 (Lonnie). A prior thread mirrored this beat (copy order:2 /
   panel order:1) to make horizontal rules line up across the seam — chasing a symptom
   of rules that should not have existed. The rules are gone now, so the mirror goes
   too: DOM order is the approved design ("heading + lead left · numbered 01–05 right").
   The checkerboard it was fighting came from the RULES, not from the side ordering. */
.sci-split--overlay .sci-split__copy{
  background:linear-gradient(158deg,#01333c 0%,#012a31 54%,#001f25 100%);
}
/* The film is the ATMOSPHERE, not the subject. Screen-blended it kept its black, but at
   full strength the cell macro read as biotech-diagram rather than brand. Softened with a
   light blur + lower opacity it becomes luminous ground for the frosted pane over it
   (Lonnie 2026-07-26: "elegant vs biotech ... i like a frosted pane here"). */
.sci-split__vid--behind{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  opacity:.55;mix-blend-mode:screen;transform:scale(1.06);
  filter:blur(2.5px) saturate(.92);
  transition:transform 4s cubic-bezier(.16,1,.3,1),opacity 1.4s var(--ease-out);
}
/* a soft light-fade so the film dissolves into the panel instead of ending at an edge */
.sci-split--overlay .sci-split__copy::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 62% 40%,rgba(255,255,255,.09) 0%,transparent 58%),
    linear-gradient(180deg,rgba(3,74,80,.55) 0%,transparent 26%,transparent 72%,rgba(0,31,37,.55) 100%);
  height:auto;
}

/* ---- FROSTED PANE — the copy plate (house glass recipe, same as .sci-glass) ---- */
.sci-split--overlay .sci-split__inner{
  z-index:2;
  padding:clamp(30px,3.4vw,52px) clamp(28px,3vw,46px);
  border-radius:2px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 42%,rgba(255,255,255,.095) 100%),
    rgba(0,33,38,.52);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:0;                                   /* same no-outline rule as .sci-glass */
  box-shadow:
    0 30px 80px -46px rgba(0,0,0,.75),
    0 60px 140px -72px rgba(0,0,0,.5);
}
@media (max-width:900px){
  .sci-split--overlay .sci-split__inner{padding:clamp(24px,6vw,34px) clamp(20px,5vw,28px)}
}
/* soften the seam with the beat above */
.sci-split--overlay .sci-split__copy::after{
  content:'';position:absolute;left:0;right:0;top:0;height:22vh;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,74,80,.55),transparent);
}
/* THE PLATE DOES NOT TRAVEL (Lonnie 2026-07-26: "when this section builds in theres
   initially a gap here"). .sci-split__copy is not a copy block — it owns the background
   gradient, the full-bleed .sci-split__vid--behind, and the seam scrim. Generic
   .reveal (site.css) starts it at translateY(26px), so the whole plate sat 26px low on
   entry and exposed a strip of the beat behind it along the top seam. Same fix the
   bleed and the glass panel already carry: keep .reveal ONLY as the .is-in hook that
   times the film's scale drift below, and let the inner .sci-statement/.sci-verdict
   carry the actual entrance. */
.sci-split--overlay .sci-split__copy.reveal,
.sci-split--overlay .sci-split__copy.reveal.is-in{opacity:1;transform:none;transition:none}
.sci-split__copy.is-in .sci-split__vid--behind{transform:scale(1)}
.sci-split--overlay .sci-split__copy::before{opacity:.08}
.sci-split__panel{
  position:relative;display:flex;align-items:center;
  padding:15vh clamp(26px,4.4vw,84px);
  background:linear-gradient(152deg,#013f49 0%,#025a5c 58%,#036a69 100%);
}
.sci-split__panel .sci-split__inner{max-width:600px}
/* numbered rows — RULES REMOVED 2026-07-26 (Lonnie, twice-asked).
   The hairline under every row fought the one line that earns its keep on this page:
   the gold seam down the middle. Five more horizontals turned the beat into a ledger
   and, meeting the panel edge, read as a checkerboard. Structure now comes from
   RHYTHM — a gold numeral, generous air, and a hanging indent that gives the column
   a true left edge — so nothing is drawn that spacing can say instead. */
.sci-split__panel .num-list{margin-top:0;gap:0;max-width:none}
.num-list--stack .num-item{
  display:grid;
  grid-template-columns:2.6em 1fr;   /* numeral gutter + text column */
  align-items:baseline;
  column-gap:.4em;
  padding:clamp(11px,1.5vh,17px) 0;
  border:0;                          /* no rules — see note above */
}
.num-list--stack .num-item:first-child{padding-top:0}
.num-list--stack .num-item .n{
  font-size:13px;color:rgba(211,173,90,.9);letter-spacing:.1em;
  font-variant-numeric:tabular-nums;line-height:1.5;
}
.num-list--stack .num-item .t{
  display:block;font-size:16px;line-height:1.5;
  text-transform:uppercase;letter-spacing:.028em;color:var(--text-light);
  text-wrap:balance;
}
@media (max-width:900px){
  .num-list--stack .num-item{grid-template-columns:2.2em 1fr}
}
.sci-split__panel .platform-line{
  font-family:var(--font-sans);font-weight:700;font-size:15px;line-height:1.5;
  text-transform:uppercase;letter-spacing:.028em;color:var(--text-light);
}
.sci-split__panel .platform-line{margin-top:34px}

/* ---- mobile: media leads, copy follows ---- */
@media (max-width:900px){
  .sci-split{grid-template-columns:1fr;min-height:0}
  .sci-split::after{display:none}
  .sci-split__media{order:-1;height:52vh;min-height:320px}
  .sci-split__copy,.sci-split__panel{padding:11vh var(--gutter)}
  .sci-split__inner,.sci-split__panel .sci-split__inner{max-width:none}
  .sci-split__copy .display{font-size:clamp(1.7rem,7vw,2.25rem)}
  .sci-split__copy .body,.sci-lead{max-width:none}
  .sci-split--overlay .sci-split__copy{min-height:70vh}
}

/* MOBILE: the overlay beat is ONE SECTION, not two cards (Lonnie 2026-07-28: "these two cards
   should be a single section"). On phones the copy plate and the numbered panel stacked as two
   separately-grounded blocks with a visible seam between them. Now: the panel drops its own
   gradient and continues the copy half's ground, the seam scrim is suppressed, and the padding
   between them collapses to internal spacing — one uninterrupted teal field, one reading unit. */
@media (max-width:900px){
  .sci-split--overlay .sci-split__panel{background:transparent;padding-top:0}
  .sci-split--overlay .sci-split__copy{padding-bottom:clamp(26px,4vh,44px)}
  .sci-split--overlay .sci-split__copy::after{display:none}
  .sci-split--overlay{background:linear-gradient(158deg,#01333c 0%,#012a31 54%,#001f25 100%)}
  .sci-split--overlay .sci-split__panel .sci-split__inner{
    padding:clamp(22px,5vw,30px) clamp(20px,5vw,26px);
    border-radius:2px;
    background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 50%,rgba(255,255,255,.05) 100%);
  }
}

/* MOBILE = ONE CARD (Lonnie 2026-07-28: "i think single card"). The overlay beat has TWO
   frosted panes — the copy plate and the numbered panel. On phones they stacked as two
   separate cards with a gap between. Now they fuse: the copy pane loses its bottom radius and
   bottom edge, the panel pane loses its top radius, they share one continuous glass ground,
   and the gap collapses — one card, read top to bottom. */
@media (max-width:900px){
  .sci-split--overlay .sci-split__copy{padding-bottom:0}
  .sci-split--overlay .sci-split__panel{padding-top:0;background:transparent}
  .sci-split--overlay .sci-split__copy .sci-split__inner{
    border-radius:2px 2px 0 0;padding-bottom:clamp(18px,3.5vw,24px);margin-bottom:0}
  .sci-split--overlay .sci-split__panel .sci-split__inner{
    border-radius:0 0 2px 2px;padding-top:clamp(4px,1vw,8px);margin-top:0;
    background:linear-gradient(135deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 42%,rgba(255,255,255,.095) 100%),rgba(0,33,38,.52);
    backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
}

@media (prefers-reduced-motion:reduce){
  .sci-split__media.reveal,.sci-split__media.reveal.is-in{clip-path:none;transition:none}
  .sci-split__vid,.sci-split__vid--behind{transform:none;transition:none}
}

/* ============================================================
   ORBIT — the universe, minus the secretome ring
   Replaces the three stacked step-boxes. A chain has a LAST item and the last
   position carried the claim ("…→ stressed skin"). An orbit has no terminus:
   a source at the centre, its signals circling it, and the indication stated
   separately below as a destination. Gold on teal, one slow rotation, no chrome.
   ============================================================ */
.orbit{margin:clamp(26px,4vh,44px) 0 0;display:block}
.orbit__stage{
  position:relative;width:min(100%,340px);aspect-ratio:1/1;margin:0 0 clamp(20px,2.6vh,30px);
}
/* the source — a soft luminous core, never a hard dot */
.orbit__core{
  position:absolute;left:50%;top:50%;width:19%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#f2e2bd 0%,#d3ad5a 42%,rgba(211,173,90,.30) 72%,transparent 78%);
  box-shadow:0 0 46px 12px rgba(211,173,90,.20);
}
.orbit__ring{
  position:absolute;left:50%;top:50%;border-radius:50%;
  border:1px solid rgba(211,173,90,.26);
  transform-style:preserve-3d;
}
.orbit__ring--a{width:74%;height:74%;margin:-37% 0 0 -37%;animation:orbit-spin 34s linear infinite}
.orbit__ring--b{width:100%;height:100%;margin:-50% 0 0 -50%;
  border-color:rgba(231,242,231,.12);animation:orbit-spin 52s linear infinite reverse}
/* the signals themselves — vesicles riding the ring */
.orbit__ring i{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--gold,#d3ad5a);box-shadow:0 0 12px 2px rgba(211,173,90,.45);
}
.orbit__ring i:nth-child(1){top:-4px;left:50%;margin-left:-3.5px}
.orbit__ring i:nth-child(2){bottom:-4px;left:50%;margin-left:-3.5px}
.orbit__ring i:nth-child(3){left:-4px;top:50%;margin-top:-3.5px}
.orbit__ring i:nth-child(4){right:-4px;top:50%;margin-top:-3.5px}
.orbit__ring--b i{width:5px;height:5px;opacity:.72}
@keyframes orbit-spin{to{transform:rotate(360deg)}}

.orbit__legend{display:flex;flex-direction:column;gap:14px;margin:0}
.orbit__label{display:block;position:relative;padding-left:18px}
.orbit__label::before{
  content:'';position:absolute;left:0;top:.52em;width:8px;height:1px;background:rgba(211,173,90,.6);
}
.orbit__label b{
  display:block;font-family:var(--font-sans);font-weight:700;
  font-size:14.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold,#d3ad5a);
}
.orbit__label--sig b{color:var(--text-light,#fbf8f4)}
.orbit__label em{
  display:block;margin-top:3px;font-style:normal;font-family:var(--font-sans);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted,#a9bcb6);
}
/* the indication — set apart, so it reads as WHO IT IS FOR, never as an output */
.orbit__dest{
  margin:clamp(20px,2.6vh,28px) 0 0;padding-top:16px;
  border-top:1px solid rgba(211,173,90,.22);
  font-family:var(--font-sans);font-weight:700;font-size:14.5px;
  letter-spacing:.055em;text-transform:uppercase;color:var(--text-light,#fbf8f4);
}
@media (prefers-reduced-motion:reduce){
  .orbit__ring--a,.orbit__ring--b{animation:none}
}

/* ---- flat beats: done with an ATMOSPHERE LAYER, not an overlay ----
   An opaque panel laid over the fixed film ALWAYS shows a horizontal edge, however long the
   feather (that was the "lines all over the page"). The site already has a seamless mechanism:
   the atmosphere layers crossfade by OPACITY on one fixed full-viewport stack. So a "flat" beat
   is just another layer that happens to be a solid colour. No panel, no mask, no seam. */

/* ---- §biology — the orbit as CENTREPIECE (2026-07-26) ---- */
.bio{display:flex;flex-direction:column;align-items:center;width:100%}
.bio__figure{
  margin:0;display:grid;align-items:center;justify-items:center;
  grid-template-columns:minmax(0,1fr) minmax(240px,32vh) minmax(0,1fr);
  gap:clamp(18px,3vw,54px);width:100%;
}
.bio__figure .orbit__stage{width:100%;max-width:none;margin:0}
/* labels flank the diagram on leader lines */
.bio__label{display:block;max-width:24ch}
.bio__label--l{text-align:right;justify-self:end}
.bio__label--r{text-align:left;justify-self:start}
.bio__label b{
  display:block;font-family:var(--font-sans);font-weight:700;
  font-size:clamp(12.5px,1.05vw,15px);letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold,#d3ad5a);line-height:1.4;
}
.bio__label--r b{color:var(--text-light,#fbf8f4)}
.bio__label em{
  display:block;margin-top:6px;font-style:normal;font-family:var(--font-sans);
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted,#a9bcb6);
}
.bio__label::after{
  content:'';display:block;height:1px;margin-top:12px;
  background:linear-gradient(90deg,transparent,rgba(211,173,90,.45));
}
.bio__label--r::after{background:linear-gradient(270deg,transparent,rgba(211,173,90,.45))}
/* the indication — centred, set apart, never a terminus of the diagram */
.bio__dest{
  margin:clamp(22px,3vh,34px) 0 0;padding-top:14px;
  border-top:1px solid rgba(211,173,90,.22);
  font-family:var(--font-sans);font-weight:700;font-size:14px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-light,#fbf8f4);
}
/* prose falls away beneath the graphic */
.bio__prose{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.2vw,54px);
  margin-top:clamp(30px,4.5vh,58px);width:100%;
}
.bio__prose .body{max-width:none;margin:0;font-size:16px;line-height:1.72}
@media (max-width:900px){
  .bio__figure{grid-template-columns:1fr;gap:22px}
  .bio__figure .orbit__stage{max-width:260px;order:-1}
  .bio__label,.bio__label--l,.bio__label--r{text-align:center;justify-self:center;max-width:30ch}
  .bio__label::after,.bio__label--r::after{
    background:linear-gradient(90deg,transparent,rgba(211,173,90,.45),transparent)}
  .bio__prose{grid-template-columns:1fr}
}