/* =========================================================
   haskell.monster -- Liber Monstrorum Functionalium
   An illuminated bestiary of functional programming
   ========================================================= */

:root {
    --bg-primary: #1a1520;       /* Deep Parchment */
    --bg-secondary: #241e2a;     /* Manuscript Shadow */
    --bg-tertiary: #2e2735;      /* Codex */
    --bg-code: #1e1825;          /* Field-note background */
    --bg-deep: #0e0a12;          /* Vignette / shadow */

    --text-primary: #d4c5b0;     /* Aged Ink */
    --text-secondary: #8a7d6e;   /* Faded Script */

    --accent-gold: #d4a24c;      /* Illuminated Gold */
    --accent-purple: #9b6dcc;    /* Royal Purple - Monad */
    --accent-red: #c45c4a;       /* Bestiary Red - Applicative */
    --accent-verdigris: #4a9e82; /* Verdigris - Functor */
    --accent-vine: #5a7a52;      /* Vine Green */
    --accent-fire: #e8a84c;      /* Dragon Fire / Lazy */

    --font-display: 'Playfair Display', 'Lora', Georgia, serif;
    --font-body: 'Lora', Georgia, serif;
    --font-code: 'Fira Code', 'Courier New', monospace;
    --font-margin: 'IM Fell English', 'Lora', Georgia, serif;

    --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing-fade: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.8;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    /* Subtle parchment texture via repeating gradient noise */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(212, 162, 76, 0.015) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(155, 109, 204, 0.012) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(74, 158, 130, 0.008) 0%, transparent 60%);
}

/* Page-wide vignette */
.vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 35%,
        var(--bg-deep) 110%
    );
    opacity: 0.6;
    z-index: 100;
    mix-blend-mode: multiply;
}

/* =========================================================
   MARGINALIA
   ========================================================= */
.marginalia {
    position: fixed;
    top: 0;
    width: 70px;
    height: 100vh;
    pointer-events: none;
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 4rem 0;
    will-change: transform;
}

.marginalia-left { left: 0; }
.marginalia-right { right: 0; }

.margin-cluster {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent-vine);
}

.margin-glyph {
    font-family: var(--font-margin);
    font-size: 1.4rem;
    color: var(--accent-gold);
    opacity: 0.7;
    font-style: italic;
    letter-spacing: 0.05em;
}

.margin-note {
    font-family: var(--font-margin);
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0.6;
    font-style: italic;
    letter-spacing: 0.1em;
    text-transform: lowercase;
}

.margin-vine {
    opacity: 0.5;
}

@media (max-width: 900px) {
    .marginalia { display: none; }
}

/* =========================================================
   SHARED LAYOUT
   ========================================================= */
.codex {
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow: hidden;
}

.section-header {
    text-align: center;
    margin: 0 auto 4rem;
    max-width: 720px;
    padding: 0 2rem;
}

.folio-mark {
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--accent-gold);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    opacity: 0.85;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--text-primary);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.05;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.section-lede {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.75;
}

/* =========================================================
   SECTION 1 -- COVER
   ========================================================= */
.cover {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 6rem;
    overflow: hidden;
}

.cover-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.border-path {
    fill: none;
    stroke: var(--accent-vine);
    stroke-width: 1.5;
    opacity: 0.55;
    stroke-linecap: round;
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    animation: drawBorder 3s var(--easing-fade) forwards;
}

.border-path.border-right { animation-delay: 0.05s; }
.border-path.border-bottom { animation-delay: 0.1s; }
.border-path.border-left { animation-delay: 0.15s; }

@keyframes drawBorder {
    to { stroke-dashoffset: 0; }
}

.flourish {
    opacity: 0;
    animation: fadeIn 1.2s var(--easing-fade) 2.5s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.vine-path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: drawBorder 2.5s var(--easing-fade) 1s forwards;
}

.lambda-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(45vw, 520px);
    height: min(45vw, 520px);
    opacity: 0;
    z-index: 2;
    animation: lambdaFade 2s ease-in 3s forwards;
}

@keyframes lambdaFade {
    to { opacity: 0.08; }
}

.cover-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 1100px;
}

.cover-prelude {
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    letter-spacing: 0.3em;
    text-transform: lowercase;
    opacity: 0;
    animation: fadeIn 0.8s ease-out 0.5s forwards;
}

.cover-domain {
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    color: var(--accent-gold);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-top: 1rem;
    margin-bottom: 0.2rem;
    opacity: 0;
    animation: fadeIn 0.9s ease-out 1.2s forwards;
}

.cover-title {
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--text-primary);
    font-size: clamp(6rem, 15vw, 14rem);
    line-height: 0.9;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    display: inline-block;
}

.cover-title .letter {
    display: inline-block;
    opacity: 0;
    transform: scale(1.1) rotate(2deg);
    transform-origin: center bottom;
    animation: letterSettle 0.8s var(--easing-fade) forwards;
    text-shadow: 0 0 60px rgba(212, 162, 76, 0.15);
}

.cover-title .letter:nth-child(1) { animation-delay: 1.6s; transform-origin: left bottom; }
.cover-title .letter:nth-child(2) { animation-delay: 1.7s; transform-origin: center bottom; transform: scale(1.1) rotate(-2deg); }
.cover-title .letter:nth-child(3) { animation-delay: 1.8s; transform-origin: right bottom; }
.cover-title .letter:nth-child(4) { animation-delay: 1.9s; transform-origin: left top; transform: scale(1.1) rotate(-1.5deg); }
.cover-title .letter:nth-child(5) { animation-delay: 2.0s; transform-origin: center top; }
.cover-title .letter:nth-child(6) { animation-delay: 2.1s; transform-origin: right top; transform: scale(1.1) rotate(1.8deg); }
.cover-title .letter:nth-child(7) { animation-delay: 2.2s; transform-origin: left bottom; transform: scale(1.1) rotate(-2.2deg); }

@keyframes letterSettle {
    0% {
        opacity: 0;
        transform: scale(1.1) rotate(var(--rot, 2deg)) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg) translateY(0);
    }
}

.cover-subtitle {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--text-primary);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
    line-height: 1.85;
    max-width: 720px;
    margin: 0 auto 2rem;
    opacity: 0;
    animation: fadeIn 1s ease-out 3.5s forwards;
}

.ornament {
    color: var(--accent-gold);
    font-size: 1.2em;
    display: inline-block;
    margin: 0 0.4em;
    transform: translateY(0.05em);
}

.cover-folio {
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    opacity: 0;
    animation: fadeIn 1s ease-out 4s forwards;
}

/* =========================================================
   SECTION 2 -- BESTIARY INDEX (broken grid)
   ========================================================= */
.bestiary {
    position: relative;
    padding: 8rem 4rem 10rem;
    max-width: 1600px;
    margin: 0 auto;
}

.bestiary-grid {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-auto-rows: minmax(280px, auto);
    gap: 1.5rem 1rem;
    position: relative;
}

.creature-card {
    position: relative;
    background-color: var(--bg-secondary);
    border: 1px solid var(--bg-tertiary);
    padding: 1.8rem 2rem 2rem;
    transition: transform 0.4s var(--easing-spring),
                border-color 0.4s var(--easing-fade),
                box-shadow 0.4s var(--easing-fade);
    opacity: 0;
    transform: translateX(var(--enter-from, -40px));
    will-change: transform, opacity;
}

.creature-card.in-view {
    opacity: 1;
    transform: translateX(0);
}

.creature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 162, 76, 0.4);
    box-shadow: 0 12px 36px rgba(14, 10, 18, 0.6),
                0 0 0 1px rgba(212, 162, 76, 0.15);
}

/* Broken grid placement */
.card-monad        { grid-column: 1 / span 6;  grid-row: 1; --enter-from: -60px; }
.card-functor      { grid-column: 5 / span 6;  grid-row: 1; transform: translateY(40px); --enter-from: 0; margin-top: 2.5rem; z-index: 2; }
.card-applicative  { grid-column: 11 / span 6; grid-row: 1; --enter-from: 60px; }
.card-monoid       { grid-column: 2 / span 6;  grid-row: 2; --enter-from: -60px; margin-top: 1rem; }
.card-typeclass    { grid-column: 8 / span 6;  grid-row: 2; --enter-from: 0; margin-top: -1.5rem; z-index: 2; }
.card-thunk        { grid-column: 12 / span 5; grid-row: 2; --enter-from: 60px; margin-top: 2rem; }

.card-functor.in-view  { transform: translateY(0); }

@media (max-width: 1100px) {
    .bestiary { padding: 6rem 2rem 8rem; }
    .bestiary-grid { gap: 1.5rem; }
    .card-monad, .card-functor, .card-applicative,
    .card-monoid, .card-typeclass, .card-thunk {
        grid-column: span 8;
        margin-top: 0;
        transform: none;
    }
    .card-functor { grid-column: 9 / span 8; }
    .card-typeclass { grid-column: 9 / span 8; }
    .card-thunk { grid-column: 1 / span 16; }
}

@media (max-width: 700px) {
    .creature-card,
    .card-monad, .card-functor, .card-applicative,
    .card-monoid, .card-typeclass, .card-thunk {
        grid-column: 1 / -1 !important;
    }
}

.sigil {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto 1.2rem;
    transition: transform 0.6s var(--easing-fade);
}

.creature-card:hover .sigil-monad {
    animation: spinSlow 8s linear infinite;
}

@keyframes spinSlow {
    to { transform: rotate(360deg); }
}

.creature-card:hover .sigil-functor .inner-shape {
    animation: morph 2.4s ease-in-out infinite alternate;
    transform-origin: center;
}

@keyframes morph {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(0.85) rotate(60deg); }
}

.creature-card:hover .sigil-applicative .hydra-head {
    animation: hydraSeparate 2s ease-in-out infinite alternate;
}

.creature-card:hover .sigil-applicative .hydra-head:nth-of-type(1) { transform-origin: 28px 36px; animation-delay: 0s; }
.creature-card:hover .sigil-applicative .hydra-head:nth-of-type(2) { transform-origin: 52px 36px; animation-delay: 0.2s; }
.creature-card:hover .sigil-applicative .hydra-head:nth-of-type(3) { transform-origin: 40px 52px; animation-delay: 0.4s; }

@keyframes hydraSeparate {
    0% { transform: translate(0, 0); }
    100% { transform: translate(var(--dx, -3px), var(--dy, -3px)); }
}

.creature-order {
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: lowercase;
    text-align: center;
    margin-bottom: 0.5rem;
    opacity: 0.85;
}

.creature-name {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent-gold);
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    text-align: center;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.creature-sig {
    display: block;
    font-family: var(--font-code);
    font-size: 0.82rem;
    color: var(--accent);
    background-color: var(--bg-code);
    padding: 0.6rem 0.9rem;
    border-left: 2px solid var(--accent);
    margin-bottom: 1.2rem;
    overflow-x: auto;
    line-height: 1.5;
    position: relative;
    transition: background-color 0.3s var(--easing-fade);
}

.creature-card:hover .creature-sig {
    background-image: linear-gradient(
        90deg,
        var(--bg-code) 0%,
        rgba(212, 162, 76, 0.08) 50%,
        var(--bg-code) 100%
    );
    background-size: 200% 100%;
    animation: goldShimmer 2.5s linear infinite;
}

@keyframes goldShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.creature-desc {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.creature-habitat {
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    border-top: 1px dashed rgba(138, 125, 110, 0.3);
    padding-top: 0.8rem;
    margin-top: auto;
}

.creature-habitat em {
    color: var(--accent);
    font-style: italic;
    opacity: 0.9;
}

/* =========================================================
   SECTIONS 3-5 -- DEEP PAGES
   ========================================================= */
.deep-page {
    position: relative;
    padding: 8rem 6rem 10rem;
    max-width: 1500px;
    margin: 0 auto;
}

.fractal-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image:
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            transparent 0deg,
            var(--text-primary) 1deg,
            transparent 2deg,
            transparent 60deg
        );
    background-size: 90px 90px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.deep-spread {
    display: grid;
    gap: 4rem;
    align-items: start;
    position: relative;
}

/* MONAD SPREAD */
.monad-spread {
    grid-template-columns: 40% 1fr;
}

.spread-illustration {
    position: relative;
}

.spread-sticky {
    position: sticky;
    top: 8rem;
}

.grand-sigil {
    width: 100%;
    max-width: 460px;
    height: auto;
    aspect-ratio: 1 / 1;
    display: block;
    margin: 0 auto;
}

.monad-rotor {
    transform-origin: 200px 200px;
    animation: monadSpin 60s linear infinite;
}

@keyframes monadSpin {
    to { transform: rotate(360deg); }
}

/* FUNCTOR SPREAD */
.functor-spread {
    grid-template-columns: 200px 1fr 200px;
    align-items: start;
    position: relative;
    padding: 2rem 0;
}

.watermark-sigil {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(60vw, 600px);
    height: min(60vw, 600px);
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.watermark-sigil .functor-inner {
    transform-origin: center;
    animation: functorMorph 4s ease-in-out infinite alternate;
}

@keyframes functorMorph {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(0.6) rotate(180deg); }
}

.centered-prose {
    max-width: 56ch;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.margin-annotation {
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.6;
    padding: 1rem 0;
    position: relative;
    z-index: 1;
}

.margin-annotation code {
    display: block;
    font-family: var(--font-code);
    color: var(--accent-verdigris);
    font-size: 0.78rem;
    margin: 0.4rem 0;
    font-style: normal;
}

.annotation-label {
    color: var(--accent-gold);
    font-style: italic;
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}

.annotation-out {
    color: var(--text-primary);
    font-family: var(--font-code);
    font-style: normal;
    font-size: 0.78rem;
    margin-bottom: 1.2rem;
}

.margin-annotation-left { text-align: right; padding-right: 1rem; }
.margin-annotation-right { text-align: left; padding-left: 1rem; }

/* LAZY SPREAD */
.lazy-spread {
    grid-template-columns: 1fr;
    position: relative;
}

.dragon-illustration {
    float: right;
    width: clamp(220px, 32vw, 360px);
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0 0 2rem 2.5rem;
    shape-outside: circle(48%);
    shape-margin: 1.5rem;
    transition: filter 1.2s var(--easing-fade);
    filter: grayscale(0.7) brightness(0.7);
}

.dragon-illustration.awake {
    filter: grayscale(0) brightness(1);
}

.dragon-illustration.awake .dragon-eye {
    animation: dragonOpenEye 1s ease-out forwards;
}

@keyframes dragonOpenEye {
    0% { d: path("M 195 205 Q 200 208 205 205"); }
    100% { d: path("M 195 205 Q 200 196 205 205"); }
}

.lazy-prose {
    position: relative;
    z-index: 1;
}

.caution {
    margin-top: 1.5rem;
    padding: 1rem 1.4rem;
    border-left: 3px solid var(--accent-red);
    background-color: rgba(196, 92, 74, 0.08);
    font-size: 0.95rem;
}

.caution-mark {
    color: var(--accent-red);
    font-size: 1.2em;
    margin-right: 0.4em;
}

@media (max-width: 1000px) {
    .deep-page { padding: 6rem 2rem 8rem; }
    .monad-spread { grid-template-columns: 1fr; }
    .spread-sticky { position: static; }
    .functor-spread { grid-template-columns: 1fr; }
    .margin-annotation-left, .margin-annotation-right { text-align: left; padding: 0; }
    .dragon-illustration { float: none; margin: 0 auto 2rem; display: block; }
}

/* =========================================================
   PROSE TYPOGRAPHY
   ========================================================= */
.spread-prose,
.lazy-prose {
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.85;
    color: var(--text-primary);
    max-width: 64ch;
}

.spread-prose p,
.lazy-prose p {
    margin-bottom: 1.4rem;
}

.dropcap .initial {
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--accent-gold);
    font-size: 4.2rem;
    line-height: 0.85;
    float: left;
    padding-right: 0.6rem;
    padding-top: 0.4rem;
    padding-bottom: 0.1rem;
    text-shadow: 0 0 20px rgba(212, 162, 76, 0.2);
}

.inline-code {
    font-family: var(--font-code);
    font-size: 0.92em;
    color: var(--accent-verdigris);
    background-color: var(--bg-code);
    padding: 0.1em 0.4em;
    border-radius: 2px;
    border-left: 1px solid var(--accent-gold);
}

/* Field notes (code blocks) */
.field-note {
    position: relative;
    margin: 1.8rem 0;
    background-color: var(--bg-code);
    border-left: 3px solid var(--accent-gold);
    padding: 1.6rem 1.5rem 1.4rem 2.4rem;
    box-shadow: inset 0 0 0 1px rgba(212, 162, 76, 0.08);
}

.quill {
    position: absolute;
    top: 0.6rem;
    left: 0.7rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1;
    transform: rotate(-12deg);
    opacity: 0.8;
}

.field-note figcaption {
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--text-secondary);
    font-size: 0.82rem;
    margin-bottom: 0.8rem;
    letter-spacing: 0.05em;
}

.field-note pre {
    margin: 0;
    overflow-x: auto;
}

.field-note code {
    font-family: var(--font-code);
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    line-height: 1.7;
    color: var(--text-primary);
    font-feature-settings: "calt" 1, "liga" 1;
    white-space: pre;
}

/* =========================================================
   SECTION 6 -- COLOPHON
   ========================================================= */
.colophon {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 6rem;
}

.colophon-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.colophon-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    text-align: center;
}

.here-be {
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--accent-gold);
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.2;
    margin: 1.5rem 0 2rem;
    min-height: 1.4em;
}

.here-be-target {
    display: inline;
}

.here-be-target .typed-char {
    display: inline-block;
    text-shadow: 0 0 0px transparent;
    animation: goldFlash 0.4s ease-out forwards;
}

@keyframes goldFlash {
    0% { text-shadow: 0 0 20px rgba(212, 162, 76, 0.8); color: #fff5d6; }
    100% { text-shadow: 0 0 0px transparent; color: var(--accent-gold); }
}

.here-be-cursor {
    display: inline-block;
    color: var(--accent-gold);
    animation: blink 1s step-end infinite;
    margin-left: 0.05em;
    font-size: 0.9em;
    transform: translateY(-0.05em);
}

.here-be.typing-done .here-be-cursor {
    display: none;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.2; }
}

.closing-prose {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.85;
    margin-bottom: 2rem;
    opacity: 0;
    transition: opacity 0.8s var(--easing-fade);
}

.closing-prose.in-view {
    opacity: 1;
}

.footprint {
    text-align: left;
    margin: 2rem auto;
    max-width: 580px;
    opacity: 0;
    transition: opacity 1s var(--easing-fade);
}

.footprint.in-view {
    opacity: 1;
}

.explicit {
    margin-top: 3rem;
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--accent-gold);
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    opacity: 0.85;
}

.explicit-sub {
    color: var(--text-secondary);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: lowercase;
}

@media (max-width: 700px) {
    .cover, .colophon { padding: 4rem 2rem; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .border-path { stroke-dashoffset: 0; }
    .vine-path { stroke-dashoffset: 0; }
    .lambda-bg { opacity: 0.08; }
    .cover-title .letter,
    .cover-prelude,
    .cover-domain,
    .cover-subtitle,
    .cover-folio { opacity: 1; transform: none; }
    .creature-card { opacity: 1; transform: none; }
    .closing-prose, .footprint { opacity: 1; }
    .flourish { opacity: 1; }
}