@media (max-width: 1366px) {
    .portrait-top {
        max-width: 94vw;
    }

    .node-initiate {
        top: 32.5%;
        right: 2.2%;
    }

    .node-about {
        top: 55.5%;
        right: 1.6%;
    }

    .node-threads {
        top: 40%;
        left: 23%;
    }

    .node-instagram {
        top: 58%;
        left: 22.5%;
    }
}

@media (max-width: 1200px) {
    body.home-page #main-content {
        padding-top: clamp(20px, 3.4vw, 30px);
    }

    .portrait-split img {
        max-height: calc(100vh - 240px);
    }

    .cta-container {
        max-width: 900px;
    }

}

@media (max-width: 1100px) {
    .portrait-top {
        max-width: 92vw;
    }

    .node {
        gap: 9px;
    }

    .node-initiate {
        top: 31.75%;
        right: 3.6%;
    }

    .node-about {
        top: 54.75%;
        right: 3%;
    }

    .node-threads {
        top: 39.75%;
        left: 22%;
    }

    .node-instagram {
        top: 57.5%;
        left: 21.5%;
    }
}

@media (max-width: 1024px) {
    body.about-page .page-shell,
    body.systems-page .page-shell {
        padding: 32px 7% 42px;
    }

    .section-grid,
    .page-hero-grid {
        gap: 40px;
    }
}

@media (max-width: 900px) {
    .page-hero-grid,
    .section-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .page-hero-copy h1 {
        max-width: 100%;
    }

    .page-hero-side {
        justify-items: start;
    }

    .page-hero-side .page-meta {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .about-page .prose-flow p:not(.prose-lede),
    .core-page .prose-flow p:not(.prose-lede) {
        text-align: left;
    }

    body.home-page #main-content {
        padding-top: 18px;
        padding-bottom: 28px;
    }

    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    body.home-page header {
        padding: 18px 0 18px;
    }

    .logo-text {
        font-size: 0.95rem;
        letter-spacing: 0.35em;
        white-space: normal;
    }

    .version-tag {
        text-align: left;
        font-size: 0.58rem;
        line-height: 1.7;
    }

    .portrait-top {
        width: min(100%, 720px);
        max-width: 100%;
    }

    .home-lower-row {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .home-contact-row {
        justify-content: stretch;
    }

    .home-contact-panel {
        width: 100%;
    }

    .home-manifest-block {
        width: 100%;
        margin-bottom: 18px;
    }

    .home-manifest-copy {
        max-width: none;
        font-size: 0.6rem;
        line-height: 1.7;
        letter-spacing: 0.07em;
    }

    .portrait-top::before {
        aspect-ratio: 1380 / 840;
        min-height: min(58vw, 360px);
        max-height: none;
    }

    .portrait-split img {
        width: 100%;
        max-height: none;
    }

    .node {
        gap: 6px;
        min-height: 34px;
        padding: 8px 10px;
    }

    .node::before,
    .node:hover::before {
        width: 52px;
    }

    .node-dot {
        width: 10px;
        height: 10px;
        box-shadow:
            0 0 0 4px rgba(124,77,255,0.1),
            0 0 10px var(--node-color, rgba(124,77,255,0.22)),
            0 0 16px rgba(0,229,255,0.14);
    }

    .node-label,
    .node-signal .node-label {
        font-size: 0.5rem;
        letter-spacing: 0.15em;
    }

    .node-initiate {
        top: 30.5%;
        right: 2.2%;
    }

    .node-about {
        top: 52.8%;
        right: 2.5%;
    }

    .node-signal::before {
        width: 56px;
    }

    .node-signal:hover::before {
        width: 48px;
    }

    .node-threads {
        top: 39.2%;
        left: 18.8%;
    }

    .node-instagram {
        top: 55.8%;
        left: 18.3%;
    }

    .node-about::before {
        width: 46px;
    }

    .node-about:hover::before {
        width: 60px;
    }

    .portrait-divider {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -2px;
        height: 2px;
        width: auto;
        margin: 0;
        background: linear-gradient(
            90deg,
            rgba(124,77,255,0.35),
            rgba(0,229,255,0.35),
            rgba(255,64,129,0.3),
            rgba(124,77,255,0.35)
        );
        box-shadow:
            0 -6px 12px rgba(124, 77, 255, 0.10),
            0 -4px 8px rgba(0, 229, 255, 0.08),
            0 4px 8px rgba(255, 64, 129, 0.06);
    }

    .future-nodes {
        gap: 8px;
        margin-top: 10px;
    }

    .node-future {
        min-height: 28px;
    }

    .node-future::after {
        font-size: 0.46rem;
        letter-spacing: 0.16em;
        margin-left: 8px;
    }

    .cta-container {
        max-width: 100%;
        gap: 14px;
        padding-top: 0;
    }

    .cta-links {
        gap: 12px;
    }

    .terminal-btn {
        min-height: 56px;
        padding: 16px 18px;
        font-size: 0.75rem;
    }

    .introvert-note {
        font-size: 0.58rem;
        line-height: 1.8;
    }

    .module-note {
        font-size: 0.58rem;
        line-height: 1.85;
        letter-spacing: 0.15em;
        margin-top: 12px;
    }

    .modal-card {
        padding: 20px 18px 18px;
    }

    .modal-card h3 {
        font-size: 0.9rem;
    }

    .modal-card p {
        font-size: 0.7rem;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions .terminal-btn {
        max-width: 100%;
        width: 100%;
    }

    .transition-label {
        font-size: 0.64rem;
        letter-spacing: 0.24em;
        padding-left: 0.24em;
    }

    .system-media,
    .system-visual {
        width: 100%;
    }

    .system-media-stage {
        min-height: 160px;
        padding: 16px 0;
    }

    .system-block.is-hero .system-media-stage {
        min-height: 190px;
        padding: 20px 0;
    }

    .system-media.is-real img {
        object-position: 56% 10%;
    }

    .is-measures .system-media.is-real img,
    .is-measures-proof.system-media.is-real img {
        object-position: 56% 6%;
        transform: scale(1.02);
    }

    .top-nav {
        margin-top: 14px;
    }

    body.about-page .terminal-btn,
    body.systems-page .terminal-btn {
        width: 100%;
        text-align: center;
    }

    .page-stack {
        gap: 44px;
    }

    .page-hero-copy h1 {
        font-size: 2rem;
        line-height: 1;
        margin-bottom: 18px;
    }

    .lede,
    .about-copy p {
        font-size: 0.84rem;
        line-height: 1.9;
    }

    .aside-card {
        padding: 20px 18px;
    }
}

@media (max-width: 640px) {
    body.home-page #main-content {
        padding-top: 17px;
        padding-bottom: 26px;
    }

    .portrait-top::before {
        aspect-ratio: 1380 / 860;
        min-height: min(62vw, 350px);
    }

    .node {
        gap: 5px;
        min-height: 32px;
        padding: 7px 8px;
    }

    .node::before,
    .node:hover::before {
        width: 44px;
    }

    .node-signal::before {
        width: 48px;
    }

    .node-signal:hover::before {
        width: 42px;
    }

    .node-dot {
        width: 9px;
        height: 9px;
    }

    .node-label,
    .node-signal .node-label {
        font-size: 0.47rem;
        letter-spacing: 0.13em;
    }

    .node-initiate {
        top: 30.2%;
        right: 2.6%;
    }

    .node-about {
        top: 52.3%;
        right: 2.9%;
    }

    .node-threads {
        top: 38.6%;
        left: 16.2%;
    }

    .node-instagram {
        top: 54.9%;
        left: 15.8%;
    }

    .module-note {
        font-size: 0.55rem;
        letter-spacing: 0.13em;
        line-height: 1.8;
    }
}

@media (max-width: 480px) {
    body.about-page .page-shell {
        padding: 20px 16px 32px;
    }

    .eyebrow {
        font-size: 0.54rem;
        letter-spacing: 0.24em;
    }

    .page-hero-copy h1 {
        font-size: 1.72rem;
        line-height: 1.04;
    }

    .lede,
    .about-copy p {
        font-size: 0.8rem;
    }

    .aside-item strong {
        font-size: 0.68rem;
    }

    .aside-item span {
        font-size: 0.66rem;
    }

    .sys-log {
        font-size: 0.56rem;
    }
}

@media (max-width: 430px) {
    body.home-page #main-content {
        padding-top: 15px;
        padding-bottom: 24px;
    }

    body.home-page header {
        gap: 8px;
        padding: 16px 0 16px;
    }

    .logo-text {
        font-size: 0.84rem;
        letter-spacing: 0.22em;
    }

    .version-tag {
        font-size: 0.52rem;
        letter-spacing: 0.14em;
    }

    .portrait-top::before {
        aspect-ratio: 1380 / 900;
        min-height: min(68vw, 332px);
    }

    .node {
        gap: 4px;
        min-height: 30px;
        padding: 6px 7px;
    }

    .node::before {
        width: 36px;
    }

    .node:hover::before {
        width: 38px;
    }

    .node-signal::before {
        width: 40px;
    }

    .node-signal:hover::before {
        width: 36px;
    }

    .node-dot {
        width: 8px;
        height: 8px;
        box-shadow:
            0 0 0 3px rgba(124,77,255,0.09),
            0 0 8px var(--node-color, rgba(124,77,255,0.18)),
            0 0 12px rgba(0,229,255,0.12);
    }

    .node-label,
    .node-signal .node-label {
        font-size: 0.43rem;
        letter-spacing: 0.11em;
    }

    .node-initiate {
        top: 29.8%;
        right: 1.8%;
    }

    .node-about {
        top: 51.9%;
        right: 2.1%;
    }

    .node-threads {
        top: 38.4%;
        left: 14.8%;
    }

    .node-instagram {
        top: 54.6%;
        left: 14.4%;
    }

    .future-nodes {
        gap: 7px;
    }

    .node-future::after {
        font-size: 0.42rem;
        letter-spacing: 0.12em;
        margin-left: 7px;
    }

    .module-note {
        font-size: 0.52rem;
        letter-spacing: 0.11em;
        line-height: 1.75;
        margin-top: 10px;
    }

    .hint {
        margin-top: 40px;
        font-size: 0.48rem;
        letter-spacing: 0.55em;
        padding-left: 0.55em;
    }

    .logo-container {
        width: 160px;
        height: 160px;
        max-width: 58vw;
        max-height: 58vw;
    }

    .terminal-btn {
        min-height: 52px;
        font-size: 0.72rem;
        padding: 14px 16px;
    }

    .home-contact-panel .contact-send {
        width: 100%;
        min-height: 44px;
    }

    .system-media-stage {
        min-height: 144px;
    }

    .system-block.is-hero .system-media-stage {
        min-height: 168px;
    }

    .system-actions,
    .page-closure-actions {
        width: 100%;
    }

    .system-signal-link {
        letter-spacing: 0.18em;
    }
}

@media (max-width: 390px) {
    body.home-page #main-content {
        padding-top: 14px;
        padding-bottom: 22px;
    }

    .logo-text {
        font-size: 0.8rem;
        letter-spacing: 0.18em;
    }

    .version-tag {
        font-size: 0.5rem;
        letter-spacing: 0.1em;
    }

    .portrait-top::before {
        aspect-ratio: 1380 / 930;
        min-height: min(72vw, 320px);
    }

    .node {
        min-height: 28px;
        padding: 5px 6px;
    }

    .node::before,
    .node:hover::before {
        width: 30px;
    }

    .node-signal::before {
        width: 34px;
    }

    .node-signal:hover::before {
        width: 30px;
    }

    .node-label,
    .node-signal .node-label {
        font-size: 0.4rem;
        letter-spacing: 0.09em;
    }

    .node-initiate {
        top: 29.5%;
        right: 1.4%;
    }

    .node-about {
        top: 51.4%;
        right: 1.7%;
    }

    .node-threads {
        top: 38.1%;
        left: 13.2%;
    }

    .node-instagram {
        top: 54.2%;
        left: 12.8%;
    }

    .module-note {
        font-size: 0.5rem;
        letter-spacing: 0.09em;
    }

    .hint {
        margin-top: 34px;
        font-size: 0.44rem;
        letter-spacing: 0.42em;
        padding-left: 0.42em;
    }

    .logo-container {
        width: 148px;
        height: 148px;
        max-width: 60vw;
        max-height: 60vw;
    }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
    .modal-card::before {
        display: none;
    }

    .home-contact-panel::before {
        display: none;
    }

    body.about-page .page-hero-copy > *,
    body.about-page .page-hero-side,
    body.about-page .page-divider-wrap,
    body.about-page .systems-intro,
    body.about-page .system-block,
    body.about-page .page-closure,
    body.systems-page .page-hero-copy > *,
    body.systems-page .page-hero-side,
    body.systems-page .page-divider-wrap,
    body.systems-page .systems-intro,
    body.systems-page .system-block,
    body.systems-page .page-closure {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

@media (pointer: coarse), (max-width: 768px) {
    .cursor-orb {
        display: none;
    }
}