.gateway {
    min-height: 100vh;
    min-height: 100svh;

    display: grid;

    grid-template-columns:
        minmax(360px, 39%)
        minmax(0, 61%);

    overflow: hidden;
}


/* ==================================
   GAUCHE
================================== */

.gateway-brand {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    padding:
        clamp(26px, 3vw, 50px)
        clamp(30px, 4vw, 68px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 48% 34%,
            rgba(191,150,80,.09),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #17372a 0%,
            #0c2118 48%,
            #06120d 100%
        );
}


.gateway-brand::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .13;

    background:
        repeating-linear-gradient(
            118deg,
            transparent 0,
            transparent 8px,
            rgba(255,255,255,.018) 9px
        );
}


.gateway-brand::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -210px;
    bottom: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(207,167,91,.09),
            transparent 68%
        );
}


.language {
    position: relative;
    z-index: 5;

    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 10px;
    font-weight: 400;

    letter-spacing: .18em;

    color: rgba(236,212,160,.46);
}


.language .active {
    color: var(--gold-light);
}


.language i {
    display: block;

    width: 1px;
    height: 13px;

    background:
        rgba(226,196,126,.4);
}


.brand-center {
    position: relative;
    z-index: 2;

    flex: 1;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


.key-emblem {
    width:
        clamp(120px, 12vw, 190px);

    height:
        clamp(235px, 38vh, 385px);

    margin-bottom:
        clamp(5px, 1vh, 15px);
}


.key-emblem svg {
    width: 100%;
    height: 100%;

    display: block;
}


.brand-center h1 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(66px, 6.3vw, 105px);

    line-height: .86;

    font-weight: 500;

    letter-spacing: .025em;

    text-transform: uppercase;

    color: var(--gold-light);

    text-shadow:
        0 8px 35px
        rgba(0,0,0,.38);
}


.gold-line {
    width: 70px;
    height: 1px;

    margin:
        clamp(21px, 2.6vh, 31px)
        auto
        clamp(13px, 1.7vh, 20px);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );
}


.brand-type {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(12px, 1vw, 16px);

    text-transform: uppercase;

    letter-spacing: .27em;

    color: var(--gold-pale);
}


.brand-phrase {
    margin:
        clamp(25px, 4vh, 42px)
        0 0;

    font-family: var(--serif);

    font-size:
        clamp(20px, 1.9vw, 31px);

    line-height: 1.2;

    font-style: italic;

    color:
        rgba(244,224,181,.92);
}


.brand-footer {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    gap:
        clamp(9px, 1.4vw, 20px);

    font-size:
        clamp(8px, .67vw, 10px);

    letter-spacing: .18em;

    text-transform: uppercase;

    color:
        rgba(210,172,97,.74);
}


.brand-footer b {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: var(--gold);

    display: block;
}


/* ==================================
   DROITE
================================== */

.gateway-world {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    display: flex;
}


.house-image {
    position: absolute;

    inset: 0;

    background-image:
        url("../img/home/la-cle.png");

    background-size: cover;

    background-position:
        56% center;

    transform: scale(1.025);

    filter:
        brightness(.83)
        saturate(.88)
        contrast(1.03);

    transition:
        transform 8s cubic-bezier(.2,.7,.2,1);
}


.gateway-world:hover .house-image {
    transform: scale(1.055);
}


.house-overlay {
    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(7,12,9,.80) 0%,
            rgba(7,10,8,.59) 36%,
            rgba(7,8,7,.28) 70%,
            rgba(5,5,5,.23) 100%
        ),

        linear-gradient(
            0deg,
            rgba(3,5,4,.43) 0%,
            transparent 50%
        );
}


.language-right {
    position: absolute;

    top:
        clamp(25px, 3vw, 48px);

    right:
        clamp(25px, 3vw, 50px);
}


.world-menu {
    position: relative;

    z-index: 3;

    width:
        min(700px, 75%);

    margin-left:
        clamp(48px, 6vw, 108px);

    padding:
        clamp(90px, 11vh, 145px)
        0
        clamp(40px, 6vh, 75px);

    display: flex;
    flex-direction: column;

    justify-content: center;
}


.world-entry {
    display: block;

    padding:
        clamp(14px, 2vh, 24px)
        0
        clamp(21px, 2.7vh, 32px);

    border-bottom:
        1px solid
        rgba(226,196,126,.48);

    transition:
        transform .28s ease,
        border-color .28s ease;
}


.world-entry:hover {
    transform:
        translateX(9px);

    border-color:
        var(--gold-light);
}


.entry-number {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 4px;

    font-family: var(--serif);

    font-size:
        clamp(18px, 1.5vw, 25px);

    color: var(--gold-light);
}


.entry-number span {
    width: 38px;
    height: 1px;

    background: var(--gold);
}


.world-entry h2 {
    margin: 0;

    font-family: var(--serif);

    font-size:
        clamp(43px, 4vw, 68px);

    font-weight: 400;

    line-height: .98;

    letter-spacing: -.015em;

    color: var(--white);

    text-shadow:
        0 4px 22px
        rgba(0,0,0,.36);
}


.world-entry p {
    margin:
        clamp(7px, 1vh, 12px)
        0 0;

    font-family: var(--serif);

    font-size:
        clamp(16px, 1.3vw, 22px);

    line-height: 1.35;

    color:
        rgba(255,247,230,.83);
}


.secondary-links {
    margin-top:
        clamp(24px, 3.5vh, 40px);

    display: flex;

    gap: 12px;

    align-items: center;

    font-family: var(--serif);

    font-size:
        clamp(15px, 1.15vw, 19px);

    color:
        rgba(236,214,170,.78);
}


.secondary-links a {
    transition:
        color .2s ease;
}


.secondary-links a:hover {
    color: var(--gold-light);
}


.secondary-links span {
    opacity: .55;
}


/* ==================================
   CTA
================================== */

.invitation {
    width:
        min(390px, 100%);

    min-height: 64px;

    margin-top:
        clamp(17px, 2.3vh, 27px);

    padding:
        0 29px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border:
        1px solid
        rgba(237,211,155,.92);

    background:
        linear-gradient(
            108deg,
            #a67531,
            #cba45b 48%,
            #9d6d2d
        );

    box-shadow:
        0 16px 45px
        rgba(0,0,0,.25);

    font-family: var(--serif);

    font-size:
        clamp(14px, 1.1vw, 18px);

    letter-spacing: .17em;

    text-transform: uppercase;

    color: #fff0cb;

    transition:
        transform .25s ease,
        filter .25s ease;
}


.invitation:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.12);
}


.invitation strong {
    font-family: var(--serif);

    font-size: 29px;

    font-weight: 300;
}