/* historical.quest - Brutalist Scholasticism */

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

:root{
    --abyss:#0A1628;
    --slate:#162033;
    --vellum:#E8E0D0;
    --codex-blue:#4A6FA5;
    --gold:#C4A35A;
    --foxing:#8B6914;
    --concrete:#3A4556;
}

html{scroll-behavior:smooth}

body{
    background:var(--abyss);
    color:var(--vellum);
    font-family:'Source Serif 4',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.75;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Progress timeline rail */
.progress-rail{
    position:fixed;
    right:16px;
    top:50%;
    transform:translateY(-50%);
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(16px,3vh,32px);
    height:60vh;
    justify-content:space-between;
}

.rail-track{
    position:absolute;
    top:0;bottom:0;left:50%;
    width:2px;
    background:var(--concrete);
    transform:translateX(-50%);
}

.rail-fill{
    width:100%;
    height:0%;
    background:var(--codex-blue);
    transition:height 100ms linear;
}

.rail-node{
    width:8px;height:8px;
    border-radius:50%;
    background:var(--concrete);
    border:1.5px solid var(--concrete);
    position:relative;
    z-index:2;
    transition:background 300ms ease,border-color 300ms ease,box-shadow 300ms ease;
}

.rail-node.active{
    background:var(--codex-blue);
    border-color:var(--codex-blue);
    box-shadow:0 0 12px rgba(74,111,165,0.6);
}

.rail-node.passed{
    background:var(--gold);
    border-color:var(--gold);
}

/* Strata container */
.strata-container{
    position:relative;
}

/* Base stratum */
.stratum{
    min-height:100vh;
    position:relative;
    overflow:hidden;
}

/* Hero stratum */
.hero-stratum{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 clamp(32px,6vw,80px);
    min-height:100vh;
}

.hero-text{
    margin-bottom:2rem;
}

.hero-line{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--vellum);
    overflow:hidden;
}

.line-2{
    padding-left:30%;
}

.wipe-reveal{
    display:inline-block;
    opacity:0;
    transform:translateX(-40px);
    transition:opacity 600ms ease,transform 600ms ease;
}

.wipe-reveal.revealed{
    opacity:1;
    transform:translateX(0);
}

.hero-tagline{
    font-family:'Space Mono',monospace;
    font-size:clamp(0.65rem,0.8vw,0.75rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--codex-blue);
    min-height:1.5em;
}

/* Content strata */
.content-stratum{
    display:flex;
    padding:clamp(60px,10vh,120px) clamp(24px,4vw,60px);
    gap:0;
    position:relative;
}

/* Slabs */
.slab{
    background:var(--slate);
    padding:clamp(32px,4vw,60px);
    position:relative;
    box-shadow:
        0 2px 8px rgba(10,22,40,0.3),
        0 8px 24px rgba(10,22,40,0.25),
        0 24px 64px rgba(10,22,40,0.2);
    will-change:transform,opacity;
    opacity:0;
    transition:opacity 400ms ease,transform 400ms ease-out;
}

.slab-left{
    width:65%;
    margin-right:auto;
    transform:translateX(-80px);
}

.slab-right{
    width:65%;
    margin-left:auto;
    transform:translateX(80px);
}

.slab-wide{
    width:70%;
    margin:0 auto;
    transform:translateY(40px);
}

.content-stratum.visible .slab{
    opacity:1;
    transform:translateX(0) translateY(0);
}

/* Watermark numeral */
.watermark-num{
    position:absolute;
    top:-20px;right:-10px;
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(8rem,20vw,16rem);
    color:var(--gold);
    opacity:0.08;
    line-height:1;
    pointer-events:none;
    z-index:0;
}

/* Section SVGs */
.section-svg{
    width:clamp(120px,20vw,200px);
    height:auto;
    margin-bottom:1.5rem;
    opacity:0.7;
}

/* Brutalist rule lines */
.rule-line{
    height:4px;
    background:var(--concrete);
    width:0;
    max-width:65%;
    margin-bottom:1.5rem;
    transition:width 600ms ease-out 200ms;
}

.content-stratum.visible .rule-line{
    width:65%;
}

/* Section headings */
.section-heading{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--vellum);
    margin-bottom:1.25rem;
}

/* Body text */
.body-text{
    font-family:'Source Serif 4',serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.15rem);
    line-height:1.75;
    color:var(--vellum);
    max-width:65ch;
    margin-bottom:1rem;
    position:relative;
    z-index:1;
}

/* Pull quotes */
.pull-quote{
    margin:2rem 0;
    padding:1rem 0;
    position:relative;
}

.pull-quote p{
    font-family:'Playfair Display',serif;
    font-weight:400;
    font-style:italic;
    font-size:clamp(1.2rem,2vw,1.8rem);
    line-height:1.35;
    color:var(--vellum);
    padding:0 2.5rem;
}

.quote-mark{
    font-family:'Playfair Display',serif;
    font-size:3rem;
    color:var(--gold);
    line-height:1;
    position:absolute;
    top:0;left:0;
}

.quote-mark.close{
    position:static;
    display:inline;
    margin-left:0.25rem;
}

/* Margin column */
.margin-col{
    width:clamp(12vw,20vw,25vw);
    flex-shrink:0;
    padding:clamp(60px,10vh,120px) clamp(12px,2vw,24px);
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.margin-right{
    order:2;
}

.margin-left{
    order:-1;
}

/* Margin annotations */
.margin-annotation{
    opacity:0;
    transition:opacity 400ms ease;
}

.content-stratum.visible .margin-annotation{
    opacity:0.5;
}

.content-stratum.visible .margin-annotation:nth-child(2){transition-delay:50ms}
.content-stratum.visible .margin-annotation:nth-child(3){transition-delay:100ms}
.content-stratum.visible .margin-annotation:nth-child(4){transition-delay:150ms}

/* Date badges */
.date-badge{
    display:inline-block;
    font-family:'Space Mono',monospace;
    font-size:clamp(0.65rem,0.8vw,0.75rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--foxing);
    border:1px solid var(--concrete);
    padding:3px 10px;
    transition:transform 200ms ease,border-color 200ms ease;
    cursor:default;
}

.date-badge:hover{
    transform:scale(1.05);
    border-color:var(--codex-blue);
}

/* Annotation text */
.annotation{
    font-family:'Source Serif 4',serif;
    font-weight:300;
    font-size:clamp(0.75rem,0.9vw,0.85rem);
    line-height:1.6;
    color:var(--vellum);
}

/* Bedrock stratum */
.bedrock-stratum{
    background:var(--vellum);
    color:var(--abyss);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
}

.bedrock-content{
    text-align:center;
    position:relative;
}

.bedrock-text{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:0.02em;
    color:var(--abyss);
    position:relative;
    z-index:2;
}

.bedrock-grid{
    position:absolute;
    inset:-100px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0.3;
    z-index:1;
}

.grid-pattern{
    width:400px;
    height:200px;
    animation:gridRotate 720s linear infinite;
}

@keyframes gridRotate{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}

/* Responsive */
@media(max-width:900px){
    .content-stratum{
        flex-direction:column;
        padding:clamp(40px,6vh,80px) 20px;
    }
    .slab-left,.slab-right,.slab-wide{
        width:100%;
        margin:0;
    }
    .margin-col{
        width:100%;
        order:2;
        padding:24px 0;
        flex-direction:row;
        flex-wrap:wrap;
        gap:12px;
    }
    .margin-left{order:2}
    .line-2{padding-left:10%}
    .progress-rail{display:none}
    .watermark-num{
        font-size:clamp(5rem,15vw,10rem);
    }
}