@font-face {
    font-family: "ZT Bros Oskon 90s";
    src: url("/assets/fonts/zt-bros-oskon-90s-regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "PP Right Serif Mono";
    src: url("/assets/fonts/pp-right-serif-mono-regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --frame-width: 6vw;
    color-scheme: light dark;
    --page-text: #000;
    --page-color: #e4d638;
    --page-background: #e4d638 url("/assets/images/shared/background-texture.webp") repeat;
    --menu-texture: url("/assets/images/shared/menu-grey-noise.png?v=2");
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    background: #bcbcbc;
}

body {
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--page-background);
    color: var(--page-text);
    font-family: "ZT Bros Oskon 90s", "Times New Roman", serif;
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

.site-header {
    position: relative;
    height: 52px;
    margin: -20px -20px 20px;
    background-color: #bcbcbc;
    background-image: var(--menu-texture);
    color: #000;
}

.menu-toggle { display: none; }

.site-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 3rem);
    height: 100%;
    padding: 0 calc(6vw + 28px) 0 28px;
    font-size: 1.5rem;
}

.site-nav a, .site-nav span {
    padding: 5px 0;
    border-bottom: 2px solid transparent;
    line-height: 1.2;
}

.site-nav [aria-current="page"] { border-bottom-color: currentColor; }
.site-nav a:hover { text-decoration: none; border-bottom-color: currentColor; }
.site-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    max-width: 900px;
    margin: auto;
}

.grid-item { min-width: 0; padding: 20px; }
.full-width { grid-column: 1 / -1; padding: 15px; text-align: center; font-size: 40px; }
.spacer-main { margin-top: 25vh; }
.spacer-normal { margin-top: 10vh; }

.Image-scaler, .Image-display {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.Image-scaler img { width: min(100%, 380px); height: auto; object-fit: contain; }
.Image-display img { width: 100%; height: 50vh; object-fit: contain; }
.Front-page-text { position: relative; font-size: clamp(2.75rem, 6vw, 3.5rem); }
.highlight-word { position: relative; z-index: 2; cursor: pointer; }
.highlight-word:hover, .highlight-word:focus-visible { font-weight: bold; }

.circle-overlay, .scribble-overlay, .index-1-overlay, .index-2-overlay {
    position: absolute;
    z-index: 1;
    height: auto;
    pointer-events: none;
}

.circle-overlay { width: 180px; top: 62%; left: 38%; transform: translate(-50%, -50%) rotate(23deg); }
.scribble-overlay { width: 190px; top: 114%; left: 29%; transform: translate(-50%, -50%) rotate(-1deg); }
.index-1-overlay { width: 190px; top: 57%; left: 63%; transform: translate(-50%, -50%) rotate(-1deg); }
.index-2-overlay { width: 100px; top: 93%; left: 48%; transform: translate(-50%, -50%) rotate(-1deg); }

.design-text-float, .shit-text-float {
    position: absolute;
    z-index: 3;
    height: auto;
    pointer-events: none;
}
.design-text-float {
    top: 257px;
    left: 43%;
    width: 240px;
    transform: translateX(-50%) rotate(-10deg);
}
.shit-text-float { top: 542px; left: 46%; width: 240px; transform: translateX(-50%) rotate(10deg); }

.text-container h1 { font-size: 35px; font-weight: 400; text-align: left; }
.text-container p { font-family: "PP Right Serif Mono", Helvetica, sans-serif; font-size: 16px; line-height: 1.5; }
.product-pair {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
}

@media screen and (min-width: 901px) {
    body { padding-inline: 0; }
    .site-header {
        width: calc(100% - 2 * var(--frame-width));
        margin: 0 auto 20px;
    }
    .site-nav { padding-inline: 28px; }

    .product-pair.image-left .image-section {
        order: -1;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-text: #fff;
        --page-color: #001644;
        --page-background: #001644 url("/assets/images/shared/background-texture-dark.webp") repeat;
    }
    .darkmode-invert { filter: invert(100%); }
}

@media screen and (max-width: 900px) {
    :root { --frame-width: 20px; }
    body { padding: 0; }
    /* The grey top belongs to the document and scrolls away with the header. */
    body.homepage { background: #bcbcbc; }
    body.homepage.header-scrolled { background: var(--page-color); }
    .homepage-content { background: var(--page-background); }
    .homepage .site-header::after { display: none; }
    .site-header {
        margin: 0;
        height: auto;
        min-height: calc(52px + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
        box-sizing: border-box;
        --menu-top-blend: linear-gradient(to bottom, #bcbcbc env(safe-area-inset-top, 0px), transparent calc(env(safe-area-inset-top, 0px) + 40px));
        background-image: var(--menu-top-blend), var(--menu-texture);
    }
    .site-header::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: env(safe-area-inset-top, 0px);
        background: #bcbcbc;
        pointer-events: none;
    }
    .site-nav { justify-content: center; gap: clamp(1rem, 5vw, 2rem); padding: 0 12px; font-size: 1.25rem; }
    .menu-ready .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 48px;
        height: 52px;
        margin: 0 32px 0 auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }
    .menu-toggle span { width: 24px; height: 2px; background: currentColor; }
    .menu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
    .menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
    .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .menu-ready .site-nav { display: none; }
    body.mobile-menu-open {
        position: fixed;
        width: 100%;
        overflow: hidden;
        padding-top: calc(52px + env(safe-area-inset-top, 0px));
        box-sizing: border-box;
    }
    .site-header.menu-open {
        position: fixed;
        inset: 0;
        z-index: 100;
        height: 100dvh;
        background: transparent;
        isolation: isolate;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .site-header.menu-open::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--menu-top-blend), #bcbcbc var(--menu-texture) repeat;
        -webkit-mask-image: linear-gradient(to bottom, #000 var(--menu-fade-start, 60%), transparent max(100%, calc(var(--menu-fade-start, 60%) + 160px)));
        mask-image: linear-gradient(to bottom, #000 var(--menu-fade-start, 60%), transparent max(100%, calc(var(--menu-fade-start, 60%) + 160px)));
        pointer-events: none;
        animation: menu-unfold 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .menu-open .site-nav {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: clamp(14px, 3vh, 28px);
        height: auto;
        padding: clamp(24px, 12vh, 120px) 24px 40px;
        font-size: 2rem;
        animation: menu-items-enter 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .grid-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        padding: 15px 15px calc(15px + env(safe-area-inset-bottom, 0px));
    }
    .grid-item { width: 100%; padding: 0; box-sizing: border-box; text-align: center; }
    .circle-overlay, .scribble-overlay, .index-1-overlay, .index-2-overlay,
    .design-text-float, .shit-text-float, .Image-scaler { display: none; }
    .spacer-main { display: none; }
    .Front-page-text { font-size: 2.5rem; }
    .full-width { font-size: 30px; }
    .product-pair { display: flex; flex-direction: column; margin-bottom: 40px; }
    .image-section { order: 1; }
    .text-section { order: 2; margin-top: 15px; }
    .text-container h1 { text-align: center; }
}

@keyframes menu-unfold {
    from { clip-path: inset(0 0 100% 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes menu-items-enter {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .site-header.menu-open::before, .menu-open .site-nav { animation: none; }
}