/* ============================================================
   PPUZZL.net — A Private Library of Unsolved Riddles
   Opulent Nordic reading-room. Folio book metaphor.
   Terracotta warm in a Scandinavian cool envelope.
   ============================================================ */

:root {
    /* Palette — Terracotta Warm meets Scandinavian Cool */
    --aldine-parchment: #f3ead8;   /* page background */
    --manuscript-sepia: #3b2a1d;   /* body text, primary rules */
    --stockholm-brick:  #b34a2a;   /* drop-caps, illustration strokes */
    --oxidised-copper:  #7a3520;   /* hover states */
    --iron-gall-brown:  #5a3920;   /* marginalia, secondary rules */
    --birch-bark-grey:  #c8bfae;   /* dividers, illustration shading */
    --fjord-slate:      #4d5760;   /* footnote glyphs, alternate rules */
    --tarnished-gilt:   #a8814a;   /* drop-cap fills */

    /* Type stack */
    --serif:    "EB Garamond", "Garamond", "Hoefler Text", Georgia, serif;
    --black:    "UnifrakturMaguntia", "EB Garamond", serif;
    --mono:     "IBM Plex Mono", "Menlo", "Consolas", monospace;
}

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

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

body {
    background: var(--aldine-parchment);
    color: var(--manuscript-sepia);
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.15vw, 1.22rem);
    line-height: 1.78;
    font-feature-settings: "kern", "liga", "onum";
    overflow-x: hidden;
    position: relative;

    /* Faint mottled paper texture via layered radial gradients */
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(168,129,74,0.04) 0, transparent 38%),
        radial-gradient(ellipse at 80% 70%, rgba(200,191,174,0.06) 0, transparent 42%),
        radial-gradient(ellipse at 50% 90%, rgba(91,57,32,0.03) 0, transparent 55%);
    background-attachment: fixed;
}

/* ============================================================
   Ripple watermark — fixed background animation (the only loop)
   ============================================================ */
.ripple-watermark {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}

.ripple-rings circle {
    transform-origin: 0% 100%;
    transform-box: fill-box;
    animation: ripple-breathe 24s ease-in-out infinite;
    opacity: 0.42;
}

.ripple-rings circle:nth-child(odd) {
    animation-delay: -6s;
}

.ripple-rings circle:nth-child(3n) {
    animation-delay: -12s;
    opacity: 0.32;
}

@keyframes ripple-breathe {
    0%, 100% {
        transform: scale(1.000);
    }
    50% {
        transform: scale(1.015);
    }
}

/* ============================================================
   Marginalia column — sticky on desktop
   ============================================================ */
.marginalia {
    position: fixed;
    top: 12vh;
    right: 4vw;
    width: 12vw;
    max-width: 180px;
    z-index: 5;
    pointer-events: none;
}

.marg-stack {
    border-left: 0.5px solid var(--birch-bark-grey);
    padding-left: 1.1em;
    color: var(--iron-gall-brown);
    font-style: italic;
    font-size: 0.78rem;
    line-height: 1.6;
    letter-spacing: 0.08em;
    font-feature-settings: "smcp", "c2sc", "kern";
    text-transform: lowercase;
}

.marg-line {
    margin: 1.1em 0;
}

.marg-glyph {
    color: var(--fjord-slate);
    font-size: 0.92rem;
    margin-right: 0.3em;
    font-style: normal;
}

/* ============================================================
   Main container & section spreads
   ============================================================ */
main#folio {
    position: relative;
    z-index: 1;
}

.spread {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

.spread.verso {
    /* left-leaning textblock */
    padding: 8vh 18vw 8vh 22vw;
}

.spread.recto {
    /* right-leaning textblock — mirrored */
    padding: 8vh 22vw 8vh 18vw;
    flex-direction: row-reverse;
}

.text-block {
    flex: 1 1 56%;
    max-width: 32em;
    padding-right: 4vw;
}

.spread.recto .text-block {
    padding-right: 0;
    padding-left: 4vw;
}

.illust {
    flex: 0 0 38%;
    max-width: 360px;
    align-self: center;
    opacity: 0.96;
}

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

/* ============================================================
   Quarto Title Page (Section I)
   ============================================================ */
.title-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8vh 22vw;
    text-align: center;
}

.title-block {
    width: 100%;
    max-width: 60em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quarto-title {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(4.5rem, 11vw, 12rem);
    letter-spacing: -0.018em;
    line-height: 0.92;
    color: var(--manuscript-sepia);
    margin-bottom: 1.6vh;
    position: relative;
}

.pp-lig {
    /* Subtle inline ligature underline indicator */
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
}

.title-subtitle {
    font-family: var(--serif);
    font-variant-caps: small-caps;
    font-feature-settings: "smcp", "c2sc", "kern";
    text-transform: lowercase;
    letter-spacing: 0.18em;
    font-size: 0.92rem;
    color: var(--iron-gall-brown);
    margin-top: 1.2vh;
    max-width: 40em;
    line-height: 1.6;
}

.double-rule {
    margin: 4ch auto 0;
    width: clamp(220px, 32vw, 420px);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.double-rule span {
    display: block;
    background: var(--manuscript-sepia);
    height: 1px;
    width: 100%;
}

.double-rule span:nth-child(2) {
    height: 0.5px;
    background: var(--manuscript-sepia);
    opacity: 0.7;
}

.pp-mark {
    margin-top: 8vh;
    width: clamp(200px, 22vw, 360px);
    aspect-ratio: 240 / 200;
}

.title-page .folio-num {
    margin-top: 8vh;
}

/* ============================================================
   Prose typography
   ============================================================ */
.prose {
    margin-bottom: 1.4em;
    text-align: justify;
    hyphens: auto;
    color: var(--manuscript-sepia);
    transition: line-height 0.4s ease;
    font-feature-settings: "kern", "liga", "onum";
}

.prose:hover {
    line-height: 1.82;
}

.first-paragraph::first-letter {
    font-family: var(--black);
    font-size: 7em;
    line-height: 0.78;
    float: left;
    padding: 0.06em 0.18em 0 0;
    color: var(--tarnished-gilt);
    text-shadow: 0.5px 0.5px 0 var(--stockholm-brick);
    margin-top: 0.04em;
}

.ligature-text {
    font-family: var(--black);
    font-size: 1.18em;
    color: var(--stockholm-brick);
    letter-spacing: -0.06em;
}

.incipit-title,
.riddle-title {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    line-height: 1.12;
    color: var(--manuscript-sepia);
    margin-bottom: 1.4em;
    letter-spacing: -0.008em;
}

/* Cipher / shelfmark inset */
.cipher {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--fjord-slate);
    letter-spacing: 0.04em;
    margin-top: 2em;
    padding: 0.6em 1em;
    border-left: 2px solid var(--birch-bark-grey);
    background: rgba(200, 191, 174, 0.16);
    white-space: pre-wrap;
}

/* ============================================================
   Folio numbers (corner wayfinding)
   ============================================================ */
.folio-num {
    position: absolute;
    bottom: 4vh;
    font-family: var(--serif);
    font-style: italic;
    font-feature-settings: "smcp", "c2sc", "kern";
    text-transform: lowercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
    color: var(--fjord-slate);
}

.spread.verso .folio-num {
    left: 4vw;
}

.spread.recto .folio-num {
    right: 4vw;
}

.title-page .folio-num,
.colophon .folio-num {
    position: relative;
    bottom: auto;
}

.tipped-plate .plate-folio {
    bottom: 3vh;
    right: 50%;
    transform: translateX(50%);
}

/* ============================================================
   "Turn the page" link with manicule
   ============================================================ */
.turn-page {
    position: absolute;
    bottom: 4vh;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1rem;
    color: var(--iron-gall-brown);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: color 0.32s ease;
    z-index: 3;
}

.spread.verso .turn-page {
    right: 16vw;
}

.spread.recto .turn-page {
    left: 16vw;
}

.turn-page:hover {
    color: var(--stockholm-brick);
}

.turn-page:hover .manicule {
    color: var(--stockholm-brick);
}

.manicule {
    color: var(--fjord-slate);
    font-style: normal;
    margin-right: 0.4em;
    transition: color 0.32s ease;
    font-size: 1.05em;
}

.plate-turn {
    bottom: 6vh;
    right: 50%;
    transform: translateX(50%);
    color: var(--stockholm-brick);
}

/* ============================================================
   Tipped-In Plate (Section V) — full-bleed labyrinth
   ============================================================ */
.tipped-plate {
    width: 100vw;
    min-height: 100vh;
    padding: 4vh 8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(243, 234, 216, 1) 60%, rgba(200, 191, 174, 0.18) 100%),
        var(--aldine-parchment);
}

.plate-frame {
    /* Double-rule border + tipping margin (imitates lithographic plate pasted in) */
    width: min(72vw, 88vh);
    aspect-ratio: 1 / 1;
    padding: 2.6vw;
    background: var(--aldine-parchment);
    box-shadow:
        inset 0 0 0 1px var(--manuscript-sepia),
        inset 0 0 0 5px var(--aldine-parchment),
        inset 0 0 0 5.5px var(--birch-bark-grey),
        0 1px 0 rgba(91,57,32,0.08),
        0 6px 18px rgba(91,57,32,0.06);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.plate-figure {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    position: relative;
}

.plate-figure svg {
    width: min(72vw, 56vh);
    height: auto;
    max-height: 76%;
}

.plate-caption {
    position: absolute;
    bottom: -3vh;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 92%;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-feature-settings: "smcp", "c2sc";
    text-transform: lowercase;
    letter-spacing: 0.1em;
    font-size: 0.78rem;
    color: var(--iron-gall-brown);
}

/* ============================================================
   Colophon Foot (Section IX)
   ============================================================ */
.colophon {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8vh 22vw;
    text-align: center;
}

.colophon-frame {
    border: 1px solid var(--manuscript-sepia);
    padding: 24px;
    max-width: 38em;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
}

.colophon-frame::before,
.colophon-frame::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    height: 0.5px;
    background: var(--manuscript-sepia);
    opacity: 0.55;
}

.colophon-frame::before {
    top: 4px;
}

.colophon-frame::after {
    bottom: 4px;
}

.colophon-line {
    font-family: var(--serif);
    font-feature-settings: "smcp", "c2sc", "kern";
    text-transform: lowercase;
    letter-spacing: 0.18em;
    font-size: 0.86rem;
    line-height: 1.8;
    color: var(--manuscript-sepia);
}

.colophon-line.ornament {
    color: var(--stockholm-brick);
    font-size: 1.1rem;
    letter-spacing: 0.4em;
    margin: 0.6em 0;
}

.colophon-dropcap {
    font-family: var(--black);
    font-size: 7em;
    line-height: 0.92;
    color: var(--tarnished-gilt);
    text-shadow: 0.5px 0.5px 0 var(--stockholm-brick);
    margin: 0.3em 0;
}

/* ============================================================
   Inline-SVG illustration draw-on-intersection animation
   ============================================================ */
.line-svg .draw {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
    transition: stroke-dashoffset 1.8s ease-in-out;
}

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

/* Spreads fade-in on intersection */
.reveal-spread {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 1.4s ease, transform 1.4s ease;
}

.reveal-spread.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Title page is visible on first paint */
.title-page,
.colophon,
.tipped-plate {
    opacity: 1;
}

/* ============================================================
   Responsive — under 900px, marginalia inline, single column
   ============================================================ */
@media (max-width: 900px) {
    .marginalia {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        max-width: none;
        padding: 4vh 8vw;
        z-index: 2;
    }

    .marg-stack {
        border-left: 1px solid var(--birch-bark-grey);
        padding-left: 1em;
    }

    .spread.verso,
    .spread.recto {
        padding: 6vh 8vw;
        flex-direction: column;
    }

    .text-block,
    .spread.recto .text-block {
        max-width: 100%;
        padding: 0;
        margin-bottom: 4vh;
    }

    .illust {
        flex: 0 0 auto;
        width: 60%;
        max-width: 240px;
        margin: 2vh auto;
    }

    .first-paragraph::first-letter {
        font-size: 5.4em;
    }

    .quarto-title {
        font-size: clamp(3.4rem, 14vw, 6rem);
    }

    .plate-frame {
        width: 92vw;
        padding: 4vw;
    }

    .turn-page {
        position: relative;
        bottom: auto;
        right: auto !important;
        left: auto !important;
        display: inline-block;
        margin-top: 3vh;
    }

    .folio-num {
        position: relative;
        bottom: auto;
        left: auto !important;
        right: auto !important;
        margin-top: 2vh;
        align-self: flex-end;
    }

    .colophon {
        padding: 8vh 6vw;
    }

    .pp-mark {
        width: 60vw;
    }
}

@media (max-width: 540px) {
    body {
        font-size: 1.02rem;
        line-height: 1.72;
    }

    .quarto-title {
        font-size: 3rem;
    }

    .first-paragraph::first-letter {
        font-size: 4.4em;
    }

    .colophon-line {
        font-size: 0.78rem;
        letter-spacing: 0.14em;
    }
}

/* Reduced motion — disable ripple loop and draw transitions */
@media (prefers-reduced-motion: reduce) {
    .ripple-rings circle {
        animation: none;
    }
    .line-svg .draw {
        transition: none;
        stroke-dashoffset: 0;
    }
    .reveal-spread {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .prose {
        transition: none;
    }
}