body.index-six {
    --rj-logo-paper: #ddd4c4;
    --rj-logo-paper-deep: #cfc4b2;
    --rj-logo-brown: #5f5340;
    background: var(--rj-logo-paper);
}

.rj-open {
    --rj-ink: #101010;
    --rj-gold: var(--rj-logo-brown);
    --rj-paper: var(--rj-logo-paper);
    --rj-white: var(--rj-logo-paper);
    --rj-headline: clamp(40px, 8.4vw, 132px);
    --rj-slot-wide-w: clamp(108px, 16vw, 248px);
    --rj-slot-wide-h: clamp(50px, 7.4vw, 116px);
    --rj-slot-tall-w: clamp(52px, 6.6vw, 104px);
    --rj-slot-tall-h: clamp(68px, 8.6vw, 136px);
    --rj-gallery-gap: 9px;
    position: relative;
    background: var(--rj-white);
    color: var(--rj-ink);
}

.rj-open__hero {
    height: 100vh;
    min-height: 640px;
    background: var(--rj-white);
}

.rj-open__fly {
    position: fixed;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    background: var(--rj-logo-paper-deep);
    will-change: left, top, width, height, opacity;
}

.rj-open__fly img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rj-open__info {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 72px;
    background: var(--rj-paper);
    text-align: center;
}

.rj-open__headline {
    margin: 0 0 72px;
    max-width: none;
    font-family: "Hanken Grotesk", "Noto Sans KR", sans-serif;
    font-size: var(--rj-headline);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--rj-ink);
}

.rj-open__headline > span {
    display: block;
}

.rj-open__headline > span,
.rj-open__headline > .rj-open__line {
    white-space: nowrap;
}

.rj-open__headline > .rj-open__line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.18em;
}

.rj-open__slot {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    background: var(--rj-logo-paper-deep);
    flex: 0 0 auto;
}

.rj-open__slot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rj-open__slot--wide {
    width: var(--rj-slot-wide-w);
    height: var(--rj-slot-wide-h);
    margin: 0 0.12em;
    opacity: 0;
}

.rj-open__slot--tall {
    width: var(--rj-slot-tall-w);
    height: var(--rj-slot-tall-h);
}

.rj-open.is-docked .rj-open__slot--wide {
    opacity: 1;
}

.rj-open.is-docked .rj-open__fly {
    opacity: 0;
}

.rj-open__kicker {
    margin: 0 0 11px;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--rj-gold);
}

.rj-open__sub {
    margin: 0;
    font-family: "Hanken Grotesk", "Noto Sans KR", sans-serif;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--rj-ink);
}

.rj-open__gallery {
    background: var(--rj-paper);
    padding: 0 0 72px;
}

.rj-open__gallery ul {
    display: flex;
    gap: var(--rj-gallery-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rj-open__gallery li {
    flex: 1 1 0;
    min-width: 0;
}

.rj-open__frame {
    overflow: hidden;
    height: clamp(280px, 43.75vw, 630px);
    background: var(--rj-logo-paper-deep);
    transform: translateY(36px);
    opacity: 0;
    transition: transform 0.9s ease, opacity 0.9s ease;
}

.rj-open__gallery li:nth-child(2) .rj-open__frame {
    transition-delay: 0.12s;
}

.rj-open__gallery li:nth-child(3) .rj-open__frame {
    transition-delay: 0.24s;
}

.rj-open__gallery.is-in .rj-open__frame {
    transform: none;
    opacity: 1;
}

.rj-open__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .rj-open__hero {
        min-height: 520px;
        height: 86vh;
    }

    .rj-open__info {
        min-height: auto;
        padding: 72px 18px 56px;
    }

    .rj-open {
        --rj-headline: clamp(28px, 8.2vw, 40px);
        --rj-slot-wide-w: 72px;
        --rj-slot-wide-h: 34px;
        --rj-slot-tall-w: 36px;
        --rj-slot-tall-h: 48px;
    }

    .rj-open__headline {
        margin-bottom: 36px;
    }

    .rj-open__headline > span,
    .rj-open__headline > .rj-open__line {
        white-space: normal;
    }

    .rj-open__line {
        flex-wrap: wrap;
    }

    .rj-open__gallery {
        padding-bottom: 28px;
    }

    .rj-open__gallery ul {
        gap: 6px;
    }

    .rj-open__frame {
        height: 46vw;
        min-height: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rj-open__fly {
        display: none;
    }

    .rj-open__slot--wide {
        opacity: 1;
    }

    .rj-open__frame {
        transform: none;
        opacity: 1;
        transition: none;
    }
}
