@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap');

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

:root {
    --gold: #d8aa72;
    --gold-light: #f1d3aa;
    --text: #f5f1eb;
    --muted: #b9b0a7;
    --dark: #090b10;
    --panel: rgba(10, 12, 17, .68);
    --panel-solid: #101217;
    --border: rgba(216, 170, 114, .27);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--dark);
    color: var(--text);
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}

a {
    color: inherit;
}

::selection {
    background: var(--gold);
    color: #111;
}

/* ================= NAV ================= */

nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    width: 100%;
    padding: 22px 5%;

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

    transition: .35s ease;
}

nav.scrolled {
    padding-top: 14px;
    padding-bottom: 14px;
    background: rgba(7, 8, 12, .88);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(216,170,114,.15);
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;

    text-decoration: none;

    font-family: "Cinzel", serif;
    color: var(--gold-light);
    font-size: 24px;
    font-weight: 700;
}

.brand-icon {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    border: 1px solid var(--gold);
    transform: rotate(45deg);
}

.brand-icon span {
    transform: rotate(-45deg);
    font-size: 11px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    text-decoration: none;
    font-size: 14px;
    color: #eee;
    transition: color .2s;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--gold-light);
}

.join-small {
    border: 1px solid var(--gold);
    border-radius: 50px;
    padding: 12px 22px;

    background: rgba(30,20,14,.3);

    transition: .25s !important;
}

.join-small:hover {
    background: var(--gold);
    color: #15100c !important;
    box-shadow: 0 0 30px rgba(216,170,114,.22);
}

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

.hero {
    min-height: 100vh;
    position: relative;

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

    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: -4%;

    background:
        linear-gradient(
            to bottom,
            rgba(5,7,12,.12),
            rgba(5,7,12,.38) 55%,
            #090b10 100%
        ),
        url("/assets/background.png");

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

    transform: scale(1.05);
    will-change: transform;
}

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

    background:
        radial-gradient(
            circle at center,
            transparent 15%,
            rgba(0,0,0,.12) 55%,
            rgba(0,0,0,.62) 120%
        );

    pointer-events: none;
}

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

    width: min(1100px, 91%);
    padding: 120px 0 45px;

    text-align: center;
}

.hero-logo {
    font-family: "Cinzel", serif;

    font-size: clamp(55px, 9vw, 125px);
    line-height: .9;

    color: var(--gold-light);

    text-shadow:
        0 5px 4px rgba(0,0,0,.4),
        0 15px 40px rgba(0,0,0,.8);
}

.tagline {
    margin-top: 18px;

    font-family: "Cinzel", serif;
    font-size: clamp(10px, 1.4vw, 17px);

    letter-spacing: 8px;
    color: #e7ceb1;
}

.separator {
    width: 230px;
    height: 1px;

    margin: 34px auto;

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

.hero h2 {
    font-family: "Cinzel", serif;
    font-size: clamp(20px, 2.3vw, 29px);

    font-weight: 500;
    letter-spacing: 5px;
}

.hero-description {
    max-width: 650px;
    margin: 15px auto 0;

    line-height: 1.8;
    color: #ded8d1;
}

/* ================= STATUS CARDS ================= */

.status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 14px;
    margin-top: 38px;
}

.status-card {
    position: relative;

    min-height: 135px;
    padding: 22px;

    background: rgba(8,10,14,.69);
    border: 1px solid var(--border);
    border-radius: 7px;

    backdrop-filter: blur(14px);

    transition: .3s ease;
    overflow: hidden;
}

.status-card:hover {
    transform: translateY(-7px);
    border-color: rgba(216,170,114,.7);

    background: rgba(14,15,20,.86);
}

.status-icon {
    font-size: 26px;
    color: var(--gold-light);
    margin-bottom: 12px;
}

.status-card h3 {
    font-family: "Cinzel", serif;
    font-size: 12px;
    letter-spacing: 1px;
}

.status-card p {
    margin-top: 7px;

    color: var(--gold);
    font-size: 9px;
    letter-spacing: 2px;
}

.progress {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 3px;

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

.progress span {
    display: block;

    height: 100%;

    background: linear-gradient(
        90deg,
        #9d7046,
        var(--gold-light)
    );

    box-shadow: 0 0 12px rgba(216,170,114,.6);

    transform-origin: left;
    transform: scaleX(0);

    transition: transform 1.5s ease;
}

.progress.animate span {
    transform: scaleX(1);
}

/* ================= BUTTONS ================= */

.main-button {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    margin-top: 27px;
    padding: 16px 29px;

    text-decoration: none;

    border: 1px solid var(--gold);
    border-radius: 5px;

    background: rgba(17,14,13,.72);

    font-size: 12px;
    letter-spacing: 1px;

    backdrop-filter: blur(10px);

    transition: .25s;
}

.main-button:hover {
    color: #17110d;
    background: var(--gold-light);

    transform: translateY(-3px);

    box-shadow:
        0 10px 40px rgba(0,0,0,.35),
        0 0 30px rgba(216,170,114,.25);
}

/* ================= CONTENT ================= */

.section {
    padding: 110px 7%;
}

.section-inner {
    max-width: 1100px;
    margin: auto;
}

.eyebrow {
    margin-bottom: 12px;

    color: var(--gold);

    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.section-title {
    font-family: "Cinzel", serif;

    font-size: clamp(30px, 4vw, 52px);

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

.section-text {
    max-width: 700px;

    margin-top: 18px;

    color: var(--muted);
    line-height: 1.9;
}

.devlog-cta {
    background:
        linear-gradient(
            120deg,
            rgba(216,170,114,.08),
            transparent 60%
        );
}

/* ================= INTERNAL PAGES ================= */

.page-hero {
    min-height: 55vh;

    display: flex;
    align-items: flex-end;

    padding: 150px 7% 70px;

    background:
        linear-gradient(
            to bottom,
            rgba(5,7,12,.3),
            #090b10
        ),
        url("/assets/background.png");

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

.page-hero-inner {
    width: 100%;
    max-width: 1100px;
    margin: auto;
}

.page-hero h1 {
    margin-top: 10px;

    font-family: "Cinzel", serif;
    font-size: clamp(45px, 7vw, 85px);

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

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 18px;
    margin-top: 45px;
}

.feature {
    padding: 30px;

    background: var(--panel-solid);

    border: 1px solid var(--border);
    border-radius: 8px;

    transition: .3s;
}

.feature:hover {
    transform: translateY(-5px);
    border-color: rgba(216,170,114,.6);
}

.feature h3 {
    margin-bottom: 12px;

    font-family: "Cinzel", serif;
    color: var(--gold-light);
}

.feature p {
    color: var(--muted);
    line-height: 1.7;
    font-size: 14px;
}

/* ================= REVEAL ================= */

.reveal {
    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

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

footer {
    padding: 35px 7%;

    text-align: center;

    border-top: 1px solid rgba(216,170,114,.12);

    color: #766e67;

    font-family: "Cinzel", serif;
    font-size: 9px;
    letter-spacing: 3px;
}

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

@media(max-width:850px) {

    .nav-links a:not(.join-small) {
        display: none;
    }

    .brand {
        font-size: 17px;
    }

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

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

    .tagline {
        letter-spacing: 4px;
    }

}

@media(max-width:520px) {

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

    .hero-content {
        padding-top: 110px;
    }

    .hero-logo {
        font-size: 48px;
    }

}

/* =========================================
   DEVLOGS
========================================= */

.devlog {
    background: var(--dark);
    min-height: 100vh;
}

.devlog-header {
    min-height: 78vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 1050px;
    margin: 0 auto;
    padding: 160px 40px 90px;
}

.devlog-header .eyebrow {
    color: var(--gold);
    font-size: .75rem;
    letter-spacing: .22em;
    margin-bottom: 24px;
}

.devlog-header h1 {
    font-family: "Cinzel", serif;
    font-size: clamp(3.5rem, 8vw, 7rem);
    line-height: .95;
    margin: 0 0 32px;
    color: var(--text);
}

.devlog-intro {
    max-width: 650px;
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--muted);
}

.devlog-meta {
    display: flex;
    gap: 12px;
    margin-top: 35px;
    font-size: .72rem;
    letter-spacing: .18em;
    color: var(--gold);
}

.devlog-content {
    max-width: 820px;
    margin: 0 auto;
    padding: 80px 40px 140px;
}

.devlog-content p {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.9;
    margin: 0 0 24px;
}

.devlog-content .lead {
    font-family: "Cinzel", serif;
    color: var(--text);
    font-size: 1.65rem;
    line-height: 1.6;
    margin-bottom: 35px;
}

.devlog-content strong {
    color: var(--text);
    font-weight: 600;
}

.devlog-content h2 {
    font-family: "Cinzel", serif;
    color: var(--text);
    font-size: clamp(1.8rem, 4vw, 2.7rem);
    line-height: 1.2;
    margin: 0 0 35px;
}

.devlog-separator {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 90px 0 30px;
    color: var(--gold);
    font-size: .72rem;
    letter-spacing: .2em;
}

.devlog-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(
        90deg,
        var(--border),
        transparent
    );
}

.devlog-quote {
    border-left: 1px solid var(--gold);
    margin: 65px 0;
    padding: 25px 0 25px 35px;
    font-family: "Cinzel", serif;
    font-size: 1.45rem;
    line-height: 1.6;
    color: var(--gold-light);
}

.devlog-ending {
    margin-top: 120px;
    padding: 60px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.02);
}

.devlog-ending > span {
    color: var(--gold);
    font-size: .7rem;
    letter-spacing: .22em;
}

.devlog-ending h2 {
    margin-top: 20px;
}

.devlog-ending p {
    max-width: 550px;
    margin-bottom: 35px;
}

@media (max-width: 700px) {

    .devlog-header {
        min-height: 70vh;
        padding: 130px 24px 60px;
    }

    .devlog-content {
        padding: 50px 24px 100px;
    }

    .devlog-ending {
        padding: 35px 25px;
    }

    .devlog-meta {
        flex-wrap: wrap;
    }
}

/* =========================================
   ACTUALITES / DEVLOG INDEX
========================================= */

.news-page {
    min-height: 100vh;
    background: var(--dark);
}

.news-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 190px 40px 120px;
}

.news-hero .eyebrow,
.section-label {
    color: var(--gold);
    font-size: .7rem;
    letter-spacing: .23em;
    text-transform: uppercase;
}

.news-hero h1 {
    margin: 25px 0 30px;
    font-family: "Cinzel", serif;
    font-size: clamp(4rem, 9vw, 8rem);
    line-height: .92;
    color: var(--text);
}

.news-hero > p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1.8;
}


/* FEATURED DEVLOG */

.latest-devlog {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 140px;
}

.latest-devlog > .section-label {
    margin-bottom: 25px;
}

.featured-devlog {
    position: relative;
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 480px;
    overflow: hidden;

    border: 1px solid var(--border);
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(216,170,114,.12),
            transparent 35%
        ),
        rgba(255,255,255,.02);

    color: inherit;
    text-decoration: none;

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

.featured-devlog:hover {
    transform: translateY(-6px);
    border-color: rgba(216,170,114,.6);
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(216,170,114,.18),
            transparent 40%
        ),
        rgba(255,255,255,.035);
}

.featured-number {
    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding-top: 65px;

    border-right: 1px solid var(--border);

    font-family: "Cinzel", serif;
    font-size: clamp(5rem, 10vw, 9rem);
    line-height: 1;
    color: rgba(216,170,114,.18);
}

.featured-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 70px 80px;
}

.devlog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    color: var(--gold);
    font-size: .68rem;
    letter-spacing: .17em;
}

.featured-content h2 {
    margin: 24px 0;

    font-family: "Cinzel", serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: 1;

    color: var(--text);
}

.featured-content p {
    max-width: 650px;
    margin: 0 0 35px;

    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

.read-more {
    color: var(--gold-light);
    font-size: .72rem;
    letter-spacing: .18em;
}


/* ARCHIVES */

.devlog-archive {
    border-top: 1px solid rgba(255,255,255,.06);
    padding: 130px 40px;
}

.archive-heading {
    max-width: 1200px;
    margin: 0 auto 70px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: end;
}

.archive-heading h2 {
    margin: 20px 0 0;

    font-family: "Cinzel", serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1;

    color: var(--text);
}

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

    color: var(--muted);
    line-height: 1.8;
}


/* LISTE */

.devlog-list {
    max-width: 1200px;
    margin: 0 auto;

    border-top: 1px solid var(--border);
}

.devlog-row {
    display: grid;
    grid-template-columns: 130px 1fr 80px;
    gap: 35px;
    align-items: center;

    min-height: 210px;
    padding: 35px 15px;

    border-bottom: 1px solid var(--border);

    color: inherit;
    text-decoration: none;

    transition:
        background .3s ease,
        padding .3s ease;
}

.devlog-row:hover {
    padding-left: 30px;
    padding-right: 30px;
    background: rgba(216,170,114,.035);
}

.devlog-row-number {
    font-family: "Cinzel", serif;
    font-size: 3.5rem;
    color: rgba(216,170,114,.28);
}

.devlog-row-content h3 {
    margin: 12px 0 12px;

    font-family: "Cinzel", serif;
    font-size: clamp(1.5rem, 3vw, 2.3rem);

    color: var(--text);
}

.devlog-row-content p {
    max-width: 650px;
    margin: 0;

    color: var(--muted);
    line-height: 1.7;
}

.devlog-arrow {
    justify-self: end;

    color: var(--gold);
    font-size: 2rem;

    transition: transform .3s ease;
}

.devlog-row:hover .devlog-arrow {
    transform: translateX(8px);
}


/* DISCORD */

.news-discord {
    max-width: 1200px;
    margin: 0 auto 140px;
    padding: 70px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;

    border: 1px solid var(--border);

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(216,170,114,.1),
            transparent 35%
        ),
        rgba(255,255,255,.02);
}

.news-discord h2 {
    margin: 20px 0;

    font-family: "Cinzel", serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    line-height: 1.05;

    color: var(--text);
}

.news-discord p {
    max-width: 550px;
    margin: 0;

    color: var(--muted);
    line-height: 1.8;
}


/* MOBILE */

@media (max-width: 800px) {

    .news-hero {
        padding: 150px 24px 80px;
    }

    .latest-devlog {
        padding: 0 24px 100px;
    }

    .featured-devlog {
        grid-template-columns: 1fr;
    }

    .featured-number {
        justify-content: flex-start;

        padding: 35px 30px 20px;

        border-right: none;
        border-bottom: 1px solid var(--border);

        font-size: 4.5rem;
    }

    .featured-content {
        padding: 45px 30px;
    }

    .devlog-archive {
        padding: 90px 24px;
    }

    .archive-heading {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .devlog-row {
        grid-template-columns: 65px 1fr 25px;
        gap: 15px;

        min-height: 180px;
        padding: 30px 5px;
    }

    .devlog-row:hover {
        padding-left: 5px;
        padding-right: 5px;
    }

    .devlog-row-number {
        font-size: 2rem;
    }

    .devlog-card-meta {
        gap: 6px;
        font-size: .57rem;
    }

    .devlog-row-content p {
        font-size: .9rem;
    }

    .news-discord {
        margin: 0 24px 90px;
        padding: 45px 30px;

        flex-direction: column;
        align-items: flex-start;
    }
}