/* ============================================================
   WINDERVALE — CONTACT
   DARK FIELD / CORRESPONDENCE / STRANGE EDITORIAL
   ============================================================ */

@import url(
    'https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;500;600;700;800&display=swap'
);


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

* {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;

    background: #090908;

    scroll-behavior: smooth;
}


body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 70% 30%,
            rgba(89, 48, 44, 0.09),
            transparent 35%
        ),
        #090908;

    color: #e9e6df;

    font-family:
        "DM Mono",
        monospace;

    overflow-x: hidden;
}


/* ============================================================
   GRAIN
   ============================================================ */

#grain {
    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 999;

    opacity: 0.055;

    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='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

    mix-blend-mode: screen;
}


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

.site-header {
    height: 126px;

    padding:
        54px
        62px
        28px;

    border-bottom:
        1px solid
        rgba(233, 230, 223, 0.16);

    display: flex;

    align-items: flex-start;

    position: relative;

    z-index: 10;
}


.site-mark {
    width: 31%;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.site-name {
    font-family:
        "DM Mono",
        monospace;

    font-size: 17px;

    letter-spacing: 0.04em;

    color: #eeeae3;
}


.site-section {
    font-family:
        "DM Mono",
        monospace;

    font-size: 13px;

    color: #aaa69e;

    letter-spacing: 0.04em;
}


.main-nav {
    flex: 1;

    display: flex;

    justify-content: center;

    gap: 48px;
}


.main-nav a {
    color: #d7d2ca;

    text-decoration: none;

    font-family:
        "DM Mono",
        monospace;

    font-size: 13px;

    position: relative;

    transition:
        color 180ms ease;
}


.main-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -7px;

    height: 1px;

    background: #552e48;

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform 180ms ease;
}


.main-nav a:hover {
    color: #a878a0;
}


.main-nav a:hover::after {
    transform:
        scaleX(1);
}


.nav-symbol {
    width: 31%;

    text-align: right;

    font-size: 21px;

    line-height: 1;

    transform:
        rotate(12deg);
}


/* ============================================================
   MAIN
   ============================================================ */

.contact-field {
    width: 100%;

    min-height:
        calc(100vh - 126px);

    position: relative;

    padding:
        0
        62px
        45px;
}


/* ============================================================
   CONSTELLATIONS
   ============================================================ */

.constellation {
    position: absolute;

    display: flex;

    flex-direction: column;

    gap: 36px;

    pointer-events: none;

    opacity: 0.75;
}


.constellation span {
    width: 3px;
    height: 3px;

    background: #d8d4cd;

    border-radius: 50%;

    display: block;
}


.constellation-one {
    top: 84px;

    right: 62px;
}


.constellation-two {
    top: 430px;

    right: 65px;

    gap: 46px;
}


/* ============================================================
   INTRO
   ============================================================ */

.contact-intro {
    min-height: 560px;

    border-bottom:
        1px solid
        rgba(233, 230, 223, 0.17);

    display: grid;

    grid-template-columns:
        31%
        1fr
        22%;

    position: relative;
}


.intro-index {
    padding-top: 48px;

    font-size: 13px;

    color: #aaa69e;
}


.intro-copy {
    padding-top: 92px;

    position: relative;
}


.eyebrow {
    font-size: 11px;

    letter-spacing: 0.16em;

    color: #8c8780;

    margin-bottom: 34px;
}


/* ============================================================
   BIG TYPE
   ============================================================ */

.intro-copy h1 {
    margin: 0;

    font-family:
        "Syne",
        sans-serif;

    font-size:
        clamp(
            92px,
            11vw,
            178px
        );

    font-weight: 600;

    line-height: 0.78;

    letter-spacing: -0.075em;

    text-transform: lowercase;

    color: #eeeae3;

    transform:
        translateX(-7px);
}


.intro-copy h1::first-letter {
    color: #6d3a5c;
}


.intro-copy p {
    max-width: 520px;

    margin:
        65px
        0
        0
        8px;

    font-size: 15px;

    line-height: 1.8;

    color: #aaa69e;
}


.side-note {
    align-self: center;

    justify-self: end;

    margin-top: 130px;

    font-size: 11px;

    color: #7d7871;

    transform:
        rotate(-90deg)
        translateY(45px);

    transform-origin: center;
}


/* ============================================================
   FORM ZONE
   ============================================================ */

.form-zone {
    display: grid;

    grid-template-columns:
        31%
        1fr;

    padding-top: 72px;

    padding-bottom: 100px;
}


.form-label {
    display: flex;

    flex-direction: column;

    gap: 8px;

    font-size: 11px;

    color: #817c75;

    letter-spacing: 0.08em;
}


.form-label span:first-child {
    color: #864873;
}


/* ============================================================
   FORM
   ============================================================ */

.contact-form {
    width: min(
        720px,
        100%
    );
}


/* ============================================================
   FIELD
   ============================================================ */

.field {
    position: relative;

    margin-bottom: 48px;
}


.field label {
    display: block;

    margin-bottom: 13px;

    font-family:
        "Syne",
        sans-serif;

    font-size: 17px;

    font-weight: 600;

    color: #e6e1d9;

    letter-spacing: -0.025em;
}


.field label::before {
    content: "↳";

    display: inline-block;

    margin-right: 8px;

    color: #6d3a5c;

    font-family:
        "DM Mono",
        monospace;

    font-size: 13px;
}


/* ============================================================
   INPUTS
   ============================================================ */

.field input,
.field select,
.field textarea {
    width: 100%;

    border: none;

    border-bottom:
        1px solid
        rgba(233, 230, 223, 0.27);

    outline: none;

    background: transparent;

    color: #e9e5de;

    font-family:
        "DM Mono",
        monospace;

    font-size: 15px;

    font-weight: 300;

    padding:
        12px
        0
        15px;

    border-radius: 0;

    transition:
        border-color 180ms ease,
        padding-left 180ms ease;
}


.field input::placeholder,
.field textarea::placeholder {
    color: #5f5b56;

    opacity: 1;
}


.field input:focus,
.field select:focus,
.field textarea:focus {
    border-bottom-color: #6d3a5c;

    padding-left: 9px;
}


/* ============================================================
   SELECT
   ============================================================ */

.field select {
    cursor: pointer;

    appearance: none;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            #8e8981 50%
        ),
        linear-gradient(
            135deg,
            #8e8981 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 7px) 50%,
        calc(100% - 2px) 50%;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat: no-repeat;
}


.field select option {
    background: #11110f;

    color: #eee9df;
}


/* ============================================================
   TEXTAREA
   ============================================================ */

.field-message {
    margin-top: 12px;
}


.field textarea {
    resize: vertical;

    min-height: 180px;

    line-height: 1.65;
}


/* ============================================================
   SUBMIT
   ============================================================ */

.submit-row {
    margin-top: 70px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;
}


.submit-note {
    font-size: 10px;

    color: #706b65;

    transform:
        rotate(-2deg);
}


.submit-row button {
    border:
        1px solid
        #716b64;

    background:
        transparent;

    color: #eee9df;

    padding:
        18px
        23px;

    min-width: 155px;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    font-family:
        "Syne",
        sans-serif;

    font-size: 15px;

    font-weight: 600;

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


.submit-row button:hover {
    background: #4a2540;

    border-color: #4a2540;

    color: #fff5ef;

    transform:
        translateY(-4px)
        rotate(-1deg);
}


.arrow {
    font-family:
        "DM Mono",
        monospace;

    font-size: 18px;
}


/* ============================================================
   BOTTOM
   ============================================================ */

.contact-bottom {
    border-top:
        1px solid
        rgba(233, 230, 223, 0.15);

    padding-top: 18px;

    display: flex;

    justify-content: space-between;

    color: #5e5953;

    font-size: 9px;

    letter-spacing: 0.12em;
}


/* ============================================================
   SUCCESS
   ============================================================ */

.success-overlay {
    position: fixed;

    inset: 0;

    z-index: 500;

    background:
        rgba(7, 7, 6, 0.93);

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 250ms ease;
}


.success-overlay.visible {
    opacity: 1;

    pointer-events: auto;
}


.success-box {
    width: min(
        520px,
        calc(100vw - 40px)
    );

    min-height: 360px;

    border:
        1px solid
        #69635d;

    padding: 48px;

    position: relative;

    background: #10100e;

    transform:
        rotate(-1deg);
}


.success-number {
    font-size: 11px;

    color: #6d3a5c;
}


.success-symbol {
    position: absolute;

    top: 42px;
    right: 45px;

    font-size: 28px;

    transform:
        rotate(15deg);

    color: #6d3a5c;
}


.success-box h2 {
    margin:
        90px
        0
        15px;

    font-family:
        "Syne",
        sans-serif;

    font-size: 64px;

    font-weight: 600;

    line-height: 0.9;

    letter-spacing: -0.06em;
}


.success-box p {
    margin: 0;

    color: #8c8780;

    font-size: 13px;

    line-height: 1.6;
}


.success-box button {
    margin-top: 40px;

    border: none;

    background: none;

    color: #d8d2ca;

    font-family:
        "DM Mono",
        monospace;

    font-size: 11px;

    cursor: pointer;

    padding: 0;

    transition:
        color 180ms ease;
}


.success-box button:hover {
    color: #8a4a75;
}


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

@media (max-width: 900px) {

    .site-header {
        height: auto;

        min-height: 100px;

        padding:
            25px
            20px
            22px;

        flex-wrap: wrap;

        gap: 25px;
    }


    .site-mark {
        width: 50%;
    }


    .site-name {
        font-size: 15px;
    }


    .main-nav {
        order: 3;

        width: 100%;

        flex: none;

        justify-content: flex-start;

        gap: 20px;

        overflow-x: auto;

        padding-bottom: 4px;
    }


    .main-nav a {
        white-space: nowrap;

        font-size: 10px;
    }


    .nav-symbol {
        width: auto;

        margin-left: auto;
    }


    .contact-field {
        padding:
            0
            20px
            30px;
    }


    .contact-intro {
        min-height: 570px;

        display: block;

        padding-bottom: 60px;
    }


    .intro-index {
        padding-top: 25px;
    }


    .intro-copy {
        padding-top: 65px;
    }


    .eyebrow {
        font-size: 9px;

        margin-bottom: 28px;
    }


    .intro-copy h1 {
        font-size:
            clamp(
                70px,
                19vw,
                115px
            );

        line-height: 0.82;
    }


    .intro-copy p {
        margin-top: 45px;

        max-width: 360px;

        font-size: 13px;

        line-height: 1.7;
    }


    .side-note {
        display: none;
    }


    .constellation-one {
        right: 23px;

        top: 75px;
    }


    .constellation-two {
        display: none;
    }


    .form-zone {
        display: block;

        padding-top: 45px;
    }


    .form-label {
        margin-bottom: 55px;

        flex-direction: row;

        gap: 18px;
    }


    .field {
        margin-bottom: 38px;
    }


    .field label {
        font-size: 15px;
    }


    .field input,
    .field select,
    .field textarea {
        font-size: 13px;
    }


    .submit-row {
        margin-top: 55px;

        gap: 25px;

        align-items: center;
    }


    .submit-row button {
        min-width: 135px;

        padding:
            15px
            17px;

        font-size: 13px;
    }


    .submit-note {
        font-size: 8px;
    }


    .contact-bottom {
        font-size: 7px;
    }


    .success-box {
        padding: 32px;

        min-height: 330px;
    }


    .success-box h2 {
        font-size: 52px;
    }

}