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

html{
    scroll-behavior:smooth;
}

body{
    background:#050505;
    color:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

::selection{
    background:#d4af37;
    color:#050505;
}

/* =========================================
   NAVBAR
========================================= */

.navbar{
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    width:100%;
    min-height:92px;

    padding:0 6%;

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

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.94),
        rgba(0,0,0,.15),
        transparent
    );

    border-bottom:1px solid rgba(255,255,255,.05);
}

.logo{
    color:#d4af37;

    font-size:23px;
    font-weight:900;

    letter-spacing:9px;
}

.nav-links{
    display:flex;
    align-items:center;

    gap:34px;
}

.nav-links a{
    position:relative;

    color:#a8a8a8;

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

    letter-spacing:2.5px;

    text-transform:uppercase;

    transition:
        color .3s ease,
        opacity .3s ease;
}

.nav-links a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:1px;

    background:#d4af37;

    transition:width .3s ease;
}

.nav-links a:hover{
    color:#ffffff;
}

.nav-links a:hover::after{
    width:100%;
}

.nav-links .lucius-link{
    color:#d4af37;
}

/* =========================================
   HERO
========================================= */

.bonafida-hero{
    position:relative;

    min-height:100vh;

    padding:140px 7% 90px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.99) 0%,
            rgba(0,0,0,.92) 28%,
            rgba(0,0,0,.67) 53%,
            rgba(0,0,0,.28) 76%,
            rgba(0,0,0,.12) 100%
        ),
        linear-gradient(
            to top,
            #050505 0%,
            rgba(5,5,5,.70) 19%,
            transparent 45%
        ),
        url("images/backgrounds/bonafida-home.jpg");

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

.hero-atmosphere{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 24% 42%,
            rgba(212,175,55,.09),
            transparent 24%
        ),
        linear-gradient(
            115deg,
            transparent 45%,
            rgba(255,255,255,.025) 46%,
            transparent 47%
        );

    pointer-events:none;
}

.bonafida-hero::before{
    content:"";

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.015) 1px,
            transparent 1px
        );

    background-size:100% 5px;

    opacity:.28;

    pointer-events:none;
}

.bonafida-hero::after{
    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:200px;

    background:linear-gradient(
        to bottom,
        transparent,
        #050505
    );

    pointer-events:none;
}

.bonafida-content{
    position:relative;
    z-index:5;

    width:min(760px, 62%);
}

.hero-code{
    display:block;

    margin-bottom:35px;

    color:#5f5f5f;

    font-size:9px;
    font-weight:800;

    letter-spacing:5px;
}

.small-title{
    display:block;

    margin-bottom:20px;

    color:#d4af37;

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

    letter-spacing:6px;

    text-transform:uppercase;
}

.bonafida-content h1{
    max-width:900px;

    margin-bottom:30px;

    font-size:clamp(54px, 7.4vw, 108px);
    font-weight:900;

    line-height:.91;

    letter-spacing:-2px;

    text-transform:uppercase;

    text-shadow:
        0 18px 60px rgba(0,0,0,.8);
}

.bonafida-content h1 span{
    color:transparent;

    -webkit-text-stroke:1px rgba(212,175,55,.78);

    text-shadow:none;
}

.bonafida-description{
    max-width:520px;

    margin-bottom:38px;

    color:#a5a5a5;

    font-size:16px;
    line-height:1.9;
}

.hero-actions{
    display:flex;
    align-items:center;

    gap:24px;

    flex-wrap:wrap;
}

.gold-button{
    min-height:54px;

    padding:0 30px;

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

    color:#050505;

    background:#d4af37;

    border:1px solid #d4af37;

    font-size:9px;
    font-weight:900;

    letter-spacing:3px;

    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.gold-button:hover{
    color:#ffffff;

    background:transparent;

    transform:translateY(-3px);

    box-shadow:0 15px 50px rgba(212,175,55,.10);
}

.access-note{
    color:#707070;

    font-size:8px;
    font-weight:800;

    letter-spacing:3px;
}

.hero-index{
    position:absolute;

    right:4%;
    bottom:75px;

    z-index:3;

    color:rgba(255,255,255,.14);

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

    letter-spacing:6px;

    writing-mode:vertical-rl;

    transform:rotate(180deg);
}

/* =========================================
   ARCHIVE
========================================= */

.archive-section{
    position:relative;

    padding:120px 6% 135px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212,175,55,.05),
            transparent 28%
        ),
        #050505;
}

.archive-heading{
    max-width:1450px;

    margin:0 auto 70px;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:70px;

    align-items:end;
}

.archive-heading h2{
    max-width:730px;

    color:#ffffff;

    font-size:clamp(42px, 5.8vw, 78px);
    font-weight:800;

    line-height:1.03;

    letter-spacing:-2px;
}

.archive-heading > p{
    max-width:520px;

    color:#7d7d7d;

    font-size:15px;
    line-height:1.9;
}

/* =========================================
   MYSTERY GRID
========================================= */

.mystery-grid{
    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:22px;
}

.mystery-card{
    position:relative;

    overflow:hidden;

    background:#0a0a0a;

    border:1px solid rgba(255,255,255,.065);

    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.mystery-card:hover{
    transform:translateY(-9px);

    border-color:rgba(212,175,55,.30);

    box-shadow:
        0 35px 85px rgba(0,0,0,.50);
}

.mystery-card.featured{
    transform:translateY(-22px);

    border-color:rgba(212,175,55,.16);
}

.mystery-card.featured:hover{
    transform:translateY(-31px);
}

.mystery-visual{
    position:relative;

    height:520px;

    overflow:hidden;

    background:#080808;
}

.mystery-visual img{
    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        blur(13px)
        brightness(.42)
        grayscale(.32);

    transform:scale(1.10);

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

.mystery-card:hover .mystery-visual img{
    filter:
        blur(7px)
        brightness(.55)
        grayscale(.15);

    transform:scale(1.15);
}

.visual-obscure{
    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.22) 42%,
            rgba(0,0,0,.48) 100%
        ),
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(212,175,55,.025) 50%,
            transparent 100%
        );

    pointer-events:none;
}

.visual-obscure::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.018),
            rgba(255,255,255,.018) 1px,
            transparent 1px,
            transparent 5px
        );

    opacity:.4;
}

.classified-tag{
    position:absolute;

    top:23px;
    left:22px;

    z-index:4;

    padding:9px 12px;

    color:#d4af37;

    border:1px solid rgba(212,175,55,.30);

    background:rgba(0,0,0,.50);

    backdrop-filter:blur(10px);

    font-size:8px;
    font-weight:900;

    letter-spacing:3px;
}

.drop-number{
    position:absolute;

    right:22px;
    bottom:18px;

    z-index:4;

    color:rgba(255,255,255,.22);

    font-size:58px;
    font-weight:900;

    line-height:1;
}

.mystery-info{
    padding:27px 25px 29px;
}

.mystery-info > span{
    display:block;

    margin-bottom:14px;

    color:#d4af37;

    font-size:8px;
    font-weight:900;

    letter-spacing:4px;
}

.mystery-info h3{
    margin-bottom:13px;

    color:#ffffff;

    font-size:23px;
    font-weight:800;

    letter-spacing:.5px;
}

.mystery-info p{
    min-height:50px;

    margin-bottom:24px;

    color:#777777;

    font-size:13px;
    line-height:1.7;
}

.release-status{
    display:inline-flex;
    align-items:center;

    gap:9px;

    color:#8b8b8b;

    font-size:8px;
    font-weight:900;

    letter-spacing:3px;
}

.status-dot{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#d4af37;

    box-shadow:
        0 0 14px rgba(212,175,55,.80);
}

/* =========================================
   INTERRUPTION
========================================= */

.interruption-section{
    padding:120px 6%;

    background:#010101;

    text-align:center;

    overflow:hidden;
}

.interruption-line{
    width:min(750px, 80%);
    height:1px;

    margin:0 auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.30),
            transparent
        );
}

.interruption-section p{
    margin-top:50px;

    color:#646464;

    font-size:9px;
    font-weight:900;

    letter-spacing:5px;
}

.interruption-section h2{
    margin:20px auto 50px;

    color:#ffffff;

    font-size:clamp(44px, 7vw, 92px);
    font-weight:900;

    line-height:.95;

    letter-spacing:-2px;
}

.interruption-section h2 span{
    display:block;

    color:#d4af37;
}

/* =========================================
   MANIFESTO
========================================= */

.manifesto-section{
    padding:130px 6%;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(212,175,55,.05),
            transparent 30%
        ),
        #070707;
}

.manifesto-layout{
    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:.25fr 1fr .75fr;

    gap:55px;

    align-items:center;
}

.manifesto-number{
    align-self:start;

    color:rgba(212,175,55,.28);

    font-size:110px;
    font-weight:900;

    line-height:1;
}

.manifesto-content h2{
    max-width:700px;

    margin-bottom:30px;

    color:#ffffff;

    font-size:clamp(46px, 6vw, 84px);
    font-weight:900;

    line-height:.98;

    letter-spacing:-2px;
}

.manifesto-content p{
    max-width:650px;

    color:#909090;

    font-size:15px;
    line-height:1.9;
}

.manifesto-secondary{
    margin-top:22px;

    color:#d4af37 !important;

    font-size:12px !important;

    letter-spacing:1px;
}

.manifesto-visual{
    position:relative;

    min-height:520px;

    display:flex;
    flex-direction:column;

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

    gap:15px;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(0,0,0,.35),
            rgba(0,0,0,.72)
        ),
        url("images/backgrounds/bonafida-home.jpg");

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

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

.manifesto-visual::after{
    content:"";

    position:absolute;

    inset:14px;

    border:1px solid rgba(212,175,55,.15);
}

.manifesto-visual span{
    position:relative;
    z-index:3;

    color:#d4af37;

    font-size:8px;
    font-weight:900;

    letter-spacing:5px;
}

.manifesto-visual strong{
    position:relative;
    z-index:3;

    color:rgba(255,255,255,.88);

    font-size:150px;
    font-weight:900;

    line-height:.9;
}

/* =========================================
   PRINCIPLES
========================================= */

.principles-section{
    padding:90px 6%;

    background:#030303;

    border-top:1px solid rgba(255,255,255,.05);
    border-bottom:1px solid rgba(255,255,255,.05);
}

.principles-grid{
    max-width:1350px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:1px;

    background:rgba(255,255,255,.06);
}

.principle{
    min-height:260px;

    padding:42px 34px;

    background:#080808;

    transition:
        background .35s ease;
}

.principle:hover{
    background:#0c0c0c;
}

.principle > span{
    display:block;

    margin-bottom:42px;

    color:#d4af37;

    font-size:9px;
    font-weight:900;

    letter-spacing:4px;
}

.principle h3{
    margin-bottom:15px;

    color:#ffffff;

    font-size:17px;

    letter-spacing:2px;
}

.principle p{
    color:#747474;

    font-size:13px;
    line-height:1.8;
}

/* =========================================
   RELEASE
========================================= */

.release-section{
    position:relative;

    min-height:780px;

    padding:130px 25px;

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

    overflow:hidden;

    background:
        linear-gradient(
            rgba(0,0,0,.78),
            rgba(0,0,0,.94)
        ),
        url("images/backgrounds/bonafida-home.jpg");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

.release-section::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(212,175,55,.08),
            transparent 36%
        );
}

.release-panel{
    position:relative;
    z-index:3;

    width:min(970px,100%);

    padding:70px 65px;

    text-align:center;

    background:
        rgba(5,5,5,.80);

    border:1px solid rgba(212,175,55,.18);

    backdrop-filter:blur(16px);
}

.release-panel::before{
    content:"";

    position:absolute;

    inset:14px;

    border:1px solid rgba(255,255,255,.035);

    pointer-events:none;
}

.release-panel h2{
    max-width:780px;

    margin:0 auto 25px;

    color:#ffffff;

    font-size:clamp(42px, 5.8vw, 76px);
    font-weight:900;

    line-height:1;

    letter-spacing:-2px;
}

.release-panel > p{
    max-width:660px;

    margin:0 auto 45px;

    color:#979797;

    font-size:15px;
    line-height:1.85;
}

.release-meta{
    margin-bottom:45px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    border-top:1px solid rgba(255,255,255,.07);
    border-bottom:1px solid rgba(255,255,255,.07);
}

.release-meta div{
    padding:23px 15px;
}

.release-meta div:not(:last-child){
    border-right:1px solid rgba(255,255,255,.07);
}

.release-meta span{
    display:block;

    margin-bottom:8px;

    color:#555555;

    font-size:7px;
    font-weight:900;

    letter-spacing:3px;
}

.release-meta strong{
    color:#d4af37;

    font-size:10px;

    letter-spacing:2px;
}

.release-button{
    min-height:54px;

    padding:0 32px;

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

    color:#050505;

    background:#d4af37;

    border:1px solid #d4af37;

    font-size:9px;
    font-weight:900;

    letter-spacing:3px;

    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;
}

.release-button:hover{
    color:#ffffff;

    background:transparent;

    transform:translateY(-3px);
}

/* =========================================
   FOOTER
========================================= */

.clothing-footer{
    padding:55px 6% 35px;

    background:#010101;

    border-top:1px solid rgba(212,175,55,.08);
}

.footer-top{
    padding-bottom:38px;

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

    border-bottom:1px solid rgba(255,255,255,.06);
}

.footer-logo{
    color:#d4af37;

    font-size:23px;
    font-weight:900;

    letter-spacing:9px;
}

.footer-top > span{
    color:#4e4e4e;

    font-size:8px;
    font-weight:800;

    letter-spacing:4px;
}

.footer-bottom{
    padding-top:30px;

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

    gap:30px;

    flex-wrap:wrap;
}

.footer-bottom p{
    color:#575757;

    font-size:10px;
}

.footer-links{
    display:flex;

    gap:25px;

    flex-wrap:wrap;
}

.footer-links a{
    color:#707070;

    font-size:9px;
    font-weight:800;

    letter-spacing:2px;

    transition:color .3s ease;
}

.footer-links a:hover{
    color:#d4af37;
}

.copyright{
    color:#454545;

    font-size:8px;

    letter-spacing:2px;
}

/* =========================================
   TABLET
========================================= */

@media(max-width:1050px){

    .archive-heading{
        grid-template-columns:1fr;

        gap:30px;
    }

    .mystery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .mystery-card.featured{
        transform:none;
    }

    .mystery-card.featured:hover{
        transform:translateY(-9px);
    }

    .manifesto-layout{
        grid-template-columns:1fr 1fr;
    }

    .manifesto-number{
        display:none;
    }
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:760px){

    .navbar{
        min-height:76px;

        padding:0 20px;
    }

    .logo{
        font-size:18px;

        letter-spacing:6px;
    }

    .nav-links{
        display:none;
    }

    .bonafida-hero{
        min-height:100svh;

        padding:115px 22px 65px;

        align-items:flex-end;

        background:
            linear-gradient(
                to top,
                #050505 0%,
                rgba(0,0,0,.92) 48%,
                rgba(0,0,0,.30) 100%
            ),
            url("images/backgrounds/bonafida-home.jpg");

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

    .bonafida-content{
        width:100%;
    }

    .hero-code{
        margin-bottom:20px;
    }

    .small-title{
        font-size:8px;

        letter-spacing:4px;
    }

    .bonafida-content h1{
        font-size:48px;

        letter-spacing:-1px;
    }

    .bonafida-description{
        font-size:14px;
    }

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

    .gold-button{
        width:100%;
    }

    .hero-index{
        display:none;
    }

    .archive-section{
        padding:85px 20px 100px;
    }

    .archive-heading{
        margin-bottom:45px;
    }

    .archive-heading h2{
        font-size:44px;
    }

    .archive-heading > p{
        font-size:14px;
    }

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

    .mystery-visual{
        height:430px;
    }

    .mystery-card.featured{
        transform:none;
    }

    .interruption-section{
        padding:90px 20px;
    }

    .interruption-section h2{
        font-size:47px;
    }

    .manifesto-section{
        padding:90px 20px;
    }

    .manifesto-layout{
        grid-template-columns:1fr;
    }

    .manifesto-content h2{
        font-size:48px;
    }

    .manifesto-visual{
        min-height:420px;
    }

    .manifesto-visual strong{
        font-size:120px;
    }

    .principles-section{
        padding:70px 20px;
    }

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

    .principle{
        min-height:auto;

        padding:35px 28px;
    }

    .principle > span{
        margin-bottom:25px;
    }

    .release-section{
        min-height:650px;

        padding:90px 18px;

        background-attachment:scroll;
    }

    .release-panel{
        padding:50px 22px;
    }

    .release-panel h2{
        font-size:43px;
    }

    .release-meta{
        grid-template-columns:1fr;
    }

    .release-meta div:not(:last-child){
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.07);
    }

    .release-button{
        width:100%;
    }

    .clothing-footer{
        padding:45px 20px 30px;
    }

    .footer-top{
        align-items:flex-start;
        flex-direction:column;

        gap:15px;
    }

    .footer-bottom{
        align-items:flex-start;
        flex-direction:column;
    }

    .footer-links{
        flex-direction:column;

        gap:13px;
    }
}