/* ===================================================
   oning.stream — Vaporwave Editorial / Botanical
   Colors: Terracotta-warm palette
   Fonts: Cormorant Garamond (display), Lora (body)
   =================================================== */

/* --- CSS Custom Properties --- */
:root {
    --aged-linen: #F5EDE3;
    --parchment-gold: #E8D5B7;
    --dark-umber: #3D2B1F;
    --terracotta-rose: #C4694A;
    --faded-sienna: #A0522D;
    --oxidized-copper: #5B7B5E;
    --foxed-cream: #D4C5A9;
    --burnt-pompeian: #7A2E1A;

    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;

    --golden: 1.618rem;
    --spread-pad: calc(var(--golden) * 5);
    --column-pad: calc(var(--golden) * 3);
    --folio-pad: calc(var(--golden) * 2);
}

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

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.1vw, 1.15rem);
    line-height: 1.72;
    color: var(--dark-umber);
    background-color: var(--aged-linen);
    /* Paper noise texture via SVG data URI */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    overflow-x: hidden;
}

a {
    color: var(--faded-sienna);
    text-decoration: none;
    background-image: linear-gradient(var(--terracotta-rose), var(--terracotta-rose));
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
}

a:hover {
    background-size: 100% 1px;
}

a:visited {
    color: var(--burnt-pompeian);
}

em {
    font-style: italic;
}

/* --- Navigation --- */
.site-nav {
    padding: 1.618rem 2rem;
    position: relative;
    z-index: 10;
}

.nav-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faded-sienna);
}

.nav-rule {
    width: 100%;
    height: 1px;
    background: var(--burnt-pompeian);
    opacity: 0.3;
    margin-top: 0.5rem;
}

/* --- Spread Sections --- */
.spread {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spread-pad) 2rem;
    background-color: var(--parchment-gold);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    overflow: hidden;
}

/* CRT Scanlines */
.spread__scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 1px,
        rgba(0, 0, 0, 0.02) 1px,
        rgba(0, 0, 0, 0.02) 2px
    );
    pointer-events: none;
    z-index: 2;
}

/* Foxing Spots */
.spread__foxing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.fox-spot {
    position: absolute;
    left: var(--fx);
    top: var(--fy);
    width: var(--fs);
    height: var(--fs);
    border-radius: 50%;
    background: radial-gradient(circle, var(--foxed-cream) 0%, transparent 70%);
    opacity: var(--fo);
}

/* --- Hero Spread --- */
.spread--hero {
    flex-direction: column;
    padding-top: 0;
}

.hero-botanical {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    max-width: 500px;
    opacity: 0.12;
    z-index: 1;
    transition: transform 0.1s linear, opacity 0.1s linear;
}

.peony-svg {
    width: 100%;
    height: auto;
    display: block;
}

.peony-svg--red {
    position: absolute;
    top: 0;
    left: -1px;
    width: 100%;
    opacity: 0.6;
}

.peony-svg--blue {
    position: absolute;
    top: 0;
    left: 1px;
    width: 100%;
    opacity: 0.6;
}

/* Petal draw animation */
.peony-petal,
.peony-part {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    opacity: 0;
    transition: stroke-dashoffset 1.8s ease-out, opacity 0.5s ease;
}

.peony-petal.drawn,
.peony-part.drawn {
    stroke-dashoffset: 0;
    opacity: 0.3;
}

.peony-part.drawn {
    opacity: 0.3;
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3rem, 7vw, 6rem);
    color: var(--faded-sienna);
    letter-spacing: 0.03em;
    line-height: 1.1;
}

.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

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

.hero-subtitle {
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    color: var(--dark-umber);
    letter-spacing: 0.15em;
    margin-top: 1.618rem;
    opacity: 0;
    transition: opacity 0.8s ease;
}

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

/* --- Column Sections --- */
.column-section {
    padding: var(--column-pad) 2rem;
    position: relative;
}

.column-stage {
    max-width: 90rem;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: center;
}

.column-reading {
    max-width: 42rem;
    width: 100%;
    position: relative;
}

.column-reading p {
    text-align: justify;
    margin-bottom: 1.618rem;
    hyphens: auto;
}

/* Drop Caps */
.drop-cap {
    float: left;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 4.5em;
    line-height: 0.8;
    margin-right: 0.08em;
    margin-top: 0.05em;
    color: var(--terracotta-rose);
}

/* Margin Notes */
.margin-note {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.7em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faded-sienna);
    opacity: 0.6;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.margin-note--left {
    left: -3rem;
}

.margin-note--right {
    right: -3rem;
}

/* Margin Botanical Decorations */
.margin-botanical {
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    pointer-events: none;
}

.margin-botanical--left {
    left: calc(50% - 21rem - 80px);
}

.margin-botanical--right {
    right: calc(50% - 21rem - 80px);
}

.oleander-svg {
    width: 100%;
    height: 100%;
}

.oleander-stem {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transition: stroke-dashoffset 2s ease-out;
}

.oleander-stem.drawn {
    stroke-dashoffset: 0;
}

.oleander-leaf {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.oleander-leaf.visible {
    opacity: 0.3;
}

/* --- Folio Sections --- */
.folio-section {
    padding: var(--folio-pad) 2rem;
    overflow: hidden;
}

.folio-band {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 3rem;
    max-width: 60rem;
    margin: 0 auto;
    min-height: 30vh;
}

.folio-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.folio-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.folio-item--1 {
    flex: 0 0 25%;
    align-self: flex-start;
}

.folio-item--2 {
    flex: 0 0 30%;
}

.folio-item--3 {
    flex: 0 0 22%;
    align-self: center;
}

.folio-botanical {
    width: 100%;
    max-width: 160px;
    height: auto;
}

.folio-caption {
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    color: var(--faded-sienna);
    text-align: center;
    margin-top: 0.8rem;
    line-height: 1.45;
}

/* --- Acanthus Dividers --- */
.acanthus-divider {
    padding: 1.618rem 0;
    display: flex;
    justify-content: center;
}

.acanthus-svg {
    width: 100%;
    max-width: 600px;
    height: auto;
}

.acanthus-left,
.acanthus-right {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 1.2s ease-out;
}

.acanthus-left.drawn {
    stroke-dashoffset: 0;
}

.acanthus-right.drawn {
    stroke-dashoffset: 0;
}

/* --- Peony Divider --- */
.peony-divider {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.peony-divider-svg {
    width: 200px;
    height: 200px;
}

.peony-divider-svg .peony-petal,
.peony-divider-svg .peony-part {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    opacity: 0;
    transition: stroke-dashoffset 1.8s ease-out, opacity 0.5s ease;
}

.peony-divider-svg .peony-petal.drawn,
.peony-divider-svg .peony-part.drawn {
    stroke-dashoffset: 0;
    opacity: 0.3;
}

/* --- Spread Quote --- */
.spread--quote {
    min-height: auto;
    padding: var(--spread-pad) 2rem;
}

.spread-botanical {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40vw;
    max-width: 400px;
    opacity: 0;
    transition: opacity 1.5s ease;
    z-index: 1;
}

.spread-botanical.visible {
    opacity: 1;
}

.spread-acanthus-svg,
.closing-peony-svg {
    width: 100%;
    height: auto;
}

.spread-quote {
    position: relative;
    z-index: 3;
    max-width: 50rem;
    text-align: center;
}

.spread-quote p {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 3.5vw, 2.6rem);
    color: var(--dark-umber);
    letter-spacing: 0.03em;
    line-height: 1.45;
}

/* --- Closing Spread --- */
.spread--closing {
    flex-direction: column;
    min-height: 60vh;
}

.spread-botanical--closing {
    width: 50vw;
    max-width: 350px;
}

.closing-content {
    position: relative;
    z-index: 3;
    text-align: center;
}

.closing-text {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: var(--dark-umber);
    letter-spacing: 0.03em;
    line-height: 1.5;
    margin-bottom: 1.618rem;
}

.closing-colophon {
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(0.85rem, 1.2vw, 1rem);
    color: var(--faded-sienna);
    letter-spacing: 0.15em;
}

/* --- Footer --- */
.site-footer {
    padding: 2rem;
    text-align: center;
}

.footer-text {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--faded-sienna);
    opacity: 0.5;
    margin-top: 1rem;
}

/* --- Responsive: Mobile --- */
@media (max-width: 768px) {
    .spread {
        padding: calc(var(--golden) * 3) 1rem;
    }

    .column-reading {
        max-width: 92vw;
    }

    .drop-cap {
        font-size: 3em;
    }

    .margin-botanical {
        display: none;
    }

    .margin-note {
        display: none;
    }

    .folio-band {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .folio-item--1,
    .folio-item--2,
    .folio-item--3 {
        flex: none;
        width: 60%;
        align-self: center;
    }

    .spread__scanlines {
        display: none;
    }

    .hero-botanical {
        width: 80vw;
    }

    .hero-title {
        font-size: clamp(2.2rem, 10vw, 3.5rem);
    }

    .spread-quote p {
        font-size: clamp(1.2rem, 5vw, 1.8rem);
    }

    .column-stage {
        justify-content: center;
    }

    .peony-svg--red,
    .peony-svg--blue {
        display: none;
    }
}

/* --- Utility: Scroll-fixed hero text --- */
.hero-content.fixed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.hero-content.scrolled {
    position: relative;
    transform: none;
}