/* ==========================================================
   P. J. Ribeiro
   Version 2.0
==========================================================*/

:root{

    --bg:#07101D;
    --bg2:#10274A;
    --gold:#D4AF37;
    --gold-light:#EFD28A;

    --white:#F4F4F4;
    --text:#D8DCE3;

    --container:1280px;

    --transition:.35s ease;

}

/* ---------- RESET ---------- */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Inter,sans-serif;

    background:

    radial-gradient(
        circle at top right,
        rgba(34,78,150,.14),
        transparent 28%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(18,45,90,.18),
        transparent 45%
    ),

    linear-gradient(
        180deg,
        #0B1830 0%,
        #08111F 35%,
        #06101C 100%
    );

    color:var(--white);

    overflow-x:hidden;

}

html{

    scroll-behavior:smooth;

}

/* ---------- GLOBAL ---------- */

.container{

    width:min(92%,var(--container));

    margin:auto;

}

section{

    padding:110px 0;

}

h1,h2,h3{

    font-family:Cinzel,serif;

    font-weight:600;

}

p{

    color:var(--text);

    line-height:1.8;

}

img{

    display:block;

    max-width:100%;

}

/* ---------- HEADER ---------- */

/* ---------- HEADER ---------- */

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:82px;

    z-index:999;

    background:rgba(5,10,18,.55);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

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

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        box-shadow .35s ease;

}

/* Header after scrolling */

header.scrolled{

    background:rgba(5,10,18,.92);

    backdrop-filter:blur(20px);

    box-shadow:0 10px 35px rgba(0,0,0,.35);

}

.nav-container{

    height:82px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.brand{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

}

.brand img{

    width:54px;

    height:54px;

}

.brand span{

    font-family:Cinzel,serif;

    font-size:1.45rem;

    color:var(--gold-light);

}

nav ul{

    display:flex;

    list-style:none;

    gap:38px;

}

nav a{

    position:relative;

    text-decoration:none;

    color:var(--gold);

    transition:.35s;

    font-family:Cinzel,serif;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.35s;

}

nav a:hover::after{

    width:100%;

}

nav a:hover{

    color:var(--gold-light);

    text-shadow:0 0 10px rgba(230,195,95,.35);

}

/* ---------- LANGUAGE ---------- */

.language{

    display:flex;

    align-items:center;

    gap:10px;

    position:relative;

}

.lang-btn{

    position:relative;

    background:none;

    border:none;

    color:var(--gold);

    font-family:Cinzel,serif;

    font-size:1rem;

    cursor:pointer;

    padding:4px 2px;

    transition:.25s;

}

.lang-btn:hover{

    color:var(--gold-light);

}

.lang-btn.active{

    color:var(--gold-light);

}

.lang-btn.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:100%;

    height:2px;

    background:var(--gold);

}

.divider{

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

    font-family:Cinzel,serif;

}

.tooltip{

    position:absolute;

    top:32px;

    left:50%;

    transform:translateX(-50%);

    opacity:0;

    pointer-events:none;

    background:#111827;

    color:var(--gold-light);

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

    border-radius:6px;

    padding:6px 10px;

    font-size:.75rem;

    white-space:nowrap;

    transition:.25s;

    font-family:Inter,sans-serif;

}

.lang-btn:hover .tooltip{

    opacity:1;

}

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

#hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:120px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.15fr .85fr;

    align-items:center;

    gap:80px;

}

.hero-text{

    max-width:640px;

}

.eyebrow{

    display:inline-block;

    color:var(--gold);

    letter-spacing:4px;

    font-size:.85rem;

    text-transform:uppercase;

    margin-bottom:20px;

}

.hero-text h1{

    font-size:clamp(3.5rem,7vw,6rem);

    color:var(--gold-light);

    line-height:.95;

    margin-bottom:28px;

}

.hero-text p{

    font-size:1.25rem;

    max-width:620px;

    margin-bottom:42px;

}

/* ---------- BUTTONS ---------- */

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    text-decoration:none;

    transition:var(--transition);

    border-radius:4px;

    font-family:Cinzel,serif;

    letter-spacing:.5px;

}

.primary{

    background:linear-gradient(
    180deg,
    var(--gold-light),
    var(--gold));

    color:#111;

    box-shadow:
    0 12px 30px rgba(212,175,55,.25);

}

.primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 40px rgba(212,175,55,.35);

}

.secondary{

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

    color:var(--gold);

}

.secondary:hover{

    background:rgba(212,175,55,.08);

}

/* ---------- COVER ---------- */

.hero-cover{

    position:relative;

    display:flex;

    justify-content:center;

}

/* blue glow */

.hero-cover::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(45,104,255,.35),
    transparent 70%);

    filter:blur(30px);

    z-index:0;

}

.hero-cover img{

    position:relative;

    width:360px;

    z-index:1;

    box-shadow:

    0 40px 70px rgba(0,0,0,.55),

    0 0 60px rgba(40,100,255,.15);

    animation:floatBook 8s ease-in-out infinite;

}

/* ---------- FLOAT ---------- */

@keyframes floatBook{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

/* ==========================================================
   DISCOVER THE NOVEL
==========================================================*/

.section{
    padding:120px 0;
}

.narrow{
    max-width:820px;
}

.section-tag{

    display:inline-block;

    color:var(--gold);

    font-family:Cinzel,serif;

    letter-spacing:3px;

    font-size:.85rem;

    margin-bottom:18px;

    text-transform:uppercase;

}

.section h2{

    font-size:3rem;

    color:var(--gold-light);

    margin-bottom:35px;

}

.section p{

    font-size:1.15rem;

    margin-bottom:24px;

    max-width:760px;

}

/* ==========================================================
   WORLD
==========================================================*/

.dark{

    background:rgba(255,255,255,.02);

    border-top:1px solid rgba(255,255,255,.04);

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

}

.cards{

    margin-top:60px;

    display:grid;

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

    gap:35px;

}

.card{

    background:rgba(255,255,255,.03);

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

    border-radius:12px;

    padding:42px;

    transition:var(--transition);

    backdrop-filter:blur(8px);

}

.card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

    box-shadow:0 18px 40px rgba(0,0,0,.35);

}

.card h3{

    color:var(--gold-light);

    font-size:1.7rem;

    margin-bottom:20px;

}

.card p{

    margin:0;

    color:var(--text);

}

/* ==========================================================
   SMALL DETAILS
==========================================================*/

.section + .section{

    border-top:1px solid rgba(255,255,255,.03);

}

h2{

    line-height:1.1;

}

.section p:last-child{

    margin-bottom:0;

}

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

footer{
    background:#08111f;
    border-top:1px solid rgba(255,255,255,.08);
    padding:90px 0 60px;
    text-align:center;
}

.footer-container{
    max-width:900px;
    margin:auto;
}

footer h2{
    font-family:"Cormorant Garamond",serif;
    font-size:3rem;
    color:var(--gold);
    margin-bottom:20px;
}

.footer-text{
    max-width:650px;
    margin:0 auto 50px;
    color:rgba(255,255,255,.82);
    font-size:1.15rem;
    line-height:1.8;
}

.footer-links{
    display:flex;
    justify-content:center;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:35px;
}

.footer-links a{
    display:inline-block;
    padding:14px 34px;
    border:1px solid var(--gold);
    color:var(--gold);
    text-decoration:none;
    letter-spacing:1px;
    font-size:.95rem;
    transition:.35s;
}

.footer-links a:hover{
    background:var(--gold);
    color:#08111f;
    transform:translateY(-3px);
}

.copyright{
    margin-top:20px;
    color:rgba(255,255,255,.55);
    font-size:.95rem;
    letter-spacing:1px;
}

.copyright span{
    display:block;
    margin-top:8px;
}
/* ==========================================
   MICRO INTERACTIONS
========================================== */

/* Smooth scrolling */
html{
    scroll-behavior:smooth;
}

/* Smooth transitions */
*{
    transition:
        color .30s ease,
        background-color .30s ease,
        border-color .30s ease,
        transform .30s ease,
        box-shadow .30s ease;
}

/* Navigation */

nav a:hover{
    color:#f4d27a;
    text-shadow:0 0 8px rgba(227,190,90,.45);
}

/* Hero buttons */

.btn:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 30px rgba(0,0,0,.35);
}

/* Book cover */

.hero-book img{
    transition:transform .45s ease;
}

.hero-book img:hover{
    transform:scale(1.02);
}

/* World cards */

.world-card{
    transition:all .35s ease;
}

.world-card:hover{
    transform:translateY(-8px);
    border-color:rgba(225,190,90,.45);
    box-shadow:0 18px 40px rgba(0,0,0,.28);
}

/* News cards */

.news-card{
    transition:all .35s ease;
}

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

/* Footer buttons */

.footer-links a:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 25px rgba(0,0,0,.35);
}

/* Logo */

.logo img{
    transition:transform .35s ease;
}

.logo img:hover{
    transform:rotate(-3deg) scale(1.06);
}
/* ==========================================
   SCROLL ANIMATIONS
========================================== */

.fade{

    opacity:0;

    transform:translateY(40px);

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

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   EXPLORE INTRO
========================================================== */

.explore-intro{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}


/* ==========================================================
   EXPLORE LINKS
========================================================== */

.card-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:22px;

    color:var(--gold);

    text-decoration:none;

    font-family:Cinzel, serif;

    font-size:.95rem;

    letter-spacing:.04em;

    transition:all .35s ease;

}

.card-link:hover{

    color:var(--gold-light);

    transform:translateX(8px);

}

.card-link::after{

    content:"→";

    transition:transform .35s ease;

}

.card-link:hover::after{

    transform:translateX(6px);

}

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


/* ---------- ARCHIVE HERO ---------- */

.observatory-hero{

    position:relative;

    min-height:720px;

    display:flex;

    align-items:center;

    background:

        linear-gradient(
            90deg,
            rgba(5,7,10,.94) 0%,
            rgba(5,7,10,.72) 38%,
            rgba(5,7,10,.28) 72%,
            rgba(5,7,10,.48) 100%
        ),

        url("../images/observatory.jpg");

    background-size:cover;

    background-position:center;

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

}


.observatory-overlay{

    width:min(1280px,92%);

    margin:auto;

    padding:100px 0;

}


.archive-label{

    display:inline-block;

    font-family:Cinzel,serif;

    font-size:.85rem;

    letter-spacing:.18em;

    color:var(--gold-light);

    margin-bottom:22px;

}


.observatory-hero h1{

    font-family:Cinzel,serif;

    font-size:clamp(3.5rem,6vw,6rem);

    font-weight:500;

    color:#F1E9D5;

    line-height:1.05;

    max-width:700px;

}


.archive-line{

    width:180px;

    height:1px;

    background:var(--gold);

    margin:28px 0;

}


.observatory-hero p{

    max-width:620px;

    font-size:1.1rem;

    line-height:1.9;

    color:#D5D0C5;

}


.archive-meta{

    display:flex;

    gap:40px;

    margin-top:38px;

    padding:14px 18px;

    width:max-content;

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

    background:rgba(5,7,10,.55);

    font-family:Cinzel,serif;

    font-size:.72rem;

    letter-spacing:.08em;

    color:var(--gold-light);

}



/* ---------- ARCHIVE SECTION ---------- */

.archive-section{

    padding:145px 0 100px;

    background:

        radial-gradient(
            circle at top center,
            rgba(212,175,55,.02),
            transparent 45%
        ),

        #080A0F;

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

}


.archive-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 65px;

}


.archive-heading h2{

    margin:18px 0;

    font-size:2.6rem;

    color:#E8E0CF;

}


.archive-heading p{

    color:#AAAEB5;

}



/* ---------- ARCHIVE GRID ---------- */

.archive-grid{

    display:grid;

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

    gap:22px;

}


.archive-card{

    display:grid;

    grid-template-columns:190px 1fr;

    min-height:230px;

    background:#111318;

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

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

}


.archive-card:hover{

    transform:translateY(-5px);

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

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

}



/* ---------- ARCHIVE IMAGE ---------- */

.archive-image{

    height:100%;

    overflow:hidden;

    background:#181A1F;

}


.archive-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    filter:
        grayscale(100%)
        contrast(1.05);

    opacity:.82;

    transition:
        transform .5s ease,
        opacity .5s ease;

}


.archive-card:hover
.archive-image img{

    transform:scale(1.04);

    opacity:1;

}



/* ---------- ARCHIVE CONTENT ---------- */

.archive-content{

    display:flex;

    flex-direction:column;

    padding:22px 20px;

}


.record-type{

    font-family:Cinzel,serif;

    font-size:.65rem;

    letter-spacing:.13em;

    color:var(--gold);

}


.archive-content h3{

    font-size:1.35rem;

    line-height:1.2;

    margin:10px 0 12px;

    color:#E7DFC9;

}


.archive-content p{

    font-size:.88rem;

    line-height:1.65;

    color:#AEB2BA;

}


.record-footer{

    display:flex;

    justify-content:space-between;

    align-items:end;

    gap:12px;

    margin-top:auto;

    padding-top:18px;

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

}


.record-footer span{

    font-family:Cinzel,serif;

    font-size:.62rem;

    letter-spacing:.06em;

    color:#777B84;

}


.record-footer a{

    font-family:Cinzel,serif;

    font-size:.7rem;

    letter-spacing:.05em;

    color:var(--gold-light);

    text-decoration:none;

    white-space:nowrap;

    transition:color .3s ease;

}


.record-footer a:hover{

    color:#fff;

}



/* ---------- OBSERVATORY NOTICE ---------- */

.observatory-notice{

    padding:40px 0 55px;

    background:#090B0F;

}


.notice-box{

    display:flex;

    align-items:center;

    gap:28px;

    padding:28px 35px;

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

    background:#101216;

}


.notice-symbol{

    flex-shrink:0;

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    color:var(--gold-light);

    font-size:1.7rem;

}


.notice-box p{

    margin-top:8px;

    font-size:.9rem;

    color:#AEB2BA;

}


.notice-reference{

    margin-left:auto;

    white-space:nowrap;

    font-family:Cinzel,serif;

    font-size:.65rem;

    color:#777B84;

}



/* ---------- ARCHIVE FOOTER ---------- */

.archive-footer{

    display:grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    gap:50px;

    align-items:center;

    padding:55px 0;

}


.footer-archive-mark{

    display:flex;

    align-items:center;

    gap:25px;

}


.archive-seal{

    width:90px;

    height:90px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    color:var(--gold);

    font-size:2rem;

}


.footer-archive-mark h3{

    font-size:1rem;

    color:var(--gold-light);

    text-transform:uppercase;

}


.footer-archive-mark p{

    margin-top:8px;

    font-size:.8rem;

    color:#8E929A;

}


.footer-links-archive{

    display:flex;

    flex-direction:column;

    gap:12px;

    padding-left:40px;

    border-left:1px solid
        rgba(255,255,255,.08);

}


.footer-links-archive a{

    color:#A7AAB0;

    text-decoration:none;

    font-family:Cinzel,serif;

    font-size:.72rem;

    letter-spacing:.06em;

    transition:color .3s ease;

}


.footer-links-archive a:hover{

    color:var(--gold-light);

}


.footer-reference{

    padding-left:40px;

    border-left:1px solid
        rgba(255,255,255,.08);

}


.footer-reference > span{

    font-family:Cinzel,serif;

    color:var(--gold-light);

    font-size:.75rem;

    letter-spacing:.08em;

}


.footer-reference p{

    font-size:.78rem;

    margin-top:6px;

    color:#8E929A;

}


.footer-reference small{

    display:block;

    margin-top:15px;

    color:#666A72;

    font-family:Cinzel,serif;

    font-size:.6rem;

    letter-spacing:.05em;

}



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

@media (max-width:1050px){

    .archive-grid{

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

    }

    .archive-footer{

        grid-template-columns:1fr 1fr;

    }

    .footer-reference{

        border-left:none;

        padding-left:0;

    }

}


@media (max-width:700px){

    .observatory-hero{

        min-height:650px;

        background-position:
            62% center;

    }


    .observatory-overlay{

        padding:80px 0;

    }


    .observatory-hero h1{

        font-size:3.2rem;

    }


    .archive-meta{

        flex-direction:column;

        gap:8px;

        width:auto;

        max-width:350px;

    }


    .archive-grid{

        grid-template-columns:1fr;

    }


    .archive-card{

        grid-template-columns:130px 1fr;

    }


    .notice-box{

        align-items:flex-start;

        flex-direction:column;

    }


    .notice-reference{

        margin-left:0;

    }


    .archive-footer{

        grid-template-columns:1fr;

        gap:35px;

    }


    .footer-links-archive,
    .footer-reference{

        border-left:none;

        border-top:1px solid
            rgba(255,255,255,.08);

        padding-left:0;

        padding-top:25px;

    }

}

/* =========================================================
   CHAMPIONS — PERSONNEL ARCHIVE
========================================================= */

.champions-page .archive-page {
    padding: 70px 0 100px;
}


/* INTRO */

.champions-page .archive-heading {
    max-width: 1000px;
    margin: 0 auto 55px;
    text-align: center;
}

.champions-page .archive-heading h1 {
    margin: 14px 0 18px;

    font-family: "Cinzel", serif;
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;

    color: #f1eadc;
    text-transform: uppercase;
}

.champions-page .archive-heading p {
    max-width: 680px;
    margin: 0 auto 28px;

    font-size: 1.05rem;
    line-height: 1.7;

    color: #aeb6c7;
}


/* ARCHIVE REFERENCE */

.champions-page .archive-reference {
    max-width: 600px;
    margin: 28px auto 0;

    padding: 15px 20px;

    border: 1px solid rgba(184, 143, 43, 0.38);

    background: rgba(17, 20, 27, 0.55);

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

    font-family: "Cinzel", serif;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: #c7a34b;
}


/* =========================================================
   CHAMPION RECORDS
========================================================= */

.champions-page .champions-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    max-width: 1100px;
    margin: 0 auto;
}


/* Individual record */

.champions-page .champion-record {

    padding: 28px 30px 27px;

    background: #11141b;

    border: 1px solid rgba(184, 143, 43, 0.30);

    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}

.champions-page .champion-record:hover {

    border-color: rgba(199, 163, 75, 0.65);

    background: #14171e;
}


/* Top record line */

.champions-page .champion-header {

    display: flex;

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

    margin-bottom: 27px;

    font-family: "Cinzel", serif;
    font-size: 0.65rem;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.champions-page .record-number {

    color: #647087;
}

.champions-page .record-status {

    color: #c7a34b;
}


/* Name */

.champions-page .champion-record h2 {

    margin: 0;

    font-family: "Cinzel", serif;
    font-size: 1.85rem;
    font-weight: 500;

    line-height: 1.15;

    color: #eee7da;

    text-transform: uppercase;
}


/* Title */

.champions-page .champion-record h3 {

    margin: 8px 0 22px;

    font-family: "Cinzel", serif;
    font-size: 0.78rem;
    font-weight: 400;

    letter-spacing: 0.13em;
    text-transform: uppercase;

    color: #c7a34b;
}


/* Thin Observatory divider */

.champions-page .champion-divider {

    width: 100%;
    height: 1px;

    margin-bottom: 22px;

    background:
        linear-gradient(
            to right,
            rgba(184, 143, 43, 0.45),
            rgba(184, 143, 43, 0.08)
        );
}


/* Patron / Spark */

.champions-page .champion-data {

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 25px;

    margin-bottom: 22px;
}

.champions-page .champion-data div {

    display: flex;

    flex-direction: column;

    gap: 5px;
}

.champions-page .champion-data span {

    font-family: "Cinzel", serif;

    font-size: 0.60rem;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color: #657189;
}

.champions-page .champion-data strong {

    font-family: "Cinzel", serif;

    font-size: 0.82rem;

    font-weight: 500;

    line-height: 1.35;

    color: #e5ded0;
}


/* Description */

.champions-page .champion-record > p {

    margin: 0;

    font-size: 0.88rem;

    line-height: 1.65;

    color: #9fa8ba;
}


/* =========================================================
   ASSOCIATED PERSONNEL
========================================================= */

.champions-page .associated-personnel {

    margin-top: 35px;

    padding: 75px 0 100px;

    border-top: 1px solid rgba(184, 143, 43, 0.10);

    background: transparent;
}

.champions-page .associated-personnel .section-heading {

    max-width: 700px;

    margin: 0 auto 45px;

    text-align: center;
}

.champions-page .associated-personnel .section-heading h2 {

    margin: 15px 0;

    font-family: "Cinzel", serif;

    font-size: 2.3rem;

    font-weight: 500;

    color: #eee7da;

    text-transform: uppercase;
}

.champions-page .associated-personnel .section-heading p {

    margin: 0;

    font-size: 0.95rem;

    line-height: 1.7;

    color: #9fa8ba;
}


.champions-page .associated-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    max-width: 900px;

    margin: 0 auto;
}


.champions-page .associated-record {

    padding: 28px 30px;

    background: #11141b;

    border: 1px solid rgba(184, 143, 43, 0.25);
}


.champions-page .associated-record h2 {

    margin: 14px 0 0;

    font-family: "Cinzel", serif;

    font-size: 1.75rem;

    font-weight: 500;

    color: #eee7da;

    text-transform: uppercase;
}


.champions-page .associated-record h3 {

    margin: 7px 0 20px;

    font-family: "Cinzel", serif;

    font-size: 0.76rem;

    font-weight: 400;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #c7a34b;
}


.champions-page .associated-record > p {

    margin: 0;

    font-size: 0.88rem;

    line-height: 1.65;

    color: #9fa8ba;
}


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

@media (max-width: 800px) {

    .champions-page .champions-grid {

        grid-template-columns: 1fr;

    }

    .champions-page .associated-grid {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 550px) {

    .champions-page .archive-page {

        padding-top: 55px;

    }

    .champions-page .archive-reference {

        flex-direction: column;

        gap: 8px;

        text-align: center;

    }

    .champions-page .champion-data {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    .champions-page .champion-record {

        padding: 25px 22px;

    }

}
/* =========================================================
   CHAMPIONS — ARCHIVE OVERRIDE
========================================================= */

body.champions-page {
    background: #08090d !important;
    color: #e9e2d5;
}


/* The whole page uses the Archive black */

body.champions-page main {
    background: #08090d !important;
}


/* Move the record completely below the fixed navigation */

body.champions-page .archive-page {
    position: relative;

    padding-top: 150px !important;
    padding-bottom: 100px;

    background: #08090d !important;
}


/* Remove any landing-page / hero background */

body.champions-page .archive-page::before,
body.champions-page .archive-page::after {
    display: none !important;
}


/* Heading */

body.champions-page .archive-heading {
    position: relative;
    z-index: 2;

    margin-bottom: 55px;
}


/* Completely dark record area */

body.champions-page .champions-grid {
    position: relative;
    z-index: 2;
}


/* Champion records */

body.champions-page .champion-record {
    background: #111319 !important;

    border: 1px solid rgba(184, 143, 43, 0.30);

    box-shadow: none;
}


/* No blue inherited backgrounds */

body.champions-page section,
body.champions-page article,
body.champions-page .container {
    background-color: transparent;
}


/* Keep the actual records dark */

body.champions-page .champion-record {
    background-color: #111319 !important;
}


/* Associated personnel section */

body.champions-page .associated-personnel {
    background: #08090d !important;
}

/* Final Archive-style proportions for Champions */

body.champions-page .archive-heading h1 {
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    margin-bottom: 14px;
}

body.champions-page .archive-heading {
    margin-bottom: 42px;
}

body.champions-page .archive-heading p {
    margin-bottom: 24px;
}

/* =========================================================
   GODS PAGE
   DIVINE RECORDS
========================================================= */

.gods-page {
    background: #080a0f;
    color: #e8e1d5;
}


/* =========================================================
   PAGE INTRO
========================================================= */

.gods-page .archive-page {
    padding: 80px 0 120px;
}

.gods-page .archive-heading {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 70px;
}

.gods-page .archive-heading .section-tag {
    display: block;
    margin-bottom: 22px;
}

.gods-page .archive-heading h1 {
    margin-bottom: 20px;
}

.gods-page .archive-heading p {
    max-width: 760px;
    margin: 0 auto 30px;
}


/* =========================================================
   ARCHIVE REFERENCE BAR
========================================================= */

.gods-page .archive-reference {
    width: min(740px, 90%);
    margin: 30px auto 0;
    padding: 18px 26px;

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

    border: 1px solid rgba(180, 140, 45, 0.45);

    background: rgba(15, 18, 24, 0.78);

    font-family: "Cinzel", serif;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: #c79b35;
}


/* =========================================================
   GOD GRID
========================================================= */

.gods-page .gods-grid {
    width: min(1180px, 92%);
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 30px;
}


/* =========================================================
   GOD RECORD
========================================================= */

.gods-page .god-record {
    position: relative;

    min-height: 370px;

    padding: 34px 36px 32px;

    background: #101319;

    border: 1px solid rgba(181, 142, 48, 0.38);

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


.gods-page .god-record:hover {
    background: #12161d;

    border-color:
        rgba(201, 161, 65, 0.75);

    transform:
        translateY(-3px);
}


/* =========================================================
   TIER BORDERS
========================================================= */

.gods-page .tier-one {
    border-top:
        2px solid rgba(199, 155, 53, 0.70);
}


.gods-page .tier-two {
    border-top:
        2px solid rgba(120, 137, 160, 0.65);
}


.gods-page .tier-three {
    border-top:
        2px solid rgba(100, 83, 65, 0.70);
}


/* =========================================================
   GOD HEADER
========================================================= */

.gods-page .god-header {
    position: relative;

    min-height: 45px;

    margin-bottom: 8px;
}


/* =========================================================
   GOD META
========================================================= */

.gods-page .god-meta {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;
}


/* =========================================================
   RECORD NUMBER
========================================================= */

.gods-page .record-number {
    font-family: "Cinzel", serif;

    font-size: 0.72rem;

    letter-spacing: 0.15em;

    color: #687895;
}


/* =========================================================
   TIER LABEL
========================================================= */

.gods-page .record-status {
    font-family: "Cinzel", serif;

    font-size: 0.72rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: #c79b35;
}


/* =========================================================
   GOD PORTRAIT
========================================================= */

.gods-page .god-portrait {
    position: absolute;

    top: 32px;
    right: 0;

    width: 105px;
    height: 105px;

    object-fit: cover;

    border:
        1px solid rgba(199, 155, 53, 0.60);

    background: #090b10;

    filter:
        grayscale(100%)
        contrast(0.95);

    z-index: 1;
}


/* =========================================================
   GOD NAME
========================================================= */

.gods-page .god-record h2 {
    margin: 0 0 8px;

    font-family: "Cinzel", serif;

    font-size: 2.15rem;

    font-weight: 500;

    letter-spacing: 0.04em;

    color: #eee8dc;
}


/* =========================================================
   GOD TITLE
========================================================= */

.gods-page .god-record h3 {
    margin: 0;

    max-width: calc(100% - 145px);

    font-family: "Cinzel", serif;

    font-size: 0.88rem;

    font-weight: 400;

    letter-spacing: 0.09em;

    line-height: 1.55;

    color: #c79b35;
}

.gods-page .god-record h3 strong {
    font-weight: 600;
}
/* =========================================================
   DIVIDER
========================================================= */

.gods-page .god-divider {
    height: 1px;

    margin: 26px 0;

    background:
        linear-gradient(
            to right,
            rgba(199, 155, 53, 0.55),
            rgba(199, 155, 53, 0.10)
        );
}


/* =========================================================
   GOD DATA
========================================================= */

.gods-page .god-data {
    display: grid;

    grid-template-columns:
        0.75fr 1.25fr;

    gap: 28px;

    margin-bottom: 28px;
}


.gods-page .god-data > div {
    min-width: 0;
}


.gods-page .god-data span {
    display: block;

    margin-bottom: 7px;

    font-family: "Cinzel", serif;

    font-size: 0.67rem;

    letter-spacing: 0.17em;

    color: #687895;
}


.gods-page .god-data strong {
    display: block;

    font-family: "Cinzel", serif;

    font-size: 0.90rem;

    font-weight: 400;

    line-height: 1.5;

    color: #e6dfd2;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.gods-page .god-record > p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 0.94rem;

    line-height: 1.75;

    color: #aeb6c4;
}


/* =========================================================
   HEL — TIER 3
========================================================= */

.gods-page .tier-three {
    grid-column: 1 / -1;

    width: 100%;

    max-width: 575px;

    justify-self: center;
}


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

@media (max-width: 900px) {

    .gods-page .gods-grid {
        grid-template-columns: 1fr;
    }

    .gods-page .tier-three {
        grid-column: auto;
        max-width: none;
    }

}


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

@media (max-width: 600px) {

    .gods-page .archive-page {
        padding: 55px 0 80px;
    }

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

    .gods-page .archive-reference {
        flex-direction: column;

        gap: 10px;

        align-items: flex-start;
    }

    .gods-page .god-record {
        padding: 28px 24px;
    }

    .gods-page .god-record h2 {
        font-size: 1.8rem;
    }

    .gods-page .god-record h3 {
        max-width: calc(100% - 110px);
    }

    .gods-page .god-data {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gods-page .god-portrait {
        width: 85px;
        height: 85px;
    }

}

/* =========================================================
   OFFICIAL TERMINOLOGY
========================================================= */

.terminology-page {
    background: #080a0f;
    color: #e8e1d5;
    padding: 80px 0 110px;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.terminology-heading {
    max-width: 900px;
    margin: 0 auto 42px;
    text-align: center;
}

.terminology-heading .section-tag {
    display: block;
    margin-bottom: 22px;
}

.terminology-heading h1 {
    margin: 0 0 20px;

    font-family: "Cinzel", serif;
    font-size: 3.2rem;
    font-weight: 500;
    letter-spacing: 0.04em;

    color: #eee8dc;
}

.terminology-heading p {
    max-width: 700px;
    margin: 0 auto;

    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.7;

    color: #aeb6c4;
}


/* =========================================================
   REFERENCE BAR
========================================================= */

.terminology-reference {
    width: min(740px, 90%);
    margin: 0 auto 62px;
    padding: 17px 24px;

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

    border: 1px solid rgba(181, 142, 48, 0.45);

    background: #101319;

    font-family: "Cinzel", serif;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #c79b35;
}


/* =========================================================
   TERMINOLOGY GRID
========================================================= */

.terminology-grid {
    max-width: 1180px;
    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 70px;
    row-gap: 0;
}


/* =========================================================
   TERM ENTRY
========================================================= */

.term-entry {
    position: relative;

    padding: 0 0 28px;
    margin-bottom: 28px;

    border-bottom:
        1px solid rgba(181, 142, 48, 0.22);
}


/* Small Observatory symbol */

.term-entry::before {
    content: "✦";

    position: absolute;

    left: 0;
    top: 2px;

    font-size: 0.65rem;

    color: #c79b35;
}


/* =========================================================
   TERM TITLE
========================================================= */

.term-entry h2 {
    margin: 0 0 12px;
    padding-left: 22px;

    font-family: "Cinzel", serif;

    font-size: 1rem;
    font-weight: 500;

    letter-spacing: 0.09em;
    text-transform: uppercase;

    color: #e8e1d5;
}


/* =========================================================
   TERM DESCRIPTION
========================================================= */

.term-entry p {
    margin: 0;
    padding-left: 22px;

    font-family: "Inter", sans-serif;

    font-size: 0.91rem;
    line-height: 1.7;

    color: #aeb6c4;
}


/* =========================================================
   OBSERVATORY NOTICE
========================================================= */

.terminology-notice {
    max-width: 1180px;

    margin: 58px auto 0;
    padding: 24px 30px;

    display: grid;

    grid-template-columns: 70px 1fr auto;

    align-items: center;

    gap: 22px;

    border: 1px solid rgba(181, 142, 48, 0.35);

    background: #101319;
}


/* =========================================================
   NOTICE SYMBOL
========================================================= */

.notice-symbol {
    width: 58px;
    height: 58px;

    display: flex;

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

    border:
        1px solid rgba(199, 155, 53, 0.55);

    border-radius: 50%;

    font-size: 1.2rem;

    color: #c79b35;
}


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

.notice-content span {
    display: block;

    margin-bottom: 8px;

    font-family: "Cinzel", serif;

    font-size: 0.7rem;

    letter-spacing: 0.15em;

    color: #c79b35;
}

.notice-content p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 0.9rem;

    line-height: 1.6;

    color: #aeb6c4;
}

.notice-content .notice-restriction {
    margin-top: 5px;

    font-size: 0.82rem;

    color: #718097;
}


/* =========================================================
   NOTICE REFERENCE
========================================================= */

.notice-reference {
    align-self: center;

    font-family: "Cinzel", serif;

    font-size: 0.62rem;

    letter-spacing: 0.12em;

    color: #687895;

    white-space: nowrap;
}


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

@media (max-width: 850px) {

    .terminology-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .terminology-notice {
        grid-template-columns: 60px 1fr;
    }

    .notice-reference {
        grid-column: 2;
    }
}


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

@media (max-width: 600px) {

    .terminology-page {
        padding: 55px 0 80px;
    }

    .terminology-heading h1 {
        font-size: 2.3rem;
    }

    .terminology-reference {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

        margin-bottom: 45px;
    }

    .terminology-grid {
        width: 92%;
    }

    .term-entry {
        padding-bottom: 23px;
        margin-bottom: 23px;
    }

    .terminology-notice {
        width: 92%;

        grid-template-columns: 1fr;

        padding: 24px;
    }

    .notice-symbol {
        width: 50px;
        height: 50px;
    }

    .notice-reference {
        grid-column: auto;
    }
}
/* =========================================================
   THE GREAT LOOM
   MACHINE RECORD
========================================================= */

.loom-page {
    background: #080a0f;
    color: #e8e1d5;
}

.loom-page-content {
    padding: 80px 0 110px;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.loom-heading {
    max-width: 900px;
    margin: 0 auto 42px;
    text-align: center;
}

.loom-heading .section-tag {
    display: block;
    margin-bottom: 22px;
}

.loom-heading h1 {
    margin: 0 0 20px;

    font-family: "Cinzel", serif;
    font-size: 3.2rem;
    font-weight: 500;
    letter-spacing: 0.04em;

    color: #eee8dc;
}

.loom-heading p {
    max-width: 760px;
    margin: 0 auto;

    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.7;

    color: #aeb6c4;
}


/* =========================================================
   REFERENCE BAR
========================================================= */

.loom-reference {
    width: min(740px, 90%);

    margin: 0 auto 55px;

    padding: 17px 24px;

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

    border: 1px solid rgba(181, 142, 48, 0.45);

    background: #101319;

    font-family: "Cinzel", serif;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #c79b35;
}


/* =========================================================
   LOOM IMAGE
========================================================= */

.loom-image {
    width: min(1180px, 92%);

    margin: 0 auto 55px;

    border: 1px solid rgba(181, 142, 48, 0.38);

    background: #05070a;

    overflow: hidden;
}

.loom-image img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 650px;

    object-fit: cover;
}


/* =========================================================
   MAIN MACHINE RECORD
========================================================= */

.loom-record {
    width: min(1000px, 92%);

    margin: 0 auto 65px;

    display: grid;

    grid-template-columns: 180px 1fr;

    border-top:
        1px solid rgba(199, 155, 53, 0.50);

    border-bottom:
        1px solid rgba(199, 155, 53, 0.22);
}

.loom-record-label {
    padding: 30px 25px;

    border-right:
        1px solid rgba(181, 142, 48, 0.22);

    font-family: "Cinzel", serif;

    font-size: 0.68rem;

    letter-spacing: 0.14em;

    color: #c79b35;
}

.loom-record-content {
    padding: 30px 38px;
}

.loom-record-content h2 {
    margin: 0 0 20px;

    font-family: "Cinzel", serif;

    font-size: 1.65rem;

    font-weight: 500;

    color: #eee8dc;
}

.loom-record-content p {
    margin: 0 0 12px;

    font-family: "Inter", sans-serif;

    font-size: 0.95rem;

    line-height: 1.75;

    color: #aeb6c4;
}

.loom-record-content p:last-child {
    margin-bottom: 0;

    color: #d4c8b3;
}


/* =========================================================
   LOOM SECTIONS
========================================================= */

.loom-sections {
    width: min(1000px, 92%);

    margin: 0 auto 65px;

    display: grid;

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

    gap: 28px;
}

.loom-section {
    padding: 28px;

    border:
        1px solid rgba(181, 142, 48, 0.28);

    background: #101319;
}

.loom-section-number {
    display: block;

    margin-bottom: 18px;

    font-family: "Cinzel", serif;

    font-size: 0.65rem;

    letter-spacing: 0.14em;

    color: #687895;
}

.loom-section h2 {
    margin: 0 0 14px;

    font-family: "Cinzel", serif;

    font-size: 1.1rem;

    font-weight: 500;

    color: #e8e1d5;
}

.loom-section p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 0.88rem;

    line-height: 1.7;

    color: #aeb6c4;
}


/* =========================================================
   RESTRICTED RECORD
========================================================= */

.loom-classified {
    width: min(1000px, 92%);

    margin: 0 auto 55px;

    padding: 28px 32px;

    display: grid;

    grid-template-columns: 58px 1fr auto;

    align-items: center;

    gap: 24px;

    border:
        1px solid rgba(181, 142, 48, 0.35);

    background:
        linear-gradient(
            135deg,
            #101319,
            #0c0f14
        );
}

.classified-symbol {
    width: 48px;
    height: 48px;

    display: flex;

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

    border:
        1px solid rgba(199, 155, 53, 0.50);

    color: #c79b35;
}

.classified-content span {
    display: block;

    margin-bottom: 8px;

    font-family: "Cinzel", serif;

    font-size: 0.68rem;

    letter-spacing: 0.15em;

    color: #c79b35;
}

.classified-content h2 {
    margin: 0 0 8px;

    font-family: "Cinzel", serif;

    font-size: 1.15rem;

    font-weight: 500;

    color: #e8e1d5;
}

.classified-content p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 0.86rem;

    line-height: 1.6;

    color: #929cab;
}

.classified-content p + p {
    margin-top: 5px;

    color: #687895;
}

.classified-reference {
    font-family: "Cinzel", serif;

    font-size: 0.62rem;

    letter-spacing: 0.12em;

    color: #687895;

    white-space: nowrap;
}


/* =========================================================
   OBSERVATORY NOTICE
========================================================= */

.loom-notice {
    width: min(1180px, 92%);

    margin: 0 auto;

    padding: 24px 30px;

    display: grid;

    grid-template-columns: 58px 1fr auto;

    align-items: center;

    gap: 22px;

    border:
        1px solid rgba(181, 142, 48, 0.35);

    background: #101319;
}


/* =========================================================
   NOTICE SYMBOL
========================================================= */

.loom-notice .notice-symbol {
    width: 48px;
    height: 48px;

    display: flex;

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

    border:
        1px solid rgba(199, 155, 53, 0.55);

    border-radius: 50%;

    font-size: 1rem;

    color: #c79b35;
}


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

.loom-notice .notice-content span {
    display: block;

    margin-bottom: 8px;

    font-family: "Cinzel", serif;

    font-size: 0.7rem;

    letter-spacing: 0.15em;

    color: #c79b35;
}

.loom-notice .notice-content p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 0.88rem;

    line-height: 1.6;

    color: #aeb6c4;
}

.loom-notice .notice-content .notice-restriction {
    margin-top: 5px;

    font-size: 0.82rem;

    color: #718097;
}

.loom-notice .notice-reference {
    font-family: "Cinzel", serif;

    font-size: 0.62rem;

    letter-spacing: 0.12em;

    color: #687895;

    white-space: nowrap;
}


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

@media (max-width: 850px) {

    .loom-sections {
        grid-template-columns: 1fr;
    }

    .loom-classified {
        grid-template-columns: 58px 1fr;
    }

    .classified-reference {
        grid-column: 2;
    }

    .loom-notice {
        grid-template-columns: 58px 1fr;
    }

    .loom-notice .notice-reference {
        grid-column: 2;
    }

}


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

@media (max-width: 600px) {

    .loom-page-content {
        padding: 55px 0 80px;
    }

    .loom-heading h1 {
        font-size: 2.3rem;
    }

    .loom-reference {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

        margin-bottom: 40px;
    }

    .loom-image {
        width: 92%;
    }

    .loom-record {
        width: 92%;

        grid-template-columns: 1fr;
    }

    .loom-record-label {
        border-right: none;

        border-bottom:
            1px solid rgba(181, 142, 48, 0.22);
    }

    .loom-record-content {
        padding: 25px;
    }

    .loom-sections {
        width: 92%;
    }

    .loom-classified {
        width: 92%;

        grid-template-columns: 1fr;

        padding: 24px;
    }

    .classified-reference {
        grid-column: auto;
    }

    .loom-notice {
        width: 92%;

        grid-template-columns: 1fr;

        padding: 24px;
    }

    .loom-notice .notice-reference {
        grid-column: auto;
    }

}
/* =========================================================
   THE THRESHOLDS
   THRESHOLD RECORDS
========================================================= */

.thresholds-page {
    background: #080a0f;
    color: #e8e1d5;
}

.thresholds-content {
    padding: 80px 0 110px;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.thresholds-heading {
    max-width: 900px;
    margin: 0 auto 42px;
    text-align: center;
}

.thresholds-heading .section-tag {
    display: block;
    margin-bottom: 22px;
}

.thresholds-heading h1 {
    margin: 0 0 20px;

    font-family: "Cinzel", serif;
    font-size: 3.2rem;
    font-weight: 500;
    letter-spacing: 0.04em;

    color: #eee8dc;
}

.thresholds-heading p {
    max-width: 760px;
    margin: 0 auto;

    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.7;

    color: #aeb6c4;
}


/* =========================================================
   REFERENCE BAR
========================================================= */

.thresholds-reference {
    width: min(740px, 90%);

    margin: 0 auto 65px;

    padding: 17px 24px;

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

    border: 1px solid rgba(181, 142, 48, 0.45);

    background: #101319;

    font-family: "Cinzel", serif;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #c79b35;
}


/* =========================================================
   THRESHOLD RECORD
========================================================= */

.threshold-record {
    width: min(1120px, 92%);

    margin: 0 auto 70px;

    display: grid;

    grid-template-columns: 390px 1fr;

    min-height: 500px;

    border:
        1px solid rgba(181, 142, 48, 0.38);

    background: #101319;
}


/* =========================================================
   REVERSED RECORD
========================================================= */

.threshold-record.reverse {
    grid-template-columns: 1fr 390px;
}

.threshold-record.reverse .threshold-image {
    order: 2;
}

.threshold-record.reverse .threshold-information {
    order: 1;
}


/* =========================================================
   THRESHOLD IMAGE
========================================================= */

.threshold-image {
    position: relative;

    min-height: 500px;

    overflow: hidden;

    background: #05070a;
}

.threshold-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            rgba(8, 10, 15, 0),
            rgba(8, 10, 15, 0.18)
        );
}

.threshold-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    filter:
        contrast(0.96)
        saturate(0.88);

    transition:
        transform 0.6s ease;
}

.threshold-record:hover .threshold-image img {
    transform: scale(1.025);
}


/* =========================================================
   THRESHOLD INFORMATION
========================================================= */

.threshold-information {
    padding: 46px 48px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


/* =========================================================
   THRESHOLD META
========================================================= */

.threshold-meta {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 28px;

    font-family: "Cinzel", serif;

    font-size: 0.66rem;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color: #687895;
}

.threshold-meta span:first-child {
    color: #c79b35;
}


/* =========================================================
   THRESHOLD TITLE
========================================================= */

.threshold-information h2 {
    margin: 0 0 10px;

    font-family: "Cinzel", serif;

    font-size: 2.25rem;

    font-weight: 500;

    letter-spacing: 0.03em;

    color: #eee8dc;
}


/* =========================================================
   GOVERNING DEITY
========================================================= */

.threshold-information h3 {
    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 0.88rem;

    font-weight: 400;

    letter-spacing: 0.10em;

    text-transform: uppercase;

    color: #c79b35;
}


/* =========================================================
   DIVIDER
========================================================= */

.threshold-divider {
    height: 1px;

    width: 100%;

    margin: 28px 0;

    background:
        linear-gradient(
            to right,
            rgba(199, 155, 53, 0.55),
            rgba(199, 155, 53, 0.08)
        );
}


/* =========================================================
   THRESHOLD DATA
========================================================= */

.threshold-data {
    display: grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap: 28px;

    margin-bottom: 30px;
}

.threshold-data span {
    display: block;

    margin-bottom: 7px;

    font-family: "Cinzel", serif;

    font-size: 0.65rem;

    letter-spacing: 0.14em;

    color: #687895;
}

.threshold-data strong {
    display: block;

    font-family: "Cinzel", serif;

    font-size: 0.92rem;

    font-weight: 400;

    color: #e6dfd2;
}


/* =========================================================
   THRESHOLD RULE
========================================================= */

.threshold-rule {
    margin-bottom: 25px;

    padding: 18px 20px;

    border-left:
        2px solid rgba(199, 155, 53, 0.60);

    background:
        rgba(199, 155, 53, 0.045);
}

.threshold-rule span {
    display: block;

    margin-bottom: 8px;

    font-family: "Cinzel", serif;

    font-size: 0.65rem;

    letter-spacing: 0.15em;

    color: #687895;
}

.threshold-rule p {
    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 1.05rem;

    line-height: 1.5;

    color: #e6dfd2;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.threshold-description {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 0.92rem;

    line-height: 1.75;

    color: #aeb6c4;
}


/* =========================================================
   RESTRICTED RECORD
========================================================= */

.threshold-restricted {
    width: min(1000px, 92%);

    margin: 0 auto 55px;

    padding: 28px 32px;

    display: grid;

    grid-template-columns: 58px 1fr auto;

    align-items: center;

    gap: 24px;

    border:
        1px solid rgba(181, 142, 48, 0.35);

    background:
        linear-gradient(
            135deg,
            #101319,
            #0c0f14
        );
}

.restricted-symbol {
    width: 48px;
    height: 48px;

    display: flex;

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

    border:
        1px solid rgba(199, 155, 53, 0.50);

    color: #c79b35;
}

.restricted-content span {
    display: block;

    margin-bottom: 8px;

    font-family: "Cinzel", serif;

    font-size: 0.68rem;

    letter-spacing: 0.15em;

    color: #c79b35;
}

.restricted-content h2 {
    margin: 0 0 8px;

    font-family: "Cinzel", serif;

    font-size: 1.15rem;

    font-weight: 500;

    color: #e8e1d5;
}

.restricted-content p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 0.86rem;

    line-height: 1.6;

    color: #929cab;
}

.restricted-content p + p {
    margin-top: 5px;

    color: #687895;
}

.restricted-reference {
    font-family: "Cinzel", serif;

    font-size: 0.62rem;

    letter-spacing: 0.12em;

    color: #687895;

    white-space: nowrap;
}


/* =========================================================
   OBSERVATORY NOTICE
========================================================= */

.threshold-notice {
    width: min(1180px, 92%);

    margin: 0 auto;

    padding: 24px 30px;

    display: grid;

    grid-template-columns: 58px 1fr auto;

    align-items: center;

    gap: 22px;

    border:
        1px solid rgba(181, 142, 48, 0.35);

    background: #101319;
}

.threshold-notice .notice-symbol {
    width: 48px;
    height: 48px;

    display: flex;

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

    border:
        1px solid rgba(199, 155, 53, 0.55);

    border-radius: 50%;

    font-size: 1rem;

    color: #c79b35;
}

.threshold-notice .notice-content span {
    display: block;

    margin-bottom: 8px;

    font-family: "Cinzel", serif;

    font-size: 0.7rem;

    letter-spacing: 0.15em;

    color: #c79b35;
}

.threshold-notice .notice-content p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 0.88rem;

    line-height: 1.6;

    color: #aeb6c4;
}

.threshold-notice .notice-content .notice-restriction {
    margin-top: 5px;

    font-size: 0.82rem;

    color: #718097;
}

.threshold-notice .notice-reference {
    font-family: "Cinzel", serif;

    font-size: 0.62rem;

    letter-spacing: 0.12em;

    color: #687895;

    white-space: nowrap;
}


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

@media (max-width: 900px) {

    .threshold-record,
    .threshold-record.reverse {
        grid-template-columns: 320px 1fr;
    }

    .threshold-image {
        min-height: 470px;
    }

    .threshold-information {
        padding: 36px;
    }

}


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

@media (max-width: 700px) {

    .thresholds-content {
        padding: 55px 0 80px;
    }

    .thresholds-heading h1 {
        font-size: 2.3rem;
    }

    .thresholds-reference {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

        margin-bottom: 45px;
    }

    .threshold-record,
    .threshold-record.reverse {
        width: 92%;

        grid-template-columns: 1fr;

        margin-bottom: 45px;
    }

    .threshold-record.reverse .threshold-image {
        order: 1;
    }

    .threshold-record.reverse .threshold-information {
        order: 2;
    }

    .threshold-image {
        min-height: auto;

        height: auto;
    }

    .threshold-image img {
        width: 100%;
        height: auto;

        object-fit: contain;
    }

    .threshold-information {
        padding: 30px 26px;
    }

    .threshold-information h2 {
        font-size: 1.8rem;
    }

    .threshold-data {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .threshold-restricted {
        width: 92%;

        grid-template-columns: 1fr;

        padding: 24px;
    }

    .restricted-reference {
        white-space: normal;
    }

    .threshold-notice {
        width: 92%;

        grid-template-columns: 1fr;

        padding: 24px;
    }

    .threshold-notice .notice-reference {
        white-space: normal;
    }

}

/* =========================================================
   THE CENTURY GAMES
   GAME RECORD
========================================================= */

.games-page {
    background: #080a0f;
    color: #e8e1d5;
}

.games-content {
    padding: 80px 0 110px;
}


/* =========================================================
   PAGE HEADER
========================================================= */

.games-heading {
    max-width: 900px;
    margin: 0 auto 42px;
    text-align: center;
}

.games-heading .section-tag {
    display: block;
    margin-bottom: 22px;
}

.games-heading h1 {
    margin: 0 0 20px;

    font-family: "Cinzel", serif;
    font-size: 3.2rem;
    font-weight: 500;
    letter-spacing: 0.04em;

    color: #eee8dc;
}

.games-heading p {
    max-width: 760px;
    margin: 0 auto;

    font-family: "Inter", sans-serif;
    font-size: 1rem;
    line-height: 1.7;

    color: #aeb6c4;
}


/* =========================================================
   REFERENCE BAR
========================================================= */

.games-reference {
    width: min(740px, 90%);

    margin: 0 auto 55px;

    padding: 17px 24px;

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

    border: 1px solid rgba(181, 142, 48, 0.45);

    background: #101319;

    font-family: "Cinzel", serif;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;

    color: #c79b35;
}


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

.games-image {
    width: min(1180px, 92%);

    margin: 0 auto 60px;

    border: 1px solid rgba(181, 142, 48, 0.38);

    background: #05070a;

    overflow: hidden;
}

.games-image img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 700px;

    object-fit: cover;
}


/* =========================================================
   GAME INTRODUCTION
========================================================= */

.games-introduction {
    width: min(900px, 92%);

    margin: 0 auto 75px;

    text-align: center;
}

.games-label {
    display: block;

    margin-bottom: 18px;

    font-family: "Cinzel", serif;

    font-size: 0.90rem;

    letter-spacing: 0.16em;

    color: #c79b35;
}

.games-introduction h2 {
    margin: 0 0 25px;

    font-family: "Cinzel", serif;

    font-size: 2.1rem;

    font-weight: 500;

    color: #eee8dc;
}

.games-introduction p {
    max-width: 760px;

    margin: 0 auto 14px;

    font-family: "Inter", sans-serif;

    font-size: 0.96rem;

    line-height: 1.8;

    color: #aeb6c4;
}


/* =========================================================
   GAME STRUCTURE
========================================================= */

.games-structure {
    width: min(1180px, 92%);

    margin: 0 auto 70px;
}

.games-structure-heading {
    text-align: center;

    margin-bottom: 45px;
}

.games-structure-heading .section-tag {
    display: block;

    margin-bottom: 14px;
}

.games-structure-heading h2 {
    margin: 0;

    font-family: "Cinzel", serif;

    font-size: 1.9rem;

    font-weight: 500;

    color: #eee8dc;
}


/* =========================================================
   GAME FLOW
========================================================= */

.game-flow {
    display: flex;

    align-items: stretch;

    justify-content: center;
}

.game-stage {
    position: relative;

    flex: 1;

    min-width: 0;

    padding: 30px 20px;

    text-align: center;

    border:
        1px solid rgba(181, 142, 48, 0.28);

    background: #101319;
}

.stage-number {
    display: block;

    margin-bottom: 15px;

    font-family: "Cinzel", serif;

    font-size: 0.62rem;

    letter-spacing: 0.14em;

    color: #687895;
}

.stage-icon {
    width: 42px;
    height: 42px;

    margin: 0 auto 16px;

    display: flex;

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

    border:
        1px solid rgba(199, 155, 53, 0.50);

    color: #c79b35;

    font-size: 0.95rem;
}

.game-stage h3 {
    margin: 0 0 10px;

    font-family: "Cinzel", serif;

    font-size: 1rem;

    font-weight: 500;

    color: #e8e1d5;
}

.game-stage p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 0.80rem;

    line-height: 1.65;

    color: #929cab;
}


/* =========================================================
   FLOW LINES
========================================================= */

.flow-line {
    width: 25px;

    flex-shrink: 0;

    align-self: center;

    height: 1px;

    background:
        rgba(199, 155, 53, 0.45);
}


/* =========================================================
   TOLL
========================================================= */

.games-toll {
    width: min(900px, 92%);

    margin: 0 auto 65px;

    padding: 28px 32px;

    display: grid;

    grid-template-columns: 58px 1fr;

    gap: 24px;

    align-items: center;

    border:
        1px solid rgba(181, 142, 48, 0.38);

    background:
        linear-gradient(
            135deg,
            #101319,
            #0c0f14
        );
}

.toll-symbol {
    width: 48px;
    height: 48px;

    display: flex;

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

    border:
        1px solid rgba(199, 155, 53, 0.55);

    color: #c79b35;
}

.toll-content span {
    display: block;

    margin-bottom: 7px;

    font-family: "Cinzel", serif;

    font-size: 0.65rem;

    letter-spacing: 0.15em;

    color: #687895;
}

.toll-content h2 {
    margin: 0 0 10px;

    font-family: "Cinzel", serif;

    font-size: 1.25rem;

    font-weight: 500;

    color: #e8e1d5;
}

.toll-content p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 0.88rem;

    line-height: 1.6;

    color: #aeb6c4;
}

.toll-content p + p {
    margin-top: 5px;

    color: #718097;
}


/* =========================================================
   PUBLIC RECORD
========================================================= */

.games-record {
    width: min(1000px, 92%);

    margin: 0 auto 60px;

    display: grid;

    grid-template-columns: 180px 1fr;

    border-top:
        1px solid rgba(199, 155, 53, 0.50);

    border-bottom:
        1px solid rgba(199, 155, 53, 0.22);
}

.games-record-label {
    padding: 30px 25px;

    border-right:
        1px solid rgba(181, 142, 48, 0.22);

    font-family: "Cinzel", serif;

    font-size: 0.65rem;

    letter-spacing: 0.14em;

    color: #c79b35;
}

.games-record-label strong {
    display: block;

    margin-top: 12px;

    font-size: 0.78rem;

    font-weight: 400;

    color: #687895;
}

.games-record-content {
    padding: 30px 38px;
}

.games-record-content h2 {
    margin: 0 0 10px;

    font-family: "Cinzel", serif;

    font-size: 1.5rem;

    font-weight: 500;

    color: #eee8dc;
}

.games-record-content > p {
    margin: 0 0 28px;

    font-family: "Inter", sans-serif;

    font-size: 0.90rem;

    line-height: 1.7;

    color: #aeb6c4;
}


/* =========================================================
   LEVEL SUMMARY
========================================================= */

.games-levels {
    display: grid;

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

    gap: 20px;
}

.games-levels > div {
    padding: 20px;

    border:
        1px solid rgba(181, 142, 48, 0.25);

    background: #0c0f14;
}

.games-levels span {
    display: block;

    margin-bottom: 8px;

    font-family: "Cinzel", serif;

    font-size: 0.62rem;

    letter-spacing: 0.14em;

    color: #687895;
}

.games-levels strong {
    display: block;

    margin-bottom: 8px;

    font-family: "Cinzel", serif;

    font-size: 0.90rem;

    font-weight: 400;

    color: #e6dfd2;
}

.games-levels small {
    font-family: "Inter", sans-serif;

    font-size: 0.75rem;

    color: #c79b35;
}


/* =========================================================
   RESTRICTED RECORD
========================================================= */

.games-restricted {
    width: min(1000px, 92%);

    margin: 0 auto 55px;

    padding: 28px 32px;

    display: grid;

    grid-template-columns: 58px 1fr auto;

    align-items: center;

    gap: 24px;

    border:
        1px solid rgba(181, 142, 48, 0.35);

    background:
        linear-gradient(
            135deg,
            #101319,
            #0c0f14
        );
}

.games-restricted-symbol {
    width: 48px;
    height: 48px;

    display: flex;

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

    border:
        1px solid rgba(199, 155, 53, 0.50);

    color: #c79b35;
}

.games-restricted > div:nth-child(2) span {
    display: block;

    margin-bottom: 8px;

    font-family: "Cinzel", serif;

    font-size: 0.68rem;

    letter-spacing: 0.15em;

    color: #c79b35;
}

.games-restricted h2 {
    margin: 0 0 8px;

    font-family: "Cinzel", serif;

    font-size: 1.15rem;

    font-weight: 500;

    color: #e8e1d5;
}

.games-restricted p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 0.86rem;

    line-height: 1.6;

    color: #929cab;
}

.games-restricted-reference {
    font-family: "Cinzel", serif;

    font-size: 0.62rem;

    letter-spacing: 0.12em;

    color: #687895;

    white-space: nowrap;
}


/* =========================================================
   OBSERVATORY NOTICE
========================================================= */

.games-notice {
    width: min(1180px, 92%);

    margin: 0 auto;

    padding: 24px 30px;

    display: grid;

    grid-template-columns: 58px 1fr auto;

    align-items: center;

    gap: 22px;

    border:
        1px solid rgba(181, 142, 48, 0.35);

    background: #101319;
}

.games-notice .notice-symbol {
    width: 48px;
    height: 48px;

    display: flex;

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

    border:
        1px solid rgba(199, 155, 53, 0.55);

    border-radius: 50%;

    color: #c79b35;
}

.games-notice .notice-content span {
    display: block;

    margin-bottom: 8px;

    font-family: "Cinzel", serif;

    font-size: 0.7rem;

    letter-spacing: 0.15em;

    color: #c79b35;
}

.games-notice .notice-content p {
    margin: 0;

    font-family: "Inter", sans-serif;

    font-size: 0.88rem;

    line-height: 1.6;

    color: #aeb6c4;
}

.games-notice .notice-restriction {
    margin-top: 5px !important;

    font-size: 0.82rem !important;

    color: #718097 !important;
}

.games-notice .notice-reference {
    font-family: "Cinzel", serif;

    font-size: 0.62rem;

    letter-spacing: 0.12em;

    color: #687895;

    white-space: nowrap;
}


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

@media (max-width: 900px) {

    .game-flow {
        flex-wrap: wrap;
    }

    .game-stage {
        flex: 1 1 30%;
    }

    .flow-line {
        display: none;
    }

    .games-levels {
        grid-template-columns: 1fr;
    }

    .games-restricted {
        grid-template-columns: 58px 1fr;
    }

    .games-restricted-reference {
        grid-column: 2;
    }

    .games-notice {
        grid-template-columns: 58px 1fr;
    }

    .games-notice .notice-reference {
        grid-column: 2;
    }

}


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

@media (max-width: 600px) {

    .games-content {
        padding: 55px 0 80px;
    }

    .games-heading h1 {
        font-size: 2.3rem;
    }

    .games-reference {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

        margin-bottom: 40px;
    }

    .games-image {
        width: 92%;
    }

    .games-introduction {
        width: 92%;
    }

    .game-flow {
        width: 92%;

        margin: 0 auto;

        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .game-stage {
        padding: 25px;
    }

    .games-toll {
        width: 92%;

        grid-template-columns: 1fr;

        padding: 24px;
    }

    .games-record {
        width: 92%;

        grid-template-columns: 1fr;
    }

    .games-record-label {
        border-right: none;

        border-bottom:
            1px solid rgba(181, 142, 48, 0.22);
    }

    .games-record-content {
        padding: 25px;
    }

    .games-restricted {
        width: 92%;

        grid-template-columns: 1fr;

        padding: 24px;
    }

    .games-restricted-reference {
        grid-column: auto;

        white-space: normal;
    }

    .games-notice {
        width: 92%;

        grid-template-columns: 1fr;

        padding: 24px;
    }

    .games-notice .notice-reference {
        grid-column: auto;

        white-space: normal;
    }

}
/* =========================================================
   ARCHIVE — FINAL VISUAL CORRECTIONS
========================================================= */

/* Dark neutral background */

.archive-section {
    background: #080a0f !important;
}


/* Space between HERO and THE ARCHIVE */

.archive-label {
    display: inline-block;

    margin-top: 55px !important;
}


/* Keep the Archive section itself dark */

.archive-section,
.archive-section::before,
.archive-section::after {
    background-color: #080a0f;
}

/* =========================================================
   ARCHIVE RECORD NAVIGATION
========================================================= */

.archive-record-nav {

    max-width: 1280px;

    margin: 70px auto 0;

    padding: 28px 0 10px;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


.archive-record-nav a {

    font-family: "Cinzel", serif;

    font-size: 0.88rem;

    letter-spacing: .10em;

    text-transform: uppercase;

    text-decoration: none;

    color: var(--gold);

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


.archive-record-nav a:hover {

    color: var(--gold-light);

    transform: translateY(-2px);
}


.archive-nav-back {

    margin-right: auto;
}


.archive-nav-prev {

    margin-left: auto;
}


.archive-nav-next {

    margin-left: 20px;
}

/* ==========================================================
   HOMEPAGE — OFFICIAL ARCHIVE FEATURE
========================================================== */

.archive-feature {

    max-width: 900px;

    margin: 55px auto 0;

    padding: 48px 55px;

    background: #111318;

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

    text-align: center;

}

.archive-feature-label {

    display: block;

    margin-bottom: 18px;

    font-family: Cinzel, serif;

    font-size: .72rem;

    letter-spacing: .18em;

    color: var(--gold);

}

.archive-feature h3 {

    margin-bottom: 22px;

    font-family: Cinzel, serif;

    font-size: 2rem;

    color: #E8E0CF;

}

.archive-feature > p {

    max-width: 680px;

    margin: 0 auto 18px;

    color: var(--text);

    line-height: 1.8;

}

.archive-feature .card-link {

    display: inline-block;

    margin-top: 18px;

}

.archive-feature-note {

    font-size: .9rem;

    color: #9DA5B3 !important;

}

/* ==========================================================
   HOMEPAGE — FINAL ALIGNMENT & TYPOGRAPHY
========================================================== */


/* ---------- SECTION HEADINGS ---------- */

#book .section-tag,
#explore .section-tag,
#about .section-tag,
#news .section-tag {

    display: block;

    text-align: center;

    margin-bottom: 18px;

}


#book h2,
#explore h2,
#about h2,
#news h2 {

    text-align: center;

    color: var(--gold-light);

}


/* ---------- BOOK / DISCOVER ---------- */

#book .narrow {

    max-width: 760px;

    margin: 0 auto;

    text-align: center;

}


#book p {

    max-width: 700px;

    margin-left: auto;
    margin-right: auto;

}


/* ---------- EXPLORE ---------- */

#explore > .container {

    max-width: 1280px;

    margin: 0 auto;

    text-align: center;

}


#explore .explore-intro {

    max-width: 760px;

    margin: 0 auto;

    text-align: center;

}


/* ---------- ARCHIVE FEATURE ---------- */

.archive-feature {

    max-width: 900px;

    margin: 55px auto 0;

    padding: 48px 55px;

    background: #111318;

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

    text-align: center;

}


.archive-feature-label {

    display: block;

    margin-bottom: 18px;

    font-family: Cinzel, serif;

    font-size: .72rem;

    letter-spacing: .18em;

    color: var(--gold);

}


.archive-feature h3 {

    margin-bottom: 22px;

    font-family: Cinzel, serif;

    font-size: 2rem;

    color: var(--gold-light);

}


.archive-feature > p {

    max-width: 680px;

    margin: 0 auto 18px;

    color: var(--text);

    line-height: 1.8;

}


.archive-feature-note {

    font-size: .9rem;

    color: #9DA5B3 !important;

}


.archive-feature .card-link {

    display: inline-block;

    margin-top: 18px;

}


/* ---------- ABOUT ---------- */

#about .narrow {

    max-width: 760px;

    margin: 0 auto;

    text-align: center;

}


#about p {

    max-width: 700px;

    margin-left: auto;

    margin-right: auto;

}


/* ---------- NEWS ---------- */

#news > .container {

    max-width: 1280px;

    margin: 0 auto;

    text-align: center;

}


#news .news-grid {

    margin-top: 45px;

}


/* ---------- NEWS TITLES ---------- */

.news-card h3 {

    color: var(--gold-light);

}


/* ---------- FOOTER ---------- */

#contact .footer-container {

    max-width: 760px;

    margin: 0 auto;

    text-align: center;

}


#contact .footer-text {

    max-width: 650px;

    margin: 0 auto;

}


#contact .copyright {

    text-align: center;

}

/* ==========================================================
   ABOUT THE AUTHOR — FINAL LAYOUT
========================================================== */

#about .narrow {

    max-width: 900px;

    margin: 0 auto;

    text-align: left;

}


/* ---------- SECTION LABEL ---------- */

#about .section-tag {

    display: block;

    text-align: center;

    margin-bottom: 18px;

}


/* ---------- AUTHOR NAME ---------- */

#about h2 {

    text-align: center;

    color: var(--gold-light);

    margin-bottom: 42px;

}


/* ---------- BIOGRAPHY ---------- */

#about p {

    max-width: 900px;

    margin: 0 0 26px;

    line-height: 1.85;

    text-align: left;

}


#about p:last-child {

    margin-bottom: 0;

}

/* ==========================================================
   CONNECT — GOLD HEADING
========================================================== */

#contact .footer-container h2 {

    color: var(--gold-light) !important;

    text-align: center;

}

/* ==========================================================
   AMAZON BUTTON
========================================================== */

.amazon-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 230px;

    height: 54px;

    padding: 0 28px;

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

    color: var(--gold);

    text-decoration: none;

    font-family: Cinzel, serif;

    font-size: .78rem;

    letter-spacing: .10em;

    text-transform: uppercase;

    overflow: hidden;

    transition:
        color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}


.amazon-button span {

    transition:
        opacity .25s ease,
        transform .25s ease;

}


.amazon-hover {

    position: absolute;

    opacity: 0;

    transform: translateY(8px);

}


.amazon-button:hover {

    background: rgba(212,175,55,.08);

    color: var(--gold-light);

    box-shadow:
        0 0 18px rgba(212,175,55,.12);

}


.amazon-button:hover .amazon-default {

    opacity: 0;

    transform: translateY(-8px);

}


.amazon-button:hover .amazon-hover {

    opacity: 1;

    transform: translateY(0);

}

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

.mobile-menu-toggle {
    display: none;
}


/* ---------- MOBILE ---------- */

@media (max-width: 768px) {

    .nav-container {
        position: relative;
        width: 92%;
        height: 70px;

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

    .brand {
        flex-shrink: 0;
    }

    .brand img {
        width: 42px;
        height: 42px;
    }

    .brand span {
        font-size: 1rem;
    }


    /* Hamburger */

    .mobile-menu-toggle {
        display: flex;

        width: 38px;
        height: 38px;

        padding: 7px;

        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 5px;

        background: transparent;
        border: 1px solid rgba(212, 169, 55, 0.45);

        cursor: pointer;
    }

    .mobile-menu-toggle span {
        display: block;

        width: 19px;
        height: 1px;

        background: #d4a937;

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


    /* Hide desktop navigation */

    nav {
        display: none;
    }

    .language {
        display: none;
    }


    /* Open mobile navigation */

    nav.mobile-open {
        display: block;

        position: absolute;

        top: 70px;
        left: 0;
        right: 0;

        z-index: 100;

        background: #07111f;

        border-top: 1px solid rgba(212, 169, 55, 0.25);
        border-bottom: 1px solid rgba(212, 169, 55, 0.25);

        padding: 18px 0 22px;
    }

    nav.mobile-open ul {
        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 18px;

        margin: 0;
        padding: 0;

        list-style: none;
    }

    nav.mobile-open a {
        font-size: .85rem;
        letter-spacing: .08em;
    }


/* ---------- CONNECT ---------- */

    .footer-container {
        padding-bottom: 50px;
    }

    .footer-text {
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-links {
        margin-top: 25px;
    }

    .copyright {
        margin-top: 30px;
    }

}

/* ==========================================================
   MOBILE OVERFLOW FIX
========================================================== */

@media (max-width: 768px) {

    html {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        overflow-x: clip;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
        max-width: 100%;
    }


    /* ---------- HEADER ---------- */

    header {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .nav-container {
        width: 92%;
        max-width: 100%;
        min-width: 0;
    }

    .brand {
        min-width: 0;
        max-width: calc(100% - 55px);
    }

    .brand span {
        white-space: nowrap;
    }


    /* ---------- HERO ---------- */

    .hero-grid {
        display: flex;
        flex-direction: column;

        width: 90%;
        max-width: 90%;
        min-width: 0;

        margin-left: auto;
        margin-right: auto;
    }

    .hero-text {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hero-text h1 {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        overflow-wrap: break-word;
        word-break: normal;
    }

    .hero-text p {
        width: 100%;
        max-width: 100%;
        min-width: 0;

        overflow-wrap: break-word;
    }


    /* ---------- HERO COVER ---------- */

    .hero-cover {
        width: 100%;
        max-width: 280px;
        min-width: 0;

        margin-left: auto;
        margin-right: auto;
    }

    .hero-cover img {
        display: block;

        width: 100%;
        max-width: 100%;
        height: auto;
    }


    /* ---------- BUTTON ---------- */

    .hero-buttons {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hero-buttons a {
        max-width: 100%;
    }


    /* ---------- ALL SECTIONS ---------- */

    section,
    .container,
    .narrow,
    .cards,
    .card,
    .news-grid,
    .news-card,
    .footer-container {
        max-width: 100%;
        min-width: 0;
    }

}

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

.mobile-menu-toggle {
    display: none;
}


@media (max-width: 768px) {

    /* ---------- MOBILE HEADER ---------- */

    .nav-container {
        position: relative;

        width: 92%;
        height: 70px;

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

    .brand {
        min-width: 0;
        max-width: calc(100% - 60px);
    }

    .brand img {
        width: 42px;
        height: 42px;
    }

    .brand span {
        font-size: 1rem;
        white-space: nowrap;
    }


    /* ---------- HAMBURGER ---------- */

    .mobile-menu-toggle {
        display: flex;

        width: 38px;
        height: 38px;

        padding: 7px;

        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 5px;

        background: transparent;

        border: 1px solid rgba(212, 169, 55, 0.45);

        cursor: pointer;

        flex-shrink: 0;
    }

    .mobile-menu-toggle span {
        display: block;

        width: 19px;
        height: 1px;

        background: #d4a937;
    }


    /* ---------- HIDE DESKTOP NAV ---------- */

    nav {
        display: none;
    }

    .language {
        display: none;
    }


/* ---------- OPEN MOBILE NAV ---------- */

#mobileNav.mobile-open {
    display: block !important;

    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    width: 100%;
    height: auto !important;
    min-height: 0 !important;

    z-index: 9999;

    background: #07111f;

    border-top: 1px solid rgba(212, 169, 55, 0.25);
    border-bottom: 1px solid rgba(212, 169, 55, 0.25);

    padding: 25px 0 30px;

    box-sizing: border-box;

    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#mobileNav.mobile-open ul {
    display: flex !important;

    flex-direction: column !important;
    align-items: center !important;

    gap: 18px !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    visibility: visible !important;
    opacity: 1 !important;
}

#mobileNav.mobile-open li {
    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    visibility: visible !important;
    opacity: 1 !important;
}

#mobileNav.mobile-open a {
    display: block !important;

    font-family: 'Cinzel', serif;

    font-size: .9rem;
    letter-spacing: .08em;

    color: #d4a937 !important;

    text-decoration: none;

    visibility: visible !important;
    opacity: 1 !important;
}
    /* ---------- PREVENT HORIZONTAL OVERFLOW ---------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    .nav-container {
        min-width: 0;
    }

}

@media (max-width: 768px) {

    header {
        overflow: visible !important;
    }

}

/* ---------- MOBILE LANGUAGE SELECTOR ---------- */

@media (max-width: 768px) {

    .nav-container {
        position: relative;
    }

    .nav-container .language {
        display: flex !important;
        align-items: center;
        gap: 8px;

        position: absolute;
        right: 72px;
        top: 50%;
        transform: translateY(-50%);

        margin: 0;
        padding: 0;

        z-index: 10001;
    }

    .nav-container .language .lang-btn {
        font-family: 'Cinzel', serif;
        font-size: .72rem;
        letter-spacing: .08em;

        color: #d4a937;
        text-decoration: none;

        padding: 0;
        margin: 0;

        background: none;
        border: none;
    }

    .nav-container .language .divider {
        color: rgba(212, 169, 55, 0.55);
        font-size: .7rem;
    }

    .nav-container .language .tooltip {
        display: none;
    }

}

/* ---------- MOBILE CONNECT LINKS ---------- */

@media (max-width: 768px) {

    .footer-links {
        display: flex;
        justify-content: center;
        align-items: center;

        gap: 12px;
        flex-wrap: wrap;

        width: 100%;

        margin: 25px auto 35px;
    }

    .footer-links a {
        display: inline-block;

        padding: 12px 24px;

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

        color: var(--gold);

        text-decoration: none;

        letter-spacing: 1px;

        font-size: .85rem;

        box-sizing: border-box;
    }

}

@media (max-width: 768px) {

    section {
        padding: 250px 0;
    }

}