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

body{
    background:#F5F0E8;
    color:#5C4B3A;
    font-family:'Source Serif 4',serif;
    font-size:1.0625rem;
    line-height:1.8;
    overflow-x:hidden;
}

h1,h2{
    font-family:'Cormorant Garamond',serif;
    color:#1C1A17;
    font-weight:600;
}

.page{
    max-width:800px;
    margin:0 auto;
    padding:0 2rem;
}

/* HERO */
.hero{
    min-height:80vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:4rem 0;
}
.chapter-num{
    font-family:'Cormorant Garamond',serif;
    font-size:1.2rem;
    color:#B07850;
    margin-bottom:0.5rem;
    letter-spacing:0.1em;
}
.title{
    font-size:clamp(2rem,4vw,3.5rem);
    line-height:1.2;
    margin-bottom:0.5rem;
}
.accent{color:#B07850}
.subtitle{
    font-family:'Cormorant Garamond',serif;
    font-size:1.2rem;
    color:#8A9178;
    margin-bottom:1rem;
    font-weight:400;
}
.desc{
    color:#5C4B3A;
    max-width:560px;
}

/* CHAPTER */
.chapter{
    display:flex;
    gap:2rem;
    margin-top:6rem;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.6s ease,transform 0.6s ease;
}
.chapter.visible{
    opacity:1;
    transform:translateY(0);
}
.timeline-marker{
    flex:0 0 60px;
    text-align:right;
    padding-top:0.5rem;
}
.marker-year{
    font-family:'Cormorant Garamond',serif;
    font-size:1rem;
    color:#B07850;
    font-weight:600;
    display:block;
    position:relative;
}
.marker-year::after{
    content:'';
    position:absolute;
    right:-1rem;
    top:50%;
    width:6px;height:6px;
    background:#B07850;
    border-radius:50%;
    transform:translateY(-50%);
}
.chapter-content{flex:1}
.chapter-num-small{
    font-family:'Cormorant Garamond',serif;
    font-size:0.9rem;
    color:#8A9178;
    margin-bottom:0.3rem;
}
.chapter-content h2{
    font-size:clamp(1.5rem,3vw,2.2rem);
    margin-bottom:1rem;
}
.chapter-content p{
    margin-bottom:1rem;
    color:#5C4B3A;
}

/* HISTORY CARD */
.history-card{
    margin:2rem 0;
    box-shadow:0 2px 12px rgba(92,75,58,0.1);
    background:#2C2420;
    overflow:hidden;
}
.sepia-placeholder{
    width:100%;
    height:220px;
    background:linear-gradient(135deg,#5C4B3A,#8A9178,#B07850);
    filter:sepia(0.12) contrast(1.02);
}
.card-caption{
    padding:1rem 1.2rem;
    font-size:0.9rem;
    color:#F5F0E8;
    line-height:1.6;
}

/* TILT-3D */
.tilt-card{
    transition:transform 0.4s ease;
    transform:perspective(800px) rotateX(0) rotateY(0);
}
.tilt-card:hover{
    transform:perspective(800px) rotateX(2deg) rotateY(-3deg);
}

/* FOOTER */
.archive-footer{
    margin-top:6rem;
    padding:3rem 0;
    border-top:1px solid rgba(92,75,58,0.2);
    text-align:center;
}
.date-stamp{
    font-family:'Cormorant Garamond',serif;
    font-size:0.85rem;
    color:#B07850;
    letter-spacing:0.15em;
    margin-bottom:0.5rem;
}
.archive-footer p{
    font-size:0.85rem;
    color:#8A9178;
    max-width:500px;
    margin:0 auto;
}

/* MOBILE */
@media(max-width:640px){
    .chapter{flex-direction:column;gap:0.5rem}
    .timeline-marker{text-align:left;flex:none}
    .marker-year::after{display:none}
}