html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: clip;
    font-family: "PP Right Serif Mono", Helvetica, sans-serif;
}
body { position: relative; padding: 0; background: #f1f1f1; }

body::before, body::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    width: var(--frame-width);
    height: auto;
    background: #e4d638 url("/assets/images/shared/background-texture.webp") repeat;
    pointer-events: none;
}
body::before { left: 0; }
body::after { right: 0; }

.subpage-container {
    position: relative;
    z-index: 1;
    width: min(900px, calc(100% - 2 * var(--frame-width)));
    min-height: 100vh;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(30px, 8vw, 100px);
    width: 100%;
}
.project { min-width: 0; padding: 20px; }
.project p { font-size: 14px; line-height: 1.5; }

.image-showcase {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 350px;
    margin: 30px 0;
}
.gray-background { position: absolute; z-index: 1; width: min(40vw, 500px); height: 350px; background: #d9d9d9; }
.floating-image-container, .image-showcase-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.floating-image-container img, .image-showcase-container img {
    max-width: 130%;
    max-height: 350px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgb(0 0 0 / 15%));
}

.hero-showcase {
    height: 450px;
}

.hero-showcase .floating-image-container img:not(.pesto-vape-image) {
    max-height: 552px;
}

.pesto-vape-image {
    transform: rotate(-45deg) scale(1.25);
}

.project.full-width {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    padding-top: 0;
    padding-bottom: 40px;
    overflow: hidden;
    box-sizing: border-box;
}
.instagram-wrapper { display: flex; justify-content: center; width: 100%; }
.instagram-media { width: 100% !important; max-width: 540px !important; }

@media (prefers-color-scheme: dark) {
    body { background: #121212; color: #fff; }
    body::before, body::after { background: #001644 url("/assets/images/shared/background-texture-dark.webp") repeat; }
    .gray-background { background-color: #333; }
}

@media screen and (max-width: 900px) {
    .subpage-container {
        width: calc(100% - 2 * var(--frame-width));
        padding: env(safe-area-inset-top, 0px) 10px env(safe-area-inset-bottom, 0px);
    }
    .projects-grid { grid-template-columns: 1fr; gap: 5px; }
    .project { margin: 0; padding: 0 10px; }
    .project h1 { text-align: center; }
    .image-showcase {
        height: auto;
        margin: 10px 0 45px;
    }
    .pesto-vape-showcase { height: clamp(360px, 50vh, 500px); }

    .scandinavian-glue-page .projects-grid {
        margin-bottom: 50px;
    }

    .scandinavian-glue-page .projects-grid:last-child {
        margin-bottom: 0;
    }

    .scandinavian-glue-page .projects-grid:nth-child(even) .project:first-child {
        order: 2;
    }

    .scandinavian-glue-page .image-showcase {
        margin-bottom: 0;
    }
    .gray-background { width: 100%; height: 240px; }
    .floating-image-container img, .image-showcase-container img { max-width: 100%; max-height: 50vh; }
    .hero-showcase .floating-image-container img:not(.pesto-vape-image) { max-height: 50vh; }
    .instagram-wrapper { display: block; max-width: 100%; overflow: hidden; text-align: center; }
    .instagram-wrapper blockquote.instagram-media,
    .instagram-wrapper iframe.instagram-media-rendered {
        position: static !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 540px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        transform: none !important;
    }
}