:root{
    --archive-bg:#000000;
    --archive-surface:#0d0d0d;
    --archive-border:#252525;
    --archive-border-light:#343434;
    --archive-accent:#8b0000;
    --archive-text:#d6d6d6;
    --archive-text-muted:#9a9a9a;
}

/* ==================================================
   GLOBAL
================================================== */

body{
    background:var(--archive-bg);
    color:var(--archive-text);
    font-family: Georgia, "Times New Roman", serif;
    min-height:100vh;
}

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

a:hover{
    color:inherit;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

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

.navbar{
    position:sticky;
    top:0;
    z-index:1000;
    backdrop-filter: blur(6px);
}

.navbar .nav-link:hover{
    color:var(--archive-accent);
}

.navbar .nav-link:focus-visible{
    outline:2px solid rgba(139,17,0,0.2);
    outline-offset:3px;
}



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

.archive-header{
    border-left:4px solid var(--archive-accent);
    padding-left:24px;

    margin-bottom:1rem;

    padding-top:2rem;
    padding-bottom:2rem;
}

.archive-header h1{
    font-size:clamp(2rem,4vw,4rem);
    letter-spacing:3px;
    font-weight:700;
    margin-bottom:.5rem;
}

.archive-header p{
    color:var(--archive-text-muted);
    max-width:700px;
}

.archive-header p.lead{
    font-size:clamp(1rem,2.5vw,1.25rem);
    margin-bottom:.5rem;
}

.era-header{
    text-align:center;
    border-left:none;
    margin-bottom:3rem;
}

.era-header::before{
    content:"";
    display:block;
    width:60px;
    height:2px;
    background:var(--archive-accent);
    margin:0 auto 1.5rem;
}

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

.archive-excerpt{
    text-align:center;
    padding:4rem 1rem;
    border-top:1px solid var(--archive-border);
    border-bottom:1px solid var(--archive-border);
}

.archive-excerpt .excerpt-label{
    font-size:.7rem;
    letter-spacing:.25em;
    color:var(--archive-accent);
    text-transform:uppercase;
    margin-bottom:1.5rem;
    display:block;
}

.archive-excerpt blockquote{
    font-size:1.15rem;
    color:var(--archive-text-muted);
    font-style:italic;
    margin:0 auto 1rem;
    max-width:560px;
    line-height:1.8;
}

.archive-excerpt .excerpt-attribution{
    font-size:.75rem;
    letter-spacing:.15em;
    color:#6a6a6a;
    text-transform:uppercase;
}

.archive-excerpt .excerpt-rule{
    display:block;
    width:40px;
    height:1px;
    background:var(--archive-border-light);
    margin:1.5rem auto;
}

/* ==================================================
   SECTION TITLES
================================================== */

.section-label{
    font-size:.65rem;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--archive-accent);
    margin-bottom:1.25rem;
    display:block;
}

section h2{
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:4px;
    color:var(--archive-text-muted);
}

section h2,
section h3{
    letter-spacing:2px;
    margin-bottom:1.5rem;
}

/* ==================================================
   RECORD CARDS
================================================== */

.record-card{
    background:var(--archive-surface);
    border:1px solid var(--archive-border);
    padding:1.75rem;
    height:100%;
    transition:.25s ease, border-color .25s ease, box-shadow .25s ease;
    word-wrap:break-word;
}

.record-card h3,
.record-card h4,
.record-card h5{
    letter-spacing:1px;
    margin-bottom:.75rem;
}

.record-card h4{
    font-size:1.3rem;
}

.record-card p{
    color:var(--archive-text-muted);
    margin-bottom:0;
}

.record-card hr{
    border-color:var(--archive-border);
    margin:.75rem 0;
    opacity:1;
}

.record-card strong{
    color:var(--archive-text);
}

.clickable-card{
    transition:.25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.clickable-card:hover{
    border-color:var(--archive-accent);
    transform:translateY(-2px);
}

.clickable-card:focus-within{
    border-color:var(--archive-accent);
    box-shadow:0 4px 14px rgba(0,0,0,0.25);
}

.clickable-card a:focus-visible,
.clickable-card:focus-within{
    outline:3px solid rgba(139,17,0,0.18);
    outline-offset:4px;
}

.archive-card,
.individual-card{
    height:100%;
    display:flex;
    flex-direction:column;
    padding:1rem;
}

.archive-image,
.individual-image,
.profile-image,
.record-image{
   width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    border:1px solid var(--archive-border);
        margin-bottom:1rem;

}

.newspaper-image{
   
    width:100%;

    height:auto;

    object-fit:contain;

    display:block;
    border:1px solid var(--archive-border);
    display:block;
    margin-bottom:1rem;
}

.profile-image{
    width:220px;
    height:220px;
    margin:auto;
}

.newspaper-image{
    filter:grayscale(30%) contrast(1.05);
}

.chronicle-card{
    border:1px solid var(--archive-border);
    background:var(--archive-surface);
    padding:2.5rem;
    max-width:750px;
    margin:auto;
}

.publication-card{
    border:1px solid var(--archive-border);
    background:var(--archive-surface);
    padding:2rem;
}

.era-status-card{
    border:1px solid var(--archive-border);
    background:var(--archive-surface);
    padding:1.75rem 2rem;
}

.meta-label{
    color:var(--archive-text-muted);
    font-size:.95rem;
    letter-spacing:.04em;
    margin-bottom:.5rem;
}

.faction-summary{
    color:var(--archive-text-muted);
    font-size:.95rem;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.back-link{
    color:#b0b0b0;
    text-decoration:none;
    opacity:.7;
    font-size:.85rem;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.back-link:hover,
.back-link:focus{
    color:#ffffff;
    text-decoration:underline;
}

.archive-btn{
    border:1px solid var(--archive-accent);
    color:var(--archive-text);
    background:transparent;
    padding:.75rem 1.4rem;
}

.archive-btn:hover{
    background:var(--archive-accent);
    color:#fff;
}

.archive-divider{
    width:100px;
    height:1px;
    background:var(--archive-border-light);
    margin:2rem 0;
}

/* ==================================================
   HOMEPAGE
================================================== */

.era-status-card .era-label{
    font-size:.65rem;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--archive-text-muted);
    margin-bottom:.4rem;
    display:block;
}

.era-status-card .era-name{
    font-size:1.4rem;
    color:var(--archive-text);
    margin:0;
    letter-spacing:.05em;
}

.eras-list{
    list-style:none;
    padding:0;
    margin:0;
    border-top:1px solid var(--archive-border);
}

.eras-list li{
    border-bottom:1px solid var(--archive-border);
}

.eras-list li a{
    display:flex;
    align-items:baseline;
    gap:1.25rem;
    padding:1.1rem 0;
    color:var(--archive-text);
    transition:color .15s ease;
}

.eras-list li a:hover{
    color:var(--archive-accent);
}

.era-numeral{
    font-size:.65rem;
    letter-spacing:.2em;
    color:var(--archive-text-muted);
    text-transform:uppercase;
    min-width:2.5rem;
    flex-shrink:0;
    transition:color .15s ease;
}

.era-entry-title{
    font-size:.95rem;
    letter-spacing:.05em;
    color:inherit;
    flex-shrink:0;
}

.era-entry-desc{
    font-size:.8rem;
    color:#6a6a6a;
    font-style:italic;
    margin-left:auto;
    text-align:right;
}

.publication-card .pub-date{
    font-size:.7rem;
    letter-spacing:.2em;
    color:#6a6a6a;
    text-transform:uppercase;
    margin-bottom:.75rem;
    display:block;
}

.publication-card .pub-title{
    font-size:1.3rem;
    color:var(--archive-text);
    margin-bottom:.75rem;
}

.publication-card .pub-body{
    font-size:.88rem;
    color:var(--archive-text-muted);
    line-height:1.7;
    margin-bottom:1.5rem;
}

/* ==================================================
   TIMELINE
================================================== */

.timeline-item{
    padding:1rem 0;
    border-bottom:1px solid var(--archive-border);
}

.timeline-item:last-child{
    border-bottom:none;
}

.timeline-item span{
    color:var(--archive-text-muted);
    font-size:.85rem;
}

.timeline-item h5{
    margin-top:.5rem;
}

.timeline-card{
    position:relative;
    padding-left:40px;
    margin-bottom:40px;
}

.timeline-card::before{
    content:"";
    position:absolute;
    left:10px;
    top:0;
    width:2px;
    height:100%;
    background:var(--archive-accent);
}

.timeline-era{
    color:var(--archive-accent);
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:.85rem;
    margin-bottom:1rem;
}

#timelineContainer .record-card{
    padding:2rem;
}

.timeline-title{
    font-size:2rem;
    margin-bottom:.5rem;
}

/* ==================================================
   ERA PAGES
================================================== */
.chronicle-end{

    text-align:center;

    margin-top:5rem;

    padding-top:2rem;

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

    color:var(--archive-text-muted);

    letter-spacing:.25em;

    font-size:.8rem;

    text-transform:uppercase;


}

.archive-tag{

    display:inline-block;

    margin:0 auto 3rem;

    padding:.75rem 1.5rem;

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

    background:#090909;

    color:var(--archive-text-muted);

    letter-spacing:.15em;

    text-transform:uppercase;

    font-size:.8rem;

}
.era-card{
    position:relative;
    overflow:hidden;
}

.era-number{
    color:var(--archive-accent);
    letter-spacing:4px;
    text-transform:uppercase;
    font-size:.8rem;
    margin-bottom:1rem;
}

.era-quote{
    text-align:center;
    color:var(--archive-text-muted);
    font-style:italic;
    font-size:1.2rem;
    max-width:700px;
    margin:1rem auto 0;
}

.chronicle-content{
    white-space:pre-line;
    line-height:2.1;
    color:var(--archive-text);
    font-size:1.05rem;
    text-align:justify;
    max-width:620px;
    margin:auto;
}

.archive-link{
    margin-top:1.5rem;
    color:var(--archive-accent);
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:.8rem;
}

/* ==================================================
   INDIVIDUALS
================================================== */

.individual-name{
    font-size:1.8rem;
    margin-bottom:.5rem;
}

.individual-meta{
    color:var(--archive-text-muted);
    font-size:.9rem;
    line-height:1.7;
}

.status-deceased{
    color:#c94c4c;
}

.status-active{
    color:#7dbb7d;
}

.status-unknown{
    color:#b5b5b5;
}

/* ==================================================
   UTILITIES
================================================== */

.narrow-content{
    max-width:700px;
    margin:auto;
}

.medium-content{
    max-width:900px;
    margin:auto;
}

.wide-content{
    max-width:1200px;
    margin:auto;
}

.record-card.text-center h3{
    font-size:clamp(1.25rem,4vw,2rem);
    margin-bottom:.5rem;
}

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

@media (min-width:992px){
    .image-panel{
        position:sticky;
        top:100px;
    }
    .col-lg-2{
        flex:0 0 auto;
        width:16.666667%;
    }
}

@media (max-width:767px){
    .record-card{
        padding:1.5rem;
    }
    .era-entry-desc{
        display:none;
    }
}

/* ==================================================
   LOADING SCREEN
================================================== */

#loadingScreen{

    position:fixed;

    inset:0;

    background:#000000;

    z-index:9999;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:2rem;

}

.loading-seal{

    width:90px;

    height:auto;

    margin-bottom:1.5rem;

}

#loadingScreen h1{

    color:#d6d6d6;

    font-size:4rem;

    letter-spacing:.05em;

    margin-bottom:1rem;

}


.loading-status{

    color:#8a8a8a;

    text-transform:uppercase;

    letter-spacing:.2em;

    font-size:.85rem;

    animation:blinkStatus 1.5s infinite;

}

@keyframes blinkStatus{

    0%,100%{
        opacity:1;
    }

    50%{
        opacity:.4;
    }

}

#loadingQuote{

    max-width:500px;

    color:#d6d6d6;

    font-style:italic;

    line-height:2;

    font-size:1.15rem;

    margin-bottom:2rem;

}

.loading-bar{

    width:260px;

    height:2px;

    margin:40px auto 0;

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

    overflow:hidden;

    position:relative;

}

.loading-progress{

    width:0;

    height:100%;

    background:#8b0000;

    box-shadow:
        0 0 6px rgba(139,0,0,.8),
        0 0 12px rgba(139,0,0,.5);

    animation:archiveLoad 3s linear forwards;

}

@keyframes archiveLoad{

    from{
        width:0%;
    }

    to{
        width:100%;
    }

}

#loadingScreen h1{

    color:#d6d6d6;

    font-size:4rem;

    letter-spacing:.05em;

       margin-bottom:1rem;



}


.loading-title{

    color:#d6d6d6;

    font-size:4rem;

    letter-spacing:.05em;

    animation:entityPulse 2.5s infinite;

}

@keyframes entityPulse{

    0%,70%,100%{
        color:#d6d6d6;
        text-shadow:none;
    }

    75%{
        color:#ff0000;
        text-shadow:
            0 0 10px #ff0000,
            0 0 20px #ff0000,
            0 0 40px #ff0000;
    }

    80%{
        color:#d6d6d6;
    }

    85%{
        color:#ff0000;
        text-shadow:
            0 0 15px #ff0000,
            0 0 30px #ff0000,
            0 0 50px #ff0000;
    }

    90%{
        color:#d6d6d6;
        text-shadow:none;
    }

}