/*
Theme Name: Drop In Yoga
Theme URI: https://dropinyoga.ca
Author: Calvin Pert
Description: Custom theme for Drop In Yoga.
Version: 0.1
*/

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: #f7f7f4;
    color: #111;
    font-family: Arial, Helvetica, sans-serif;
}

.diy-landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.diy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 6vw;
}

.diy-logo {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.diy-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    max-width: 1400px;
    width: 100%;
    margin: auto;
    padding: 40px 6vw 80px;
    gap: 6vw;
}

.diy-copy h1 {
    margin: 0 0 25px;
    font-size: clamp(3.5rem, 8vw, 8rem);
    font-weight: 400;
    line-height: .9;
    letter-spacing: -.055em;
}

.diy-copy .tagline {
    font-size: clamp(1.25rem, 2vw, 2rem);
    line-height: 1.4;
    max-width: 600px;
}

.diy-copy .anywhere {
    margin-top: 40px;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
}

/*
 * Temporary visual until we create the final artwork.
 */
.diy-visual {
    position: relative;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.yoga-person {
    font-size: clamp(7rem, 15vw, 13rem);
    filter: grayscale(1);
    z-index: 2;
}

.word {
    position: absolute;
    color: #444;
    font-size: clamp(.75rem, 1.2vw, 1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.w1  { top: 9%;  left: 37%; }
.w2  { top: 18%; right: 9%; }
.w3  { top: 29%; left: 5%; }
.w4  { top: 38%; right: 1%; }
.w5  { top: 49%; left: 1%; }
.w6  { top: 58%; right: 5%; }
.w7  { top: 69%; left: 8%; }
.w8  { top: 78%; right: 14%; }
.w9  { top: 88%; left: 35%; }
.w10 { top: 14%; left: 8%; }
.w11 { top: 84%; left: 7%; }
.w12 { top: 7%; right: 23%; }

.diy-footer {
    padding: 25px 6vw;
    font-size: .75rem;
    letter-spacing: .1em;
}

@media (max-width: 750px) {

    .diy-main {
        grid-template-columns: 1fr;
        padding-top: 25px;
    }

    .diy-visual {
        min-height: 450px;
    }

    .diy-copy h1 {
        font-size: clamp(4rem, 19vw, 7rem);
    }
}