/*
 * CODBIO HUB ABOUT
 * Purpose: authored professional-profile presentation.
 * Subsystem: Home / About. Scope: About route and its server-rendered partials.
 */
.about-page { --about-ink: #12222c; --about-teal: #087f72; --about-mint: #a9e2d1; --about-wash: #edf6f1; }
.about-main { overflow: hidden; color: var(--about-ink); }
.about-main h1, .about-main h2, .about-main h3, .about-main h4 { letter-spacing: -.04em; }
.about-hero { min-height: min(52rem, calc(100vh - 5rem)); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); align-items: center; gap: 6vw; padding-block: clamp(5rem, 10vw, 9rem); position: relative; }
.about-hero::before { content: ""; position: absolute; inset: 3rem 40% auto -20vw; height: 26rem; background: radial-gradient(circle, rgba(122,211,185,.18), transparent 68%); pointer-events: none; }
.about-hero__copy { position: relative; z-index: 1; }
.about-hero__coordinates { margin: 2.5rem 0 .5rem; color: var(--muted); font: 600 .76rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.about-hero h1 { max-width: 10ch; margin: 0; font-size: clamp(4rem, 9vw, 8.8rem); line-height: .88; }
.about-hero__headline { max-width: 39rem; margin: 1.8rem 0 0; color: var(--about-teal); font-size: clamp(1.25rem, 2.4vw, 2rem); font-weight: 650; line-height: 1.25; }
.about-hero__statement { max-width: 43rem; margin: 1.4rem 0 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.about-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/*
 * =========================================================
 * ABOUT HERO / LIVING NAVIGATION SYSTEM
 *
 * The About navigation is modelled as a small orbital system:
 *
 * - each section is represented by an SVG "planet"
 * - paired planets share an orbit 180° apart
 * - neighbouring concepts use different orbital radii
 * - alternating tracks move in opposite directions
 * - labels appear only during interaction
 * - the central navigation glyph remains visually dominant
 * - the existing small reactive moons remain independent
 *
 * JS continues to provide section awareness, orbital
 * acceleration and the detached floating navigator.
 * =========================================================
 */


/* ---------------------------------------------------------
 * MAP SPACE
 * --------------------------------------------------------- */

.about-hero__visual {
    position: relative;
    isolation: isolate;

    display: grid;
    place-items: center;

    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .95) 0%,
            rgba(239, 248, 244, .72) 35%,
            rgba(230, 244, 239, .4) 55%,
            transparent 69%
        );
}


/*
 * When the central navigator detaches into fixed-position
 * mode, elevate the whole map stacking context as well.
 */

.about-hero__visual.has-floating-core {
    z-index: 1000;
}


/* ---------------------------------------------------------
 * EXISTING REACTIVE MOON ORBITS
 *
 * These are intentionally retained. They are separate from
 * the section-planet tracks and provide subtle environmental
 * movement around the central system.
 * --------------------------------------------------------- */

.signal-orbit {
    position: absolute;
    z-index: 2;

    border:
        1px solid rgba(8, 127, 114, .16);

    border-radius: 50%;

    pointer-events: none;

    will-change: transform;
}

.signal-orbit--outer {
    inset: 6%;

    animation:
        about-signal-orbit-clockwise
        42s
        linear
        infinite;
}

.signal-orbit--inner {
    inset: 29%;

    border-style: dashed;

    border-color:
        rgba(8, 127, 114, .16);

    animation:
        about-signal-orbit-counter
        29s
        linear
        infinite;
}


/*
 * Small moving moons / orbital markers.
 */

.signal-orbit::after {
    content: "";

    position: absolute;

    top: -.22rem;
    left: 50%;

    width: .4rem;
    height: .4rem;

    border:
        1px solid rgba(8, 127, 114, .3);

    border-radius: 50%;

    background: var(--paper);

    transform:
        translateX(-50%);

    box-shadow:
        0 0 0 .18rem
        rgba(169, 226, 209, .13);
}

.signal-orbit--inner::after {
    top: auto;
    bottom: -.16rem;

    width: .3rem;
    height: .3rem;

    background:
        var(--about-mint);

    opacity: .8;
}


/* ---------------------------------------------------------
 * PLANET TRACKS
 *
 * Five extremely quiet guide orbits.
 *
 * They should be perceptible rather than dominant.
 * --------------------------------------------------------- */

.signal-planet-track {
    position: absolute;
    z-index: 1;

    top: 50%;
    left: 50%;

    width:
        calc(var(--track-radius) * 2);

    height:
        calc(var(--track-radius) * 2);

    border:
        1px solid rgba(8, 127, 114, .065);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    pointer-events: none;
}


/*
 * Alternate the visual character slightly so five circles
 * do not look like mechanically repeated rings.
 */

.signal-planet-track--b,
.signal-planet-track--d {
    border-style: dashed;

    border-color:
        rgba(8, 127, 114, .055);
}


/* Orbit radii */

.signal-planet-track--a,
.signal-planet--orbit-a {
    --track-radius: 5.6rem;
    --planet-radius: 5.6rem;
}

.signal-planet-track--b,
.signal-planet--orbit-b {
    --track-radius: 8rem;
    --planet-radius: 8rem;
}

.signal-planet-track--c,
.signal-planet--orbit-c {
    --track-radius: 10.4rem;
    --planet-radius: 10.4rem;
}

.signal-planet-track--d,
.signal-planet--orbit-d {
    --track-radius: 12.8rem;
    --planet-radius: 12.8rem;
}

.signal-planet-track--e,
.signal-planet--orbit-e {
    --track-radius: 15.2rem;
    --planet-radius: 15.2rem;
}
/* ---------------------------------------------------------
 * CENTRAL NAVIGATION CORE
 *
 * The central sun is intentionally transparent.
 * It contains only the navigation mechanism:
 *
 *        previous
 *           ↑
 *         [core]
 *           ↓
 *          next
 * --------------------------------------------------------- */

.signal-core {
    position: relative;
    z-index: 20;

    display: grid;
    place-items: center;

    width: 42%;
    aspect-ratio: 1;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;

    box-shadow: none;

    transition:
        transform .42s cubic-bezier(.2, .7, .2, 1),
        opacity .28s ease;
}

.signal-core a {
    color: inherit;
    text-decoration: none;
}


/* ---------------------------------------------------------
 * VERTICAL NAVIGATION AXIS
 * --------------------------------------------------------- */

.signal-core__navigation {
    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows:
        2rem
        clamp(4.7rem, 7vw, 6.2rem)
        2rem;

    place-items: center;

    gap: .45rem;
}


/* ---------------------------------------------------------
 * UP / DOWN CHEVRONS
 * --------------------------------------------------------- */

.signal-core__step {
    display: grid;
    place-items: center;

    width: 2rem;
    height: 2rem;

    border-radius: 50%;

    color: rgba(8, 127, 114, .62);

    transition:
        color .2s ease,
        background-color .2s ease,
        transform .28s cubic-bezier(.2, .75, .2, 1);
}

.signal-core__step svg {
    display: block;

    width: 1.15rem;
    height: 1.15rem;
    transition:
        color .2s ease,
        transform .28s cubic-bezier(.2, .75, .2, 1),
        filter .25s ease;    
}
.signal-core__step--previous:hover svg,
.signal-core__step--previous:focus-visible svg {
    transform:
        translateY(-.15rem)
        scale(1.18);

    filter:
        drop-shadow(0 3px 5px rgba(8, 127, 114, .18));
}

.signal-core__step--next:hover svg,
.signal-core__step--next:focus-visible svg {
    transform:
        translateY(.15rem)
        scale(1.18);

    filter:
        drop-shadow(0 3px 5px rgba(8, 127, 114, .18));
}
.signal-core__step:hover,
.signal-core__step:focus-visible {
    color: var(--about-teal);
    background: transparent;
}

/* ---------------------------------------------------------
 * CENTRAL SYSTEM GLYPH
 *
 * This now occupies most of the visual centre.
 * --------------------------------------------------------- */

.signal-core__map {
    display: flex;
    align-items: center;
    justify-content: center;

    width:
        clamp(4.7rem, 7vw, 6.2rem);

    height:
        clamp(4.7rem, 7vw, 6.2rem);

    padding: 0;
    margin: 0;

    border:
        1px solid rgba(8, 127, 114, .2);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .32);

    color:
        var(--about-teal);

    box-shadow:
        0 8px 30px rgba(16, 76, 67, .05);

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);

    transition:
        color .22s ease,
        border-color .22s ease,
        background-color .22s ease,
        box-shadow .32s ease,
        transform .42s cubic-bezier(.2, .75, .2, 1);
}


/*
 * Let the included core SVG use most of the sun.
 */

.signal-core__map svg,
.signal-core__map-icon {
    display: block;

    width: 68%;
    height: 68%;

    margin: auto;

    overflow: visible;
}


.signal-core__map:hover,
.signal-core__map:focus-visible {
    color: #066d62;

    border-color:
        rgba(8, 127, 114, .45);

    background:
        rgba(255, 255, 255, .62);

    box-shadow:
        0 13px 34px rgba(16, 76, 67, .11),
        0 0 0 .3rem rgba(169, 226, 209, .1);

    transform:
        rotate(8deg)
        scale(1.07);
}


/* ---------------------------------------------------------
 * KEYBOARD
 * --------------------------------------------------------- */

.signal-core a:focus-visible {
    outline:
        2px solid rgba(8, 127, 114, .48);

    outline-offset: 3px;
}


/* ---------------------------------------------------------
 * NAVIGATION PLANETS
 *
 * The anchor itself rotates around the centre.
 * Its carrier pushes the planet out to the correct radius.
 * Its body counter-rotates so the SVG/text always remains
 * upright.
 * --------------------------------------------------------- */

.signal-planet {
    position: absolute;
    z-index: 10;

    top: 50%;
    left: 50%;

    width: 0;
    height: 0;

    color:
        #59706a;

    text-decoration: none;

    transform:
        translate(-50%, -50%)
        rotate(var(--planet-phase));

    transform-origin:
        center;

    animation-duration:
        var(--planet-duration);

    animation-timing-function:
        linear;

    animation-iteration-count:
        infinite;

    will-change:
        transform;
}


/*
 * Radius + speed belong to the orbit rather than the
 * individual concept.
 */

.signal-planet--orbit-a {
    --planet-radius:
        clamp(4.8rem, 7.2vw, 7.1rem);

    --planet-duration: 74s;
}

.signal-planet--orbit-b {
    --planet-radius:
        clamp(5.9rem, 8.6vw, 8.55rem);

    --planet-duration: 91s;
}

.signal-planet--orbit-c {
    --planet-radius:
        clamp(7rem, 10vw, 10rem);

    --planet-duration: 108s;
}

.signal-planet--orbit-d {
    --planet-radius:
        clamp(8.1rem, 11.45vw, 11.45rem);

    --planet-duration: 126s;
}

.signal-planet--orbit-e {
    --planet-radius:
        clamp(9.2rem, 12.9vw, 12.9rem);

    --planet-duration: 145s;
}


/* Direction */

.signal-planet--cw {
    animation-name:
        about-planet-clockwise;
}

.signal-planet--ccw {
    animation-name:
        about-planet-counter;
}


/* ---------------------------------------------------------
 * STARTING PHASES
 *
 * Paired planets sharing an orbit are exactly 180° apart.
 * --------------------------------------------------------- */

/* Orbit A */

.signal-planet[data-signal-key="about"] {
    --planet-phase: -90deg;
    --planet-counter-phase: 90deg;
}

.signal-planet[data-signal-key="methods"] {
    --planet-phase: 90deg;
    --planet-counter-phase: -90deg;
}


/* Orbit B */

.signal-planet[data-signal-key="work"] {
    --planet-phase: -50deg;
    --planet-counter-phase: 50deg;
}

.signal-planet[data-signal-key="study"] {
    --planet-phase: 130deg;
    --planet-counter-phase: -130deg;
}


/* Orbit C */

.signal-planet[data-signal-key="data"] {
    --planet-phase: -10deg;
    --planet-counter-phase: 10deg;
}

.signal-planet[data-signal-key="evidence"] {
    --planet-phase: 170deg;
    --planet-counter-phase: -170deg;
}


/* Orbit D */

.signal-planet[data-signal-key="code"] {
    --planet-phase: 30deg;
    --planet-counter-phase: -30deg;
}

.signal-planet[data-signal-key="connect"] {
    --planet-phase: 210deg;
    --planet-counter-phase: -210deg;
}


/* Orbit E */

.signal-planet[data-signal-key="exchange"] {
    --planet-phase: 64deg;
    --planet-counter-phase: -64deg;
}


/* ---------------------------------------------------------
 * CARRIER
 * --------------------------------------------------------- */

.signal-planet__carrier {
    position: relative;

    display: block;

    width: 0;
    height: 0;

    transform:
        translateX(var(--planet-radius));
}


/* ---------------------------------------------------------
 * PLANET BODY
 *
 * Icon-only at rest.
 * Expands into a compact labelled object on hover/focus.
 * --------------------------------------------------------- */

.signal-planet__body {
    position: absolute;

    top: 0;
    left: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 2.2rem;
    min-height: 2.2rem;
    padding: .34rem;

    border:
        1px solid rgba(156, 194, 184, .36);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .94);

    box-shadow:
        0 7px 22px rgba(16, 43, 42, .055);

    transform:
        translate(-50%, -50%)
        rotate(var(--planet-counter-phase));

    animation-duration:
        var(--planet-duration);

    animation-timing-function:
        linear;

    animation-iteration-count:
        infinite;

    transition:
        padding .3s cubic-bezier(.2, .75, .2, 1),
        color .22s ease,
        border-color .22s ease,
        background-color .22s ease,
        box-shadow .32s ease;

    will-change:
        transform;
}


/* Counter rotation keeps each SVG upright */

.signal-planet--cw
.signal-planet__body {
    animation-name:
        about-planet-body-counter-cw;
}

.signal-planet--ccw
.signal-planet__body {
    animation-name:
        about-planet-body-counter-ccw;
}


/* ---------------------------------------------------------
 * PLANET SVG ICON
 * --------------------------------------------------------- */

.signal-planet__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 1.05rem;
    height: 1.05rem;

    color:
        var(--about-teal);

    transition:
        color .22s ease,
        transform .3s cubic-bezier(.2, .75, .2, 1);
}

.signal-planet__icon svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}


/* ---------------------------------------------------------
 * PLANET WORD
 *
 * Hidden completely at rest.
 * Enters from behind the icon when explored.
 * --------------------------------------------------------- */

.signal-planet__label {
    display: inline-block;

    max-width: 0;

    overflow: hidden;

    margin-left: 0;

    color:
        #536b65;

    opacity: 0;

    transform:
        translateX(-.22rem);

    white-space: nowrap;

    font:
        650 .66rem / 1
        var(--mono);

    letter-spacing: .01em;

    transition:
        max-width .34s cubic-bezier(.2, .75, .2, 1),
        margin-left .28s ease,
        opacity .22s ease,
        transform .28s cubic-bezier(.2, .75, .2, 1);
}


/* ---------------------------------------------------------
 * PLANET INTERACTION
 * --------------------------------------------------------- */

.signal-planet:hover
.signal-planet__body,

.signal-planet:focus-visible
.signal-planet__body,

.signal-planet.is-preview
.signal-planet__body {
    padding:
        .46rem
        .7rem;

    border-color:
        rgba(8, 127, 114, .48);

    background:
        rgba(255, 255, 255, .99);

    box-shadow:
        0 14px 32px rgba(16, 76, 67, .13),
        0 0 0 .23rem rgba(169, 226, 209, .15);
}

.signal-planet:hover
.signal-planet__icon,

.signal-planet:focus-visible
.signal-planet__icon,

.signal-planet.is-preview
.signal-planet__icon {
    color: #066d62;

    transform:
        scale(1.1);
}

.signal-planet:hover
.signal-planet__label,

.signal-planet:focus-visible
.signal-planet__label,

.signal-planet.is-preview
.signal-planet__label {
    max-width: 6.5rem;

    margin-left: .42rem;

    opacity: 1;

    transform:
        translateX(0);
}
.signal-planet:hover,
.signal-planet:focus-visible,
.signal-planet.is-preview {
    z-index: 40;
}

/*
 * Focus outline belongs to the visible planet rather than
 * the zero-sized orbiting anchor.
 */

.signal-planet:focus-visible {
    outline: none;
}

.signal-planet:focus-visible
.signal-planet__body {
    outline:
        2px solid rgba(8, 127, 114, .52);

    outline-offset:
        3px;
}


/* ---------------------------------------------------------
 * CURRENT SECTION
 *
 * Current location gets a small atmospheric ring but does
 * NOT permanently expose the word label.
 * --------------------------------------------------------- */

.signal-planet.is-current
.signal-planet__body {
    border-color:
        rgba(8, 127, 114, .38);

    background:
        rgba(241, 250, 247, .97);

    box-shadow:
        0 8px 25px rgba(16, 76, 67, .09),
        0 0 0 .18rem rgba(169, 226, 209, .105);
}


/* ---------------------------------------------------------
 * ENERGISED MAP
 * --------------------------------------------------------- */

.about-hero__visual[data-signal-active]
.signal-core__map {
    border-color: rgba(8, 127, 114, .4);

    box-shadow:
        0 12px 32px rgba(16, 76, 67, .11),
        0 0 0 .25rem rgba(169, 226, 209, .09);
}

.about-hero__visual[data-signal-active]
.signal-orbit {
    border-color:
        rgba(8, 127, 114, .29);
}


/*
 * Existing moon animations still provide a CSS-only
 * reaction. signal-map.js controls the stronger playback
 * response when JavaScript is available.
 */

.about-hero__visual[data-signal-active]
.signal-orbit--outer {
    animation-duration: 20s;
}

.about-hero__visual[data-signal-active]
.signal-orbit--inner {
    animation-duration: 14s;
}

/* ---------------------------------------------------------
 * FLOATING CENTRAL NAVIGATOR
 * --------------------------------------------------------- */

.signal-core.is-floating {
    position: fixed;
    z-index: 1200;

    right: clamp(1rem, 2.3vw, 1.8rem);
    bottom: clamp(1rem, 2.3vw, 1.8rem);

    width: 3.6rem;
    height: auto;
    min-width: 0;
    aspect-ratio: auto;

    padding: .3rem;

    border: 0;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    transform: none;

    animation:
        about-signal-floating-enter
        .36s cubic-bezier(.2, .75, .2, 1)
        both;
}

.signal-core.is-floating .signal-core__navigation {
    grid-template-columns: 1fr;

    grid-template-rows:
        1.4rem
        2.55rem
        1.4rem;

    gap: .12rem;
}

.signal-core.is-floating .signal-core__step {
    width: 1.4rem;
    height: 1.4rem;
}

.signal-core.is-floating .signal-core__step svg {
    width: .9rem;
    height: .9rem;
}

.signal-core.is-floating .signal-core__map {
    width: 2.55rem;
    height: 2.55rem;
}

.signal-core.is-floating .signal-core__map svg,
.signal-core.is-floating .signal-core__map-icon {
    width: 1.7rem;
    height: 1.7rem;
}

/* ---------------------------------------------------------
 * ORBITAL MOTION
 * --------------------------------------------------------- */

/* Existing moons */

@keyframes about-signal-orbit-clockwise {
    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}

@keyframes about-signal-orbit-counter {
    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }
}


/* Planet carriers — clockwise */

@keyframes about-planet-clockwise {
    from {
        transform:
            translate(-50%, -50%)
            rotate(var(--planet-phase));
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(
                calc(
                    var(--planet-phase) + 360deg
                )
            );
    }
}


/* Planet carriers — counter-clockwise */

@keyframes about-planet-counter {
    from {
        transform:
            translate(-50%, -50%)
            rotate(var(--planet-phase));
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(
                calc(
                    var(--planet-phase) - 360deg
                )
            );
    }
}


/*
 * The body rotates in the opposite direction so icons and
 * words never turn upside-down while travelling.
 */

@keyframes about-planet-body-counter-cw {
    from {
        transform:
            translate(-50%, -50%)
            rotate(var(--planet-counter-phase));
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(
                calc(
                    var(--planet-counter-phase) - 360deg
                )
            );
    }
}

@keyframes about-planet-body-counter-ccw {
    from {
        transform:
            translate(-50%, -50%)
            rotate(var(--planet-counter-phase));
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(
                calc(
                    var(--planet-counter-phase) + 360deg
                )
            );
    }
}


/* Core glyph activity */

@keyframes about-signal-map-pulse {
    from {
        opacity: .8;

        transform:
            scale(.975);
    }

    to {
        opacity: 1;

        transform:
            scale(1.035);
    }
}


/* Floating navigator entrance */

@keyframes about-signal-floating-enter {
    from {
        opacity: 0;

        transform:
            translateY(.65rem)
            scale(.95);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* ---------------------------------------------------------
 * MOBILE
 * --------------------------------------------------------- */

@media (max-width: 600px) {

    /*
     * Tighten the orbital system but preserve all five
     * distinct radii.
     */

    .signal-planet-track--a,
    .signal-planet--orbit-a {
        --track-radius: 4.7rem;
        --planet-radius: 4.7rem;
    }

    .signal-planet-track--b,
    .signal-planet--orbit-b {
        --track-radius: 5.8rem;
        --planet-radius: 5.8rem;
    }

    .signal-planet-track--c,
    .signal-planet--orbit-c {
        --track-radius: 6.9rem;
        --planet-radius: 6.9rem;
    }

    .signal-planet-track--d,
    .signal-planet--orbit-d {
        --track-radius: 8rem;
        --planet-radius: 8rem;
    }

    .signal-planet-track--e,
    .signal-planet--orbit-e {
        --track-radius: 9.1rem;
        --planet-radius: 9.1rem;
    }


    .signal-planet__body {
        min-width: 2.35rem;
        min-height: 2.35rem;

        padding: .36rem;
    }

    .signal-planet__icon {
        width: 1.05rem;
        height: 1.05rem;
    }


    /*
     * Labels remain available on tap/focus but use a slightly
     * smaller footprint.
     */

    .signal-planet__label {
        font-size: .6rem;
    }


    /* Floating instrument */

    .about-hero__visual.has-floating-core {
        z-index: 1100;
    }

    .signal-core.is-floating {
        right:
            max(.65rem, env(safe-area-inset-right));

        bottom:
            max(.65rem, env(safe-area-inset-bottom));

        min-width: 7.2rem;

        padding:
            .4rem
            .48rem
            .46rem;

        border-radius:
            .76rem;

        box-shadow:
            0 12px 36px rgba(16, 43, 42, .18),
            0 2px 8px rgba(16, 43, 42, .07);
    }

    .signal-core.is-floating
    .signal-core__title {
        margin-bottom: .12rem;

        font-size: .52rem;
    }

    .signal-core.is-floating
    .signal-core__navigation {
        grid-template-columns:
            1.35rem
            1.95rem
            1.35rem;

        gap: .2rem;
    }

    .signal-core.is-floating
    .signal-core__step {
        width: 1.35rem;
        height: 1.35rem;

        font-size: .9rem;
    }

    .signal-core.is-floating
    .signal-core__map {
        width: 1.95rem;
        height: 1.95rem;
    }

    .signal-core.is-floating
    .signal-core__map svg,
    .signal-core.is-floating
    .signal-core__map-icon {
        width: 1.22rem;
        height: 1.22rem;
    }
}


/* ---------------------------------------------------------
 * REDUCED MOTION
 * --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    /*
     * Base transforms already contain each planet's starting
     * phase, so disabling animation does NOT collapse all
     * planets into the centre.
     */

    .signal-orbit--outer,
    .signal-orbit--inner,
    .signal-planet,
    .signal-planet__body,
    .signal-core__map svg,
    .signal-core.is-floating {
        animation: none;
    }

    .signal-core,
    .signal-core__title,
    .signal-core__step,
    .signal-core__map,
    .signal-planet__body,
    .signal-planet__icon,
    .signal-planet__label {
        transition-duration: .01ms;
    }
}
.about-section { padding-block: clamp(5rem, 9vw, 9rem); }
.about-section--compact { padding-top: 3rem; }
.about-section--wash { max-width: none; background: var(--about-wash); }
.about-section--wash > .shell { width: min(calc(100% - 2rem), var(--shell)); margin-inline: auto; }
.about-section__heading { display: grid; grid-template-columns: minmax(10rem, .35fr) minmax(0, 1fr); gap: 3rem; align-items: start; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.about-section__heading h2 { max-width: 18ch; margin: 0; font-size: clamp(2.4rem, 5vw, 5rem); line-height: .98; }
.about-section__heading > p:last-child:not(:first-child) { max-width: 42rem; color: inherit; opacity: .72; }
.section-number { margin: .35rem 0 0; color: var(--about-teal); font: 700 .72rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.about-intro { margin-left: max(0rem, 22%); }

/*
 * =========================================================
 * PATCH 2026-08-16 | ABOUT INTRO FONT SIZE
 * REASON:
 * Large font-size on the About introduction lead paragraph
 *
 * CHANGE:
 * reduced font-size and line-height for better readability 
 * and layout consistency.
 * =========================================================
 */

.about-intro__lead {
    max-width: 55rem;
    /* font-size: clamp(1.2rem, 2vw, 1.65rem); */
    line-height: 1.58;
}

.workflow-line { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 0; margin: 3.5rem 0 0; list-style: none; counter-reset: workflow; }
.workflow-line li { position: relative; padding: 2.6rem 1rem 0 0; border-top: 1px solid #b7d8ce; color: var(--muted); font-size: .77rem; font-weight: 650; }
.workflow-line li::before { counter-increment: workflow; content: "0" counter(workflow); position: absolute; top: -.75rem; left: 0; padding-right: .6rem; background: var(--paper); color: var(--about-teal); font: 700 .68rem var(--mono); }
.workflow-line li:not(:last-child)::after { content: "→"; position: absolute; top: -.75rem; right: .5rem; color: var(--about-teal); background: var(--paper); }
.role-record { display: grid; grid-template-columns: minmax(12rem, .36fr) minmax(0, 1fr); gap: 5vw; padding: clamp(1.75rem, 4vw, 3.5rem); border: 1px solid #cfe2db; border-radius: 1.5rem; background: rgba(255,255,255,.74); box-shadow: 0 22px 70px rgba(30,65,55,.07); }
.role-record__meta { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.role-record__meta p { color: var(--about-teal); font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.role-record__meta strong { font-size: 1.15rem; }.role-record__meta span, .record-organization { color: var(--muted); }
.role-record h3 { max-width: 22ch; margin: 0; font-size: clamp(1.8rem, 3.4vw, 3.2rem); }
.record-organization { margin: .6rem 0 1.5rem; font-weight: 700; }
.evidence-list { display: grid; gap: .75rem; padding-left: 1.15rem; margin-top: 1.5rem; }
.focus-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(15rem, .65fr); gap: 7vw; align-items: start; }

/*
 * =========================================================
 * PATCH 2026-08-16 | ABOUT SYSTEM ARCHITECTURE FONT SIZE
 * REASON:
 * Large font-size on the About scientific architecture
 *
 * CHANGE:
 * reduced font-size and line-height for better readability 
 * and layout consistency.
 * =========================================================
 */

.focus-statement {
    margin: 0;
    /* font-size: clamp(1.3rem, 2.6vw, 2.25rem); */
    line-height: 1.6;
}
.focus-index { display: flex; flex-wrap: wrap; gap: .55rem; }
.focus-index span { padding: .55rem .7rem; border: 1px solid #cfe0da; border-radius: .45rem; color: #37574f; background: #f8fbf9; font-size: .78rem; }
.about-section--ink { max-width: none; color: #edf8f4; background: #10272b; }
.about-section--ink > .shell { width: min(calc(100% - 2rem), var(--shell)); margin-inline: auto; }

.about-section--ink .section-number,
.about-section--ink .about-system-node span {
    color: #7bd9c0;
}

/*
 * =========================================================
 * PATCH 2026-08-16 | ABOUT SYSTEM ARCHITECTURE NAMESPACE
 * REASON:
 * Prevent Home/global system-* styles from colliding with
 * the About scientific architecture diagram.
 *
 * CHANGE:
 * Namespaces architecture components under about-system-*.
 * Also explicitly owns positioning, sizing and grid behavior
 * so the diagram cannot inherit orbital/homepage positioning.
 * =========================================================
 */

.about-system-map {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    text-align: center;
}

.about-system-node {
    position: relative;
    inset: auto;
    display: block;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 1.4rem;

    transform: none;
    aspect-ratio: auto;

    border: 1px solid rgba(172, 224, 209, .28);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .045);
}

.about-system-node span {
    display: block;
    margin-bottom: .35rem;

    color: #7bd9c0;
    font: 700 .65rem var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.about-system-node h3,
.about-system-node h4 {
    margin: 0;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
}

.about-system-node p {
    max-width: 34rem;
    margin: .7rem auto 0;
    color: #b7ccc7;
}

.about-system-node--hub {
    max-width: 23rem;
    margin: 0 auto;
}

.about-system-node--platform {
    padding: clamp(1.5rem, 4vw, 3rem);
    border-color: rgba(123, 217, 192, .48);
}

.about-system-node--accent {
    border-color: #7bd9c0;
    background: rgba(123, 217, 192, .1);
}

.about-system-connector {
    position: static;
    inset: auto;
    display: block;

    width: auto;
    margin: 0;
    padding: .65rem;

    transform: none;

    color: #7bd9c0;
    font-size: 1.3rem;
    line-height: 1;
}

.about-system-branches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem;
    align-items: center;

    width: 100%;
    margin-top: 2rem;
}

.about-system-branch {
    min-width: 0;
}

/*
 * =========================================================
 * PATCH 2026-08-16 11:50 | INDEPENDENT EVIDENCE HEIGHT
 *
 * Reason:
 * Grid items stretch to equal row height by default, causing
 * the closed evidence panel to appear expanded when its
 * neighbour opens.
 *
 * Change:
 * Align disclosure cards to their own content height.
 * =========================================================
 */
.project-evidence {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
    margin-top: 2.5rem;
}

/*
 * =========================================================
 * ABOUT PROJECT EVIDENCE DISCLOSURES
 * Independent height + visible disclosure affordance.
 * =========================================================
 */

.project-detail {
    align-self: start;
    overflow: hidden;

    border: 1px solid rgba(172, 224, 209, .24);
    border-radius: .8rem;
    background: rgba(0, 0, 0, .12);

    transition:
        border-color .25s ease,
        background-color .25s ease;
}

.project-detail:hover {
    border-color: rgba(172, 224, 209, .42);
}

.project-detail[open] {
    border-color: rgba(123, 217, 192, .4);
    background: rgba(0, 0, 0, .18);
}


/* ---------------------------------------------------------
 * Disclosure trigger
 * --------------------------------------------------------- */

.project-detail summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 1rem;
    align-items: center;
    gap: 1rem;

    padding: 1.2rem;
    cursor: pointer;

    font-weight: 750;
    list-style: none;

    user-select: none;
}

/* Remove browser-native disclosure marker. */
.project-detail summary::-webkit-details-marker {
    display: none;
}

.project-detail summary::marker {
    content: "";
}

.project-detail summary small {
    color: #8fb6ac;
    font-weight: 500;
}


/* ---------------------------------------------------------
 * Chevron
 * --------------------------------------------------------- */

.project-detail summary::after {
    content: "";

    width: .48rem;
    height: .48rem;

    border-right: 2px solid #7bd9c0;
    border-bottom: 2px solid #7bd9c0;

    transform: rotate(45deg);
    transform-origin: center;

    transition:
        transform .28s cubic-bezier(.2, .7, .2, 1),
        border-color .2s ease;
}

/* Down → up when expanded. */
.project-detail[open] summary::after {
    transform: rotate(225deg);
}


/* ---------------------------------------------------------
 * Evidence content
 * --------------------------------------------------------- */

.project-detail > ul,
.project-detail > p {
    margin: 0;
    padding: 0 2.5rem 1.5rem;

    color: #c5d8d3;

    animation: about-evidence-reveal .28s ease both;
}

.project-detail > ul {
    padding-left: 3rem;
}

.project-detail li + li {
    margin-top: .6rem;
}

@keyframes about-evidence-reveal {
    from {
        opacity: 0;
        transform: translateY(-.35rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.communication-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.communication-grid article { padding: 2rem 2rem 1rem 0; border-bottom: 1px solid var(--line); }
.communication-grid article + article { padding-left: 2rem; border-left: 1px solid var(--line); }
.communication-grid span { color: var(--about-teal); font: 700 .7rem var(--mono); }.communication-grid h3 { margin: 1.3rem 0 .8rem; font-size: 1.25rem; }.communication-grid p { color: var(--muted); }

/*
 * =========================================================
 * METHODS & SYSTEMS
 * Expertise badges + contextual knowledge popovers.
 * =========================================================
 */

.method-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.method-grid article {
    padding: 1.5rem;
    border-top: 2px solid var(--about-teal);
    background: rgba(255, 255, 255, .68);
}

.method-grid h3 {
    margin: 0 0 1rem;
}

.method-grid ul {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    padding: 0;
    list-style: none;
}


/* ---------------------------------------------------------
 * Standard non-contextual badges
 * --------------------------------------------------------- */

.method-grid li {
    position: relative;

    padding: .38rem .55rem;

    border: 1px solid #c8ddd5;
    border-radius: .35rem;

    background: #fff;
    color: #405a53;

    font-size: .78rem;
}


/* ---------------------------------------------------------
 * Context-enabled badge
 * --------------------------------------------------------- */

.method-grid li.method-term {
    padding: 0;
}

.method-term__trigger {
    appearance: none;
    -webkit-appearance: none;

    display: inline-flex;
    align-items: center;
    gap: 0;

    width: 100%;
    margin: 0;
    padding: .38rem .55rem;

    border: 0;
    border-radius: inherit;

    background: transparent;
    color: inherit;

    font: inherit;
    line-height: inherit;
    text-align: left;

    cursor: help;

    transition:
        color .18s ease,
        background-color .18s ease,
        box-shadow .18s ease;
}

.method-term__trigger:hover,
.method-term__trigger:focus-visible,
.method-term__trigger[aria-expanded="true"] {
    color: #1f5148;
    background: #f1faf7;
}

.method-term__trigger:focus-visible {
    outline: 2px solid rgba(8, 127, 114, .55);
    outline-offset: 2px;
}


/* ---------------------------------------------------------
 * Knowledge popover
 * --------------------------------------------------------- */

/*
PATCH 2026-08-16
Reduced top offset of the popover to bring it closer to the trigger element for better visual association.
Reason: The previous offset caused the popover to appear too far from the trigger,
making it hard to click on it without moving the mouse too much. 
The new offset improves usability and visual connection.
*/

.method-term__popover {
    position: absolute;
    z-index: 40;
    left: 0;
    top: calc(100% + 0.45rem);
    width: min(27rem, calc(100vw - 2rem));
    padding: 1rem 1.05rem;
    border: 1px solid #bfd8d0;
    border-radius: .75rem;
    background: rgba(255, 255, 255, .98);
    color: #294a43;
    box-shadow: 0 16px 45px rgba(21, 62, 53, .12),
        0 3px 10px rgba(21, 62, 53, .06);
    font-size: .78rem;
    line-height: 1.5;
    animation: about-method-popover-in .18s ease both;
}


/* Small anchored pointer. */
.method-term__popover::before {
    content: "";

    position: absolute;
    top: -.36rem;
    left: 1.15rem;

    width: .65rem;
    height: .65rem;

    border-top: 1px solid #bfd8d0;
    border-left: 1px solid #bfd8d0;

    background: #fff;

    transform: rotate(45deg);
}


/* ---------------------------------------------------------
 * Popover content
 * --------------------------------------------------------- */

.method-term__summary {
    margin: 0;

    color: #173e36;

    font-weight: 750;
    line-height: 1.45;
}

.method-term__context {
    margin: .55rem 0 0;

    color: #526c66;
}

/* ---------------------------------------------------------
 * Inline scientific reference markers
 * --------------------------------------------------------- */

.method-term__citations {
    display: inline-flex;
    align-items: baseline;
    gap: .18rem;

    margin-left: .3rem;

    white-space: nowrap;
}

.method-reference {
    position: relative;
    display: inline;
}

.method-reference__trigger {
    appearance: none;
    -webkit-appearance: none;

    margin: 0;
    padding: 0 .08rem;

    border: 0;
    background: transparent;

    color: var(--about-teal);

    font: 700 .62rem/1 var(--mono);
    vertical-align: super;

    cursor: help;

    opacity: .72;

    transition:
        opacity .16s ease,
        color .16s ease;
}

.method-reference__trigger:hover,
.method-reference__trigger:focus-visible {
    color: #065f56;
    opacity: 1;
}

.method-reference__trigger:focus-visible {
    outline: 1px solid rgba(8, 127, 114, .45);
    outline-offset: 2px;
    border-radius: .15rem;
}


/* ---------------------------------------------------------
 * Secondary citation tooltip
 * --------------------------------------------------------- */

.method-reference__popover {
    position: absolute;
    z-index: 60;

    left: 50%;
    bottom: calc(100% + .1rem);

    width: min(22rem, calc(100vw - 2rem));
    padding: .65rem .75rem;

    border: 1px solid #c9ddd6;
    border-radius: .55rem;

    background: #fff;
    color: #6b7f79;

    box-shadow:
        0 10px 30px rgba(21, 62, 53, .11),
        0 2px 8px rgba(21, 62, 53, .05);

    font-size: .66rem;
    line-height: 1.45;
    white-space: normal;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(.2rem);

    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease;
}
/*
 * Invisible hover bridge between the reference number
 * and its citation tooltip.
 *
 * Prevents the tooltip from disappearing while the pointer
 * travels across the visual gap.
 */
.method-reference__popover::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -.65rem;

    height: .7rem;

    background: transparent;
}
.method-reference:hover .method-reference__popover,
.method-reference:focus-within .method-reference__popover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}

.method-reference__popover a {
    color: inherit;
    text-decoration: none;
}

.method-reference__popover a:hover,
.method-reference__popover a:focus-visible {
    color: var(--about-teal);
    text-decoration: underline;
    text-underline-offset: .15em;
}

.method-reference__popover a span {
    margin-left: .2rem;
    font-size: .6rem;
}

/* ---------------------------------------------------------
 * Animation
 * --------------------------------------------------------- */

@keyframes about-method-popover-in {
    from {
        opacity: 0;
        transform: translateY(-.25rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ---------------------------------------------------------
 * Mobile-safe contextual panel
 * --------------------------------------------------------- */

@media (max-width: 600px) {
    .method-reference__popover {
        position: fixed;

        left: 1rem;
        right: 1rem;
        bottom: 1rem;

        width: auto;
        max-width: none;

        transform: translateY(.2rem);
    }

    .method-reference:hover .method-reference__popover,
    .method-reference:focus-within .method-reference__popover {
        transform: translateY(0);
    }    

    .method-term__popover {
        position: fixed;

        z-index: 120;

        left: 1rem;
        right: 1rem;
        top: auto;
        bottom: 1rem;

        width: auto;
        max-width: none;
        max-height: min(70vh, 30rem);

        overflow-y: auto;

        padding: 1.15rem;

        border-radius: 1rem;

        box-shadow:
            0 24px 70px rgba(16, 43, 42, .2),
            0 4px 16px rgba(16, 43, 42, .12);
    }

    .method-term__popover::before {
        display: none;
    }

    .method-term__references a,
    .method-term__references > span {
        font-size: .7rem;
    }
}

.education-list article, .publication-record { display: grid; grid-template-columns: minmax(10rem, .35fr) minmax(0, 1fr); gap: 3rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.education-list article > div:first-child p, .publication-record > p { margin: 0; color: var(--about-teal); font: 700 .78rem var(--mono); }
.education-list article > div:first-child span, .education-list article > div:last-child > p:last-child, .publication-record small { color: var(--muted); }
.education-list h3, .publication-record h3 { margin: 0 0 .45rem; font-size: 1.45rem; }.education-qualification { font-weight: 700; }
.about-connect { padding-block: clamp(4rem, 8vw, 7rem); color: #edf8f4; background: #087f72; }
.about-connect .section-number { color: #bdebdc; }.about-connect__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.about-connect h2 { max-width: 12ch; margin: .8rem 0 1rem; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .96; }.about-connect p { color: #d1eee5; }
.about-connect nav { display: grid; }.about-connect nav a { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.3); color: #fff; font-weight: 750; text-decoration: none; }
.about-connect nav a:first-child { border-top: 1px solid rgba(255,255,255,.3); }
.profile-notice { padding: 1rem; border: 1px solid #d9b878; background: #fff8e8; }
@media (max-width: 600px) {

    .about-hero__visual.has-floating-core {
        z-index: 1100;
    }

    .signal-core.is-floating {
        right: max(.65rem, env(safe-area-inset-right));
        bottom: max(.65rem, env(safe-area-inset-bottom));

        width: 3.15rem;
        min-width: 0;

        padding: .2rem;

        border: 0;
        background: transparent;
        box-shadow: none;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .signal-core.is-floating .signal-core__navigation {
        grid-template-columns: 1fr;

        grid-template-rows:
            1.2rem
            2.15rem
            1.2rem;

        gap: .08rem;
    }

    .signal-core.is-floating .signal-core__step {
        width: 1.2rem;
        height: 1.2rem;
    }

    .signal-core.is-floating .signal-core__step svg {
        width: .78rem;
        height: .78rem;
    }

    .signal-core.is-floating .signal-core__map {
        width: 2.15rem;
        height: 2.15rem;
    }

    .signal-core.is-floating .signal-core__map svg,
    .signal-core.is-floating .signal-core__map-icon {
        width: 1.42rem;
        height: 1.42rem;
    }
}