:root {
    --night: #05080a;
    --paper: #f0f1ea;
    --acid: #bdfcff;
    --blue: #22a8ff;
    --muted: rgba(240, 241, 234, .57);
    --line: rgba(255, 255, 255, .17)
}

html {
    background: var(--night)
}

body[data-scene="network"] {
    background: var(--night);
    color: var(--paper);
    overflow-x: hidden
}

body[data-scene="network"] header.experience-nav {
    position: fixed;
    z-index: 40;
    height: 76px;
    padding: 0 3.2vw;
    background: linear-gradient(180deg, rgba(5, 8, 10, .8), transparent);
    border: 0;
    color: var(--paper);
    backdrop-filter: none
}

.experience-nav .brand img {
    height: 23px;
    filter: brightness(0) invert(1)
}

.experience-nav-center {
    position: absolute;
    left: 50%;
    top: 28px;
    transform: translateX(-50%);
    display: flex;
    gap: 2.4rem;
    font-size: .61rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5)
}

.experience-nav-center span+span:before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #69f7ff;
    box-shadow: 0 0 10px #69f7ff;
    margin: 0 1rem 2px 0
}

.experience-nav-link {
    font-size: .68rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding: .45rem 0
}

.experience-nav-link span {
    color: var(--acid);
    margin-left: .4rem
}

.experience-shell {
    position: relative;
    background: var(--night)
}

.experience-canvas-wrap {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 52% 45%, #11232c 0, #05080a 70%)
}

#experience-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block
}

.experience-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(3, 5, 6, .78) 0, rgba(3, 5, 6, .12) 48%, rgba(3, 5, 6, .15) 100%), linear-gradient(0deg, rgba(3, 5, 6, .66) 0, transparent 35%);
    pointer-events: none;
    transition: opacity .8s
}

.experience-grain {
    position: absolute;
    inset: -50%;
    opacity: .055;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
    animation: grainShift .18s steps(2) infinite
}

.experience-loader {
    position: absolute;
    inset: 0;
    z-index: 8;
    background: #05080a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: opacity .8s, visibility .8s
}

.experience-loader.is-ready {
    opacity: 0;
    visibility: hidden
}

.experience-loader span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 18px var(--acid)
}

.experience-loader em {
    font-style: normal;
    text-transform: uppercase;
    font-size: .59rem;
    letter-spacing: .22em;
    color: rgba(255, 255, 255, .55)
}

.experience-chapter {
    position: relative;
    z-index: 2;
    min-height: 115vh;
    padding: 13vh 8vw;
    display: flex;
    align-items: center;
    pointer-events: none
}

.experience-chapter.align-right {
    justify-content: flex-end
}

.chapter-copy {
    width: min(520px, 43vw);
    pointer-events: auto
}

.chapter-copy-wide {
    width: min(920px, 72vw)
}

.chapter-code {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .62rem;
    letter-spacing: .2em;
    color: var(--acid);
    text-transform: uppercase;
    margin-bottom: 1.5rem
}

.chapter-code:before {
    content: "";
    width: 35px;
    height: 1px;
    background: currentColor
}

.chapter-copy h1,
.chapter-copy h2 {
    font-family: "Times New Roman", Times, serif;
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: .84;
    color: var(--paper);
    text-wrap: balance;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .35)
}

.chapter-copy h1 {
    font-size: clamp(5rem, 10.4vw, 10.2rem)
}

.chapter-copy h2 {
    font-size: clamp(3.7rem, 7.1vw, 7rem)
}

.chapter-copy h1 em,
.chapter-copy h2 em {
    font-weight: 400;
    color: var(--acid)
}

.chapter-copy p {
    margin-top: 2rem;
    max-width: 470px;
    font-size: clamp(.94rem, 1.15vw, 1.15rem);
    line-height: 1.75;
    color: var(--muted);
    font-weight: 350
}

.experience-hero {
    min-height: 125vh;
    align-items: flex-end;
    padding-bottom: 13vh
}

.experience-hero .chapter-copy p {
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    max-width: 540px
}

.chapter-scroll {
    margin-top: 2.8rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .18em
}

.chapter-scroll i {
    width: 62px;
    height: 1px;
    background: rgba(255, 255, 255, .3);
    position: relative;
    overflow: hidden
}

.chapter-scroll i:after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--acid);
    transform: translateX(-100%);
    animation: scan 2.2s ease-in-out infinite
}

.hero-side-note {
    position: absolute;
    right: 3.2vw;
    bottom: 10vh;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-transform: uppercase;
    letter-spacing: .14em
}

.hero-side-note span {
    font-size: .56rem;
    color: rgba(255, 255, 255, .42)
}

.hero-side-note strong {
    font: 400 2.2rem/1 "Times New Roman", serif;
    color: var(--acid);
    margin-top: .35rem
}

.chapter-fact {
    margin-top: 3rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    width: min(310px, 100%)
}

.chapter-fact strong {
    font: 400 2.8rem/1 "Times New Roman", serif;
    color: var(--acid)
}

.chapter-fact span {
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1.55;
    color: rgba(255, 255, 255, .47)
}

.signal-key {
    display: flex;
    gap: 1.4rem;
    margin-top: 2.8rem;
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5)
}

.signal-key span {
    display: flex;
    align-items: center;
    gap: .45rem
}

.signal-key i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--acid);
    box-shadow: 0 0 10px var(--acid)
}

.signal-key span+span i {
    background: #fff;
    box-shadow: none
}

.metric-row {
    display: flex;
    gap: 0;
    margin-top: 3rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.metric-row span {
    padding: 1rem 1.1rem;
    border-right: 1px solid var(--line);
    font-size: .54rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .44)
}

.metric-row span:first-child {
    padding-left: 0
}

.metric-row strong {
    display: block;
    font: 400 1.6rem/1.2 "Times New Roman", serif;
    color: #fff;
    letter-spacing: -.03em
}

.experience-final {
    min-height: 130vh;
    align-items: center
}

.final-actions {
    display: flex;
    gap: 2rem;
    margin-top: 2.6rem
}

.final-actions a {
    color: #fff;
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .15em;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding: .6rem 0
}

.final-actions a span {
    color: var(--acid)
}

.experience-footer {
    position: absolute;
    left: 3.2vw;
    right: 3.2vw;
    bottom: 2rem;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
    font-size: .55rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38)
}

.experience-rail {
    position: fixed;
    z-index: 20;
    left: 3.2vw;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    color: rgba(255, 255, 255, .48);
    font-size: .56rem;
    letter-spacing: .12em
}

.experience-rail i {
    height: 112px;
    width: 1px;
    background: rgba(255, 255, 255, .18);
    position: relative;
    overflow: hidden
}

.experience-rail b {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    background: var(--acid);
    box-shadow: 0 0 7px var(--acid)
}

.rail-index {
    color: var(--acid)
}

.experience-telemetry {
    position: fixed;
    z-index: 20;
    right: 3.2vw;
    top: 50%;
    transform: translateY(-50%) rotate(90deg) translateX(50%);
    transform-origin: right center;
    display: flex;
    gap: 1.5rem;
    font-size: .54rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4)
}

@keyframes scan {
    50% {
        transform: translateX(100%)
    }

    100% {
        transform: translateX(100%)
    }
}

@keyframes grainShift {
    0% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(3%, -2%)
    }

    50% {
        transform: translate(-2%, 3%)
    }

    75% {
        transform: translate(4%, 2%)
    }
}

@media(max-width:760px) {
    body[data-scene="network"] header.experience-nav {
        height: 62px;
        padding: 0 1.1rem
    }

    .experience-nav-center {
        display: none
    }

    .experience-nav-link {
        font-size: .55rem
    }

    .experience-rail {
        left: 1rem
    }

    .experience-telemetry {
        display: none
    }

    .experience-chapter,
    .experience-chapter.align-right {
        min-height: 110vh;
        padding: 12vh 1.4rem 12vh 3rem;
        justify-content: flex-start;
        align-items: flex-end
    }

    .experience-hero {
        min-height: 120vh
    }

    .chapter-copy,
    .chapter-copy-wide {
        width: 100%
    }

    .chapter-copy h1 {
        font-size: clamp(4.4rem, 22vw, 7rem)
    }

    .chapter-copy h2 {
        font-size: clamp(3.3rem, 16vw, 5.6rem)
    }

    .chapter-copy p {
        max-width: 88%;
        font-size: .93rem
    }

    .experience-shade {
        background: linear-gradient(0deg, rgba(3, 5, 6, .88) 0, rgba(3, 5, 6, .22) 62%, rgba(3, 5, 6, .18))
    }

    .hero-side-note {
        display: none
    }

    .metric-row {
        overflow-x: auto
    }

    .metric-row span {
        min-width: 100px
    }

    .final-actions {
        flex-direction: column;
        gap: .5rem;
        align-items: flex-start
    }

    .experience-footer {
        left: 3rem;
        right: 1.4rem;
        flex-direction: column;
        gap: .5rem
    }

    .experience-grain {
        display: none
    }
}

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

    .experience-grain,
    .chapter-scroll i:after {
        animation: none
    }
}

/* RF-only reconstruction after the midpoint */
body.rf-only .experience-shade {
    background: radial-gradient(circle at 52% 52%, rgba(0, 207, 255, .06), rgba(1, 5, 8, .38) 46%, rgba(1, 4, 6, .82) 100%), linear-gradient(90deg, rgba(1, 5, 8, .75), transparent 52%, rgba(1, 5, 8, .24));
}

body.rf-only #experience-canvas {
    filter: saturate(1.35) contrast(1.12);
}

body.rf-only .chapter-code,
body.rf-only .rail-index {
    color: #7bf5ff;
    text-shadow: 0 0 15px rgba(75, 235, 255, .45);
}

body.rf-only .experience-telemetry {
    color: rgba(123, 245, 255, .7);
}

/* View progression + in-car RF display */
.view-sequence {
    position: fixed;
    z-index: 24;
    left: 8vw;
    top: 96px;
    display: flex;
    align-items: baseline;
    gap: .8rem;
    font-size: .58rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .46)
}

.view-sequence span {
    font: 400 1.45rem/1 "Times New Roman", serif;
    color: var(--acid)
}

.view-sequence b {
    font-weight: 500;
    color: #fff
}

.cockpit-radar {
    position: fixed;
    z-index: 26;
    left: 50%;
    bottom: 3.2vh;
    width: min(640px, 48vw);
    transform: translate(-50%, 35px) perspective(900px) rotateX(6deg);
    padding: 1rem 1.15rem .75rem;
    background: linear-gradient(145deg, rgba(4, 20, 25, .94), rgba(2, 8, 11, .9));
    border: 1px solid rgba(112, 241, 255, .38);
    border-radius: 9px;
    box-shadow: 0 0 0 5px rgba(2, 6, 8, .72), 0 22px 80px rgba(0, 0, 0, .75), inset 0 0 45px rgba(33, 214, 255, .06);
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s, transform .7s, visibility .55s;
    pointer-events: none
}

.cockpit-view .cockpit-radar {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) perspective(900px) rotateX(3deg)
}

.radar-topline,
.radar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .5rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(171, 247, 255, .62)
}

.radar-lock {
    color: #9ff9ff
}

.radar-lock:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 .45rem 1px 0;
    border-radius: 50%;
    background: #7af6ff;
    box-shadow: 0 0 10px #7af6ff
}

.radar-layout {
    display: grid;
    grid-template-columns: 1fr 160px;
    align-items: center;
    gap: 1rem;
    margin: .65rem 0
}

.radar-scope {
    position: relative;
    width: 230px;
    aspect-ratio: 1;
    margin: auto;
    border-radius: 50%;
    border: 1px solid rgba(112, 241, 255, .48);
    overflow: hidden;
    background: radial-gradient(circle, rgba(46, 218, 255, .1), rgba(2, 11, 14, .86) 68%), repeating-radial-gradient(circle, transparent 0 28px, rgba(108, 238, 255, .11) 29px 30px)
}

.radar-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(112, 241, 255, .18);
    border-radius: 50%;
    transform: translate(-50%, -50%)
}

.radar-ring.r1 {
    width: 30%;
    height: 30%
}

.radar-ring.r2 {
    width: 58%;
    height: 58%
}

.radar-ring.r3 {
    width: 84%;
    height: 84%
}

.radar-cross {
    position: absolute;
    background: rgba(112, 241, 255, .14)
}

.radar-cross.x {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px
}

.radar-cross.y {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px
}

.radar-sweep {
    position: absolute;
    width: 50%;
    height: 50%;
    left: 50%;
    top: 0;
    transform-origin: 0 100%;
    background: conic-gradient(from 90deg, rgba(101, 242, 255, .35), transparent 42deg);
    animation: radarSweep 2.8s linear infinite
}

.radar-vehicle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1rem;
    text-shadow: 0 0 9px #fff
}

.radar-blip {
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid #8ff7ff;
    background: #082d34;
    box-shadow: 0 0 9px #65edff;
    border-radius: 50%;
    animation: blipPulse 1.7s ease-in-out infinite
}

.radar-blip:after {
    content: attr(data-label);
    position: absolute;
    left: 9px;
    top: -3px;
    font-size: .39rem;
    letter-spacing: .08em;
    color: rgba(177, 249, 255, .86);
    white-space: nowrap
}

.dog-one {
    left: 28%;
    top: 62%;
    border-color: #ffcf78;
    box-shadow: 0 0 9px #ffcf78
}

.dog-two {
    left: 68%;
    top: 27%;
    border-color: #ffcf78;
    box-shadow: 0 0 9px #ffcf78
}

.traffic-one {
    left: 54%;
    top: 17%
}

.traffic-two {
    left: 77%;
    top: 57%
}

.person {
    left: 38%;
    top: 34%;
    border-radius: 0
}

.building {
    left: 14%;
    top: 23%;
    width: 8px;
    height: 8px;
    border-radius: 0
}

.radar-readout {
    height: 100%;
    border-left: 1px solid rgba(112, 241, 255, .16);
    padding-left: 1rem
}

.radar-readout>span {
    font-size: .45rem;
    letter-spacing: .15em;
    color: rgba(180, 246, 255, .52)
}

.radar-readout>strong {
    display: block;
    font: 400 3.6rem/1 "Times New Roman", serif;
    color: #a6f8ff;
    margin: .15rem 0 .65rem
}

.radar-readout ul {
    list-style: none
}

.radar-readout li {
    font-size: .48rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(214, 251, 255, .58);
    padding: .26rem 0;
    border-top: 1px solid rgba(112, 241, 255, .1)
}

.radar-readout li i {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #72f5ff;
    margin: 0 .45rem 1px 0
}

.radar-footer {
    border-top: 1px solid rgba(112, 241, 255, .14);
    padding-top: .65rem
}

.cockpit-view .experience-shade {
    background: linear-gradient(0deg, rgba(1, 5, 7, .82) 0, rgba(1, 5, 7, .1) 52%, rgba(1, 4, 6, .5)), radial-gradient(circle at 50% 75%, transparent, rgba(0, 0, 0, .45))
}

@keyframes radarSweep {
    to {
        transform: rotate(360deg)
    }
}

@keyframes blipPulse {
    50% {
        opacity: .35;
        transform: scale(.75)
    }
}

@media(max-width:760px) {
    .view-sequence {
        left: 3rem;
        top: 74px
    }

    .cockpit-radar {
        width: calc(100vw - 2rem);
        bottom: 1rem;
        padding: .8rem
    }

    .radar-layout {
        grid-template-columns: 1fr 110px;
        gap: .5rem
    }

    .radar-scope {
        width: 180px
    }

    .radar-readout>strong {
        font-size: 2.6rem
    }

    .radar-footer {
        gap: .3rem
    }

    .radar-footer span:nth-child(2) {
        display: none
    }

    .cockpit-view .rf-chapter .chapter-copy {
        transform: translateY(-32vh)
    }
}

.final-view .view-sequence {
    opacity: 0;
    visibility: hidden
}

/* Mineral daylight palette */
:root {
    --night: #264b55;
    --paper: #fff8eb;
    --acid: #79f3d7;
    --blue: #3cb7d0;
    --muted: rgba(255, 248, 235, .72);
    --line: rgba(255, 248, 235, .24)
}

html,
body[data-scene="network"],
.experience-shell {
    background: #264b55
}

body[data-scene="network"] header.experience-nav {
    background: linear-gradient(180deg, rgba(22, 55, 64, .9), rgba(22, 55, 64, .18))
}

.experience-canvas-wrap {
    background: radial-gradient(circle at 54% 38%, #78979a 0, #3e6870 42%, #244852 100%)
}

.experience-shade {
    background: linear-gradient(90deg, rgba(19, 49, 58, .72) 0, rgba(19, 49, 58, .08) 54%, rgba(19, 49, 58, .1) 100%), linear-gradient(0deg, rgba(18, 48, 56, .55) 0, transparent 42%)
}

.experience-loader {
    background: #264b55
}

.chapter-copy h1,
.chapter-copy h2 {
    color: #fff8eb;
    text-shadow: 0 3px 35px rgba(15, 39, 47, .42)
}

.chapter-copy h1 em,
.chapter-copy h2 em,
.chapter-code,
.rail-index,
.view-sequence span {
    color: #79f3d7
}

.experience-rail i {
    background: rgba(255, 248, 235, .28)
}

.experience-rail b {
    background: #79f3d7;
    box-shadow: 0 0 8px #79f3d7
}

.cockpit-radar {
    background: linear-gradient(145deg, rgba(16, 51, 60, .96), rgba(10, 34, 42, .94));
    border-color: rgba(121, 243, 215, .58)
}

body.rf-only .experience-shade {
    background: radial-gradient(circle at 52% 52%, rgba(50, 220, 203, .12), rgba(20, 60, 68, .28) 46%, rgba(16, 45, 53, .72) 100%), linear-gradient(90deg, rgba(18, 54, 62, .62), transparent 52%, rgba(18, 54, 62, .18))
}

.cockpit-view .experience-shade {
    background: linear-gradient(0deg, rgba(14, 45, 53, .72) 0, rgba(22, 63, 70, .04) 54%, rgba(19, 52, 60, .32)), radial-gradient(circle at 50% 75%, transparent, rgba(17, 48, 56, .38))
}

/* One circular instrument, synchronized with the scene's damped scroll progress. */
:root {
    --radar-reveal: 0;
    --radar-y: -22vh;
    --radar-scale: .54;
    --radar-bottom: 5vh;
    --rf-mix: 0
}

.cockpit-radar,
.cockpit-view .cockpit-radar {
    left: 50%;
    bottom: var(--radar-bottom);
    width: clamp(260px, 26vw, 350px);
    aspect-ratio: 1;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    opacity: var(--radar-reveal);
    visibility: visible;
    transform: translate3d(-50%, var(--radar-y), 0) scale(var(--radar-scale));
    filter: none;
    transition: none;
    will-change: transform, opacity
}

.cockpit-radar .radar-scope {
    width: 100%;
    height: 100%;
    margin: 0;
    border: 1px solid rgba(121, 243, 215, .52);
    box-shadow: inset 0 0 44px rgba(121, 243, 215, .08), 0 0 0 5px rgba(121, 243, 215, .035), 0 22px 60px rgba(10, 34, 42, .2);
    background: radial-gradient(circle, rgba(30, 100, 106, .9), rgba(12, 42, 50, .96) 72%)
}

.radar-sweep {
    inset: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg 285deg, rgba(121, 243, 215, .015) 300deg, rgba(121, 243, 215, .22) 359deg, rgba(181, 255, 232, .7) 360deg);
    animation: radarSweep 5s linear infinite
}

.radar-blip {
    animation: blipPulse 5s ease-in-out infinite
}

.radar-blip:after {
    font-size: .48rem;
    letter-spacing: .04em
}

.dog-one {
    animation-delay: -3.4s
}

.dog-two {
    animation-delay: -.65s
}

.traffic-one {
    animation-delay: -.1s
}

.traffic-two {
    animation-delay: -1.5s
}

.person {
    animation-delay: -4.4s
}

.building {
    animation-delay: -4s
}

.radar-vehicle {
    font-size: .85rem
}

body .experience-shade,
body.rf-only .experience-shade,
body.cockpit-view .experience-shade {
    background: linear-gradient(90deg, rgba(19, 49, 58, .65), rgba(19, 49, 58, .04) 54%), linear-gradient(0deg, rgba(18, 48, 56, .48), transparent 48%)
}

.experience-shade:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 70%, transparent 20%, rgba(15, 46, 54, .42));
    opacity: var(--rf-mix)
}

body.rf-only #experience-canvas {
    filter: none
}

@media(max-width:760px) {

    .cockpit-radar,
    .cockpit-view .cockpit-radar {
        width: min(62vw, 260px);
        top: 17vh;
        bottom: auto
    }

    .cockpit-view .rf-chapter .chapter-copy {
        transform: none
    }

    .rf-chapter {
        padding-bottom: 38vh
    }

    .radar-blip:after {
        font-size: .39rem
    }
}

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

    .radar-sweep,
    .radar-blip {
        animation: none
    }

    .cockpit-radar {
        will-change: auto
    }
}


/* Keep the complete opening message visible at common laptop and phone sizes. */
.experience-hero {
    min-height: 100svh;
    padding-top: 110px;
    padding-bottom: 7vh
}

.experience-hero .chapter-copy {
    width: min(800px, 70vw)
}

.experience-hero h1 {
    font-size: clamp(4.8rem, 8.8vw, 8.5rem);
    line-height: .91
}

.experience-hero .chapter-copy p {
    max-width: 490px;
    font-size: 1.06rem;
    margin-top: 1.5rem
}

@media(max-width:760px) {
    .experience-hero {
        min-height: 100svh;
        padding: 100px 7vw 7vh;
        align-items: flex-end
    }

    .experience-hero .chapter-copy {
        width: 100%
    }

    .experience-hero h1 {
        font-size: clamp(3.5rem, 16vw, 5.1rem)
    }

    .experience-hero .chapter-copy p {
        font-size: .93rem;
        max-width: 100%;
        margin-top: 1.3rem
    }
}

/* The opening and the header share a single moving wordmark. */
body[data-scene="network"] {
    --paper: #f1f0e8;
    --acid: #c9dab7;
    background: #254c41
}

.home-wordmark {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 61;
    display: block;
    transform-origin: 0 0;
    will-change: transform;
    pointer-events: none;
    cursor: default;
}

body.journey-entered .home-wordmark,
body.logo-docked .home-wordmark {
    pointer-events: auto;
    cursor: pointer;
}

.home-wordmark img {
    display: block;
    width: 100%;
    height: auto;
    filter: brightness(0) saturate(100%);
    transition: filter .3s;
}

body[data-scene="network"] header.experience-nav {
    height: 84px;
    padding: 0 4.5vw;
    z-index: 60;
    background: transparent;
    border: 0;
    transition: background .3s
}

.home-navigation {
    margin-left: auto;
    display: flex;
    gap: 28px;
    align-items: center;
}

.home-navigation a,
.home-navigation .dropdown-trigger {
    color: #26483c;
    font-size: 12px;
    letter-spacing: .01em;
    text-transform: none;
    text-decoration: none;
    padding: 12px 0;
    border: none;
    background: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s, border-color 0.2s;
}

.home-navigation a:hover,
.home-navigation .dropdown-trigger:hover,
.home-navigation .nav-dropdown:hover .dropdown-trigger {
    border-color: currentColor;
}

.home-navigation a:focus-visible,
.home-navigation .dropdown-trigger:focus-visible,
.home-wordmark:focus-visible,
.intro-details>a:focus-visible {
    outline: 2px solid #72916f;
    outline-offset: 6px;
}

body.journey-entered header.experience-nav {
    background: rgba(24, 53, 44, .9);
    backdrop-filter: blur(14px);
}

.journey-entered .home-navigation a,
.journey-entered .home-navigation .dropdown-trigger {
    color: #f1f0e8;
}

.journey-entered .home-wordmark img {
    filter: brightness(0) invert(1);
}

/* Home Navigation Dropdown */
.home-navigation .nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-chevron {
    font-size: 8px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.2s ease;
}

.home-navigation .nav-dropdown:hover .nav-chevron,
.subsite-nav .nav-dropdown:hover .nav-chevron {
    transform: rotate(180deg);
}

.home-navigation .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(24, 53, 44, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 7px;
    padding: 5px;
    min-width: 145px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    z-index: 1000;
}

.home-navigation .nav-dropdown:hover .dropdown-menu,
.home-navigation .nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.home-navigation .dropdown-menu a {
    display: block;
    padding: 8px 14px;
    font-size: 12px;
    color: rgba(241, 240, 232, 0.9) !important;
    text-decoration: none;
    border-radius: 4px;
    border-bottom: none !important;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.home-navigation .dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff !important;
}

.brand-intro {
    position: relative;
    z-index: 5;
    min-height: 760px;
    height: 100svh;
    background: #f1f0e8;
    color: #26483c;
    isolation: isolate;
}

.brand-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at 80% 80%, rgba(162, 183, 142, .18), transparent 65%);
}

.intro-copy {
    position: absolute;
    top: 51%;
    left: 12%;
    right: 12%;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    column-gap: 9%;
    align-items: start;
}

.intro-copy h1 {
    font-family: Georgia, serif;
    font-size: clamp(44px, 4.8vw, 74px);
    line-height: 1.02;
    letter-spacing: -.045em;
    font-weight: 400;
    margin: 0;
    grid-row: 1 / 3;
}

.intro-copy h1 em {
    font-weight: 400;
    color: #6d8066;
}

.intro-copy p {
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.8;
    margin: 0;
    color: #5d6b60;
}

.intro-copy>a {
    justify-self: start;
    margin-top: 28px;
    color: #26483c;
    text-decoration: none;
    border-bottom: 1px solid #9aa991;
    padding-bottom: 10px;
    font-size: 13px;
}

.intro-copy>a span {
    margin-left: 32px;
}

.intro-baseline {
    position: absolute;
    bottom: 32px;
    left: 4.5%;
    right: 4.5%;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #cdd3c5;
    padding-top: 18px;
    font-size: 10px;
    letter-spacing: .025em;
    color: #798373
}

.experience-grain {
    opacity: .025
}

.experience-chapter h2 {
    font-family: Georgia, serif;
    font-weight: 400;
    letter-spacing: -.045em
}

.experience-hero h2 {
    font-size: clamp(4.8rem, 8.8vw, 8.5rem);
    line-height: .95;
    margin: 0 0 26px
}

.experience-chapter p {
    line-height: 1.8
}

@media(max-width:650px) {
    body[data-scene="network"] header.experience-nav {
        height: 72px;
        padding: 0 5vw
    }

    .home-navigation {
        gap: 14px;
    }

    .home-navigation a,
    .home-navigation .dropdown-trigger {
        font-size: 10px;
        letter-spacing: 0;
    }

    .home-navigation .dropdown-menu {
        min-width: 125px;
    }

    .home-navigation .dropdown-menu a {
        font-size: 11px;
        padding: 6px 10px;
    }

    .brand-intro {
        min-height: 690px;
    }

    .intro-copy {
        top: 44%;
        left: 8%;
        right: 8%;
        display: block;
    }

    .intro-copy h1 {
        font-size: clamp(39px, 10.5vw, 62px);
    }

    .intro-copy p {
        margin-top: 25px;
        font-size: 14px;
        line-height: 1.65;
    }

    .intro-copy>a {
        display: inline-block;
        margin-top: 22px;
    }

    .intro-baseline {
        left: 8%;
        right: 8%;
        bottom: 22px;
        font-size: 9px
    }

    .intro-baseline span:last-child {
        display: none
    }

    .desktop-break {
        display: none
    }

    .experience-hero h2 {
        font-size: clamp(3.5rem, 16vw, 5.1rem)
    }
}

@media(prefers-reduced-motion:reduce) {
    .home-wordmark {
        will-change: auto
    }

    .home-wordmark img,
    body[data-scene="network"] header.experience-nav {
        transition: none
    }
}

.experience-chapter:not(.experience-hero) h2 {
    font-size: clamp(40px, 5.2vw, 76px);
    line-height: 1.03;
    overflow-wrap: break-word
}

.experience-chapter h2 em {
    color: #c9dab7
}

@media(max-width:650px) {
    .experience-chapter:not(.experience-hero) h2 {
        font-size: clamp(36px, 10.5vw, 48px)
    }
}

@media(max-width:650px) {
    .cockpit-radar {
        top: auto;
        bottom: 4vh;
        width: min(48vw, 190px)
    }
}