:root {
        color-scheme: dark;
        --ink: #111111;
        --paper: #f2f2f2;
        --muted: #a6a6a6;
        --accent: #bdbdbd;
        --font: 'Inter', Arial, sans-serif;
    }

    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        background: var(--ink);
        color: var(--paper);
        font-family: var(--font);
        -webkit-font-smoothing: antialiased;
    }

    a {
        color: inherit;
    }

    .hero {
        position: relative;
        display: flex;
        min-height: 700px;
        height: 100svh;
        max-height: 1100px;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        isolation: isolate;
        padding: 34px 6.1vw 30px;
        background: #ffffff;
    }

    .hero-image {
        position: absolute;
        z-index: -2;
        inset: 0;
        background-image: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .94) 30%, rgba(255, 255, 255, .56) 50%, rgba(255, 255, 255, 0) 73%), linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 22%), url('assets/manican-editorial.jpg');
        background-position: center, center, 85% center;
        background-repeat: no-repeat;
        background-size: 100% 100%, 100% 100%, auto 132%;
        filter: grayscale(1) brightness(1.2) contrast(1.2);
        transform: scale(1.025);
        animation: image-arrive 1.3s ease-out both;
    }

    .site-header {
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        left: 0;
        display: flex;
        justify-content: flex-end;
        padding: 35px 6.1vw;
        background: transparent;
        mix-blend-mode: difference;
    }

    .header-logo {
        position: absolute;
        top: 27px;
        left: 50%;
        display: block;
        width: 32px;
        height: 27px;
        transform: translateX(-50%);
    }

    .header-logo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: invert(1);
    }

    .site-nav {
        display: flex;
        align-items: center;
        gap: clamp(16px, 2.4vw, 34px);
        color: #ffffff;
        font-size: 10px;
        letter-spacing: 1.8px;
    }

    .site-nav a {
        text-decoration: none;
    }

    .site-nav button {
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        letter-spacing: inherit;
        cursor: pointer;
    }

    .shop {
        scroll-margin-top: 92px;
        padding: 48px 8vw 78px;
        background: #ffffff;
        color: #111111;
    }

    .shop-categories {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }

    .shop-category {
        min-width: 0;
    }

    .shop-category img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        filter: grayscale(1);
    }

    .site-footer {
        padding: 38px 8vw 20px;
        background: #111111;
        color: #f5f5f5;
    }

    .footer-top,
    .footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .footer-top {
        margin-bottom: 42px;
    }

    .footer-brand {
        color: #ffffff;
        font-size: 11px;
        letter-spacing: 1.8px;
        text-decoration: none;
    }

    .footer-tagline {
        display: flex;
        align-items: baseline;
        gap: 8px;
        margin: 0;
        color: #b5b5b5;
        font-family: var(--font);
        font-size: 12px;
        font-weight: 400;
        letter-spacing: .2px;
    }

    .footer-tagline strong {
        color: #ffffff;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: .4px;
    }

    .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 16px 28px;
        padding-bottom: 38px;
    }

    .footer-links a,
    .footer-bottom {
        color: #eeeeee;
        font-size: 9px;
        letter-spacing: 1.3px;
        text-decoration: none;
    }

    .footer-links a:hover,
    .footer-bottom a:hover {
        color: #aaaaaa;
    }

    .footer-bottom {
        border-top: 1px solid #4a4a4a;
        padding-top: 16px;
        color: #a5a5a5;
    }

    .footer-bottom a {
        color: inherit;
        text-decoration: none;
    }

    @keyframes image-arrive {
        from { opacity: .5; transform: scale(1.06); }
        to { opacity: 1; transform: scale(1.025); }
    }

    @media (max-width: 700px) {
        .hero {
            min-height: 570px;
            height: 92svh;
            max-height: 900px;
            padding: 24px 23px 21px;
        }

        .hero-image {
            background-image: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, .88) 32%, rgba(255, 255, 255, .24) 64%, rgba(255, 255, 255, 0) 100%), linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 16%), url('assets/manican-editorial.jpg');
            background-position: center, center, 72% center;
            background-size: 100% 100%, 100% 100%, auto 100%;
        }

        .site-header {
            flex-direction: column;
            align-items: center;
            gap: 11px;
            padding: 18px 14px 0;
        }

        .header-logo {
            position: relative;
            top: auto;
            left: auto;
            width: 28px;
            height: 23px;
            transform: none;
        }

        .site-nav {
            gap: 11px;
            font-size: 8px;
            letter-spacing: 1.2px;
        }

        .shop {
            padding: 38px 22px 48px;
        }

        .shop-categories {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .shop-category img {
            aspect-ratio: 4 / 4.4;
        }

        .site-footer {
            padding: 32px 22px 18px;
        }

        .footer-top {
            align-items: flex-start;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 32px;
        }

        .footer-links {
            gap: 15px 20px;
            padding-bottom: 30px;
        }

        .footer-bottom {
            gap: 16px;
            font-size: 8px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }
    }