/* stage.css — the homepage as a phage life cycle, staged.
   Loaded after site.css on index.html only (body.stage).

   Two surfaces, like a stage and its programme:
     the STAGE   — a dark oxblood field for the specimen (hero) and the dive,
                   fixed in both themes;
     the PAPER   — every other section, on the site's own theme tokens
                   (cream in light mode, charcoal in dark);
   and the LYSIS footer in Kente wine.
   Labels are mono and bracketed, "( Adsorption )"; display type is Fraunces
   at a light weight. Motion lives in stage.js; without it everything is static
   and in reading order. */

body.stage {
    --stage-bg: #120b08;
    --stage-ink: #f2ead8;
    --stage-ink-2: #cbbd9a;
    --stage-ink-3: #9c8a62;
    --wine: #4c1419;
    --wine-2: #3a0f13;
    --mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    --serif: var(--font-display, 'Fraunces', Georgia, serif);
}

/* smooth scrolling is Lenis's job once it runs */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* film grain over everything, very faint */
body.stage::after {
    content: ""; position: fixed; inset: -50%; z-index: 9990; pointer-events: none; opacity: .055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain 1.2s steps(6) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }

/* shared label: ( LIKE THIS ) */
.lbl, .lbl-inline { font: 500 .7rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.lbl-inline { margin-right: .8em; color: var(--gold); }

/* ---------------------------------------------------------------------
   PRELOADER
   --------------------------------------------------------------------- */
.pre { position: fixed; inset: 0; z-index: 9999; background: #efe7d5; color: #1a1209; display: grid; place-items: center;
    transition: transform 1s cubic-bezier(.76, 0, .24, 1); animation: preFail .5s 4s forwards; }
html.ready .pre { transform: translateY(-101%); }
html.pre-skip .pre { display: none; }
@keyframes preFail { to { transform: translateY(-101%); visibility: hidden; } }
.pre-word { display: flex; overflow: hidden; font: 300 clamp(4.5rem, 19vw, 17rem)/.95 var(--serif); letter-spacing: -.045em; }
.pre-word span { display: inline-block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
html.pre-in .pre-word span { transform: none; }
.pre-word span:nth-child(2) { transition-delay: .04s; } .pre-word span:nth-child(3) { transition-delay: .08s; }
.pre-word span:nth-child(4) { transition-delay: .12s; } .pre-word span:nth-child(5) { transition-delay: .16s; }
.pre-word span:nth-child(6) { transition-delay: .2s; } .pre-word span:nth-child(7) { transition-delay: .24s; }
.pre-meta { position: absolute; left: max(24px, 4vw); right: max(24px, 4vw); bottom: 7vh; display: flex; justify-content: space-between;
    font: 500 .72rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.pre-count { font-variant-numeric: tabular-nums; }
.pre-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.pre-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, #d4324b 0 33%, #f4c430 33% 66%, #1f9249 66%); }

/* ---------------------------------------------------------------------
   PILL NAV + FULL-SCREEN MENU
   --------------------------------------------------------------------- */
body.stage .pill { position: fixed; z-index: 9600; top: max(14px, env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px;
    background: rgba(18, 13, 9, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid rgba(244, 196, 48, .18); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); color: #f2ead8; }
body.stage .pill-btn, body.stage .pill-mark {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px;
    background: transparent; border: 0; color: inherit; cursor: pointer; text-decoration: none;
    font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
body.stage .pill-btn:hover, body.stage .pill-mark:hover { background: rgba(244, 196, 48, .12); color: #f4c430; }
body.stage .pill-btn:focus-visible, body.stage .pill-mark:focus-visible { outline: 2px solid #f4c430; outline-offset: 2px; }
body.stage .pill-mark { gap: 7px; padding: 0 16px; font: 600 .95rem/1 var(--serif); letter-spacing: .02em; text-transform: none; }
body.stage .pill-mark svg { width: 18px; height: 18px; color: #f4c430; }
body.stage .pill .nav-cmdk kbd { font: 500 .62rem/1 var(--mono); color: #cbbd9a; border: 1px solid rgba(244, 196, 48, .25); border-radius: 4px; padding: 3px 5px; background: none; }
body.stage .nav-toggle { display: inline-flex !important; }
.pill-lines { display: grid; gap: 4px; width: 16px; }
.pill-lines i { display: block; height: 1.6px; background: currentColor; transition: transform .35s; }
.nav-toggle[aria-expanded="true"] .pill-lines i:first-child { transform: translateY(2.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .pill-lines i:last-child { transform: translateY(-2.8px) rotate(-45deg); }

body.stage .nav-links.menu { position: fixed; inset: 0; z-index: 9500; margin: 0; list-style: none;
    display: flex; flex-direction: column; justify-content: center; gap: 0;
    padding: 90px max(24px, 8vw) 40px; background: #120b08; overflow-y: auto;
    clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), visibility 0s .7s;
    /* reset everything the old dropdown nav set */
    width: auto; height: auto; max-height: none; border: 0; box-shadow: none; transform: none; opacity: 1; align-items: stretch; }
body.stage .nav-links.menu.open { clip-path: inset(0); visibility: visible; transition: clip-path .7s cubic-bezier(.76, 0, .24, 1); }
body.stage .nav-links.menu li { list-style: none; border-top: 1px solid rgba(244, 196, 48, .12); }
body.stage .nav-links.menu li:not(.menu-foot) a {
    display: flex; align-items: baseline; gap: 1.2rem; padding: .35em 0; text-decoration: none; color: #f2ead8;
    font: 300 clamp(1.7rem, 4.6vh, 3.2rem)/1.08 var(--serif); letter-spacing: -.02em; text-transform: none; background: none;
    transform: translateY(40%); opacity: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s, color .2s; }
body.stage .nav-links.menu.open li a { transform: none; opacity: 1; }
body.stage .nav-links.menu.open li:nth-child(2) a { transition-delay: .03s; } body.stage .nav-links.menu.open li:nth-child(3) a { transition-delay: .06s; }
body.stage .nav-links.menu.open li:nth-child(4) a { transition-delay: .09s; } body.stage .nav-links.menu.open li:nth-child(5) a { transition-delay: .12s; }
body.stage .nav-links.menu.open li:nth-child(6) a { transition-delay: .15s; } body.stage .nav-links.menu.open li:nth-child(7) a { transition-delay: .18s; }
body.stage .nav-links.menu.open li:nth-child(8) a { transition-delay: .21s; } body.stage .nav-links.menu.open li:nth-child(9) a { transition-delay: .24s; }
body.stage .nav-links.menu.open li:nth-child(10) a { transition-delay: .27s; }
body.stage .nav-links.menu li a:hover, body.stage .nav-links.menu li a.active { color: #f4c430; }
body.stage .nav-links.menu li a::after { display: none; }
body.stage .nav-links.menu .mn { font: 500 .7rem/1 var(--mono); letter-spacing: .16em; color: #9c8a62; min-width: 2.2em; }
body.stage .nav-links.menu .ext { font-size: .5em; color: #9c8a62; }
body.stage .nav-links.menu .menu-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-top: 22px; margin-top: 8px; }
body.stage .nav-links.menu .menu-foot a, body.stage .nav-links.menu .menu-foot button {
    font: 500 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #cbbd9a; text-decoration: none;
    background: none; border: 0; padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; width: auto; height: auto; }
body.stage .nav-links.menu .menu-foot a:hover, body.stage .nav-links.menu .menu-foot button:hover { color: #f4c430; }
body.stage .nav-links.menu a:focus-visible, body.stage .nav-links.menu button:focus-visible { outline: 2px solid #f4c430; outline-offset: 4px; }
html.menu-open { overflow: hidden; }

/* the old bar's leftovers */
body.stage .scroll-progress { height: 2px; z-index: 9601; background: linear-gradient(90deg, #d4324b, #f4c430, #1f9249); }
body.stage .to-top { background: rgba(18, 13, 9, .88); color: #f4c430; border: 1px solid rgba(244, 196, 48, .25); box-shadow: none; }

/* ---------------------------------------------------------------------
   HERO: the specimen. Sticky inside .curtain; the prologue slides over it.
   --------------------------------------------------------------------- */
.curtain { position: relative; }
.stage-hero { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: var(--stage-ink);
    background: radial-gradient(85% 80% at 70% 46%, #3d1712 0%, #1d0f0b 42%, #0c0705 100%);
    --cov: 0; }
.stage-hero::after { /* a soft vignette, and the cover shading as paper slides over */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55)), rgba(0, 0, 0, calc(var(--cov) * .55)); }
.capsid { position: absolute; z-index: 1; top: 0; bottom: 0; right: -4vw; width: min(64vw, 1000px); }
.capsid-canvas { width: 100%; height: 100%; display: block; }
.capsid-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: .95; }
.capsid.is-live .capsid-still { display: none; }
.stage-hero-copy { position: absolute; z-index: 2; left: max(24px, 5vw); bottom: 17vh; max-width: min(46rem, 58vw);
    transform: translateY(calc(var(--cov) * -70px)); opacity: calc(1 - var(--cov) * 1.4); }
.lbl-stage { color: #e3cf98; display: flex; align-items: center; gap: 10px; margin-bottom: 1.4rem; }
.lbl-stage .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #1f9249; box-shadow: 0 0 10px #1f9249; }
.stage-name { margin: 0; font: 300 clamp(3rem, 8.2vw, 8.4rem)/.92 var(--serif); letter-spacing: -.04em; color: var(--stage-ink); }
.stage-name .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.stage-name .ln > span { display: inline-block; }
.stage-name .ln:last-child > span { font-style: italic; color: #f4c430; }
.stage-lede { margin: 1.6rem 0 0; max-width: 34rem; font: 400 clamp(1.02rem, 1.35vw, 1.2rem)/1.6 var(--font-body, Inter, sans-serif); color: var(--stage-ink-2); }
.stage-lede em { color: #f2ead8; font-style: italic; font-family: var(--serif); font-size: 1.08em; }
.stage-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 2rem; }
.pillbtn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px; border-radius: 999px; text-decoration: none;
    font: 500 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #120b08; background: #f2ead8;
    transition: background .25s, transform .25s; }
.pillbtn:hover { background: #f4c430; transform: translateY(-2px); }
.pillbtn-dark { background: var(--ink); color: var(--bg); }
.pillbtn:focus-visible, .textlink:focus-visible { outline: 2px solid #f4c430; outline-offset: 3px; }
.textlink { font: 500 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--stage-ink-2);
    text-decoration: underline; text-underline-offset: 5px; }
.textlink:hover { color: #f4c430; }
.stage-bar { position: absolute; z-index: 2; left: max(24px, 5vw); right: max(24px, 5vw); bottom: 4.5vh;
    display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    padding-top: 16px; border-top: 1px solid rgba(242, 234, 216, .14);
    font: 500 .68rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--stage-ink-3); opacity: calc(1 - var(--cov) * 2); }
.sb-acts { display: flex; gap: 26px; }
.sb-acts b { color: #f4c430; font-weight: 600; margin-right: 6px; }
.sb-clock b { color: var(--stage-ink); font-weight: 600; margin-left: 6px; font-variant-numeric: tabular-nums; }
.sb-begin { color: var(--stage-ink); text-decoration: none; border: 1px solid rgba(242, 234, 216, .25); border-radius: 999px; padding: 9px 14px; }
.sb-begin:hover { border-color: #f4c430; color: #f4c430; }
.sb-begin span { display: inline-block; animation: cueBob 1.8s ease-in-out infinite; }

/* the name rises once the preloader lifts */
html.js .stage-name .ln > span { transform: translateY(105%); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
html.js .stage-name .ln:last-child > span { transition-delay: .12s; }
html.ready .stage-name .ln > span { transform: none; }
html.js .stage-hero .lbl-stage, html.js .stage-lede, html.js .stage-ctas, html.js .stage-bar > * { opacity: 0; transform: translateY(16px); transition: opacity .9s .45s, transform .9s .45s cubic-bezier(.2, .8, .2, 1); }
html.ready .stage-hero .lbl-stage, html.ready .stage-lede, html.ready .stage-ctas, html.ready .stage-bar > * { opacity: 1; transform: none; }
html.js .capsid { opacity: 0; transform: scale(.92); transition: opacity 1.6s .2s, transform 1.8s .2s cubic-bezier(.2, .8, .2, 1); }
html.ready .capsid { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   PAPER sections: every section after the stage, on the theme's tokens
   --------------------------------------------------------------------- */
body.stage .paper, body.stage main > .section, body.stage .section-divider { position: relative; z-index: 1; background: var(--bg); }
body.stage .section-divider { margin: 0; border: 0; height: 1px; background: var(--border); }
.prologue { border-radius: 26px 26px 0 0; margin-top: -26px; padding: 18vh max(24px, 5vw) 12vh; box-shadow: 0 -30px 70px rgba(0, 0, 0, .3); }
.pro-row { display: grid; grid-template-columns: minmax(140px, 22%) minmax(0, 1fr); column-gap: 2rem; max-width: 1240px; margin: 0 auto 4.5rem; }
.pro-row .lbl { padding-top: .9em; }
.pro-text { margin: 0; max-width: 31em; font: 300 clamp(1.45rem, 2.55vw, 2.35rem)/1.32 var(--serif); letter-spacing: -.012em; color: var(--ink); }
.chip { display: inline; white-space: nowrap; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
    text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); cursor: default; outline: none; border-radius: 4px; }
.chip img { display: inline-block; height: .78em; width: 1.15em; object-fit: cover; border-radius: 3px; margin: 0 .22em 0 .1em; vertical-align: -.02em;
    box-shadow: 0 0 0 1px var(--border); transition: transform .3s; }
.chip:hover img, .chip:focus-visible img { transform: scale(1.25) rotate(-4deg); }
.chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.chip-link { cursor: pointer; }
.chip-link:hover { color: var(--gold); }
.pro-hint { max-width: 1240px; margin: -2.5rem auto 6rem; padding-left: calc(min(22%, 280px) + 2rem); font: 500 .62rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.peek { position: fixed; z-index: 9700; left: 0; top: 0; width: 260px; aspect-ratio: 4 / 3; pointer-events: none; border-radius: 10px; overflow: hidden;
    background: var(--bg-card); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); opacity: 0; transform: scale(.85) rotate(-3deg); transition: opacity .25s, transform .35s cubic-bezier(.2, .8, .2, 1); }
.peek.on { opacity: 1; transform: scale(1) rotate(-3deg); }
.peek img { width: 100%; height: 100%; object-fit: cover; display: block; }
.programme { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(140px, 22%) minmax(0, 1fr); column-gap: 2rem; row-gap: 1.6rem; }
.programme > .lbl { grid-row: span 4; padding-top: .5rem; }
.programme > * { grid-column: 2; }
.programme > .lbl { grid-column: 1; }
body.stage .programme .hero-stats { margin: 0; padding-top: 1.4rem; max-width: none; text-align: left; animation: none; opacity: 1; }
body.stage .programme .hero-stat { text-align: left; }
body.stage .programme .hero-stat-value { font: 300 clamp(2.2rem, 4vw, 3.4rem)/1 var(--serif); color: var(--ink); }
body.stage .programme .hero-proof { justify-content: flex-start; margin: 0; }
body.stage .programme .hero-availability { margin: 0; text-align: left; max-width: 44rem; }
body.stage .programme .now-badge { justify-self: start; margin: 0; }

/* section headers: the label left, a light display title right */
body.stage .section { padding-left: max(24px, 5vw); padding-right: max(24px, 5vw); }
body.stage .section-header { display: grid; grid-template-columns: minmax(140px, 22%) minmax(0, 1fr); column-gap: 2rem; text-align: left;
    max-width: 1240px; margin: 0 auto 3.5rem; }
body.stage .section-header > * { grid-column: 2; }
body.stage .section-label { grid-column: 1; grid-row: 1 / span 3; align-self: start; padding: .9em 0 0; margin: 0; border: 0; background: none;
    font: 500 .7rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); box-shadow: none; border-radius: 0; }
body.stage .section-label::before { content: "( "; } body.stage .section-label::after { content: " )"; }
body.stage .section-title { margin: 0; font: 300 clamp(2.3rem, 5.2vw, 4.6rem)/1.02 var(--serif); letter-spacing: -.03em; text-wrap: balance; }
body.stage .section-title .highlight { font-weight: 300; }
body.stage .section-subtitle { margin: 1.2rem 0 0; max-width: 40rem; text-align: left; }
html.js body.stage .section-title { clip-path: inset(0 0 100% 0); transform: translateY(30px); transition: clip-path 1.1s cubic-bezier(.2, .8, .2, 1), transform 1.1s cubic-bezier(.2, .8, .2, 1); }
html.js body.stage .section.visible .section-title { clip-path: inset(-10% 0 -20% 0); transform: none; }

/* ---------------------------------------------------------------------
   ACT II: the ring of tools (stage.js places the cards)
   --------------------------------------------------------------------- */
.act-ring { height: 320vh; }
.ring-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ring { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.ring-card { position: absolute; left: 50%; top: 50%; width: clamp(96px, 11vw, 168px); margin: 0; will-change: transform;
    transform: translate(-50%, -50%); }
.ring-card a { display: block; padding: 7px 7px 10px; background: #fbf8f1; border-radius: 4px; text-decoration: none; color: #1a1209;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 14px 30px rgba(0, 0, 0, .18); transition: transform .3s; }
.ring-card a:hover, .ring-card a:focus-visible { transform: translateY(-6px) scale(1.04); }
.ring-card a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ring-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.rc-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: #0d130a; }
.rc-img svg { display: block; width: 100%; height: 100%; }
.rc-no, .rc-name { display: block; font: 500 .56rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6d5c45; margin-top: 7px; }
.rc-name { margin-top: 2px; font: 500 .72rem/1.25 var(--font-body, Inter, sans-serif); letter-spacing: 0; text-transform: none; color: #1a1209;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ring-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(30rem, 52vw); text-align: center;
    display: grid; justify-items: center; gap: 1.2rem; z-index: 2; }
.ring-title { margin: 0; font: 300 clamp(1.4rem, 2.5vw, 2.2rem)/1.2 var(--serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
/* without the script: a plain grid, in reading order */
html:not(.ring-live) .act-ring { height: auto; padding: 12vh max(24px, 5vw); }
html:not(.ring-live) .ring-stage { position: static; height: auto; overflow: visible; display: flex; flex-direction: column-reverse; gap: 3rem; }
html:not(.ring-live) .ring { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; max-width: 1100px; margin: 0 auto; }
html:not(.ring-live) .ring-card { position: static; transform: none; width: auto; }
html:not(.ring-live) .ring-center { position: static; transform: none; width: auto; margin: 0 auto; }

/* ---------------------------------------------------------------------
   ACT III: the bench, step by step
   --------------------------------------------------------------------- */
.act-steps { padding: 16vh max(24px, 5vw) 14vh; }
.steps-head { display: grid; grid-template-columns: minmax(140px, 22%) minmax(0, 1fr); column-gap: 2rem; max-width: 1240px; margin: 0 auto 4rem; }
.steps-head .lbl { padding-top: .9em; }
.steps-title { margin: 0; max-width: 18em; font: 300 clamp(1.8rem, 3.6vw, 3.2rem)/1.12 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.steps { list-style: none; margin: 0 auto; padding: 0; max-width: 1240px; }
.step { display: grid; grid-template-columns: minmax(140px, 22%) minmax(0, .9fr) minmax(0, 1fr); column-gap: 2rem; align-items: baseline;
    padding: 1.6rem 0; border-top: 1px solid var(--border-strong); transition: opacity .6s; }
.step:last-child { border-bottom: 1px solid var(--border-strong); }
.step-n { font: 500 .7rem/1 var(--mono); letter-spacing: .16em; color: var(--ink-3); }
.step-w { font: 300 clamp(1.8rem, 4.2vw, 3.6rem)/1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.step-d { font-size: 1rem; line-height: 1.55; color: var(--ink-2); max-width: 30rem; }
/* unlit steps recede by colour, not opacity, so every line stays readable */
html.js .step .step-w, html.js .step .step-d { transition: color .6s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
html.js .step:not(.on) .step-w { color: var(--ink-3); transform: translateX(-.25em); }
html.js .step:not(.on) .step-d { color: var(--ink-3); }
html.js .step.seen:not(.on) .step-w { color: var(--ink-2); transform: none; }

/* ---------------------------------------------------------------------
   The dive keeps its own stage; only its label changes
   --------------------------------------------------------------------- */
body.stage .dive { z-index: 1; }
body.stage .dive-kicker { color: var(--stage-ink); letter-spacing: .14em; }

/* ---------------------------------------------------------------------
   LYSIS: contact and footer in Kente wine, with a membrane edge
   --------------------------------------------------------------------- */
body.stage #contact, body.stage footer {
    --bg: var(--wine); --bg-2: var(--wine-2); --bg-card: rgba(0, 0, 0, .18); --scrim: rgba(0, 0, 0, .22);
    --ink: #f6ecda; --ink-2: #e2cfa8; --ink-3: #c9ae86; --ink-4: #c9ae86; --gold: #f4c430; --gold-dim: rgba(244, 196, 48, .16);
    --green-text: #7fdc9f; --red-text: #ffb3be;
    --border: rgba(246, 236, 218, .16); --border-strong: rgba(246, 236, 218, .28);
    background: var(--wine); color: var(--ink); }
body.stage #contact { padding-top: 16vh; margin-top: 60px; max-width: none; }
body.stage #contact > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
body.stage #contact::before { /* the cell membrane, about to give */
    content: ""; position: absolute; left: 0; right: 0; top: -38px; height: 40px;
    background: radial-gradient(circle at 50% 100%, var(--wine) 0 17px, transparent 18px) 0 0 / 44px 40px repeat-x; }
body.stage #contact .section-title { font-size: clamp(2.8rem, 8vw, 7rem); }
body.stage footer { border-top: 1px solid rgba(246, 236, 218, .12); }
body.stage footer a { color: var(--ink-2); }

/* ---------------------------------------------------------------------
   CURSOR
   --------------------------------------------------------------------- */
.cur { position: fixed; z-index: 9800; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
    border: 1.5px solid rgba(244, 196, 48, .85); pointer-events: none; mix-blend-mode: difference;
    transition: width .3s, height .3s, margin .3s, background .3s, opacity .3s; display: grid; place-items: center; opacity: 0; }
.cur.on { opacity: 1; }
.cur.big { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(244, 196, 48, .9); border-color: transparent; }
.cur span { font: 600 .58rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #120b08; opacity: 0; transition: opacity .2s; }
.cur.big span { opacity: 1; }

/* ---------------------------------------------------------------------
   KENTE COLOUR
   Every section carries one of the three Kente accents. --acc is the
   saturated colour, for fills, rules and glows; --acc-t is the same hue at
   a shade that reads as text on the theme's background.
   --------------------------------------------------------------------- */
body.stage { --k-gold: #f7c52b; --k-green: #19b85a; --k-red: #e8304e;
    --acc: var(--k-gold); --acc-t: var(--gold); --acc-soft: rgba(247, 197, 43, .16);
    --kente-swatch: linear-gradient(90deg, var(--k-red) 0 30%, transparent 30% 35%, var(--k-gold) 35% 65%, transparent 65% 70%, var(--k-green) 70%); }
.k-green, body.stage #about, body.stage #publications, body.stage #tools, body.stage #recognition, body.stage #gallery, .pro-row:first-child, .step:nth-child(2), .step:nth-child(5) {
    --acc: var(--k-green); --acc-t: var(--green-text); --acc-soft: rgba(25, 184, 90, .15); }
.k-red, body.stage #tour, body.stage #talks, body.stage #teaching, body.stage #blog, .pro-row:nth-child(2), .step:nth-child(3) {
    --acc: var(--k-red); --acc-t: var(--red-text); --acc-soft: rgba(232, 48, 78, .14); }

/* the stage: near-black, lit gold behind the specimen, green and crimson at the wings */
.stage-hero { background:
    radial-gradient(42% 52% at 70% 46%, rgba(247, 197, 43, .30), transparent 70%),
    radial-gradient(55% 60% at 4% 104%, rgba(25, 184, 90, .30), transparent 70%),
    radial-gradient(48% 55% at 100% 0%, rgba(232, 48, 78, .34), transparent 72%),
    radial-gradient(90% 90% at 60% 50%, #1a0f0b 0%, #0b0705 100%); }
.stage-name .ln:last-child > span { background: linear-gradient(100deg, #ffd54a 0%, #f4a62a 38%, #ffe27a 55%, #f7c52b 75%, #ff9d3c 100%);
    background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: goldRun 9s ease-in-out infinite alternate; }
@keyframes goldRun { to { background-position: 100% 0; } }
.lbl-stage .live-dot { background: var(--k-green); box-shadow: 0 0 0 3px rgba(25, 184, 90, .25), 0 0 14px var(--k-green); }
.stage-bar { border-top: 0; }
.stage-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--kente-swatch); opacity: .85; }
.sb-acts span:nth-child(1) b { color: var(--k-gold); }
.sb-acts span:nth-child(2) b { color: #3fdc7e; }
.sb-acts span:nth-child(3) b { color: #ff6b82; }
.stage-ctas .pillbtn { background: var(--k-gold); color: #120b08; box-shadow: 0 8px 30px rgba(247, 197, 43, .35); }
.stage-ctas .pillbtn:hover { background: #ffe07a; }
.sb-begin:hover { border-color: var(--k-gold); }

/* the preloader is a sheet of Kente gold */
.pre { background: var(--k-gold); color: #120b08; }
.pre-bar i { background: linear-gradient(90deg, #120b08 0 33%, var(--k-red) 33% 66%, var(--k-green) 66%); }

/* pill and menu */
body.stage .pill { border-color: rgba(247, 197, 43, .3); }
body.stage .pill::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--kente-swatch); }
body.stage .nav-links.menu { background:
    radial-gradient(50% 60% at 100% 0%, rgba(232, 48, 78, .22), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(25, 184, 90, .22), transparent 70%), #0e0906; }
body.stage .nav-links.menu li:nth-child(3n+1) .mn { color: var(--k-gold); }
body.stage .nav-links.menu li:nth-child(3n+2) .mn { color: #3fdc7e; }
body.stage .nav-links.menu li:nth-child(3n) .mn { color: #ff6b82; }

/* labels: a woven swatch, then the section's accent */
/* the swatch sits on the first line whatever the top padding: positioned in the content box, nudged back into the left padding */
.lbl, body.stage .section-label { padding-left: 30px; background: var(--kente-swatch) no-repeat -30px .5em / 20px 4px; background-origin: content-box; color: var(--acc-t); }
.lbl-stage, .lbl-inline { padding-left: 0; background: none; }
body.stage .section-label::before, body.stage .section-label::after, .lbl::before, .lbl::after { color: var(--ink-3); }
body.stage .section-title .highlight { color: var(--acc-t); -webkit-text-fill-color: currentColor; background: none; }
html[data-theme="light"] body.stage .section-title .highlight { background: linear-gradient(transparent 62%, var(--acc-soft) 62% 92%, transparent 92%); }

/* prologue */
.chip { text-decoration-color: var(--acc); text-decoration-thickness: 2px; }
.chip img { box-shadow: 0 0 0 1.5px var(--acc); }
.chip-link:hover { color: var(--acc-t); }
.prologue { background: radial-gradient(60% 50% at 100% 0%, var(--acc-soft), transparent 70%), var(--bg); }
body.stage .programme .hero-stat:nth-child(1) .hero-stat-value { color: var(--acc-t); }
body.stage .programme .hero-stat:nth-child(2) .hero-stat-value { color: var(--green-text); }
body.stage .programme .hero-stat:nth-child(3) .hero-stat-value { color: var(--red-text); }
body.stage .programme .hero-stat { border-top: 3px solid var(--k-gold); padding-top: .9rem; }
body.stage .programme .hero-stat:nth-child(2) { border-top-color: var(--k-green); }
body.stage .programme .hero-stat:nth-child(3) { border-top-color: var(--k-red); }

/* Act II: each card is taped down with a strip of Kente colour */
.ring-card a { position: relative; }
.ring-card a::before { content: ""; position: absolute; left: 50%; top: -7px; width: 42%; height: 13px; transform: translateX(-50%) rotate(-3deg);
    background: var(--k-gold); opacity: .92; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ring-card:nth-child(3n+2) a::before { background: var(--k-green); transform: translateX(-50%) rotate(2deg); }
.ring-card:nth-child(3n) a::before { background: var(--k-red); transform: translateX(-50%) rotate(-1deg); }
.act-ring { background: radial-gradient(40% 45% at 50% 50%, var(--acc-soft), transparent 75%), var(--bg); }
.ring-title em { color: var(--acc-t); }

/* Act III: the lit step takes its accent, with a bar that draws in */
.step { position: relative; }
.step::before { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--acc);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.step.on::before, .step.seen::before { transform: scaleX(1); }
.step.seen:not(.on)::before { opacity: .45; }
.step-n { display: inline-grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; border: 1.5px solid var(--acc); color: var(--acc-t); letter-spacing: .04em; }
html.js .step.on .step-w { color: var(--acc-t); }
html.js .step.on .step-n { background: var(--acc); color: #120b08; }

/* Lysis: a saturated crimson, lit gold from above */
body.stage { --wine: #84122a; --wine-2: #5e0b1d; }
body.stage #contact { background: radial-gradient(60% 45% at 50% 0%, rgba(247, 197, 43, .22), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(25, 184, 90, .16), transparent 70%), var(--wine); }
body.stage #contact, body.stage footer { --ink-2: #f3dfb8; --ink-3: #ecd2a6; --ink-4: #ecd2a6; --acc: var(--k-gold); --acc-t: #f7c52b; --acc-soft: transparent; }
body.stage footer { background: var(--wine-2); }
body.stage footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--kente); }
body.stage footer { position: relative; }

/* the peeks need a pointer that hovers */
@media (hover: none) { .pro-hint { display: none; } }

/* ---------------------------------------------------------------------
   PHONES (and portrait tablets, where the head sits above the name)
   --------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: portrait) {
    .capsid { top: 8vh; bottom: auto; right: -4vw; width: 80vw; height: 50vh; }
    .stage-hero-copy { bottom: 14vh; max-width: 80vw; }
}
@media (max-width: 760px) {
    body.stage .pill { top: max(10px, env(safe-area-inset-top, 0px)); }
    body.stage .pill .nav-cmdk kbd, body.stage .pill-word { display: none; }
    body.stage .pill-btn { padding: 0 12px; }
    .capsid { top: 6vh; bottom: auto; right: -6vw; width: 100vw; height: 46vh; }
    .stage-hero-copy { left: 20px; right: 20px; bottom: 11vh; max-width: none; }
    .stage-name { font-size: clamp(2.6rem, 12vw, 4.2rem); }
    .lbl-stage { margin-bottom: .9rem; }
    .stage-lede { margin-top: 1.1rem; }
    .stage-ctas { margin-top: 1.4rem; }
    .stage-lede { font-size: 1rem; }
    .stage-bar { left: 20px; right: 20px; bottom: 3vh; font-size: .58rem; gap: 10px; }
    .sb-acts, .sb-clock { display: none; }
    .sb-begin { margin-left: auto; }
    .prologue { padding: 12vh 20px 9vh; }
    .pro-row, .programme, .steps-head, body.stage .section-header { grid-template-columns: 1fr; row-gap: .9rem; }
    .programme > *, .programme > .lbl, body.stage .section-header > *, body.stage .section-label { grid-column: 1; grid-row: auto; }
    .pro-row .lbl, .steps-head .lbl, body.stage .section-label { padding-top: 0; }
    .pro-text { font-size: 1.42rem; }
    .pro-hint { padding-left: 0; margin: -2rem auto 4rem; }
    .chip { white-space: normal; }
    .step { grid-template-columns: 2.6rem 1fr; row-gap: .5rem; }
    .step-d { grid-column: 2; }
    .ring-card { width: 72px; }
    .ring-card a { padding: 4px 4px 6px; }
    .rc-no { display: none; }
    .rc-name { font-size: .56rem; margin-top: 4px; }
    .ring-center { width: 58vw; gap: .8rem; }
    .ring-title { font-size: 1.1rem; }
    .ring-center .pillbtn { padding: 10px 14px; font-size: .62rem; }
    body.stage #contact .section-title { font-size: clamp(2.4rem, 12vw, 3.6rem); }
}

/* ---------------------------------------------------------------------
   REDUCED MOTION: no preloader, no grain drift, nothing waits to appear
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .pre { display: none; }
    body.stage::after { animation: none; }
    html.js .stage-name .ln > span, html.js .stage-hero .lbl-stage, html.js .stage-lede, html.js .stage-ctas, html.js .stage-bar > *, html.js .capsid { opacity: 1; transform: none; }
    html.js body.stage .section-title { clip-path: none; transform: none; }
    html.js .step .step-w { transform: none; transition: none; }
    .cur { display: none; }
    .stage-hero { position: relative; }
}