*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body{
    background:#050505;
    color:white;
    font-family:'Inter',sans-serif;
    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* BACKGROUND */

.cinematic-bg{
    position:fixed;
    inset:0;
    z-index:-10;
    background:#050505;
}

.cinematic-overlay{
    position:absolute;
    inset:0;

    background-image:url('../ddd.gif');

    background-size:cover;
    background-position:center;

    opacity:0.025;

    filter:
    grayscale(100%)
    contrast(140%);
}

/* HEADER */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    background:
    rgba(5,5,5,0.82);

    border-bottom:
    1px solid rgba(255,255,255,0.05);

    transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}

.header-hidden{
    transform:translateY(-100%);
    opacity:0;
}

.header-inner{
    width:min(92%,1400px);

    margin:auto;

    padding:1.2rem 0;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.logo{
    width:78px;
}

.desktop-nav{
    display:flex;
    gap:2rem;
}

.desktop-nav a{
    color:rgba(255,255,255,0.72);

    text-decoration:none;

    font-size:0.72rem;

    font-weight:800;

    letter-spacing:0.16em;

    transition:0.2s ease;
}

.desktop-nav a:hover{
    color:white;
}

/* MAIN */

.main-wrapper{
    width:min(92%,1400px);

    margin:auto;

    padding-top:7rem;

    padding-bottom:5rem;
}

/* HERO */

.hero-section{
    display:grid;

    grid-template-columns:
    minmax(0,1fr)
    320px;

    align-items:start;

    gap:4rem;

    padding-top:4rem;

    margin-bottom:5rem;
}

.hero-left{
    width:100%;
    max-width:760px;
    padding-top:2rem;
}

.hero-tag{
    color:rgba(255,255,255,0.42);

    font-size:0.72rem;

    font-weight:800;

    letter-spacing:0.18em;

    margin-bottom:1rem;
}

.hero-title{
    font-family:'Bebas Neue',sans-serif;

    font-size:clamp(4.5rem,8vw,8rem);

    line-height:0.88;

    max-width:6ch;
}

.hero-subtitle{
    margin-top:1rem;

    font-size:1rem;

    font-weight:800;

    letter-spacing:0.12em;
}

.name-highlight{
    color:#ff5f4a;
}

/* BUTTONS */

.hero-buttons{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-top:2rem;
    flex-wrap:wrap;
}

.hero-button{
    display:flex;

    align-items:center;

    justify-content:center;

    gap:0.8rem;

    min-width:210px;

    height:58px;

    padding:0 1.5rem;

    border-radius:1.4rem;

    border:
    1px solid rgba(255,255,255,0.12);

    background:
    rgba(255,255,255,0.06);

    color:white;

    text-decoration:none;

    font-size:0.74rem;

    font-weight:800;

    letter-spacing:0.15em;

    cursor:pointer;

    transition:0.22s ease;
}

.hero-button:hover{
    transform:translateY(-4px);

    background:
    rgba(255,255,255,0.12);
}

.button-icon{
    width:18px;
    height:18px;

    object-fit:contain;

    filter:
    brightness(0)
    invert(1);
}

.discord-button{
    color:#ffcc73;
}

/* RIGHT */

.hero-right{
    width:100%;

    max-width:320px;

    display:flex;

    flex-direction:column;

    gap:1rem;
}

.hero-image-container{
    width:100%;

    aspect-ratio:1/1;

    overflow:hidden;

    border-radius:2rem;

    border:
    1px solid rgba(255,255,255,0.08);
}

.hero-image{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* SIDE INFO */

.hero-side-info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}

.side-box{
    min-height:88px;

    border-radius:1.4rem;

    padding:1rem;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    rgba(255,185,70,0.14),
    rgba(255,140,0,0.05),
    rgba(255,220,120,0.12)
    );

    border:
    1px solid rgba(255,190,90,0.28);

    box-shadow:
    0 10px 35px rgba(255,170,50,0.08);
}

.side-box p{
    color:#ffd77a;

    font-size:0.75rem;

    font-weight:800;

    letter-spacing:0.14em;

    line-height:1.5;
}

.visit-highlight{
    color:#ff6a4d;
}

/* CARDS */

.editorial-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    margin-bottom:6rem;
}

.editorial-card{
    position:relative;

    padding:2.5rem;

    border-radius:2rem;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(255,255,255,0.08);

    transition:0.25s ease;
}

.editorial-card:hover{
    transform:scale(1.03);
}

.card-number{
    position:absolute;

    top:1rem;

    right:1.5rem;

    font-size:5rem;

    font-family:'Bebas Neue',sans-serif;

    color:rgba(255,255,255,0.04);
}

.editorial-title{
    font-family:'Bebas Neue',sans-serif;

    font-size:5rem;

    line-height:0.9;

    margin-bottom:2rem;
}

.editorial-text{
    display:flex;

    flex-direction:column;

    gap:1.5rem;

    line-height:2;

    color:rgba(255,255,255,0.8);

    font-weight:600;
}

.highlight{
    color:#ff5f4a;
}

/* GALLERY */

.gallery-small{
    color:rgba(255,255,255,0.45);

    font-size:0.7rem;

    font-weight:800;

    letter-spacing:0.2em;

    margin-bottom:0.5rem;
}

.gallery-title{
    font-family:'Bebas Neue',sans-serif;

    font-size:clamp(4rem,8vw,8rem);

    line-height:0.9;

    margin-bottom:2rem;
}

.gallery-grid{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:1.5rem;
}

.gallery-card{
    padding:1rem;

    border-radius:2rem;

    background:
    rgba(255,255,255,0.03);

    border:
    1px solid rgba(255,255,255,0.08);

    transition:0.22s ease;
}

.gallery-card:hover{
    transform:translateY(-6px);
}

.gallery-image{
    width:100%;
    display:block;
    cursor:pointer;

    user-select:none;

    -webkit-user-drag:none;
}

/* FOOTER */

.footer{
    padding:5rem 1rem;
    text-align:center;
}

.footer-logo{
    width:110px;
}

.footer-text{
    color:rgba(255,255,255,0.35);
    margin-top:1rem;
}

/* MODAL */

.image-modal{

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    background:
    rgba(0,0,0,0.96);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:
    opacity 0.18s ease;

    z-index:9999;

    overflow:hidden;
}

.image-modal.active{

    opacity:1;

    visibility:visible;
}

/* WRAPPER */

.modal-wrapper{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:fit-content;

    height:fit-content;

    isolation:isolate;
}

/* IMAGE */

/* MODAL */

.image-modal{

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    background:
    rgba(0,0,0,0.96);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:
    opacity 0.18s ease;

    z-index:9999;

    overflow:hidden;
}

.image-modal.active{

    opacity:1;

    visibility:visible;
}

/* WRAPPER */

.modal-wrapper{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:100vw;

    height:100vh;

    overflow:hidden;
}

/* IMAGE */

.modal-image{

    width:auto;

    height:auto;

    max-width:88vw;

    max-height:88vh;

    object-fit:contain;

    transition:
    transform 0.14s ease;

    transform-origin:center center;

    cursor:zoom-in;

    user-select:none;

    -webkit-user-select:none;

    -webkit-user-drag:none;

    outline:none;

    border:none;

    box-shadow:none;

    background:none;

    position:relative;

    z-index:1;
}

.modal-image.zoomed{

    cursor:zoom-out;
}

/* CLEAN CLOSE BUTTON */

.modal-close{

    position:fixed;

    top:26px;

    right:32px;

    background:none;

    border:none;

    outline:none;

    box-shadow:none;

    color:white;

    font-size:3rem;

    font-weight:200;

    line-height:1;

    cursor:pointer;

    z-index:100000;

    transition:
    opacity 0.16s ease,
    transform 0.16s ease;

    padding:0;

    width:auto;

    height:auto;
}

.modal-close:hover{

    opacity:0.7;

    transform:scale(1.08);
}
/* MOBILE */

@media(max-width:900px){

.hero-section{
    grid-template-columns:1fr;
}

.hero-side-info{
    grid-template-columns:1fr;
}

.editorial-grid{
    grid-template-columns:1fr;
}

.gallery-grid{
    grid-template-columns:1fr;
}

}

@media(max-width:767px){

.desktop-nav{
    display:none;
}

.hero-buttons{
    flex-direction:column;
    align-items:flex-start;
}

.hero-button{
    width:100%;
}

.modal-close{

    top:14px;

    right:14px;
}

}