/* === Base Reset & Background === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* palette: #7b9e87 #a88bba #c97b84 #d4ecd0 #e8e0d4 #c4b8a8 #0d1117 #161b22 #2a3040 */
body {
    background: #0d1117;
    background-image: radial-gradient(ellipse at 30% 20%, #161b22 0%, #0d1117 70%);
    color: #c4b8a8;
    font-family: 'EB Garamond', serif;
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    line-height: 1.75;
    font-weight: 400;
    min-height: 100vh;
    overflow-x: hidden;
}

/* === Grain Overlay === */
.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.03;
}
.grain svg {
    width: 100%;
    height: 100%;
}

/* === Fairy Dust === */
.fairy-dust {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.fairy-particle {
    position: absolute;
    will-change: transform;
}

/* Particle drift animations */
@keyframes drift-1 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(30px, -60px); }
    50%  { transform: translate(-20px, -120px); }
    75%  { transform: translate(40px, -180px); }
    100% { transform: translate(0, -240px); }
}
@keyframes drift-2 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-40px, -50px); }
    50%  { transform: translate(25px, -110px); }
    75%  { transform: translate(-15px, -170px); }
    100% { transform: translate(0, -230px); }
}
@keyframes drift-3 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(20px, -70px); }
    50%  { transform: translate(-35px, -130px); }
    75%  { transform: translate(10px, -200px); }
    100% { transform: translate(0, -260px); }
}

/* === Navigation Glyph === */
.nav-glyph {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    animation: glyph-border-shift 12s linear infinite;
}
.nav-glyph svg {
    display: block;
}
.nav-glyph svg circle,
.nav-glyph svg polygon {
    stroke: #7b9e87;
    transition: stroke 0.4s ease, opacity 0.4s ease;
}
.nav-glyph:hover {
    transform: translateY(-4px) scale(1.08);
}
.nav-glyph:hover svg circle,
.nav-glyph:hover svg polygon {
    stroke: #d4ecd0;
    filter: drop-shadow(0 0 8px rgba(123,158,135,0.4));
}

@keyframes glyph-border-shift {
    0%   { filter: drop-shadow(0 0 4px rgba(123,158,135,0.2)); }
    33%  { filter: drop-shadow(0 0 4px rgba(168,139,186,0.2)); }
    66%  { filter: drop-shadow(0 0 4px rgba(201,123,132,0.2)); }
    100% { filter: drop-shadow(0 0 4px rgba(123,158,135,0.2)); }
}

/* === Manuscript Column === */
.manuscript-col {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 clamp(2.5rem, 5vw, 6rem);
}

/* === Chapter Sections === */
.chapter {
    position: relative;
    padding: clamp(3rem, 6vw, 6rem) 0;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.chapter.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Title chapter */
.chapter-title {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.chapter-title .manuscript-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.title-display {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.8rem, 7vw, 5.5rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: #e8e0d4;
    text-shadow: 0 0 40px rgba(123,158,135,0.12), 0 0 80px rgba(168,139,186,0.06);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.title-display:hover {
    transform: translateY(-3px);
    text-shadow: 0 0 40px rgba(123,158,135,0.25), 0 0 80px rgba(168,139,186,0.12);
}

.subtitle {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #7b9e87;
}

/* Chapter labels */
.chapter-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #7b9e87;
    display: block;
    margin-bottom: 1rem;
}

/* Chapter headings */
.chapter-heading {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 clamp(2.5rem, 5vw, 6rem);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.chapter-heading h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: #e8e0d4;
    text-shadow: 0 0 40px rgba(123,158,135,0.12), 0 0 80px rgba(168,139,186,0.06);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: default;
}
.chapter-heading h2:hover {
    transform: translateY(-3px);
    text-shadow: 0 0 40px rgba(123,158,135,0.25), 0 0 80px rgba(168,139,186,0.12);
}

/* Body text */
.manuscript-col p {
    margin-bottom: 1.5em;
    color: #c4b8a8;
}
.manuscript-col p:last-child {
    margin-bottom: 0;
}

/* === Glyph Breaks === */
.glyph-break {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
}

.glyph-hex {
    width: 40px;
    height: 40px;
    border: 1px solid #2a3040;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: sigil-rotate 60s linear infinite;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.glyph-hex:hover {
    transform: translateY(-4px);
    animation-duration: 30s;
}

.glyph-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #7b9e87;
}

/* SVG Sigils */
.sigil {
    animation: sigil-rotate 60s linear infinite;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.sigil:hover {
    transform: translateY(-4px);
    animation-duration: 30s;
}
.sigil.drawn circle,
.sigil.drawn polygon,
.sigil.drawn line {
    transition: stroke-dashoffset 1.5s ease;
    stroke-dashoffset: 0 !important;
}

@keyframes sigil-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* === Floating Marginalia (wide screens) === */
@media (min-width: 1200px) {
    .marginalia {
        position: absolute;
        opacity: 0.2;
        box-shadow: 0 0 6px rgba(123,158,135,0.3);
    }
}

/* === Responsive === */
@media (max-width: 600px) {
    .manuscript-col {
        padding: 0 1.5rem;
    }
    .chapter-heading {
        padding: 0 1.5rem;
        min-height: 40vh;
    }
}