/* ============================================
   namu.farm — Glitch-Corrupted Midnight Library
   ============================================ */

/* --- CSS Custom Properties (Design Palette) --- */
:root {
    --color-pale-blue: #C0D0E8;
    --color-muted-blue: #8098B8;
    --color-steel-blue: #6080A0;
    --color-midnight-base: #0C1424;
    --color-chapter-dark: #141C30;
    --color-glitch-red: #D04060;
    --color-glitch-cyan: #40D0C0;
    --color-farm-gold: #C0A060;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    background: var(--color-midnight-base);
    color: var(--color-muted-blue);
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.9;
    overflow-x: hidden;
}

/* --- Chapter Sections (Full-Bleed) --- */
.chapter {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.chapter-dark {
    background: var(--color-midnight-base);
}

.chapter-alt {
    background: var(--color-chapter-dark);
}

.chapter-primary {
    background: var(--color-midnight-base);
}

/* --- Background Illustrations --- */
.chapter-bg-illustration {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

/* --- Chapter Content --- */
.chapter-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    width: 100%;
    padding: 6rem 2rem;
}

/* --- Typography --- */
h1 {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 6vw, 5rem);
    color: var(--color-pale-blue);
    letter-spacing: 0.08em;
    text-align: center;
    line-height: 1.1;
}

h2 {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--color-pale-blue);
    margin-bottom: 2rem;
    line-height: 1.2;
}

.chapter-number {
    display: block;
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--color-steel-blue);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.hero-subtitle {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    color: var(--color-muted-blue);
    text-align: center;
    margin-top: 1.5rem;
    letter-spacing: 0.04em;
}

.chapter-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--color-pale-blue);
    margin-bottom: 2rem;
    line-height: 1.2;
}

.chapter-text {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    color: var(--color-muted-blue);
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

.chapter-text:last-child {
    margin-bottom: 0;
}

.chapter-quote {
    font-family: 'Nunito', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    color: var(--color-muted-blue);
    line-height: 1.9;
    margin: 2rem 0;
    padding: 1.5rem 2rem;
    border-left: 3px solid var(--color-steel-blue);
    font-style: italic;
}

.quote-attribution {
    display: block;
    font-size: 0.85em;
    color: var(--color-steel-blue);
    font-style: normal;
    margin-top: 0.8rem;
}

p {
    margin-bottom: 1.5rem;
}

p:last-child {
    margin-bottom: 0;
}

em {
    color: var(--color-farm-gold);
    font-style: italic;
}

/* --- Annotations (Scholarly Margin Notes) --- */
.annotation {
    max-width: 180px;
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--color-steel-blue);
    line-height: 1.6;
    margin-top: 2rem;
    position: relative;
}

.annotation-marker {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 0.65rem;
    color: var(--color-farm-gold);
    border: 1px solid var(--color-farm-gold);
    border-radius: 50%;
    width: 1.2em;
    height: 1.2em;
    line-height: 1.2em;
    text-align: center;
    margin-right: 0.4em;
    vertical-align: middle;
}

.annotation-text {
    vertical-align: middle;
}

.annotation-top-right {
    position: absolute;
    top: 3rem;
    right: 2rem;
    text-align: right;
}

.annotation-bottom-right {
    position: absolute;
    bottom: 3rem;
    right: 2rem;
    text-align: right;
}

.annotation-right {
    margin-left: auto;
    text-align: right;
}

.annotation-left {
    margin-right: auto;
    text-align: left;
}

/* --- Chapter Body Layout --- */
.chapter-body {
    display: flex;
    flex-direction: column;
}

.text-column {
    max-width: 680px;
}

/* --- Glitch Title Effect --- */
.glitch-title {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.glitch-title h1 {
    position: relative;
}

.glitch-title::before,
.glitch-title::after {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 6vw, 5rem);
    letter-spacing: 0.08em;
    width: 100%;
    text-align: center;
    opacity: 0;
    pointer-events: none;
}

.glitch-title::before {
    color: var(--color-glitch-red);
    z-index: 1;
}

.glitch-title::after {
    color: var(--color-glitch-cyan);
    z-index: 1;
}

.glitch-text {
    position: relative;
    display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.glitch-text::before {
    color: var(--color-glitch-red);
    z-index: 1;
}

.glitch-text::after {
    color: var(--color-glitch-cyan);
    z-index: 1;
}

.glitch-title.glitching::before {
    animation: glitch-red 0.3s steps(2) 1;
}

.glitch-title.glitching::after {
    animation: glitch-cyan 0.3s steps(2) 1;
}

@keyframes glitch-red {
    0% { opacity: 0.8; transform: translate(calc(-50% - 3px), calc(-50% + 2px)); clip-path: inset(20% 0 40% 0); }
    25% { opacity: 0.6; transform: translate(calc(-50% + 2px), calc(-50% - 1px)); clip-path: inset(60% 0 10% 0); }
    50% { opacity: 0.8; transform: translate(calc(-50% - 1px), calc(-50% + 3px)); clip-path: inset(10% 0 70% 0); }
    75% { opacity: 0.5; transform: translate(calc(-50% + 3px), calc(-50% - 2px)); clip-path: inset(40% 0 20% 0); }
    100% { opacity: 0; transform: translate(-50%, -50%); clip-path: inset(0 0 100% 0); }
}

@keyframes glitch-cyan {
    0% { opacity: 0.8; transform: translate(calc(-50% + 3px), calc(-50% - 2px)); clip-path: inset(40% 0 20% 0); }
    25% { opacity: 0.6; transform: translate(calc(-50% - 2px), calc(-50% + 1px)); clip-path: inset(10% 0 60% 0); }
    50% { opacity: 0.8; transform: translate(calc(-50% + 1px), calc(-50% - 3px)); clip-path: inset(70% 0 5% 0); }
    75% { opacity: 0.5; transform: translate(calc(-50% - 3px), calc(-50% + 2px)); clip-path: inset(20% 0 50% 0); }
    100% { opacity: 0; transform: translate(-50%, -50%); clip-path: inset(0 0 100% 0); }
}

/* --- Glitch Divider --- */
.glitch-divider {
    position: relative;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--color-steel-blue) 20%, var(--color-steel-blue) 80%, transparent 100%);
    opacity: 0.3;
    z-index: 2;
}

.glitch-divider::before,
.glitch-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.glitch-divider::before {
    background: linear-gradient(90deg, transparent 0%, var(--color-glitch-red) 20%, var(--color-glitch-red) 80%, transparent 100%);
}

.glitch-divider::after {
    background: linear-gradient(90deg, transparent 0%, var(--color-glitch-cyan) 20%, var(--color-glitch-cyan) 80%, transparent 100%);
}

.glitch-divider.glitching::before {
    animation: divider-glitch-red 0.4s steps(3) 1;
}

.glitch-divider.glitching::after {
    animation: divider-glitch-cyan 0.4s steps(3) 1;
}

@keyframes divider-glitch-red {
    0% { opacity: 0.8; transform: translateY(-2px); }
    33% { opacity: 0.5; transform: translateY(1px); }
    66% { opacity: 0.7; transform: translateY(-1px); }
    100% { opacity: 0; transform: translateY(0); }
}

@keyframes divider-glitch-cyan {
    0% { opacity: 0.8; transform: translateY(2px); }
    33% { opacity: 0.5; transform: translateY(-1px); }
    66% { opacity: 0.7; transform: translateY(1px); }
    100% { opacity: 0; transform: translateY(0); }
}

/* --- Stagger Entry Animation --- */
.stagger-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stagger-item {
    opacity: 0;
    transform: translateY(24px);
    animation: stagger-enter 0.6s ease forwards;
}

@keyframes stagger-enter {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stagger {
    opacity: 0;
    transform: translateY(24px);
    animation: stagger-enter 0.6s ease forwards;
}

.stagger.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Colophon (Footer) --- */
#colophon {
    min-height: auto;
    padding: 4rem 0;
}

.colophon-content {
    text-align: center;
    padding: 3rem 2rem;
}

/* --- Hero and Footer --- */
.hero-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--color-pale-blue);
    text-align: center;
    margin-bottom: 1.5rem;
}

.chapter-footer {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(96, 128, 160, 0.2);
}

.chapter-footer p {
    font-family: 'Caveat', cursive;
    color: var(--color-steel-blue);
    font-size: 1rem;
    margin-bottom: 0.8rem;
}

.colophon-content {
    text-align: center;
    padding: 3rem 2rem;
}

.colophon-line {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--color-pale-blue);
    letter-spacing: 0.1em;
    margin-bottom: 0.8rem;
}

.colophon-detail {
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--color-steel-blue);
    margin-bottom: 0.4rem;
}

.colophon-mark {
    font-size: 1.5rem;
    color: var(--color-farm-gold);
    margin-top: 1.5rem;
}

/* --- Hero Section Specifics --- */
#hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hero .chapter-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* --- Background Illustrations and SVG --- */
.background-illustration {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
    color: var(--color-steel-blue);
    width: 100%;
    height: 100%;
}

.hero-illustration {
    color: var(--color-steel-blue);
}

#hero-illustration {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M400 500 Q400 300 380 200 Q370 150 400 100 Q430 150 420 200 Q400 300 400 500Z' fill='none' stroke='%236080A0' stroke-width='1.5'/%3E%3Cpath d='M400 500 Q350 480 300 500 Q250 520 200 500' fill='none' stroke='%236080A0' stroke-width='1'/%3E%3Cpath d='M400 500 Q450 480 500 500 Q550 520 600 500' fill='none' stroke='%236080A0' stroke-width='1'/%3E%3Cpath d='M380 250 Q340 220 310 240 Q280 260 300 230 Q320 200 350 220' fill='none' stroke='%236080A0' stroke-width='1'/%3E%3Cpath d='M420 230 Q460 200 490 220 Q520 240 500 210 Q480 180 450 200' fill='none' stroke='%236080A0' stroke-width='1'/%3E%3Cpath d='M370 180 Q350 140 380 120 Q410 100 420 140 Q430 180 400 160' fill='none' stroke='%236080A0' stroke-width='1'/%3E%3Ccircle cx='400' cy='95' r='8' fill='none' stroke='%236080A0' stroke-width='0.8'/%3E%3Cpath d='M360 400 Q340 380 320 400 Q300 420 340 410' fill='none' stroke='%236080A0' stroke-width='0.8'/%3E%3Cpath d='M440 380 Q460 360 480 380 Q500 400 460 390' fill='none' stroke='%236080A0' stroke-width='0.8'/%3E%3C/svg%3E") center center / contain no-repeat;
}

#roots-illustration {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M400 100 L400 300 Q380 350 350 400 Q320 450 280 500 Q250 540 220 580' fill='none' stroke='%236080A0' stroke-width='1.5'/%3E%3Cpath d='M400 300 Q420 360 450 420 Q480 470 520 520 Q550 560 580 590' fill='none' stroke='%236080A0' stroke-width='1.2'/%3E%3Cpath d='M350 400 Q330 420 300 430 Q270 440 240 460' fill='none' stroke='%236080A0' stroke-width='0.8'/%3E%3Cpath d='M450 420 Q470 440 500 445 Q530 450 560 465' fill='none' stroke='%236080A0' stroke-width='0.8'/%3E%3Cpath d='M400 200 Q370 220 350 250 Q330 280 300 300' fill='none' stroke='%236080A0' stroke-width='0.8'/%3E%3Cpath d='M400 200 Q430 225 460 260 Q490 290 520 310' fill='none' stroke='%236080A0' stroke-width='0.8'/%3E%3Ccircle cx='280' cy='505' r='3' fill='%236080A0' opacity='0.5'/%3E%3Ccircle cx='520' cy='525' r='3' fill='%236080A0' opacity='0.5'/%3E%3Ccircle cx='240' cy='465' r='2' fill='%236080A0' opacity='0.4'/%3E%3Ccircle cx='560' cy='470' r='2' fill='%236080A0' opacity='0.4'/%3E%3C/svg%3E") center center / contain no-repeat;
}

#soil-illustration {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M0 250 Q200 240 400 250 Q600 260 800 250' fill='none' stroke='%236080A0' stroke-width='1'/%3E%3Cpath d='M0 320 Q200 330 400 320 Q600 310 800 320' fill='none' stroke='%236080A0' stroke-width='0.8'/%3E%3Cpath d='M0 390 Q200 385 400 390 Q600 395 800 390' fill='none' stroke='%236080A0' stroke-width='0.6'/%3E%3Cpath d='M0 450 Q200 455 400 450 Q600 445 800 450' fill='none' stroke='%236080A0' stroke-width='0.5'/%3E%3Ccircle cx='150' cy='280' r='2' fill='%236080A0' opacity='0.3'/%3E%3Ccircle cx='320' cy='300' r='1.5' fill='%236080A0' opacity='0.3'/%3E%3Ccircle cx='500' cy='290' r='2.5' fill='%236080A0' opacity='0.25'/%3E%3Ccircle cx='650' cy='285' r='1.8' fill='%236080A0' opacity='0.3'/%3E%3Ccircle cx='200' cy='350' r='1.5' fill='%236080A0' opacity='0.2'/%3E%3Ccircle cx='450' cy='360' r='2' fill='%236080A0' opacity='0.2'/%3E%3Ccircle cx='600' cy='345' r='1.2' fill='%236080A0' opacity='0.2'/%3E%3Ccircle cx='100' cy='420' r='3' fill='%236080A0' opacity='0.15'/%3E%3Ccircle cx='380' cy='430' r='2.5' fill='%236080A0' opacity='0.15'/%3E%3Ccircle cx='700' cy='415' r='2' fill='%236080A0' opacity='0.15'/%3E%3C/svg%3E") center center / cover no-repeat;
}

#seasons-illustration {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Ccircle cx='400' cy='300' r='120' fill='none' stroke='%236080A0' stroke-width='1' stroke-dasharray='4 8'/%3E%3Ccircle cx='400' cy='300' r='180' fill='none' stroke='%236080A0' stroke-width='0.6' stroke-dasharray='2 12'/%3E%3Cpath d='M400 180 Q420 160 400 140 Q380 160 400 180Z' fill='%236080A0' opacity='0.3'/%3E%3Cpath d='M520 300 Q540 280 560 300 Q540 320 520 300Z' fill='%236080A0' opacity='0.3'/%3E%3Cpath d='M400 420 Q380 440 400 460 Q420 440 400 420Z' fill='%236080A0' opacity='0.3'/%3E%3Cpath d='M280 300 Q260 280 240 300 Q260 320 280 300Z' fill='%236080A0' opacity='0.3'/%3E%3Ctext x='400' y='160' text-anchor='middle' fill='%236080A0' font-size='10' font-family='Caveat' opacity='0.4'%3Espring%3C/text%3E%3Ctext x='545' y='305' text-anchor='middle' fill='%236080A0' font-size='10' font-family='Caveat' opacity='0.4'%3Esummer%3C/text%3E%3Ctext x='400' y='470' text-anchor='middle' fill='%236080A0' font-size='10' font-family='Caveat' opacity='0.4'%3Eautumn%3C/text%3E%3Ctext x='255' y='305' text-anchor='middle' fill='%236080A0' font-size='10' font-family='Caveat' opacity='0.4'%3Ewinter%3C/text%3E%3C/svg%3E") center center / contain no-repeat;
}

#philosophy-illustration {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cpath d='M200 500 Q200 400 220 350 Q240 300 260 280 Q280 260 260 220 Q240 180 260 150 Q280 120 300 130 Q320 140 310 170 Q300 200 320 230 Q340 260 320 290 Q300 320 310 360' fill='none' stroke='%236080A0' stroke-width='1'/%3E%3Cpath d='M600 500 Q600 420 580 370 Q560 320 540 300 Q520 280 540 240 Q560 200 540 170 Q520 140 500 155 Q480 170 490 200 Q500 230 480 260 Q460 290 480 320' fill='none' stroke='%236080A0' stroke-width='1'/%3E%3Cpath d='M350 500 L350 350 Q350 300 380 280 Q410 260 400 220 Q390 180 410 160' fill='none' stroke='%236080A0' stroke-width='0.8'/%3E%3Cpath d='M450 500 L450 370 Q450 330 430 310 Q410 290 420 250 Q430 210 410 190' fill='none' stroke='%236080A0' stroke-width='0.8'/%3E%3Ccircle cx='260' cy='145' r='5' fill='none' stroke='%236080A0' stroke-width='0.5'/%3E%3Ccircle cx='540' cy='165' r='5' fill='none' stroke='%236080A0' stroke-width='0.5'/%3E%3C/svg%3E") center center / contain no-repeat;
}

#index-illustration {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cline x1='150' y1='150' x2='150' y2='500' stroke='%236080A0' stroke-width='0.5'/%3E%3Cline x1='200' y1='170' x2='200' y2='480' stroke='%236080A0' stroke-width='0.5'/%3E%3Cline x1='600' y1='150' x2='600' y2='500' stroke='%236080A0' stroke-width='0.5'/%3E%3Cline x1='650' y1='170' x2='650' y2='480' stroke='%236080A0' stroke-width='0.5'/%3E%3Cline x1='100' y1='200' x2='700' y2='200' stroke='%236080A0' stroke-width='0.3' stroke-dasharray='2 6'/%3E%3Cline x1='100' y1='260' x2='700' y2='260' stroke='%236080A0' stroke-width='0.3' stroke-dasharray='2 6'/%3E%3Cline x1='100' y1='320' x2='700' y2='320' stroke='%236080A0' stroke-width='0.3' stroke-dasharray='2 6'/%3E%3Cline x1='100' y1='380' x2='700' y2='380' stroke='%236080A0' stroke-width='0.3' stroke-dasharray='2 6'/%3E%3Cline x1='100' y1='440' x2='700' y2='440' stroke='%236080A0' stroke-width='0.3' stroke-dasharray='2 6'/%3E%3C/svg%3E") center center / contain no-repeat;
}

/* --- Responsive Adjustments --- */
@media (min-width: 960px) {
    .chapter-content {
        max-width: 900px;
        padding: 8rem 3rem;
    }

    .chapter-body {
        flex-direction: row;
        gap: 3rem;
        align-items: flex-start;
    }

    .text-column {
        flex: 1;
    }

    .annotation {
        flex: 0 0 180px;
        margin-top: 0;
    }

    .annotation-right {
        margin-left: 0;
        text-align: left;
    }

    .annotation-left {
        order: -1;
        text-align: right;
    }
}

@media (max-width: 600px) {
    .chapter-content {
        padding: 4rem 1.2rem;
    }

    h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .annotation {
        max-width: 100%;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(96, 128, 160, 0.2);
    }
}

/* --- Selection --- */
::selection {
    background: var(--color-glitch-red);
    color: var(--color-pale-blue);
}