/* Original scenery and character, with continuous copy directly on the background. */
.home-rmt {
    position: relative;
    z-index: 1;
    isolation: isolate;
    margin-block: -28px -40px;
    padding-block: 60px 56px;
    color: var(--exilium-text);
}

.home-carousel-section:has(+ .home-rmt) { border-bottom: 0; }
.home-rmt + .latest-news { border-top: 0; }

.rmt-scenery {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #181512;
    pointer-events: none;
    user-select: none;
}

.rmt-scenery .rmt-background {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
}

.rmt-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rmt-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
}

.rmt-intro { min-width: 0; }

.rmt-title {
    margin: 0 0 28px;
    color: #f0dfbc;
    font-size: clamp(36px, 3.75vw, 48px);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.12;
    text-wrap: balance;
}

.rmt-copy {
    margin: 0;
    color: var(--exilium-muted);
    font-size: 20px;
    line-height: 1.65;
    text-wrap: pretty;
}

.rmt-actions { margin: 28px 0 0; }

.rmt-learn-more {
    min-width: 174px;
    min-height: 48px;
}

.rmt-actions a:focus-visible {
    outline: 2px solid var(--exilium-brand-hover);
    outline-offset: 5px;
}

.rmt-character {
    position: relative;
    min-width: 0;
    height: 444px;
    user-select: none;
}

.rmt-character img {
    position: absolute;
    left: 50%;
    bottom: -160px;
    width: auto;
    max-width: none;
    height: 680px;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(#000 86%, transparent 100%);
    mask-image: linear-gradient(#000 86%, transparent 100%);
    transform: translateX(-50%);
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .rmt-layout {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        gap: 80px;
    }

    .rmt-title { font-size: 36px; }
    .rmt-copy { font-size: 18px; }
    .rmt-character img { height: 600px; bottom: -100px; }
}

@media (max-width: 767.98px) {
    .home-rmt { padding-block: 68px 36px; }

    .rmt-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .rmt-title { margin-bottom: 28px; font-size: 36px; }
    .rmt-copy { font-size: 18px; }

    .rmt-character {
        height: 360px;
        width: 100%;
        max-width: 400px;
        justify-self: center;
    }

    .rmt-character img { height: 560px; bottom: -180px; }
}

@media (prefers-reduced-motion: reduce) {
    .home-rmt a,
    .home-rmt a::before,
    .home-rmt a::after { transition: none; }
}