:root{
    /* screen - light mode (default) */
    --earthlings-1: #d48433;
    --earthlings-2: #87b144;
    --earthlings-3: #008f7d;
    --earthlings-4: #05598f;
    --earthlings-5: #6d2667;
    --earthlings-6: #bd2a45;
    --moons-apple: #529c43;
    --moons-blue-heaven: #0075a9;
    --moons-blueberry: #173b70;
    --moons-cherry: #bd2a33;
    --moons-grape: #472164;
    --moons-lime: #bfc943;
    --moons-mint: #008d9d;
    --moons-orange: #c75a28;
    --moons-pineapple: #e3b239;
    --moons-plum: #932267;
    --moons-strawberry: #bc2556;
    --moons-watermelon: #008b5d;
    --primary-background: #f5f3ee;
    --primary-blue: #202163;
    --primary-cyan: #0094c4;
    --primary-green: #008a40;
    --primary-ink: #191817;
    --primary-magenta: #bc236b;
    --primary-red: #bd2c23;
    --primary-yellow: #f5e64c;

    /* eye colors - whites stay light, pupils stay dark */
    --eye-white: #f5f3ee;
    --eye-pupil: #191817;

    /* modular scale */
    --ratio: 1.61803398875;
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 1rem;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
}

/* fonts */
@font-face {
    font-family: 'AudreyHand';
    src: url("fonts/AudreyHand-Regular.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AudreyHand';
    src: url("fonts/AudreyHand-Bold.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
}

/* base styles */
* {
    box-sizing: border-box;
    color: var(--primary-ink);
    margin: 0;
    padding: 0;
    font-family: 'AudreyHand', sans-serif;
    text-transform: uppercase;
}

body {
    background: var(--primary-background);
    line-height: var(--ratio);
}

/* typography */
h1 {
    font-size: var(--s2);
    font-weight: bold;
}

h2 {
    font-size: var(--s1);
    font-weight: bold;
}

h3 {
    font-size: var(--s0);
    font-weight: bold;
}

.subheading {
    font-size: var(--s-1);
    font-weight: normal;
}

/* links and buttons */
a {
    color: var(--primary-blue);
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    background-color: var(--primary-yellow);
}

button {
    background-color: var(--primary-background);
}

button:hover {
    background-color: var(--primary-yellow);
}

/* mobile header */
.mobile-header {
    display: none;
    position: fixed;
    z-index: 1001;
    width: 100vw;
    height: fit-content;
    border-top: 1px solid var(--primary-ink);
    border-bottom: 1px solid var(--primary-ink);
    background: var(--primary-background);
}

.mobile-header a {
    padding: var(--s0);
    display: block;
    width: 100%;
    color: var(--primary-ink);
}

.hamburger {
    cursor: pointer;
    aspect-ratio: 1;
    border: none;
    background: transparent;
    border-right: 1px solid var(--primary-ink);
    padding: var(--s0);
}

.hamburger span {
    display: block;
    width: var(--s0);
    height: 1px;
    background: var(--primary-ink);
    margin: var(--s-4) 0;
}

/* sidebar */
.sidebar {
    z-index: 1002;
    position: fixed;
    left: 0;
    top: 0;
    width: 33vw;
    height: 100vh;
    border-right: 1px solid var(--primary-ink);
    display: flex;
    flex-direction: column;
    background: var(--primary-background);
}

.sidebar-hero {
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--moons-pineapple);
    cursor: pointer;
    border-bottom: 1px solid var(--primary-ink);
    flex-shrink: 0;
}

.sidebar-header {
    display: flex;
    width: 100%;
    border-top: 1px solid var(--primary-ink);
    border-bottom: 1px solid var(--primary-ink);
}

.sidebar-header a {
    padding: var(--s0);
    width: 100%;
    color: var(--primary-ink);
}

.sidebar-header a:hover {
    background: var(--primary-yellow);
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.sidebar-nav a {
    border-bottom: 1px solid var(--primary-ink);
    padding: var(--s0);
    color: var(--primary-ink);
}

.sidebar-nav a:hover {
    background: var(--primary-yellow);
}

.sidebar-footer {
    padding: var(--s0);
    font-size: var(--s-1);
}

/* main content */
.main-content {
    margin-left: 33vw;
    min-height: 100vh;
    border-top: 1px solid var(--primary-ink);
    padding: var(--s2) clamp(var(--s0), 5vw, var(--s4));
    display: flex;
    flex-direction: column;
    gap: var(--s0);
}

.main-content > * {
    max-width: 65ch;
}

.main-content img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* overlay */
.overlay {
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
    position: fixed;
    inset: 0;
}

.close-menu {
    display: none;
}

/* blog cards */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s0);
    max-width: none;
}

.blog-card {
    display: flex;
    border: 1px solid var(--primary-ink);
    align-items: stretch;
}

.blog-card a:hover {
    background-color: var(--primary-yellow);
}

.blog-card img {
    width: 120px;
    min-width: 120px;
    aspect-ratio: 1;
    object-fit: cover;
    border-left: 1px solid var(--primary-ink);
    order: 2;
    align-self: stretch;
}

.blog-card-content {
    flex: 1;
    order: 1;
    padding: var(--s0);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.blog-card h2 {
    margin: 0;
}

.blog-card-content p {
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* work cards */
.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--s1);
    max-width: none;
}

.work-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--primary-ink);
    text-decoration: none;
}

.work-card:hover .work-card-content {
    background-color: var(--primary-yellow);
}

.work-card-image {
    width: 100%;
    aspect-ratio: 4/3;
    border-bottom: 1px solid var(--primary-ink);
}

.work-card-content {
    padding: var(--s0);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

.work-card h2 {
    margin: 0;
}

/* work detail page */
.work-detail-hero {
    width: 100%;
    max-width: none;
    aspect-ratio: 16/9;
    margin-bottom: var(--s1);
}

.work-detail-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s1);
    max-width: none;
}

.work-detail-images > div {
    width: 100%;
}

.work-detail-images > div:last-child {
    grid-column: 1 / -1;
}

/* contact form */
.contact-form {
    max-width: none;
    border: 1px solid var(--primary-ink);
}

.form-group {
    border-bottom: 1px solid var(--primary-ink);
    position: relative;
}

.form-group:last-of-type {
    border-bottom: 1px solid var(--primary-ink);
}

.contact-form label {
    position: absolute;
    top: var(--s0);
    left: var(--s0);
    font-size: var(--s-1);
    font-weight: bold;
    pointer-events: none;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: var(--s0);
    padding-top: calc(var(--s1) + var(--s-1));
    border: none;
    background-color: var(--primary-background);
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--s0);
    text-transform: uppercase;
    color: var(--primary-ink);
    resize: vertical;
    display: block; /* add this to eliminate any inline spacing */
}

.contact-form input:hover,
.contact-form textarea:hover,
.contact-form input:focus,
.contact-form textarea:focus {
    background-color: var(--primary-yellow);
    outline: none;
}

.submit-button {
    width: 100%;
    padding: var(--s0);
    border: none;
    background-color: transparent;
    color: var(--primary-ink);
    cursor: pointer;
    font-size: var(--s0);
    font-weight: bold;
    text-align: left;
}

.submit-button:hover {
    background-color: var(--primary-blue);
    color: var(--primary-background);
}

/* mobile view */
@media (max-width: 768px) {
    .mobile-header {
        display: flex;
    }

    .sidebar {
        transform: translateX(-100%);
        width: 100vw;
        border: none;
        overflow-y: auto;
    }

    .sidebar-hero {
        height: var(--s3);
        aspect-ratio: auto;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        padding: var(--s1);
        padding-top: var(--s3);
    }

    .hamburger {
        display: block;
    }

    .overlay.show {
        display: block;
    }

    .close-menu {
        color: var(--primary-ink);
        display: block;
        height: 100%;
        aspect-ratio: 1;
        border: none;
        border-left: 1px solid var(--primary-ink);
        cursor: pointer;
        text-transform: uppercase;
        font-weight: bold;
        background: transparent;
    }

    .blog-card img {
        width: 80px;
        min-width: 80px;
    }

    .work-detail-images {
        grid-template-columns: 1fr;
    }
    
    .work-detail-images > div:last-child {
        grid-column: auto;
    }
}

/* dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --earthlings-1: #f8a95d;
        --earthlings-2: #abd66e;
        --earthlings-3: #1ab4a7;
        --earthlings-4: #297eb9;
        --earthlings-5: #914b91;
        --earthlings-6: #e14f6f;
        --moons-apple: #76c16d;
        --moons-blue-heaven: #1a9ad3;
        --moons-blueberry: #3b609a;
        --moons-cherry: #e14f5d;
        --moons-grape: #6b468e;
        --moons-lime: #e3ee6d;
        --moons-mint: #1ab2c7;
        --moons-orange: #eb7f52;
        --moons-pineapple: #ffd763;
        --moons-plum: #b74791;
        --moons-strawberry: #e04a80;
        --moons-watermelon: #1ab087;
        --primary-background: #000000;
        --primary-blue: #44468d;
        --primary-cyan: #1ab9ee;
        --primary-green: #1aaf6a;
        --primary-ink: #ffffff;
        --primary-magenta: #e04895;
        --primary-red: #e1514d;
        --primary-yellow: #ffff6a;

        /* eye colors - whites stay cream, pupils stay dark */
        --eye-white: #f5f3ee;
        --eye-pupil: #000000;
    }

    a {
        color: var(--primary-cyan);
    }

    a:hover {
        color: var(--primary-background);
    }

    .hamburger span {
        background-color: var(--primary-ink);
    }

    .hamburger:hover span {
        background-color: var(--primary-background);
    }

    .close-menu:hover {
        color: var(--primary-background);
    }
}

/* print mode */
@media print {
    :root {
        --earthlings-1: #de9044;
        --earthlings-2: #91bd55;
        --earthlings-3: #009b8e;
        --earthlings-4: #0f65a0;
        --earthlings-5: #773278;
        --earthlings-6: #c73656;
        --moons-apple: #5ca854;
        --moons-blue-heaven: #0081ba;
        --moons-blueberry: #214781;
        --moons-cherry: #c73644;
        --moons-grape: #512d75;
        --moons-lime: #c9d554;
        --moons-mint: #0099ae;
        --moons-orange: #d16639;
        --moons-pineapple: #edbe4a;
        --moons-plum: #9d2e78;
        --moons-strawberry: #c63167;
        --moons-watermelon: #00976e;
        --primary-background: #ffffff;
        --primary-blue: #2a2d74;
        --primary-cyan: #00a0d5;
        --primary-green: #009651;
        --primary-ink: #1a1919;
        --primary-magenta: #c62f7c;
        --primary-red: #c73834;
        --primary-yellow: #fff151;
    }

    .sidebar {
        display: none;
    }

    .main-content {
        margin-left: 0;
    }
}