*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    height: 100%;
    /* Lenis is in charge */
    scroll-behavior: auto;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 20px;
    font-weight: 300;

    color: #bfb4a7;
    line-height: 1.375;
    background-color: #23211e;
}

section {
    min-height: 100svh;
    padding: clamp(1.5rem, 4vw, 4rem);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;

    position: relative;
}

/* Prevent FOUC before GSAP applies initial transforms */
section.slide {
    visibility: hidden;
}

section.slide.is-ready {
    visibility: visible;
}

div.content {
    margin-top: clamp(1.5rem, 10vh, 15vh);
    padding-left: clamp(1.5rem, 4vw, 4rem);
    padding-top: clamp(1rem, 2vh, 2rem);
    padding-bottom: clamp(1rem, 2vh, 2rem);
    background-image: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05));
}

h1,
h2,
h3,
h4 {
    font-family: Jura, sans-serif;
    font-weight: 400;
    line-height: 1.25;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

p {
    margin: 0;
    margin-top: 1rem;
    padding: 0;
}

div.lead-in {
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.75rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    letter-spacing: 0.15rem;
}

.dark-55 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)) !important;
}

.dark-40 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.40)) !important;
}

.dark-20 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.20)) !important;
}

/* Hero background image */
@media (max-width: 480px) and (orientation: portrait) {
    section#hero {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4),
                rgba(0, 0, 0, 0.4)), url('/res/backgrounds/hero@480p.webp');
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    section#hero {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4),
                rgba(0, 0, 0, 0.4)), url('/res/backgrounds/hero@480l.webp');
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    section#hero {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4),
                rgba(0, 0, 0, 0.4)), url('/res/backgrounds/hero@1024l.webp');
    }
}

@media (min-width: 1025px) {
    section#hero {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4),
                rgba(0, 0, 0, 0.4)), url('/res/backgrounds/hero@1920l.webp');
    }
}

/* Portfolio background image */
@media (max-width: 480px) and (orientation: portrait) {
    section#portfolio {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/portfolio@480p.webp');
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    section#portfolio {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/portfolio@480l.webp');
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    section#portfolio {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/portfolio@1024l.webp');
    }
}

@media (min-width: 1025px) {
    section#portfolio {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/portfolio@1920l.webp');
    }
}

/* Themes background image */
@media (max-width: 480px) and (orientation: portrait) {
    section#themes {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/themes@480p.webp');
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    section#themes {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/themes@480l.webp');
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    section#themes {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/themes@1024l.webp');
    }
}

@media (min-width: 1025px) {
    section#themes {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/themes@1920l.webp');
    }
}

/* Gallery background image */
@media (max-width: 480px) and (orientation: portrait) {
    section#gallery {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/gallery@480p.webp');
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    section#gallery {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/gallery@480l.webp');
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    section#gallery {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/gallery@1024l.webp');
    }
}

@media (min-width: 1025px) {
    section#gallery {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/gallery@1920l.webp');
    }
}

/* Travel background image */
@media (max-width: 480px) and (orientation: portrait) {
    section#travel {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/travel@480p.webp');
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    section#travel {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/travel@480l.webp');
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    section#travel {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/travel@1024l.webp');
    }
}

@media (min-width: 1025px) {
    section#travel {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/travel@1920l.webp');
    }
}

/* Archive background image */
@media (max-width: 480px) and (orientation: portrait) {
    section#archive {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/archive@480p.webp');
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    section#archive {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/archive@480l.webp');
    }
}

@media (min-width: 481px) and (max-width: 1024px) {
    section#archive {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/archive@1024l.webp');
    }
}

@media (min-width: 1025px) {
    section#archive {
        background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/res/backgrounds/archive@1920l.webp');
    }
}

/*
 * CTA
 */
.gateway-cta {
    position: absolute;
    right: clamp(16px, 3vw, 40px);
    top: 50%;
    transform: translateY(-50%);
    display: inline-grid;
    place-items: center;
    width: clamp(56px, 6vw, 96px);
    height: clamp(56px, 6vw, 96px);
    border-radius: 999px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.gateway-cta-down {
    left: 50%;
    right: auto;
    top: auto;
    bottom: clamp(16px, 3vw, 40px);
    transform: translate(-50%, 0);
}

.cta-icon {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cta-disc {
    /* “disc” */
    fill: rgba(255, 255, 255, 0.10);
    
    stroke: rgba(191, 180, 167, 0.65);
    stroke-width: 2;
    /* works if disc is HTML; SVG won’t blur background */
    backdrop-filter: blur(6px);
    
}

.cta-chevron {
    fill: none;
    stroke: rgba(191, 180, 167, 0.50);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gateway-cta:hover .cta-disc {
    fill: rgba(255, 255, 255, 0.25);
    stroke: rgba(191, 180, 167, 0.8);
}

.gateway-cta:hover .cta-chevron {
    stroke: rgba(191, 180, 167, 0.8);
}

.gateway-cta:focus-visible {
    outline: 2px solid rgba(191, 180, 167, 0.85);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    .gateway-cta:hover .cta-chevron {
        animation: nudge 600ms ease-in-out infinite alternate;
    }

    .gateway-cta-down:hover .cta-chevron {
        animation: nudge-down 600ms ease-in-out infinite alternate;
    }

    @keyframes nudge {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(2px);
        }
    }

    @keyframes nudge-down {
        from {
            transform: translateY(0);
        }

        to {
            transform: translateY(2px);
        }
    }
}