/* ============================================================
   NATHANIEL COULTER
   v0.6.1 — Canonical Routes + Focus-State Repair
   ============================================================ */


/* ------------------------------------------------------------
   RESET
------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
}

html {
    background: #050608;
}

body {
    min-height: 100vh;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 48% 45%,
            rgba(27, 33, 42, 0.28) 0%,
            rgba(8, 10, 14, 0.13) 30%,
            rgba(5, 6, 8, 0) 64%
        ),
        #050608;

    color: #f3f4f5;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* ------------------------------------------------------------
   VARIABLES
------------------------------------------------------------ */

:root {
    --background: #050608;

    --text-primary: #f4f5f6;
    --text-secondary: #9099a8;
    --text-dim: #596170;

    --research: #8fc9ff;
    --capital: #ff5833;
    --projects: #b9a8ff;
    --alpha: #7b3cff;
    --philanthropy: #238f5d;
    --opsec: #b51f2d;
    --archive: #d9b77b;
}


/* ------------------------------------------------------------
   BACKGROUND
------------------------------------------------------------ */

.ambient-background {
    position: fixed;
    inset: 0;
    pointer-events: auto;
    overflow: hidden;
    z-index: 0;
}

.ambient-glow {
    position: absolute;
    border-radius: 999px;
    filter: blur(118px);
    opacity: 0.105;
    mix-blend-mode: screen;
}

.ambient-glow--one {
    width: 420px;
    height: 420px;
    left: 54%;
    top: 13%;
    background: #4b7397;
}

.ambient-glow--two {
    width: 360px;
    height: 360px;
    left: 9%;
    top: 52%;
    background: #45355f;
    opacity: 0.072;
}

.ambient-glow--three {
    width: 420px;
    height: 420px;
    right: 2%;
    bottom: -12%;
    background: #6b352d;
    opacity: 0.068;
}

/*
    Idle-state movement: environmental rather than decorative.
*/

.ambient-glow--one {
    animation: ambient-drift-one 28s ease-in-out infinite alternate;
}

.ambient-glow--two {
    animation: ambient-drift-two 34s ease-in-out infinite alternate;
}

.ambient-glow--three {
    animation: ambient-drift-three 31s ease-in-out infinite alternate;
}

@keyframes ambient-drift-one {
    from { transform: translate3d(-10px, -4px, 0) scale(0.98); }
    to   { transform: translate3d(30px, 20px, 0) scale(1.07); }
}

@keyframes ambient-drift-two {
    from { transform: translate3d(8px, 14px, 0) scale(1.02); }
    to   { transform: translate3d(-26px, -18px, 0) scale(1.09); }
}

@keyframes ambient-drift-three {
    from { transform: translate3d(-8px, 12px, 0) scale(1.00); }
    to   { transform: translate3d(24px, -24px, 0) scale(1.08); }
}

.ambient-sweep {
    position: absolute;
    width: 150vw;
    height: 34vh;
    left: -58vw;
    top: 27vh;
    opacity: 0.55;
    transform: rotate(-8deg);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(126, 160, 193, 0.00) 28%,
        rgba(126, 160, 193, 0.026) 48%,
        rgba(203, 214, 227, 0.018) 54%,
        rgba(255, 91, 50, 0.015) 61%,
        transparent 76%
    );
    filter: blur(34px);
    animation: ambient-sweep-travel 38s ease-in-out infinite alternate;
}

@keyframes ambient-sweep-travel {
    from { transform: translate3d(-8vw, -1.5vh, 0) rotate(-8deg) scaleY(.94); }
    to   { transform: translate3d(34vw, 3vh, 0) rotate(-8deg) scaleY(1.08); }
}

.noise-layer {
    position: absolute;
    inset: 0;
    opacity: 0.025;

    background-image:
        repeating-radial-gradient(
            circle at 0 0,
            transparent 0,
            transparent 2px,
            rgba(255,255,255,0.18) 3px
        );

    background-size: 11px 11px;
    animation: noise-drift 24s linear infinite;
}

@keyframes noise-drift {
    from { background-position: 0 0; }
    to   { background-position: 33px 22px; }
}


/* ------------------------------------------------------------
   DEEP FIELD / LIVING STATE SPACE

   The canvas itself is intentionally transparent. All geometry,
   local color, fading, and node response are rendered in app.js.
   It stays fixed behind both the overview and the v0.5 focus layer.
------------------------------------------------------------ */

.deep-field {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 0;
    pointer-events: none;

    opacity: .98;
    mix-blend-mode: screen;

    transform: scale(1);
    transform-origin: 50% 50%;

    filter: saturate(.98) brightness(1.12);

    transition:
        opacity 760ms ease,
        transform 1180ms cubic-bezier(.16,.82,.16,1),
        filter 760ms ease;

    will-change: transform, opacity, filter;
}

body.is-focus-mode .deep-field {
    opacity: 1;
    transform: scale(1.018);
    filter: saturate(1.04) brightness(1.16);
}

body.focus-research .deep-field {
    filter: saturate(1.04) brightness(1.055);
}

body.focus-capital .deep-field {
    filter: saturate(1.08) brightness(1.035);
}

body.focus-alpha .deep-field {
    filter: saturate(1.10) brightness(1.08);
}

body.focus-philanthropy .deep-field {
    filter: saturate(1.02) brightness(1.045);
}

body.focus-obscura .deep-field,
body.focus-natebot .deep-field {
    filter: saturate(.98) brightness(1.025);
}

@media (max-width: 760px) {
    .deep-field {
        opacity: .86;
    }

    body.is-focus-mode .deep-field {
        opacity: .90;
    }
}


/* ------------------------------------------------------------
   SVG TOPOLOGY
------------------------------------------------------------ */

.topology {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;
    overflow: visible;

    z-index: 1;
}

.topology-line {
    fill: none;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;

    opacity: 1;

    /* permanent subtle glow so the lines don't vanish into the field */
    filter: drop-shadow(0 0 6px rgba(205, 220, 238, 0.12));

    transition:
        opacity 360ms ease,
        stroke-width 360ms ease,
        filter 360ms ease;
}

.topology-line--faint {
    opacity: 0.9;
    stroke-width: 1.85;
    filter: drop-shadow(0 0 5px rgba(205, 220, 238, 0.10));
}

.topology-line--ghost {
    opacity: 0.62;
    stroke-width: 1.7;
    stroke-dasharray: 4 10;
    filter: drop-shadow(0 0 4px rgba(205, 220, 238, 0.08));
}

.topology-line.is-active {
    opacity: 1;
    stroke-width: 2.8;
    filter: drop-shadow(0 0 14px rgba(205, 220, 238, 0.28));
}

.topology-line.is-dimmed {
    opacity: 0.42;
}

/* A quiet packet moves along the living network while idle. */
.topology-signal {
    fill: none;
    stroke-width: 2.4;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;

    /* brighter and much more visible */
    opacity: 0.78;

    /* longer packet so it reads as motion instead of a tiny blip */
    stroke-dasharray: 22 150;

    animation: topology-signal-travel 8.5s linear infinite;

    filter: drop-shadow(0 0 18px rgba(205, 220, 238, 0.40));

    transition:
        opacity 320ms ease,
        stroke-width 320ms ease,
        filter 320ms ease;
}

.topology-signal:nth-child(2) { animation-delay: -5.2s; }
.topology-signal:nth-child(3) { animation-delay: -9.1s; }
.topology-signal:nth-child(4) { animation-delay: -2.7s; }
.topology-signal:nth-child(5) { animation-delay: -11.3s; }
.topology-signal:nth-child(6) { animation-delay: -7.4s; }

.topology-signal.is-active {
    opacity: 0.92;
    stroke-width: 2.9;
    filter: drop-shadow(0 0 14px rgba(205, 220, 238, 0.34));
}

.topology-signal.is-dimmed {
    opacity: 0.14;
}


/* ------------------------------------------------------------
   NEW BRANCH TOPOLOGY
------------------------------------------------------------ */

/* Research + Capital are the primary routes into Alpha. */
.topology-line.topology-line--alpha-primary:not(.is-active) {
    opacity: .94;
    stroke-width: 2.25;
}

/* Identity still connects to Alpha, but only as a quiet tertiary route. */
.topology-line.topology-line--alpha-faint:not(.is-active) {
    opacity: .31;
    stroke-width: 1.35;
    filter: drop-shadow(0 0 5px rgba(123, 60, 255, .08));
}

/* Philanthropy remains visually calm but clearly attached to identity. */
.topology-line.topology-line--philanthropy-primary:not(.is-active) {
    opacity: .72;
    stroke-width: 1.95;
    filter: drop-shadow(0 0 7px rgba(35, 143, 93, .10));
}

.topology-line.topology-line--philanthropy-capital:not(.is-active) {
    opacity: .68;
    stroke-width: 1.85;
}

/* Faster packets for the two new living branches. */
.topology-signal--alpha {
    animation-duration: 5.3s;
    opacity: .84;
    stroke-dasharray: 18 126;
}

.topology-signal--alpha.topology-signal--faint:not(.is-active) {
    opacity: .26;
}

.topology-signal--philanthropy {
    animation-duration: 4.7s;
    opacity: .88;
    stroke-dasharray: 20 132;
}

/* OPSEC is fed by Obscura + NateBot only. */
.topology-line.topology-line--opsec:not(.is-active) {
    opacity: .90;
    stroke-width: 2.15;
}

.topology-signal--opsec {
    animation-duration: 3.8s;
    opacity: .92;
    stroke-width: 2.65;
    stroke-dasharray: 16 112;
    filter: drop-shadow(0 0 14px rgba(205, 220, 238, .28));
}

@keyframes topology-signal-travel {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -332; }
}

/* ------------------------------------------------------------
   PARTICLES
------------------------------------------------------------ */

.particle-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.particle {
    position: absolute;

    width: 2px;
    height: 2px;

    background: rgba(235, 240, 247, 0.25);
    border-radius: 999px;

    will-change: translate;
    animation: particle-breathe 9s ease-in-out infinite alternate;
}

.particle:nth-child(3n) { animation-duration: 12s; animation-delay: -4s; }
.particle:nth-child(4n) { animation-duration: 15s; animation-delay: -8s; }
.particle:nth-child(5n) { animation-duration: 11s; animation-delay: -2s; }

@keyframes particle-breathe {
    from { filter: brightness(.72); }
    to   { filter: brightness(1.42); }
}

.particle--large {
    width: 3px;
    height: 3px;

    box-shadow:
        0 0 8px rgba(230, 238, 250, 0.16);
}

.p01 { left: 6%;  top: 13%; opacity: .34; }
.p02 { left: 12%; top: 34%; opacity: .18; }
.p03 { left: 18%; top: 19%; opacity: .16; }
.p04 { left: 23%; top: 61%; opacity: .29; }
.p05 { left: 27%; top: 43%; opacity: .13; }

.p06 { left: 31%; top: 78%; opacity: .20; }
.p07 { left: 36%; top: 12%; opacity: .25; }
.p08 { left: 39%; top: 33%; opacity: .12; }
.p09 { left: 43%; top: 68%; opacity: .18; }
.p10 { left: 47%; top: 23%; opacity: .20; }

.p11 { left: 51%; top: 15%; opacity: .12; }
.p12 { left: 53%; top: 76%; opacity: .23; }
.p13 { left: 57%; top: 34%; opacity: .15; }
.p14 { left: 61%; top: 19%; opacity: .28; }
.p15 { left: 64%; top: 59%; opacity: .13; }

.p16 { left: 68%; top: 10%; opacity: .16; }
.p17 { left: 71%; top: 43%; opacity: .22; }
.p18 { left: 74%; top: 72%; opacity: .19; }
.p19 { left: 77%; top: 27%; opacity: .31; }
.p20 { left: 81%; top: 52%; opacity: .12; }

.p21 { left: 84%; top: 16%; opacity: .34; }
.p22 { left: 88%; top: 63%; opacity: .18; }
.p23 { left: 91%; top: 37%; opacity: .25; }
.p24 { left: 95%; top: 79%; opacity: .31; }
.p25 { left: 97%; top: 23%; opacity: .17; }

.p26 { left: 14%; top: 84%; opacity: .22; }
.p27 { left: 33%; top: 91%; opacity: .15; }
.p28 { left: 59%; top: 88%; opacity: .27; }
.p29 { left: 72%; top: 92%; opacity: .14; }
.p30 { left: 92%; top: 91%; opacity: .21; }


/* ------------------------------------------------------------
   WORLD
------------------------------------------------------------ */

.world {
    position: relative;
    z-index: 3;

    width: 100vw;
    height: 100vh;

    min-height: 700px;
}


/* ------------------------------------------------------------
   BASE NODE
------------------------------------------------------------ */

.node {
    position: absolute;

    color: var(--text-primary);
    user-select: none;

    cursor: default;
    will-change: translate;

    transition:
        filter 320ms ease,
        opacity 320ms ease;
}

.node h1,
.node h2,
.node p {
    margin: 0;
}

.node-label {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.node-index {
    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 0.19em;
    color: var(--text-dim);

    transition: color 300ms ease;
}

.node h2 {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    transition:
        color 300ms ease,
        text-shadow 300ms ease,
        letter-spacing 300ms ease;
}

.node.is-hovered h2 {
    letter-spacing: 0.145em;
    text-shadow: 0 0 15px rgba(230, 237, 246, 0.06);
}

.node.is-hovered .node-index {
    color: rgba(145, 157, 174, 0.72);
}

.world.has-node-focus .node:not(.is-hovered):not(.node--identity) {
    opacity: 0.82;
}

.node:focus { outline: none; }

.node:focus-visible h2,
.node--identity:focus-visible h1 {
    text-shadow: 0 0 18px rgba(232, 239, 248, 0.10);
}

/* ------------------------------------------------------------
   HOVER PREVIEW FIELDS
------------------------------------------------------------ */

.node-preview {
    --preview-border: rgba(215, 225, 238, 0.11);
    --preview-glow: rgba(185, 205, 232, 0.035);

    position: absolute;
    z-index: 8;
    width: 286px;
    max-width: min(320px, 76vw);
    padding: 15px 17px 14px;
    pointer-events: none;
    user-select: none;

    border: 1px solid var(--preview-border);
    border-radius: 18px 18px 18px 6px;
    background: linear-gradient(145deg, rgba(19, 23, 30, 0.79), rgba(7, 9, 12, 0.57));
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22), 0 0 34px var(--preview-glow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    opacity: 0;
    visibility: hidden;
    filter: blur(4px);

    transition:
        opacity 260ms ease,
        filter 360ms ease,
        transform 430ms cubic-bezier(.18,.82,.18,1),
        visibility 0s linear 430ms;
}

.node.is-hovered .node-preview {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
    transition-delay: 70ms, 70ms, 70ms, 0s;
}

.preview-kicker,
.preview-meta {
    display: block;
    font-family: "Courier New", monospace;
    text-transform: uppercase;
}

.preview-kicker {
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.28;
    color: rgba(190, 202, 217, 0.78);
    text-shadow: 0 0 12px rgba(210, 224, 240, 0.035);
}

.preview-copy {
    font-size: 13px;
    line-height: 1.53;
    letter-spacing: 0.008em;
    color: rgba(231, 236, 243, 0.86);
}

.preview-meta {
    margin-top: 10px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.35;
    color: rgba(153, 166, 184, 0.68);
}

.node-preview--identity {
    left: 50%;
    top: calc(100% + 22px);

    width: min(540px, 86vw);
    max-width: min(540px, 86vw);
    min-height: 176px;

    padding: 0;
    overflow: hidden;
    text-align: left;

    transform: translate(-50%, 12px) scale(.982);

    --preview-border: rgba(176, 207, 232, 0.18);
    --preview-glow: rgba(118, 180, 224, 0.075);

    border-radius: 20px 20px 20px 7px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 20, 27, 0.92),
            rgba(6, 8, 12, 0.84)
        );

    box-shadow:
        0 18px 52px rgba(0, 0, 0, 0.32),
        0 0 38px var(--preview-glow);
}

.node-preview--identity::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(5, 8, 12, 0.985) 0%,
            rgba(5, 8, 12, 0.97) 31%,
            rgba(5, 8, 12, 0.87) 52%,
            rgba(5, 8, 12, 0.49) 70%,
            rgba(5, 8, 12, 0.18) 100%
        );
}

.identity-preview__portrait {
    position: absolute;
    z-index: 0;

    right: -2%;
    top: -7%;

    width: 49%;
    height: 114%;

    object-fit: cover;
    object-position: 50% 32%;

    opacity: .62;

    filter:
        saturate(.70)
        contrast(1.03)
        brightness(.76);

    transform: scale(1.035);

    transition:
        opacity 460ms ease,
        transform 720ms cubic-bezier(.18,.82,.18,1);
}

.node--identity.is-hovered .identity-preview__portrait {
    opacity: .68;
    transform: scale(1.00);
}

.identity-preview__content {
    position: relative;
    z-index: 2;

    width: 70%;

    padding: 18px 20px 17px;
}

.identity-preview__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 10px;

    font-family: "Courier New", monospace;
    text-transform: uppercase;
}

.identity-preview__index {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;

    color: rgba(201, 222, 239, .78);
}

.identity-preview__node {
    position: relative;

    padding-left: 13px;

    font-size: 8px;
    font-weight: 600;
    letter-spacing: .14em;

    color: rgba(123, 151, 176, .54);
}

.identity-preview__node::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 4px;
    height: 4px;

    transform: translateY(-50%);

    border-radius: 50%;
    background: rgba(130, 184, 224, .48);

    box-shadow: 0 0 10px rgba(130, 184, 224, .12);
}

.identity-preview__copy {
    margin: 0;

    font-size: 11.5px;
    font-weight: 450;
    line-height: 1.55;
    letter-spacing: .008em;

    color: rgba(229, 236, 243, .86);

    text-shadow:
        0 1px 1px rgba(0, 0, 0, .34);
}

.identity-preview__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 13px;
    padding: 7px 10px 6px;

    border: 1px solid rgba(157, 199, 230, .18);
    border-radius: 999px;

    background: rgba(113, 169, 211, .045);

    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;

    color: rgba(216, 232, 244, .78);

    box-shadow:
        inset 0 0 18px rgba(116, 179, 226, .018),
        0 0 18px rgba(116, 179, 226, .025);

    transition:
        color 240ms ease,
        border-color 240ms ease,
        background 240ms ease;
}

.identity-preview__cta-arrow {
    display: inline-block;

    color: rgba(122, 194, 242, .80);

    transition:
        transform 420ms cubic-bezier(.16,.82,.16,1),
        color 240ms ease;
}

.node--identity.is-hovered .identity-preview__cta {
    color: rgba(239, 247, 252, .94);
    border-color: rgba(157, 207, 241, .30);
    background: rgba(119, 185, 232, .075);
}

.node--identity.is-hovered .identity-preview__cta-arrow {
    color: rgba(147, 213, 255, .96);
    transform: translateX(3px);
}

.node--identity.is-hovered .node-preview--identity {
    transform: translate(-50%, 0) scale(1);
}

.node-preview--research {
    left: 4%;
    top: 67%;
    transform: translate(10px, 8px) scale(.985);
    --preview-border: rgba(143, 201, 255, 0.14);
    --preview-glow: rgba(143, 201, 255, 0.055);
}
.node--research.is-hovered .node-preview--research { transform: translate(0, 0) scale(1); }

.node-preview--capital {
    right: calc(100% + 22px);
    top: 16px;
    transform: translate(12px, 7px) scale(.985);
    --preview-border: rgba(255, 88, 51, 0.15);
    --preview-glow: rgba(255, 88, 51, 0.055);
}
.node--capital.is-hovered .node-preview--capital { transform: translate(0, 0) scale(1); }

.node-preview--project {
    left: 92px;
    top: -12px;
    transform: translate(-8px, 7px) scale(.985);
    --preview-border: rgba(185, 168, 255, 0.13);
    --preview-glow: rgba(185, 168, 255, 0.045);
}
.node--project.is-hovered .node-preview--project { transform: translate(0, 0) scale(1); }

.node-preview--archive {
    right: calc(100% + 16px);
    top: 14px;
    transform: translate(10px, 6px) scale(.985);
    --preview-border: rgba(217, 183, 123, 0.14);
    --preview-glow: rgba(217, 183, 123, 0.045);
}
.node--archive.is-hovered .node-preview--archive { transform: translate(0, 0) scale(1); }


.node-preview--alpha {
    right: calc(100% + 18px);
    top: -8px;

    transform: translate(12px, 8px) scale(.985);

    --preview-border: rgba(123, 60, 255, .18);
    --preview-glow: rgba(123, 60, 255, .065);
}

.node--alpha.is-hovered .node-preview--alpha {
    transform: translate(0, 0) scale(1);
}

.node-preview--philanthropy {
    left: -58px;
    bottom: calc(100% + 15px);
    top: auto;

    transform: translate(-8px, 10px) scale(.985);

    --preview-border: rgba(35, 143, 93, .18);
    --preview-glow: rgba(35, 143, 93, .055);
}

.node--philanthropy.is-hovered .node-preview--philanthropy {
    transform: translate(0, 0) scale(1);
}


/* ------------------------------------------------------------
   IDENTITY
------------------------------------------------------------ */

.node--identity {
    left: 50.8%;
    top: 46.8%;

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

    width: min(520px, 62vw);
    text-align: center;

    cursor: pointer;
    isolation: isolate;
    overflow: visible;
}

.node--identity h1 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(40px, 5vw, 74px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.035em;

    color: #f4f3f0;

    text-shadow:
        0 0 30px rgba(255,255,255,0.025);
}

.identity-subtitle {
    margin-top: 16px !important;

    font-size: 9px;
    letter-spacing: 0.29em;
    text-transform: uppercase;

    color: rgba(183, 191, 202, 0.46);
}

.identity-marker {
    position: absolute;
    left: 50%;
    top: calc(50% + 69px);

    width: 3px;
    height: 3px;

    transform: translateX(-50%);

    border-radius: 50%;
    background: rgba(255,255,255,0.22);
}


/* ------------------------------------------------------------
   IDENTITY HOVER FIELD
   A quiet mathematical activation cue layered over (not instead of) the
   living manifold. The actual manifold warp is generated in app.js.
------------------------------------------------------------ */

.identity-hover-field {
    position: absolute;
    z-index: 0;

    left: 50%;
    top: 44%;

    width: min(650px, 80vw);
    height: clamp(150px, 16vw, 214px);

    transform:
        translate(-50%, -50%)
        scale(.91)
        rotate(-1.5deg);

    transform-origin: center center;

    pointer-events: none;

    opacity: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(128, 176, 214, .075) 0%,
            rgba(107, 149, 184, .030) 38%,
            rgba(64, 92, 116, .010) 57%,
            transparent 72%
        );

    transition:
        opacity 420ms ease,
        transform 760ms cubic-bezier(.16,.82,.16,1);
}

.identity-hover-field::before,
.identity-hover-field::after {
    content: "";

    position: absolute;
    inset: 10% 3%;

    border-radius: 50%;
    pointer-events: none;

    opacity: 0;

    transition:
        opacity 420ms ease,
        transform 900ms cubic-bezier(.16,.82,.16,1);
}

.identity-hover-field::before {
    border: 1px solid rgba(165, 199, 225, .14);

    transform:
        rotate(-7deg)
        scale(.86);
}

.identity-hover-field::after {
    inset: 18% 9%;

    border: 1px dashed rgba(148, 183, 210, .10);

    transform:
        rotate(8deg)
        scale(.82);
}

.node--identity.is-hovered .identity-hover-field {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1)
        rotate(0deg);
}

.node--identity.is-hovered .identity-hover-field::before {
    opacity: .88;
    animation: identity-orbit-primary 5.8s ease-in-out infinite;
}

.node--identity.is-hovered .identity-hover-field::after {
    opacity: .68;
    animation: identity-orbit-secondary 7.4s ease-in-out infinite;
}

@keyframes identity-orbit-primary {
    0%,
    100% {
        transform: rotate(-7deg) scale(.96, .88);
        border-color: rgba(165, 199, 225, .12);
    }

    50% {
        transform: rotate(-3deg) scale(1.02, .93);
        border-color: rgba(170, 211, 240, .20);
    }
}

@keyframes identity-orbit-secondary {
    0%,
    100% {
        transform: rotate(8deg) scale(.91, .84);
        border-color: rgba(148, 183, 210, .075);
    }

    50% {
        transform: rotate(12deg) scale(.98, .89);
        border-color: rgba(156, 201, 232, .14);
    }
}

.node--identity .kinetic-name,
.node--identity .identity-subtitle,
.node--identity .identity-marker {
    position: relative;
    z-index: 1;
}


/* ------------------------------------------------------------
   KINETIC NAME / PROTOTYPE 3.2
   Inter Black · stacked equal-size lines · pseudo-extruded glyphs

   The four moving letters are independent 3D objects. Each object contains
   a live front face plus a stack of gray/off-white depth slices.

   Prototype 3.2 also gives each depth slice an explicit projected X/Y
   displacement in JavaScript so the sidewall remains visible even if the
   browser flattens the translateZ() stack.
------------------------------------------------------------ */

.kinetic-name {
    position: relative;

    width: 100%;
    height: clamp(142px, 13.6vw, 184px);

    display: block;

    pointer-events: none;
    transform-origin: center center;

    perspective: 1050px;
    transform-style: preserve-3d;

    /*
       IMPORTANT:
       No CSS filter may live on this element. A filter here would force
       the descendant 3D scene to flatten before the glyph extrusion is
       composited.
    */
    animation: kinetic-name-breathe 8s ease-in-out infinite;

    transition:
        transform 360ms cubic-bezier(.16,.82,.16,1);
}

.kinetic-name__canvas {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    pointer-events: none;

    /*
       The quiet glow lives only on the flat/base canvas. Because this
       canvas is a sibling of the 3D tilt layer, the filter cannot flatten
       the rotating extrusion.
    */
    filter:
        drop-shadow(0 0 14px rgba(131, 196, 255, 0.055))
        drop-shadow(0 0 34px rgba(131, 196, 255, 0.025));

    transition: filter 360ms ease;
}

.kinetic-name__tilt-layer {
    position: absolute;
    inset: 0;

    overflow: visible;
    pointer-events: none;

    perspective: 1050px;
    transform-style: preserve-3d;
}

/*
   Each moving letter is a tiny 3D scene:
   - depth canvases sit behind the front face
   - the wrapper rotates as one object
*/
.kinetic-name__tilt-glyph {
    position: absolute;
    left: 0;
    top: 0;

    /*
       Visibility is used instead of opacity because opacity can force
       descendant 3D layers into a composited flat bitmap.
    */
    visibility: hidden;
    pointer-events: none;

    transform: rotateX(0deg) rotateY(0deg);
    transform-origin: 50% 50% 0px;
    transform-style: preserve-3d;

    backface-visibility: visible;
    will-change: transform;
}

.kinetic-name__tilt-slice {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    pointer-events: none;

    transform-style: preserve-3d;
    backface-visibility: visible;

    /*
       No filter, opacity, mix-blend-mode, mask, clip-path or overflow
       lives on these layers.

       Depth ordering is handled by translateZ()/translate3d() in JS,
       rather than z-index.
    */
}

/*
   No separate .kinetic-name__tilt-face rule is required.

   The front face is already positioned by JavaScript with a small
   positive translateZ(), while the gray depth slices sit behind it.
*/

/*
   The future authored MP4 remains just a pixel source for the canvas.
   No rectangular video is ever shown over the manifold.
*/
.kinetic-name__video {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}

/* Keep the semantic heading without visually duplicating the canvas text. */
.node--identity .kinetic-name__accessible {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;
    border: 0 !important;
}

.node--identity:focus-visible .kinetic-name__canvas {
    filter:
        drop-shadow(0 0 18px rgba(131, 196, 255, 0.11))
        drop-shadow(0 0 42px rgba(131, 196, 255, 0.05));
}

/*
   Quiet environmental breathing only. The 15.5 second N-A-T-E sequence
   is the deliberate dimensional motion.
*/
@keyframes kinetic-name-breathe {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.004);
    }
}

@media (max-width: 760px) {
    .kinetic-name {
        height: clamp(126px, 29vw, 166px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kinetic-name {
        animation: none;
    }

    .kinetic-name__tilt-glyph {
        visibility: hidden !important;
        transform: none !important;
    }
}




@media (max-width: 760px) {
    .node-preview--identity {
        width: min(520px, 88vw);
        max-width: min(520px, 88vw);
        min-height: 168px;
    }

    .identity-preview__content {
        width: 75%;
        padding: 16px 17px 15px;
    }

    .identity-preview__portrait {
        right: -7%;
        width: 54%;
        opacity: .48;
    }

    .identity-preview__copy {
        font-size: 10.5px;
    }

    .identity-hover-field {
        width: 102vw;
        height: 190px;
    }
}


/* ------------------------------------------------------------
   RESEARCH
------------------------------------------------------------ */

.node--research {
    left: 65%;
    top: 9%;

    width: 31vw;
    min-width: 320px;
    height: 250px;
}

.node--research .node-label {
    position: absolute;
    left: 38%;
    top: 47%;
}

.node--research h2 {
    color: rgba(218, 235, 249, 0.76);
}

.node--research.is-hovered h2 {
    color: rgba(225, 241, 255, 0.96);
}

.equation-field {
    position: absolute;
    inset: 0;

    font-family:
        "Times New Roman",
        Georgia,
        serif;

    transform-origin: 50% 50%;
    transition: transform 800ms cubic-bezier(.18,.82,.18,1), filter 600ms ease;
}

.node--research.is-hovered .equation-field {
    transform: scale(1.028);
    filter: brightness(1.08);
}

.equation {
    position: absolute;
    white-space: nowrap;
    font-style: italic;

    color: rgba(164, 194, 222, 0.50);

    text-shadow:
        0 0 18px rgba(120, 177, 225, 0.08);

    will-change: translate;
}

.equation--1 { left: 7%;  top: 58%; font-size: 13px; opacity: .62; }
.equation--2 { left: 61%; top: 17%; font-size: 17px; opacity: .76; }
.equation--3 { left: 35%; top: 2%;  font-size: 20px; opacity: .48; }
.equation--4 { left: 81%; top: 55%; font-size: 14px; opacity: .63; }
.equation--5 { left: 18%; top: 78%; font-size: 11px; opacity: .51; }
.equation--6 { left: 74%; top: 83%; font-size: 12px; opacity: .55; }
.equation--7 { left: 5%;  top: 20%; font-size: 14px; opacity: .64; }
.equation--8 { left: 67%; top: 42%; font-size: 12px; opacity: .45; }


/* ------------------------------------------------------------
   COULTER CAPITAL
------------------------------------------------------------ */

.node--capital {
    left: 77.5%;
    top: 68%;

    width: 195px;
}

.capital-symbol {
    width: 80px;
    height: 80px;

    margin-left: 18px;
    margin-bottom: 8px;

    opacity: 0.72;

    transition:
        opacity 320ms ease,
        filter 320ms ease;
}

.capital-symbol img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;

    filter:
        brightness(.86)
        saturate(.78);
}

.node--capital h2 {
    color: rgba(225, 218, 216, 0.73);
}

.node--capital.is-hovered .capital-symbol {
    opacity: 0.9;
    filter: drop-shadow(0 0 9px rgba(255, 88, 51, 0.09));
}

.node--capital.is-hovered h2 {
    color: rgba(241, 228, 224, 0.96);
}


/* ------------------------------------------------------------
   PROJECTS
------------------------------------------------------------ */

.node--project {
    width: 170px;
}

.project-symbol {
    width: 46px;
    height: 46px;

    margin-bottom: 10px;
    opacity: .66;

    transition:
        opacity 320ms ease,
        filter 320ms ease;
}

.project-symbol img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;

    filter:
        grayscale(.35)
        brightness(.83)
        saturate(.7);
}

.node--project h2 {
    color: rgba(218, 214, 238, 0.68);
}

.node--project.is-hovered .project-symbol {
    opacity: .88;
    filter: drop-shadow(0 0 8px rgba(185, 168, 255, 0.07));
}

.node--project.is-hovered h2 {
    color: rgba(233, 229, 249, 0.93);
}

.node--obscura {
    left: 17%;
    top: 31%;
}

.node--natebot {
    left: 26%;
    top: 71%;
}


/* ------------------------------------------------------------
   ALPHA / APPLIED QUANT CROSSROADS
------------------------------------------------------------ */

.node--alpha {
    right: 18.8%;
    top: 41.5%;

    width: 172px;
}

.alpha-symbol {
    width: 58px;
    height: 58px;

    margin-left: 18px;
    margin-bottom: 9px;

    opacity: .74;

    transition:
        opacity 320ms ease,
        transform 420ms cubic-bezier(.16,.82,.16,1),
        filter 320ms ease;
}

.alpha-symbol img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        saturate(1.06)
        brightness(.93);
}

.node--alpha h2 {
    color: rgba(205, 190, 244, .74);
}

.node--alpha.is-hovered .alpha-symbol {
    opacity: .98;

    transform:
        translateY(-2px)
        rotate(-2deg)
        scale(1.045);

    filter:
        drop-shadow(0 0 12px rgba(123, 60, 255, .18));
}

.node--alpha.is-hovered h2 {
    color: rgba(226, 215, 255, .97);
    text-shadow: 0 0 18px rgba(123, 60, 255, .15);
}


/* ------------------------------------------------------------
   PHILANTHROPY
------------------------------------------------------------ */

.node--philanthropy {
    left: 55.2%;
    top: 84.85%;

    width: 188px;
}

.philanthropy-symbol {
    width: 54px;
    height: 54px;

    margin-left: 18px;
    margin-bottom: 9px;

    opacity: .70;

    transition:
        opacity 320ms ease,
        transform 420ms cubic-bezier(.16,.82,.16,1),
        filter 320ms ease;
}

.philanthropy-symbol img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        saturate(.92)
        brightness(.88);
}

.node--philanthropy h2 {
    color: rgba(181, 218, 197, .68);
}

.node--philanthropy.is-hovered .philanthropy-symbol {
    opacity: .95;

    transform:
        translateY(-2px)
        scale(1.035);

    filter:
        drop-shadow(0 0 10px rgba(35, 143, 93, .15));
}

.node--philanthropy.is-hovered h2 {
    color: rgba(209, 238, 220, .95);
    text-shadow: 0 0 16px rgba(35, 143, 93, .12);
}


/* ------------------------------------------------------------
   ARCHIVE
------------------------------------------------------------ */

.node--archive {
    right: 7%;
    top: 35.5%;
    width: 145px;
}

.node--archive h2 {
    color: rgba(218, 207, 184, 0.65);
}

.node--archive.is-hovered h2 {
    color: rgba(236, 222, 193, 0.93);
}

.archive-symbol {
    display: flex;
    flex-direction: column;

    width: 27px;
    gap: 4px;

    margin-left: 18px;
    margin-bottom: 10px;

    opacity: .42;
}

.archive-symbol span {
    display: block;
    height: 1px;
    background: var(--archive);
}

.archive-symbol span:nth-child(1) { width: 27px; }
.archive-symbol span:nth-child(2) { width: 19px; }
.archive-symbol span:nth-child(3) { width: 12px; }


/* ------------------------------------------------------------
   WORLD COORDINATES
------------------------------------------------------------ */

.world-coordinate {
    position: absolute;

    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: 0.22em;

    color: rgba(141, 150, 163, 0.25);
    text-transform: uppercase;
}

.coordinate--top-left {
    top: 32px;
    left: 38px;
}

.coordinate--bottom-right {
    right: 38px;
    bottom: 30px;
}



/* ------------------------------------------------------------
   PASSIVE OBSERVER / BROWSER TRACE
------------------------------------------------------------ */

.observer-widget {
    --trace: #7dff62;
    --trace-bright: #b4ff9f;
    --trace-dim: rgba(125, 255, 98, .52);
    --trace-faint: rgba(125, 255, 98, .17);
    --trace-panel: rgba(4, 9, 7, .88);

    position: fixed;
    left: 28px;
    bottom: 24px;
    top: auto;
    z-index: 72;

    width: 66px;
    min-height: 66px;

    color: var(--trace);
    font-family: "Courier New", ui-monospace, monospace;

    transition:
        opacity 360ms ease,
        transform 520ms cubic-bezier(.16,.82,.16,1),
        filter 360ms ease;
}

.observer-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;

    width: max-content;
    min-height: 58px;

    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;

    text-align: left;
    font: inherit;
}

.observer-trigger:focus {
    outline: none;
}

.observer-trigger:focus-visible .observer-emblem {
    box-shadow:
        0 0 0 1px rgba(125,255,98,.55),
        0 0 24px rgba(125,255,98,.14);
}

.observer-emblem {
    position: relative;
    display: grid;
    place-items: center;

    width: 54px;
    height: 54px;

    border: 1px solid rgba(125,255,98,.11);
    border-radius: 8px;

    background:
        radial-gradient(circle at 50% 48%, rgba(125,255,98,.035), transparent 66%),
        rgba(5, 8, 8, .22);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.015),
        0 0 22px rgba(125,255,98,.025);

    overflow: hidden;

    transition:
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 320ms cubic-bezier(.18,.82,.18,1),
        filter 260ms ease;
}

.observer-emblem::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(125,255,98,.025) 48%,
            rgba(125,255,98,.12) 50%,
            rgba(125,255,98,.025) 52%,
            transparent 100%
        );

    transform: translateY(-120%);
    animation: observer-scanline 4.8s linear infinite;
    pointer-events: none;
}

.observer-emblem__ring {
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(125,255,98,.10);
    border-radius: 6px;
    opacity: .55;
    animation: observer-ring-pulse 3.2s ease-in-out infinite alternate;
}

.observer-emblem img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;

    opacity: .88;
    filter:
        saturate(.88)
        contrast(1.06)
        drop-shadow(0 0 7px rgba(125,255,98,.035));

    transition:
        opacity 260ms ease,
        filter 260ms ease,
        transform 420ms cubic-bezier(.18,.82,.18,1);
}

.observer-trigger__copy {
    display: flex;
    flex-direction: column;
    gap: 3px;

    width: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;

    opacity: 0;
    transform: translateX(-7px);

    transition:
        width 360ms cubic-bezier(.18,.82,.18,1),
        max-width 360ms cubic-bezier(.18,.82,.18,1),
        opacity 220ms ease,
        transform 360ms cubic-bezier(.18,.82,.18,1);
}

.observer-widget:hover .observer-trigger__copy,
.observer-widget:focus-within .observer-trigger__copy,
.observer-widget.is-open .observer-trigger__copy {
    width: 126px;
    max-width: 126px;
    opacity: 1;
    transform: translateX(0);
}

.observer-trigger__eyebrow,
.observer-trigger__status {
    display: block;
    text-transform: uppercase;
}

.observer-trigger__eyebrow {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .19em;
    color: rgba(180,255,159,.74);
}

.observer-trigger__status {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--trace);
    text-shadow: 0 0 9px rgba(125,255,98,.14);
}

.observer-widget:hover .observer-emblem,
.observer-widget:focus-within .observer-emblem,
.observer-widget.is-open .observer-emblem {
    border-color: rgba(125,255,98,.31);
    box-shadow:
        inset 0 0 0 1px rgba(125,255,98,.035),
        0 0 24px rgba(125,255,98,.08);
    transform: translateY(-1px) scale(1.025);
}

.observer-widget:hover .observer-emblem img,
.observer-widget:focus-within .observer-emblem img,
.observer-widget.is-open .observer-emblem img {
    opacity: 1;
    filter:
        saturate(1)
        contrast(1.08)
        brightness(1.08)
        drop-shadow(0 0 9px rgba(125,255,98,.075));
    transform: scale(1.035);
}


/* Hover readout: one sentence only. */
.observer-message {
    position: absolute;
    left: 68px;
    top: 1px;

    width: min(560px, calc(100vw - 120px));
    min-height: 54px;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 10px 13px;

    border: 1px solid rgba(125,255,98,.14);
    border-radius: 5px 12px 12px 5px;

    background:
        linear-gradient(95deg, rgba(5,12,8,.94), rgba(3,7,6,.78));
    box-shadow:
        0 12px 34px rgba(0,0,0,.28),
        0 0 28px rgba(125,255,98,.018);

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

    color: var(--trace-bright);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.48;
    letter-spacing: .015em;

    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px) scale(.985);
    filter: blur(3px);

    pointer-events: none;

    transition:
        opacity 220ms ease,
        visibility 0s linear 260ms,
        transform 360ms cubic-bezier(.18,.82,.18,1),
        filter 300ms ease;
}

.observer-message::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 25px;

    width: 6px;
    height: 1px;

    background: linear-gradient(to left, var(--trace), transparent);
    opacity: .48;
}

.observer-message__label {
    flex: 0 0 auto;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;

    color: rgba(125,255,98,.50);
}

.observer-widget:hover:not(.is-open) .observer-message,
.observer-widget:focus-within:not(.is-open) .observer-message {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    filter: blur(0);
    transition-delay: 70ms, 0s, 70ms, 70ms;
}


/* Expanded trace. */
.observer-panel {
    position: absolute;
    left: 0;
    top: 70px;

    width: min(430px, calc(100vw - 56px));
    max-height: min(690px, calc(100vh - 110px));
    overflow: auto;

    padding: 18px 18px 14px;

    border: 1px solid rgba(125,255,98,.20);
    border-radius: 7px 20px 20px 7px;

    background:
        linear-gradient(rgba(125,255,98,.013) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125,255,98,.010) 1px, transparent 1px),
        linear-gradient(145deg, rgba(5,12,8,.965), rgba(3,7,6,.91));
    background-size: 100% 24px, 24px 100%, auto;

    box-shadow:
        0 24px 58px rgba(0,0,0,.42),
        0 0 46px rgba(125,255,98,.028),
        inset 0 0 50px rgba(125,255,98,.012);

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

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.975);
    transform-origin: 16px 0;
    filter: blur(4px);

    pointer-events: none;

    transition:
        opacity 230ms ease,
        visibility 0s linear 360ms,
        transform 430ms cubic-bezier(.18,.82,.18,1),
        filter 330ms ease;
}

.observer-widget.is-open .observer-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;

    transition-delay: 0s;
}

.observer-panel::-webkit-scrollbar {
    width: 7px;
}

.observer-panel::-webkit-scrollbar-track {
    background: rgba(125,255,98,.02);
}

.observer-panel::-webkit-scrollbar-thumb {
    background: rgba(125,255,98,.18);
    border-radius: 999px;
}

.observer-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;

    padding-bottom: 14px;
    border-bottom: 1px solid rgba(125,255,98,.12);
}

.observer-panel__eyebrow {
    display: block;
    margin-bottom: 5px;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;

    color: rgba(125,255,98,.52);
}

.observer-panel h2 {
    margin: 0;

    font-family: "Courier New", ui-monospace, monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;

    color: var(--trace-bright);
    text-shadow: 0 0 16px rgba(125,255,98,.08);
}

.observer-panel__header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.observer-theta {
    padding-top: 4px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;

    color: rgba(125,255,98,.63);
}

.observer-close {
    display: grid;
    place-items: center;

    width: 27px;
    height: 27px;

    padding: 0;
    border: 1px solid rgba(125,255,98,.13);
    border-radius: 4px;

    background: rgba(125,255,98,.018);
    color: rgba(180,255,159,.68);

    font: 17px/1 "Courier New", monospace;
    cursor: pointer;

    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.observer-close:hover,
.observer-close:focus-visible {
    color: var(--trace-bright);
    border-color: rgba(125,255,98,.34);
    background: rgba(125,255,98,.045);
    box-shadow: 0 0 16px rgba(125,255,98,.04);
    outline: none;
}

.observer-panel__sentence {
    margin: 14px 0 15px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: .012em;

    color: var(--trace-bright);
}

.observer-metrics {
    display: grid;
    gap: 0;

    margin: 0;
    padding: 0;

    border-top: 1px solid rgba(125,255,98,.08);
}

.observer-metric {
    display: grid;
    grid-template-columns: minmax(105px, .72fr) minmax(0, 1.35fr);
    gap: 12px;

    padding: 8px 1px;

    border-bottom: 1px solid rgba(125,255,98,.065);
}

.observer-metric dt,
.observer-metric dd {
    margin: 0;
}

.observer-metric dt {
    font-size: 8px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .14em;
    text-transform: uppercase;

    color: rgba(125,255,98,.44);
}

.observer-metric dd {
    min-width: 0;

    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .015em;

    color: rgba(180,255,159,.83);
    overflow-wrap: anywhere;
}

.observer-metric--strong dd {
    color: var(--trace-bright);
    text-shadow: 0 0 9px rgba(125,255,98,.06);
}

.observer-panel__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;

    margin-top: 14px;
    padding-top: 11px;

    border-top: 1px solid rgba(125,255,98,.10);
}

.observer-panel__footer span {
    position: relative;
    padding-left: 9px;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;

    color: rgba(125,255,98,.39);
}

.observer-panel__footer span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;

    width: 3px;
    height: 3px;

    border-radius: 999px;
    background: var(--trace);
    opacity: .5;
    transform: translateY(-50%);
}


/* Loading / ready states. */
.observer-widget[data-state="loading"] .observer-emblem {
    animation: observer-loading-glow 1.6s ease-in-out infinite alternate;
}

.observer-widget[data-state="error"] .observer-trigger__status {
    color: #d8ff8a;
}

@keyframes observer-scanline {
    0%   { transform: translateY(-120%); opacity: 0; }
    10%  { opacity: .7; }
    42%  { opacity: .45; }
    55%  { transform: translateY(120%); opacity: 0; }
    100% { transform: translateY(120%); opacity: 0; }
}

@keyframes observer-ring-pulse {
    from { opacity: .24; transform: scale(.98); }
    to   { opacity: .70; transform: scale(1.015); }
}

@keyframes observer-loading-glow {
    from { box-shadow: 0 0 10px rgba(125,255,98,.02); }
    to   { box-shadow: 0 0 28px rgba(125,255,98,.09); }
}


/* The trace belongs to the overview. It disappears during camera focus
   so it never collides with the focus-return control. */
body.is-focus-mode .observer-widget {
    opacity: 0;
    transform: translate3d(-10px, -10px, 0) scale(.96);
    filter: blur(2px);
    pointer-events: none;
}


/* Responsive observer presentation. */
@media (max-width: 760px) {
    .observer-widget {
        left: 18px;
        bottom: 16px;
        top: auto;
    }

    .observer-emblem {
        width: 48px;
        height: 48px;
    }

    .observer-emblem img {
        width: 36px;
        height: 36px;
    }

    .observer-message {
        left: 60px;
        width: min(78vw, 430px);
        min-height: 48px;
        font-size: 9px;
    }

    .observer-message__label {
        display: none;
    }

    .observer-trigger__copy {
        display: none;
    }

    .observer-panel {
        bottom: 61px;
        top: auto;
        width: min(410px, calc(100vw - 36px));
        max-height: calc(100vh - 92px);
        padding: 16px 15px 13px;
    }

    .observer-metric {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 9px;
    }
}


/* ------------------------------------------------------------
   ACCESSIBLE NAVIGATION
------------------------------------------------------------ */

.semantic-navigation {
    position: fixed;
    left: 14px;
    top: 14px;
    z-index: 100;

    display: flex;
    flex-direction: column;

    transform: translateX(-200%);

    background: #101318;
    padding: 14px;
}

.semantic-navigation:focus-within {
    transform: translateX(0);
}

.semantic-navigation a {
    color: white;
    font-size: 14px;
    padding: 6px 12px;
}


/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */

@media (max-width: 1050px) {

    .node--research {
        left: 60%;
        top: 10%;
        width: 38vw;
    }

    .node--capital {
        left: 72%;
        top: 68%;
    }

    .node--alpha {
        right: 2.5%;
        top: 46%;
    }

    .node--philanthropy {
        left: 54%;
        top: 80%;
    }

    .node--archive {
        right: 1.5%;
        top: 19%;
    }

    .node--obscura {
        left: 11%;
        top: 31%;
    }

    .node--natebot {
        left: 19%;
        top: 72%;
    }
}


@media (max-width: 760px) {

    body {
        overflow-y: auto;
        overflow-x: hidden;
    }

    .world {
        min-height: 900px;
    }

    .node--identity {
        top: 42%;
        width: 88vw;
    }

    .node--identity h1 {
        font-size: clamp(40px, 11vw, 62px);
    }

    .identity-subtitle {
        letter-spacing: .18em;
    }

    .node--research {
        left: 49%;
        top: 6%;
        width: 50vw;
        min-width: 0;
    }

    .equation--1,
    .equation--5,
    .equation--6 {
        display: none;
    }

    .node--capital {
        left: 63%;
        top: 68%;
    }

    .node--alpha {
        right: 1%;
        top: 48%;
        width: 150px;
    }

    .node--philanthropy {
        left: 49%;
        top: 82%;
        width: 165px;
    }

    .node--archive {
        right: 1%;
        top: 15%;
    }

    .node--obscura {
        left: 7%;
        top: 23%;
    }

    .node--natebot {
        left: 11%;
        top: 69%;
    }

    .node-preview { width: min(235px, 70vw); }

    .node-preview--capital,
    .node-preview--archive,
    .node-preview--alpha,
    .node-preview--philanthropy {
        right: auto;
        left: 0;
        top: calc(100% + 12px);
        bottom: auto;
    }

    .node-preview--research {
        left: 12%;
        top: 68%;
    }

    .world-coordinate {
        display: none;
    }
}


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

    .node,
    .particle,
    .equation {
        translate: 0 0 !important;
    }

    .topology-line,
    .topology-signal {
        transition: none;
        animation: none;
    }

    .ambient-glow { animation: none; }
}


/* ============================================================
   V0.5 — CAMERA / APPROACH TRANSITIONS
   ============================================================ */

:root {
    --camera-x: 0px;
    --camera-y: 0px;
    --camera-scale: 1;
}

body {
    overscroll-behavior: none;
}

.world {
    transform-origin: 0 0;
    transform:
        translate3d(var(--camera-x), var(--camera-y), 0)
        scale(var(--camera-scale));

    transition:
        transform 1080ms cubic-bezier(.16,.82,.16,1),
        filter 760ms ease;

    will-change: transform;
}

body.is-focus-mode {
    cursor: default;
}

body.is-focus-mode .world {
    filter: saturate(.96) brightness(.88);
}

body.is-focus-mode .node {
    pointer-events: none;
}

body.is-focus-mode .node-preview {
    opacity: 0 !important;
    visibility: hidden !important;
    transition-delay: 0s !important;
}

body.is-focus-mode .world .node:not(.is-selected) {
    opacity: .055;
    filter: blur(.8px) brightness(.58);
}

body.is-focus-mode .world .node.is-selected {
    opacity: .78;
    filter: brightness(1.14);
}


/* The approached source stays visible during the first half of the camera
   move, then dissolves as its interior resolves. Research is the exception:
   its equations remain as part of the interior atmosphere. */
body.focus-identity .node--identity,
body.focus-capital .node--capital,
body.focus-obscura .node--obscura,
body.focus-natebot .node--natebot,
body.focus-alpha .node--alpha,
body.focus-philanthropy .node--philanthropy,
body.focus-archive .node--archive {
    opacity: .055 !important;
    transition: opacity 520ms ease 360ms, filter 520ms ease 360ms;
}

body.is-focus-mode .world-coordinate {
    opacity: .12;
}

body.is-focus-mode .topology-line:not(.is-active) {
    opacity: .14;
}

body.is-focus-mode .topology-signal:not(.is-active) {
    opacity: .04;
}

body.is-focus-mode .topology-line.is-active {
    opacity: .96;
    stroke-width: 1.95;
}

body.is-focus-mode .topology-signal.is-active {
    opacity: .46;
}

body.is-focus-mode .topology-ghosts {
    opacity: .22;
}

body.is-focus-mode .particle-field {
    transform: scale(1.035);
    opacity: .74;
    transition: transform 1200ms cubic-bezier(.16,.82,.16,1), opacity 800ms ease;
}

body:not(.is-focus-mode) .particle-field {
    transform: scale(1);
    opacity: 1;
    transition: transform 1200ms cubic-bezier(.16,.82,.16,1), opacity 800ms ease;
}

body.is-focus-mode .ambient-sweep {
    opacity: .8;
}

/* Different approach states tint the existing world without recoloring it. */
body.focus-research .ambient-glow--one { opacity: .16; }
body.focus-capital .ambient-glow--three { opacity: .13; }
body.focus-obscura .ambient-glow--two,
body.focus-natebot .ambient-glow--two { opacity: .105; }


/* ------------------------------------------------------------
   FOCUS LAYER
------------------------------------------------------------ */

.focus-layer {
    position: fixed;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    visibility: hidden;
}

body.is-focus-mode .focus-layer {
    visibility: visible;
}

.focus-back {
    position: absolute;
    left: clamp(24px, 3.2vw, 52px);
    top: clamp(22px, 3.4vh, 40px);
    z-index: 50;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    border: 0;
    padding: 9px 10px 9px 0;
    background: transparent;
    color: rgba(206, 215, 227, .66);
    cursor: pointer;

    opacity: 0;
    transform: translateX(-12px);

    transition:
        opacity 360ms ease 520ms,
        transform 520ms cubic-bezier(.16,.82,.16,1) 520ms,
        color 220ms ease;
}

body.is-focus-ready .focus-back {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.focus-back:hover,
.focus-back:focus-visible {
    color: rgba(244, 247, 251, .96);
}

.focus-back:focus-visible {
    outline: 1px solid rgba(210, 221, 235, .18);
    outline-offset: 5px;
}

.focus-back__arrow {
    font-size: 18px;
    line-height: 1;
}

.focus-back__text {
    font-family: "Courier New", monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.focus-reticle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%) scale(.68) rotate(8deg);
    opacity: 0;
    transition: opacity 300ms ease, transform 660ms cubic-bezier(.16,.82,.16,1);
}

.focus-reticle span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: rgba(206, 219, 234, .25);
}

.focus-reticle span:nth-child(1) { left: 0; top: 0; border-left: 1px solid; border-top: 1px solid; }
.focus-reticle span:nth-child(2) { right: 0; top: 0; border-right: 1px solid; border-top: 1px solid; }
.focus-reticle span:nth-child(3) { left: 0; bottom: 0; border-left: 1px solid; border-bottom: 1px solid; }
.focus-reticle span:nth-child(4) { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }

body.is-focus-mode:not(.is-focus-ready) .focus-reticle {
    opacity: .8;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
}

.focus-panel {
    position: absolute;
    inset: 0;
    z-index: 10;

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

    transition:
        opacity 520ms ease,
        visibility 0s linear 520ms;
}

.focus-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.focus-eyebrow {
    display: block;
    margin-bottom: 12px;

    font-family: "Courier New", monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .18em;
    line-height: 1.4;
    text-transform: uppercase;
    color: rgba(167, 181, 199, .66);
}


/* ------------------------------------------------------------
   PROFILE APPROACH
------------------------------------------------------------ */

.profile-focus {
    position: absolute;
    left: 50%;
    top: 54%;
    width: min(1040px, 84vw);

    display: grid;
    grid-template-columns: minmax(230px, 310px) minmax(0, 1fr);
    gap: clamp(38px, 5vw, 76px);
    align-items: center;

    transform: translate(-50%, -46%) scale(.965);
    opacity: 0;
    filter: blur(7px);

    transition:
        opacity 640ms ease 90ms,
        transform 900ms cubic-bezier(.16,.82,.16,1) 60ms,
        filter 760ms ease 60ms;
}

.focus-panel--identity.is-active .profile-focus {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
}

.profile-focus__portrait-wrap {
    position: relative;
    justify-self: end;
    width: min(270px, 24vw);
    aspect-ratio: .78;
}

.profile-focus__halo {
    position: absolute;
    inset: 8% -12% -6% -8%;
    border-radius: 55% 45% 48% 52% / 46% 58% 42% 54%;
    background:
        radial-gradient(circle at 54% 42%, rgba(183, 207, 232, .15), transparent 57%);
    filter: blur(20px);
    opacity: .7;
    animation: profile-halo-breathe 8s ease-in-out infinite alternate;
}

@keyframes profile-halo-breathe {
    from { transform: scale(.96) rotate(-1deg); opacity: .48; }
    to   { transform: scale(1.05) rotate(1.5deg); opacity: .82; }
}

.profile-focus__portrait {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    border-radius: 45% 55% 48% 52% / 51% 44% 56% 49%;
    border: 1px solid rgba(212, 224, 239, .14);
    box-shadow:
        0 30px 70px rgba(0,0,0,.34),
        0 0 50px rgba(170, 197, 226, .045);

    filter: saturate(.86) contrast(1.02) brightness(.92);
}

.profile-focus__copy {
    position: relative;
    max-width: 650px;
    padding-left: clamp(24px, 3vw, 42px);
}

.profile-focus__copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 6px;
    width: 1px;
    background: linear-gradient(
        to bottom,
        rgba(213, 224, 239, .03),
        rgba(213, 224, 239, .18) 28%,
        rgba(213, 224, 239, .09) 74%,
        transparent
    );
}

.profile-focus__copy h2 {
    margin: 0 0 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4.2vw, 64px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.035em;
    color: rgba(246, 246, 244, .96);
}


/* ------------------------------------------------------------
   PROFILE SOCIAL / RESEARCH LINK STRIP
------------------------------------------------------------ */

.profile-link-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;

    width: fit-content;
    max-width: 100%;

    margin: -4px 0 18px;

    position: relative;
    z-index: 3;
}

.profile-link-strip__item {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;

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

    flex: 0 0 28px;

    overflow: hidden;

    border: 1px solid rgba(183, 204, 226, .08);
    border-radius: 8px;

    background: rgba(12, 16, 22, .28);

    opacity: .76;

    text-decoration: none;

    transition:
        opacity 220ms ease,
        transform 320ms cubic-bezier(.16,.82,.16,1),
        border-color 240ms ease,
        background 240ms ease,
        box-shadow 240ms ease;
}

.profile-link-strip__item img {
    display: block !important;

    width: 21px !important;
    height: 21px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 21px !important;
    max-height: 21px !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    position: static !important;

    transform: none;

    opacity: 1;
}

/* Slightly larger where the native mark benefits from the extra room. */
.profile-link-strip__item--linkedin img,
.profile-link-strip__item--github img,
.profile-link-strip__item--capital img {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
}

/* Research-profile assets keep their native colors and shapes. */
.profile-link-strip__item--orcid,
.profile-link-strip__item--ssrn,
.profile-link-strip__item--researchgate,
.profile-link-strip__item--scholar {
    border-radius: 50%;
}

.profile-link-strip__item:hover,
.profile-link-strip__item:focus-visible {
    opacity: 1;

    transform: translateY(-3px) scale(1.07);

    border-color: rgba(171, 207, 236, .20);
    background: rgba(28, 39, 51, .42);

    box-shadow:
        0 7px 20px rgba(0, 0, 0, .20),
        0 0 16px rgba(136, 190, 231, .055);

    outline: none;
}

.profile-link-strip__item:focus-visible {
    border-color: rgba(184, 221, 249, .34);
}

@media (max-width: 760px) {
    .profile-link-strip {
        gap: 7px;
        margin-bottom: 16px;
    }

    .profile-link-strip__item {
        width: 27px;
        height: 27px;
        min-width: 27px;
        min-height: 27px;
        max-width: 27px;
        max-height: 27px;

        flex-basis: 27px;
    }

    .profile-link-strip__item img {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
}

.profile-focus__copy p {
    margin: 0;
    max-width: 70ch;
    font-size: clamp(12px, 1.03vw, 15px);
    line-height: 1.75;
    color: rgba(217, 224, 233, .80);
}

.profile-focus__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 13px;
    margin-top: 24px;
}

.profile-focus__tags span {
    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(163, 177, 194, .58);
}

/* ------------------------------------------------------------
   PROFILE PHOTO CLUSTER
------------------------------------------------------------ */

.profile-photo-cluster {
    position: relative;

    width: min(365px, 32vw);
    min-width: 320px;
    min-height: 470px;

    margin-right: 44px;

    flex: 0 0 auto;
}


/* ------------------------------------------------------------
   SHARED PHOTO CARD
------------------------------------------------------------ */

.profile-photo-card {
    position: absolute;

    margin: 0;
    overflow: hidden;

    border: 1px solid rgba(166, 194, 221, .13);

    background:
        linear-gradient(
            145deg,
            rgba(11, 18, 26, .74),
            rgba(4, 8, 13, .88)
        );

    box-shadow:
        0 18px 46px rgba(0, 0, 0, .30),
        inset 0 0 0 1px rgba(181, 207, 232, .025);

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

    transition:
        transform 420ms cubic-bezier(.16,.82,.16,1),
        border-color 280ms ease,
        box-shadow 280ms ease,
        filter 280ms ease;
}

.profile-photo-card img {
    width: 100%;
    height: 100%;

    display: block;
}


/* ------------------------------------------------------------
   MAIN PROFILE PORTRAIT
   Restores original organic silhouette
------------------------------------------------------------ */

.profile-photo-card--main {
    left: 42px;
    top: 70px;

    width: 270px;
    aspect-ratio: .78;

    z-index: 4;

    /*
       Exact organic shape from the original profile portrait.
    */
    border-radius:
        45% 55% 48% 52%
        /
        51% 44% 56% 49%;

    border: 1px solid rgba(212, 224, 239, .14);

    background: transparent;

    box-shadow:
        0 30px 70px rgba(0,0,0,.34),
        0 0 50px rgba(170, 197, 226, .045);
}

.profile-photo-card--main img {
    object-fit: cover;
    object-position: center;

    filter:
        saturate(.86)
        contrast(1.02)
        brightness(.92);
}


/* ------------------------------------------------------------
   HOCKEY PAINTING
   Upper-left / partially behind main portrait
------------------------------------------------------------ */

.profile-photo-card--paint {
    left: -22px;
    top: -2px;

    width: 142px;
    height: 190px;

    z-index: 2;

    border-radius: 20px;

    transform: rotate(-6deg);

    opacity: .96;
}

.profile-photo-card--paint img {
    object-fit: cover;
    object-position: center 16%;

    filter:
        saturate(.84)
        contrast(1.02)
        brightness(.91);
}


/* ------------------------------------------------------------
   BUDDY SKATE
   Move it farther left so the main portrait does not cover
   the child on the right side of the photograph.
------------------------------------------------------------ */

.profile-photo-card--buddy {
    left: -112px;
    top: 286px;

    width: 205px;
    height: 220px;

    z-index: 3;

    border-radius: 18px;

    transform: rotate(-3.5deg);

    background:
        radial-gradient(
            circle at center,
            rgba(78, 112, 142, .07),
            rgba(5, 9, 14, .82)
        );
}

.profile-photo-card--buddy img {
    width: calc(100% - 8px);
    height: calc(100% - 8px);

    margin: 4px;

    /*
       Show the complete source image.
       Do NOT crop it.
    */
    object-fit: contain;
    object-position: center;

    border-radius: 13px;

    filter:
        saturate(.92)
        contrast(1.02)
        brightness(.95);
}

.profile-photo-card--buddy:hover {
    transform:
        rotate(-1.5deg)
        translateY(-4px)
        scale(1.025);
}


/* ------------------------------------------------------------
   2008
   Natural image dimensions — no artificial card/container.
------------------------------------------------------------ */

.profile-photo-card--2008 {
    right: -42px;
    top: 4px;

    width: 158px;
    height: auto;

    z-index: 2;

    overflow: visible;

    border: none !important;
    border-radius: 0;

    background: none !important;

    box-shadow: none !important;

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

    transform: rotate(5deg);
}

.profile-photo-card--2008 img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    object-fit: initial;

    border: none;
    border-radius: 0;

    background: none;

    filter:
        saturate(.90)
        contrast(1.02)
        brightness(.94);
}

/* no 2008 caption */
.profile-photo-card--2008 .profile-photo-card__tag {
    display: none;
}

/*
   Override the generic card hover so the invisible
   container does not suddenly reappear.
*/
.profile-photo-card--2008:hover {
    border: none !important;
    background: none !important;
    box-shadow: none !important;

    transform:
        rotate(6.5deg)
        translateY(-3px)
        scale(1.025);
}

/* ------------------------------------------------------------
   FOOTBALL
   Lower-right satellite image
------------------------------------------------------------ */

.profile-photo-card--football {
    right: -38px;
    top: 304px;

    width: 176px;
    height: 184px;

    z-index: 3;

    border-radius: 18px;

    transform: rotate(3.5deg);

    background:
        radial-gradient(
            circle at center,
            rgba(78, 112, 142, .06),
            rgba(5, 9, 14, .82)
        );
}

.profile-photo-card--football img {
    width: calc(100% - 8px);
    height: calc(100% - 8px);

    margin: 4px;

    object-fit: cover;

    /*
       Slightly left-of-center because the important thing is
       you carrying the ball, not necessarily the entire defender.
    */
    object-position: 43% center;

    border-radius: 13px;

    filter:
        saturate(.90)
        contrast(1.03)
        brightness(.94);
}

.profile-photo-card--football:hover {
    transform:
        rotate(2deg)
        translateY(-4px)
        scale(1.025);
}

/* ------------------------------------------------------------
   SMALL LABELS
------------------------------------------------------------ */

.profile-photo-card__tag {
    position: absolute;
    z-index: 5;

    left: 9px;
    bottom: 9px;

    margin: 0;
    padding: 4px 8px;

    border: 1px solid rgba(181, 208, 231, .15);
    border-radius: 999px;

    background: rgba(5, 9, 15, .78);

    color: rgba(224, 235, 244, .74);

    font-family: "Courier New", monospace;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .14em;
    line-height: 1.3;
    text-transform: uppercase;

    box-shadow:
        0 5px 16px rgba(0, 0, 0, .22);
}


/* ------------------------------------------------------------
   HOVER LIFE
------------------------------------------------------------ */

.profile-photo-card:hover {
    border-color: rgba(184, 214, 238, .25);

    box-shadow:
        0 24px 58px rgba(0, 0, 0, .37),
        0 0 22px rgba(151, 194, 227, .035);
}

.profile-photo-card--main:hover {
    transform: translateY(-2px) scale(1.006);
}

.profile-photo-card--paint:hover {
    transform:
        rotate(-4deg)
        translateY(-4px)
        scale(1.025);
}

.profile-photo-card--buddy:hover {
    transform:
        rotate(-1.5deg)
        translateY(-4px)
        scale(1.025);
}

.profile-photo-card--2008:hover {
    transform: rotate(6.5deg) translateY(-3px) scale(1.02);
}

/* ------------------------------------------------------------
   RESPONSIVE
------------------------------------------------------------ */

@media (max-width: 1100px) {

    .profile-photo-cluster {
        width: min(340px, 38vw);
        min-width: 300px;
        min-height: 470px;

        margin-right: 30px;
    }

    .profile-photo-card--main {
        left: 37px;

        width: 250px;
    }

    .profile-photo-card--paint {
        width: 128px;
        height: 174px;
    }

    .profile-photo-card--buddy {
        width: 148px;
        height: 186px;
    }

    .profile-photo-card--2008 {
        right: -18px;

        width: 138px;
        height: 220px;
    }
}


@media (max-width: 900px) {

    .profile-photo-cluster {
        width: 100%;
        min-width: 0;
        min-height: auto;

        display: grid;

        grid-template-columns:
            repeat(3, minmax(110px, 1fr));

        gap: 14px;

        margin-right: 0;
        margin-bottom: 30px;
    }

    .profile-photo-card {
        position: relative;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        transform: none !important;
    }

    .profile-photo-card--main {
        grid-column: 1 / -1;

        justify-self: center;

        width: 240px;

        aspect-ratio: .78;
    }

    .profile-photo-card--paint,
    .profile-photo-card--buddy,
    .profile-photo-card--2008 {
        width: 100%;
        height: 190px;
    }
}

/* ------------------------------------------------------------
   RESEARCH APPROACH — SECOND-ORDER CONSTELLATION
------------------------------------------------------------ */

.research-focus {
    position: absolute;
    inset: 7vh 5.5vw 5.5vh;
    min-height: 620px;
}

.research-focus__origin {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 3;
    width: min(330px, 28vw);
    transform: translate(-50%, -50%) scale(.94);
    text-align: center;
    opacity: 0;
    filter: blur(6px);

    transition:
        opacity 520ms ease 120ms,
        transform 780ms cubic-bezier(.16,.82,.16,1) 80ms,
        filter 620ms ease 80ms;
}

.focus-panel--research.is-active .research-focus__origin {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
}

.research-focus__origin h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4.6vw, 68px);
    font-weight: 400;
    letter-spacing: -.035em;
    color: rgba(238, 245, 251, .94);
}

.research-focus__origin p {
    margin: 12px auto 0;
    max-width: 34ch;
    font-size: 11px;
    line-height: 1.6;
    color: rgba(173, 193, 211, .52);
}

.research-focus__links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    transition: opacity 720ms ease 220ms;
}

.focus-panel--research.is-active .research-focus__links {
    opacity: .62;
}

.research-focus__links path {
    fill: none;
    stroke: rgba(128, 181, 224, .16);
    stroke-width: 1;
    stroke-dasharray: 2 8;
    vector-effect: non-scaling-stroke;
    animation: paper-link-flow 10s linear infinite;
}

.research-focus__links path:nth-child(2n) { animation-delay: -4.4s; }
.research-focus__links path:nth-child(3n) { animation-delay: -7.2s; }

@keyframes paper-link-flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -80; }
}

.paper-node {
    --paper-delay: 0ms;

    position: absolute;
    z-index: 4;
    width: clamp(138px, 11.8vw, 184px);

    opacity: 0;
    filter: blur(7px);
    transform: translate(var(--enter-x, 0), var(--enter-y, 0)) scale(.72);
    transform-origin: center;

    transition:
        opacity 520ms ease var(--paper-delay),
        filter 680ms ease var(--paper-delay),
        transform 960ms cubic-bezier(.16,.82,.16,1) var(--paper-delay);
}

.focus-panel--research.is-active .paper-node {
    opacity: 1;
    filter: blur(0);
    transform: translate(0, 0) scale(1);
}

.paper-node--01 {
    left: 5%;
    top: 7%;
    --paper-delay: 110ms;
    --enter-x: 185px;
    --enter-y: 120px;
}

.paper-node--02 {
    left: 8%;
    top: 55%;
    --paper-delay: 175ms;
    --enter-x: 180px;
    --enter-y: -50px;
}

.paper-node--03 {
    left: 66%;
    top: 2%;
    --paper-delay: 240ms;
    --enter-x: -150px;
    --enter-y: 135px;
}

.paper-node--04 {
    left: 83%;
    top: 38%;
    --paper-delay: 305ms;
    --enter-x: -215px;
    --enter-y: 15px;
}

.paper-node--05 {
    left: 62%;
    top: 58%;
    --paper-delay: 370ms;
    --enter-x: -170px;
    --enter-y: -105px;
}

.paper-node__image-shell {
    position: relative;
    width: 100%;
    aspect-ratio: .755;
    overflow: hidden;

    border: 1px solid rgba(150, 194, 229, .13);
    background: rgba(12, 16, 21, .58);
    box-shadow:
        0 18px 45px rgba(0,0,0,.30),
        0 0 30px rgba(112, 177, 225, .025);

    transition:
        transform 440ms cubic-bezier(.16,.82,.16,1),
        border-color 320ms ease,
        filter 320ms ease;
}

.paper-node__image-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(143,201,255,.05), transparent 38%, rgba(0,0,0,.10));
    pointer-events: none;
}

.paper-node__image-shell img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.72) saturate(.66) contrast(1.04);
    transition: filter 320ms ease, transform 600ms cubic-bezier(.16,.82,.16,1);
}

.paper-node:hover .paper-node__image-shell {
    transform: translateY(-5px) scale(1.025);
    border-color: rgba(157, 206, 244, .26);
}

.paper-node:hover .paper-node__image-shell img {
    filter: brightness(.91) saturate(.85) contrast(1.02);
    transform: scale(1.018);
}

.paper-node__index {
    display: block;
    margin-top: 10px;
    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: .18em;
    color: rgba(119, 158, 190, .65);
}

.paper-node h3 {
    margin: 6px 0 0;
    font-size: clamp(10.5px, .78vw, 12px);
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: .018em;
    text-transform: none;
    color: rgba(236, 242, 248, .94);
}

.paper-node__subtitle {
    display: block;
    margin-top: 3px;
    font-weight: 500;
    color: rgba(221, 230, 240, .86);
}

.paper-node p {
    margin: 7px 0 0;
    font-family: "Courier New", monospace;
    font-size: clamp(8.5px, .62vw, 10px);
    line-height: 1.35;
    letter-spacing: .025em;
    text-transform: none;
    color: rgba(246, 249, 252, .86);
}

.paper-node__doi {
    overflow-wrap: anywhere;
    text-shadow: 0 0 10px rgba(215, 232, 248, .06);
}

.focus-panel--research.is-active .paper-node--01,
.focus-panel--research.is-active .paper-node--04 {
    animation: paper-float-a 8.5s ease-in-out 1.1s infinite alternate;
}

.focus-panel--research.is-active .paper-node--02,
.focus-panel--research.is-active .paper-node--05 {
    animation: paper-float-b 10.2s ease-in-out 1.25s infinite alternate;
}

.focus-panel--research.is-active .paper-node--03 {
    animation: paper-float-c 9.4s ease-in-out 1.2s infinite alternate;
}

@keyframes paper-float-a {
    from { translate: 0 0; }
    to   { translate: 3px -6px; }
}

@keyframes paper-float-b {
    from { translate: 0 0; }
    to   { translate: -4px 5px; }
}

@keyframes paper-float-c {
    from { translate: 0 0; }
    to   { translate: 5px 3px; }
}

/* Make the original formula field materially open when Research is entered. */
body.focus-research .equation {
    color: rgba(167, 205, 237, .60);
    text-shadow: 0 0 22px rgba(114, 181, 233, .12);
}

body.focus-research .node--research .node-label {
    opacity: .045;
    transition: opacity 480ms ease 360ms;
}


/* ------------------------------------------------------------
   COULTER CAPITAL APPROACH
------------------------------------------------------------ */

.capital-focus {
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(1120px, 88vw);
    height: min(610px, 76vh);

    display: grid;
    grid-template-columns: minmax(260px, .78fr) minmax(420px, 1.35fr);
    gap: clamp(30px, 5vw, 86px);
    align-items: center;

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

.capital-focus__copy {
    opacity: 0;
    transform: translateX(-24px);
    filter: blur(6px);
    transition:
        opacity 580ms ease 100ms,
        transform 820ms cubic-bezier(.16,.82,.16,1) 70ms,
        filter 620ms ease 70ms;
}

.focus-panel--capital.is-active .capital-focus__copy {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

.capital-focus__copy h2 {
    margin: 0 0 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 4.3vw, 66px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.035em;
    color: rgba(247, 240, 237, .95);
}

.capital-focus__copy p {
    margin: 0;
    max-width: 42ch;
    font-size: 13px;
    line-height: 1.68;
    color: rgba(223, 216, 213, .69);
}

.capital-focus__motion-field {
    position: relative;
    height: min(520px, 66vh);
    overflow: hidden;
    opacity: 0;
    transform: translateX(34px) scale(.96);
    filter: blur(8px);

    mask-image: radial-gradient(ellipse 74% 72% at 50% 50%, black 44%, transparent 94%);
    -webkit-mask-image: radial-gradient(ellipse 74% 72% at 50% 50%, black 44%, transparent 94%);

    transition:
        opacity 700ms ease 120ms,
        transform 980ms cubic-bezier(.16,.82,.16,1) 90ms,
        filter 720ms ease 90ms;
}

.focus-panel--capital.is-active .capital-focus__motion-field {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
}

.capital-focus__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;

    mix-blend-mode: screen;
    opacity: .90;
    filter: contrast(1.12) saturate(.93) brightness(.94);
}

.capital-focus__axis {
    position: absolute;
    z-index: -1;
    background: rgba(255, 95, 58, .09);
}

.capital-focus__axis--x {
    left: 4%;
    right: 4%;
    top: 65%;
    height: 1px;
}

.capital-focus__axis--y {
    top: 5%;
    bottom: 5%;
    left: 32%;
    width: 1px;
}

.capital-focus__caption {
    position: absolute;
    right: 5%;
    bottom: 7%;
    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(211, 157, 143, .44);
}


/* ------------------------------------------------------------
   PROJECT APPROACHES
------------------------------------------------------------ */

.project-focus {
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(960px, 82vw);

    display: grid;
    grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 92px);
    align-items: center;

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

.project-focus__visual {
    position: relative;
    justify-self: end;
    width: min(210px, 19vw);
    aspect-ratio: 1;

    opacity: 0;
    transform: translate(-22px, 8px) scale(.84) rotate(-2deg);
    filter: blur(8px);

    transition:
        opacity 620ms ease 90ms,
        transform 920ms cubic-bezier(.16,.82,.16,1) 60ms,
        filter 680ms ease 60ms;
}

.focus-panel--project.is-active .project-focus__visual {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
    filter: blur(0);
}

.project-focus__visual::before {
    content: "";
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(185,168,255,.10), transparent 66%);
    filter: blur(18px);
}

.project-focus__visual img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: saturate(.84) brightness(.91);
}

.project-focus__copy {
    position: relative;
    max-width: 610px;
    padding-left: clamp(22px, 3vw, 40px);

    opacity: 0;
    transform: translateX(22px);
    filter: blur(7px);

    transition:
        opacity 600ms ease 140ms,
        transform 900ms cubic-bezier(.16,.82,.16,1) 100ms,
        filter 680ms ease 100ms;
}

.focus-panel--project.is-active .project-focus__copy {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

.project-focus__copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(185,168,255,.18) 22%, rgba(185,168,255,.08) 80%, transparent);
}

.project-focus__copy h2 {
    margin: 0 0 18px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(32px, 3.65vw, 55px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.026em;
    color: rgba(239, 237, 247, .94);
}

.project-focus__copy p {
    margin: 0;
    font-size: clamp(12px, 1.03vw, 15px);
    line-height: 1.72;
    color: rgba(219, 219, 229, .77);
}

.project-focus__meta {
    margin-top: 22px;
    font-family: "Courier New", monospace;
    font-size: 8px;
    line-height: 1.55;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(161, 151, 193, .62);
}


/* ------------------------------------------------------------
   ALPHA + PHILANTHROPY BRANCH APPROACHES
------------------------------------------------------------ */

.branch-focus {
    position: absolute;
    left: 50%;
    top: 50%;

    width: min(980px, 86vw);

    display: grid;
    grid-template-columns: minmax(230px, .72fr) minmax(360px, 1.25fr);
    gap: clamp(34px, 6vw, 92px);
    align-items: center;

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

.branch-focus__visual,
.branch-focus__copy {
    opacity: 0;
    filter: blur(7px);

    transition:
        opacity 620ms ease 90ms,
        transform 900ms cubic-bezier(.16,.82,.16,1) 60ms,
        filter 680ms ease 60ms;
}

.branch-focus__visual {
    position: relative;

    width: min(300px, 29vw);
    aspect-ratio: 1;

    justify-self: center;

    display: grid;
    place-items: center;

    transform: translateX(-28px) scale(.94);
}

.branch-focus__copy {
    transform: translateX(28px);
}

.focus-panel--branch.is-active .branch-focus__visual,
.focus-panel--branch.is-active .branch-focus__copy {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) scale(1);
}

.branch-focus__visual img {
    position: relative;
    z-index: 2;

    width: 72%;
    height: 72%;

    display: block;
    object-fit: contain;

    filter:
        brightness(.94)
        saturate(.96);
}

.branch-focus__orbit {
    position: absolute;
    z-index: 1;

    border-radius: 50%;

    pointer-events: none;
}

.branch-focus__orbit--one {
    inset: 10%;

    border: 1px solid rgba(166, 191, 215, .12);

    animation: branch-orbit-one 9s linear infinite;
}

.branch-focus__orbit--two {
    inset: 20%;

    border: 1px dashed rgba(166, 191, 215, .08);

    animation: branch-orbit-two 12s linear infinite reverse;
}

.branch-focus__copy h2 {
    margin: 0 0 18px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -.038em;

    color: rgba(242, 242, 242, .95);
}

.branch-focus__copy p {
    margin: 0;

    max-width: 54ch;

    font-size: 13px;
    line-height: 1.72;

    color: rgba(218, 221, 228, .72);
}

.branch-focus__meta {
    margin-top: 22px;

    font-family: "Courier New", monospace;
    font-size: 8px;
    line-height: 1.6;
    letter-spacing: .15em;
    text-transform: uppercase;

    color: rgba(158, 169, 185, .56);
}

.branch-focus--alpha .branch-focus__visual img {
    filter:
        saturate(1.10)
        brightness(.97)
        drop-shadow(0 0 28px rgba(123, 60, 255, .10));
}

.branch-focus--alpha .branch-focus__orbit--one {
    border-color: rgba(123, 60, 255, .20);
}

.branch-focus--alpha .branch-focus__orbit--two {
    border-color: rgba(123, 60, 255, .12);
}

.branch-focus--alpha .branch-focus__copy h2 {
    color: rgba(230, 220, 255, .96);
}

.branch-focus--alpha .branch-focus__meta {
    color: rgba(167, 140, 231, .68);
}

.branch-focus--philanthropy .branch-focus__visual img {
    filter:
        saturate(.92)
        brightness(.91)
        drop-shadow(0 0 26px rgba(35, 143, 93, .10));
}

.branch-focus--philanthropy .branch-focus__orbit--one {
    border-color: rgba(35, 143, 93, .19);
}

.branch-focus--philanthropy .branch-focus__orbit--two {
    border-color: rgba(35, 143, 93, .11);
}

.branch-focus--philanthropy .branch-focus__copy h2 {
    color: rgba(218, 239, 226, .95);
}

.branch-focus--philanthropy .branch-focus__meta {
    color: rgba(106, 170, 131, .67);
}

@keyframes branch-orbit-one {
    from { transform: rotate(0deg) scaleX(.92); }
    to   { transform: rotate(360deg) scaleX(.92); }
}

@keyframes branch-orbit-two {
    from { transform: rotate(0deg) scaleY(.90); }
    to   { transform: rotate(360deg) scaleY(.90); }
}

@media (max-width: 760px) {
    .branch-focus {
        width: min(680px, 88vw);
        grid-template-columns: 1fr;
        gap: 18px;
        text-align: center;
        top: 52%;
    }

    .branch-focus__visual {
        width: 150px;
    }

    .branch-focus__copy p {
        margin-inline: auto;
    }
}


/* ============================================================
   PHILANTHROPY — FOCUSED COMMUNITY / SERVICE ARCHIVE
   ============================================================ */

.focus-panel--philanthropy {
    overflow: hidden;
}

.philanthropy-focus {
    position: absolute;
    inset: 0;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(54, 151, 96, .32)
        rgba(8, 14, 11, .04);

    opacity: 0;

    transform: translateY(18px);
    filter: blur(6px);

    transition:
        opacity 620ms ease 90ms,
        transform 900ms cubic-bezier(.16,.82,.16,1) 60ms,
        filter 720ms ease 60ms;
}

.focus-panel--philanthropy.is-active .philanthropy-focus {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.philanthropy-focus::-webkit-scrollbar {
    width: 8px;
}

.philanthropy-focus::-webkit-scrollbar-track {
    background: rgba(8, 14, 11, .03);
}

.philanthropy-focus::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(54, 151, 96, .25);
}

.philanthropy-focus__inner {
    width: min(1220px, 88vw);

    margin: 0 auto;
    padding:
        clamp(104px, 13vh, 132px)
        0
        clamp(76px, 11vh, 118px);
}


/* ---------------- Header ---------------- */

.philanthropy-focus__header {
    display: grid;
    grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
    gap: clamp(34px, 6vw, 88px);
    align-items: center;

    min-height: 320px;

    margin-bottom: 48px;
}

.philanthropy-focus__mark {
    position: relative;

    width: min(220px, 18vw);
    aspect-ratio: 1;

    justify-self: center;

    display: grid;
    place-items: center;
}

.philanthropy-focus__mark::before,
.philanthropy-focus__mark::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.philanthropy-focus__mark::before {
    inset: 2%;

    border: 1px solid rgba(45, 158, 93, .17);

    animation: philanthropy-ring-one 10s linear infinite;
}

.philanthropy-focus__mark::after {
    inset: 13%;

    border: 1px dashed rgba(45, 158, 93, .09);

    animation: philanthropy-ring-two 14s linear infinite reverse;
}

.philanthropy-focus__mark img {
    position: relative;
    z-index: 2;

    width: 78%;
    height: 78%;

    display: block;
    object-fit: contain;

    filter:
        saturate(.94)
        brightness(.94)
        drop-shadow(0 0 30px rgba(35, 143, 93, .09));
}

.philanthropy-focus__intro {
    max-width: 720px;
}

.philanthropy-focus__intro h2 {
    margin: 0 0 18px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 6vw, 88px);
    font-weight: 400;
    line-height: .95;
    letter-spacing: -.045em;

    color: rgba(224, 243, 232, .97);
}

.philanthropy-focus__intro > p {
    margin: 0;

    max-width: 58ch;

    font-size: clamp(13px, 1.02vw, 15px);
    line-height: 1.72;

    color: rgba(218, 228, 223, .72);
}

.philanthropy-focus__meta {
    margin-top: 22px;

    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .16em;
    text-transform: uppercase;

    color: rgba(88, 174, 124, .68);
}


/* ---------------- Section headings ---------------- */

.philanthropy-section {
    margin-top: 58px;
}

.philanthropy-section__heading {
    display: flex;
    align-items: baseline;
    gap: 16px;

    margin-bottom: 22px;
    padding-bottom: 13px;

    border-bottom: 1px solid rgba(91, 170, 124, .10);
}

.philanthropy-section__heading > span {
    flex: 0 0 auto;

    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;

    color: rgba(82, 173, 121, .60);
}

.philanthropy-section__heading h3 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 2.6vw, 40px);
    font-weight: 400;
    letter-spacing: -.025em;

    color: rgba(233, 240, 236, .91);
}


/* ---------------- Featured cards ---------------- */

.philanthropy-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 2.6vw, 34px);
}

.philanthropy-feature {
    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(83, 166, 118, .14);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(14, 25, 20, .74),
            rgba(7, 11, 9, .54)
        );

    box-shadow:
        0 20px 58px rgba(0, 0, 0, .20),
        inset 0 0 34px rgba(35, 143, 93, .018);

    transition:
        transform 420ms cubic-bezier(.16,.82,.16,1),
        border-color 300ms ease,
        box-shadow 300ms ease;
}

.philanthropy-feature:hover {
    transform: translateY(-4px);

    border-color: rgba(83, 184, 125, .25);

    box-shadow:
        0 26px 66px rgba(0, 0, 0, .24),
        0 0 30px rgba(35, 143, 93, .035);
}

.philanthropy-feature__media {
    position: relative;

    margin: 0;

    /*
       Taller canvas than the original 16:9.
       Much better for the STEM + Buddy Skate source images.
    */
    aspect-ratio: 4 / 3;

    overflow: hidden;

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

    background:
        radial-gradient(
            circle at center,
            rgba(35, 143, 93, .045),
            rgba(5, 8, 7, .82) 72%
        );
}

.philanthropy-feature__media::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(5, 10, 7, .52),
            transparent 34%
        );
}

.philanthropy-feature__media img {
    width: 100%;
    height: 100%;

    display: block;

    /*
       Critical change:
       show the WHOLE photograph instead of cropping it.
    */
    object-fit: contain;
    object-position: center;

    filter:
        saturate(.92)
        contrast(1.02)
        brightness(.92);

    transform: scale(1);

    transition:
        transform 700ms cubic-bezier(.16,.82,.16,1),
        filter 400ms ease;
}

.philanthropy-feature:hover .philanthropy-feature__media img {
    transform: scale(1.012);

    filter:
        saturate(.99)
        contrast(1.03)
        brightness(.97);
}

.philanthropy-feature:hover .philanthropy-feature__media img {
    transform: scale(1.045);

    filter:
        saturate(.98)
        contrast(1.03)
        brightness(.95);
}

.philanthropy-feature__media figcaption {
    position: absolute;
    z-index: 2;

    left: 18px;
    bottom: 14px;

    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;

    color: rgba(222, 238, 229, .76);
}

.philanthropy-feature__body {
    padding: 22px 22px 24px;
}

.philanthropy-feature__body h4,
.philanthropy-card__content h4 {
    margin: 0 0 13px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.024em;

    color: rgba(239, 244, 241, .94);
}

.philanthropy-feature__body p,
.philanthropy-card__content p {
    margin: 0;

    font-size: 11.5px;
    line-height: 1.68;

    color: rgba(209, 218, 213, .72);
}

.philanthropy-feature__body p + p,
.philanthropy-card__content p + p {
    margin-top: 11px;
}


/* ---------------- Shared card metadata ---------------- */

.philanthropy-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 13px;

    margin-bottom: 12px;
}

.philanthropy-card__meta span {
    position: relative;

    font-family: "Courier New", monospace;
    font-size: 7px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase;

    color: rgba(91, 178, 128, .60);
}

.philanthropy-card__meta span:not(:last-child)::after {
    content: "·";

    position: absolute;
    right: -9px;

    color: rgba(102, 129, 114, .34);
}

.philanthropy-card__note {
    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid rgba(90, 164, 120, .09);

    font-family: "Courier New", monospace;
    font-size: 8px;
    line-height: 1.55;
    letter-spacing: .06em;

    color: rgba(137, 188, 158, .63);
}


/* ---------------- Secondary grid ---------------- */

.philanthropy-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.philanthropy-card {
    min-width: 0;

    overflow: hidden;

    border: 1px solid rgba(84, 150, 111, .10);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(11, 19, 15, .63),
            rgba(6, 9, 8, .43)
        );

    box-shadow:
        0 14px 42px rgba(0, 0, 0, .15);

    transition:
        border-color 300ms ease,
        transform 420ms cubic-bezier(.16,.82,.16,1),
        background 300ms ease;
}

.philanthropy-card:hover {
    transform: translateY(-3px);

    border-color: rgba(74, 166, 112, .20);

    background:
        linear-gradient(
            145deg,
            rgba(14, 25, 19, .72),
            rgba(6, 10, 8, .48)
        );
}

.philanthropy-card--wide {
    grid-column: 1 / -1;
}

.philanthropy-card__image {
    margin: 0;

    width: 100%;

    /*
       Gives the charity photographs enough vertical room.
    */
    aspect-ratio: 3 / 2;

    overflow: hidden;

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

    background:
        radial-gradient(
            circle at center,
            rgba(35, 143, 93, .035),
            rgba(5, 8, 6, .72) 74%
        );
}

.philanthropy-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    filter:
        saturate(.90)
        brightness(.91)
        contrast(1.02);
}

.philanthropy-card__image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        saturate(.88)
        brightness(.88)
        contrast(1.02);
}

.philanthropy-card__image--logo {
    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at center,
            rgba(35, 143, 93, .08),
            transparent 64%
        );
}

.philanthropy-card__image--logo img {
    width: 40%;
    height: 66%;

    object-fit: contain;

    filter:
        saturate(.90)
        brightness(.90);
}

.philanthropy-card__content {
    padding: 20px 20px 22px;
}

.philanthropy-card--text .philanthropy-card__content {
    min-height: 190px;
}


/* ---------------- Causes ---------------- */

.philanthropy-causes {
    margin-top: 56px;
    padding: 25px 26px 27px;

    border: 1px solid rgba(87, 154, 115, .11);
    border-radius: 14px;

    background:
        linear-gradient(
            130deg,
            rgba(18, 30, 23, .52),
            rgba(6, 9, 8, .34)
        );
}

.philanthropy-causes__label {
    display: block;

    margin-bottom: 12px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;

    color: rgba(230, 239, 234, .90);
}

.philanthropy-causes p {
    margin: 0;

    max-width: 100ch;

    font-size: 11px;
    line-height: 1.72;

    color: rgba(199, 214, 206, .66);
}


/* ---------------- Motion ---------------- */

@keyframes philanthropy-ring-one {
    from { transform: rotate(0deg) scaleX(.94); }
    to   { transform: rotate(360deg) scaleX(.94); }
}

@keyframes philanthropy-ring-two {
    from { transform: rotate(0deg) scaleY(.91); }
    to   { transform: rotate(360deg) scaleY(.91); }
}


/* ---------------- Responsive ---------------- */

@media (max-width: 920px) {
    .philanthropy-focus__inner {
        width: min(760px, 88vw);
    }

    .philanthropy-focus__header {
        grid-template-columns: 160px minmax(0, 1fr);
        gap: 30px;
    }

    .philanthropy-focus__mark {
        width: 160px;
    }

    .philanthropy-feature-grid,
    .philanthropy-card-grid {
        grid-template-columns: 1fr;
    }

    .philanthropy-card--wide {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    .philanthropy-focus__inner {
        width: min(560px, 88vw);

        padding-top: 92px;
        padding-bottom: 72px;
    }

    .philanthropy-focus__header {
        grid-template-columns: 1fr;

        min-height: 0;

        text-align: center;
    }

    .philanthropy-focus__mark {
        width: 132px;
    }

    .philanthropy-focus__intro > p {
        margin-inline: auto;
    }

    .philanthropy-section {
        margin-top: 42px;
    }

    .philanthropy-section__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .philanthropy-feature__body,
    .philanthropy-card__content {
        padding: 17px 17px 19px;
    }

    .philanthropy-feature__body h4,
    .philanthropy-card__content h4 {
        font-size: 21px;
    }
}


/* ------------------------------------------------------------
   ARCHIVE APPROACH
------------------------------------------------------------ */

.archive-focus {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(700px, 76vw);
    transform: translate(-50%, -45%) scale(.96);
    text-align: center;
    opacity: 0;
    filter: blur(7px);

    transition:
        opacity 620ms ease 90ms,
        transform 900ms cubic-bezier(.16,.82,.16,1) 60ms,
        filter 680ms ease 60ms;
}

.focus-panel--archive.is-active .archive-focus {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
}

.archive-focus h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 6vw, 86px);
    font-weight: 400;
    letter-spacing: -.04em;
    color: rgba(240, 233, 219, .91);
}

.archive-focus p {
    margin: 20px auto 0;
    max-width: 48ch;
    font-size: 12px;
    line-height: 1.7;
    color: rgba(205, 195, 176, .58);
}

.archive-focus__lines {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

.archive-focus__lines span {
    display: block;
    width: 56px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(217,183,123,.30), transparent);
    animation: archive-pulse 5.5s ease-in-out infinite alternate;
}

.archive-focus__lines span:nth-child(2) { animation-delay: -1.4s; }
.archive-focus__lines span:nth-child(3) { animation-delay: -2.8s; }
.archive-focus__lines span:nth-child(4) { animation-delay: -4.2s; }
.archive-focus__lines span:nth-child(5) { animation-delay: -5.1s; }

@keyframes archive-pulse {
    from { opacity: .28; transform: scaleX(.72); }
    to   { opacity: .80; transform: scaleX(1.08); }
}


/* ------------------------------------------------------------
   FOCUS MODE RESPONSIVE
------------------------------------------------------------ */

@media (max-width: 1000px) {
    .research-focus {
        inset: 8vh 3.5vw 4vh;
    }

    .paper-node {
        width: clamp(112px, 13vw, 150px);
    }

    .capital-focus {
        width: 92vw;
        grid-template-columns: .72fr 1.28fr;
        gap: 30px;
    }

    .project-focus,
    .profile-focus {
        width: 90vw;
    }
}

@media (max-width: 760px) {
    body.is-focus-mode {
        overflow: hidden;
    }

    .focus-back {
        left: 20px;
        top: 18px;
    }

    .profile-focus,
    .project-focus,
    .capital-focus {
        top: 53%;
        width: 88vw;
        max-height: 78vh;
        overflow-y: auto;
        display: block;
        padding: 34px 0 40px;
    }

    .profile-focus__portrait-wrap,
    .project-focus__visual {
        width: 150px;
        margin: 0 auto 28px;
        justify-self: auto;
    }

    .profile-focus__portrait-wrap {
        aspect-ratio: .84;
    }

    .profile-focus__copy,
    .project-focus__copy {
        padding-left: 22px;
    }

    .profile-focus__copy h2,
    .project-focus__copy h2,
    .capital-focus__copy h2 {
        font-size: 36px;
    }

    .capital-focus__copy {
        position: relative;
        z-index: 4;
        width: 86%;
        margin: 0 auto;
    }

    .capital-focus__motion-field {
        width: 100%;
        height: 42vh;
        margin-top: 8px;
    }

    .research-focus {
        inset: 8vh 3vw 3vh;
        min-height: 0;
    }

    .research-focus__origin {
        top: 45%;
        width: 46vw;
    }

    .research-focus__origin h2 {
        font-size: 38px;
    }

    .paper-node {
        width: 94px;
    }

    .paper-node--01 { left: 2%; top: 9%; }
    .paper-node--02 { left: 4%; top: 62%; }
    .paper-node--03 { left: 67%; top: 6%; }
    .paper-node--04 { left: 73%; top: 39%; }
    .paper-node--05 { left: 62%; top: 70%; }

    .paper-node h3 {
        font-size: 9px;
        line-height: 1.25;
    }

    .paper-node p {
        display: block;
        font-size: 7.5px;
        line-height: 1.25;
    }
}

/* ------------------------------------------------------------
   RESEARCH PROFILE / PUBLICATION ICONS
------------------------------------------------------------ */

.research-profile-icons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.research-profile-icons img {
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;

    opacity: 1;
    filter: none;

    transition:
        opacity 320ms ease,
        filter 320ms ease,
        transform 320ms cubic-bezier(.16, .82, .16, 1);
}

.research-profile-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;

    transform: translateY(0) scale(1);
    transform-origin: center;

    transition:
        transform 260ms cubic-bezier(.16, .82, .16, 1),
        filter 260ms ease,
        box-shadow 260ms ease;
}

.research-profile-link:hover,
.research-profile-link:focus-visible {
    transform: translateY(-5px) scale(1.14);
    filter: drop-shadow(0 0 10px rgba(180, 218, 247, 0.28));
    box-shadow: 0 0 0 1px rgba(235, 244, 252, 0.15);
    outline: none;
}

.research-profile-link:active {
    transform: translateY(-2px) scale(1.08);
}

.research-profile-link img {
    opacity: 1 !important;
    filter: none !important;
}


/* ---------------- Homepage ---------------- */

.node-label--research {
    display: flex;
    flex-direction: column;
    align-items: center;

    /*
       Preserve the existing node-label position.
       The child row handles the normal index + title layout.
    */
    gap: 7px;
}

.research-label-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.research-profile-icons--home {
    position: static;

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

    gap: 5px;

    /*
       Tiny horizontal correction because the 01 index makes
       the text row's visual center slightly asymmetric.
    */
    transform: translateX(7px);

    z-index: 5;

    pointer-events: auto;

    opacity: 1;

    transition:
        opacity 300ms ease,
        transform 420ms cubic-bezier(.16, .82, .16, 1);
}

.research-profile-icons--home img {
    width: 18px;
    height: 18px;

    display: block;

    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;

    opacity: 1;
    filter: none;

    transition:
        opacity 320ms ease,
        filter 320ms ease,
        transform 320ms cubic-bezier(.16, .82, .16, 1);
}


/* Research node wakes up */

.node--research:hover .research-profile-icons--home img,
.node--research:focus-visible .research-profile-icons--home img,
.node--research.is-hovered .research-profile-icons--home img {
    opacity: 1;

    filter:
        saturate(1)
        brightness(1.08)
        drop-shadow(0 0 7px rgba(170, 210, 238, 0.18));
}

.node--research:hover .research-profile-icons--home .research-profile-link:nth-child(1) img,
.node--research.is-hovered .research-profile-icons--home .research-profile-link:nth-child(1) img {
    transform: translateY(-2px);
}

.node--research:hover .research-profile-icons--home .research-profile-link:nth-child(2) img,
.node--research.is-hovered .research-profile-icons--home .research-profile-link:nth-child(2) img {
    transform: translateY(-3px);
}

.node--research:hover .research-profile-icons--home .research-profile-link:nth-child(3) img,
.node--research.is-hovered .research-profile-icons--home .research-profile-link:nth-child(3) img {
    transform: translateY(-2px);
}

.node--research:hover .research-profile-icons--home .research-profile-link:nth-child(4) img,
.node--research.is-hovered .research-profile-icons--home .research-profile-link:nth-child(4) img {
    transform: translateY(-3px);
}

/*
   Once any section is entered, remove the OVERVIEW copy of
   the icons entirely. The Research-focus copy remains untouched.
*/

body.is-focus-mode .research-profile-icons--home {
    opacity: 0;
    visibility: hidden;
    transform: translateX(7px) scale(0.82);
    pointer-events: none;
}


/* ---------------- Research focus view ---------------- */

.research-profile-icons--focus {
    gap: 12px;

    margin: 17px auto 0;

    opacity: 0;
    transform: translateY(8px) scale(0.94);

    transition:
        opacity 520ms ease 300ms,
        transform 700ms cubic-bezier(.16, .82, .16, 1) 260ms;
}

.research-profile-icons--focus img {
    width: clamp(28px, 2.15vw, 36px);
    height: clamp(28px, 2.15vw, 36px);

    opacity: 1;
    filter: none;
}

.focus-panel--research.is-active .research-profile-icons--focus {
    opacity: 1;
    transform: translateY(0) scale(1);
}


/*
   Very restrained independent drift.
   Keeps the research origin from becoming completely static.
*/
.focus-panel--research.is-active
.research-profile-icons--focus .research-profile-link:nth-child(1) img {
    animation: research-profile-drift-a 6.8s ease-in-out infinite;
}

.focus-panel--research.is-active
.research-profile-icons--focus .research-profile-link:nth-child(2) img {
    animation: research-profile-drift-b 7.6s ease-in-out infinite;
}

.focus-panel--research.is-active
.research-profile-icons--focus .research-profile-link:nth-child(3) img {
    animation: research-profile-drift-a 7.2s ease-in-out -3.1s infinite;
}

.focus-panel--research.is-active
.research-profile-icons--focus .research-profile-link:nth-child(4) img {
    animation: research-profile-drift-b 8.1s ease-in-out -2.2s infinite;
}

@keyframes research-profile-drift-a {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

@keyframes research-profile-drift-b {
    0%, 100% {
        transform: translateY(-1px);
    }

    50% {
        transform: translateY(2px);
    }
}

/* ------------------------------------------------------------
   REDUCED MOTION — V0.5
------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .world,
    .focus-panel,
    .profile-focus,
    .research-focus__origin,
    .paper-node,
    .capital-focus__copy,
    .capital-focus__motion-field,
    .project-focus__visual,
    .project-focus__copy,
    .archive-focus,
    .focus-back,
    .focus-reticle,
    .observer-widget,
    .observer-panel,
    .observer-message,
    .observer-emblem,
    .observer-emblem__ring,
    .observer-emblem::before {
        transition-duration: 0.01ms !important;
        animation: none !important;
    }

    .paper-node,
    .archive-focus__lines span,
    .research-focus__links path,
    .profile-focus__halo {
        animation: none !important;
    }
}
/* ============================================================
   OBSERVER — TOP RIGHT POSITION OVERRIDE
   ============================================================ */

.observer-widget {
    position: fixed;

    top: 18px;
    right: 18px;

    left: auto;
    bottom: auto;

    z-index: 40;
}


/* ------------------------------------------------------------
   HOVER / PASSIVE TRACE MESSAGE

   Because we're now on the right side of the viewport,
   the message should grow LEFTWARD rather than off-screen.
------------------------------------------------------------ */

.observer-message {
    left: auto;
    right: calc(100% + 12px);

    top: 50%;
    bottom: auto;

    transform: translateY(-50%);
}


/* ------------------------------------------------------------
   EXPANDED TRACE PANEL

   Anchor the panel's RIGHT edge to the widget's RIGHT edge,
   then let it open downward.
------------------------------------------------------------ */

.observer-panel {
    left: auto;
    right: 0;

    top: calc(100% + 14px);
    bottom: auto;

    transform-origin: top right;
}


/* ------------------------------------------------------------
   MOBILE / SMALL SCREEN SAFETY
------------------------------------------------------------ */

@media (max-width: 760px) {

    .observer-widget {
        top: 12px;
        right: 12px;
    }

    /*
       Don't try to put the hover sentence beside the icon
       on a narrow phone screen.
    */
    .observer-message {
        position: fixed;

        top: 82px;
        left: 12px;
        right: 12px;
        bottom: auto;

        transform: none;

        width: auto;
        max-width: none;
    }

    /*
       Expanded panel occupies the available screen width.
    */
    .observer-panel {
        position: fixed;

        top: 82px;
        right: 12px;
        left: 12px;
        bottom: auto;

        width: auto;
        max-width: none;

        transform-origin: top right;
    }
}
/* ============================================================
   OBSERVER — TOP RIGHT INTERNAL DIRECTION FIX
   ============================================================ */

/*
   Anchor the trigger itself by its RIGHT edge.
   Otherwise its max-content width still grows offscreen.
*/
.observer-trigger {
    position: absolute;

    top: 0;
    right: 0;
    left: auto;

    /*
       DOM order is:
       [emblem] [copy]

       row-reverse keeps the emblem at the far right
       and makes the text expand LEFTWARD.
    */
    flex-direction: row-reverse;

    text-align: right;
}


/*
   Since the copy now lives LEFT of the icon,
   its little reveal movement should come from the right.
*/
.observer-trigger__copy {
    transform: translateX(7px);
    text-align: right;
}

.observer-widget:hover .observer-trigger__copy,
.observer-widget:focus-within .observer-trigger__copy,
.observer-widget.is-open .observer-trigger__copy {
    transform: translateX(0);
}


/*
   The hover sentence is now LEFT of the mask,
   so move its tiny connector line to the RIGHT side.
*/
.observer-message::before {
    left: auto;
    right: -6px;

    background: linear-gradient(
        to right,
        var(--trace),
        transparent
    );
}

/* ============================================================
   V0.5.4 — PROJECT DETAIL / README SUBSPACE

   The first Obscura interior remains intact. "Full Description"
   opens a second spatial state: the project panel recedes left and
   a document-sized README surface enters from the right while the
   living field remains visible behind it.
   ============================================================ */

.project-focus__more {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 28px;
    padding: 10px 0 8px;

    border: 0;
    border-bottom: 1px solid rgba(217, 183, 123, .24);
    background: transparent;

    color: rgba(221, 205, 169, .76);
    cursor: pointer;

    font-family: "Courier New", monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;

    transition:
        color 220ms ease,
        border-color 220ms ease,
        transform 320ms cubic-bezier(.18,.82,.18,1),
        text-shadow 220ms ease;
}

.project-focus__more:hover,
.project-focus__more:focus-visible {
    color: rgba(247, 229, 187, .98);
    border-color: rgba(217, 183, 123, .58);
    transform: translateX(4px);
    text-shadow: 0 0 14px rgba(217, 183, 123, .16);
}

.project-focus__more:focus-visible {
    outline: 1px solid rgba(217, 183, 123, .18);
    outline-offset: 7px;
}

.project-focus__more-arrow {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform 320ms cubic-bezier(.18,.82,.18,1);
}

.project-focus__more:hover .project-focus__more-arrow,
.project-focus__more:focus-visible .project-focus__more-arrow {
    transform: translate(5px, -1px);
}

/* The original Obscura interior becomes the departing camera layer. */
body.is-project-detail.focus-obscura .project-focus--obscura {
    opacity: 0;
    transform: translate(-82%, -48%) scale(.92);
    filter: blur(7px);
    pointer-events: none;

    transition:
        opacity 480ms ease,
        transform 900ms cubic-bezier(.16,.82,.16,1),
        filter 620ms ease;
}

body.focus-obscura .project-focus--obscura {
    transition:
        opacity 480ms ease,
        transform 900ms cubic-bezier(.16,.82,.16,1),
        filter 620ms ease;
}

/* Small environmental pan: the field moves with the conceptual camera. */
body.is-project-detail.focus-obscura .deep-field {
    transform: translate3d(-4.5vw, 0, 0) scale(1.035);
    filter: saturate(1.02) brightness(1.05);
}

body.is-project-detail.focus-obscura .ambient-background {
    transform: translate3d(-2vw, 0, 0) scale(1.01);
    transition: transform 1100ms cubic-bezier(.16,.82,.16,1);
}

body.focus-obscura .ambient-background {
    transition: transform 1100ms cubic-bezier(.16,.82,.16,1);
}

/* Documentation surface. It is translucent on purpose so the manifold/grid
   remains part of the page instead of disappearing behind a modal. */
.project-readme {
    position: absolute;
    z-index: 14;

    left: 50%;
    top: clamp(78px, 9vh, 108px);
    bottom: clamp(42px, 5.8vh, 70px);

    width: min(960px, 72vw);

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

    transform: translateX(calc(-50% + 25vw)) scale(.955);
    filter: blur(9px);

    transition:
        opacity 520ms ease 80ms,
        transform 980ms cubic-bezier(.16,.82,.16,1),
        filter 650ms ease 40ms,
        visibility 0s linear 980ms;
}

body.is-project-detail.focus-obscura .project-readme--obscura {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(-50%) scale(1);
    filter: blur(0);

    transition-delay: 120ms, 0ms, 80ms, 0s;
}

.project-readme__surface {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: clamp(34px, 4.4vw, 64px) clamp(32px, 5.2vw, 76px) 72px;

    border: 1px solid rgba(217, 183, 123, .13);
    border-left-color: rgba(217, 183, 123, .34);
    border-radius: 4px 22px 22px 4px;

    background:
        linear-gradient(90deg, rgba(217, 183, 123, .018) 1px, transparent 1px),
        linear-gradient(rgba(217, 183, 123, .013) 1px, transparent 1px),
        linear-gradient(145deg, rgba(7, 9, 12, .79), rgba(4, 6, 8, .68));
    background-size: 44px 44px, 44px 44px, auto;

    box-shadow:
        0 30px 80px rgba(0,0,0,.30),
        inset 1px 0 0 rgba(217,183,123,.04),
        0 0 52px rgba(217,183,123,.025);
}

.project-readme__surface::-webkit-scrollbar {
    width: 8px;
}

.project-readme__surface::-webkit-scrollbar-track {
    background: rgba(217,183,123,.018);
}

.project-readme__surface::-webkit-scrollbar-thumb {
    background: rgba(217,183,123,.18);
    border-radius: 999px;
}

.project-readme__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;

    padding-bottom: 24px;
    margin-bottom: 34px;

    border-bottom: 1px solid rgba(217,183,123,.12);
}

.project-readme__eyebrow,
.project-readme__mode {
    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.project-readme__eyebrow {
    display: block;
    margin-bottom: 11px;
    color: rgba(217,183,123,.68);
}

.project-readme__mode {
    flex: 0 0 auto;
    padding-top: 7px;
    color: rgba(152,163,178,.50);
}

.project-readme__header h2 {
    margin: 0;
    max-width: 680px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.028em;
    color: rgba(244, 242, 236, .96);
}

.project-readme__markdown {
    max-width: 790px;
    margin: 0 auto;
    color: rgba(220, 222, 229, .82);
}

.project-readme__markdown p,
.project-readme__markdown li {
    font-size: clamp(13px, 1.02vw, 15px);
    line-height: 1.82;
}

.project-readme__lead {
    margin: 0 0 34px;
    font-size: clamp(14px, 1.14vw, 17px) !important;
    line-height: 1.82 !important;
    color: rgba(232, 233, 237, .88);
}

.project-readme__markdown section {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1px solid rgba(217,183,123,.08);
}

.project-readme__markdown h3 {
    margin: 0 0 14px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 2.1vw, 32px);
    font-weight: 400;
    color: rgba(240, 238, 231, .93);
}

.project-readme__placeholder {
    margin: 34px 0 14px;
    padding: 24px 26px;

    border: 1px solid rgba(217,183,123,.11);
    border-left: 2px solid rgba(217,183,123,.34);
    background: rgba(217,183,123,.022);
}

.project-readme__placeholder > span {
    display: block;
    margin-bottom: 10px;

    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(217,183,123,.66);
}

.project-readme__placeholder p {
    margin: 0;
    color: rgba(192,198,207,.68);
}

/* The existing return button now serves two levels. JS changes its label
   to "return / obscura" while the README surface is open. */
body.is-project-detail .focus-back {
    color: rgba(229, 219, 194, .78);
}

@media (max-width: 900px) {
    .project-readme {
        width: min(88vw, 820px);
        top: 82px;
        bottom: 28px;
    }

    .project-readme__header {
        display: block;
    }

    .project-readme__mode {
        display: block;
        margin-top: 14px;
    }
}

@media (max-width: 760px) {
    .project-focus__more {
        margin-top: 22px;
    }

    body.is-project-detail.focus-obscura .project-focus--obscura {
        transform: translate(-92%, -48%) scale(.90);
    }

    .project-readme {
        top: 72px;
        bottom: 18px;
        width: calc(100vw - 28px);
        transform: translateX(calc(-50% + 38vw)) scale(.96);
    }

    .project-readme__surface {
        padding: 30px 22px 56px;
        border-radius: 4px 14px 14px 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-focus__more,
    .project-focus__more-arrow,
    .project-focus--obscura,
    .project-readme,
    .ambient-background {
        transition-duration: 0.01ms !important;
    }
}


/* ============================================================
   V0.5.5 — OBSCURA README / GITHUB-DARK DOCUMENT STYLING

   The README content is a faithful HTML rendering of the attached
   README.md. This styling keeps GitHub's information hierarchy while
   allowing the living Obscura field to remain visible behind the page.
   ============================================================ */

.project-readme__header--compact {
    align-items: center;
    min-height: 28px;
    padding-bottom: 16px;
    margin-bottom: 28px;
}

.project-readme__header--compact .project-readme__eyebrow {
    margin: 0;
}

.project-readme__header--compact .project-readme__mode {
    padding: 0;
}

.markdown-body {
    max-width: 820px;
    margin: 0 auto;
    color: #e6edf3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.markdown-body > :first-child {
    margin-top: 0 !important;
}

.markdown-body > :last-child {
    margin-bottom: 0 !important;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
    color: #f0f6fc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 600;
    line-height: 1.25;
}

.markdown-body h1 {
    margin: 0 0 16px;
    padding-bottom: .30em;
    font-size: 2em;
    border-bottom: 1px solid rgba(240,246,252,.10);
}

.markdown-body h2 {
    margin: 30px 0 16px;
    padding-bottom: .30em;
    font-size: 1.5em;
    border-bottom: 1px solid rgba(240,246,252,.10);
}

.markdown-body h3 {
    margin: 24px 0 16px;
    font-size: 1.25em;
}

.markdown-body h4 {
    margin: 24px 0 16px;
    font-size: 1em;
}

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre,
.markdown-body details {
    margin-top: 0;
    margin-bottom: 16px;
}

.markdown-body p,
.markdown-body li {
    font-size: 16px;
    line-height: 1.6;
    color: #e6edf3;
}

.markdown-body strong {
    color: #f0f6fc;
    font-weight: 600;
}

.markdown-body em {
    color: #d8dee4;
}

.markdown-body a {
    color: #58a6ff;
    text-decoration: none;
}

.markdown-body a:hover,
.markdown-body a:focus-visible {
    color: #79c0ff;
    text-decoration: underline;
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 2em;
}

.markdown-body li + li {
    margin-top: .25em;
}

.markdown-body li > p {
    margin-top: 16px;
}

.markdown-body blockquote {
    padding: 0 1em;
    color: #8b949e;
    border-left: .25em solid #30363d;
}

.markdown-body hr {
    height: .25em;
    margin: 24px 0;
    padding: 0;
    border: 0;
    background: rgba(48,54,61,.92);
}

.markdown-body code {
    padding: .2em .4em;
    border-radius: 6px;
    background: rgba(110,118,129,.20);
    color: #e6edf3;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 85%;
}

.markdown-body pre {
    overflow: auto;
    padding: 16px;
    border: 1px solid rgba(240,246,252,.08);
    border-radius: 6px;
    background: rgba(13,17,23,.90);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
}

.markdown-body pre code {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: #e6edf3;
    font-size: 85%;
    line-height: 1.45;
    white-space: pre;
    overflow-wrap: normal;
}

.markdown-body img {
    box-sizing: content-box;
    max-width: 100%;
    height: auto;
    border-style: none;
}

.markdown-body p[align="center"] {
    text-align: center;
}

.markdown-body h1[align="center"],
.markdown-body h2[align="center"] {
    text-align: center;
}

.markdown-body h1[align="center"] + h2[align="center"] {
    margin-top: -8px;
}

/* Keep shields/badges at their natural compact size instead of stretching. */
.markdown-body p[align="center"] img[src*="img.shields.io"] {
    display: inline-block;
    width: auto;
    max-width: none;
    margin: 0 2px;
    vertical-align: middle;
}

/* Screenshot/media rows retain the centered GitHub README presentation. */
.markdown-body p[align="center"] img:not([src*="img.shields.io"]) {
    display: inline-block;
    margin: 8px auto;
    border-radius: 6px;
    box-shadow: 0 14px 40px rgba(0,0,0,.20);
}

.markdown-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow: auto;
    border-spacing: 0;
    border-collapse: collapse;
}

.markdown-body th,
.markdown-body td {
    padding: 6px 13px;
    border: 1px solid #30363d;
}

.markdown-body tr {
    background: rgba(13,17,23,.40);
    border-top: 1px solid #21262d;
}

.markdown-body tr:nth-child(2n) {
    background: rgba(22,27,34,.52);
}

/* Preserve a little breathing room around explicit README <br> tags. */
.markdown-body br {
    line-height: 1.2;
}

/* The long README benefits from a slightly wider spatial document on large screens. */
@media (min-width: 1200px) {
    .project-readme--obscura {
        width: min(1080px, 76vw);
    }
}

@media (max-width: 760px) {
    .markdown-body {
        font-size: 14px;
    }

    .markdown-body p,
    .markdown-body li {
        font-size: 14px;
    }

    .markdown-body h1 {
        font-size: 1.65em;
    }

    .markdown-body h2 {
        font-size: 1.35em;
    }
}

/* ============================================================
   OBSCURA — FULL DESCRIPTION EMPHASIS
   ============================================================ */

.project-focus__more {
    margin-top: 20px;
    margin-bottom: 16px;

    padding: 11px 15px 10px;

    border: 1px solid rgba(217, 183, 123, 0.42);
    background:
        linear-gradient(
            90deg,
            rgba(217, 183, 123, 0.065),
            rgba(217, 183, 123, 0.018)
        );

    color: rgba(246, 229, 190, 0.96);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;

    box-shadow:
        inset 0 0 16px rgba(217, 183, 123, 0.025),
        0 0 0 rgba(217, 183, 123, 0);

    transition:
        color 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease,
        transform 320ms cubic-bezier(.18,.82,.18,1);
}

.project-focus__more:hover,
.project-focus__more:focus-visible {
    color: #fff0c9;

    border-color: rgba(226, 194, 126, 0.82);

    background:
        linear-gradient(
            90deg,
            rgba(217, 183, 123, 0.13),
            rgba(217, 183, 123, 0.035)
        );

    box-shadow:
        inset 0 0 18px rgba(217, 183, 123, 0.045),
        0 0 18px rgba(217, 183, 123, 0.075);

    transform: translateX(4px);
}

/*
   Since the metadata is now beneath the button,
   it no longer needs its original large top margin.
*/
.project-focus__more + .project-focus__meta {
    margin-top: 0;
}

/* ============================================================
   OBSCURA README — GITHUB REPOSITORY LINK
   ============================================================ */

.project-readme__github-area {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 9px;

    text-align: right;
}

.project-readme__github-area .project-readme__mode {
    padding: 0;
    margin: 0;
}


/* Main GitHub control */
.project-readme__github-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;

    color: rgba(230, 237, 243, 0.88);
    text-decoration: none;

    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    opacity: 0.82;

    transition:
        opacity 200ms ease,
        color 200ms ease,
        transform 280ms cubic-bezier(.18,.82,.18,1),
        text-shadow 200ms ease;
}


/* Your new white SVG */
.project-readme__github-link img {
    width: 26px;
    height: 26px;

    display: block;
    object-fit: contain;

    opacity: 0.94;

    transition:
        transform 280ms cubic-bezier(.18,.82,.18,1),
        filter 220ms ease,
        opacity 220ms ease;
}


.project-readme__github-link:hover,
.project-readme__github-link:focus-visible {
    opacity: 1;
    color: #ffffff;

    transform: translateX(-3px);

    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.14);
}


.project-readme__github-link:hover img,
.project-readme__github-link:focus-visible img {
    opacity: 1;

    transform:
        scale(1.08)
        rotate(-3deg);

    filter:
        drop-shadow(0 0 8px rgba(255,255,255,0.16));
}


.project-readme__github-link:focus-visible {
    outline: 1px solid rgba(230,237,243,0.24);
    outline-offset: 6px;
}


/* Mobile: don't cram the two header elements beside one another */
@media (max-width: 760px) {

    .project-readme__header--compact {
        align-items: flex-start;
    }

    .project-readme__github-area {
        align-items: flex-end;
    }

    .project-readme__github-link {
        font-size: 9px;
    }

    .project-readme__github-link img {
        width: 23px;
        height: 23px;
    }
}

/* ============================================================
   NATEBOT — FULL DESCRIPTION + README SUBSPACE
   ============================================================ */

/* Purple / magenta variant of the existing project CTA. */
.project-focus__more--natebot {
    border-color: rgba(177, 108, 255, 0.44);
    background:
        linear-gradient(
            90deg,
            rgba(177, 108, 255, 0.075),
            rgba(177, 108, 255, 0.018)
        );

    color: rgba(232, 211, 255, 0.97);

    box-shadow:
        inset 0 0 16px rgba(177, 108, 255, 0.03),
        0 0 0 rgba(177, 108, 255, 0);
}

.project-focus__more--natebot:hover,
.project-focus__more--natebot:focus-visible {
    color: #f2e8ff;
    border-color: rgba(190, 132, 255, 0.86);

    background:
        linear-gradient(
            90deg,
            rgba(177, 108, 255, 0.145),
            rgba(177, 108, 255, 0.04)
        );

    box-shadow:
        inset 0 0 18px rgba(177, 108, 255, 0.05),
        0 0 20px rgba(177, 108, 255, 0.09);

    text-shadow:
        0 0 14px rgba(177, 108, 255, 0.16);
}

.project-focus__more--natebot:focus-visible {
    outline-color: rgba(177, 108, 255, 0.28);
}


/* NateBot uses the exact same second-camera movement as Obscura. */
body.is-project-detail.focus-natebot .project-focus--natebot {
    opacity: 0;
    transform: translate(-82%, -48%) scale(.92);
    filter: blur(7px);
    pointer-events: none;

    transition:
        opacity 480ms ease,
        transform 900ms cubic-bezier(.16,.82,.16,1),
        filter 620ms ease;
}

body.focus-natebot .project-focus--natebot {
    transition:
        opacity 480ms ease,
        transform 900ms cubic-bezier(.16,.82,.16,1),
        filter 620ms ease;
}


/* Keep the manifold alive while entering the NateBot README. */
body.is-project-detail.focus-natebot .deep-field {
    transform: translate3d(-4.5vw, 0, 0) scale(1.035);
    filter: saturate(1.08) brightness(1.055);
}

body.is-project-detail.focus-natebot .ambient-background {
    transform: translate3d(-2vw, 0, 0) scale(1.01);
    transition: transform 1100ms cubic-bezier(.16,.82,.16,1);
}

body.focus-natebot .ambient-background {
    transition: transform 1100ms cubic-bezier(.16,.82,.16,1);
}


/* Reveal the NateBot document using the same document-camera motion. */
body.is-project-detail.focus-natebot .project-readme--natebot {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(-50%) scale(1);
    filter: blur(0);

    transition-delay: 120ms, 0ms, 80ms, 0s;
}


/* NateBot document accent: same GitHub-dark structure, purple field tint. */
.project-readme--natebot .project-readme__surface {
    border-color: rgba(177, 108, 255, .14);
    border-left-color: rgba(177, 108, 255, .38);

    background:
        linear-gradient(90deg, rgba(177, 108, 255, .018) 1px, transparent 1px),
        linear-gradient(rgba(177, 108, 255, .012) 1px, transparent 1px),
        linear-gradient(145deg, rgba(7, 8, 13, .80), rgba(4, 5, 9, .69));

    background-size: 44px 44px, 44px 44px, auto;

    box-shadow:
        0 30px 80px rgba(0,0,0,.30),
        inset 1px 0 0 rgba(177,108,255,.05),
        0 0 56px rgba(177,108,255,.032);
}

.project-readme--natebot .project-readme__surface::-webkit-scrollbar-track {
    background: rgba(177,108,255,.018);
}

.project-readme--natebot .project-readme__surface::-webkit-scrollbar-thumb {
    background: rgba(177,108,255,.22);
}

.project-readme--natebot .project-readme__header {
    border-bottom-color: rgba(177,108,255,.13);
}

.project-readme--natebot .project-readme__eyebrow {
    color: rgba(197, 151, 255, .76);
}


/* Lightweight math presentation for the README's two display equations. */
.project-readme--natebot .math-inline {
    white-space: nowrap;
}

.project-readme--natebot .markdown-math {
    margin: 18px 0 22px;
    padding: 18px 20px;

    border: 1px solid rgba(177,108,255,.12);
    border-left: 2px solid rgba(177,108,255,.42);
    border-radius: 6px;

    background:
        linear-gradient(
            90deg,
            rgba(177,108,255,.045),
            rgba(177,108,255,.012)
        );

    color: #f0f6fc;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(18px, 1.45vw, 23px);
    line-height: 1.5;
}

.project-readme--natebot .markdown-math--matrix {
    display: flex;
    align-items: center;
    gap: 14px;
}

.project-readme--natebot .math-cases {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;

    padding-left: 14px;
    border-left: 1px solid rgba(230,237,243,.30);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 0.72em;
}


/* Match the wider Obscura README footprint on larger displays. */
@media (min-width: 1200px) {
    .project-readme--natebot {
        width: min(1080px, 76vw);
    }
}

@media (max-width: 760px) {
    body.is-project-detail.focus-natebot .project-focus--natebot {
        transform: translate(-92%, -48%) scale(.90);
    }

    .project-readme--natebot .markdown-math--matrix {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-readme--natebot .math-cases {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-focus--natebot {
        transition-duration: 0.01ms !important;
    }
}

.markdown-equation-image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 22px 0 26px;
}

.markdown-equation-image img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
}

/* ============================================================
   RESEARCH PAPER DOSSIER / EMBEDDED PDF READER
   ============================================================ */

.paper-node {
    cursor: pointer;
}

.paper-node:focus {
    outline: none;
}

.paper-node:focus-visible .paper-node__image-shell {
    transform: translateY(-5px) scale(1.025);
    border-color: rgba(180, 218, 247, .42);
    box-shadow:
        0 18px 45px rgba(0,0,0,.30),
        0 0 0 1px rgba(143, 201, 255, .10),
        0 0 34px rgba(112, 177, 225, .08);
}

.research-paper-detail {
    position: absolute;
    inset: 0;
    z-index: 35;

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

    transition:
        opacity 480ms ease,
        visibility 0s linear 480ms;
}

.research-paper-detail.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.research-paper-detail__layout {
    position: absolute;
    inset:
        clamp(72px, 8.5vh, 96px)
        clamp(42px, 4.4vw, 78px)
        clamp(30px, 4vh, 52px);

    display: grid;
    grid-template-columns: minmax(390px, .96fr) minmax(430px, 1.04fr);
    gap: clamp(28px, 4vw, 68px);
    align-items: stretch;
}

.research-paper-detail__reader-column,
.paper-abstract-panel {
    position: relative;
    min-width: 0;
    min-height: 0;

    opacity: 0;
    filter: blur(5px);

    transition:
        opacity 560ms ease,
        transform 920ms cubic-bezier(.16,.82,.16,1),
        filter 700ms ease;
}

.research-paper-detail__reader-column {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px;

    transform: translate3d(-7vw, 2vh, 0) scale(.94);
}

.paper-abstract-panel {
    overflow-y: auto;
    overscroll-behavior: contain;

    padding:
        clamp(24px, 3.0vw, 42px)
        clamp(24px, 3.1vw, 44px)
        clamp(40px, 5vh, 64px);

    border: 1px solid rgba(161, 193, 222, .13);
    border-radius: 18px 18px 18px 6px;

    background:
        linear-gradient(
            145deg,
            rgba(9, 12, 16, .82),
            rgba(5, 7, 10, .67)
        );

    box-shadow:
        0 26px 80px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255,255,255,.015);

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

    transform: translate3d(7vw, 1vh, 0) scale(.96);

    scrollbar-width: thin;
    scrollbar-color: rgba(143, 201, 255, .28) rgba(255,255,255,.025);
}

.paper-abstract-panel::-webkit-scrollbar {
    width: 8px;
}

.paper-abstract-panel::-webkit-scrollbar-track {
    background: rgba(255,255,255,.025);
}

.paper-abstract-panel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(143, 201, 255, .24);
}

.paper-abstract-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(143, 201, 255, .38);
}

.research-paper-detail.is-active .research-paper-detail__reader-column,
.research-paper-detail.is-active .paper-abstract-panel {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

.research-paper-detail.is-active .research-paper-detail__reader-column {
    transition-delay: 100ms, 70ms, 80ms;
}

.research-paper-detail.is-active .paper-abstract-panel {
    transition-delay: 170ms, 110ms, 120ms;
}

/* Keep the Research world visible as a ghosted spatial layer behind the dossier. */
.focus-panel--research .research-focus {
    transition:
        opacity 560ms ease,
        filter 760ms ease,
        transform 980ms cubic-bezier(.16,.82,.16,1);
}

body.is-paper-detail .focus-panel--research .research-focus {
    opacity: .075;
    filter: blur(1.7px) brightness(.78);
    transform: scale(1.035);
    pointer-events: none;
}

body.is-paper-detail .focus-panel--research .paper-node {
    animation-play-state: paused !important;
}

body.is-paper-detail .focus-back {
    color: rgba(224, 233, 243, .82);
}


/* --- Left: cinematic cover -> native PDF reader --- */

.paper-preview-button {
    position: relative;
    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;
    min-height: 0;

    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;

    cursor: pointer;
    opacity: 1;
    visibility: visible;

    transition:
        opacity 360ms ease,
        transform 520ms cubic-bezier(.16,.82,.16,1),
        visibility 0s linear 0s;
}

.paper-preview-button.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(.965);
    pointer-events: none;
    transition:
        opacity 260ms ease,
        transform 360ms ease,
        visibility 0s linear 280ms;
}

.paper-preview-button__frame {
    position: relative;
    display: block;

    height: min(78vh, 790px);
    max-height: 100%;
    aspect-ratio: .755;

    overflow: hidden;
    border: 1px solid rgba(165, 201, 231, .18);
    background: rgba(9, 12, 16, .74);

    box-shadow:
        0 30px 85px rgba(0,0,0,.50),
        0 0 42px rgba(112, 177, 225, .035);

    transform: perspective(1200px) rotateY(1.25deg) rotateX(.4deg);
    transform-origin: 50% 54%;

    transition:
        transform 620ms cubic-bezier(.16,.82,.16,1),
        border-color 320ms ease,
        filter 320ms ease;
}

.paper-preview-button__frame > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: brightness(.88) saturate(.80) contrast(1.03);
    transition:
        filter 360ms ease,
        transform 760ms cubic-bezier(.16,.82,.16,1);
}

.paper-preview-button__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(4, 6, 9, .00) 0%,
            rgba(4, 6, 9, .02) 58%,
            rgba(4, 6, 9, .72) 100%
        );
}

.paper-preview-button__action {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 3.2vh, 34px);
    transform: translate(-50%, 6px);

    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 11px 14px 10px;

    border: 1px solid rgba(185, 217, 243, .28);
    background: rgba(5, 8, 12, .76);
    color: rgba(239, 246, 252, .92);

    font-family: "Courier New", monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;

    opacity: .82;

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

    transition:
        opacity 260ms ease,
        transform 420ms cubic-bezier(.16,.82,.16,1),
        border-color 260ms ease,
        background 260ms ease;
}

.paper-preview-button:hover .paper-preview-button__frame,
.paper-preview-button:focus-visible .paper-preview-button__frame {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg) translateY(-5px) scale(1.012);
    border-color: rgba(180, 218, 247, .34);
}

.paper-preview-button:hover .paper-preview-button__frame > img,
.paper-preview-button:focus-visible .paper-preview-button__frame > img {
    filter: brightness(.98) saturate(.90) contrast(1.02);
    transform: scale(1.006);
}

.paper-preview-button:hover .paper-preview-button__action,
.paper-preview-button:focus-visible .paper-preview-button__action {
    opacity: 1;
    transform: translate(-50%, 0);
    border-color: rgba(193, 225, 250, .42);
    background: rgba(8, 12, 18, .88);
}

.paper-preview-button:focus-visible {
    outline: none;
}

.paper-reader-frame {
    position: absolute;
    inset: 0 0 34px 0;

    overflow: hidden;
    border: 1px solid rgba(170, 205, 235, .18);
    background: rgba(2, 3, 5, .88);

    box-shadow:
        0 28px 82px rgba(0,0,0,.52),
        0 0 42px rgba(112, 177, 225, .03);

    opacity: 0;
    visibility: hidden;
    transform: scale(.972) translateY(8px);
    pointer-events: none;

    transition:
        opacity 380ms ease,
        transform 620ms cubic-bezier(.16,.82,.16,1),
        visibility 0s linear 400ms;
}

.paper-reader-frame.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    transition-delay: 60ms, 0s, 0s;
}

.paper-pdf-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #111;
}

.paper-reader-note {
    margin: 0;
    text-align: center;

    font-family: "Courier New", monospace;
    font-size: 8px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(145, 162, 181, .52);
}

/* --- Right: SSRN-inspired abstract record --- */

.paper-abstract-panel__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(170, 202, 230, .10);
}

.paper-record-meta {
    display: block;
    margin-top: -4px;

    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .16em;
    color: rgba(139, 174, 204, .52);
}

.paper-ssrn-link {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: rgba(205, 219, 232, .74);
    text-decoration: none;

    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;

    transition:
        color 240ms ease,
        transform 360ms cubic-bezier(.16, .82, .16, 1);
}

.paper-ssrn-link img {
    width: 118px;
    height: auto;

    display: block;
    object-fit: contain;

    border-radius: 0;

    transition:
        transform 420ms cubic-bezier(.16, .82, .16, 1),
        filter 280ms ease;
}

.paper-ssrn-link:hover,
.paper-ssrn-link:focus-visible {
    color: rgba(242, 248, 252, .96);
    transform: translateX(-2px);
}

.paper-ssrn-link:hover img,
.paper-ssrn-link:focus-visible img {
    transform: translateY(-3px) scale(1.04);

    filter:
        brightness(1.08)
        drop-shadow(0 0 14px rgba(92, 173, 228, .14));
}
.paper-ssrn-link:focus-visible {
    outline: none;
}

.paper-detail-title {
    margin: 0;
    max-width: 28ch;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 2.55vw, 48px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.032em;
    color: rgba(244, 247, 250, .96);
}

.paper-detail-subtitle {
    margin: 9px 0 0;
    max-width: 42ch;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(17px, 1.18vw, 22px);
    line-height: 1.28;
    font-style: italic;
    color: rgba(218, 228, 238, .80);
}

.paper-metadata-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;

    margin: 26px 0 30px;
    border: 1px solid rgba(165, 197, 225, .09);
    background: rgba(165, 197, 225, .07);
}

.paper-metadata-block {
    min-height: 72px;
    padding: 14px 15px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;

    background: rgba(7, 10, 14, .86);

    font-size: 12px;
    line-height: 1.45;
    color: rgba(225, 232, 239, .86);
}

.paper-metadata-block--wide {
    grid-column: 1 / -1;
}

.paper-metadata-block strong {
    font-weight: 600;
    color: rgba(242, 246, 250, .94);
}

.paper-metadata-label {
    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(125, 166, 201, .68);
}

.paper-affiliation {
    color: rgba(161, 174, 188, .70);
    font-size: 10.5px;
}

.paper-record-section {
    padding: 0 0 25px;
    margin: 0 0 25px;

    border-bottom: 1px solid rgba(163, 195, 223, .08);
}

.paper-record-section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.paper-record-section h3 {
    margin: 0 0 10px;

    font-family: "Courier New", monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(168, 202, 229, .78);
}

.paper-record-section p,
.paper-abstract-copy p,
.paper-abstract-quote,
.paper-citation-box {
    font-size: 12.5px;
    line-height: 1.72;
    letter-spacing: .002em;
    color: rgba(224, 231, 238, .84);
}

.paper-record-section p {
    margin: 0;
}

.paper-abstract-copy p {
    margin: 0 0 16px;
}

.paper-abstract-copy p:last-child {
    margin-bottom: 0;
}

.paper-abstract-quote {
    margin: 0 0 19px;
    padding: 14px 17px;

    border-left: 2px solid rgba(143, 201, 255, .32);
    background: rgba(143, 201, 255, .035);

    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    color: rgba(226, 234, 242, .80);
}

.paper-citation-box {
    padding: 14px 16px;

    border: 1px solid rgba(206, 218, 230, .38);
    background: rgba(3, 5, 8, .42);

    color: rgba(232, 238, 244, .88);
    overflow-wrap: anywhere;
}

.paper-repository-link,
.paper-license-entry a {
    color: rgba(151, 205, 247, .86);
    text-decoration: none;
    overflow-wrap: anywhere;

    transition: color 220ms ease, text-shadow 220ms ease;
}

.paper-repository-link {
    font-family: "Courier New", monospace;
    font-size: 11px;
}

.paper-repository-link:hover,
.paper-repository-link:focus-visible,
.paper-license-entry a:hover,
.paper-license-entry a:focus-visible {
    color: rgba(217, 239, 255, .98);
    text-shadow: 0 0 14px rgba(112, 190, 244, .12);
}

.paper-license-entry + .paper-license-entry {
    margin-top: 20px;
}

.paper-license-label {
    display: inline-block;
    margin-bottom: 7px;

    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(157, 190, 218, .70);
}

.paper-license-mit {
    font-family: "Courier New", monospace;
    font-size: 10px !important;
    line-height: 1.62 !important;
    color: rgba(186, 198, 210, .72) !important;
}


/* Tablet / narrower desktop */
@media (max-width: 1180px) {
    .research-paper-detail__layout {
        grid-template-columns: minmax(330px, .88fr) minmax(390px, 1.12fr);
        gap: 30px;
        left: 34px;
        right: 34px;
    }

    .paper-preview-button__frame {
        height: min(72vh, 680px);
    }
}


/* Mobile / narrow viewport: dossier becomes a scrollable single column. */
@media (max-width: 820px) {
    .research-paper-detail {
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-bottom: 28px;
    }

    .research-paper-detail__layout {
        position: relative;
        inset: auto;

        width: calc(100% - 28px);
        margin: 82px auto 24px;

        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .research-paper-detail__reader-column {
        min-height: min(72vh, 620px);
    }

    .paper-preview-button__frame {
        height: min(64vh, 610px);
        max-width: 92vw;
    }

    .paper-reader-frame {
        inset: 0 0 34px 0;
    }

    .paper-abstract-panel {
        overflow: visible;
        padding: 24px 20px 36px;
    }

    .paper-abstract-panel__header {
        gap: 14px;
    }

    .paper-detail-title {
        font-size: clamp(29px, 9vw, 42px);
    }

    .paper-metadata-grid {
        grid-template-columns: 1fr;
    }

    .paper-metadata-block--wide {
        grid-column: auto;
    }

    .paper-record-section p,
    .paper-abstract-copy p,
    .paper-abstract-quote,
    .paper-citation-box {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .research-paper-detail__reader-column,
    .paper-abstract-panel,
    .paper-preview-button,
    .paper-preview-button__frame,
    .paper-reader-frame,
    .paper-ssrn-link,
    .paper-ssrn-link img {
        transition-duration: 1ms !important;
        animation: none !important;
    }
}

/* Slightly enlarge NateBot logo on the homepage only */
body:not(.is-focus-mode) .node--natebot .project-symbol {
    width: 76px;
    height: 76px;
    margin-bottom: 9px;
}
/* ============================================================
   OPSEC NODE — LEFT-SIDE PASSIVE TRACE
   ============================================================ */

/*
   The Vendetta mask is now a true homepage node.
   No static title or number is shown on the overview.
*/
.observer-widget.node--opsec {
    --trace: #ff4654;
    --trace-bright: #ff9ca4;
    --trace-dim: rgba(255, 70, 84, .62);
    --trace-faint: rgba(255, 70, 84, .18);
    --trace-panel: rgba(17, 3, 6, .94);

    position: absolute;

    left: 3.2%;
    top: 61.5%;
    right: auto;
    bottom: auto;

    width: 66px;
    min-height: 66px;

    z-index: 18;

    color: var(--trace);

    opacity: 1;
    filter: none;
    transform: none;
}

/* Just the mask on the static homepage. */
.observer-widget.node--opsec .observer-trigger {
    position: relative;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    flex-direction: row;

    width: 58px;
    min-height: 58px;

    text-align: left;
}

.observer-widget.node--opsec .observer-trigger__copy {
    display: none !important;
}

.observer-widget.node--opsec .observer-emblem {
    border-color: rgba(255, 70, 84, .19);

    background:
        radial-gradient(circle at 50% 48%, rgba(181, 31, 45, .095), transparent 65%),
        rgba(10, 4, 6, .30);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.015),
        0 0 24px rgba(181, 31, 45, .055);
}

.observer-widget.node--opsec .observer-emblem::before {
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255,70,84,.03) 46%,
            rgba(255,70,84,.21) 50%,
            rgba(255,70,84,.03) 54%,
            transparent 100%
        );
}

.observer-widget.node--opsec .observer-emblem__ring {
    border-color: rgba(255,70,84,.18);
}

.observer-widget.node--opsec:hover .observer-emblem,
.observer-widget.node--opsec:focus-within .observer-emblem,
.observer-widget.node--opsec.is-open .observer-emblem {
    border-color: rgba(255,70,84,.54);

    box-shadow:
        inset 0 0 0 1px rgba(255,70,84,.055),
        0 0 30px rgba(181,31,45,.17);

    transform: translateY(-1px) scale(1.045);
}

.observer-widget.node--opsec:hover .observer-emblem img,
.observer-widget.node--opsec:focus-within .observer-emblem img,
.observer-widget.node--opsec.is-open .observer-emblem img {
    opacity: 1;

    filter:
        saturate(1)
        contrast(1.10)
        brightness(1.08)
        drop-shadow(0 0 11px rgba(255,70,84,.12));

    transform: scale(1.04);
}

.observer-widget.node--opsec .observer-trigger:focus-visible .observer-emblem {
    box-shadow:
        0 0 0 1px rgba(255,70,84,.66),
        0 0 28px rgba(181,31,45,.20);
}


/* ---------------- HOVER READOUT ---------------- */

.observer-widget.node--opsec .observer-message {
    left: 68px;
    right: auto;

    top: 50%;
    bottom: auto;

    width: min(540px, calc(100vw - 180px));

    border-color: rgba(255,70,84,.23);

    background:
        linear-gradient(
            95deg,
            rgba(20,4,7,.96),
            rgba(8,3,5,.84)
        );

    box-shadow:
        0 12px 34px rgba(0,0,0,.31),
        0 0 34px rgba(181,31,45,.045);

    color: var(--trace-bright);

    transform:
        translate(8px, -50%)
        scale(.985);
}

.observer-widget.node--opsec .observer-message::before {
    left: -6px;
    right: auto;

    background:
        linear-gradient(
            to left,
            var(--trace),
            transparent
        );
}

.observer-widget.node--opsec .observer-message__label {
    color: rgba(255,92,103,.64);
}

.observer-widget.node--opsec:hover:not(.is-open) .observer-message,
.observer-widget.node--opsec:focus-within:not(.is-open) .observer-message {
    transform:
        translate(0, -50%)
        scale(1);
}


/* ---------------- EXPANDED OPSEC PANEL ---------------- */

.observer-widget.node--opsec .observer-panel {
    left: 72px;
    right: auto;

    top: 50%;
    bottom: auto;

    width: min(520px, calc(100vw - 170px));

    /* taller, but still constrained to the viewport */
    max-height: min(925px, 96vh);

    border-color: rgba(255,70,84,.27);
    border-radius: 8px 20px 20px 8px;

    background:
        linear-gradient(rgba(255,70,84,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,70,84,.014) 1px, transparent 1px),
        linear-gradient(145deg, rgba(18,4,7,.975), rgba(7,3,5,.945));

    background-size:
        100% 24px,
        24px 100%,
        auto;

    box-shadow:
        0 26px 64px rgba(0,0,0,.48),
        0 0 52px rgba(181,31,45,.07),
        inset 0 0 58px rgba(181,31,45,.025);

    /*
       Pull the panel farther upward because the OPSEC node
       itself sits below the vertical center of the screen.
    */
    transform:
        translate(-8px, -62%)
        scale(.975);

    transform-origin: left center;
}

.observer-widget.node--opsec.is-open .observer-panel {
    transform:
        translate(0, -65%)
        scale(1);
}

.observer-widget.node--opsec .observer-panel::-webkit-scrollbar-track {
    background: rgba(255,70,84,.025);
}

.observer-widget.node--opsec .observer-panel::-webkit-scrollbar-thumb {
    background: rgba(255,70,84,.24);
}

.observer-widget.node--opsec .observer-panel__header {
    border-bottom-color: rgba(255,70,84,.16);
}

.observer-widget.node--opsec .observer-panel__eyebrow {
    color: rgba(255,92,103,.62);
}

.observer-widget.node--opsec .observer-panel h2 {
    color: var(--trace-bright);
    text-shadow: 0 0 18px rgba(181,31,45,.16);
}

.observer-widget.node--opsec .observer-theta {
    color: rgba(255,111,121,.72);
}

.observer-widget.node--opsec .observer-close {
    border-color: rgba(255,70,84,.18);
    background: rgba(255,70,84,.025);
    color: rgba(255,156,164,.76);
}

.observer-widget.node--opsec .observer-close:hover,
.observer-widget.node--opsec .observer-close:focus-visible {
    color: var(--trace-bright);
    border-color: rgba(255,70,84,.48);
    background: rgba(255,70,84,.075);
    box-shadow: 0 0 18px rgba(181,31,45,.10);
}

.observer-widget.node--opsec .observer-panel__sentence {
    color: var(--trace-bright);
}

.observer-widget.node--opsec .observer-metrics {
    border-top-color: rgba(255,70,84,.11);
}

.observer-widget.node--opsec .observer-metric {
    border-bottom-color: rgba(255,70,84,.085);
}

.observer-widget.node--opsec .observer-metric dt {
    color: rgba(255,92,103,.56);
}

.observer-widget.node--opsec .observer-metric dd {
    color: rgba(255,175,181,.88);
}

.observer-widget.node--opsec .observer-metric--strong dd {
    color: var(--trace-bright);
    text-shadow: 0 0 10px rgba(181,31,45,.10);
}

.observer-widget.node--opsec .observer-panel__footer {
    border-top-color: rgba(255,70,84,.13);
}

.observer-widget.node--opsec .observer-panel__footer span {
    color: rgba(255,92,103,.49);
}

.observer-widget.node--opsec .observer-panel__footer span::before {
    background: var(--trace);
}

.observer-widget.node--opsec[data-state="error"] .observer-trigger__status {
    color: #ffb1b7;
}


/* ---------------- OPSEC RANT EXCERPT ---------------- */

.observer-opsec-rant {
    margin: 0 0 17px;
    padding: 14px 14px 13px;

    border: 1px solid rgba(255,70,84,.15);
    border-left-color: rgba(255,70,84,.38);
    border-radius: 4px 13px 13px 4px;

    background:
        linear-gradient(
            115deg,
            rgba(181,31,45,.075),
            rgba(181,31,45,.018) 56%,
            transparent
        );
}

.observer-opsec-rant__kicker {
    display: block;

    margin-bottom: 9px;

    font-size: 9px;
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: .12em;
    text-transform: uppercase;

    color: #ff7c86;
}

.observer-opsec-rant p {
    margin: 0;

    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.58;
    letter-spacing: .006em;

    color: rgba(255,202,206,.74);
}

.observer-opsec-rant p + p {
    margin-top: 9px;
}

.observer-opsec-rant strong {
    color: rgba(255,224,226,.94);
}

.observer-opsec-rant__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 13px;

    margin-top: 12px;
}

.observer-opsec-rant__link {
    padding: 0;

    border: 0;
    border-bottom: 1px solid rgba(255,70,84,.22);

    background: transparent;

    color: rgba(255,145,153,.74);

    cursor: pointer;

    font-family: "Courier New", ui-monospace, monospace;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .09em;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 200ms ease,
        border-color 200ms ease,
        transform 260ms ease;
}

.observer-opsec-rant__link:hover,
.observer-opsec-rant__link:focus-visible {
    color: #ffd1d5;
    border-color: rgba(255,70,84,.60);
    transform: translateX(2px);
    outline: none;
}

.observer-opsec-rant__link--primary {
    color: #ff8e97;
}

/* During another node's camera focus, OPSEC follows the site's existing disappearance behavior. */
body.is-focus-mode .observer-widget.node--opsec {
    opacity: 0;
    pointer-events: none;
}


/* ---------------- SMALL SCREEN SAFETY ---------------- */

@media (max-width: 760px) {
    .observer-widget.node--opsec {
        left: 14px;
        top: 63%;
        right: auto;
        bottom: auto;
    }

    .observer-widget.node--opsec .observer-message {
        position: fixed;

        left: 12px;
        right: 12px;
        top: 74px;

        width: auto;

        transform: none;
    }

    .observer-widget.node--opsec:hover:not(.is-open) .observer-message,
    .observer-widget.node--opsec:focus-within:not(.is-open) .observer-message {
        transform: none;
    }

    .observer-widget.node--opsec .observer-panel,
    .observer-widget.node--opsec.is-open .observer-panel {
        position: fixed;

        left: 12px;
        right: 12px;
        top: 76px;
        bottom: auto;

        width: auto;
        max-height: calc(100vh - 92px);

        transform: none;
        transform-origin: top left;
    }
}

.observer-widget.node--opsec[data-state="loading"] .observer-emblem {
    animation: observer-loading-glow-opsec 1.35s ease-in-out infinite alternate;
}

@keyframes observer-loading-glow-opsec {
    from { box-shadow: 0 0 12px rgba(181,31,45,.045); }
    to   { box-shadow: 0 0 34px rgba(255,70,84,.19); }
}



/* ============================================================
   COULTER CAPITAL — LONG-FORM STORY / CLICKABLE MOTION
   ============================================================ */

.focus-panel--capital {
    overflow: hidden;
}

.capital-focus-page {
    position: absolute;
    inset: 0;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(255, 94, 54, .28)
        rgba(10, 8, 7, .03);
}

.capital-focus-page::-webkit-scrollbar {
    width: 8px;
}

.capital-focus-page::-webkit-scrollbar-track {
    background: rgba(10, 8, 7, .03);
}

.capital-focus-page::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 94, 54, .24);
}


/* ---------------- Hero ---------------- */

.focus-panel--capital .capital-focus {
    position: relative;

    left: auto;
    top: auto;

    width: min(1180px, 88vw);
    height: auto;
    min-height: min(700px, 88vh);

    margin: 0 auto;

    padding:
        clamp(100px, 13vh, 142px)
        0
        clamp(42px, 7vh, 72px);

    transform: none;

    display: grid;
    grid-template-columns:
        minmax(280px, .78fr)
        minmax(430px, 1.35fr);

    gap: clamp(34px, 5.5vw, 88px);
    align-items: center;
}

.capital-focus__motion-link {
    display: block;

    min-width: 0;

    color: inherit;
    text-decoration: none;

    border-radius: 28px;

    outline: none;
}

.capital-focus__motion-link:focus-visible {
    box-shadow:
        0 0 0 1px rgba(255, 112, 74, .32),
        0 0 30px rgba(255, 88, 51, .08);
}

.capital-focus__motion-link .capital-focus__motion-field {
    transition:
        opacity 700ms ease 120ms,
        transform 980ms cubic-bezier(.16,.82,.16,1) 90ms,
        filter 720ms ease 90ms,
        box-shadow 360ms ease;
}

.capital-focus__motion-link:hover .capital-focus__motion-field,
.capital-focus__motion-link:focus-visible .capital-focus__motion-field {
    box-shadow:
        inset 0 0 0 1px rgba(255, 102, 65, .06),
        0 0 52px rgba(255, 88, 51, .045);
}

.capital-focus__visit {
    position: absolute;
    z-index: 4;

    left: 7%;
    top: 8%;

    padding: 7px 10px;

    border: 1px solid rgba(255, 115, 76, .14);
    border-radius: 999px;

    background: rgba(12, 8, 7, .46);

    font-family: "Courier New", monospace;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;

    color: rgba(231, 172, 153, .62);

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

    transition:
        color 240ms ease,
        border-color 240ms ease,
        transform 320ms cubic-bezier(.16,.82,.16,1);
}

.capital-focus__motion-link:hover .capital-focus__visit,
.capital-focus__motion-link:focus-visible .capital-focus__visit {
    color: rgba(255, 214, 200, .92);
    border-color: rgba(255, 115, 76, .30);
    transform: translateY(-2px);
}

/* Visit button relocated beneath Coulter Capital intro copy */
.capital-focus__visit--copy {
    position: relative;

    left: auto;
    top: auto;

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

    width: fit-content;

    margin-top: 18px;

    text-decoration: none;

    transform: none;
}

.capital-focus__visit--copy:hover,
.capital-focus__visit--copy:focus-visible {
    transform: translateY(-2px);
}

/* ---------------- Story container ---------------- */

.capital-story {
    position: relative;

    width: min(1040px, 86vw);

    margin:
        0
        auto
        clamp(90px, 13vh, 150px);

    padding:
        clamp(32px, 4vw, 50px)
        clamp(26px, 4.4vw, 56px)
        clamp(40px, 5vw, 64px);

    border: 1px solid rgba(255, 105, 67, .13);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(21, 12, 10, .74),
            rgba(7, 7, 8, .58) 46%,
            rgba(11, 8, 7, .66)
        );

    box-shadow:
        0 28px 76px rgba(0, 0, 0, .26),
        inset 0 0 58px rgba(255, 88, 51, .018);

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.capital-story::before {
    content: "";

    position: absolute;

    left: 5%;
    right: 5%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 91, 51, .32),
            rgba(255, 158, 125, .14),
            transparent
        );
}


/* clickable corner logo */
.capital-story__logo-link {
    position: absolute;
    z-index: 5;

    top: 22px;
    right: 24px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 110, 72, .12);
    border-radius: 10px;

    background: rgba(8, 7, 7, .44);

    text-decoration: none;

    opacity: .72;

    transition:
        opacity 240ms ease,
        transform 340ms cubic-bezier(.16,.82,.16,1),
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.capital-story__logo-link img {
    display: block;

    width: 29px;
    height: 29px;

    object-fit: contain;
}

.capital-story__logo-link:hover,
.capital-story__logo-link:focus-visible {
    opacity: 1;

    transform: translateY(-3px) scale(1.04);

    border-color: rgba(255, 110, 72, .28);

    box-shadow:
        0 8px 24px rgba(0,0,0,.22),
        0 0 22px rgba(255,88,51,.06);

    outline: none;
}


/* ---------------- Story header ---------------- */

.capital-story__header {
    max-width: 760px;

    margin-bottom: 28px;
    padding-right: 64px;
}

.capital-story__eyebrow {
    display: block;

    margin-bottom: 10px;

    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .17em;
    text-transform: uppercase;

    color: rgba(214, 134, 111, .57);
}

.capital-story__header h3 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(31px, 3.2vw, 48px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.028em;

    color: rgba(245, 236, 232, .95);
}
/* ---------------- Opening / childhood image ---------------- */

.capital-story__opening {
    display: grid;

    /*
       Opening text stays on the left.
       Childhood photo gets the larger right-hand column.
    */
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 320px);

    gap: clamp(34px, 4vw, 52px);

    align-items: start;

    margin-bottom: 28px;
    padding-bottom: 32px;

    border-bottom: 1px solid rgba(255, 105, 67, .09);
}


/* Opening prose */
.capital-story__opening-copy {
    grid-column: 1;
    grid-row: 1;

    min-width: 0;
}


/* Childhood photo */
.capital-story__childhood {
    position: relative;

    grid-column: 2;
    grid-row: 1;

    align-self: start;

    width: 100%;

    margin: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 139, 105, .12);
    border-radius: 16px;

    background: rgba(7, 7, 8, .58);

    box-shadow:
        0 22px 52px rgba(0, 0, 0, .30),
        0 0 30px rgba(255, 88, 51, .025);
}

.capital-story__childhood img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* 2008 label */
.capital-story__childhood figcaption {
    position: absolute;

    left: 9px;
    bottom: 9px;

    padding: 4px 7px;

    border: 1px solid rgba(255, 153, 121, .14);
    border-radius: 999px;

    background: rgba(8, 7, 8, .70);

    font-family: "Courier New", monospace;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .14em;

    color: rgba(236, 187, 170, .72);
}


/* Opening + long-form typography */
.capital-story__opening-copy p,
.capital-story__body p {
    margin: 0;

    font-size: clamp(12px, .92vw, 13.25px);
    line-height: 1.78;

    color: rgba(223, 216, 213, .75);
}

.capital-story__opening-copy p + p,
.capital-story__body p + p {
    margin-top: 17px;
}


/* Opening question */
.capital-story__question {
    font-weight: 800;

    color: rgba(255, 239, 233, .98);

    text-shadow:
        0 0 18px rgba(255, 102, 65, .05);
}


/* ---------------- Long form ---------------- */

.capital-story__body {
    max-width: 91ch;
}

.capital-story__body p:nth-child(4n + 1) {
    padding-top: 18px;

    border-top: 1px solid rgba(255, 105, 67, .065);
}

.capital-story__signature {
    margin-top: 30px !important;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px !important;
    font-style: italic;

    color: rgba(243, 226, 219, .88) !important;
}


/* ---------------- Responsive ---------------- */

@media (max-width: 920px) {

    .focus-panel--capital .capital-focus {
        width: min(760px, 88vw);

        grid-template-columns: 1fr;
        gap: 10px;

        min-height: 0;

        padding-top: 110px;
    }

    .capital-focus__copy {
        width: min(640px, 100%);
    }

    .capital-focus__motion-link {
        width: 100%;
    }

    .capital-focus__motion-field {
        width: 100%;
        height: min(430px, 52vh);

        margin-top: 8px;
    }

    .capital-story {
        width: min(760px, 88vw);
    }

    /*
       Slightly reduce the right-side image column on tablets,
       while preserving the same left-text / right-image layout.
    */
    .capital-story__opening {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(220px, 280px);

        gap: 28px;
    }
}


@media (max-width: 620px) {

    .focus-panel--capital .capital-focus {
        top: auto;

        width: 88vw;
        max-height: none;

        display: block;

        overflow: visible;

        padding:
            96px
            0
            34px;
    }

    .capital-focus__copy {
        width: 100%;
        margin: 0;
    }

    .capital-focus__motion-field {
        height: 38vh;
    }

    .capital-story {
        width: 88vw;

        padding:
            26px
            18px
            34px;

        border-radius: 16px;
    }

    .capital-story__logo-link {
        top: 17px;
        right: 17px;

        width: 38px;
        height: 38px;
    }

    .capital-story__header {
        padding-right: 54px;
    }


    /*
       Mobile:
       text first,
       childhood photo underneath.
    */
    .capital-story__opening {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .capital-story__opening-copy {
        grid-column: 1;
        grid-row: 1;
    }

    .capital-story__childhood {
        grid-column: 1;
        grid-row: 2;

        width: min(280px, 72vw);

        justify-self: center;
    }
}

/* ============================================================
   COULTER CAPITAL HISTORY — STRUCTURED LONG-FORM ADDITIONS
   Append after the existing Coulter Capital story CSS.
   Existing hero, orange scrollbar, story container, childhood image,
   typography, and corner logo rules remain unchanged.
   ============================================================ */


/* ---------------- Narrative sections ---------------- */

.capital-story__subsection {
    margin-top: 30px;
}

.capital-story__subsection:first-child {
    margin-top: 0;
}

.capital-story__section-title {
    margin: 0 0 18px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 2.2vw, 31px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -.018em;

    color: rgba(244, 235, 231, .93);
}

.capital-story__section-title em {
    display: inline;

    margin-left: 5px;

    font-family: inherit;
    font-size: .70em;
    font-weight: 400;
    line-height: inherit;

    color: rgba(220, 187, 177, .66);
}


/* ---------------- Career / earnings image ---------------- */

.capital-story__setup-line {
    margin-bottom: 16px !important;

    color: rgba(232, 220, 215, .82) !important;
}

.capital-story__earnings-figure {
    /*
       Intentionally smaller than the surrounding prose width.
       Auto margins center the complete figure.
    */
    width: min(510px, 72%);

    margin:
        20px
        auto
        28px;

    overflow: hidden;

    border: 1px solid rgba(255, 112, 73, .13);
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(24, 14, 11, .66),
            rgba(8, 7, 7, .54)
        );

    box-shadow:
        0 16px 40px rgba(0, 0, 0, .18),
        inset 0 0 28px rgba(255, 88, 51, .016);
}

.capital-story__earnings-figure img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    object-fit: contain;

    /*
       Keeps the white spreadsheet from becoming
       the brightest object on the page.
    */
    opacity: .82;

    background: rgba(243, 241, 237, .96);
}

.capital-story__earnings-figure figcaption {
    padding:
        10px
        14px
        11px;

    border-top: 1px solid rgba(255, 112, 73, .09);

    font-family: "Courier New", monospace;
    font-size: 8.75px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: .045em;

    text-align: center;

    color: rgba(231, 193, 181, .80);
}


/* ---------------- Key takeaway ---------------- */

.capital-story__callout {
    position: relative;

    margin: 22px 0;

    padding: 17px 18px 18px;

    border: 1px solid rgba(255, 108, 70, .10);
    border-left: 2px solid rgba(255, 92, 51, .47);
    border-radius: 0 12px 12px 0;

    background:
        linear-gradient(
            90deg,
            rgba(255, 88, 51, .055),
            rgba(255, 88, 51, .012) 58%,
            transparent
        );
}

.capital-story__callout-label {
    display: block;

    margin-bottom: 7px;

    font-family: "Courier New", monospace;
    font-size: 7.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .16em;
    text-transform: uppercase;

    color: rgba(225, 133, 105, .68);
}

.capital-story__callout p {
    margin: 0 !important;
}


/* ---------------- Answers ---------------- */

.capital-story__answer {
    position: relative;

    margin: 23px 0 17px;

    padding: 19px 22px 20px;

    border: 1px solid rgba(255, 111, 72, .12);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(27, 15, 12, .70),
            rgba(8, 7, 7, .50)
        );

    box-shadow:
        inset 0 0 34px rgba(255, 88, 51, .016);
}

.capital-story__answer::before {
    content: "“";

    position: absolute;

    right: 16px;
    top: 4px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 55px;
    line-height: 1;

    color: rgba(255, 102, 64, .10);
}

.capital-story__answer-label {
    display: block;

    margin-bottom: 8px;

    font-family: "Courier New", monospace;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;

    color: rgba(225, 133, 105, .64);
}

.capital-story__answer p {
    position: relative;
    z-index: 2;

    margin: 0 !important;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(16px, 1.42vw, 20px) !important;
    line-height: 1.48 !important;
    letter-spacing: -.008em;

    color: rgba(242, 231, 226, .90) !important;
}

.capital-story__takeaway {
    margin-top: 13px !important;

    color: rgba(222, 213, 209, .72) !important;
}

.capital-story__takeaway > span {
    margin-right: 5px;

    font-family: "Courier New", monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;

    color: rgba(216, 131, 105, .63);
}


/* ---------------- Preface ---------------- */

.capital-story__preface {
    margin: 23px 0 20px;

    padding: 0 0 0 17px;

    border-left: 1px solid rgba(255, 100, 61, .30);
}

.capital-story__preface p {
    margin: 0 !important;

    color: rgba(235, 222, 217, .82) !important;
}


/* ---------------- Orange narrative dividers ---------------- */

.capital-story__divider {
    width: 100%;
    height: 1px;

    margin: 34px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 92, 51, .10) 7%,
            rgba(255, 92, 51, .33) 48%,
            rgba(255, 145, 111, .10) 88%,
            transparent
        );
}

.capital-story__divider--major {
    margin: 43px 0 39px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 92, 51, .16) 5%,
            rgba(255, 92, 51, .48) 50%,
            rgba(255, 145, 111, .14) 90%,
            transparent
        );
}


/* ---------------- Flashback / actual history ---------------- */

.capital-story__history-head {
    margin-bottom: 27px;
}

.capital-story__history-eyebrow {
    display: block;

    margin-bottom: 8px;

    font-family: "Courier New", monospace;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.5;
    text-transform: uppercase;

    color: rgba(220, 132, 105, .65);
}

.capital-story__history-head h4 {
    margin: 0 0 13px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 3vw, 45px);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -.027em;

    color: rgba(245, 235, 231, .95);
}

.capital-story__history-note {
    max-width: 78ch;

    margin: 0 !important;

    padding: 13px 0 0;

    border-top: 1px solid rgba(255, 103, 64, .075);

    font-size: clamp(11.5px, .86vw, 12.5px) !important;
    line-height: 1.68 !important;

    color: rgba(213, 198, 192, .64) !important;
}

.capital-story__history > p + p {
    margin-top: 17px;
}


/*
   The older nth-child divider treatment was useful when every child
   in the body was only a paragraph. This replacement is structured,
   so keep the deliberate divider elements above instead.
*/
.capital-story__body p:nth-child(4n + 1) {
    padding-top: 0;
    border-top: none;
}


/* ---------------- Final question ---------------- */

.capital-story__final-question {
    margin: 36px 0 0;

    padding: 21px 23px;

    border: 1px solid rgba(255, 111, 72, .13);
    border-radius: 14px;

    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(255, 88, 51, .075),
            transparent 56%
        ),
        rgba(11, 8, 8, .40);
}

.capital-story__final-question > span {
    display: block;

    margin-bottom: 8px;

    font-family: "Courier New", monospace;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;

    color: rgba(225, 133, 105, .67);
}

.capital-story__final-question p {
    margin: 0 !important;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(20px, 2vw, 29px) !important;
    line-height: 1.2 !important;

    color: rgba(245, 235, 231, .93) !important;
}


/* ---------------- Responsive additions ---------------- */

@media (max-width: 620px) {

    .capital-story__section-title {
        font-size: 24px;
    }

    .capital-story__section-title em {
        display: block;

        margin: 4px 0 0;
    }

    .capital-story__earnings-figure {
        width: 100%;

        margin:
            16px
            auto
            24px;
    }

    .capital-story__earnings-figure figcaption {
        font-size: 8.25px;
    }

    .capital-story__answer {
        padding: 17px 17px 18px;
    }

    .capital-story__answer p {
        font-size: 16px !important;
    }

    .capital-story__divider,
    .capital-story__divider--major {
        margin: 28px 0;
    }

    .capital-story__history-head h4 {
        font-size: 31px;
    }
}