/* =========================================================================
   lovebot.quest — The Codex of Affection
   Neomorphism · Aurora-gradient · Baskerville-refined · Asymmetric long-scroll
   ========================================================================= */

:root {
    --vellum-cream: #F2EFE7;
    --vellum-aged:  #E6E1D3;
    --aurora-rose:      #FFC4D2;
    --aurora-pistachio: #C7E5C2;
    --aurora-periwinkle:#B8C5F2;
    --aurora-peach:     #FBD9A0;
    --inkwell:    #3A3327;
    --margin-sepia: #7A6E54;

    --shadow-light: rgba(255, 255, 255, 0.85);
    --shadow-dark:  rgba(58, 51, 39, 0.18);

    --serif:   'Libre Baskerville', Georgia, serif;
    --display: 'Cormorant Garamond', 'Libre Baskerville', serif;
    --infant:  'Cormorant Infant', 'Cormorant Garamond', serif;
    --mono:    'JetBrains Mono', 'Courier New', monospace;
}

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

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

body {
    font-family: var(--serif);
    color: var(--inkwell);
    background: var(--vellum-cream);
    line-height: 1.65;
    overflow-x: hidden;
    cursor: default;
}

/* =========================================================================
   Aurora gradient living substrate (fixed full-viewport background)
   ========================================================================= */

.aurora {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: var(--vellum-cream);
    pointer-events: none;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px) saturate(1.4);
    opacity: 0.55;
    mix-blend-mode: multiply;
}

.aurora-rose {
    width: 60vw; height: 60vw;
    top: -10vw; left: -10vw;
    background: radial-gradient(circle, var(--aurora-rose) 0%, transparent 65%);
    animation: drift-rose 70s ease-in-out infinite alternate;
}

.aurora-pistachio {
    width: 55vw; height: 55vw;
    top: 30vh; right: -10vw;
    background: radial-gradient(circle, var(--aurora-pistachio) 0%, transparent 65%);
    animation: drift-pistachio 85s ease-in-out infinite alternate;
}

.aurora-periwinkle {
    width: 70vw; height: 70vw;
    bottom: -20vw; left: 10vw;
    background: radial-gradient(circle, var(--aurora-periwinkle) 0%, transparent 65%);
    animation: drift-periwinkle 90s ease-in-out infinite alternate;
}

.aurora-peach {
    width: 50vw; height: 50vw;
    top: 60vh; left: 35vw;
    background: radial-gradient(circle, var(--aurora-peach) 0%, transparent 65%);
    animation: drift-peach 60s ease-in-out infinite alternate;
}

@keyframes drift-rose {
    0%   { transform: translate(0,0) scale(1) rotate(0deg); }
    100% { transform: translate(8vw, 12vh) scale(1.15) rotate(40deg); }
}
@keyframes drift-pistachio {
    0%   { transform: translate(0,0) scale(1.05) rotate(0deg); }
    100% { transform: translate(-10vw, -8vh) scale(1) rotate(-35deg); }
}
@keyframes drift-periwinkle {
    0%   { transform: translate(0,0) scale(1) rotate(0deg); }
    100% { transform: translate(6vw, -14vh) scale(1.2) rotate(25deg); }
}
@keyframes drift-peach {
    0%   { transform: translate(0,0) scale(1.1) rotate(0deg); }
    100% { transform: translate(-7vw, 9vh) scale(0.95) rotate(-30deg); }
}

/* Page-corner foxing overlay (subtle aurora-tinted noise) */
.foxing {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.28;
    background-image:
        radial-gradient(circle at 6% 8%,   rgba(255, 196, 210, 0.55) 0%, transparent 18%),
        radial-gradient(circle at 95% 4%,  rgba(251, 217, 160, 0.45) 0%, transparent 16%),
        radial-gradient(circle at 4% 96%,  rgba(184, 197, 242, 0.45) 0%, transparent 18%),
        radial-gradient(circle at 96% 95%, rgba(199, 229, 194, 0.45) 0%, transparent 16%);
}

/* =========================================================================
   Cursor gold-leaf trail canvas
   ========================================================================= */

#leaf-trail {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
}

/* =========================================================================
   Embossed spine navigation (left edge)
   ========================================================================= */

.spine {
    position: fixed;
    top: 50%;
    left: 1.2rem;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1.1rem 0.55rem;
    background: var(--vellum-cream);
    border-radius: 28px;
    box-shadow:
        -6px -6px 14px var(--shadow-light),
         6px  6px 14px var(--shadow-dark);
}

.spine-glyph {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--margin-sepia);
    text-decoration: none;
    border-radius: 50%;
    background: var(--vellum-cream);
    box-shadow:
        -3px -3px 7px var(--shadow-light),
         3px  3px 7px var(--shadow-dark);
    transition: all 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.spine-glyph:hover {
    color: var(--inkwell);
    box-shadow:
        inset -2px -2px 5px var(--shadow-light),
        inset  2px  2px 5px var(--shadow-dark);
}

.spine-glyph.active {
    color: var(--inkwell);
    background: linear-gradient(135deg, var(--aurora-rose), var(--aurora-peach));
    box-shadow:
        inset -2px -2px 5px var(--shadow-light),
        inset  2px  2px 5px var(--shadow-dark);
}

/* =========================================================================
   Permanent bookmark ribbon (right edge sliver)
   ========================================================================= */

.bookmark {
    position: fixed;
    top: 0;
    right: 1.5rem;
    width: 14px;
    height: 0;
    z-index: 60;
    background: linear-gradient(180deg,
        var(--aurora-rose) 0%,
        var(--aurora-peach) 45%,
        var(--aurora-pistachio) 80%,
        var(--aurora-periwinkle) 100%);
    border-radius: 0 0 4px 4px;
    box-shadow:
        inset -1px 0 2px var(--shadow-dark),
        inset  1px 0 2px var(--shadow-light),
        2px 2px 6px var(--shadow-dark);
    transition: height 120ms linear;
}

.bookmark::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 10px;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* =========================================================================
   Codex spreads — full viewport, asymmetric chapter layout
   ========================================================================= */

.codex {
    position: relative;
    z-index: 1;
}

.spread {
    position: relative;
    min-height: 100vh;
    padding: 6vh 8vw 6vh 5.5rem;
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Decorative endband (top of every spread) */
.endband {
    position: absolute;
    top: 0;
    left: 5.5rem;
    right: 8vw;
    height: 14px;
    background:
        repeating-linear-gradient(90deg,
            var(--aurora-rose) 0,
            var(--aurora-rose) 6px,
            var(--aurora-peach) 6px,
            var(--aurora-peach) 12px,
            var(--aurora-pistachio) 12px,
            var(--aurora-pistachio) 18px,
            var(--aurora-periwinkle) 18px,
            var(--aurora-periwinkle) 24px);
    border-radius: 0 0 4px 4px;
    box-shadow:
        inset 0 -1px 2px var(--shadow-dark),
        inset 0  1px 2px var(--shadow-light),
        0 2px 4px var(--shadow-dark);
    opacity: 0.85;
}

/* =========================================================================
   Frontispiece
   ========================================================================= */

.frontispiece {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.frontispiece-inner {
    max-width: 760px;
    padding: 4rem 3rem;
    background: var(--vellum-cream);
    border-radius: 32px;
    box-shadow:
        -14px -14px 36px var(--shadow-light),
         14px  14px 36px var(--shadow-dark);
    position: relative;
    transform: translateX(-6%);
}

.folio {
    font-family: var(--display);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--margin-sepia);
    letter-spacing: 0.12em;
    margin-bottom: 1.2rem;
}

.title {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    line-height: 0.92;
    letter-spacing: -0.04em;
    color: var(--inkwell);
    margin-bottom: 2rem;
    display: block;
}

.title-the,
.title-of {
    display: block;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    font-style: italic;
    color: var(--margin-sepia);
}

.title-codex {
    display: block;
    font-size: clamp(4rem, 11vw, 11rem);
    background: linear-gradient(135deg,
        var(--aurora-rose) 0%,
        var(--aurora-peach) 35%,
        var(--aurora-pistachio) 65%,
        var(--aurora-periwinkle) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.title-affection {
    display: block;
    font-size: clamp(3rem, 9vw, 9rem);
    font-style: italic;
    color: var(--inkwell);
}

.subtitle {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--margin-sepia);
    margin-bottom: 2.5rem;
    line-height: 1.8;
}

.seal {
    margin: 2rem auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--vellum-cream);
    box-shadow:
        inset -4px -4px 8px var(--shadow-light),
        inset  4px  4px 8px var(--shadow-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: seal-breathe 6s ease-in-out infinite;
}

.seal-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--aurora-rose), var(--aurora-peach));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        -2px -2px 5px var(--shadow-light),
         2px  2px 5px var(--shadow-dark);
}

.seal-glyph {
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--vellum-cream);
}

@keyframes seal-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

.imprint {
    font-family: var(--display);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--margin-sepia);
    letter-spacing: 0.18em;
}

/* =========================================================================
   Chapter spreads — asymmetric two-pane layout
   ========================================================================= */

.chapter {
    display: grid;
    gap: 4vw;
    align-items: center;
}

.chapter-left {
    /* text 1/3 left, panel 2/3 right (panel mass pulled 14% right of center) */
    grid-template-columns: 33% 67%;
}

.chapter-right {
    /* panel 2/3 left, text 1/3 right */
    grid-template-columns: 67% 33%;
}

.chapter-text {
    font-family: var(--serif);
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--inkwell);
    padding: 1.5rem 0;
}

.chapter-left .chapter-text  { padding-right: 1rem; }
.chapter-right .chapter-text { padding-left: 1rem; }

.chapter-number {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--margin-sepia);
    letter-spacing: 0.18em;
    margin-bottom: 0.4rem;
}

.chapter-title {
    font-family: var(--display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(2.6rem, 5.6vw, 5.4rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--inkwell);
    margin-bottom: 2rem;
}

.chapter-body {
    margin-bottom: 1.4rem;
    font-size: 1.02rem;
    text-align: justify;
    hyphens: auto;
}

.dropcap {
    font-family: var(--infant);
    font-style: italic;
    font-weight: 500;
    font-size: 7rem;
    float: left;
    line-height: 0.85;
    margin: 0.05em 0.08em -0.05em 0;
    background: linear-gradient(160deg,
        var(--aurora-rose) 0%,
        var(--aurora-peach) 45%,
        var(--aurora-periwinkle) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.marginalia {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--margin-sepia);
    margin-top: 1.5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--margin-sepia);
}

.marginalia sup {
    color: var(--aurora-rose);
    font-weight: 700;
    font-style: normal;
    margin-right: 0.3rem;
}

/* =========================================================================
   Chapter panels (neomorphic relief, off-center mass)
   ========================================================================= */

.chapter-panel {
    position: relative;
    padding: 3rem 3rem;
    border-radius: 28px;
    background: var(--vellum-cream);
    box-shadow: none;
    transform: scale(0.985);
    transition:
        box-shadow 800ms cubic-bezier(0.22, 1, 0.36, 1),
        transform  800ms cubic-bezier(0.22, 1, 0.36, 1);
    overflow: visible;
}

.chapter.unfurled .chapter-panel {
    box-shadow:
        -16px -16px 38px var(--shadow-light),
         16px  16px 38px var(--shadow-dark);
    transform: scale(1);
}

.chapter-left  .chapter-panel { margin-left: 11%;  margin-right: -3%; }
.chapter-right .chapter-panel { margin-right: 11%; margin-left: -3%; }

.panel-fleuron {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--margin-sepia);
    opacity: 0.7;
}

/* =========================================================================
   Artifacts (3D-render-style SVG illustrations)
   ========================================================================= */

.artifact {
    background: var(--vellum-cream);
    border-radius: 18px;
    padding: 1.4rem 1.4rem 1rem;
    margin-bottom: 1.6rem;
    box-shadow:
        inset -3px -3px 8px var(--shadow-light),
        inset  3px  3px 8px var(--shadow-dark);
    text-align: center;
}

.artifact svg {
    width: 100%;
    max-width: 320px;
    height: auto;
    filter: drop-shadow(2px 4px 6px var(--shadow-dark));
}

.artifact-heart svg     { max-width: 220px; }
.artifact-tokenizer svg { max-width: 280px; }
.artifact-loss svg      { max-width: 360px; }
.artifact-quill svg     { max-width: 220px; }

.caption {
    font-family: var(--display);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--margin-sepia);
    margin-top: 0.6rem;
}

/* =========================================================================
   Code blocks (typewriter reveal)
   ========================================================================= */

.codeblock {
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.7;
    color: var(--inkwell);
    background: var(--vellum-aged);
    border-radius: 14px;
    padding: 1.3rem 1.5rem;
    margin-bottom: 1.2rem;
    white-space: pre-wrap;
    box-shadow:
        inset -2px -2px 6px var(--shadow-light),
        inset  2px  2px 6px var(--shadow-dark);
    position: relative;
    min-height: 4rem;
}

.codeblock::after {
    content: "▍";
    color: var(--aurora-rose);
    margin-left: 2px;
    animation: caret-blink 1s steps(2, end) infinite;
}

.codeblock.complete::after {
    animation: none;
    opacity: 0;
}

@keyframes caret-blink {
    0%, 50%   { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* =========================================================================
   Marginal annotations
   ========================================================================= */

.annotation {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--margin-sepia);
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    opacity: 0;
    transform: translateX(-1.5rem);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.annotation code {
    font-family: var(--mono);
    color: var(--inkwell);
    background: var(--vellum-aged);
    padding: 0 0.3rem;
    border-radius: 3px;
}

.chapter.unfurled .annotation-1 { opacity: 1; transform: translateX(0); transition-delay: 600ms; }
.chapter.unfurled .annotation-2 { opacity: 1; transform: translateX(0); transition-delay: 650ms; }
.chapter.unfurled .annotation-3 { opacity: 1; transform: translateX(0); transition-delay: 700ms; }

/* =========================================================================
   Codex II — token flow diagram
   ========================================================================= */

.token-flow {
    background: var(--vellum-cream);
    border-radius: 18px;
    padding: 1.6rem 1.8rem;
    box-shadow:
        inset -3px -3px 8px var(--shadow-light),
        inset  3px  3px 8px var(--shadow-dark);
}

.token-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.9rem;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateX(-1rem);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter.unfurled .token-row              { opacity: 1; transform: translateX(0); transition-delay: 500ms; }
.chapter.unfurled .token-row.token-row-stagger  { transition-delay: 700ms; }
.chapter.unfurled .token-row.token-row-stagger2 { transition-delay: 900ms; }

.token-input {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--inkwell);
    min-width: 12rem;
}

.token-arrow {
    font-family: var(--display);
    color: var(--margin-sepia);
    font-size: 1.1rem;
}

.token-pill {
    font-family: var(--mono);
    font-size: 0.74rem;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: var(--vellum-cream);
    color: var(--inkwell);
    box-shadow:
        -2px -2px 5px var(--shadow-light),
         2px  2px 5px var(--shadow-dark);
}

.token-pill:nth-child(3) { background: linear-gradient(135deg, var(--aurora-rose), var(--vellum-cream)); }
.token-pill:nth-child(4) { background: linear-gradient(135deg, var(--aurora-peach), var(--vellum-cream)); }
.token-pill:nth-child(5) { background: linear-gradient(135deg, var(--aurora-pistachio), var(--vellum-cream)); }
.token-pill:nth-child(6) { background: linear-gradient(135deg, var(--aurora-periwinkle), var(--vellum-cream)); }
.token-pill:nth-child(7) { background: linear-gradient(135deg, var(--aurora-rose), var(--aurora-peach)); }

/* =========================================================================
   Codex IV — attention grid
   ========================================================================= */

.attention-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    background: var(--vellum-cream);
    padding: 1.6rem;
    border-radius: 18px;
    box-shadow:
        inset -3px -3px 8px var(--shadow-light),
        inset  3px  3px 8px var(--shadow-dark);
}

.attn-cell {
    aspect-ratio: 2.4 / 1;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--inkwell);
    background:
        linear-gradient(135deg,
            rgba(255, 196, 210, calc(var(--w) * 0.9)) 0%,
            rgba(251, 217, 160, calc(var(--w) * 0.9)) 60%,
            rgba(199, 229, 194, calc(var(--w) * 0.9)) 100%),
        var(--vellum-cream);
    box-shadow:
        -3px -3px 7px var(--shadow-light),
         3px  3px 7px var(--shadow-dark);
    opacity: 0;
    transform: scale(0.92);
    transition:
        opacity 600ms ease,
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter.unfurled .attn-cell           { opacity: 1; transform: scale(1); }
.chapter.unfurled .attn-cell:nth-child(1) { transition-delay: 400ms; }
.chapter.unfurled .attn-cell:nth-child(2) { transition-delay: 470ms; }
.chapter.unfurled .attn-cell:nth-child(3) { transition-delay: 540ms; }
.chapter.unfurled .attn-cell:nth-child(4) { transition-delay: 610ms; }
.chapter.unfurled .attn-cell:nth-child(5) { transition-delay: 680ms; }
.chapter.unfurled .attn-cell:nth-child(6) { transition-delay: 750ms; }
.chapter.unfurled .attn-cell:nth-child(7) { transition-delay: 820ms; }
.chapter.unfurled .attn-cell:nth-child(8) { transition-delay: 890ms; }
.chapter.unfurled .attn-cell:nth-child(9) { transition-delay: 960ms; }

.attn-cell span {
    font-style: italic;
    font-family: var(--display);
    font-size: 1rem;
}

/* =========================================================================
   Codex V — dialogue
   ========================================================================= */

.dialogue {
    background: var(--vellum-cream);
    border-radius: 18px;
    padding: 1.8rem 2rem;
    margin-bottom: 1.4rem;
    box-shadow:
        inset -3px -3px 8px var(--shadow-light),
        inset  3px  3px 8px var(--shadow-dark);
}

.dialogue-prompt {
    font-family: var(--serif);
    font-size: 1rem;
    margin-bottom: 0.8rem;
}

.dialogue-prompt .speaker {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--margin-sepia);
    margin-right: 0.5rem;
}

.dialogue-pause {
    font-family: var(--display);
    font-size: 1.4rem;
    color: var(--margin-sepia);
    letter-spacing: 0.4em;
    margin-bottom: 0.8rem;
    opacity: 0.7;
    animation: pause-fade 2.4s ease-in-out infinite;
}

@keyframes pause-fade {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.85; }
}

.dialogue-reply {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--inkwell);
    min-height: 3.5rem;
    position: relative;
}

.dialogue-reply::before {
    content: "bot ›";
    font-family: var(--mono);
    font-style: normal;
    font-size: 0.78rem;
    color: var(--margin-sepia);
    margin-right: 0.5rem;
}

.dialogue-reply::after {
    content: "▍";
    color: var(--aurora-rose);
    margin-left: 2px;
    animation: caret-blink 1s steps(2, end) infinite;
}

.dialogue-reply.complete::after {
    animation: none;
    opacity: 0;
}

/* =========================================================================
   Colophon
   ========================================================================= */

.colophon {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.colophon-inner {
    max-width: 680px;
    padding: 4rem 3rem;
    background: var(--vellum-cream);
    border-radius: 32px;
    box-shadow:
        inset -10px -10px 28px var(--shadow-light),
        inset  10px  10px 28px var(--shadow-dark);
    transform: translateX(4%);
}

.colophon-title {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.2rem, 4.6vw, 4rem);
    color: var(--inkwell);
    margin: 1rem 0 2rem;
    letter-spacing: -0.03em;
}

.colophon-body {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.85;
    color: var(--inkwell);
    margin-bottom: 1.4rem;
    text-align: justify;
    hyphens: auto;
}

.colophon-body.small {
    font-size: 0.88rem;
    color: var(--margin-sepia);
    font-style: italic;
}

.finis {
    margin: 3rem 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.finis-word {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(2rem, 4vw, 3.4rem);
    color: var(--margin-sepia);
    letter-spacing: -0.02em;
}

.finis-seal {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: var(--vellum-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset -5px -5px 11px var(--shadow-light),
        inset  5px  5px 11px var(--shadow-dark);
    animation: seal-breathe 5s ease-in-out infinite;
}

.finis-seal svg {
    width: 80%;
    height: 80%;
}

/* =========================================================================
   Responsive: collapse to single column on narrow screens
   ========================================================================= */

@media (max-width: 920px) {
    .spread {
        padding: 6vh 1.2rem 6vh 4.2rem;
    }

    .endband {
        left: 4.2rem;
        right: 1.2rem;
    }

    .chapter,
    .chapter-left,
    .chapter-right {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .chapter-right .chapter-panel,
    .chapter-left .chapter-panel  { margin: 0; }

    .chapter-left .chapter-text,
    .chapter-right .chapter-text  { padding: 0; order: 0; }

    .chapter-right .chapter-panel { order: 1; }

    .frontispiece-inner {
        transform: none;
        padding: 2.4rem 1.5rem;
    }

    .colophon-inner {
        transform: none;
        padding: 2.4rem 1.5rem;
    }

    .spine {
        gap: 0.6rem;
        left: 0.6rem;
        padding: 0.8rem 0.4rem;
    }

    .spine-glyph {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }

    .dropcap {
        font-size: 5rem;
    }

    .title-codex     { font-size: clamp(3rem, 14vw, 6rem); }
    .title-affection { font-size: clamp(2.2rem, 11vw, 5rem); }

    .attention-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
}