/* ============================================================
   SYNAPTOGENESIS
   DIARY OF A HUMAN
   ============================================================ */


/* ============================================================
   ROOT
   ============================================================ */

:root {

    --black: #030303;
    --deep-black: #010101;

    --ivory: #eee8dc;

    --gold: #d6ae5c;
    --gold-soft: #b99a61;

    --muted: rgba(238, 232, 220, 0.62);
    --faint: rgba(238, 232, 220, 0.38);

    --line: rgba(214, 174, 92, 0.25);

    --serif: "Cormorant Garamond", serif;
    --sans: "DM Sans", sans-serif;
    --accent: "Bodoni Moda", serif;
}


/* ============================================================
   RESET
   ============================================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100%;

    background: var(--black);

    color: var(--ivory);

    font-family: var(--sans);

    overflow-x: hidden;
}

button,
a {
    font: inherit;
}

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ============================================================
   PAGE
   ============================================================ */

.syn-page {
    position: relative;

    width: 100%;

    min-height: 100vh;
}


/* ============================================================
   BACKGROUND VIDEO
   ============================================================ */

.syn-video {
    position: fixed;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    background: #020202;
}

.syn-video video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    max-width: none;

    display: block;

    object-fit: cover;

    object-position: center center;
}


/* ============================================================
   ATMOSPHERE
   ============================================================ */

.syn-vignette {
    position: fixed;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(0, 0, 0, 0) 20%,
            rgba(0, 0, 0, 0.22) 65%,
            rgba(0, 0, 0, 0.76) 100%
        );
}

.syn-gradient {
    position: fixed;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.30),
            rgba(0, 0, 0, 0.05) 35%,
            rgba(0, 0, 0, 0.12) 65%,
            rgba(0, 0, 0, 0.68)
        );
}


/* ============================================================
   HERO
   ============================================================ */

.syn-hero {
    position: relative;

    width: 100%;

    min-height: 100vh;

    z-index: 5;

    display: flex;

    align-items: center;

    overflow: hidden;
}


/* ============================================================
   LOGO
   ============================================================ */

.syn-nav {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    padding:
        30px
        clamp(28px, 4vw, 64px);

    display: flex;

    align-items: flex-start;

    z-index: 30;

    pointer-events: none;
}

.syn-logo-link {
    display: inline-flex;

    line-height: 0;

    pointer-events: auto;
}

.syn-logo {
    width: clamp(90px, 7vw, 125px);

    height: auto;

    display: block;

    opacity: 0.96;

    transition:
        opacity 300ms ease,
        transform 500ms cubic-bezier(.22, 1, .36, 1);
}

.syn-logo-link:hover .syn-logo {
    opacity: 1;

    transform: translateY(-1px);
}


/* ============================================================
   HERO CONTENT
   ============================================================ */

.syn-hero-content {
    position: relative;

    z-index: 10;

    width: min(760px, 54vw);

    margin-left: clamp(60px, 8vw, 150px);

    padding-top: 4vh;
}

.syn-eyebrow {
    display: block;

    margin-bottom: 22px;

    color: var(--gold);

    font-family: var(--sans);

    font-size: 9px;

    font-weight: 400;

    letter-spacing: 0.34em;

    text-transform: uppercase;
}

.syn-title {
    color: var(--ivory);

    font-family: var(--serif);

    font-size: clamp(64px, 7vw, 118px);

    font-weight: 300;

    line-height: 0.78;

    letter-spacing: -0.045em;

    text-transform: uppercase;
}

.title-line {
    display: block;
}

.title-italic {
    font-style: italic;

    padding-left: clamp(35px, 5vw, 85px);
}

.syn-description {
    width: min(520px, 90%);

    margin-top: 48px;

    color: var(--muted);

    font-family: var(--sans);

    font-size: 13px;

    font-weight: 300;

    line-height: 1.8;
}

.syn-enter {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 32px;

    padding: 0;

    background: transparent;

    color: var(--ivory);

    cursor: pointer;

    font-family: var(--sans);

    font-size: 9px;

    letter-spacing: 0.27em;

    text-transform: uppercase;
}

.enter-arrow {
    color: var(--gold);

    font-size: 15px;

    transition:
        transform 400ms cubic-bezier(.22, 1, .36, 1);
}

.syn-enter:hover .enter-arrow {
    transform: translateX(7px);
}

.syn-enter:hover .enter-label {
    color: var(--gold);
}


/* ============================================================
   HERO SIDE DETAILS
   ============================================================ */

.syn-origin {
    position: absolute;

    left: 0;
    bottom: 8vh;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 16px;

    color: rgba(238, 232, 220, 0.38);

    font-size: 7px;

    letter-spacing: 0.25em;

    writing-mode: vertical-rl;
}

.origin-line {
    width: 1px;
    height: 55px;

    background: var(--line);
}

.syn-scroll {
    position: absolute;

    bottom: 34px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    color: rgba(238, 232, 220, 0.38);

    font-size: 7px;

    letter-spacing: 0.28em;
}

.scroll-line {
    width: 1px;
    height: 30px;

    background:
        linear-gradient(
            180deg,
            rgba(214, 174, 92, 0.7),
            transparent
        );
}


/* ============================================================
   WORKS
   ============================================================ */

.syn-works {
    position: relative;

    width: 100%;

    min-height: 100vh;

    padding:
        clamp(110px, 13vw, 190px)
        clamp(20px, 6vw, 100px)
        80px;

    z-index: 5;

    color: var(--ivory);

    background:
        linear-gradient(
            180deg,
            rgba(3, 3, 3, 0.20),
            rgba(3, 3, 3, 0.48)
        );

    overflow: hidden;
}


/* ============================================================
   WORK HEADER
   ============================================================ */

.syn-works-header {
    position: relative;

    z-index: 10;

    max-width: 760px;

    margin: 0 auto 80px;

    text-align: center;
}

.syn-works-title {
    font-family: var(--serif);

    font-size: clamp(58px, 7vw, 108px);

    font-weight: 300;

    line-height: 0.85;

    letter-spacing: -0.04em;
}

.syn-works-intro {
    max-width: 500px;

    margin: 28px auto 0;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.8;
}


/* ============================================================
   CONSTELLATION
   ============================================================ */

.syn-constellation {
    position: relative;

    width: min(1200px, 100%);

    min-height: 650px;

    margin: 0 auto;
}


/* ============================================================
   NETWORK
   ============================================================ */

.syn-network {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    pointer-events: none;
}

.syn-line {
    stroke: rgba(214, 174, 92, 0.28);

    stroke-width: 1;

    stroke-dasharray: 4 8;

    vector-effect: non-scaling-stroke;

    animation:
        networkPulse
        6s
        ease-in-out
        infinite;
}

.syn-line-2 {
    animation-delay: 1.2s;
}

.syn-line-3 {
    animation-delay: 2.4s;
}

.syn-line-4 {
    animation-delay: 3.6s;
}

@keyframes networkPulse {

    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 0.7;
    }

}


/* ============================================================
   INVESTIGATION NODES
   ============================================================ */

.syn-node {
    position: absolute;

    z-index: 10;

    width: 150px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    padding: 0;

    background: transparent;

    color: var(--ivory);

    cursor: pointer;

    text-align: left;

    opacity: 0.38;

    transform: translateY(0);

    transition:
        opacity 450ms ease,
        transform 450ms cubic-bezier(.22, 1, .36, 1);
}


/* ============================================================
   NODE IMAGE
   ============================================================ */

.syn-node-image-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: rgba(5, 5, 5, 0.8);

    border: 1px solid rgba(214, 174, 92, 0.18);

    transition:
        border-color 450ms ease,
        box-shadow 500ms ease,
        transform 500ms ease;
}

.syn-node-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        saturate(0.65)
        brightness(0.55);

    transform: scale(1.01);

    transition:
        transform 800ms cubic-bezier(.22, 1, .36, 1),
        filter 500ms ease;
}

.syn-node-image-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02),
            rgba(0, 0, 0, 0.35)
        );
}


/* ============================================================
   NODE TEXT
   ============================================================ */

.syn-node-meta {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.syn-node-number {
    color: var(--gold);

    font-size: 7px;

    letter-spacing: 0.25em;
}

.syn-node-title {
    color: rgba(238, 232, 220, 0.72);

    font-size: 8px;

    letter-spacing: 0.13em;

    white-space: nowrap;
}


/* ============================================================
   NODE POSITIONS
   ============================================================ */

.syn-node-1 {
    top: 16%;
    left: 7%;
}

.syn-node-2 {
    top: 16%;
    right: 7%;
}

.syn-node-3 {
    bottom: 15%;
    left: 7%;
}

.syn-node-4 {
    bottom: 15%;
    right: 7%;
}


/* ============================================================
   NODE HOVER
   ============================================================ */

.syn-node:hover {
    opacity: 1;

    transform: translateY(-5px);
}

.syn-node:hover .syn-node-image-wrap {
    border-color:
        rgba(214, 174, 92, 0.48);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.4);
}

.syn-node:hover .syn-node-image {
    filter:
        saturate(0.95)
        brightness(0.85);

    transform: scale(1.06);
}


/* ============================================================
   ACTIVE NODE
   ============================================================ */

.syn-node.is-active {
    opacity: 1;

    transform: translateY(-3px);
}

.syn-node.is-active .syn-node-image-wrap {
    border-color:
        rgba(214, 174, 92, 0.65);

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.45),
        0 0 35px rgba(214, 174, 92, 0.07);
}

.syn-node.is-active .syn-node-image {
    filter:
        saturate(1)
        brightness(0.9);
}


/* ============================================================
   CENTRAL FEATURE
   ============================================================ */

.syn-feature {
    position: absolute;

    top: 50%;
    left: 50%;

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

    z-index: 15;

    width: min(780px, 66%);

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 50px;
}


/* ============================================================
   CENTRAL IMAGE
   ============================================================ */

.syn-feature-image-wrap {
    position: relative;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #080706;

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 450ms ease,
        transform 450ms cubic-bezier(.22, 1, .36, 1);
}

.syn-feature-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    filter:
        saturate(0.82)
        contrast(1.04);

    transition:
        transform 1.2s cubic-bezier(.22, 1, .36, 1);
}

.syn-feature:hover .syn-feature-image {
    transform: scale(1.035);
}

.syn-feature-image-glow {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            rgba(214, 174, 92, 0.05),
            transparent 65%
        );
}

.syn-feature-number {
    position: absolute;

    left: 20px;
    bottom: 17px;

    color: rgba(238, 232, 220, 0.65);

    font-size: 9px;

    letter-spacing: 0.25em;
}


/* ============================================================
   CENTRAL TEXT
   ============================================================ */

.syn-feature-content {
    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 450ms ease,
        transform 450ms cubic-bezier(.22, 1, .36, 1);
}

.syn-feature-category {
    display: block;

    margin-bottom: 18px;

    color: var(--gold);

    font-size: 8px;

    letter-spacing: 0.3em;
}

.syn-feature-title {
    font-family: var(--serif);

    font-size: clamp(36px, 4vw, 64px);

    font-weight: 300;

    line-height: 0.9;

    letter-spacing: -0.035em;
}

.syn-feature-description {
    max-width: 390px;

    margin-top: 26px;

    color: var(--muted);

    font-size: 12px;

    line-height: 1.8;
}

.syn-feature-link {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 32px;

    color: var(--ivory);

    font-size: 8px;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    transition: color 300ms ease;
}

.syn-feature-link span:last-child {
    color: var(--gold);

    font-size: 14px;

    transition:
        transform 400ms cubic-bezier(.22, 1, .36, 1);
}

.syn-feature-link:hover {
    color: var(--gold);
}

.syn-feature-link:hover span:last-child {
    transform: translateX(7px);
}


/* ============================================================
   CAROUSEL TRANSITION
   ============================================================ */

.syn-feature-content.is-changing,
.syn-feature-image-wrap.is-changing {
    opacity: 0;

    transform: translateY(8px);
}


/* ============================================================
   ARROWS
   ============================================================ */

.syn-work-nav {
    position: absolute;

    top: 50%;

    width: 54px;
    height: 54px;

    display: flex;

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

    padding: 0;

    border:
        1px solid
        rgba(214, 174, 92, 0.35);

    border-radius: 50%;

    background:
        rgba(8, 7, 5, 0.42);

    color:
        rgba(235, 220, 190, 0.9);

    cursor: pointer;

    font-size: 18px;

    backdrop-filter: blur(10px);

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

    z-index: 25;

    transition:
        transform 400ms cubic-bezier(.22, 1, .36, 1),
        border-color 400ms ease,
        background-color 400ms ease,
        color 400ms ease;
}

.syn-work-nav-prev {
    left: 1%;

    transform:
        translateY(-50%);
}

.syn-work-nav-next {
    right: 1%;

    transform:
        translateY(-50%);
}

.syn-work-nav-prev:hover {
    transform:
        translateY(-50%)
        translateX(-4px);

    border-color: var(--gold);

    color: var(--gold);
}

.syn-work-nav-next:hover {
    transform:
        translateY(-50%)
        translateX(4px);

    border-color: var(--gold);

    color: var(--gold);
}


/* ============================================================
   FOOTER
   ============================================================ */

.syn-works-footer {
    position: relative;

    z-index: 10;

    width: min(1200px, 100%);

    margin: 55px auto 0;

    display: flex;

    align-items: center;

    gap: 18px;

    color: var(--faint);

    font-size: 7px;

    letter-spacing: 0.25em;
}

.syn-footer-line {
    width: 60px;

    height: 1px;

    background: var(--line);
}


/* ============================================================
   PURPOSE
   ============================================================ */

.syn-connections {
    position: relative;

    width: 100%;

    min-height: 100vh;

    padding:
        clamp(100px, 13vw, 190px)
        clamp(24px, 8vw, 150px);

    z-index: 5;

    color: var(--ivory);

    background:
        linear-gradient(
            180deg,
            rgba(3, 3, 3, 0.30),
            rgba(3, 3, 3, 0.58)
        );
}

.syn-connections-inner {
    max-width: 1000px;

    margin: 0 auto;
}

.syn-connections h2 {
    max-width: 900px;

    font-family: var(--serif);

    font-size: clamp(65px, 9vw, 145px);

    font-weight: 300;

    line-height: 0.82;

    letter-spacing: -0.05em;
}

.syn-connections h2 em {
    color: var(--gold-soft);

    font-weight: 300;
}

.syn-connections p {
    max-width: 580px;

    margin-top: 55px;

    color: var(--muted);

    font-size: 13px;

    font-weight: 300;

    line-height: 2;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .syn-nav {
        padding:
            24px 28px;
    }

    .syn-logo {
        width: 95px;
    }

    .syn-hero-content {
        width: calc(100% - 48px);

        margin-left: 24px;
    }

    .syn-title {
        font-size:
            clamp(58px, 12vw, 90px);
    }

    .syn-origin {
        display: none;
    }

    .syn-constellation {
        min-height: 900px;
    }

    .syn-feature {
        width: 62%;

        grid-template-columns: 1fr;

        gap: 28px;
    }

    .syn-feature-content {
        text-align: center;
    }

    .syn-feature-description {
        margin-left: auto;
        margin-right: auto;
    }

    .syn-feature-link {
        justify-content: center;
    }

    .syn-node {
        width: 105px;
    }

    .syn-node-title {
        font-size: 7px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .syn-nav {
        padding:
            20px;
    }

    .syn-logo {
        width: 88px;
    }

    .syn-hero-content {
        width: calc(100% - 40px);

        margin-left: 20px;
    }

    .syn-title {
        font-size:
            clamp(49px, 13vw, 75px);

        line-height: 0.82;
    }

    .title-italic {
        padding-left: 24px;
    }

    .syn-description {
        width: 92%;

        font-size: 11px;
    }

    .syn-works {
        padding-left: 18px;
        padding-right: 18px;
    }

    .syn-works-title {
        font-size: 62px;
    }

    .syn-constellation {
        min-height: 780px;
    }

    .syn-feature {
        width: 58%;
    }

    .syn-feature-title {
        font-size: 31px;
    }

    .syn-feature-description {
        font-size: 10px;
    }

    .syn-work-nav {
        width: 44px;
        height: 44px;

        font-size: 15px;
    }

    .syn-node {
        width: 75px;
    }

    .syn-node-image-wrap {
        aspect-ratio: 1 / 1;
    }

    .syn-node-title {
        display: none;
    }

    .syn-node-number {
        font-size: 6px;
    }

    .syn-connections {
        padding:
            100px 24px;
    }

    .syn-connections h2 {
        font-size: 70px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    html {
        scroll-behavior: auto;
    }

    .syn-line {
        animation: none;
    }

    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms !important;
    }

}

/* ============================================================
   DOAH / SYNAPTOGENESIS
   RESPONSIVE EDITORIAL SYSTEM
   TABLET → MOBILE
   ============================================================ */


/* ============================================================
   LARGE TABLET / SMALL LAPTOP
   ============================================================ */

@media (max-width: 1100px) {

    .syn-hero-content {
        width: min(760px, 82vw);

        margin-left: auto;
        margin-right: auto;

        text-align: center;

        align-items: center;
    }


    .syn-title {
        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }


    .syn-description {
        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }


    .syn-enter {
        margin-left: auto;
        margin-right: auto;
    }


    /* --------------------------------------------------------
       HERO NAV
    -------------------------------------------------------- */

    .syn-nav {
        padding-left: 35px;
        padding-right: 35px;
    }


    .syn-logo {
        width: 105px;
    }


    /* --------------------------------------------------------
       ORIGIN / SIDE TEXT
    -------------------------------------------------------- */

    .syn-origin {
        left: 50%;

        transform:
            translateX(-50%);

        justify-content: center;
    }


    /* --------------------------------------------------------
       CONNECTIONS
    -------------------------------------------------------- */

    .syn-connections {
        padding-left: 50px;
        padding-right: 50px;

        text-align: center;
    }


    /* --------------------------------------------------------
       WORKS
    -------------------------------------------------------- */

    .syn-works {
        padding-left: 45px;
        padding-right: 45px;
    }


    .syn-works-header {
        width: min(700px, 90vw);

        margin-left: auto;
        margin-right: auto;

        text-align: center;
    }


    .syn-works-intro {
        margin-left: auto;
        margin-right: auto;
    }


    /* --------------------------------------------------------
       CONSTELLATION
    -------------------------------------------------------- */

    .syn-constellation {
        width: min(900px, 94vw);

        margin-left: auto;
        margin-right: auto;
    }


    .syn-feature {
        width: min(720px, 82vw);

        margin-left: auto;
        margin-right: auto;
    }


    .syn-feature-content {
        text-align: center;
    }


    .syn-feature-description {
        margin-left: auto;
        margin-right: auto;

        max-width: 480px;
    }


    .syn-feature-link {
        justify-content: center;
    }


    /* --------------------------------------------------------
       NAVIGATION ARROWS
    -------------------------------------------------------- */

    .syn-work-nav-prev {
        left: 0;
    }

    .syn-work-nav-next {
        right: 0;
    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    /* --------------------------------------------------------
       PAGE
    -------------------------------------------------------- */

    .syn-page {
        width: 100%;

        overflow-x: hidden;
    }


    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .syn-hero {
        min-height: 100svh;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    .syn-hero-content {
        width: min(720px, 88vw);

        padding:
            130px 0
            100px;

        margin:
            0 auto;

        text-align: center;

        align-items: center;
    }


    .syn-eyebrow {
        text-align: center;
    }


    .syn-title {
        width: 100%;

        margin:
            0 auto;

        text-align: center;
    }


    .syn-description {
        width: min(520px, 80vw);

        margin:
            28px auto 0;

        text-align: center;
    }


    .syn-enter {
        margin:
            38px auto 0;
    }


    /* --------------------------------------------------------
       TOP NAV
    -------------------------------------------------------- */

    .syn-nav {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;

        padding:
            25px 30px;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    .syn-logo-link {
        margin: 0 auto;
    }


    .syn-logo {
        width: 100px;

        height: auto;
    }


    .syn-back {
        position: absolute;

        right: 30px;
    }


    /* --------------------------------------------------------
       ORIGIN
    -------------------------------------------------------- */

    .syn-origin {
        position: absolute;

        left: 50%;

        bottom: 75px;

        transform:
            translateX(-50%);

        width: max-content;

        margin: 0 auto;

        justify-content: center;
    }


    /* --------------------------------------------------------
       SCROLL INDICATOR
    -------------------------------------------------------- */

    .syn-scroll {
        left: 50%;

        transform:
            translateX(-50%);

        right: auto;
    }


    /* --------------------------------------------------------
       WORKS SECTION
    -------------------------------------------------------- */

    .syn-works {

        min-height: auto;

        padding:
            120px 30px
            90px;

        text-align: center;
    }


    .syn-works-header {

        width: min(680px, 90vw);

        margin:
            0 auto 70px;

        text-align: center;
    }


    .syn-works-title {

        text-align: center;
    }


    .syn-works-intro {

        width: min(520px, 85vw);

        margin:
            25px auto 0;

        text-align: center;
    }


    /* --------------------------------------------------------
       CONSTELLATION
    -------------------------------------------------------- */

    .syn-constellation {

        width: 100%;

        max-width: 760px;

        min-height: 760px;

        margin:
            0 auto;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    /* --------------------------------------------------------
       NETWORK
    -------------------------------------------------------- */

    .syn-network {

        opacity: 0.6;
    }


    /* --------------------------------------------------------
       NODES
    -------------------------------------------------------- */

    .syn-node {

        width: 150px;

        text-align: center;
    }


    .syn-node-title {

        white-space: normal;

        line-height: 1.5;

        text-align: center;
    }


    .syn-node-1 {
        left: 7%;
        top: 22%;
    }

    .syn-node-2 {
        right: 7%;
        top: 22%;
    }

    .syn-node-3 {
        left: 7%;
        bottom: 20%;
    }

    .syn-node-4 {
        right: 7%;
        bottom: 20%;
    }


    /* --------------------------------------------------------
       CENTRAL FEATURE
    -------------------------------------------------------- */

    .syn-feature {

        width:
            min(650px, 72vw);

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        margin:
            0 auto;

        text-align: center;
    }


    .syn-feature-image-wrap {

        width:
            min(390px, 52vw);

        margin:
            0 auto;
    }


    .syn-feature-content {

        width:
            min(540px, 75vw);

        margin:
            45px auto 0;

        text-align: center;
    }


    .syn-feature-category {

        text-align: center;
    }


    .syn-feature-title {

        text-align: center;
    }


    .syn-feature-description {

        margin:
            24px auto 0;

        text-align: center;
    }


    .syn-feature-link {

        display: flex;

        justify-content: center;

        margin:
            30px auto 0;
    }


    /* --------------------------------------------------------
       ARROWS
    -------------------------------------------------------- */

    .syn-work-nav {

        width: 48px;
        height: 48px;
    }


    .syn-work-nav-prev {
        left: 1%;
    }

    .syn-work-nav-next {
        right: 1%;
    }


    /* --------------------------------------------------------
       FOOTER
    -------------------------------------------------------- */

    .syn-works-footer {

        justify-content: center;

        text-align: center;

        margin-top: 70px;
    }

}


/* ============================================================
   SMALL TABLET / LARGE PHONE
   ============================================================ */

@media (max-width: 700px) {

    /* --------------------------------------------------------
       HERO
    -------------------------------------------------------- */

    .syn-hero-content {

        width: 90vw;

        padding:
            120px 0
            120px;
    }


    .syn-title {

        font-size:
            clamp(48px, 12vw, 82px);

        line-height:
            0.82;

        letter-spacing:
            -0.045em;
    }


    .syn-description {

        width:
            min(430px, 84vw);

        font-size:
            11px;

        line-height:
            1.8;
    }


    /* --------------------------------------------------------
       NAV
    -------------------------------------------------------- */

    .syn-nav {

        padding:
            20px;
    }


    .syn-logo {

        width: 88px;
    }


    .syn-back {

        right: 20px;

        font-size: 7px;
    }


    /* --------------------------------------------------------
       ORIGIN
    -------------------------------------------------------- */

    .syn-origin {

        display: none;
    }


    /* --------------------------------------------------------
       WORKS
    -------------------------------------------------------- */

    .syn-works {

        padding:
            100px 20px
            70px;
    }


    .syn-works-header {

        width: 100%;

        margin-bottom: 55px;
    }


    .syn-works-title {

        font-size:
            clamp(48px, 13vw, 75px);

        line-height:
            0.9;
    }


    .syn-works-intro {

        width:
            min(420px, 88vw);

        font-size: 11px;

        line-height: 1.8;
    }


    /* --------------------------------------------------------
       CONSTELLATION
    -------------------------------------------------------- */

    .syn-constellation {

        width: 100%;

        min-height: 820px;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;
    }


    .syn-network {

        display: none;
    }


    /* --------------------------------------------------------
       NODES BECOME AROUND-THE-CENTER SYSTEM
    -------------------------------------------------------- */

    .syn-node {

        width: 130px;

        padding: 8px;

        text-align: center;

        z-index: 10;
    }


    .syn-node-1,
    .syn-node-2,
    .syn-node-3,
    .syn-node-4 {

        position: absolute;

        left: 50%;

        right: auto;

        transform:
            translateX(-50%);
    }


    .syn-node-1 {
        top: 4%;
    }

    .syn-node-2 {
        top: 18%;
    }

    .syn-node-3 {
        bottom: 18%;
    }

    .syn-node-4 {
        bottom: 4%;
    }


    .syn-node.is-active {

        transform:
            translateX(-50%)
            scale(1.04);
    }


    /* --------------------------------------------------------
       CENTRAL FEATURE
    -------------------------------------------------------- */

    .syn-feature {

        width:
            min(460px, 88vw);

        margin:
            0 auto;

        z-index: 15;
    }


    .syn-feature-image-wrap {

        width:
            min(330px, 72vw);

        aspect-ratio:
            1 / 1;

        margin:
            0 auto;
    }


    .syn-feature-content {

        width: 100%;

        margin-top: 35px;

        text-align: center;
    }


    .syn-feature-title {

        font-size:
            clamp(38px, 10vw, 58px);

        line-height:
            0.88;

        text-align: center;
    }


    .syn-feature-description {

        width:
            min(370px, 82vw);

        margin:
            22px auto 0;

        font-size: 11px;

        line-height: 1.8;

        text-align: center;
    }


    .syn-feature-link {

        margin-top: 28px;

        justify-content: center;
    }


    /* --------------------------------------------------------
       CAROUSEL ARROWS
    -------------------------------------------------------- */

    .syn-work-nav {

        width: 42px;
        height: 42px;

        font-size: 15px;
    }


    .syn-work-nav-prev {
        left: 2px;

        top: 50%;
    }

    .syn-work-nav-next {
        right: 2px;

        top: 50%;
    }


    /* --------------------------------------------------------
       FOOTER
    -------------------------------------------------------- */

    .syn-works-footer {

        margin-top: 55px;

        justify-content: center;

        gap: 15px;

        font-size: 7px;
    }


    /* --------------------------------------------------------
       CONNECTIONS
    -------------------------------------------------------- */

    .syn-connections {

        min-height: auto;

        padding:
            100px 24px;

        text-align: center;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .syn-title {

        font-size:
            clamp(43px, 13vw, 65px);

        line-height:
            0.84;
    }


    .syn-eyebrow {

        font-size: 7px;

        letter-spacing:
            0.28em;
    }


    .syn-description {

        font-size: 10px;

        line-height: 1.75;
    }


    .syn-enter {

        font-size: 7px;

        letter-spacing:
            0.22em;
    }


    .syn-works {

        padding:
            85px 18px
            60px;
    }


    .syn-works-title {

        font-size:
            clamp(43px, 14vw, 65px);
    }


    .syn-constellation {

        min-height: 760px;
    }


    .syn-node {

        width: 115px;
    }


    .syn-node-number {

        font-size: 7px;
    }


    .syn-node-title {

        font-size: 7px;

        letter-spacing:
            0.14em;
    }


    .syn-feature-image-wrap {

        width:
            min(290px, 70vw);
    }


    .syn-feature-title {

        font-size:
            clamp(34px, 10vw, 48px);
    }


    .syn-feature-description {

        font-size: 10px;

        line-height: 1.8;
    }


    .syn-work-nav {

        width: 38px;
        height: 38px;
    }


    .syn-work-nav-prev {
        left: -2px;
    }

    .syn-work-nav-next {
        right: -2px;
    }

}

/* ============================================================
   HIDE CONSTELLATION NODES
   TABLET + MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .syn-node {
        display: none !important;
    }

    .syn-network {
        display: none;
    }

}

/* ============================================================
   TABLET + MOBILE
   CENTER PURPOSE DESCRIPTION
   ============================================================ */

@media (max-width: 900px) {

    .syn-purpose p,
    .syn-purpose-description,
    .syn-connections p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

}

/* ============================================================
   MOBILE / SMALL SCREEN
   PURPOSE TITLE SCALE
   ============================================================ */

@media (max-width: 480px) {

    .syn-connections .syn-connections-title,
    .syn-connections h2 {
        font-size: clamp(38px, 10.5vw, 52px);
        line-height: 0.92;
        letter-spacing: -0.035em;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

}