/* =============================================================
   simai.xyz — The Imaginarium of Simulated Almanacks
   Confectioner's Codex pastel palette · Z-pattern compositional unit
   ============================================================= */

:root {
    /* Confectioner's Codex palette */
    --cotton-vellum:    #f4ead6;
    --coral-sherbet:    #f7c8c2;
    --mint-quarto:      #c8d6c1;
    --lavender-moire:   #d8c5e8;
    --lemon-buttercream:#f3d6a7;
    --cocoa-ink:        #3a2d24;
    --sepia-pencil:     #7a5b3e;
    --pressed-walnut:   #1c1714;

    /* Opulent-grand spacing metric */
    --gutter-major:     clamp(4rem, 9vw, 9rem);
    --gutter-page:      clamp(2rem, 5vw, 5rem);
    --rule-hair:        1px;
    --margin-folio:     clamp(3rem, 7vw, 7rem);

    /* Type scale */
    --display-letter:   0.04em;
    --body-letter:      -0.005em;

    /* Reveal timing */
    --reveal-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
    --reveal-dur:       1100ms;

    /* Marginalia rail */
    --rail-w:           9vw;
}

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

html {
    background: var(--cotton-vellum);
    scroll-behavior: smooth;
}

body {
    background: var(--cotton-vellum);
    color: var(--cocoa-ink);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 16px;
    line-height: 1.7;
    letter-spacing: var(--body-letter);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* Hidden defs SVG */
.paper-grain-defs {
    position: absolute;
    width: 0; height: 0;
    overflow: hidden;
}

/* Site-wide paper-grain substrate */
.paper-ground {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        repeating-linear-gradient(0deg,
            rgba(58,45,36,0.012) 0px,
            rgba(58,45,36,0.012) 1px,
            transparent 1px,
            transparent 3px),
        repeating-linear-gradient(90deg,
            rgba(58,45,36,0.008) 0px,
            rgba(58,45,36,0.008) 1px,
            transparent 1px,
            transparent 4px);
    mix-blend-mode: multiply;
}
.paper-ground::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.227  0 0 0 0 0.176  0 0 0 0 0.141  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.5;
    mix-blend-mode: multiply;
}

/* ============================================================
   Marginalia rail
   ============================================================ */
.marginalia-rail {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--rail-w);
    height: 100vh;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
}
.marginalia-inner {
    position: relative;
    padding-top: 12vh;
    padding-right: 0.6vw;
    height: 100%;
    transform: translateY(0);
    transition: transform 60ms linear;
}
.marginalia-note {
    position: relative;
    margin-bottom: 18vh;
    padding: 0.4rem 0.6rem;
    transform: rotate(-2deg);
    font-family: 'Caveat', cursive;
    font-weight: 400;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--cocoa-ink);
    pointer-events: auto;
    border-left: var(--rule-hair) solid var(--sepia-pencil);
    background: linear-gradient(180deg, rgba(244,234,214,0.4) 0%, rgba(244,234,214,0) 100%);
}
.marginalia-note .m-glyph {
    display: block;
    font-family: 'Bodoni Moda', serif;
    font-size: 1.2rem;
    color: var(--coral-sherbet);
    margin-bottom: 0.2rem;
    -webkit-text-stroke: 0.4px var(--cocoa-ink);
}
.marginalia-note .m-text {
    display: block;
}
.marginalia-note[data-glyph="manicule"] .m-glyph { color: var(--coral-sherbet); }
.marginalia-note[data-glyph="asterisk"] .m-glyph { color: var(--lavender-moire); }
.marginalia-note[data-glyph="key"]      .m-glyph { color: var(--mint-quarto); }
.marginalia-note[data-glyph="quill"]    .m-glyph { color: var(--lemon-buttercream); }

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

/* ============================================================
   Main almanack & spreads
   ============================================================ */
.almanack {
    position: relative;
    z-index: 2;
    padding-right: var(--rail-w);
    scroll-snap-type: y proximity;
}

.spread {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: var(--margin-folio) var(--gutter-page);
    display: grid;
    grid-template-columns: 1fr 0.15fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "tl    .       tr"
        "ribbon ribbon ribbon"
        "bl    .       br";
    gap: 1.5rem var(--gutter-major);
    overflow: hidden;
    scroll-snap-align: start;
}

/* Hairline rule above & below each spread (separating pastel adjacencies) */
.spread + .ornament-divider,
.ornament-divider + .spread {
    position: relative;
}
.spread::before,
.spread::after {
    content: '';
    position: absolute;
    left: var(--gutter-page);
    right: var(--gutter-page);
    height: var(--rule-hair);
    background: var(--cocoa-ink);
    opacity: 0.35;
}
.spread::before { top: 0; }
.spread::after  { bottom: 0; }

.quad {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}
.quad.tl { grid-area: tl; align-items: flex-start; }
.quad.tr { grid-area: tr; align-items: flex-end; text-align: right; }
.quad.bl { grid-area: bl; align-items: flex-start; align-self: end; }
.quad.br { grid-area: br; align-items: flex-end; text-align: right; align-self: end; }

/* Ribbon — the diagonal Z-stroke per plate */
.ribbon {
    grid-area: ribbon;
    position: relative;
    height: clamp(8rem, 18vh, 14rem);
    width: 100%;
    background: linear-gradient(135deg,
        transparent 30%,
        var(--mint-quarto) 30%,
        var(--mint-quarto) 70%,
        transparent 70%);
    opacity: 0.18;
}
/* Per-plate ribbon angle */
.spread[data-ribbon-angle="135"]  .ribbon { background: linear-gradient(135deg,  transparent 30%, var(--mint-quarto)      30%, var(--mint-quarto)      70%, transparent 70%); }
.spread[data-ribbon-angle="45"]   .ribbon { background: linear-gradient(45deg,   transparent 30%, var(--lavender-moire)   30%, var(--lavender-moire)   70%, transparent 70%); }
.spread[data-ribbon-angle="-135"] .ribbon { background: linear-gradient(-135deg, transparent 30%, var(--coral-sherbet)    30%, var(--coral-sherbet)    70%, transparent 70%); }
.spread[data-ribbon-angle="-45"]  .ribbon { background: linear-gradient(-45deg,  transparent 30%, var(--lemon-buttercream)30%, var(--lemon-buttercream)70%, transparent 70%); }

.ribbon::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: var(--rule-hair);
    background: var(--cocoa-ink);
    opacity: 0.4;
    transform: translateY(-50%);
}

/* ============================================================
   FRONTISPIECE
   ============================================================ */
.frontispiece {
    background: linear-gradient(180deg, var(--cotton-vellum) 0%, rgba(247,200,194,0.18) 100%);
}
.frontispiece .ribbon-frontis {
    grid-area: ribbon;
    position: relative;
    height: clamp(10rem, 22vh, 18rem);
    background: linear-gradient(135deg,
        transparent 28%,
        var(--lavender-moire) 28%,
        var(--lavender-moire) 72%,
        transparent 72%);
    opacity: 0.22;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.frontispiece .ribbon-frontis .hero-wordmark {
    width: 100%;
    height: clamp(6rem, 14vh, 12rem);
    opacity: 1;
    mix-blend-mode: normal;
}
.frontispiece .ribbon-frontis .hero-wordmark text {
    fill: var(--pressed-walnut);
}
.frontispiece .ribbon-frontis .hero-subline {
    display: block;
    margin-top: 0.4rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(0.9rem, 1.4vw, 1.15rem);
    color: var(--cocoa-ink);
    letter-spacing: 0.02em;
    text-align: center;
    mix-blend-mode: normal;
    background: rgba(244,234,214,0.5);
    padding: 0.2rem 0.8rem;
    border-top: var(--rule-hair) solid var(--cocoa-ink);
    border-bottom: var(--rule-hair) solid var(--cocoa-ink);
}

.volume-mark {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 300;
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sepia-pencil);
    display: block;
    margin-bottom: 0.6rem;
}
.vol-rule {
    display: block;
    width: clamp(8rem, 20vw, 18rem);
    height: var(--rule-hair);
    background: var(--cocoa-ink);
    opacity: 0.55;
}

.smi-cartouche {
    width: clamp(8rem, 14vw, 14rem);
    height: clamp(8rem, 14vw, 14rem);
    display: block;
    margin-bottom: 0.6rem;
}

.society-name {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 300;
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--sepia-pencil);
}

.frontis-blurb {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.75;
    color: var(--cocoa-ink);
    max-width: 38ch;
    margin-bottom: 1.6rem;
    font-style: italic;
}

.plate-index {
    list-style: none;
    counter-reset: plate-counter;
    padding: 0.8rem 1.2rem;
    border-left: var(--rule-hair) solid var(--cocoa-ink);
    border-right: var(--rule-hair) solid var(--cocoa-ink);
    background: rgba(200,214,193,0.18);
    columns: 2;
    column-gap: 2.5rem;
    max-width: 42rem;
}
.plate-index li {
    margin-bottom: 0.35rem;
    break-inside: avoid;
}
.plate-index a {
    font-family: 'Bodoni Moda', serif;
    font-weight: 400;
    font-size: 0.92rem;
    color: var(--cocoa-ink);
    text-decoration: none;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.3rem;
    display: inline-block;
    transition: background 220ms ease, color 220ms ease;
    border-bottom: var(--rule-hair) dotted var(--sepia-pencil);
}
.plate-index a:hover {
    background: var(--coral-sherbet);
    color: var(--pressed-walnut);
    border-bottom-color: var(--cocoa-ink);
}

/* Wax-seal anchors */
.wax-seal-anchor {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    user-select: none;
    transition: transform 220ms var(--reveal-ease);
}
.wax-seal-anchor[data-seal-large] .wax-seal-svg {
    width: clamp(7rem, 11vw, 10rem);
    height: clamp(7rem, 11vw, 10rem);
}
.wax-seal-anchor .wax-seal-svg {
    width: 3rem;
    height: 3rem;
    overflow: visible;
}
.wax-seal-anchor .seal-body {
    transform-origin: center;
    transition: transform 200ms var(--reveal-ease);
    filter: drop-shadow(0 1px 1px rgba(58,45,36,0.25));
}
.wax-seal-anchor .seal-body-inner {
    transition: opacity 200ms var(--reveal-ease);
}
.wax-seal-anchor .seal-crack {
    opacity: 0;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: opacity 180ms, stroke-dashoffset 380ms var(--reveal-ease);
}
.wax-seal-anchor:hover .seal-body {
    transform: scale(1.08) rotate(-2deg);
    filter: drop-shadow(0 2px 2px rgba(58,45,36,0.35));
}
.wax-seal-anchor:hover .seal-crack {
    opacity: 1;
    stroke-dashoffset: 0;
}
.wax-seal-anchor.cracked .seal-body {
    transform: scale(1.04) rotate(-3deg);
}
.wax-seal-anchor.cracked .seal-crack {
    opacity: 1;
    stroke-dashoffset: 0;
}
.wax-seal-anchor .seal-caption {
    margin-top: 0.6rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(0.85rem, 1vw, 1rem);
    color: var(--cocoa-ink);
    text-align: center;
}
.wax-seal-anchor.seal-small {
    margin-top: 0.8rem;
}

/* ============================================================
   PLATE SPREADS — common
   ============================================================ */
.plate {
    background:
        linear-gradient(180deg,
            rgba(244,234,214,1) 0%,
            rgba(244,234,214,0.95) 50%,
            rgba(244,234,214,1) 100%);
}
.plate:nth-child(odd) {
    background:
        linear-gradient(180deg,
            rgba(244,234,214,1) 0%,
            rgba(247,200,194,0.06) 50%,
            rgba(244,234,214,1) 100%);
}

/* Plate top-left: number + subhead */
.plate-number {
    font-family: 'Bodoni Moda', serif;
    font-weight: 700;
    font-style: normal;
    font-variant-caps: small-caps;
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    letter-spacing: 0.05em;
    color: var(--cocoa-ink);
    line-height: 1;
    display: block;
}
.plate-rule {
    display: block;
    margin-top: 0.6rem;
    width: clamp(4rem, 10vw, 10rem);
    height: var(--rule-hair);
    background: var(--cocoa-ink);
    opacity: 0.55;
}
.plate-subhead {
    display: block;
    margin-top: 0.5rem;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 300;
    font-size: clamp(0.78rem, 1vw, 0.95rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sepia-pencil);
    max-width: 26ch;
    line-height: 1.4;
}

/* Plate top-right: script label */
.plate-label-script {
    display: block;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    color: var(--cocoa-ink);
    transform: rotate(-1deg);
    margin-bottom: 0.4rem;
    line-height: 1.1;
}
.plate-label-trans {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(0.85rem, 1.05vw, 1.05rem);
    color: var(--sepia-pencil);
    letter-spacing: 0.02em;
}

/* Plate bottom-left: collage */
.collage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 36rem;
    background: var(--cotton-vellum);
    border: var(--rule-hair) solid var(--cocoa-ink);
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 0 0 4px var(--cotton-vellum), 0 0 0 5px rgba(58,45,36,0.25);
}
.collage-engraving {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(1) contrast(1.3);
    opacity: 0.65;
    mix-blend-mode: multiply;
    z-index: 2;
}
.cutpaper {
    position: absolute;
    z-index: 3;
    mix-blend-mode: normal;
    border: var(--rule-hair) solid var(--cocoa-ink);
}
.collage-grain {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='4'/><feColorMatrix values='0 0 0 0 0.227  0 0 0 0 0.176  0 0 0 0 0.141  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.85;
}

.collage-cap {
    display: block;
    margin-top: 0.8rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.92rem;
    color: var(--sepia-pencil);
    line-height: 1.5;
    letter-spacing: 0.005em;
    max-width: 36rem;
}
.collage-cap strong {
    font-weight: 500;
    color: var(--cocoa-ink);
    background: rgba(243,214,167,0.6);
    padding: 0 0.2rem;
    border-bottom: var(--rule-hair) solid var(--cocoa-ink);
}

/* ============================================================
   Cut-paper shape definitions (per collage)
   ============================================================ */
/* Plate I — weather */
.c-coral-tri {
    width: 28%; height: 28%;
    top: 18%; left: 10%;
    background: var(--coral-sherbet);
    clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
    border: none;
}
.c-lavender-circle {
    width: 22%; height: 22%;
    top: 56%; left: 14%;
    background: var(--lavender-moire);
    border-radius: 50%;
}
.c-mint-arc {
    width: 32%; height: 22%;
    top: 8%; right: 8%;
    background: var(--mint-quarto);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.c-lemon-square {
    width: 14%; height: 14%;
    bottom: 14%; right: 10%;
    background: var(--lemon-buttercream);
    transform: rotate(12deg);
}

/* Plate II — currency */
.c-lemon-circle {
    width: 36%; height: 36%;
    top: 32%; left: 32%;
    background: var(--lemon-buttercream);
    border-radius: 50%;
    opacity: 0.85;
}
.c-coral-rect {
    width: 18%; height: 36%;
    top: 14%; left: 10%;
    background: var(--coral-sherbet);
    transform: rotate(-8deg);
}
.c-mint-tri {
    width: 24%; height: 24%;
    bottom: 14%; left: 14%;
    background: var(--mint-quarto);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    border: none;
}
.c-lavender-arc {
    width: 28%; height: 18%;
    bottom: 12%; right: 8%;
    background: var(--lavender-moire);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* Plate III — bird */
.c-lavender-bigtri {
    width: 32%; height: 32%;
    top: 50%; right: 4%;
    background: var(--lavender-moire);
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
    border: none;
}
.c-coral-semi {
    width: 22%; height: 22%;
    top: 38%; left: 30%;
    background: var(--coral-sherbet);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: rotate(-12deg);
}
.c-mint-square {
    width: 12%; height: 12%;
    bottom: 22%; right: 28%;
    background: var(--mint-quarto);
    transform: rotate(20deg);
}

/* Plate IV — astronomy */
.c-lemon-bigcircle {
    width: 22%; height: 22%;
    top: 38%; left: 40%;
    background: var(--lemon-buttercream);
    border-radius: 50%;
    opacity: 0.92;
}
.c-coral-moon {
    width: 12%; height: 12%;
    top: 20%; left: 56%;
    background: var(--coral-sherbet);
    border-radius: 50%;
}
.c-mint-arc-2 {
    width: 36%; height: 24%;
    bottom: 16%; left: 12%;
    background: var(--mint-quarto);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: rotate(8deg);
}
.c-lavender-rect {
    width: 14%; height: 18%;
    top: 12%; right: 12%;
    background: var(--lavender-moire);
    transform: rotate(-14deg);
}

/* Plate V — clockwork */
.c-mint-bigcircle {
    width: 28%; height: 28%;
    top: 36%; left: 36%;
    background: var(--mint-quarto);
    border-radius: 50%;
    opacity: 0.88;
}
.c-coral-arc {
    width: 22%; height: 22%;
    top: 60%; right: 12%;
    background: var(--coral-sherbet);
    border-radius: 50% 0 0 0;
}
.c-lavender-tri-2 {
    width: 22%; height: 22%;
    top: 18%; right: 8%;
    background: var(--lavender-moire);
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
    border: none;
}
.c-lemon-rect {
    width: 14%; height: 24%;
    bottom: 8%; left: 8%;
    background: var(--lemon-buttercream);
    transform: rotate(-6deg);
}

/* Plate VI — aroma */
.c-coral-circle {
    width: 18%; height: 18%;
    top: 12%; right: 14%;
    background: var(--coral-sherbet);
    border-radius: 50%;
}
.c-mint-tri-2 {
    width: 18%; height: 18%;
    bottom: 20%; left: 10%;
    background: var(--mint-quarto);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    border: none;
}
.c-lavender-square {
    width: 16%; height: 16%;
    top: 30%; left: 12%;
    background: var(--lavender-moire);
    transform: rotate(14deg);
}
.c-lemon-arc {
    width: 28%; height: 18%;
    bottom: 8%; right: 8%;
    background: var(--lemon-buttercream);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

/* Plate VII — comet */
.c-lavender-bigcircle {
    width: 26%; height: 26%;
    top: 12%; right: 12%;
    background: var(--lavender-moire);
    border-radius: 50%;
    opacity: 0.85;
}
.c-coral-streak {
    width: 60%; height: 6%;
    top: 36%; left: 14%;
    background: var(--coral-sherbet);
    transform: rotate(-18deg);
    border-radius: 50%;
}
.c-mint-square-2 {
    width: 12%; height: 12%;
    bottom: 18%; left: 12%;
    background: var(--mint-quarto);
    transform: rotate(28deg);
}
.c-lemon-tri {
    width: 18%; height: 18%;
    bottom: 24%; right: 22%;
    background: var(--lemon-buttercream);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    border: none;
}

/* Plate VIII — catastrophe */
.c-coral-bigsemi {
    width: 36%; height: 28%;
    top: 8%; left: 28%;
    background: var(--coral-sherbet);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    opacity: 0.85;
}
.c-mint-rect {
    width: 18%; height: 26%;
    bottom: 10%; left: 12%;
    background: var(--mint-quarto);
    transform: rotate(-8deg);
}
.c-lavender-tri-3 {
    width: 20%; height: 20%;
    bottom: 14%; right: 16%;
    background: var(--lavender-moire);
    clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
    border: none;
}
.c-lemon-circle-2 {
    width: 12%; height: 12%;
    top: 18%; right: 20%;
    background: var(--lemon-buttercream);
    border-radius: 50%;
}

/* ============================================================
   Plate bottom-right: caption
   ============================================================ */
.plate-caption {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 1.1vw, 1.12rem);
    line-height: 1.75;
    color: var(--cocoa-ink);
    letter-spacing: var(--body-letter);
    max-width: 38ch;
    text-align: left;
    padding-left: 0.6rem;
    border-left: var(--rule-hair) solid var(--coral-sherbet);
}
.quad.br .plate-caption {
    text-align: left;
}
.drop-cap {
    float: left;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-style: normal;
    font-size: 4.5rem;
    line-height: 0.85;
    margin: -0.04em 0.4rem -0.2rem 0;
    color: var(--coral-sherbet);
    -webkit-text-stroke: 0.5px var(--cocoa-ink);
    padding: 0.1rem 0.3rem 0 0.1rem;
}

/* Folio numerals */
.folio-mark {
    position: absolute;
    right: calc(var(--gutter-page) * -0.4 + -1vw);
    bottom: 1.4rem;
    display: inline-block;
    font-family: 'Bodoni Moda', serif;
    font-weight: 700;
    font-variant-caps: small-caps;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1;
    color: var(--lemon-buttercream);
    letter-spacing: 0.04em;
    -webkit-text-stroke: 0.5px var(--cocoa-ink);
    text-stroke: 0.5px var(--cocoa-ink);
    pointer-events: none;
    clip-path: inset(-2rem 0 -2rem 0);
    user-select: none;
}
.folio-mark .fol-prefix {
    font-size: 0.4em;
    letter-spacing: 0.2em;
    color: var(--sepia-pencil);
    -webkit-text-stroke: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.3rem;
}
.folio-mark .fol-num {
    display: inline-block;
}
.frontispiece .folio-mark {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 1rem;
}

/* ============================================================
   Ornament dividers
   ============================================================ */
.ornament-divider {
    position: relative;
    z-index: 2;
    padding: 1rem var(--gutter-page);
    text-align: center;
    background: var(--cotton-vellum);
    margin-right: var(--rail-w);
}
.ornament-svg {
    width: clamp(14rem, 30vw, 24rem);
    height: clamp(1.6rem, 3vw, 3rem);
    display: block;
    margin: 0 auto;
    opacity: 0.6;
}
.orn-stroke {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 900ms var(--reveal-ease);
}
.ornament-divider.is-revealed .orn-stroke {
    stroke-dashoffset: 0;
}

/* ============================================================
   ENDPAPERS
   ============================================================ */
.endpapers {
    background: linear-gradient(180deg, var(--cotton-vellum) 0%, rgba(216,197,232,0.16) 100%);
}
.printer-mark {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 300;
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--sepia-pencil);
    display: block;
    margin-bottom: 0.8rem;
}
.printers-mark-svg {
    width: clamp(6rem, 11vw, 10rem);
    height: clamp(6rem, 11vw, 10rem);
}
.colophon-title,
.errata-title {
    display: block;
    font-family: 'Bodoni Moda', serif;
    font-weight: 700;
    font-variant-caps: small-caps;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    letter-spacing: 0.1em;
    color: var(--cocoa-ink);
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: var(--rule-hair) solid var(--cocoa-ink);
    width: fit-content;
}
.colophon-body {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.75;
    color: var(--cocoa-ink);
    max-width: 40ch;
    text-align: left;
}
.quad.tr .colophon-body { text-align: right; max-width: 42ch; }

.errata-list {
    list-style: none;
    padding: 0;
    max-width: 42ch;
}
.errata-list li {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(0.92rem, 1.05vw, 1.05rem);
    line-height: 1.65;
    color: var(--cocoa-ink);
    margin-bottom: 0.6rem;
    padding-left: 1.2rem;
    position: relative;
    border-left: var(--rule-hair) dotted var(--sepia-pencil);
    padding-left: 0.8rem;
}
.errata-list li::before {
    content: '\2767';
    position: absolute;
    left: -1.6rem;
    top: 0.1rem;
    color: var(--coral-sherbet);
    font-size: 1.1rem;
    font-family: 'Bodoni Moda', serif;
}
.errata-list li em {
    font-weight: 500;
    font-style: normal;
    color: var(--sepia-pencil);
    background: rgba(243,214,167,0.5);
    padding: 0 0.2rem;
    margin-right: 0.2rem;
    border-bottom: var(--rule-hair) solid var(--cocoa-ink);
}

.endpapers .ribbon-frontis {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(6rem, 14vh, 10rem);
    background: linear-gradient(135deg,
        transparent 30%,
        var(--coral-sherbet) 30%,
        var(--coral-sherbet) 70%,
        transparent 70%);
    opacity: 0.32;
    position: relative;
}
.endmark-word {
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 900;
    font-size: clamp(1.4rem, 3vw, 2.6rem);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--pressed-walnut);
    mix-blend-mode: normal;
    text-align: center;
}

.endpapers-sign-off {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    line-height: 1.75;
    color: var(--cocoa-ink);
    text-align: right;
    margin-bottom: 1rem;
    max-width: 30ch;
}

.back-anchor {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.back-caption {
    margin-top: 0.4rem;
    font-family: 'Caveat', cursive;
    font-size: 0.95rem;
    color: var(--sepia-pencil);
    transform: rotate(-1deg);
}

/* ============================================================
   Fade-Reveal animation (the signature pattern)
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity var(--reveal-dur) var(--reveal-ease),
        transform var(--reveal-dur) var(--reveal-ease);
    transition-delay: 0ms;
    will-change: opacity, transform;
}
.reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}
/* per-quadrant stagger driven by data-stagger attribute */
.reveal[data-stagger="0"]   { transition-delay: 0ms;   }
.reveal[data-stagger="220"] { transition-delay: 220ms; }
.reveal[data-stagger="440"] { transition-delay: 440ms; }
.reveal[data-stagger="660"] { transition-delay: 660ms; }

/* Active-plate marginalia highlight */
.marginalia-note.is-active {
    background: linear-gradient(180deg, rgba(247,200,194,0.55) 0%, rgba(244,234,214,0) 100%);
    border-left-color: var(--coral-sherbet);
}

/* ============================================================
   Responsive tightening
   ============================================================ */
@media (max-width: 980px) {
    .spread {
        grid-template-columns: 1fr;
        grid-template-areas:
            "tl"
            "tr"
            "ribbon"
            "bl"
            "br";
        gap: 1.6rem;
    }
    .quad.tr { text-align: left; align-items: flex-start; }
    .quad.br { text-align: left; align-items: flex-start; }
    .plate-index { columns: 1; }
}
@media (max-width: 760px) {
    .almanack { padding-right: 0; }
    .ornament-divider { margin-right: 0; }
    .folio-mark { right: 0.4rem; font-size: 2.6rem; }
}