:root {
    color-scheme: dark;
    --font-body: "Trebuchet MS", "Aptos", sans-serif;
    --font-display: Georgia, "Times New Roman", serif;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    letter-spacing: 0;
}

h1,
h2,
.display-font {
    font-family: var(--font-display);
}

.mock-hero {
    background: #07111b;
}

.hero-portrait,
.hero-retail,
.hero-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-portrait {
    background-image: url("/assets/images/portrait-left-hero.jpg");
    background-position: left center;
    background-size: cover;
    opacity: 0.92;
}

.hero-retail {
    left: auto;
    top: 4.75rem;
    right: 0;
    bottom: 19%;
    width: min(58vw, 900px);
    background-image:
        linear-gradient(90deg, rgba(7, 17, 27, 0.98), rgba(7, 17, 27, 0.42) 42%, rgba(7, 17, 27, 0.05)),
        linear-gradient(180deg, rgba(7, 17, 27, 0.08), rgba(7, 17, 27, 0.45)),
        url("/assets/images/retail-night.jpg");
    background-position: center;
    background-size: cover;
    opacity: 0.86;
}

.hero-veil {
    background:
        linear-gradient(90deg, rgba(7, 17, 27, 0.1), rgba(7, 17, 27, 0.74) 32%, rgba(7, 17, 27, 0.2) 62%, rgba(7, 17, 27, 0.42)),
        linear-gradient(180deg, rgba(7, 17, 27, 0), rgba(7, 17, 27, 0.1) 58%, rgba(7, 17, 27, 0.92));
}

.nav-link {
    position: relative;
    padding-block: 0.9rem;
    transition: color 180ms ease;
}

.nav-link:hover,
.nav-link.is-active {
    color: #ff980f;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1rem;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    background: #ff980f;
    transition: transform 180ms ease;
}

.nav-link:hover::after,
.nav-link.is-active::after {
    transform: scaleX(1);
}

.signature {
    font-family: "Comic Sans MS", "Bradley Hand ITC", cursive;
    transform: rotate(-3deg);
    text-underline-offset: 0.3em;
    text-decoration-thickness: 0.12em;
    text-decoration-line: underline;
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms ease, transform 700ms ease;
    transition-delay: var(--delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.focus-ring:focus-visible {
    outline: 3px solid rgba(255, 152, 15, 0.7);
    outline-offset: 3px;
}

[data-contact-status][data-state="sent"],
[data-contact-status][data-state="success"] {
    color: #86efac;
}

[data-contact-status][data-state="invalid"],
[data-contact-status][data-state="error"] {
    color: #fca5a5;
}

@media (max-width: 900px) {
    .hero-portrait {
        background-position: 17% center;
        opacity: 0.22;
    }

    .hero-retail {
        top: 5rem;
        bottom: auto;
        width: 100%;
        height: 45vh;
        opacity: 0.32;
    }

    .hero-veil {
        background:
            linear-gradient(90deg, rgba(7, 17, 27, 0.9), rgba(7, 17, 27, 0.76)),
            linear-gradient(180deg, rgba(7, 17, 27, 0.25), rgba(7, 17, 27, 0.96));
    }
}

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

    .reveal {
        opacity: 1;
        transform: none;
    }
}