/* ==========================================================================
   Microwave Soups — index.css
   ========================================================================== */
@font-face {
    font-family: 'Sharp Earth OL';
    src: url('/assets/fonts/sharp/SharpEarth-Thin.woff2') format('woff2'),
        url('/assets/fonts/sharp/SharpEarth-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sharp Earth OL';
    src: url('/assets/fonts/sharp/SharpEarth-ThinItalic.woff2') format('woff2'),
        url('/assets/fonts/sharp/SharpEarth-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sharp Earth OL';
    src: url('/assets/fonts/sharp/SharpEarth-Light.woff2') format('woff2'),
        url('/assets/fonts/sharp/SharpEarth-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sharp Earth OL';
    src: url('/assets/fonts/sharp/SharpEarth-LightItalic.woff2') format('woff2'),
        url('/assets/fonts/sharp/SharpEarth-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sharp Earth OL';
    src: url('/assets/fonts/sharp/SharpEarth-Regular.woff2') format('woff2'),
        url('/assets/fonts/sharp/SharpEarth-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sharp Earth OL';
    src: url('/assets/fonts/sharp/SharpEarth-Italic.woff2') format('woff2'),
        url('/assets/fonts/sharp/SharpEarth-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sharp Earth OL';
    src: url('/assets/fonts/sharp/SharpEarth-Medium.woff2') format('woff2'),
        url('/assets/fonts/sharp/SharpEarth-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sharp Earth OL';
    src: url('/assets/fonts/sharp/SharpEarth-MediumItalic.woff2') format('woff2'),
        url('/assets/fonts/sharp/SharpEarth-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sharp Earth OL';
    src: url('/assets/fonts/sharp/SharpEarth-Bold.woff2') format('woff2'),
        url('/assets/fonts/sharp/SharpEarth-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sharp Earth OL';
    src: url('/assets/fonts/sharp/SharpEarth-BoldItalic.woff2') format('woff2'),
        url('/assets/fonts/sharp/SharpEarth-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sharp Earth OL';
    src: url('/assets/fonts/sharp/SharpEarth-ExtraBold.woff2') format('woff2'),
        url('/assets/fonts/sharp/SharpEarth-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sharp Earth OL';
    src: url('/assets/fonts/sharp/SharpEarth-ExtraBoldItalic.woff2') format('woff2'),
        url('/assets/fonts/sharp/SharpEarth-ExtraBoldItalic.woff') format('woff');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* ========================================
   ANIMATIONS
======================================== */

@keyframes slideInFromTop {
    from {
        transform: translateY(-20px);
        opacity: 0;
        /* background-color: var(--pink); */
    }

    to {
        transform: translateY(0);
        opacity: 1;
        /* background-color: transparent; */
    }
}

@keyframes revealElement {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


:root {
    /* Font */
    /* font-family: "Inter", sans-serif; */
    font-family: 'Sharp Earth OL';
    /* font-family: 'Rosalie Regular'; */
    font-optical-sizing: auto;

    /* Colors */
    --color-tuatara: #000000;
    --color-coral-reef: #C1BBA1;
    --color-grey: #FFFFFF;

    /* Font sizes */
    --font-size-xs: 8px;
    --font-size-sm: 9px;
    --font-size-md: 12px;
    --font-size-lg: 20px;
     line-height: 1.3; 

    /* Transitions */
    --transition-fade: 0.25s;
    --transition-fast: 0.12s;

    /* Breakpoints (for reference — media queries can't use CSS variables directly) */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;

    --animation-top: slideInFromTop 400ms ease forwards;
    --animation-reveal: revealElement 500ms ease-in forwards;
}

::-webkit-scrollbar {
    display: none;
}

* {
    transition: opacity var(--transition-fade) ease-in-out,
        background-color var(--transition-fade) ease-in-out,
        color var(--transition-fast) ease-in-out;
}

/* Base reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*cursor: cell;*/
}

body {
    background-color: var(--color-grey);
    color: var(--color-tuatara);
    font-size: var(--font-size-md);
    padding: 1rem 1rem 0 1rem;
}

main {
    animation: var(--animation-top);
    padding-bottom: 20rem;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

header {
    animation: var(--animation-reveal);
    position: sticky;
    top: 1rem;
    z-index: 100;
    font-family: "Sharp Earth OL";
    margin-bottom: 2.4rem;
    color: var(--color-grey);
    mix-blend-mode: difference;
}

.site-nav-regular {
    transition: grid-template-columns 0.4s ease;
    display: grid;
    grid-template-columns: 1fr 0.25fr 1fr 0.25fr 1fr;
    align-items: start;

    font-size: var(--font-size-lg);
    font-weight: bold;
}

.site-nav-project {
    transition: grid-template-columns 0.4s ease;
    display: none;
}

.nav-item {
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    padding: 0.5rem 0;
    /* border-bottom: 2px solid var(--color-tuatara); */
}

a {
    /* color: var(--color-tuatara); */
    text-decoration: none;
    mix-blend-mode: difference;
}

a:hover {
    cursor: pointer;
}

.nav-divider {
    line-height: 1.2;
    white-space: nowrap;
    height: calc(1.2em + 1rem);
    /* line box + the 0.5rem top/bottom padding */
    overflow: hidden;
    text-align: center;
    text-transform: uppercase;
    padding: 0.5rem 0;
}

footer {
    mix-blend-mode: difference;
    position: fixed;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    z-index: 999;
    width: auto;
    text-align: center;
    padding: 1rem 0;
    color: var(--color-grey);
    font-size: var(--font-size-lg);
    text-transform: uppercase;
    font-weight: 900;
}

footer p {
    line-height: 1;
    kerning: 0.5rem;
}

footer span {
    transform: rotate(-25deg);
    display: inline-block;
}

footer img {
    filter: brightness(0) invert(1);
    width: 8rem;
    height: auto;
    vertical-align: middle;
    margin-right: 0.5rem;
}

footer span {
    font-kerning: auto;

}

footer span:nth-of-type(2) {
    margin-left: 0.05rem;
}

/* ==========================================================================
   Typography
   ========================================================================== */

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast) ease-in-out;
}

li {
    padding-top: 0.5rem;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Tablet and below */
@media (max-width: 1000px) {

    :root {
        --font-size-xs: 6px;
        --font-size-sm: 8px;
        --font-size-md: 9px;
        --font-size-lg: 12px;
    }

    body {
        padding: 0.75rem
    }

    main {
        display: block;
    }

    header {
        top: 0.75rem
    }
}