/* assets/css/site.css: GENERATED by tools/css/build.mjs from 11 stylesheets. Do not edit: change the sources and run the build. */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jetbrains-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Syncopate';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/syncopate-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Syncopate';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/syncopate-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands";--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}.fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-solid,.fab,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-solid,.fas{font-family:"Font Awesome 6 Free";font-weight:900}.fa-brands,.fab{font-family:"Font Awesome 6 Brands";font-weight:400}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../vendor/fontawesome/webfonts/fa-solid-900.woff2?v=f0556b6761) format("woff2")}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../vendor/fontawesome/webfonts/fa-brands-400.woff2?v=c73e44e149) format("woff2")}.fa-arrow-right:before{content:"\f061"}.fa-bolt:before{content:"\f0e7"}.fa-brain:before{content:"\f5dc"}.fa-certificate:before{content:"\f0a3"}.fa-chalkboard-user:before{content:"\f51c"}.fa-chevron-down:before{content:"\f078"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-flag-checkered:before{content:"\f11e"}.fa-graduation-cap:before{content:"\f19d"}.fa-instagram:before{content:"\f16d"}.fa-linkedin:before{content:"\f08c"}.fa-microphone-lines:before{content:"\f3c9"}.fa-paper-plane:before{content:"\f1d8"}.fa-play:before{content:"\f04b"}.fa-rocket:before{content:"\f135"}.fa-scroll:before{content:"\f70e"}.fa-signal:before{content:"\f012"}.fa-terminal:before{content:"\f120"}.fa-tiktok:before{content:"\e07b"}.fa-user-graduate:before{content:"\f501"}.fa-youtube:before{content:"\f167"}
:root{--bg-body:#050505;--bg-terminal:#0F1116;--text-primary:#E5E7EB;--text-muted:#4B5563;--accent-lime:#D4FF00;--accent-blue:#7DD3FF;--accent-teal:#00E5FF;--facet-founder:#D4FF00;--facet-founder-ink:#556B00;--facet-engineer:#00E5FF;--facet-influencer:#FF5F1F;--bg-bone:#F2F0E9;--text-dark:#1A1A1A;--text-light:#aaa;--terminal-max-width:700px;--font-stack:'Courier New',Courier,monospace;--font-size:1rem}
:root{--spring-smooth:cubic-bezier(0.22,1,0.36,1);--spring-smooth-dur:673ms;--spring-snappy:cubic-bezier(0.25,1.15,0.4,1);--spring-snappy-dur:513ms;--spring-quick:cubic-bezier(0.22,1,0.36,1);--spring-quick-dur:404ms;--spring-bouncy:cubic-bezier(0.3,1.4,0.4,1);--spring-bouncy-dur:728ms;--fade-dur:220ms;--font-display:'Syncopate',sans-serif;--font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;--font-text:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--text-body:clamp(1rem,0.96rem + 0.2vw,1.125rem);--text-small:0.9375rem;--text-meta:0.75rem;/* rem steps follow the reader's text size (see the media queries below);
       the vw cap keeps the longest word, SCIENTIST, on screen */
    --title-size: min(1.85rem, 12vw);

    /* Space and shape */
    --gutter: clamp(16px, 5vw, 72px);
    --nav-h: 52px;
    --nav-top: 16px;
    --nav-clear: calc(var(--nav-top) + var(--nav-h) + clamp(16px, 3vh, 32px));
    --stage-bottom: max(24px, env(safe-area-inset-bottom));
    --radius-card: 20px;
    --radius-pill: 999px;
    --sheet-radius: 32px;

    /* motion.js reads this: 1 = sticky stages, 0 = the static layout */
    --stage-mode: 1;
}

@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --spring-smooth: linear(0, 0.0194, 0.0678, 0.1333, 0.2077, 0.2853, 0.362, 0.4355, 0.5041, 0.5671, 0.624, 0.675, 0.7202, 0.76, 0.7948, 0.825, 0.8512, 0.8737, 0.8931, 0.9097, 0.9238, 0.9358, 0.946, 0.9547, 0.962, 0.9682, 0.9734, 0.9777, 0.9814, 0.9845, 0.9871, 0.9892, 0.991, 0.9926, 0.9938, 0.9949, 0.9957, 0.9965, 0.9971, 0.9976, 1);
        --spring-snappy: linear(0, 0.0181, 0.0646, 0.1296, 0.2056, 0.2868, 0.3688, 0.4487, 0.5243, 0.5942, 0.6578, 0.7147, 0.7648, 0.8085, 0.846, 0.878, 0.9048, 0.9271, 0.9455, 0.9604, 0.9723, 0.9817, 0.9891, 0.9946, 0.9988, 1.0017, 1.0038, 1.0051, 1.0059, 1.0062, 1.0063, 1.0061, 1.0057, 1.0053, 1.0048, 1.0043, 1.0038, 1.0033, 1.0028, 1.0024, 1);
        --spring-quick: linear(0, 0.0195, 0.0678, 0.1334, 0.2079, 0.2854, 0.3622, 0.4357, 0.5044, 0.5673, 0.6243, 0.6753, 0.7205, 0.7603, 0.795, 0.8252, 0.8514, 0.8739, 0.8933, 0.9098, 0.9239, 0.9359, 0.9461, 0.9548, 0.9621, 0.9682, 0.9734, 0.9778, 0.9815, 0.9845, 0.9871, 0.9893, 0.9911, 0.9926, 0.9938, 0.9949, 0.9958, 0.9965, 0.9971, 0.9976, 1);
        --spring-bouncy: linear(0, 0.0235, 0.084, 0.1688, 0.2674, 0.3716, 0.4753, 0.574, 0.6646, 0.7453, 0.8153, 0.8743, 0.9228, 0.9614, 0.9911, 1.0131, 1.0285, 1.0384, 1.0439, 1.0459, 1.0453, 1.0429, 1.0392, 1.0348, 1.03, 1.0252, 1.0206, 1.0164, 1.0125, 1.0092, 1.0064, 1.004, 1.0022, 1.0007, 0.9996, 0.9988, 0.9983, 0.998, 0.9979, 0.9979, 1);
    }
}

@media (max-width: 720px) {
    :root {
        --nav-h: 48px;
        --nav-top: max(10px, env(safe-area-inset-top));
        --sheet-radius: 24px;
        --radius-card: 16px;
    }
}

/* Themes: each stage sets its own ink, surface and facet colour */
[data-theme="dark"] {
    --ink: #F3F4F6;
    --muted: #A1A7B3;
    --line: rgba(255, 255, 255, 0.10);
    --line-strong: rgba(255, 255, 255, 0.22);
    --hover-tint: rgba(255, 255, 255, 0.07);
    --surface: rgba(255, 255, 255, 0.04);
    --surface-strong: rgba(255, 255, 255, 0.08);
    --card-shadow: none;
    --focus: var(--accent-lime);
}

[data-theme="light"] {
    --ink: #1A1A1A;
    --muted: #55585E;
    --line: rgba(0, 0, 0, 0.10);
    --line-strong: rgba(0, 0, 0, 0.24);
    --hover-tint: rgba(0, 0, 0, 0.05);
    --surface: #FFFFFF;
    --surface-strong: #FFFFFF;
    --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.07);
    --focus: #1A1A1A;
}

@media (min-width: 640px) { :root { --title-size: min(2.6rem, 12vw); } }
@media (min-width: 960px) { :root { --title-size: min(3.4rem, 12vw); } }
@media (min-width: 1280px) { :root { --title-size: min(4rem, 12vw); } }

/* --- 1b. SMOOTH SCROLL (Lenis, assets/vendor/lenis, MIT) --- */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
    overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* --- 2. THE STAGE SHELL ---
   <section data-stage data-theme data-facet> > .stage, with --own set in the
   section's own CSS (no inline styles:the CSP forbids them). A section scrolls for var(--own) while its stage is pinned,then the next section enters over it (it overlaps the last 100vh;a data-enter section overlaps 200vh,see below). The last section (data-stage="last") is one screen and ends the page. Scripts get enter / progress / exit through ANMABE.stage();the transitions below run on the scroll itself. */ [data-stage]{position:relative}.stage{position:relative;contain:paint;/* Clicks and double clicks on a stage's background select nothing; the
       text itself stays selectable */
    -webkit-user-select: none;
    user-select: none;
}

.stage :is(p, h1, h2, h3, h4, h5, li, blockquote, figcaption, dd, dt, td, th, time) {
    -webkit-user-select: text;
    user-select: text;
}

.vh-probe {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100vh;
    visibility: hidden;
    pointer-events: none;
}

/* Heights. A stage stays pinned for its own scroll (--own); the last 100vh of
   a pinned section is when the next one covers it. A stage with data-enter has
   a 100vh lead-in first, during which it is ALREADY pinned at the top (native
   sticky positioning, so nothing holds it from script) while it opens its own
   way over the stage before it. */
html.js:not(.motion-reduce) [data-stage] {
    height: calc(var(--own, 0vh) + 200vh);
}

html.js:not(.motion-reduce) [data-stage][data-enter] {
    height: calc(var(--own, 0vh) + 300vh);
}

/* Each stage lies above the one before it (and above the hero's fixed layers) */ html.js [data-stage]:nth-of-type(1){z-index:20}html.js [data-stage]:nth-of-type(2){z-index:30}html.js [data-stage]:nth-of-type(3){z-index:40}html.js [data-stage]:nth-of-type(4){z-index:50}html.js [data-stage]:nth-of-type(5){z-index:60}html.js:not(.motion-reduce) [data-stage="last"]{height:auto}/* The last stage's lead-in: room to stay pinned while it opens */
html.js:not(.motion-reduce) [data-stage="last"][data-enter]::after {
    content: '';
    display: block;
    height: 100vh;
}

html.js:not(.motion-reduce) [data-stage] + [data-stage] {
    margin-top: -100vh;
}

html.js:not(.motion-reduce) [data-stage] + [data-stage][data-enter] {
    margin-top: -200vh;
}

/* That overlap is two screens of empty box over the stage before it: only
   what the stage shows takes the pointer (its closed clip-path takes none) */
html.js:not(.motion-reduce) [data-stage][data-enter] {
    pointer-events: none;
}

html.js:not(.motion-reduce) [data-stage][data-enter] > .stage {
    pointer-events: auto;
}

html.js:not(.motion-reduce) [data-stage]:not([data-stage="last"]) > .stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: clip;
}

html.js:not(.motion-reduce) [data-stage="last"] > .stage {
    min-height: 100vh;
    min-height: 100dvh;
    overflow: clip;
}

html.js:not(.motion-reduce) [data-stage="last"][data-enter] > .stage {
    position: sticky;
    top: 0;
}

html.js:not(.motion-reduce) [data-stage][data-covered] > .stage {
    visibility: hidden;
}

html.js:not(.motion-reduce) [data-stage]:not([data-stage="last"]) > .stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 90;
    background: #000;
    opacity: 0;
    pointer-events: none;
}

/* The transitions:
   - sheet (default): the stage slides in with rounded top corners and a shadow
   - iris: a circle opens from the centre, like looking into space
   - reel: a vertical 9:16 frame appears, then grows to the whole screen
   - being covered: the stage steps back and dims, early, so the eye moves
     to what arrives; the arriving stage shows its surface first, then its
     [data-enter-part] content (1: the heading, 2: the rest)
   motion.js runs them as held Web Animations timed by the (Lenis) scroll in
   the same frame (html.fx), and settles the page if it is let go half way.
   The rules below are the fallback for browsers without Web Animations. */
/* Fallback (no Web Animations): the same looks from --enter and --exit */
html.js:not(.fx):not(.motion-reduce) [data-stage] + [data-stage]:not([data-enter]) > .stage {
    border-top-left-radius: calc((1 - var(--enter, 1)) * var(--sheet-radius));
    border-top-right-radius: calc((1 - var(--enter, 1)) * var(--sheet-radius));
    box-shadow: 0 -24px 72px -12px rgba(0, 0, 0, calc(0.55 * (1 - var(--enter, 1))));
}

html.js:not(.fx):not(.motion-reduce) [data-enter="iris"] > .stage {
    clip-path: circle(calc(var(--enter, 0) * var(--enter, 0) * 80vmax) at 50% 50%);
}

html.js:not(.fx):not(.motion-reduce) [data-enter="reel"] > .stage {
    --p1: clamp(0, calc(var(--enter, 0) / 0.4), 1);
    --p2: clamp(0, calc((var(--enter, 0) - 0.4) / 0.6), 1);
    --rh: calc(var(--p1) * 52vh + var(--p2) * 48vh);
    --rw: calc(var(--p1) * 29.25vh + var(--p2) * (100vw - 29.25vh));
    clip-path: inset(calc(50% - var(--rh) / 2) calc(50% - var(--rw) / 2) round calc((1 - var(--p2)) * 26px));
}

html.js:not(.fx):not(.motion-reduce) [data-stage][data-exiting] > .stage {
    transform: scale(calc(1 - 0.06 * var(--exit, 0)));
    transform-origin: 50% 35%;
}

html.js:not(.fx):not(.motion-reduce) [data-stage]:not([data-stage="last"]) > .stage::after {
    opacity: calc(var(--exit, 0) * 0.6);
}

/* Plain flow, nothing pinned: html.flow, set by boot.js and motion.js on short
   screens (600px tall or less) and when the reader's text is 1.5x or larger,where a pinned one-screen stage could not hold the text. Reduced motion and no JavaScript get the same plain layout their own way. */ html.flow{--stage-mode:0}html.js.flow [data-stage]{height:auto !important;margin-top:0 !important}html.js.flow [data-stage] > .stage{position:relative !important;height:auto !important;min-height:0;border-radius:0 !important;box-shadow:none !important;transform:none !important;translate:none !important;clip-path:none !important}html.js.flow [data-stage] > .stage::after,html.js.flow [data-stage]::after{display:none !important}html.js.flow [data-reveal]{opacity:1;translate:none}/* --- 3. THE SECTION HEADER (the same frame in all three facets) --- <header class="facet-head"> <p class="facet-eyebrow"><span class="facet-index">01</span> The Founder</p> <h2 class="facet-title">Founder Mode</h2> </header> */ .facet-head{max-width:52rem}.facet-eyebrow{display:flex;align-items:center;gap:0.75em;margin:0 0 0.9rem;font-family:var(--font-mono);font-size:var(--text-meta);font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--facet-ink,var(--facet-color,var(--ink)))}.facet-eyebrow .facet-index{padding:0.15em 0.5em;border:1px solid currentColor;border-radius:6px;line-height:1.3}.facet-title{margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--title-size);line-height:1.02;letter-spacing:-0.02em;text-transform:uppercase;color:var(--title-color,var(--ink))}/* --- 3b. THE TRIFECTA MARK --- Three circles in the facet colours. On dark they add up,so where all three overlap they make white:three facets,one whole. <span class="trifecta" aria-hidden="true"><i></i><i></i><i></i></span> */ .trifecta{--t:14px;position:relative;display:inline-block;flex:none;width:calc(var(--t) * 1.72);height:calc(var(--t) * 1.62);isolation:isolate}.trifecta i{position:absolute;width:var(--t);height:var(--t);border-radius:50%;mix-blend-mode:screen}.trifecta i:nth-child(1){left:0;top:0;background:var(--facet-founder)}.trifecta i:nth-child(2){right:0;top:0;background:var(--facet-engineer)}.trifecta i:nth-child(3){left:calc(50% - var(--t) / 2);bottom:0;background:var(--facet-influencer)}.facet-eyebrow::before{--d:7px;content:'';flex:none;width:calc(var(--d) * 2.6);height:calc(var(--d) * 2.3);background:radial-gradient(circle at center,var(--dot-1) 0 calc(var(--d) / 2 - 0.5px),transparent calc(var(--d) / 2)) 0 0 / var(--d) var(--d) no-repeat,radial-gradient(circle at center,var(--dot-2) 0 calc(var(--d) / 2 - 0.5px),transparent calc(var(--d) / 2)) 100% 0 / var(--d) var(--d) no-repeat,radial-gradient(circle at center,var(--dot-3) 0 calc(var(--d) / 2 - 0.5px),transparent calc(var(--d) / 2)) 50% 100% / var(--d) var(--d) no-repeat;--dot-1:var(--line-strong);--dot-2:var(--line-strong);--dot-3:var(--line-strong)}[data-facet="founder"] .facet-eyebrow::before{--dot-1:var(--facet-ink,var(--facet-color,var(--facet-founder)))}[data-facet="engineer"] .facet-eyebrow::before{--dot-2:var(--facet-color,var(--facet-engineer))}[data-facet="influencer"] .facet-eyebrow::before{--dot-3:var(--facet-color,var(--facet-influencer))}.card{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);box-shadow:var(--card-shadow);color:var(--ink)}.card-title{margin:0;font-family:var(--font-text);font-size:clamp(1.25rem,1rem + 0.9vw,1.75rem);font-weight:650;line-height:1.15;letter-spacing:-0.01em;color:var(--ink)}.card-text{margin:0;font-family:var(--font-text);font-size:var(--text-body);line-height:1.5;color:var(--muted)}.meta{font-family:var(--font-mono);font-size:var(--text-meta);font-weight:500;letter-spacing:0.08em;line-height:1.4;text-transform:uppercase;color:var(--muted)}.chip{display:inline-flex;align-items:center;gap:0.4em;padding:0.3em 0.75em;border:1px solid var(--line-strong);border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--text-meta);font-weight:600;letter-spacing:0.08em;line-height:1.4;text-transform:uppercase;color:var(--ink)}.btn{--btn-bg:var(--facet-color,var(--ink));--btn-fg:#0A0A0A;--btn-border:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:0.6em;min-height:44px;padding:0 1.25rem;border:1px solid var(--btn-border);border-radius:var(--radius-pill);background:var(--btn-bg);color:var(--btn-fg);font-family:var(--font-mono);font-size:0.8125rem;font-weight:600;letter-spacing:0.06em;line-height:1;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--fade-dur) ease,color var(--fade-dur) ease,border-color var(--fade-dur) ease,transform var(--spring-snappy-dur) var(--spring-snappy)}.btn:hover{background:color-mix(in srgb,var(--btn-bg) 86%,#fff)}.btn:active{transform:scale(0.97);transition-duration:var(--fade-dur),var(--fade-dur),var(--fade-dur),90ms;transition-timing-function:ease,ease,ease,ease-out}.btn .btn-arrow{transition:transform var(--spring-snappy-dur) var(--spring-snappy)}.btn:hover .btn-arrow{transform:translateX(3px)}.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-border:var(--line-strong)}.btn--ghost:hover{background:var(--hover-tint);border-color:var(--ink)}.btn--lg{min-height:52px;padding:0 1.75rem;font-size:0.875rem}/* --- 6. REVEALS --- [data-reveal] rises in once when it enters the viewport;data-reveal="n" staggers it n steps. motion.js sets --i and adds .is-in. */ html.js:not(.motion-reduce) [data-reveal]{opacity:0;translate:0 16px;transition:opacity 480ms ease,translate var(--spring-smooth-dur) var(--spring-smooth);transition-delay:calc(var(--i,0) * 45ms)}html.js:not(.motion-reduce) [data-reveal].is-in{opacity:1;translate:0 0}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:2px solid var(--focus,var(--accent-lime));outline-offset:3px}
*{box-sizing:border-box;margin:0;padding:0}/* No browser-initiated scroll jumps (scroll anchoring shifts the page when content above the viewport changes),and no "go back" on a sideways trackpad swipe. */ html{overflow-anchor:none;overscroll-behavior-x:none}body{overscroll-behavior-x:none}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.skip-link{position:absolute;left:1rem;top:-4rem;z-index:10000;padding:0.75rem 1rem;background:var(--accent-lime);color:var(--bg-body);font-family:'JetBrains Mono',monospace;font-size:0.85rem;text-decoration:none}.skip-link:focus{top:1rem}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus,var(--accent-lime));outline-offset:3px}body{background-color:var(--bg-body);color:var(--text-primary);font-family:var(--font-stack);font-size:var(--font-size);min-height:100vh;width:100vw;overflow-x:hidden;overflow-y:auto;display:block;position:relative}.hero-section{position:relative;z-index:10;text-align:center;mix-blend-mode:normal;pointer-events:none;height:100vh;height:100dvh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.anmabe-title{font-family:'Syncopate',sans-serif;font-weight:700;/* rem steps follow the reader's text size; the cap keeps the word (about
       5.65 em wide) inside the screen, so it never runs off it */
    font-size: min(2.6rem, (100vw - 32px) / 5.65);
    letter-spacing: -0.05em;
    line-height: 1;
    margin-bottom: 1rem;
    text-transform: uppercase;
    background: linear-gradient(180deg, #FFFFFF 30%, var(--accent-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; 
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
}

@media (min-width: 640px) {
    .anmabe-title { font-size: min(4.5rem, (100vw - 32px) / 5.65); }
}

@media (min-width: 1024px) {
    .anmabe-title { font-size: min(6.25rem, (100vw - 32px) / 5.65); }
}

@media (min-width: 1280px) {
    .anmabe-title { font-size: min(8rem, (100vw - 32px) / 5.65); }
}

.subtitle {
    font-family: 'JetBrains Mono',monospace;color:var(--accent-lime);font-size:clamp(0.75rem,2vw,1rem);letter-spacing:0.2em;text-transform:uppercase}.subtitle a{position:relative;padding:14px 2px;margin:-14px -2px;text-decoration:none;pointer-events:auto;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-position:50% calc(100% - 9px);background-repeat:no-repeat;transition:background-size var(--spring-smooth-dur) var(--spring-smooth)}.subtitle a:hover,.subtitle a:focus-visible{background-size:100% 1px}.hero-line{margin-top:1.4rem;padding:0 var(--gutter);font-family:var(--font-text);font-size:var(--text-body);line-height:1.5;color:#A1A7B3;text-wrap:balance}.hero-cue{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:10px;transform:translateX(-50%);font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:0.2em;text-transform:uppercase;color:#8A919C}.hero-cue-track{position:relative;width:1px;height:40px;overflow:hidden;background:rgba(255,255,255,0.14)}.hero-cue-dot{position:absolute;left:-1px;top:0;width:3px;height:12px;border-radius:2px;background:var(--accent-lime);animation:cue-run 2.4s var(--spring-smooth) infinite}@keyframes cue-run{0%{transform:translateY(-14px);opacity:0}20%{opacity:1}70%{transform:translateY(40px);opacity:0}100%{transform:translateY(40px);opacity:0}}html.flow .hero-cue{display:none}html.js:not(.motion-reduce) .anmabe-title,html.js:not(.motion-reduce) .subtitle,html.js:not(.motion-reduce) .hero-line,html.js:not(.motion-reduce) .hero-cue{transition:opacity 520ms ease,filter 620ms ease,translate var(--spring-smooth-dur) var(--spring-smooth),scale var(--spring-smooth-dur) var(--spring-smooth)}html.js:not(.motion-reduce) .subtitle{transition-delay:90ms}html.js:not(.motion-reduce) .hero-line{transition-delay:170ms}html.js:not(.motion-reduce) .hero-cue{transition-delay:420ms}html.js-loading:not(.motion-reduce) .anmabe-title{opacity:0;scale:1.06;filter:blur(12px) drop-shadow(0 0 20px rgba(255,255,255,0.1))}html.js-loading:not(.motion-reduce) .subtitle,html.js-loading:not(.motion-reduce) .hero-line,html.js-loading:not(.motion-reduce) .hero-cue{opacity:0;translate:0 10px}.anmabe-title{translate:var(--title-x,0px) var(--title-y,0px)}#cursor-blob{position:fixed;top:-200px;left:-200px;width:400px;height:400px;transform:translate3d(var(--glow-x,50vw),var(--glow-y,50vh),0);background:radial-gradient( circle,rgba(125,211,255,0.4) 0%,rgba(125,211,255,0.1) 40%,transparent 70% );filter:blur(40px);mix-blend-mode:screen;z-index:0;transition:none;will-change:transform;pointer-events:none}@media (max-width:720px){#cursor-blob{top:-140px;left:-140px;width:280px;height:280px}}.eq-field{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;contain:strict}.eq{position:absolute;left:0;top:0;color:#FFFFFF;color:color-mix(in srgb,#FFFFFF calc((1 - var(--lit,0)) * 100%),var(--accent-blue));opacity:0;transform:translate(-50%,-50%)}.eq svg{display:block;overflow:visible}.eq-sprite{position:absolute;width:0;height:0;overflow:hidden}.hero-section{-webkit-user-select:none;user-select:none}html.eq-grab{cursor:grab}html.eq-dragging,html.eq-dragging *{cursor:grabbing !important;-webkit-user-select:none !important;user-select:none !important}html.eq-live{touch-action:pan-y pinch-zoom}.eq-ripple{position:absolute;width:64px;height:64px;border:1px solid rgba(125,211,255,0.55);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}html.motion-reduce #cursor-blob{display:none}.facet-founder{color:var(--facet-founder)}.facet-engineer{color:var(--facet-engineer)}.facet-influencer{color:var(--facet-influencer)}.facet-sep{color:var(--text-muted)}
.site-nav{container:sitenav / inline-size;position:fixed;top:var(--nav-top);left:0;right:0;z-index:1000;display:flex;justify-content:center;padding:0 max(12px,env(safe-area-inset-left)) 0 max(12px,env(safe-area-inset-right));pointer-events:none}.nav-pill{--nav-bg:rgba(14,14,16,0.62);--nav-solid:#0E0E10;--nav-line:rgba(255,255,255,0.10);--nav-ink:#F3F4F6;--nav-muted:#A1A7B3;--on-founder:var(--facet-founder);--on-engineer:var(--facet-engineer);--on-influencer:#FF7A45;position:relative;display:flex;align-items:center;gap:2px;max-width:100%;height:var(--nav-h);padding:0 4px 0 20px;border:1px solid var(--nav-line);border-radius:var(--radius-pill);background:var(--nav-bg);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);box-shadow:0 12px 32px -14px rgba(0,0,0,0.45);pointer-events:auto;transition:background-color 400ms ease,border-color 400ms ease,box-shadow 400ms ease}html[data-theme="light"] .nav-pill{--nav-bg:rgba(255,255,255,0.74);--nav-solid:#FFFFFF;--nav-line:rgba(0,0,0,0.08);--nav-ink:#1A1A1A;--nav-muted:#55585E;--on-founder:var(--facet-founder-ink);--on-engineer:#00707F;--on-influencer:#C2410C;box-shadow:0 12px 32px -16px rgba(0,0,0,0.25)}/* Founder Mode's dark finale (Kairos Fracture) is gold, not lime */
html[data-theme="dark"][data-facet="founder"] .nav-pill {
    --on-founder: #E2B13C;
}

/* --- BRAND --- */
.nav-brand {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-right: 12px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--nav-ink);
    text-decoration: none;
    transition: color 400ms ease, opacity var(--fade-dur) ease;
}

.nav-brand:hover {
    opacity: 0.75;
}

/* The ANMABE dot */
.nav-brand::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-lime);
    box-shadow: 0 0 10px rgba(212, 255, 0, 0.6);
}

html[data-theme="light"] .nav-brand::after {
    background: var(--facet-founder-ink);
    box-shadow: none;
}

/* --- FACET LINKS --- */
.nav-list {
    display: flex;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-link {
    position: relative;
    z-index: 1;
    display: inline-grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 8px;
    height: 44px;
    min-width: 44px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    color: var(--nav-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        color 250ms ease,
        grid-template-columns var(--spring-smooth-dur) var(--spring-smooth),
        column-gap var(--spring-smooth-dur) var(--spring-smooth),
        transform var(--spring-snappy-dur) var(--spring-snappy);
}

.nav-link i {
    font-size: 0.85rem;
    justify-self: center;
}

.nav-label {
    min-width: 0;
    overflow: hidden;
    /* Taller than the glyphs, so only the width ever clips */
    line-height: 1.5;
    white-space: nowrap;
}

.nav-label > span {
    padding-right: 1px;
}

.nav-link:hover {
    color: var(--nav-ink);
}

.nav-link:active,
.nav-cta:active {
    transform: scale(0.96);
    transition-duration: 250ms, var(--spring-smooth-dur), var(--spring-smooth-dur), 90ms;
}

.nav-link[data-facet="founder"][aria-current] { color: var(--on-founder); }
.nav-link[data-facet="engineer"][aria-current] { color: var(--on-engineer); }
.nav-link[data-facet="influencer"][aria-current] { color: var(--on-influencer); }

/* --- CONTACT --- */
.nav-cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    min-width: 44px;
    margin-left: 6px;
    padding: 0 18px;
    border-radius: var(--radius-pill);
    background: var(--nav-ink);
    color: var(--nav-solid);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 400ms ease,
        color 400ms ease,
        transform var(--spring-snappy-dur) var(--spring-snappy);
}

.nav-cta:hover {
    background: color-mix(in srgb, var(--nav-ink) 84%, var(--nav-solid));
}

.nav-cta i {
    font-size: 0.8rem;
}

/* --- THE INDICATOR --- */
.nav-indicator {
    --ind-color: var(--nav-ink);
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 0;
    width: var(--ind-w, 0px);
    height: 44px;
    margin-top: -22px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--ind-color) 15%, transparent);
    transform: translateX(var(--ind-x, 0px));
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 250ms ease,
        background-color 400ms ease;
}

.nav-indicator.is-on {
    opacity: 1;
}

.nav-pill[data-facet="founder"] .nav-indicator { --ind-color: var(--on-founder); }
.nav-pill[data-facet="engineer"] .nav-indicator { --ind-color: var(--on-engineer); }
.nav-pill[data-facet="influencer"] .nav-indicator { --ind-color: var(--on-influencer); }

/* How far through the section you are */
.nav-progress {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--ind-color);
    opacity: 0.7;
    transform: scaleX(var(--facet-progress, 0));
    transform-origin: 0 50%;
}

/* --- PHONES: icons, and the label only for the facet you are in --- */
@media (max-width: 720px) {
    .nav-pill {
        width: 100%;
        padding: 0 2px 0 14px;
    }

    .nav-brand {
        margin-right: auto;
        font-size: 0.8rem;
        gap: 6px;
    }

    .nav-link {
        grid-template-columns: auto 0fr;
        column-gap: 0;
        padding: 0 10px;
        letter-spacing: 0.05em;
    }

    .nav-link[aria-current] {
        grid-template-columns: auto 1fr;
        column-gap: 7px;
    }

    .nav-cta {
        width: 44px;
        margin-left: 2px;
        padding: 0;
    }

    .nav-cta-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* 375-389 px: a few pixels tighter so the longest label (Influencer) fits */
@media (min-width: 375px) and (max-width: 389px) {
    .nav-pill {
        padding-left: 10px;
    }

    .nav-brand {
        font-size: 0.75rem;
    }

    .nav-link[aria-current] {
        padding: 0 8px;
    }

    .nav-cta {
        margin-left: 0;
    }
}

/* Narrow phones: icons only */
@media (max-width: 374px) {
    .nav-link[aria-current] {
        grid-template-columns: auto 0fr;
        column-gap: 0;
    }

    .nav-link {
        padding: 0 10px;
    }

    .nav-brand {
        font-size: 0.78rem;
        gap: 6px;
    }
}

@media (max-width: 299px) {
    .nav-brand::after {
        display: none;
    }

    .nav-pill {
        padding-left: 12px;
    }

    .nav-brand {
        margin-right: auto;
    }

    .nav-list {
        gap: 0;
    }

    .nav-link {
        padding: 0;
        justify-content: center;
    }
}

/* Large text on a phone: no room for a label next to the icons, so the nav
   shows icons only (each keeps its accessible name). rem follows the reader's text size,so this triggers at 2x text but not at the default size. */ @container sitenav (max-width:22rem){.nav-link[aria-current]{grid-template-columns:auto 0fr;column-gap:0}}html.flow .site-nav{position:absolute}
.quote-track{--own:110vh;width:100%}.quote-sticky-viewport{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:100vh;min-height:100dvh;padding:var(--nav-clear) var(--gutter) 2rem;/* Black rises in as the stage arrives over the hero's formulas */
    background-color: rgba(5, 5, 5, var(--enter, 1));
    background-image: radial-gradient(
        ellipse at center,
        rgba(20, 50, 80, calc(0.9 * var(--enter, 1))) 0%,
        transparent 68%
    );
}

/* --- TYPOGRAPHY --- */
.quote-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

.quote-text {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: min(1.6rem, 12vw);   /* rem steps follow the reader's text size */ line-height:1.2;text-transform:uppercase;color:#FFFFFF;text-wrap:balance}.quote-word{display:inline-block;opacity:calc(0.14 + 0.86 * var(--lit,0));transition:color 360ms ease,text-shadow 360ms ease}.quote-word:last-child.is-lit{color:var(--accent-lime);text-shadow:0 0 32px rgba(212,255,0,0.45)}.quote-author{margin-top:clamp(2rem,6vh,4rem);font-family:var(--font-mono);font-size:clamp(0.8rem,1.5vw,1rem);letter-spacing:0.1em;color:var(--accent-blue);opacity:0;translate:0 12px;transition:opacity 480ms ease,translate var(--spring-smooth-dur) var(--spring-smooth)}.quote-author.visible{opacity:1;translate:0 0}html:not(.js) .quote-author,html.motion-reduce .quote-author{opacity:1;translate:none}html:not(.js) .quote-sticky-viewport,html.motion-reduce .quote-sticky-viewport{background-color:var(--bg-body)}html.flow .quote-sticky-viewport{min-height:0;padding-top:calc(var(--nav-clear) + 2rem);padding-bottom:4rem}@media (min-width:640px){.quote-text{font-size:min(2.4rem,12vw)}}@media (min-width:1024px){.quote-text{font-size:3.2rem}}@media (min-width:1280px){.quote-text{font-size:4rem}}@media (min-width:1440px){.quote-text{font-size:4.5rem}}
.founder-section{--own:230vh;--facet-color:var(--facet-founder);--facet-ink:var(--facet-founder-ink);/* Kairos Fracture's own colour: the finale's accent instead of the lime. As text on #0B0B0C,and as a button under #0A0A0A text:9.9:1. */ --founder-gold:#E2B13C;--founder-gold-rgb:226 177 60;--night-dur:640ms;z-index:50}/* The finale:on Kairos Fracture the lights go out. founder.js sets data-theme="dark" on the section once the deck is well on its way to Kairos,so the nav turns with it. In the dark every accent of the section is gold (the nav keeps its own facet colours);the light cards keep their own light tokens. */ .founder-section[data-theme="dark"]{--facet-color:var(--founder-gold);--facet-ink:var(--founder-gold);--focus:var(--founder-gold)}.founder-card[data-theme="light"]{--facet-ink:var(--facet-founder-ink)}/* Each card's colours for its spotlights (section 7), sampled from the real
   pixels of its image: a and b light the two large spotlights, c and a the
   two smaller ones. bg is the bone, tinted toward the card (OKLab: the
   lightness barely moves, so every text on it keeps its contrast). */
.founder-card--air {
    --ambient-a: 90 59 165;        /* the indigo corner #5A3BA5 */
    --ambient-b: 180 118 214;      /* the orchid corner #B476D6 */
    --ambient-c: 132 87 188;       /* the violet between them #8457BC */
    --ambient-bg: 239 232 241;
}

.founder-card--book {
    --ambient-a: 223 141 152;      /* the brain's pink #DF8D98 */ --ambient-b:100 132 187;/* the brain's blue #6484BB */
    --ambient-c: 138 114 154;      /* the brain's violet #8A729A */ --ambient-bg:246 235 229}.founder-card--edu{--ambient-a:255 226 77;--ambient-b:248 216 72;--ambient-c:208 184 64;--ambient-bg:245 240 217}.founder-card--kairos{--ambient-a:226 177 60;--ambient-b:212 162 58;--ambient-c:176 126 38;--ambient-bg:244 238 222;--ambient-night:1}.founder-stage{container:founder-stage / inline-size;--col:min(36rem,100%);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;row-gap:clamp(28px,5vw,56px);padding:var(--nav-clear) var(--gutter) clamp(56px,10vh,120px);background:var(--bg-bone);color:var(--ink);font-family:var(--font-text)}@container founder-stage (min-width:880px){.founder-stage > *{--col:min(1180px,100% - 2 * clamp(48px,9%,240px))}}.founder-backdrop{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(26,26,26,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(26,26,26,0.035) 1px,transparent 1px);background-size:56px 56px;background-position:50% 0;-webkit-mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 20%,transparent 100%);mask-image:radial-gradient(ellipse 75% 65% at 50% 45%,#000 20%,transparent 100%)}.founder-head,.founder-deck,.founder-rail{position:relative;z-index:1}.founder-head{width:var(--col);max-width:none;justify-self:center}/* The light theme's focus ring (styles.css paints every ring lime) */
.founder-section a:focus-visible,
.founder-section button:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.founder-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- 2. THE CARDS (both layouts) --- */
.founder-track {
    list-style: none;
}

.founder-slot {
    container: founder-card / inline-size;
    display: grid;
    min-width: 0;
}

.founder-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.founder-media {
    position: relative;
    flex: none;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #E9E6DD;
}

.founder-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.founder-body {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 20px 22px;
}

.founder-body > * {
    margin: 0;
    max-width: 60ch;
}

/* The date sits on the image while the media is on top */
.founder-meta {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.founder-meta .chip {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.94);
    color: var(--facet-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.founder-card .card-title {
    overflow-wrap: anywhere;     /* a long name on a very narrow or zoomed screen */
    hyphens: auto;
    text-wrap: balance;
}

.founder-card .card-text {
    text-wrap: pretty;
}

.founder-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

/* On a light card the action is ink; lime stays on dark */
.founder-card .btn {
    --btn-bg: var(--ink);
    --btn-fg: #FFFFFF;
}

.founder-note {
    font-size: var(--text-meta);
    line-height: 1.45;
    color: var(--muted);
}

/* Media left, text right once the card is wide enough */
@container founder-card (min-width: 720px) {
    .founder-card {
        display: grid;
        grid-template-columns: 44% minmax(0, 1fr);
    }

    .founder-media {
        aspect-ratio: auto;
        min-height: 100%;
    }

    .founder-body {
        justify-content: center;
        gap: 14px;
        padding: clamp(28px, 5.5cqi, 64px);
    }

    .founder-meta {
        position: static;
    }

    .founder-meta .chip {
        border-color: color-mix(in srgb, var(--facet-ink) 45%, transparent);
        background: transparent;
        box-shadow: none;
    }

    .founder-actions {
        margin-top: 10px;
    }
}

/* --- 3. KAIROS FRACTURE: the finale, in stealth ---
   Black and gold, its own colours: the gold replaces the lime on the card
   (date, [CLASSIFIED], the mark, the button and the focus ring). */
.founder-card--kairos {
    --focus: var(--founder-gold);
    border-color: rgba(255, 255, 255, 0.08);
    background: #0B0B0C;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 16px 40px rgba(0, 0, 0, 0.16);
}

.founder-card--kairos .btn {
    --btn-bg: var(--founder-gold);
    --btn-fg: #0A0A0A;
}

.founder-card--kairos .founder-meta .chip {
    background: rgba(11, 11, 12, 0.86);
    color: var(--founder-gold);
    border-color: rgb(var(--founder-gold-rgb) / 0.36);
    box-shadow: none;
}

.founder-card--kairos .founder-meta .founder-chip-stealth {
    color: var(--ink);
    border-color: var(--line-strong);
}

/* The redacted visual: a dossier with its lines blacked out */
.founder-redacted {
    display: grid;
    place-items: center;
    background:
        radial-gradient(110% 90% at 20% 0%, rgba(255, 255, 255, 0.05), transparent 60%),
        #121214;
}

.founder-redacted-lines {
    position: absolute;
    inset: 18% 14%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9%;
}

.founder-redacted-lines span {
    display: block;
    height: clamp(8px, 9%, 16px);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
}

.founder-redacted-lines span:nth-child(1) { width: 46%; }
.founder-redacted-lines span:nth-child(2) { width: 88%; }
.founder-redacted-lines span:nth-child(3) { width: 72%; }
.founder-redacted-lines span:nth-child(4) { width: 94%; }
.founder-redacted-lines span:nth-child(5) { width: 58%; }

.founder-redacted-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 1px solid rgb(var(--founder-gold-rgb) / 0.4);
    border-radius: 50%;
    background: #0B0B0C;
    color: var(--founder-gold);
    font-size: 22px;
}

.founder-classified {
    font-family: var(--font-mono);
    font-size: 0.8125em;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--founder-gold);
}

.founder-redaction {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(100%, 22rem);
}

.founder-redaction span {
    display: block;
    height: 10px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
}

.founder-redaction span:last-child {
    width: 62%;
}

/* Room for the email field and its button that come later */
.founder-access {
    width: 100%;
    max-width: 30rem;
}

/* --- 4. THE STATIC LAYOUT: one column of cards --- */
.founder-section:not(.is-deck) .founder-track {
    display: grid;
    gap: clamp(16px, 2.5vw, 28px);
    width: min(60rem, 100%);
    justify-self: center;
}

.founder-section:not(.is-deck) .founder-head {
    width: min(60rem, 100%);
}

.founder-section:not(.is-deck) .founder-actions {
    margin-top: auto;
    padding-top: 6px;
}

@container founder-card (min-width: 540px) {
    .founder-section:not(.is-deck) .founder-card {
        display: grid;
        grid-template-columns: 40% minmax(0, 1fr);
        min-height: 30cqi;
    }

    .founder-section:not(.is-deck) .founder-media {
        aspect-ratio: auto;
        min-height: 100%;
    }

    .founder-section:not(.is-deck) .founder-body {
        justify-content: center;
        gap: 12px;
        padding: clamp(24px, 5cqi, 44px);
    }

    .founder-section:not(.is-deck) .founder-meta {
        position: static;
    }

    .founder-section:not(.is-deck) .founder-meta .chip {
        border-color: color-mix(in srgb, var(--facet-ink) 45%, transparent);
        background: transparent;
        box-shadow: none;
    }

    .founder-section:not(.is-deck) .founder-actions {
        margin-top: 6px;
    }
}

/* --- 5. THE DECK (pinned; founder.js) --- */
.founder-section.is-deck .founder-stage {
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: clamp(14px, 3.4vh, 40px);
    padding-bottom: var(--stage-bottom);
}

.founder-section.is-deck .founder-deck {
    container: founder-deck / size;
    display: grid;
    place-items: center;
    min-height: 0;
}

/* Every card sits in the same cell, so they all take the tallest one's height;the deck never grows past its row. */ .founder-section.is-deck .founder-track{/* --col in deck units (the deck is as wide as the stage's content box) */
    --card-w: min(36rem, 100cqw);
    --peek-shrink: 0.06;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: minmax(0, 1fr);
    column-gap: 10px;              /* founder.js reads it: the space between cards */
    width: var(--card-w);
    max-height: 100cqh;
}

@container founder-deck (min-width: 880px) {
    .founder-section.is-deck .founder-track {
        --card-w: min(1180px, 100cqw - 2 * clamp(48px, 9cqw, 240px));
        --peek-shrink: 0.1;
        column-gap: clamp(20px, 2cqw, 32px);
        min-height: min(var(--card-w) / 2.6, 100cqh);
    }
}

.founder-section.is-deck .founder-slot {
    grid-area: 1 / 1;
    min-height: 0;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    transition: filter 260ms ease;
}

/* Focus stays on the centred card: the neighbours are always soft (and
   dimmed by founder.js). The blur only changes when the active card does,
   on this short transition, never per frame. A neighbour is not a target:
   a tap on it does nothing (the rail, the arrows and Tab reach it). */
.founder-section.is-deck .founder-slot:not(.is-active) {
    filter: blur(3.5px);
    pointer-events: none;
}

/* Below the fold, before the sheet arrives: only the first card exists */
.founder-section.is-deck:not(.is-live) .founder-slot:not(.is-active) {
    visibility: hidden;
}

.founder-section.is-deck .founder-card {
    min-height: 0;
}

/* The media takes what the text leaves (stacked cards) */
.founder-section.is-deck .founder-media {
    flex: 1 1 auto;
    min-height: 0;
}

.founder-section.is-deck .founder-body {
    flex: none;
}

/* The centred card's text settles in;the neighbours' rests faint, so a
   peeking card is never a blank panel */
.founder-section.is-deck .founder-body > * {
    opacity: 0.45;
    translate: 0 8px;
    transition:
        opacity 160ms ease,
        translate 0s linear 160ms;
}

.founder-section.is-deck .founder-slot.is-active .founder-body > * {
    opacity: 1;
    translate: 0 0;
    transition:
        opacity 420ms ease,
        translate var(--spring-smooth-dur) var(--spring-smooth);
    transition-delay: calc(60ms + var(--i, 0) * 45ms);
}

.founder-body > :nth-child(2) { --i: 1; }
.founder-body > :nth-child(3) { --i: 2; }
.founder-body > :nth-child(4) { --i: 3; }
.founder-body > :nth-child(5) { --i: 4; }

/* Less height: tighter cards first, then the long texts clamped (never a
   button, never the affiliate disclosure). Stacked cards give up their image
   before their words. */
.founder-section.is-deck .founder-card .card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}

@container founder-deck (max-width: 879px) and (max-height: 440px) {
    .founder-section.is-deck .founder-body {
        gap: 8px;
        padding: 16px 18px 18px;
    }
}

@container founder-deck (max-width: 879px) and (max-height: 330px) {
    .founder-section.is-deck .founder-card .card-text {
        -webkit-line-clamp: 3;
    }

    .founder-section.is-deck .founder-redaction {
        display: none;
    }
}

@container founder-deck (max-width: 879px) and (max-height: 300px) {
    .founder-section.is-deck .founder-media {
        display: none;
    }

    .founder-section.is-deck .founder-body {
        flex: 1 0 auto;
    }

    .founder-section.is-deck .founder-meta {
        position: static;
    }

    .founder-section.is-deck .founder-card:not(.founder-card--kairos) .founder-meta .chip {
        border-color: color-mix(in srgb, var(--facet-ink) 45%, transparent);
        background: transparent;
        box-shadow: none;
    }

    .founder-section.is-deck .founder-actions {
        margin-top: auto;
        padding-top: 4px;
    }

    .founder-section.is-deck .founder-card .card-title {
        font-size: 1.125rem;
    }

    .founder-section.is-deck .founder-body {
        padding: 14px 16px 16px;
    }

    .founder-section.is-deck .founder-card .card-text {
        font-size: var(--text-small);
        -webkit-line-clamp: 5;
    }

    /* the book also carries its disclosure */
    .founder-section.is-deck .founder-card--book .card-text {
        -webkit-line-clamp: 2;
    }

    .founder-section.is-deck .founder-note {
        line-height: 1.35;
    }
}

@container founder-deck (min-width: 880px) and (max-height: 400px) {
    .founder-section.is-deck .founder-body {
        gap: 10px;
        padding: clamp(22px, 4cqi, 44px);
    }

    .founder-section.is-deck .founder-actions {
        margin-top: 4px;
    }
}

@container founder-deck (min-width: 880px) and (max-height: 300px) {
    .founder-section.is-deck .founder-body {
        gap: 8px;
        padding: 20px clamp(22px, 4cqi, 44px);
    }

    .founder-section.is-deck .founder-card .card-text {
        -webkit-line-clamp: 2;
    }

    .founder-section.is-deck .founder-redaction {
        display: none;
    }
}

/* --- 6. THE RAIL --- */
.founder-rail {
    width: min(var(--col), 44rem);
    justify-self: center;
}

.founder-rail[hidden] {
    display: none;
}

.founder-rail-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    list-style: none;
}

/* The line runs from the first dot to the last; the fill follows the deck.
   It stops at each dot's ring (a static mask),so the hollow dots show the stage through them,whatever its colour. */ .founder-rail-line{--gap:6px;/* the dot's radius */
    position: absolute;
    top: 13px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    overflow: hidden;
    background: rgba(26, 26, 26, 0.12);
    transition: background-color 360ms ease;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0 var(--gap),
        #000 var(--gap) calc(100% / 3 - var(--gap)),
        transparent calc(100% / 3 - var(--gap)) calc(100% / 3 + var(--gap)),
        #000 calc(100% / 3 + var(--gap)) calc(200% / 3 - var(--gap)),
        transparent calc(200% / 3 - var(--gap)) calc(200% / 3 + var(--gap)),
        #000 calc(200% / 3 + var(--gap)) calc(100% - var(--gap)),
        transparent calc(100% - var(--gap)));
    mask-image: linear-gradient(to right,
        transparent 0 var(--gap),
        #000 var(--gap) calc(100% / 3 - var(--gap)),
        transparent calc(100% / 3 - var(--gap)) calc(100% / 3 + var(--gap)),
        #000 calc(100% / 3 + var(--gap)) calc(200% / 3 - var(--gap)),
        transparent calc(200% / 3 - var(--gap)) calc(200% / 3 + var(--gap)),
        #000 calc(200% / 3 + var(--gap)) calc(100% - var(--gap)),
        transparent calc(100% - var(--gap)));
}

.founder-section[data-theme="dark"] .founder-rail-line {
    background: rgba(255, 255, 255, 0.16);
}

.founder-rail-fill {
    position: absolute;
    inset: 0;
    background: var(--facet-ink);
    transform: scaleX(0);
    transform-origin: 0 50%;
}

.founder-rail-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    min-height: 44px;
    padding: 8px 4px 6px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.3;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--fade-dur) ease;
}

/* A hollow ring; the fill is an inset shadow, so it can fade */
.founder-rail-dot {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(26, 26, 26, 0.28);
    border-radius: 50%;
    background: transparent;
    box-shadow: inset 0 0 0 4px transparent;
    transition:
        transform var(--spring-snappy-dur) var(--spring-snappy),
        box-shadow var(--fade-dur) ease,
        border-color var(--fade-dur) ease;
}

.founder-section[data-theme="dark"] .founder-rail-dot {
    border-color: rgba(255, 255, 255, 0.34);
}

.founder-rail-name {
    font-family: var(--font-text);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
}

.founder-rail-btn:hover {
    color: var(--ink);
}

.founder-rail-btn:hover .founder-rail-dot {
    border-color: var(--ink);
}

.founder-rail-btn.is-passed .founder-rail-dot {
    border-color: var(--facet-ink);
    box-shadow: inset 0 0 0 4px var(--facet-ink);
}

.founder-rail-btn[aria-current] {
    color: var(--ink);
    font-weight: 700;
}

.founder-rail-btn[aria-current] .founder-rail-name {
    font-weight: 600;
}

.founder-rail-btn[aria-current] .founder-rail-dot {
    border-color: var(--facet-ink);
    box-shadow: inset 0 0 0 4px var(--facet-ink);
    transform: scale(1.33);
}

/* Phones: the years only (the names stay for screen readers) */
@container founder-stage (max-width: 619px) {
    .founder-rail-name {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
}

/* --- 7. AMBIENT MODE (the deck only) ---
   Like an album cover lighting the room: the centred card tints the bone
   and four large spotlights in its colours drift around and behind the
   deck. founder.js blends the colours between neighbouring cards by the
   deck's position (written on the stage's background and on each spotlight
   only, never on the section), drifts the spotlights on slow paths of their
   own, and lets the pointer (or, on touch screens, the scroll) wake them:
   faster and brighter, then calm again. On Kairos Fracture the lights go
   out: a near-black layer crossfades in with the dark theme, in step with
   the nav, and the spotlights turn gold. The static layout (no JS, reduced
   motion, short screens) has none of it. */
.founder-night,
.founder-lights,
.founder-vignette {
    display: none;
}

/* founder.js writes the tinted bone inline; this is the first card's */ .founder-section.is-deck .founder-stage{background-color:rgb(239 232 241)}.founder-section.is-deck .founder-night,.founder-section.is-deck .founder-vignette{display:block;position:absolute;inset:0;pointer-events:none}.founder-section.is-deck .founder-night{opacity:0;background:#0B0B0C;transition:opacity var(--night-dur) ease}.founder-section.is-deck[data-theme="dark"] .founder-night{opacity:1}.founder-section.is-deck .founder-backdrop{transition:opacity var(--night-dur) ease}.founder-section.is-deck[data-theme="dark"] .founder-backdrop{opacity:0}/* Where the spotlights may shine (founder.js measures every edge in px). Narrow stages:one soft band,from under the header's text to over the
   rail (both span the width there). Wide stages: everywhere below the nav
   except two soft boxes, one around the header's text and one around the rail,so the lights rise beside the title and pool in the bottom corners. Either way no text ever sits on a light. A box is x ∩ y;the outer layer keeps (below the nav) − header box,the inner one everything − rail box. */ .founder-section.is-deck .founder-lights,.founder-section.is-deck .founder-lights-in{display:block;position:absolute;inset:0;pointer-events:none}.founder-section.is-deck .founder-lights{--t0:30%;--t1:36%;--b1:84%;--b0:90%;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent var(--t0),#000 var(--t1),#000 var(--b1),transparent var(--b0));mask-image:linear-gradient(to bottom,transparent var(--t0),#000 var(--t1),#000 var(--b1),transparent var(--b0))}@container founder-stage (min-width:880px){.founder-section.is-deck .founder-lights{--n0:70px;--n1:114px;--hx0:0px;--hx1:0px;--hx2:100%;--hx3:100%;--hy0:30%;--hy1:36%;-webkit-mask-image:linear-gradient(to bottom,transparent var(--n0),#000 var(--n1)),linear-gradient(#000,#000),linear-gradient(to right,transparent var(--hx0),#000 var(--hx1),#000 var(--hx2),transparent var(--hx3)),linear-gradient(to bottom,#000 var(--hy0),transparent var(--hy1));-webkit-mask-composite:source-in,source-out,source-in;mask-image:linear-gradient(to bottom,transparent var(--n0),#000 var(--n1)),linear-gradient(#000,#000),linear-gradient(to right,transparent var(--hx0),#000 var(--hx1),#000 var(--hx2),transparent var(--hx3)),linear-gradient(to bottom,#000 var(--hy0),transparent var(--hy1));mask-composite:intersect,subtract,intersect}.founder-section.is-deck .founder-lights-in{--rx0:0px;--rx1:0px;--rx2:100%;--rx3:100%;--ry0:82%;--ry1:88%;--ry2:100%;--ry3:100%;-webkit-mask-image:linear-gradient(#000,#000),linear-gradient(to right,transparent var(--rx0),#000 var(--rx1),#000 var(--rx2),transparent var(--rx3)),linear-gradient(to bottom,transparent var(--ry0),#000 var(--ry1),#000 var(--ry2),transparent var(--ry3));-webkit-mask-composite:source-out,source-in;mask-image:linear-gradient(#000,#000),linear-gradient(to right,transparent var(--rx0),#000 var(--rx1),#000 var(--rx2),transparent var(--rx3)),linear-gradient(to bottom,transparent var(--ry0),#000 var(--ry1),#000 var(--ry2),transparent var(--ry3));mask-composite:subtract,intersect}}.founder-section.is-deck .founder-light{--c:90 59 165;position:absolute;top:0;left:0;width:720px;height:560px;border-radius:50%;opacity:0.72;background:radial-gradient(closest-side,rgb(var(--c) / 0.95) 0%,rgb(var(--c) / 0.92) 10%,rgb(var(--c) / 0.83) 20%,rgb(var(--c) / 0.70) 30%,rgb(var(--c) / 0.553) 40%,rgb(var(--c) / 0.405) 50%,rgb(var(--c) / 0.273) 60%,rgb(var(--c) / 0.166) 70%,rgb(var(--c) / 0.087) 80%,rgb(var(--c) / 0.034) 90%,rgb(var(--c) / 0) 100%);will-change:transform,opacity}.founder-section.is-deck .founder-vignette{background:radial-gradient(ellipse 85% 80% at 50% 52%,rgb(0 0 0 / 0) 60%,rgb(0 0 0 / 0.03) 82%,rgb(0 0 0 / 0.06) 100%)}html.js:not(.motion-reduce) .founder-section.is-deck .founder-head [data-reveal]{transition:opacity 480ms ease,translate var(--spring-smooth-dur) var(--spring-smooth),color 180ms ease;transition-delay:calc(var(--i,0) * 45ms),calc(var(--i,0) * 45ms),calc(var(--night-dur) * 0.22)}
/* css/scientist.css Mad Scientist (#engineer):the résumé as a roadmap. Three layouts,one markup (index.html keeps every item as an <article>):- static (no JavaScript,reduced motion,short screens):the articles as cards,grouped by lane. This is the base of this file. - [data-view="graph"] (scientist.js,wide screens):an honest Gantt chart,one band per lane,time at true scale:a span is a bar exactly from start to end,an event without a duration a diamond;labels inside a bar when they fit,else beside it as plain text. A scanner sweeps it with scroll. - [data-view="list"] (scientist.js,phones):the same items as a year list. Both enhanced views open an item in the same panel (.sci-panel):from the right on the graph,as a bottom sheet on the list. */ .sci{--own:160vh;--facet-color:var(--facet-engineer);--title-color:#F2FAFC;--sci-bg:#030608;--sci-teal-soft:rgba(0,229,255,0.14);/* Lane identity:a small dot beside the lane's name, never colour alone
       (validated for colour-blind separation on --sci-bg) */
    --lane-research: #A08CFF;
    --lane-study: #F2E15A;
    --lane-work: #FF7EB6;
    --lane-projects: #00E5FF;
    --lane-compete: #FF9A4D;
}

.sci [data-lane="research"] { --lane: var(--lane-research); }
.sci [data-lane="study"] { --lane: var(--lane-study); }
.sci [data-lane="work"] { --lane: var(--lane-work); }
.sci [data-lane="projects"] { --lane: var(--lane-projects); }
.sci [data-lane="compete"] { --lane: var(--lane-compete); }

/* --- 2. STAGE, SKY, HEADER --- */
.sci-stage {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    padding: var(--nav-clear) var(--gutter) 72px;
    background:
        radial-gradient(90% 70% at 88% -12%, rgba(0, 229, 255, 0.075), transparent 62%),
        radial-gradient(70% 60% at -10% 110%, rgba(0, 229, 255, 0.04), transparent 60%),
        var(--sci-bg);
    color: var(--ink);
}

/* A faint, still star field (it no longer drifts with scroll: repainting dozens of
   full-screen gradients every frame made the section stutter) */
.sci-sky {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.55;
    background:
        radial-gradient(circle at 32.7% 15.8%, rgba(0, 229, 255, 0.59) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 36.8% 6.7%, rgba(0, 229, 255, 0.55) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 7.8% 9.9%, rgba(255, 255, 255, 0.41) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 22.9% 62.5%, rgba(255, 255, 255, 0.53) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 96.7% 5.6%, rgba(0, 229, 255, 0.41) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 12.5% 31.2%, rgba(0, 229, 255, 0.61) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 63.6% 37.5%, rgba(0, 229, 255, 0.38) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 21.2% 67.7%, rgba(255, 255, 255, 0.61) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 45.4% 30.4%, rgba(255, 255, 255, 0.46) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 57.3% 52.5%, rgba(255, 255, 255, 0.48) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 97.1% 12.6%, rgba(255, 255, 255, 0.42) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 48.9% 4.8%, rgba(255, 255, 255, 0.61) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 86.8% 31.7%, rgba(255, 255, 255, 0.61) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 45.7% 83.3%, rgba(255, 255, 255, 0.65) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 6.9% 69.7%, rgba(255, 255, 255, 0.72) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 28.9% 38.8%, rgba(0, 229, 255, 0.56) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 17.5% 12.5%, rgba(255, 255, 255, 0.41) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 25.3% 39.3%, rgba(0, 229, 255, 0.55) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 54.8% 87.6%, rgba(255, 255, 255, 0.48) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 41.7% 36.2%, rgba(255, 255, 255, 0.42) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 18.3% 23.7%, rgba(255, 255, 255, 0.62) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 26.7% 1.4%, rgba(255, 255, 255, 0.6) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 94.4% 68.7%, rgba(255, 255, 255, 0.65) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 6.3% 89.2%, rgba(255, 255, 255, 0.71) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 39.5% 40.1%, rgba(255, 255, 255, 0.38) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 7.6% 21.5%, rgba(255, 255, 255, 0.37) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 1% 15.8%, rgba(255, 255, 255, 0.36) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 86.7% 61.2%, rgba(0, 229, 255, 0.51) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 36.7% 13%, rgba(255, 255, 255, 0.56) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 48.4% 9.4%, rgba(255, 255, 255, 0.47) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 82.2% 16.8%, rgba(255, 255, 255, 0.59) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 15.4% 54.2%, rgba(255, 255, 255, 0.79) 0 1.2px, transparent 1.9px),
        radial-gradient(circle at 85.6% 69.2%, rgba(255, 255, 255, 0.43) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 76.6% 53.2%, rgba(255, 255, 255, 0.45) 0 0.8px, transparent 1.5px);
}

.sci-top {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 24px;
    row-gap: 16px;
}

.sci-head {
    grid-area: 1 / 1 / 2 / 3;
}

/* The title: solid near-white, with only a breath of teal */
.sci .facet-title {
    text-shadow: 0 0 32px rgba(0, 229, 255, 0.22);
}

/* --- 4. THE STATIC LAYOUT (base): lanes of cards --- */
.sci-map {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    margin-top: 48px;
}

.sci-lane-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.sci-lane-name::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lane);
}

.sci-lane-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: 16px;
    align-items: start;
}

.sci-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    padding: 20px;
    overflow-wrap: break-word;
}

.sci-title {
    margin: 0;
    font-family: var(--font-text);
    font-size: 1.125rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--ink);
    text-wrap: balance;
}

.sci-text {
    margin: 0;
    max-width: 62ch;
    font-family: var(--font-text);
    font-size: var(--text-small);
    line-height: 1.5;
    color: var(--muted);
}

.sci-meta {
    margin: 0;
}

.sci-where {
    display: inline-block; /* the place wraps as one piece */
}

.sci-where::before {
    content: '·';
    margin: 0 0.6em 0 0.35em;
}

.sci-actions {
    max-width: 100%;
    margin: 4px 0 0;
}

/* In a very narrow card (high zoom) the label wraps rather than overflow */
.sci-actions .btn {
    max-width: 100%;
    padding-block: 8px;
    white-space: normal;
    line-height: 1.25;
}

.sci-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0, 229, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.18);
    color: var(--facet-color);
    font-size: 1.125rem;
}

.sci-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
    background: #000;
    box-shadow: inset 0 0 0 1px var(--line);
}

.sci-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The video poster links out to YouTube: no embedded player, no third-party cookies */
.sci-video {
    color: #fff;
    text-decoration: none;
}

.sci-video img {
    transition: transform var(--spring-smooth-dur) var(--spring-smooth);
}

.sci-play {
    position: absolute;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.62);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    transition: background-color var(--spring-quick-dur) var(--spring-quick);
}

.sci-play .fa-play {
    font-size: 0.7rem;
    color: var(--facet-color);
}

@media (hover: hover) {
    .sci-video:hover img { transform: scale(1.03); }
    .sci-video:hover .sci-play { background: rgba(0, 0, 0, 0.8); }
}

/* --- 5. ENHANCED VIEWS: one screen, the map fills what the header leaves --- */
.sci[data-view] .sci-stage {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.sci[data-view] .sci-map {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: clamp(12px, 2vh, 32px);
}

.sci[data-view] .sci-lane {
    display: none;
}

.sci-graph,
.sci-listbox {
    display: none;
}

.sci[data-view="graph"] .sci-graph,
.sci[data-view="list"] .sci-listbox {
    display: block;
}

/* --- 6. THE ROADMAP: an honest Gantt chart --- */
/* While the panel pushes the roadmap left, its left edge fades instead of cutting */
@property --sci-edge {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

.sci[data-view="graph"] .sci-map {
    --sci-edge: 1;
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, var(--sci-edge)),
        #000 56px
    );
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, var(--sci-edge)),
        #000 56px
    );
    transition: --sci-edge var(--spring-smooth-dur) var(--spring-smooth);
}

.sci[data-view="graph"] .sci-map.is-shifted {
    --sci-edge: 0;
}

.sci-graph {
    /* The colour behind every label: labels knock it out of the lines they cross */
    --halo: 0 0 1px var(--sci-bg), 0 0 3px var(--sci-bg), 0 0 5px var(--sci-bg);
    position: absolute;
    inset: 0;
    transform: translateX(var(--shift, 0px));
    transition: transform var(--spring-smooth-dur) var(--spring-smooth);
}

.sci-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* Lanes are bands: every other one a whisper lighter, hairlines between */
.sci-band {
    fill: rgba(255, 255, 255, 0.022);
}

.sci-sep {
    stroke: rgba(255, 255, 255, 0.09);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

/* Years: a hairline. Quarters: a tick on the axis and a fainter line, so a
      bar of two or three months visibly reads as short */
.sci-yline {
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.sci-qline {
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.sci-qtick {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.sci-axis {
    position: absolute;
    inset: 0 0 auto;
    height: var(--axis-h, 30px);
    pointer-events: none;
}

.sci-axis-year {
    position: absolute;
    left: 0;
    top: 2px;
    transform: translateX(var(--x, 0px));
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* The lane names: a fixed column at the left */
.sci-lanecol {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sci-lane-label {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: translateY(calc(var(--y, 0px) - 50%));
    font-family: var(--font-text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    white-space: nowrap;
    color: #E4E7EC;
    transition:
        opacity var(--spring-smooth-dur) var(--spring-smooth),
        color var(--spring-quick-dur) var(--spring-quick);
}

.sci-lane-label::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lane);
}

.sci-lane-label.is-out {
    opacity: 0.35;
}

/* The row under the pointer: a soft band behind its lane (scientist.js) */
.sci-lane-glow {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: var(--h, 0px);
    transform: translateY(var(--y0, 0px));
    border-radius: 14px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--lane, #00E5FF) 11%, transparent),
        color-mix(in srgb, var(--lane, #00E5FF) 4%, transparent) 60%,
        transparent);
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--spring-smooth-dur) var(--spring-smooth),
        transform var(--spring-smooth-dur) var(--spring-smooth),
        height var(--spring-smooth-dur) var(--spring-smooth);
}

.sci-lane-glow.is-on {
    opacity: 1;
}

.sci-lane-glow:not(.is-on) {
    transition-property: opacity;
}
.sci-lane-label.is-pick {
    color: #FFF;
}

/* Today, and the scanner that sweeps up to it */
.sci-now,
.sci-scanner {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: var(--plot-bottom, 100%);
    pointer-events: none;
}

.sci-now {
    transform: translateX(var(--x, 0px));
}

.sci-now::before {
    content: "";
    position: absolute;
    top: var(--axis-h, 30px);
    bottom: 0;
    left: -0.5px;
    width: 1.5px;
    background: rgba(0, 229, 255, 0.75);
}

.sci-now-tag {
    position: absolute;
    top: 1px;
    left: 0;
    translate: -50% 0;
    padding: 2px 9px;
    border-radius: var(--radius-pill);
    background: #062A30;
    box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.6);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--facet-color);
    white-space: nowrap;
}

.sci-scanner {
    top: var(--axis-h, 30px);
    height: calc(var(--plot-bottom, 100%) - var(--axis-h, 30px));
    background: var(--facet-color);
    will-change: transform;
    transition: opacity 400ms ease;
}

/* The soft wake behind the scanner; at rest it hands over to the Now line */
.sci-scanner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 96px;
    background: linear-gradient(to left, rgba(0, 229, 255, 0.08), transparent);
}

.sci-scanner.is-rest {
    opacity: 0;
}

/* Links: invisible at rest, drawn in while one of their ends is hovered or focused */
.sci-svg--edges {
    z-index: 1;
}

.sci-edge {
    opacity: 0;
    transition: opacity var(--spring-quick-dur) var(--spring-quick);
}

.sci-edge.is-lit {
    opacity: 1;
}

.sci-edge-line {
    fill: none;
    stroke: var(--facet-color);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.sci-edge-end {
    fill: var(--facet-color);
}

/* Items. Each is a button over its whole extent (bar or diamond, label,
      notes), at least 44 px tall: short bars and milestones are easy to hit,
      though what they draw is small. The button itself draws nothing. */
.sci-nodes {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sci-node {
    --bar-fill: color-mix(in srgb, var(--lane) 24%, #0B0E12);
    --bar-edge: color-mix(in srgb, var(--lane) 62%, transparent);
    position: absolute;
    left: 0;
    top: 0;
    width: var(--w, 44px);
    height: var(--h, 44px);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate(var(--x, 0px), var(--y, 0px));
    transition:
        opacity var(--spring-smooth-dur) var(--spring-smooth),
        scale var(--spring-snappy-dur) var(--spring-snappy);
}

/* Not yet reached by the scanner: nothing to point at */
.sci-node:not(.is-on) {
    pointer-events: none;
}

/* A bar: exactly start → end on the axis */
.sci-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--bw, 0px);
    height: 28px;
    transform: translate(var(--bx, 0px), var(--by, 0px));
    pointer-events: none;
}

/* The part up to today. It grows from the start as the scanner passes. */
.sci-bar-done {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--dw, 0px);
    overflow: hidden;
    border-radius: 7px;
    background: var(--bar-fill);
    box-shadow: inset 0 0 0 1px var(--bar-edge);
    clip-path: inset(0 calc(100% - var(--grow, 0px)) 0 0 round 7px);
    transition:
        background-color var(--spring-quick-dur) var(--spring-quick),
        box-shadow var(--spring-quick-dur) var(--spring-quick);
}

.sci-node.is-full .sci-bar-done {
    clip-path: none;
}

.sci-bar.has-plan > .sci-bar-done,
.sci-bar.is-ongoing > .sci-bar-done {
    border-radius: 7px 0 0 7px;
}

/* Ongoing: the bar runs into the Now line and fades there */
.sci-bar.is-ongoing > .sci-bar-done {
    -webkit-mask-image: linear-gradient(
        to right,
        #000 calc(100% - var(--fade, 22px)),
        rgba(0, 0, 0, 0.1)
    );
    mask-image: linear-gradient(
        to right,
        #000 calc(100% - var(--fade, 22px)),
        rgba(0, 0, 0, 0.1)
    );
}

/* Planned (after today): lighter, a dashed outline */
.sci-bar-plan {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--px, 0px);
    width: var(--pw, 0px);
    overflow: hidden;
    border: 1px dashed color-mix(in srgb, var(--lane) 58%, transparent);
    border-left: 0;
    border-radius: 0 7px 7px 0;
    background: color-mix(in srgb, var(--lane) 7%, transparent);
    opacity: 0;
    transition: opacity 420ms ease;
}

.sci-graph.is-rest .sci-bar-plan {
    opacity: 1;
}

/* A highlighted part of a bar (the exchange semester) */
.sci-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--sx, 0px);
    width: var(--sw, 0px);
    background: color-mix(in srgb, var(--lane) 72%, #0B0E12);
}

.sci-bar-plan .sci-seg {
    background: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, var(--lane) 55%, transparent) 0 2px,
        transparent 2px 5px
    );
}

/* An end that means something (publication day): a pin */
.sci-pin {
    position: absolute;
    top: 50%;
    left: var(--bw, 0px);
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--lane);
    box-shadow: 0 0 0 2.5px var(--sci-bg);
    scale: 0;
    transition: scale var(--spring-bouncy-dur) var(--spring-bouncy);
}

.sci-node.is-full .sci-pin {
    scale: 1;
}

/* A milestone: a diamond on its date. It pops as the scanner reaches it. */
.sci-mark {
    position: absolute;
    left: 0;
    top: 0;
    width: 13px;
    height: 13px;
    margin: -6.5px 0 0 -6.5px;
    border-radius: 2px;
    background: var(--lane);
    box-shadow: 0 0 0 3px var(--sci-bg);
    translate: var(--mx, 0px) var(--my, 0px);
    rotate: 45deg;
    scale: 0;
    transition:
        scale var(--spring-bouncy-dur) var(--spring-bouncy),
        box-shadow var(--spring-quick-dur) var(--spring-quick);
}

.sci-node.is-on .sci-mark {
    scale: 1;
}

/* Labels: title, then date. Inside a bar on one line; beside it as plain
      text, the title over the date, never on a background */
.sci-label {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: max-content;
    translate: var(--lx, 0px) var(--ly, 0px);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 360ms ease;
}

.sci-node.is-labelled .sci-label {
    opacity: 1;
}

.sci-label-title {
    font-family: var(--font-text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.125rem;
    letter-spacing: -0.005em;
    color: #F4F6F8;
    transition: color var(--spring-quick-dur) var(--spring-quick);
}

.sci-label-date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #A9B0BC;
}

.sci-label.is-in .sci-label-date {
    margin-left: 8px;
    color: #CDD2DA;
}

.sci-label.is-out {
    text-shadow: var(--halo);
}

.sci-label.is-out .sci-label-title,
.sci-label.is-out .sci-label-date {
    display: block;
}

.sci-label.is-out .sci-label-date {
    margin-top: 1px;
}

.sci-label.is-left {
    text-align: right;
}

.sci-label.is-wrap {
    width: var(--label-max, auto);
    white-space: normal;
}

.sci-label.is-wrap .sci-label-title {
    text-wrap: balance;
}

.sci-label.is-wrap2 .sci-label-date {
    white-space: normal;
    text-wrap: balance;
}

/* Notes on a bar: where it happens, and the highlighted part */
.sci-note {
    position: absolute;
    left: 0;
    top: 0;
    translate: var(--nx, 0px) var(--ny, 0px);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #C3C9D2;
    text-shadow: var(--halo);
    pointer-events: none;
    opacity: 0;
    transition: opacity 360ms ease;
}

.sci-note--seg {
    color: var(--lane);
}

.sci-seg-tick {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--tw, 0px);
    height: 4px;
    translate: var(--tx, 0px) var(--ty, 0px);
    border: 1px solid var(--lane);
    border-bottom: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 360ms ease;
}

.sci-seg-tick.is-below {
    border-top: 0;
    border-bottom: 1px solid var(--lane);
}

.sci-node.is-on .sci-note:not(.sci-note--seg),
.sci-node.is-seg .sci-note--seg,
.sci-node.is-seg .sci-seg-tick {
    opacity: 1;
}

/* Hover and focus: the item steps forward */
@media (hover: hover) {
    .sci-node:hover {
        --bar-fill: color-mix(in srgb, var(--lane) 34%, #0B0E12);
        --bar-edge: var(--lane);
    }

    .sci-node:hover .sci-label-title {
        color: #FFF;
    }
}

/* One item and its neighbours step forward; the rest steps back */
.sci-graph .sci-node.is-lit {
    --bar-edge: color-mix(in srgb, var(--lane) 88%, transparent);
}

.sci-graph .sci-node.is-hot,
.sci-graph .sci-node[aria-expanded="true"] {
    --bar-fill: color-mix(in srgb, var(--lane) 36%, #0B0E12);
    --bar-edge: var(--lane);
}

.sci-graph .sci-node.is-hot .sci-mark,
.sci-graph .sci-node[aria-expanded="true"] .sci-mark {
    box-shadow:
        0 0 0 3px var(--sci-bg),
        0 0 0 4.5px var(--lane);
}

.sci-graph.is-focusing .sci-node.is-on:not(.is-lit) {
    opacity: 0.28;
}

.sci-graph .sci-node.is-on.is-out {
    opacity: 0.22;
}

/* An item's links into other lanes stay lit while it is pointed at */ .sci-graph .sci-node.is-on.is-out.is-lit{opacity:1}.sci-node:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.sci-node:active{scale:0.985;transition-duration:var(--spring-smooth-dur),90ms}.sci-listbox{position:absolute;inset:0;overflow:hidden}.sci-listbox.is-scroll{bottom:var(--list-cut,0px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.sci-rail{position:absolute;left:57px;top:var(--rail-top,0px);width:2px;height:var(--rail-h,0px);border-radius:1px;background:rgba(255,255,255,0.1);pointer-events:none}.sci-rail-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom,rgba(0,229,255,0.35),var(--facet-color));transform-origin:50% 0;transform:scaleY(var(--fill,0))}.sci-list,.sci-year-items{margin:0;padding:0;list-style:none}.sci-list{max-width:40rem}.sci-listbox.is-cols .sci-list{max-width:none;columns:2;column-gap:56px}.sci-listbox.is-cols .sci-year{break-inside:avoid}.sci-listbox.is-cols .sci-rail{display:none}.sci-year{display:grid;grid-template-columns:48px minmax(0,1fr);padding:0}.sci-year + .sci-year{border-top:1px solid var(--line)}.sci-year-label{padding-top:16px;font-family:var(--font-mono);font-size:var(--text-meta);letter-spacing:0.06em;color:var(--muted);opacity:0;transition:opacity 320ms ease}.sci-year.is-on .sci-year-label{opacity:1}.sci-row{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:12px;width:100%;min-height:44px;padding:4px 0;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;translate:0 8px;transition:opacity 320ms ease,translate var(--spring-smooth-dur) var(--spring-smooth),background-color var(--spring-quick-dur) var(--spring-quick),transform var(--spring-snappy-dur) var(--spring-snappy)}.sci-row.is-on{opacity:1;translate:0 0}/* Scrolled out of the list's box: out of the way until it scrolls back in */
.sci-listbox .sci-row.is-away,
.sci-listbox .sci-year-label.is-away {
    opacity: 0;
}

.sci-row:active {
    transform: scale(0.98);
    transition-duration: 320ms, var(--spring-smooth-dur), var(--fade-dur), 90ms;
}

.sci-row[aria-expanded="true"] {
    background: var(--hover-tint);
}

.sci-row-dot {
    justify-self: center;
    width: 12px;
    height: 12px;
    border: 2px solid var(--lane);
    border-radius: 50%;
    background: var(--sci-bg);
    box-shadow: 0 0 0 3px var(--sci-bg);
}

/* A milestone (no known duration): a diamond, as on the chart */
.sci-row-dot.is-mark {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    rotate: 45deg;
}

.sci-row-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sci-row-title {
    font-family: var(--font-text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink);
    text-wrap: balance;
}

.sci-row-meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.25;
}

.sci-row-lane,
.sci-row-date {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}

/* A long range (a paper's dates) wraps rather than overflow a narrow phone */ .sci-row-date{white-space:normal}.sci-row-lane::after{content:'\00a0·'}.sci-scrim{position:absolute;inset:0;z-index:6;background:rgba(0,0,0,0.55);opacity:0;pointer-events:none;transition:opacity var(--spring-smooth-dur) var(--spring-smooth)}.sci[data-view="list"] .sci-scrim.is-open{opacity:1;pointer-events:auto}.sci-panel{position:absolute;z-index:7;top:var(--map-top,160px);right:var(--gutter);display:flex;flex-direction:column;width:min(380px,42%);max-height:calc(100% - var(--map-top,160px) - var(--stage-bottom));border:1px solid var(--line-strong);border-radius:var(--radius-card);background:rgba(9,13,17,0.86);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);box-shadow:0 30px 80px -20px rgba(0,0,0,0.8),0 0 0 1px rgba(0,0,0,0.4);color:var(--ink);visibility:hidden;transform:translateX(calc(100% + var(--gutter) + 48px));transition:transform var(--spring-smooth-dur) var(--spring-smooth),visibility 0s linear var(--spring-smooth-dur)}.sci-panel.is-open{visibility:visible;transform:none;transition:transform var(--spring-smooth-dur) var(--spring-smooth),visibility 0s}.sci-panel.is-dragging{transition:none}.sci-grab{display:none}.sci-panel-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:0;padding:16px 20px 24px;overflow-y:auto;overscroll-behavior:contain;transition:opacity 160ms ease}.sci-panel-body.is-swapping{opacity:0}.sci-panel-body > .sci-media{margin-bottom:4px}.sci-panel-body > .sci-icon{width:52px;height:52px;border-radius:14px;font-size:1.3rem}.sci-panel-body > .sci-icon,.sci-panel-body > .sci-kicker:first-child{margin-right:44px}.sci-kicker{display:flex;align-items:center;gap:8px;margin:4px 0 -4px}.sci-kicker::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--lane)}.sci-panel .sci-title{font-size:clamp(1.25rem,1.05rem + 0.6vw,1.5rem);line-height:1.2;outline-offset:4px}.sci-panel .sci-title:focus{outline:none}.sci-panel .sci-title:focus-visible{outline:2px solid var(--focus);border-radius:4px}.sci-panel .sci-text{font-size:var(--text-body);color:#B9BFC9}.sci-panel .sci-actions{margin-top:8px}.sci-close{position:absolute;z-index:2;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(20,26,32,0.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--spring-quick-dur) var(--spring-quick),transform var(--spring-snappy-dur) var(--spring-snappy)}.sci-close::before{content:'';position:absolute;inset:-4px}.sci-close svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}@media (hover:hover){.sci-close:hover{background:rgba(40,48,56,0.9)}}.sci-close:active{transform:scale(0.94);transition-duration:var(--fade-dur),90ms}.sci[data-view="list"] .sci-panel{top:auto;right:0;bottom:0;left:0;width:auto;max-height:calc(100% - var(--nav-clear) + 8px);border-width:1px 0 0;border-radius:24px 24px 0 0;background:rgba(11,15,19,0.94);transform:translateY(calc(100% + 32px))}.sci[data-view="list"] .sci-panel.is-open{transform:translateY(var(--drag,0px))}.sci[data-view="list"] .sci-grab{display:block;flex:none;height:22px;touch-action:none;cursor:grab}.sci[data-view="list"] .sci-grab::before{content:'';display:block;width:36px;height:5px;margin:9px auto 0;border-radius:3px;background:rgba(255,255,255,0.28)}.sci[data-view="list"] .sci-close{top:14px;right:14px}.sci[data-view="list"] .sci-panel-body{padding:4px var(--gutter) max(28px,calc(env(safe-area-inset-bottom) + 16px))}html.motion-reduce .sci-sky{translate:none}
.yapper-section{--facet-color:var(--facet-influencer);--yap-bg:#0C0806;--ink:#F6F1EE;--muted:#A39A93;--faint:#857C76;--line:rgba(255,226,210,0.10);--line-strong:rgba(255,226,210,0.22);--hover-tint:rgba(255,226,210,0.07);--surface:rgba(255,226,210,0.035);--sheet-bg:#1A110C;--live:#3FD47A;--live-ink:#74E3A0;--onair:#FF5F1F;--onair-ink:#FF8A5C;--yap-max:1600px;--gap:clamp(10px,1.6vh,20px);--gap-foot:clamp(10px,1.6vh,16px);--pad:6px;--reel-gap:10px;--bar:58px;--show-min:calc(118px * 16 / 9 + 2 * var(--pad) + var(--bar));--reel-comfort:150px;--stat-size:2rem;--vh-delta:0px;--w:clamp(118px,min(64vw,calc((100cqh - var(--vh-delta) - 2 * var(--pad) - var(--bar)) * 9 / 16)),260px);--foot-h:51px;position:relative;z-index:100;color:var(--ink);font-family:var(--font-text)}@supports (height:100dvh){.yapper-section{--stage-vh:100dvh;--vh-delta:calc(100dvh - 100svh)}}@supports not (height:1cqh){.yapper-section{--w:clamp(132px,38vw,200px)}}@media (hover:none){.yapper-section{--bar:0px}}.yapper-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;row-gap:var(--gap-foot);min-height:100vh;min-height:var(--stage-vh,100vh);padding:var(--nav-clear) max(var(--gutter),calc((100% - var(--yap-max)) / 2)) var(--stage-bottom);background-color:var(--yap-bg);color:var(--ink)}.yapper-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 50% 55% at 72% 42%,rgba(255,95,31,0.11),rgba(255,95,31,0) 70%),radial-gradient(ellipse 45% 40% at 8% 100%,rgba(255,140,50,0.05),rgba(255,140,50,0) 70%)}.yapper-bg::after{content:'';position:absolute;inset:0;opacity:0.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.yapper-main,.yap-footer{position:relative;z-index:1;min-width:0}.yapper-main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(var(--show-min),1fr) auto;grid-template-areas:"intro" "show" "links";row-gap:var(--gap)}.yap-intro{grid-area:intro;min-width:0}.yap-show{grid-area:show;min-width:0}.yap-links{grid-area:links;min-width:0}.yap-links{display:flex;flex-direction:column;gap:var(--gap);container:links / inline-size}.yapper-head .facet-eyebrow{margin-bottom:0.6rem}.yap-stat{display:flex;align-items:center;gap:14px;margin:var(--gap) 0 0}.stat-num{flex:none;font-family:var(--font-text);font-size:var(--stat-size);font-weight:650;line-height:1;letter-spacing:-0.025em;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;white-space:nowrap;color:var(--ink)}.stat-cap{display:flex;flex-wrap:wrap;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;min-height:40px}.stat-label{font-size:0.9375rem;line-height:1.25rem;color:var(--muted);white-space:normal}.stat-label i{margin-right:0.3em;color:var(--ink)}/* "● LIVE" (yapper.js adds it only while the feed is fresh;when it was updated is its tooltip,and read out) */ .stat-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--text-meta);font-weight:500;letter-spacing:0.06em;line-height:1rem;text-transform:uppercase;white-space:nowrap;color:var(--muted);opacity:0;transition:opacity 480ms ease}.stat-live.is-on{opacity:1}.stat-live[hidden]{display:none}.stat-live > .onair-sep,.stat-live > .live-age{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.live-tag{display:inline-flex;align-items:center;gap:6px;padding:0 7px 0 6px;border:1px solid rgba(63,212,122,0.36);border-radius:var(--radius-pill);background:rgba(63,212,122,0.07);font-weight:700;letter-spacing:0.12em;color:var(--live-ink)}.live-dot{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--live)}.live-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--live);opacity:0;animation:yap-live 2.4s cubic-bezier(0.22,1,0.36,1) infinite}@keyframes yap-live{0%{transform:scale(1);opacity:0.5}70%,100%{transform:scale(2.6);opacity:0}}.yapper-section:not(.is-onscreen) .live-dot::after{animation-play-state:paused}.stat-num.is-odo{letter-spacing:0}.odo{display:inline-flex;align-items:flex-end;gap:0.07em;-webkit-user-select:none;user-select:none}.odo-cell{position:relative;display:inline-block;width:0.74em;height:1.2em;overflow:hidden;border-radius:0.13em;background:linear-gradient(180deg,#33241B 0%,#241911 49.5%,#1B120C 50.5%,#281C14 100%);box-shadow:inset 0 0 0 1px rgba(255,226,210,0.07),inset 0 1px 0 rgba(255,226,210,0.12),inset 0 -1px 0 rgba(0,0,0,0.5),0 10px 22px -12px rgba(0,0,0,0.9)}/* The drum's curve: the digits fade at the tile's top and bottom edges */ .odo-cell::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(27,18,12,0.7),transparent 22%,transparent 78%,rgba(27,18,12,0.7));pointer-events:none}.odo-cell::after{content:'';position:absolute;left:0;right:0;top:calc(50% - 0.5px);z-index:2;height:1px;background:rgba(0,0,0,0.6);box-shadow:0 1px 0 rgba(255,226,210,0.05);pointer-events:none}.odo-sep{display:inline-block;min-width:0.3em;text-align:center;color:var(--muted)}.odo-sep::before{content:attr(data-c)}.odo-strip{display:block;transform:translateY(calc(var(--d,0) * -10%));transition:transform 1.25s cubic-bezier(0.2,0.9,0.25,1);transition-delay:calc(var(--k,0) * 70ms)}.odo-strip::before{content:'0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9';display:block;line-height:1.2em;white-space:pre;text-align:center}.yap-h{margin:0;font-family:var(--font-text);font-size:1.0625rem;font-weight:650;line-height:1.2;letter-spacing:-0.01em;color:var(--ink)}.onair-sign{display:inline-flex;align-items:center;gap:8px;margin:0;padding:4px 10px 4px 9px;border:1px solid rgba(255,95,31,0.5);border-radius:6px;background:rgba(255,95,31,0.07);box-shadow:0 0 22px -8px rgba(255,95,31,0.5);font-family:var(--font-mono);font-size:var(--text-meta);font-weight:700;letter-spacing:0.2em;line-height:1rem;text-transform:uppercase;white-space:nowrap;color:var(--onair-ink)}.onair-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--onair);box-shadow:0 0 6px 1px rgba(255,95,31,0.7)}.yap-show{position:relative;display:flex;flex-direction:column;justify-content:center;container-type:size}.yap-reels{min-width:0}.reel-rail{position:relative;display:flex;gap:var(--reel-gap);margin:0 calc(-1 * var(--gutter));padding:var(--pad) var(--gutter);list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}.reel-rail::-webkit-scrollbar{display:none}html:not(.js) .reel-rail{scrollbar-width:thin}html:not(.js) .reel-rail::-webkit-scrollbar{display:initial}.reel-rail.is-gliding{scroll-snap-type:none}.reel-item{flex:0 0 var(--w);min-width:0;scroll-snap-align:start}.reel-item:last-child{scroll-snap-align:end}.reel{position:relative;display:block;aspect-ratio:9 / 16;overflow:hidden;isolation:isolate;border-radius:14px;background:#1C130E;color:#FFFFFF;text-decoration:none;box-shadow:0 20px 44px -26px rgba(0,0,0,0.9);-webkit-tap-highlight-color:transparent;transition:transform var(--spring-smooth-dur) var(--spring-smooth);container-type:inline-size}.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--spring-smooth-dur) var(--spring-smooth)}.reel::before{content:'';position:absolute;inset:auto 0 0;z-index:1;height:min(210px,72%);background:linear-gradient(to top,rgba(10,6,4,0.92) 0,rgba(10,6,4,0.84) 66px,rgba(10,6,4,0.5) 124px,rgba(10,6,4,0.16) 172px,rgba(10,6,4,0) 100%);pointer-events:none}.reel::after{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,236,224,0.09);pointer-events:none}.reel-title{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;font-size:0.875rem;font-size:clamp(0.75rem,0.25rem + 5cqi,1.0625rem);/* grows with the reader's text too */
    overflow-wrap: break-word;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@container (min-width: 200px) {
    .reel-title {
        left: 16px;
        right: 16px;
        bottom: 15px;
    }
}

/* Two quiet pills: Instagram and the date; the views where they are known */
/* A card is its cover and title. The views come with the pointer (never on
   touch, where nothing would reveal them); the platform and month are read
   out, not shown. */
.reel-meta {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity var(--fade-dur) ease,
        transform var(--spring-snappy-dur) var(--spring-snappy);
}

.reel-meta .reel-pill:not(.reel-views) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.reel:focus-visible .reel-meta { opacity: 1; transform: none; }

@media (hover: hover) and (pointer: fine) {
    .reel:hover .reel-meta { opacity: 1; transform: none; }
}

.reel-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    padding: 4px 9px 4px 8px;
    border-radius: var(--radius-pill);
    background: rgba(10, 6, 4, 0.66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: 1rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.reel-pill i { font-size: 12px; }
.reel-views { padding-left: 9px; }

.reel-play {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: rgba(12, 8, 6, 0.42);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    font-size: 17px;
    opacity: 0;
    transform: scale(0.88);
    transition:
        opacity var(--fade-dur) ease,
        transform var(--spring-snappy-dur) var(--spring-snappy);
}

.reel-play i { margin-left: 3px; }   /* optical centre of the triangle */

@media (hover: hover) and (pointer: fine) {
    .reel:hover { transform: translateY(-4px); }
    .reel:hover img { transform: scale(1.03); }
    .reel:hover .reel-play { opacity: 1; transform: none; }
}

.reel:focus-visible { outline-offset: 4px; }
.reel:focus-visible .reel-play { opacity: 1; transform: none; }

/* Press: in fast, back on the spring */
.reel:active {
    transform: translateY(-2px) scale(0.985);
    transition-duration: 90ms;
    transition-timing-function: ease-out;
}

/* A reel that arrives from the live feed settles in */
.reel-item.is-new .reel {
    animation: yap-arrive var(--spring-smooth-dur) var(--spring-smooth) both;
}

@keyframes yap-arrive {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
}

/* --- 7. THE COUNTER ROW: a label, the counter and two round buttons --- */
.rail-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    margin-top: calc(var(--bar) - 44px);
}

.rail-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1rem;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--muted);
}

.rail-label i {
    font-size: 13px;
    color: var(--ink);
}

.rail-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.rail-controls[hidden] { display: none; }

.rail-count {
    margin-right: 8px;
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    white-space: nowrap;
    color: var(--muted);
}

.rail-btn {
    width: 44px;
    padding: 0;
    background: var(--surface);
    transition:
        background-color var(--fade-dur) ease,
        border-color var(--fade-dur) ease,
        opacity var(--fade-dur) ease,
        transform var(--spring-snappy-dur) var(--spring-snappy);
}

.rail-btn i { font-size: 13px; }
.rail-btn--prev i { transform: rotate(90deg); }
.rail-btn--next i { transform: rotate(-90deg); }

.rail-btn[aria-disabled="true"] {
    opacity: 0.32;
    cursor: default;
}

.rail-btn[aria-disabled="true"]:hover {
    background: var(--surface);
    border-color: var(--line-strong);
}

.rail-btn[aria-disabled="true"]:active { transform: none; }

/* Touch screens swipe: no buttons, no counter */
@media (hover: none) {
    .rail-bar { display: none; }
}

/* --- 8. FOLLOW: one filled button, the other platforms a quiet line --- */
.yap-follow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.follow-main {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 24px 0 20px;
    border-radius: var(--radius-pill);
    background: var(--facet-color);
    color: #0A0A0A;                 /* 6.5:1 on the orange */
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.005em;
    text-decoration: none;
    box-shadow: 0 12px 30px -14px rgba(255, 95, 31, 0.75);
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--fade-dur) ease,
        box-shadow var(--fade-dur) ease,
        transform var(--spring-snappy-dur) var(--spring-snappy);
}

.follow-main i { font-size: 18px; }

@media (hover: hover) and (pointer: fine) {
    .follow-main:hover {
        background: color-mix(in srgb, var(--facet-color) 86%, #fff);
        box-shadow: 0 16px 34px -14px rgba(255, 95, 31, 0.9);
    }
}

.follow-main:active {
    transform: scale(0.96);
    transition-duration: var(--fade-dur), var(--fade-dur), 90ms;
    transition-timing-function: ease, ease, ease-out;
}

.follow-main:focus-visible { outline-offset: 3px; }

/* "Also on TikTok, YouTube and LinkedIn": small text, full-size targets */
.follow-also {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--muted);
}

.follow-also a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--fade-dur) ease;
}

.follow-also a:hover { text-decoration-color: currentColor; }

/* --- 9. ON AIR: the sign, the newest entries, "+N more" --- */
.yap-onair {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.onair-head {
    display: flex;
    flex-wrap: wrap;   /* large text: «N appearances» moves under the sign */
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 26px;
}

/* "+1 more": a quiet text button with a full 44 px target */
.onair-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-height: 44px;
    margin: -9px -10px -9px 0;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: 1rem;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color var(--fade-dur) ease,
        transform var(--spring-snappy-dur) var(--spring-snappy);
}

.onair-more[hidden] { display: none; }
.onair-more:hover { background: var(--hover-tint); }

.onair-more i {
    font-size: 10px;
    transform: rotate(-90deg);
    transition: transform var(--spring-snappy-dur) var(--spring-snappy);
}

@media (hover: hover) and (pointer: fine) {
    .onair-more:hover i { transform: rotate(-90deg) translateY(3px); }
}

.onair-more:active {
    transform: scale(0.96);
    transition-duration: var(--fade-dur), 90ms;
    transition-timing-function: ease, ease-out;
}

.onair-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.onair-list > li + li { border-top: 1px solid var(--line); }
.onair-list > li[hidden] { display: none; }

/* Two lines, like a programme guide: the title; then who and when, and
   the action on the right */
.onair-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title title"
        "meta  cta";
    align-items: baseline;
    gap: 3px 14px;
    padding: 9px 0;
    color: var(--ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--spring-snappy-dur) var(--spring-snappy);
}

.onair-meta,
.onair-cta {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    letter-spacing: 0.08em;
    line-height: 1rem;
    text-transform: uppercase;
}

.onair-meta {
    grid-area: meta;
    min-width: 0;
    font-weight: 500;
    color: var(--muted);
}

/* In a narrower column the kind ("Podcast") is left to screen readers */
@container links (max-width: 489px) {
    .onair-kind {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

.onair-sep { color: var(--faint); }

.onair-title {
    grid-area: title;
    justify-self: start;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--fade-dur) ease;
}

.onair-cta {
    grid-area: cta;
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    white-space: nowrap;
    font-weight: 600;
    color: var(--onair-ink);
}

.onair-cta i {
    transition: transform var(--spring-snappy-dur) var(--spring-snappy);
}

@media (hover: hover) and (pointer: fine) {
    .onair-item:hover .onair-title { text-decoration-color: currentColor; }
    .onair-item:hover .onair-cta i { transform: translateX(3px); }

    /* On the page the action waits for the pointer (in the full list it stays) */
    .onair-list .onair-cta {
        opacity: 0;
        transition: opacity var(--fade-dur) ease;
    }

    .onair-list .onair-item:hover .onair-cta,
    .onair-list .onair-item:focus-visible .onair-cta { opacity: 1; }
}

/* Touch: the action stays, quiet, so Follow is the only orange call */
@media (hover: none) {
    .onair-list .onair-cta { color: var(--muted); }
}

.onair-item:active {
    transform: scale(0.985);
    transition-duration: 90ms;
    transition-timing-function: ease-out;
}

.onair-item:focus-visible { outline-offset: 2px; }

/* Narrow columns: tighter tracking keeps who, when and the action on one line */
@container links (max-width: 379px) {
    .onair-meta,
    .onair-cta { letter-spacing: 0.04em; }
}

/* A very narrow column (portrait tablets): the action on its own line */
@container links (max-width: 309px) {
    .onair-item {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "title" "meta" "cta";
    }
}

/* --- 10. THE FULL LIST: a popover by the sign (a bottom sheet on phones),
   inside the stage (no position: fixed: the stage moves) --- */
.onair-scrim {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(6, 4, 3, 0.6);
    opacity: 0;
    transition: opacity 320ms ease;
}

.onair-sheet {
    position: absolute;
    left: var(--sheet-x, 0);
    top: var(--sheet-y, 0);
    z-index: 21;
    width: var(--sheet-w, 360px);
    max-height: var(--sheet-max, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 20px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    background: var(--sheet-bg);
    box-shadow: 0 32px 80px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.3);
    color: var(--ink);
    opacity: 0;
    transform: translateY(6px) scale(0.96);
    transform-origin: var(--sheet-ox, 100%) var(--sheet-oy, 0);
    transition:
        opacity 220ms ease,
        transform var(--spring-smooth-dur) var(--spring-smooth);
}

.onair-scrim[hidden],
.onair-sheet[hidden] { display: none; }

.yapper-section.sheet-open .onair-scrim { opacity: 1; }

.yapper-section.sheet-open .onair-sheet {
    opacity: 1;
    transform: none;
}

.onair-sheet:focus { outline: none; }

/* The full list in detail: who, kind and when; the title; the action */
.onair-sheet .onair-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "meta" "title" "cta";
    gap: 3px;
    padding: 10px 0;
}

.onair-sheet-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -4px -10px 6px 0;
}

.onair-sheet-count {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1rem;
    text-transform: uppercase;
    color: var(--muted);
}

/* × drawn in CSS (no icon font glyph for it) */
.onair-close {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--ink);
    cursor: pointer;
    transition:
        background-color var(--fade-dur) ease,
        transform var(--spring-snappy-dur) var(--spring-snappy);
}

.onair-close::before,
.onair-close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 1.5px;
    margin: -0.75px 0 0 -8px;
    border-radius: 1px;
    background: currentColor;
    transform: rotate(45deg);
}

.onair-close::after { transform: rotate(-45deg); }
.onair-close:hover { background: var(--hover-tint); }

.onair-close:active {
    transform: scale(0.92);
    transition-duration: var(--fade-dur), 90ms;
    transition-timing-function: ease, ease-out;
}

/* Phones: a bottom sheet along the stage's visible bottom edge */ @media (max-width:639px){.onair-sheet{left:0;right:0;top:auto;bottom:var(--sheet-bottom,0);width:auto;padding:14px var(--gutter) max(18px,env(safe-area-inset-bottom));border-width:1px 0 0;border-radius:24px 24px 0 0;transform:translateY(calc(100% + 24px))}.onair-sheet-head{margin-right:-10px}}.yap-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 24px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:var(--text-meta);font-weight:500;line-height:1.4;color:var(--muted)}.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin:0}.footer-legal > *{position:relative;display:inline-flex;align-items:center;min-height:44px}.footer-legal > :first-child{order:1;flex-basis:100%;min-height:18px;margin-top:-12px}.footer-legal > * + *::before{content:'';position:absolute;left:-10.5px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:var(--faint)}.footer-legal > :first-child::before,.footer-legal > :nth-child(2)::before{display:none}.footer-legal a{color:var(--muted);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:color var(--fade-dur) ease,text-decoration-color var(--fade-dur) ease}.footer-legal a:hover{color:var(--ink);text-decoration-color:currentColor}.footer-trifecta{display:none;align-items:center;gap:0.6em;margin:0;letter-spacing:0.14em;text-transform:uppercase}.footer-trifecta .trifecta{--t:9px;margin-right:0.3em}.footer-trifecta .facet-sep{color:var(--faint)}/* Narrow phones:"LIVE · 3 MIN AGO";the thesis keeps to two lines */ @media (max-width:379px){.live-word{display:none}}@media (max-width:299px){.yapper-section{--w:clamp(96px,min(64vw,calc((100cqh - var(--vh-delta) - 2 * var(--pad) - var(--bar)) * 9 / 16)),260px);--show-min:calc(96px * 16 / 9 + 2 * var(--pad) + var(--bar));--nav-clear:calc(var(--nav-top) + var(--nav-h) + 10px)}.follow-main{min-height:44px}}@media (max-width:359px){.yapper-section{--stat-size:1.75rem}.yap-stat{gap:12px}.footer-legal{gap:0 14px}.footer-legal > * + *::before{left:-8.5px}}@media (min-width:640px){.yapper-section{--foot-h:62px}.footer-legal{gap:0 22px}.footer-legal > :first-child{order:0;flex-basis:auto;min-height:44px;margin-top:0}.footer-legal > * + *::before{left:-12.5px}.footer-legal > :nth-child(2)::before{display:block}.footer-trifecta{display:inline-flex}}@media (min-width:860px){.yapper-section{--foot-h:45px}}@media (min-width:640px) and (min-height:601px){html:not(.flow) .yapper-section{--gap:clamp(20px,3vh,32px);--pad:8px;--reel-gap:12px;--show-min:calc(150px * 16 / 9 + 2 * var(--pad) + var(--bar));--reel-comfort:180px;--stat-size:2.5rem;--w:clamp(150px,min(calc((100vw - 2 * var(--gutter) - 2 * var(--reel-gap)) / 2.6),calc((100cqh - var(--vh-delta) - 2 * var(--pad) - var(--bar)) * 9 / 16)),250px)}html:not(.flow) .yapper-main{grid-template-columns:max-content minmax(0,1fr);grid-template-rows:auto minmax(var(--show-min),1fr);grid-template-areas:"intro links" "show  show";column-gap:clamp(28px,5vw,64px)}html:not(.flow) .yapper-head .facet-eyebrow{margin-bottom:0.9rem}html:not(.flow) .yap-stat{flex-direction:column;align-items:flex-start;gap:12px;margin-top:clamp(18px,2.6vh,28px)}html:not(.flow) .stat-cap{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 12px;min-height:20px}html:not(.flow) .yap-links{gap:clamp(20px,2.8vh,28px)}html:not(.flow) .onair-title{font-size:1rem}}@media (min-width:960px) and (min-aspect-ratio:1/1) and (min-height:601px){html:not(.flow) .yapper-section{--pad:8px;--reel-gap:clamp(12px,1.1vw,18px);--n:3;--stat-size:clamp(2.5rem,1.6rem + 1.9vw,3.5rem);--w:min(calc((100cqw - (var(--n) - 1) * var(--reel-gap)) / var(--n)),calc((100cqh - 2 * var(--pad) - var(--bar)) * 9 / 16))}html:not(.flow) .yapper-main{grid-template-columns:minmax(max-content,38fr) minmax(0,62fr);grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);grid-template-areas:".     show" "intro show" "links show" ".     show";column-gap:clamp(40px,5vw,96px);row-gap:0}html:not(.flow) .yap-stat{margin-top:clamp(20px,3.2vh,34px)}html:not(.flow) .yap-links{gap:clamp(22px,3.4vh,36px);margin-top:clamp(26px,4.2vh,46px)}html:not(.flow) .yap-show{align-items:flex-end}html:not(.flow) .yap-reels{width:calc(var(--n) * var(--w) + (var(--n) - 1) * var(--reel-gap));max-width:100%}html:not(.flow) .reel-rail{margin:0 calc(-1 * var(--pad));padding:var(--pad);scroll-padding-inline:var(--pad)}html:not(.flow) .reel-item:last-child{scroll-snap-align:start}html:not(.flow) .reel-item:nth-child(n + 4){display:none}html:not(.flow) .rail-controls{display:none}html:not(.flow) .reel{border-radius:16px}html:not(.flow) .reel-meta{top:12px;left:12px;right:12px}}@media (min-width:960px) and (max-width:1199px) and (min-aspect-ratio:1/1) and (min-height:601px){html:not(.flow) .yapper-section{--n:2}html:not(.flow) .reel-item:nth-child(n + 3){display:none}}html.motion-reduce .reel:hover,html.motion-reduce .reel:active,html.motion-reduce .onair-item:active,html.motion-reduce .onair-more:active,html.motion-reduce .follow-main:active{transform:none}html.motion-reduce .reel:hover img{transform:none}html.motion-reduce .reel-play{transform:none}html.motion-reduce .live-dot::after{display:none}html.motion-reduce .odo-strip{transition:none}html.motion-reduce .reel-item.is-new .reel{animation:none}html.motion-reduce .onair-sheet,html.motion-reduce .yapper-section.sheet-open .onair-sheet{transform:none}@media (prefers-reduced-motion:reduce){.live-dot::after{display:none}}html.flow .yapper-section{--w:clamp(132px,20vw,190px);--gap:26px;--gap-foot:20px}html.flow .yapper-stage{min-height:0;grid-template-rows:auto auto;padding-bottom:max(16px,env(safe-area-inset-bottom))}html.flow .yapper-main{grid-template-rows:auto auto auto}html.flow .yap-stat{flex-wrap:wrap}html.flow .yap-show{container-type:normal}html.js.flow:not(.motion-reduce) .yapper-section [data-reveal]{opacity:1;translate:none;transition:none}html.flow .reel-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--w),100%),1fr));margin:0;padding:var(--pad) 0;overflow:visible;scroll-snap-type:none}html.flow .reel-item:nth-child(n + 5){display:none}html.flow .rail-controls{display:none}html.flow .reel{aspect-ratio:auto;overflow:visible;background:none;box-shadow:none}html.flow .reel img{position:static;display:block;height:auto;aspect-ratio:9 / 16;border-radius:14px;box-shadow:0 20px 44px -26px rgba(0,0,0,0.9)}html.flow .reel::before{display:none}html.flow .reel-title{position:static;padding:10px 2px 2px;color:var(--ink);text-shadow:none}@media (min-width:640px){html.flow .yapper-section{--w:clamp(120px,15.5vw,150px)}html.flow .yapper-main{grid-template-columns:max-content minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"intro links" "show  show";column-gap:40px}html.flow .yap-links{gap:20px}html.flow .onair-list{max-width:28rem}}
.terminal-overlay{display:none;position:fixed;inset:0;background-color:var(--bg-body);align-items:center;justify-content:center;z-index:9999}.js .terminal-overlay{display:flex}.intro-seen .terminal-overlay,.loader-failed .terminal-overlay,.motion-reduce .terminal-overlay{display:none}.terminal-overlay.is-leaving{background-color:transparent;pointer-events:none;transition:background-color 420ms ease}.terminal-overlay.is-leaving .terminal-container{opacity:0;transform:scale(0.94);transition:opacity 300ms ease,transform var(--spring-smooth-dur) var(--spring-smooth)}.intro-merge{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.intro-merge .trifecta{--t:28px;animation:merge-bloom 900ms ease forwards}.intro-merge .trifecta i{animation:merge-in 900ms var(--spring-smooth) forwards}.intro-merge .trifecta i:nth-child(1){--sx:-18px;--sy:-14px;--mx:10px;--my:9px}.intro-merge .trifecta i:nth-child(2){--sx:18px;--sy:-14px;--mx:-10px;--my:9px}.intro-merge .trifecta i:nth-child(3){--sx:0px;--sy:20px;--mx:0px;--my:-9px}@keyframes merge-in{0%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(0.6)}35%{opacity:1;transform:translate(0,0) scale(1)}70%,100%{opacity:1;transform:translate(var(--mx),var(--my)) scale(1)}}@keyframes merge-bloom{0%,62%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(3.2);filter:blur(8px)}}.terminal-container{width:90%;max-width:var(--terminal-max-width);background-color:var(--bg-terminal);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,0.5);border:1px solid #333;display:flex;flex-direction:column;overflow:hidden;position:relative}.terminal-header{background-color:#1f2229;padding:10px 15px;display:flex;gap:8px;border-bottom:1px solid #333}.dot{width:12px;height:12px;border-radius:50%}.dot.red{background-color:#ff5f56}.dot.yellow{background-color:#ffbd2e}.dot.green{background-color:#27c93f}.terminal-body{padding:20px;min-height:160px;color:var(--text-primary);display:flex;flex-direction:column;gap:5px}.line{display:flex;align-items:baseline;white-space:pre;overflow:hidden;width:100%;min-height:1.5em}.prompt{color:var(--accent-blue);font-weight:bold}.bar-filled{color:var(--accent-lime)}/* The three facets load in their own colours,then merge (lime "Done!") */ .bar-filled.bar-founder{color:var(--facet-founder)}.bar-filled.bar-engineer{color:var(--facet-engineer)}.bar-filled.bar-influencer{color:var(--facet-influencer)}.bar-empty{color:var(--text-muted)}/* "Merging personalities..." */ .completion-text{font-style:italic;opacity:0.6}.success-line{color:var(--accent-lime);font-weight:bold}.cursor{display:inline-block;width:10px;height:1em;background-color:var(--accent-lime);animation:blink 1s step-end infinite;margin-left:5px}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}#char-measure{visibility:hidden;position:absolute;white-space:pre;font-family:var(--font-stack);font-size:var(--font-size)}