:root {
    --aged-parchment: #F4EDE4;
    --foxed-vellum: #E8DDD0;
    --burnt-umber-ink: #3E3226;
    --weathered-umber: #8B7D6B;
    --oxidized-copper: #4A7C6F;
    --vermillion-seal: #C45A3C;
    --archive-shadow: #2A1F15;
    --manuscript-gold: #B8963E;
    --d4c4b0: #D4C4B0;
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--aged-parchment);
    color: var(--burnt-umber-ink);
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* Folio sections */
.folio {
    min-height: 100vh;
    position: relative;
    display: grid;
    grid-template-columns: [margin] 8vw [spine] 2px [gutter] 4vw [body-start] 1fr [body-end] 12vw [edge];
    padding: 6rem 0;
}

.folio-aged-parchment {
    background-color: var(--aged-parchment);
}

.folio-foxed-vellum {
    background-color: var(--foxed-vellum);
}

/* Page turn shadow */
.folio::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: radial-gradient(ellipse at 50% 100%, rgba(62, 50, 38, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* Spine line */
.spine-line {
    position: absolute;
    left: 8vw;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(107, 91, 79, 0.4);
    grid-column: spine;
}

.spine-marker {
    position: absolute;
    left: calc(8vw - 8px);
    top: 2rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 10px;
    color: var(--oxidized-copper);
    letter-spacing: 0.05em;
}

/* Folio body */
.folio-body {
    grid-column: body-start / body-end;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0;
}

/* Margin annotations */
.margin-annotation {
    grid-column: body-end / edge;
    padding: 0 1.5rem;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.margin-annotation.visible {
    opacity: 1;
}

.sticky-note {
    position: sticky;
    top: 40vh;
    align-self: start;
}

.annotation-text {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    color: var(--weathered-umber);
    opacity: 0.7;
    line-height: 1.5;
    display: block;
}

/* Ruled margin lines */
.ruled-margin-lines {
    grid-column: margin;
    background: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent calc(1.75em - 0.5px),
        rgba(139, 125, 107, 0.15) calc(1.75em - 0.5px),
        rgba(139, 125, 107, 0.15) 1.75em
    );
    background-size: 100% 1.75em;
}

/* Hero Inscription - Folio I */
.hero-inscription {
    position: relative;
    margin-bottom: 3rem;
}

.hero-initial {
    position: relative;
    display: inline-block;
}

.knotwork-frame {
    position: absolute;
    top: -10px;
    left: -15px;
    opacity: 0.3;
}

.gold-initial {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 700;
    color: var(--manuscript-gold);
    text-shadow: 0 0 20px rgba(184, 150, 62, 0.2);
    line-height: 1;
    display: none;
}

.hero-title {
    display: flex;
    flex-direction: column;
}

.hero-archaic {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(3.5rem, 9vw, 8rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--burnt-umber-ink);
}

.hero-archaic::first-letter {
    color: var(--manuscript-gold);
    text-shadow: 0 0 20px rgba(184, 150, 62, 0.2);
}

.hero-works {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3vw, 3.2rem);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.06em;
    text-align: right;
    color: var(--weathered-umber);
    line-height: 1.1;
}

.hero-tagline {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: var(--burnt-umber-ink);
    max-width: 600px;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--burnt-umber-ink);
    width: 0;
    animation: typewriterExpand 3s 1.5s steps(70) forwards, cursorBlink 0.7s 1.5s step-end 6;
}

@keyframes typewriterExpand {
    to { width: 100%; }
}

@keyframes cursorBlink {
    50% { border-color: transparent; }
}

/* Paleographic watermarks */
.paleographic-watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.03;
    overflow: hidden;
}

.watermark-phoenician {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ctext x='20' y='80' font-size='60' fill='%233E3226' font-family='serif' transform='rotate(3)'%3E%F0%90%A4%80%F0%90%A4%81%F0%90%A4%82%F0%90%A4%83%3C/text%3E%3Ctext x='10' y='160' font-size='50' fill='%233E3226' font-family='serif' transform='rotate(-2)'%3E%F0%90%A4%84%F0%90%A4%85%F0%90%A4%86%3C/text%3E%3C/svg%3E");
    background-size: 300%;
    transform: rotate(2deg);
}

.watermark-linearb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ctext x='10' y='100' font-size='80' fill='%233E3226' font-family='serif' transform='rotate(-3)'%3E%E2%98%B0%E2%98%B1%E2%98%B2%3C/text%3E%3C/svg%3E");
    background-size: 400%;
    transform: rotate(-2deg);
}

/* Stratigraphic dividers */
.strata-divider {
    height: 20px;
    background: linear-gradient(
        to bottom,
        #2A1F15 0%,
        #3E3226 15%,
        #6B5B4F 30%,
        #8B7D6B 45%,
        #D4C4B0 60%,
        #8B7D6B 75%,
        #3E3226 90%,
        #2A1F15 100%
    );
}

.strata-2 {
    background: linear-gradient(
        to bottom,
        #3E3226 0%,
        #6B5B4F 20%,
        #D4C4B0 40%,
        #B8963E 50%,
        #D4C4B0 60%,
        #6B5B4F 80%,
        #3E3226 100%
    );
}

.strata-3 {
    background: linear-gradient(
        to bottom,
        #2A1F15 0%,
        #4A7C6F 25%,
        #8B7D6B 50%,
        #4A7C6F 75%,
        #2A1F15 100%
    );
}

.strata-4 {
    background: linear-gradient(
        to bottom,
        #3E3226 0%,
        #D4C4B0 30%,
        #F4EDE4 50%,
        #D4C4B0 70%,
        #3E3226 100%
    );
}

/* Fragment text - Folio II */
.fragment-text {
    max-width: 650px;
    padding: 2rem 3rem;
    position: relative;
}

.fragment-text p {
    margin-bottom: 1.5rem;
}

/* Slide reveal */
.slide-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.slide-reveal.revealed {
    clip-path: inset(0 0 0 0);
}

/* Drop cap */
.drop-cap::first-letter {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 700;
    float: left;
    line-height: 0.8;
    margin-right: 0.1em;
    color: var(--manuscript-gold);
    text-shadow: 0 0 20px rgba(184, 150, 62, 0.2);
}

.vermillion-cap::first-letter {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4em;
    font-weight: 700;
    float: left;
    line-height: 0.8;
    margin-right: 0.1em;
    color: var(--vermillion-seal);
}

/* Diagram - Folio III */
.diagram-body {
    align-items: center;
}

.diagram-svg {
    max-width: 100%;
    height: auto;
}

.draw-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.diagram-svg.drawn .draw-path {
    stroke-dashoffset: 0;
}

/* Index - Folio IV */
.index-list {
    max-width: 600px;
}

.index-entry {
    padding: 1.5rem 0;
    border-bottom: 0.5px solid rgba(139, 125, 107, 0.3);
}

.index-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
    color: var(--burnt-umber-ink);
    margin-bottom: 0.3rem;
}

.index-era {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: clamp(0.7rem, 1.2vw, 0.85rem);
    color: var(--weathered-umber);
    display: block;
    margin-bottom: 0.5rem;
}

.index-desc {
    font-family: 'Libre Baskerville', serif;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    color: var(--burnt-umber-ink);
    line-height: 1.6;
}

/* Fade reveal */
.fade-reveal {
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.fade-reveal.visible {
    opacity: 1;
}

/* Colophon - Folio V */
.folio-colophon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.colophon-body {
    align-items: center;
    text-align: center;
}

.colophon-block {
    padding: 3rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    max-width: 400px;
}

/* Border animate */
.border-animate {
    position: relative;
}

.border-animate::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid var(--oxidized-copper);
    clip-path: inset(0 100% 100% 0);
    transition: clip-path 3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.border-animate.revealed::before {
    clip-path: inset(0 0 0 0);
}

.fleuron {
    margin-bottom: 0.5rem;
}

.colophon-statement {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    color: var(--burnt-umber-ink);
    line-height: 1.7;
}

.colophon-domain {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--burnt-umber-ink);
}

.colophon-copy {
    font-family: 'IM Fell English', serif;
    font-size: 0.75rem;
    color: var(--weathered-umber);
    letter-spacing: 0.1em;
}

/* Links */
a {
    color: var(--oxidized-copper);
    text-decoration: none;
    position: relative;
    transition: color 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--vermillion-seal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

a:hover {
    color: var(--vermillion-seal);
}

a:hover::after {
    transform: scaleX(1);
}

/* Responsive */
@media (max-width: 768px) {
    .folio {
        grid-template-columns: 1fr;
        padding: 3rem 1.5rem;
    }

    .spine-line {
        display: none;
    }

    .spine-marker {
        position: static;
        margin-bottom: 1rem;
    }

    .folio-body {
        grid-column: 1;
    }

    .margin-annotation {
        grid-column: 1;
        padding: 1rem 0;
        position: static;
        opacity: 0.7;
    }

    .ruled-margin-lines {
        display: none;
    }

    .hero-tagline {
        white-space: normal;
        width: auto;
        border-right: none;
        animation: none;
        opacity: 1;
    }

    .folio-colophon {
        grid-template-columns: 1fr;
    }
}