/* ============================================================
   WINDERVALE HOMEPAGE
   EDITORIAL / DRAWN / STRANGE / ARCHIVE
   ============================================================ */

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    background: #11110f;
}

body {
    margin: 0;
    padding: 0;
    background: #11110f;
    color: #eee9df;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}


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

#canvas {
    width: 100%;
    min-height: 100vh;

    display: grid;
    grid-template-columns: 20% minmax(0, 60%) 20%;

    align-items: start;
    position: relative;
}


/* ============================================================
   SIDE COLUMNS
   ============================================================ */

.side-column {
    min-height: 100vh;
    padding: 24px;

    position: sticky;
    top: 0;

    font-size: 10px;
    line-height: 1.45;

    z-index: 10;
}


/* ============================================================
   LEFT
   ============================================================ */

.left-column {
    border-right: 1px solid #37352f;

    display: flex;
    flex-direction: column;
}


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

.brand-block {
    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 10px;

    margin-bottom: 70px;
}


/* Small clean circle */

.logo-frame {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    position: relative;

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

    margin: 0;
    padding: 0;

    border: none;
    outline: none;
    box-shadow: none;

    border-radius: 50%;

    background: #f5f1e8;

    /*
       IMPORTANT:
       The artwork must NOT be clipped.
       This keeps the lady's hair/body intact.
    */
    overflow: visible;
}


/* Absolutely NO decorative frame */

.logo-frame::before,
.logo-frame::after {
    content: none !important;

    display: none !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* ============================================================
   ORIGINAL LADY LOGO
   ============================================================ */

.wv-logo {
    width: 58px;
    height: 58px;

    display: block;

    position: relative;
    z-index: 2;

    /*
       Keep original artwork proportions.
       DO NOT crop or stretch the lady.
    */
    object-fit: contain;
    object-position: center;

    border: none;
    outline: none;
    box-shadow: none;

    /*
       Do NOT apply another circle to the PNG.
       The logo-frame provides the small circle.
    */
    border-radius: 0;

    background: transparent;

    margin: 0;
    padding: 0;

    flex-shrink: 0;
}


/* ============================================================
   WINDERVALE LABS
   ============================================================ */

.brand-name {
    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    width: 76px;

    margin: 0;
    padding: 0;

    color: #eee9df;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.02;

    letter-spacing: 0;

    text-align: left;

    text-transform: lowercase;

    white-space: normal;
}


/* ============================================================
   LEFT NAV
   ============================================================ */

.simple-nav {
    display: flex;
    flex-direction: column;

    gap: 13px;

    margin-top: auto;
    margin-bottom: auto;
}


.simple-nav a {
    display: flex;

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

    width: 100%;

    color: #eee9df;

    text-decoration: none;

    font-size: 11px;

    padding-bottom: 7px;

    border-bottom: 1px solid transparent;

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


.simple-nav a:hover {
    padding-left: 8px;

    border-bottom-color: #8d4035;

    color: #b86455;
}


.simple-nav a span:last-child {
    font-size: 12px;
}


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

.left-footer {
    display: flex;

    justify-content: space-between;

    color: #77736b;

    font-size: 8px;

    letter-spacing: 0.12em;
}


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

.main-column {
    grid-column: 2;

    min-width: 0;

    padding-bottom: 100px;
}


.column-heading {
    height: 65px;

    padding: 24px;

    display: flex;

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

    color: #aaa59a;

    font-size: 8px;

    letter-spacing: 0.18em;
}


/* ============================================================
   CARDS
   ============================================================ */

.obj {
    position: relative;

    width: calc(100% - 48px);

    margin-left: 24px;
    margin-right: 24px;
    margin-bottom: 28px;

    min-height: 590px;

    padding: 22px;

    border: 1px solid #a8a196;

    background: #e9e4d8;

    color: #151512;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

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


.obj:hover {
    transform: translateY(-5px);

    border-color: #8d4035;
}


/* ============================================================
   CARD CORNER DOT
   ============================================================ */

.obj::before {
    content: "";

    position: absolute;

    top: 20px;
    right: 20px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #8d4035;

    z-index: 5;
}


/* ============================================================
   CARD TOP
   ============================================================ */

.card-top {
    position: relative;

    z-index: 5;

    display: flex;

    justify-content: space-between;

    font-size: 9px;

    letter-spacing: 0.1em;
}


/* ============================================================
   DRAWING AREA
   ============================================================ */

.card-art {
    position: absolute;

    left: 7%;
    right: 7%;

    top: 17%;

    height: 48%;

    display: flex;

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

    pointer-events: none;

    z-index: 1;
}


.card-art svg {
    width: 100%;
    height: 100%;

    overflow: visible;
}


.card-art svg path,
.card-art svg circle,
.card-art svg ellipse {
    fill: none;

    stroke: #171613;

    stroke-width: 2.2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   DRAWING PERSONALITY
   ============================================================ */

.art-library svg circle:last-of-type {
    fill: #171613;
}


.art-grants svg circle:first-of-type {
    fill: #8d4035;

    stroke: #171613;
}


.art-profile svg ellipse:first-of-type {
    fill: #ddd7ca;
}


/* ============================================================
   CARD CONTENT
   ============================================================ */

.card-content {
    position: relative;

    z-index: 4;

    margin-top: auto;
    margin-bottom: 75px;

    max-width: 72%;
}


.card-content h1,
.card-content h2 {
    margin: 0 0 13px 0;

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

    font-weight: 400;

    font-size:
        clamp(52px, 6vw, 94px);

    line-height: 0.84;

    letter-spacing: -0.065em;

    text-transform: lowercase;
}


.card-content p {
    margin: 0;

    max-width: 390px;

    font-size: 12px;

    line-height: 1.45;

    color: #666159;
}


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

.card-bottom {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 20px;

    display: flex;

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

    z-index: 5;

    font-size: 8px;

    letter-spacing: 0.13em;

    color: #69655e;
}


/* ============================================================
   CARD VARIATIONS
   ============================================================ */

.library {
    background: #f0ece3;
}


.grant {
    background: #27251f;

    border-color: #4b4840;

    color: #eee9df;
}


.grant .card-art svg path,
.grant .card-art svg circle,
.grant .card-art svg ellipse {
    stroke: #eee9df;
}


.grant .card-content p,
.grant .card-bottom {
    color: #aaa59a;
}


.projects {
    background: #e2ddd1;
}


.profile {
    background: #d9d3c7;
}


.join {
    background: #934438;

    border-color: #934438;

    color: #f5eee4;
}


.join .card-art svg path,
.join .card-art svg circle,
.join .card-art svg ellipse {
    stroke: #f5eee4;
}


.join .card-content p,
.join .card-bottom {
    color: #ead8cd;
}


/* ============================================================
   RIGHT COLUMN
   ============================================================ */

.right-column {
    grid-column: 3;

    border-left: 1px solid #37352f;

    color: #c6c1b6;

    display: flex;

    flex-direction: column;
}


.right-heading {
    font-size: 9px;

    letter-spacing: 0.14em;

    margin-bottom: 50px;
}


.right-section {
    margin-bottom: 38px;
}


.label {
    margin-bottom: 13px;

    color: #77736b;

    font-size: 8px;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.right-section p {
    max-width: 180px;

    margin: 0;

    font-size: 11px;

    line-height: 1.55;
}


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

.field-list {
    list-style: none;

    margin: 0;
    padding: 0;
}


.field-list li {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;

    line-height: 1.22;

    color: #eee9df;

    transition:
        transform 180ms ease,
        color 180ms ease;
}


.field-list li:hover {
    transform: translateX(7px);

    color: #b86455;
}


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

.right-footer {
    margin-top: auto;

    display: flex;

    flex-direction: column;

    gap: 5px;

    color: #77736b;

    font-size: 8px;

    letter-spacing: 0.12em;
}


/* ============================================================
   CUSTOM CURSOR
   ============================================================ */

#cursor {
    position: fixed;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #eee9df;

    pointer-events: none;

    z-index: 9999;

    mix-blend-mode: difference;
}


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

@media (max-width: 900px) {

    #canvas {
        display: block;
    }


    .side-column {
        position: relative;

        min-height: auto;
    }


    .left-column {
        border-right: none;

        border-bottom: 1px solid #37352f;

        padding: 18px;
    }


    .brand-block {
        display: flex;

        flex-direction: row;

        align-items: center;

        gap: 9px;

        margin-bottom: 30px;
    }


    .logo-frame {
        width: 54px;
        height: 54px;

        flex: 0 0 54px;
    }


    .wv-logo {
        width: 54px;
        height: 54px;
    }


    .brand-name {
        width: 72px;

        font-size: 11px;

        line-height: 1.02;
    }


    .simple-nav {
        margin: 20px 0;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 12px;
    }


    .left-footer {
        margin-top: 20px;
    }


    .main-column {
        padding-bottom: 40px;
    }


    .column-heading {
        padding: 18px;

        height: 55px;
    }


    .obj {
        width: calc(100% - 28px);

        margin-left: 14px;
        margin-right: 14px;

        min-height: 500px;

        margin-bottom: 18px;
    }


    .card-content {
        max-width: 90%;

        margin-bottom: 70px;
    }


    .card-content h1,
    .card-content h2 {
        font-size: 55px;
    }


    .card-art {
        top: 18%;

        height: 43%;

        left: 5%;
        right: 5%;
    }


    .right-column {
        border-left: none;

        border-top: 1px solid #37352f;

        min-height: auto;

        padding: 30px 18px;
    }


    .right-heading {
        margin-bottom: 30px;
    }


    .right-footer {
        margin-top: 30px;
    }
}