:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #050607;
    color: #f7f7f4;
    font-synthesis: none;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    background: #050607;
}

html.home-black,
html.home-black body {
    background: #000;
}

.landing::before,
.landing::after {
    position: fixed;
    inset: 0;
    content: "";
}

.landing::before {
    z-index: 0;
    background-position: center;
    background-size: cover;
    filter: saturate(.74) contrast(1.06);
    transform: scale(1.025);
    animation: settle 1.8s cubic-bezier(.2, .7, .2, 1) both;
}

.landing--rd::before {
    background-image: url("/assets/images/rajdowki-background.png");
}

.landing::after {
    z-index: 1;
    background:
        radial-gradient(circle at 50% 45%, transparent 0 20%, rgb(0 0 0 / .2) 62%, rgb(0 0 0 / .76) 100%),
        linear-gradient(90deg, rgb(0 0 0 / .66), rgb(0 0 0 / .22) 48%, rgb(0 0 0 / .48));
}

.stage {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 100svh;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 4vw, 4rem);
    overflow: hidden;
}

.card {
    position: relative;
    width: min(100%, 48rem);
    min-width: 0;
    padding: clamp(2rem, 5vw, 4.75rem);
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, rgb(10 12 14 / .83), rgb(5 6 7 / .62));
    box-shadow: 0 2.5rem 7rem rgb(0 0 0 / .5);
    text-align: center;
    backdrop-filter: blur(12px);
    transition: border-color .35s ease, box-shadow .35s ease;
}

.card:hover {
    border-color: rgb(208 155 88 / .42);
    box-shadow: 0 3rem 8rem rgb(0 0 0 / .58);
}

.card::before {
    position: absolute;
    inset: .65rem;
    border: 1px solid rgb(255 255 255 / .06);
    border-radius: 1.12rem;
    content: "";
    pointer-events: none;
}

.card__marker {
    display: flex;
    width: 4.25rem;
    margin: 0 auto 2rem;
    align-items: center;
    gap: .5rem;
}

.card__marker::before,
.card__marker::after {
    height: 1px;
    flex: 1;
    background: #b78342;
    content: "";
}

.card__marker span {
    display: block;
    width: .35rem;
    height: .35rem;
    border: 1px solid #c59656;
    transform: rotate(45deg);
}

.eyebrow,
.description {
    margin: 0;
    color: #c5c7c9;
    font-size: clamp(.67rem, 1.3vw, .78rem);
    font-weight: 650;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.domain {
    margin: 1.1rem 0 .8rem;
    color: #fff;
    font-size: clamp(2rem, 6vw, 4.65rem);
    font-weight: 750;
    letter-spacing: -.055em;
    line-height: .94;
    white-space: nowrap;
}

.domain--wr {
    font-size: clamp(2rem, 5vw, 4.15rem);
    letter-spacing: -.045em;
}

.description {
    color: #d09b58;
    letter-spacing: .2em;
}

.tagline {
    margin: 2rem 0 2.25rem;
    color: #f2f1ec;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
    font-style: italic;
}

address {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem 1.5rem;
    font-style: normal;
}

address a {
    position: relative;
    color: #fff;
    font-size: .88rem;
    letter-spacing: .035em;
    text-decoration: none;
}

address a::after {
    position: absolute;
    right: 0;
    bottom: -.35rem;
    left: 0;
    height: 1px;
    background: #c8924d;
    content: "";
    transform: scaleX(.18);
    transition: transform .25s ease;
}

address a:hover::after,
address a:focus-visible::after {
    transform: scaleX(1);
}

@keyframes settle {
    from {
        opacity: .3;
        transform: scale(1.085);
    }
}

@media (max-width: 42rem) {
    .stage {
        padding: 1rem;
    }

    .card {
        padding: 2.5rem 1.25rem;
        border-radius: 1.15rem;
    }

    .card::before {
        border-radius: .82rem;
    }

    .domain {
        white-space: normal;
    }

    .domain--wr {
        font-size: clamp(1.35rem, 7vw, 2.8rem);
        letter-spacing: -.055em;
    }

    address {
        flex-direction: column;
    }

}

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