/* historic.quest - Sepia-Toned Cinematic Antiquarianism */

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

:root{
    --vellum:#F2E8D5;
    --oxblood:#2B1810;
    --walnut:#3D2B1F;
    --brass:#B8860B;
    --verdigris:#4A7C6F;
    --foxed:#C4A97D;
    --iron-gall:#5B4636;
}

html{
    scroll-behavior:smooth;
    scroll-snap-type:y mandatory;
}

body{
    background:var(--vellum);
    color:var(--walnut);
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.4vw,1.15rem);
    line-height:1.75;
    letter-spacing:0.01em;
    overflow-x:hidden;
}

/* Paper grain SVG overlay */
.paper-grain{
    position:fixed;
    inset:0;
    width:100%;height:100%;
    pointer-events:none;
    z-index:9999;
    opacity:0.03;
    mix-blend-mode:multiply;
}

/* Timeline ribbon */
.timeline-ribbon{
    position:fixed;
    bottom:0;left:0;right:0;
    height:48px;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(12px,3vw,40px);
    background:linear-gradient(180deg,rgba(43,24,16,0.0) 0%,rgba(43,24,16,0.85) 30%,rgba(43,24,16,0.95) 100%);
    padding:0 24px;
    box-shadow:0 -4px 20px rgba(43,24,16,0.3);
}

.ribbon-date{
    font-family:'IM Fell English',serif;
    font-size:clamp(0.7rem,1.1vw,0.9rem);
    color:var(--foxed);
    text-decoration:none;
    letter-spacing:0.05em;
    transition:color 200ms ease,transform 200ms ease;
    cursor:pointer;
    position:relative;
}

.ribbon-date:hover{
    color:var(--brass);
    transform:scale(1.1);
}

.ribbon-date.active{
    color:var(--brass);
}

.ribbon-marker{
    display:none;
}

/* Codex container */
.codex{
    position:relative;
}

/* Spread base */
.spread{
    width:100vw;
    height:100vh;
    display:flex;
    align-items:stretch;
    position:relative;
    overflow:hidden;
    scroll-snap-align:start;
    perspective:1200px;
}

/* Light spread */
.spread-light{
    background:var(--vellum);
    color:var(--walnut);
}

/* Dark spread */
.spread-dark{
    background:var(--oxblood);
    color:var(--vellum);
}

/* Deep spread (Antiquity) */
.spread-deep{
    background:linear-gradient(175deg,var(--oxblood) 0%,#1A0F08 60%,#0D0806 100%);
    color:var(--vellum);
}

/* Spread border frame */
.spread-border{
    position:absolute;
    inset:24px;
    border:1px solid var(--foxed);
    pointer-events:none;
    z-index:5;
}

.border-dark{
    border-color:rgba(196,169,125,0.3);
}

/* Fleuron corner ornaments */
.fleuron{
    position:absolute;
    font-family:'IM Fell English',serif;
    font-size:18px;
    color:var(--brass);
    line-height:1;
}

.corner-tl{top:-2px;left:-2px}
.corner-tr{top:-2px;right:-2px}
.corner-bl{bottom:-2px;left:-2px}
.corner-br{bottom:-2px;right:-2px}

/* Verso and recto panels */
.spread-verso,.spread-recto{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(48px,6vh,80px) clamp(32px,5vw,72px);
    position:relative;
    z-index:2;
}

/* Gutter shadow */
.spread-gutter{
    width:1px;
    flex-shrink:0;
    background:transparent;
    box-shadow:inset 3px 0 12px rgba(30,20,10,0.15),
               inset -3px 0 12px rgba(30,20,10,0.15);
    z-index:3;
}

.gutter-dark{
    box-shadow:inset 3px 0 12px rgba(0,0,0,0.3),
               inset -3px 0 12px rgba(0,0,0,0.3);
}

/* Full-width panel (Antiquity) */
.spread-full{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(48px,6vh,80px) clamp(32px,5vw,72px);
    position:relative;
    z-index:2;
}

/* Title page */
.title-page{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1;
    width:100%;
    text-align:center;
}

.title-domain{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(5rem,15vw,12rem);
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--walnut);
}

.title-domain .char{
    display:inline-block;
    opacity:0;
    transition:opacity 150ms ease;
}

.title-domain .char.visible{
    opacity:1;
    text-shadow:0 0 8px rgba(61,43,31,0.15);
}

.title-subtitle{
    font-family:'IM Fell English',serif;
    font-style:italic;
    font-size:clamp(1rem,2vw,1.5rem);
    color:var(--iron-gall);
    margin-top:1.5rem;
    opacity:0;
    transition:opacity 800ms ease;
}

.title-subtitle.visible{
    opacity:1;
}

.scroll-fleuron{
    font-family:'IM Fell English',serif;
    font-size:24px;
    color:var(--brass);
    margin-top:3rem;
    animation:fleuronPulse 2s ease-in-out infinite;
    opacity:0;
    transition:opacity 600ms ease;
}

.scroll-fleuron.visible{
    opacity:1;
}

@keyframes fleuronPulse{
    0%,100%{transform:translateY(0);opacity:0.6}
    50%{transform:translateY(6px);opacity:1}
}

/* Spread titles */
.spread-title{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.02em;
    line-height:1.15;
    color:var(--walnut);
    margin-bottom:1rem;
}

.spread-title.light{
    color:var(--vellum);
}

/* Spread body text */
.spread-body{
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.4vw,1.15rem);
    line-height:1.75;
    color:var(--walnut);
    margin-bottom:1.25rem;
    text-align:justify;
    max-width:520px;
}

.spread-body.light{
    color:var(--vellum);
}

/* Drop cap */
.drop-cap{
    float:left;
    font-family:'IM Fell English',serif;
    font-size:4.5rem;
    line-height:0.8;
    padding-right:12px;
    padding-top:6px;
    color:var(--brass);
    text-shadow:1px 1px 0 rgba(59,43,31,0.15);
}

.drop-cap.light{
    color:var(--brass);
    text-shadow:1px 1px 0 rgba(0,0,0,0.2);
}

/* Watermark date */
.watermark-date{
    position:absolute;
    bottom:clamp(20px,4vh,60px);
    right:clamp(32px,5vw,72px);
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(6rem,18vw,14rem);
    color:var(--walnut);
    opacity:0.06;
    line-height:1;
    pointer-events:none;
    z-index:1;
}

.watermark-date.light{
    color:var(--vellum);
    opacity:0.06;
}

/* Map divider */
.map-divider{
    max-width:400px;
    margin-bottom:1.5rem;
}

.map-divider svg{
    width:100%;
    height:12px;
    display:block;
}

/* SVG illustrations */
.compass-rose{
    width:clamp(200px,40vw,360px);
    height:auto;
    margin:0 auto;
    animation:compassRotate 720s linear infinite;
}

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

.astrolabe{
    width:clamp(180px,35vw,300px);
    height:auto;
    margin:0 auto;
    opacity:0.8;
}

.map-fragment{
    width:clamp(200px,40vw,320px);
    height:auto;
    margin:0 auto;
    opacity:0.9;
}

.book-stack{
    width:clamp(180px,35vw,280px);
    height:auto;
    margin:0 auto;
    opacity:0.8;
}

/* Hourglass */
.hourglass{
    width:clamp(120px,20vw,200px);
    height:auto;
    margin-bottom:3rem;
}

/* Falling grains animation */
.grain{
    animation:grainFall 3s ease-in infinite;
}

.g1{animation-delay:0s}
.g2{animation-delay:0.4s}
.g3{animation-delay:0.8s}
.g4{animation-delay:1.2s}
.g5{animation-delay:1.6s}
.g6{animation-delay:2.0s}
.g7{animation-delay:2.4s}

@keyframes grainFall{
    0%{opacity:0;transform:translateY(-5px)}
    10%{opacity:1}
    80%{opacity:1}
    100%{opacity:0;transform:translateY(20px)}
}

/* Antiquity quote */
.antiquity-quote{
    text-align:center;
    max-width:600px;
}

.antiquity-quote p{
    font-family:'IM Fell English',serif;
    font-style:italic;
    font-size:clamp(1.8rem,3vw,2.8rem);
    line-height:1.5;
    color:var(--foxed);
}

/* Colophon */
.colophon{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1;
    text-align:center;
}

.colophon-text{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--walnut);
    margin-bottom:1rem;
}

.colophon-sub{
    font-family:'Lora',serif;
    font-weight:400;
    font-size:clamp(0.85rem,1.2vw,1rem);
    color:var(--iron-gall);
    line-height:1.8;
}

.return-fleuron{
    display:inline-block;
    margin-top:3rem;
    font-family:'IM Fell English',serif;
    font-size:32px;
    color:var(--brass);
    text-decoration:none;
    transition:transform 300ms ease;
}

.return-fleuron:hover{
    transform:scale(1.2);
}

/* Page turn animation class */
.spread.turning{
    animation:pageTurn 800ms cubic-bezier(0.25,0.46,0.45,0.94) forwards;
    transform-origin:left center;
}

@keyframes pageTurn{
    0%{transform:rotateY(0);opacity:1}
    100%{transform:rotateY(-90deg);opacity:0}
}

/* Responsive */
@media(max-width:768px){
    html{
        scroll-snap-type:y proximity;
    }
    .spread{
        flex-direction:column;
        height:auto;
        min-height:100vh;
    }
    .spread-verso,.spread-recto{
        padding:clamp(32px,4vh,60px) 24px;
    }
    .spread-gutter{
        width:100%;
        height:1px;
        box-shadow:inset 0 2px 8px rgba(30,20,10,0.1);
    }
    .spread-border{
        inset:12px;
    }
    .spread-body{
        text-align:left;
        max-width:100%;
    }
    .watermark-date{
        font-size:clamp(4rem,12vw,8rem);
        right:12px;
        bottom:12px;
    }
    .compass-rose,.astrolabe,.map-fragment,.book-stack{
        width:60vw;
        max-width:240px;
        margin:0 auto 2rem;
    }
    .timeline-ribbon{
        gap:8px;
        padding:0 12px;
    }
    .ribbon-date{
        font-size:0.65rem;
    }
}