/* =============================================================================
   Blutmärchen — Folio
   A two-column "exhibit + broadsheet" layout. Monochrome silver-and-parchment
   palette: cool ink backgrounds, warm bone text, a single thread of gold for
   ornament. No reds anywhere in the chrome — the cover provides all chromatic
   tension.

   Used by:
     - index.xhtml          (the folio portal / welcome page)
     - tales.xhtml          (album index — cover gallery)
     - tales/tale.xhtml     (each Grimm tale, data-driven from bm_tale)
   ============================================================================= */

:root {
    /* ── Cool deep ground ────────────────────────────────────── */
    --ink-bg-1: #0a0a0c;
    --ink-bg-2: #11131a;
    --ink-bg-3: #181a23;
    --ink-bg-4: #202531;

    /* ── Warm parchment text ─────────────────────────────────── */
    --bone-1:   #ECE2CD;
    --bone-2:   #C8BCA8;
    --bone-3:   #908676;
    --bone-4:   #5a544a;

    /* ── Gold thread ─────────────────────────────────────────── */
    --gold-1:   #D4BE8C;
    --gold-2:   #C9B380;
    --gold-3:   #8a7349;
    --gold-4:   #5d4f33;

    /* ── Cool moonlight silver ───────────────────────────────── */
    --silver-1: #C9D0D8;
    --silver-2: #8a93a0;
    --silver-3: #495260;

    --rule:        rgba(201, 179, 128, 0.18);
    --rule-strong: rgba(201, 179, 128, 0.42);
    --rule-cold:   rgba(138, 147, 160, 0.22);

    --serif-display: 'Cormorant Garamond', Georgia, serif;
    --serif-caps:    'Cormorant Unicase', 'Cormorant Garamond', serif;
    --serif-body:    'EB Garamond', Georgia, serif;
    --blackletter:   'UnifrakturMaguntia', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--ink-bg-1); }
body {
    color: var(--bone-1);
    font-family: var(--serif-body);
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    /* Block iOS Safari's edge-swipe-back gesture from intercepting the
       in-page horizontal swipe that drives tale-to-tale navigation.
       Vertical scrolling is unaffected. */
    overscroll-behavior-x: contain;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold-3); color: var(--ink-bg-1); }

/* ── Atmospheric backdrop (fixed, no warm tones) ──────────────── */
.fol-sky {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        /* moon halo upper-right */
        radial-gradient(circle at 88% 10%, rgba(201,208,216,0.16) 0%, transparent 28%),
        /* faint cold low light */
        radial-gradient(ellipse at 50% 100%, rgba(73,82,96,0.18) 0%, transparent 55%),
        linear-gradient(180deg, #0a0a0c 0%, #08090e 60%, #050609 100%);
}
.fol-grain {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0.06; mix-blend-mode: overlay;
    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.85' numOctaves='2' seed='6'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
}

/* ── Page wordmark in the corner (fine, not a nav bar) ────────── */
.fol-mark {
    position: fixed; top: clamp(1rem, 2vw, 1.6rem); left: clamp(1rem, 2.5vw, 2rem);
    z-index: 50;
    display: inline-flex; align-items: baseline; gap: 0.7rem;
    font-family: var(--blackletter);
    font-size: 1.15rem;
    color: var(--bone-1);
    text-decoration: none;
    letter-spacing: 0.03em;
    opacity: 0.85;
    transition: opacity 0.3s ease;
}
.fol-mark:hover { opacity: 1; }
.fol-mark .arrow {
    font-family: var(--serif-caps);
    font-size: 0.65rem; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--bone-3);
}

.fol-folio-num {
    position: fixed; top: clamp(1.1rem, 2.1vw, 1.7rem); right: clamp(1rem, 2.5vw, 2rem);
    z-index: 50;
    font-family: var(--serif-caps);
    font-size: 0.62rem; letter-spacing: 0.42em;
    color: var(--bone-3); text-transform: uppercase;
}
.fol-folio-num .point { color: var(--gold-2); margin: 0 0.5em; }

/* ── Folio grid: exhibit | broadsheet ─────────────────────────── */
.fol-grid {
    position: relative; z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    min-height: 100vh;
    padding-top: 4.5rem;
}
@media (max-width: 980px) {
    .fol-grid { grid-template-columns: 1fr; padding-top: 4rem; }
}

/* ── LEFT: sticky exhibit panel ───────────────────────────────── */
.fol-exhibit {
    position: sticky; top: 0;
    align-self: start;
    height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 3rem clamp(1.5rem, 4vw, 4rem);
    border-right: 1px solid var(--rule);
    background:
        radial-gradient(ellipse at 50% 30%, rgba(73,82,96,0.10), transparent 60%),
        linear-gradient(180deg, transparent, rgba(17,19,26,0.4));
}
@media (max-width: 980px) {
    .fol-exhibit {
        position: static; height: auto;
        padding: 2.5rem 1.5rem 3.5rem;
        border-right: none;
        border-bottom: 1px solid var(--rule);
    }
}

.fol-exhibit-inner {
    width: 100%; max-width: 460px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 2rem;
}

/* ── Cover (museum mat board feel) ─────────────────────────────── */
.fol-cover {
    position: relative;
    padding: 14px;
    background:
        linear-gradient(180deg, var(--ink-bg-3), var(--ink-bg-2));
    box-shadow:
        0 0 0 1px var(--gold-3),
        0 0 0 8px var(--ink-bg-1),
        0 0 0 9px var(--rule),
        0 40px 80px rgba(0,0,0,0.6),
        0 0 80px rgba(201,208,216,0.04);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.fol-cover:hover { transform: translateY(-3px); }
.fol-cover .plate {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ink-bg-1);
    overflow: hidden;
}
.fol-cover img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.fol-cover .plate::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%, transparent 65%, rgba(0,0,0,0.5));
}

/* ── Cover lightbox (CSS-only, :target trick) ─────────────────────────── */
/* The cover plate IS the click target; fol-cover-link wraps the figure. */
.fol-cover-link { display: block; cursor: zoom-in; }
.fol-cover-link .plate::before {
    content: '⤢'; position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 2;
    font-family: var(--serif-display);
    color: var(--bone-1);
    width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 9, 14, 0.6);
    border: 1px solid var(--rule);
    opacity: 0; transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.fol-cover-link:hover .plate::before { opacity: 1; transform: translateY(0); color: var(--gold-1); border-color: var(--gold-2); }
@media (hover: none) { .fol-cover-link .plate::before { opacity: 0.85; transform: none; } }

.fol-lightbox {
    display: none;
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(4, 4, 6, 0.96);
    align-items: center; justify-content: center;
    padding: 2.5rem;
    text-decoration: none;
    cursor: zoom-out;
}
.fol-lightbox:target { display: flex; animation: fol-lightbox-in 0.25s ease both; }
@keyframes fol-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.fol-lightbox img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    box-shadow: 0 0 0 1px var(--gold-3), 0 0 0 9px var(--ink-bg-1),
                0 0 0 10px var(--rule), 0 30px 80px rgba(0,0,0,0.7);
}
.fol-lightbox .close {
    position: absolute; top: 1.5rem; right: 1.75rem;
    font-family: var(--serif-display);
    font-size: 2.4rem; line-height: 1;
    color: var(--bone-2);
    width: 2.4rem; height: 2.4rem;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule);
    background: rgba(17, 19, 26, 0.7);
    transition: color 0.2s, border-color 0.2s;
}
.fol-lightbox:hover .close { color: var(--gold-1); border-color: var(--gold-2); }

/* ── Identity block ────────────────────────────────────────────── */
.fol-id {
    text-align: left;
    padding-left: 0.2rem;
}
.fol-id .eyebrow {
    font-family: var(--serif-caps);
    font-size: 0.65rem; letter-spacing: 0.45em;
    color: var(--gold-2); text-transform: uppercase;
    display: block; margin-bottom: 0.9rem;
}
.fol-id h1 {
    font-family: var(--serif-display);
    font-style: italic; font-weight: 500;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    line-height: 1.05;
    color: var(--bone-1);
    letter-spacing: 0.005em;
}
.fol-id .subtitle {
    font-family: var(--serif-display);
    font-style: italic; font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    color: var(--bone-2);
    margin-top: 0.4rem;
}
.fol-id .meta {
    margin-top: 1.1rem;
    font-family: var(--serif-caps);
    font-size: 0.62rem; letter-spacing: 0.32em;
    color: var(--bone-3); text-transform: uppercase;
    display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem;
    align-items: center;
}
.fol-id .meta .point { color: var(--gold-3); }

/* ── Audio: minimal silver player ──────────────────────────────── */
.fol-player {
    display: grid;
    grid-template-columns: auto auto auto 1fr;   /* prev | play | next | channel */
    gap: 0.55rem;
    align-items: center;
    padding: 1.1rem 1.2rem;
    background: rgba(17,19,26,0.55);
    border: 1px solid var(--rule-cold);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
}
.fol-player .channel { padding-left: 0.45rem; }

/* ── Skip-back / skip-forward — flank the play button ──────────── */
.fol-skip {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--rule-cold);
    background: rgba(17,19,26,0.4);
    color: var(--bone-2);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
}
.fol-skip:hover {
    border-color: var(--gold-2);
    color: var(--gold-1);
    box-shadow: inset 0 0 0 1px var(--gold-3), 0 0 14px rgba(201,179,128,0.12);
}
.fol-skip.disabled {
    opacity: 0.22;
    pointer-events: none;
    cursor: default;
}
.fol-skip svg { width: 12px; height: 12px; fill: currentColor; display: block; }
.fol-play {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: 1px solid var(--silver-2);
    background: linear-gradient(180deg, var(--ink-bg-3), var(--ink-bg-2));
    color: var(--bone-1);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: inset 0 0 0 1px rgba(201,208,216,0.06);
}
.fol-play:hover {
    border-color: var(--gold-2);
    color: var(--gold-1);
    box-shadow: inset 0 0 0 1px var(--gold-3), 0 0 22px rgba(201,179,128,0.18);
}
.fol-play svg { width: 14px; height: 14px; fill: currentColor; }
.fol-play .pause { display: none; }
.fol-play.playing .play  { display: none; }
.fol-play.playing .pause { display: inline-block; }

/* Autoplay-blocked nudge — gently pulses the play button so it reads
   as the next thing to do. Stops as soon as the user interacts. */
@keyframes fol-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(201,208,216,0.06), 0 0 0 0 rgba(201,179,128,0.0); }
    50%      { box-shadow: inset 0 0 0 1px var(--gold-3), 0 0 24px rgba(201,179,128,0.35); }
}
.fol-play.awaiting {
    animation: fol-pulse 2.4s ease-in-out infinite;
    border-color: var(--gold-2);
    color: var(--gold-1);
}

.fol-player .channel {
    display: flex; flex-direction: column; gap: 0.5rem; min-width: 0;
}
.fol-player .label {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.6rem;
}
.fol-player .name {
    font-family: var(--serif-caps);
    font-size: 0.62rem; letter-spacing: 0.32em;
    color: var(--bone-2); text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fol-player .time {
    font-family: var(--serif-caps);
    font-size: 0.62rem; letter-spacing: 0.18em;
    color: var(--bone-4); white-space: nowrap;
}
.fol-player .progress {
    position: relative; height: 2px;
    background: rgba(73,82,96,0.35);
    cursor: pointer;
}
.fol-player .fill {
    position: absolute; left: 0; top: -1px; bottom: -1px;
    width: 0%;
    background: linear-gradient(90deg, var(--silver-2), var(--gold-2));
    transition: width 0.1s linear;
}
.fol-player .fill::after {
    content: ''; position: absolute; right: -3px; top: 50%;
    transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold-1);
    box-shadow: 0 0 10px rgba(201,179,128,0.65);
}

/* ── "Own the tale" — gilded download CTA ──────────────────────── */
.fol-own {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(180deg, rgba(24,26,35,0.85), rgba(17,19,26,0.85));
    border: 1px solid var(--gold-3);
    text-decoration: none;
    color: var(--bone-1);
    transition: border-color 0.25s, background 0.4s, transform 0.25s, box-shadow 0.25s;
    cursor: pointer;
}

/* Lossless Edition stub — small dimmer line below the free-MP3 box that
   nods at the paid/gated 96 kHz FLAC channel. Not a button (no link
   destination yet), just a typographic gesture. */
.fol-lossless-stub {
    margin-top: 0.7rem;
    padding: 0.5rem 0.4rem 0 0.4rem;
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--bone-3);
    text-align: left;
    line-height: 1.55;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}
.fol-lossless-stub .fol-lossless-icon {
    color: var(--gold-2);
    font-style: normal;
    flex-shrink: 0;
}
.fol-lossless-stub strong {
    color: var(--bone-1);
    font-weight: 600;
    font-style: normal;
}
.fol-lossless-stub a {
    color: var(--gold-1);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.fol-own:hover {
    border-color: var(--gold-1);
    background: linear-gradient(180deg, rgba(40,32,18,0.7), rgba(26,21,12,0.85));
    transform: translateY(-1px);
    box-shadow: 0 0 28px rgba(201,179,128,0.18);
}
.fol-own .own-text { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.fol-own .own-eyebrow {
    font-family: var(--serif-caps);
    font-size: 0.58rem; letter-spacing: 0.42em;
    color: var(--gold-2); text-transform: uppercase;
}
.fol-own .own-title {
    font-family: var(--serif-display);
    font-style: italic; font-size: 1.15rem;
    color: var(--bone-1); line-height: 1.1;
    transition: color 0.25s;
}
.fol-own:hover .own-title { color: var(--gold-1); }
.fol-own .own-meta {
    font-family: var(--serif-caps);
    font-size: 0.56rem; letter-spacing: 0.32em;
    color: var(--bone-3); text-transform: uppercase;
    margin-top: 0.2rem;
}
/* Icon pair on the right — download (action) + forward (spread metaphor) */
.fol-own .own-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}
.fol-own .own-icon {
    width: 26px; height: 26px;
    color: var(--gold-2);
    transition: color 0.25s, transform 0.3s;
    display: block;
}
.fol-own:hover .own-icon          { color: var(--gold-1); transform: translateY(2px); }
.fol-own:hover .own-icon-forward  { color: var(--gold-1); transform: translateX(3px) translateY(-1px); }
/* Hairline between the two — a tiny ornamental rule, like a fold-mark */
.fol-own .own-icons::before {
    content: '';
    width: 1px; height: 18px;
    background: linear-gradient(180deg, transparent, var(--gold-3), transparent);
    order: 0;
    align-self: center;
    /* sits between the two icons via flex order: icon[1], rule, icon[2] */
}
.fol-own .own-icon { order: -1; }
.fol-own .own-icon-forward { order: 1; }

/* ── Streaming row — just hairlines ────────────────────────────── */
.fol-platforms {
    display: flex; flex-wrap: wrap; gap: 0;
    border: 1px solid var(--rule);
}
.fol-platforms a {
    flex: 1 1 0; min-width: 90px;
    padding: 0.85rem 0.6rem;
    text-align: center;
    font-family: var(--serif-caps);
    font-size: 0.62rem; letter-spacing: 0.3em;
    color: var(--bone-2); text-transform: uppercase;
    border-right: 1px solid var(--rule);
    background: rgba(17,19,26,0.4);
    transition: all 0.2s ease;
    text-decoration: none;
}
.fol-platforms a:last-child { border-right: none; }
.fol-platforms a:hover {
    background: rgba(201,179,128,0.06);
    color: var(--gold-1);
}
.fol-platforms a[data-pending="true"] {
    opacity: 0.35;
    pointer-events: none;
}

/* ── RIGHT: scrolling broadsheet ──────────────────────────────── */
.fol-broadsheet {
    padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 5vw, 5rem);
    max-width: 720px;
}
@media (max-width: 980px) {
    .fol-broadsheet { padding: 3rem 1.5rem; max-width: none; }
}

.fol-broadsheet section + section { margin-top: clamp(3rem, 6vh, 5rem); }

/* Section eyebrow */
.fol-eyebrow {
    font-family: var(--serif-caps);
    font-size: 0.62rem; letter-spacing: 0.45em;
    color: var(--gold-2); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 0.9rem;
    margin-bottom: 1.4rem;
}
.fol-eyebrow .ornament {
    display: inline-block; width: 18px; height: 1px;
    background: var(--gold-3);
}

/* ── Brand head (only place the blackletter band name appears) ── */
.fol-brand {
    font-family: var(--blackletter);
    font-size: clamp(2.4rem, 6vw, 4rem);
    color: var(--bone-1);
    line-height: 1;
    letter-spacing: 0.015em;
    text-shadow: 0 0 30px rgba(201,208,216,0.10);
}
.fol-brand .gilt {
    color: var(--gold-1);
    text-shadow: 0 0 14px rgba(212, 190, 140, 0.35);
}
.fol-tagline {
    margin-top: 1rem;
    font-family: var(--serif-display);
    font-style: italic;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    color: var(--bone-3);
    max-width: 32em;
}

/* ── Faust quotation ──────────────────────────────────────────── */
.fol-quote {
    position: relative;
    padding: 2.6rem 0 2.4rem;
    margin: 0;
}
.fol-quote::before,
.fol-quote::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold-3) 30%, var(--gold-3) 70%, transparent 100%);
}
.fol-quote::before { top: 0; }
.fol-quote::after  { bottom: 0; }
.fol-quote .open {
    position: absolute; top: -0.4rem; left: 50%; transform: translateX(-50%);
    background: var(--ink-bg-1); padding: 0 0.8rem;
    color: var(--gold-2); font-size: 0.8rem; letter-spacing: 0.4em;
}
.fol-quote blockquote {
    font-family: var(--blackletter);
    font-size: clamp(1.35rem, 2.6vw, 1.85rem);
    color: var(--bone-1);
    line-height: 1.55;
    text-align: center;
}
.fol-quote cite {
    display: block;
    margin-top: 1rem;
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--bone-3);
    text-align: center;
    font-style: italic;
}

/* ── Lore prose with drop cap ─────────────────────────────────── */
.fol-lore p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--bone-2);
    margin-bottom: 1.4rem;
    text-align: justify;
    hyphens: auto;
}
.fol-lore p:first-of-type::first-letter {
    font-family: var(--blackletter);
    font-size: 4rem;
    float: left;
    line-height: 0.85;
    margin-right: 0.4rem;
    margin-top: 0.15rem;
    color: var(--gold-1);
}
.fol-lore em {
    font-style: italic;
    color: var(--bone-1);
}

/* ── Lyrics: two columns DE | EN ──────────────────────────────── */
.fol-lyrics-grid {
    display: grid; grid-template-columns: 1fr 1px 1fr;
    gap: 2.5rem;
    margin-top: 2rem;
}
@media (max-width: 720px) {
    .fol-lyrics-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .fol-lyrics-grid .divider { display: none; }
}
.fol-lyrics-grid .divider {
    background: linear-gradient(180deg, transparent 0%, var(--gold-3) 30%, var(--gold-3) 70%, transparent 100%);
}
/* Single-column variant (when only one language is present) */
.fol-lyrics-single {
    max-width: 38em; margin: 2rem auto 0;
}
.fol-lyrics-col h4 {
    font-family: var(--serif-caps);
    font-size: 0.62rem; letter-spacing: 0.4em;
    color: var(--bone-3); text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.7rem;
    margin-bottom: 1.4rem;
    font-weight: 500;
}
.fol-lyrics-col {
    font-family: var(--serif-body);
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--bone-2);
}
.fol-lyrics-col .stanza {
    display: block;
    font-family: var(--serif-caps);
    font-size: 0.6rem; letter-spacing: 0.3em;
    color: var(--gold-3); text-transform: uppercase;
    margin: 1.4rem 0 0.4rem;
}
.fol-lyrics-col .stanza:first-of-type { margin-top: 0; }
.fol-lyrics-col .refrain {
    color: var(--bone-1);
    font-style: italic;
}
/* Server-side lyrics renderer (TaleDetailBean#getLyricsHtml) emits these: */
.fol-lyrics-col .lyrics-section {
    display: block;
    font-family: var(--serif-caps);
    font-size: 0.6rem; letter-spacing: 0.3em;
    color: var(--gold-3); text-transform: uppercase;
    margin: 1.4rem 0 0.4rem;
    text-align: left; border: 0; padding: 0; font-weight: 500;
}
.fol-lyrics-col .lyrics-section:first-of-type { margin-top: 0; }
.fol-lyrics-col .lyrics-stagedir {
    font-family: var(--serif-display); font-style: italic;
    color: var(--bone-3); font-size: 0.95rem;
    margin: 0.4rem 0;
}
.fol-lyrics-col .lyrics-speaker {
    display: block;
    font-family: var(--serif-caps);
    font-size: 0.58rem; letter-spacing: 0.3em;
    color: var(--gold-2); text-transform: uppercase;
    margin: 0.7rem 0 0.2rem;
}
.fol-lyrics-col p { margin-bottom: 0.9rem; }
.fol-lyrics-note {
    margin-top: 1.6rem;
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.86rem;
    color: var(--bone-4);
    text-align: center;
}

/* ── Credits register ─────────────────────────────────────────── */
.fol-credits {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 0.9rem 2rem;
    font-size: 0.95rem;
}
.fol-credits dt {
    font-family: var(--serif-caps);
    font-size: 0.62rem; letter-spacing: 0.3em;
    color: var(--bone-3); text-transform: uppercase;
    align-self: center;
}
.fol-credits dd {
    font-family: var(--serif-display);
    font-style: italic;
    color: var(--bone-1);
}
.fol-disclosure {
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--rule);
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.88rem;
    color: var(--bone-3);
    line-height: 1.7;
}

/* ── Foot ─────────────────────────────────────────────────────── */
.fol-foot {
    position: relative; z-index: 3;
    text-align: center;
    padding: 3rem 1.5rem 2rem;
    border-top: 1px solid var(--rule);
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--bone-4);
    background: linear-gradient(180deg, transparent, rgba(17,19,26,0.6));
}
.fol-foot a { color: var(--bone-3); }
.fol-foot a:hover { color: var(--gold-1); }
.fol-foot .motto {
    display: block;
    margin-top: 0.9rem;
    font-family: var(--serif-caps);
    font-size: 0.6rem; letter-spacing: 0.45em;
    color: var(--gold-3); text-transform: uppercase;
    font-style: normal;
}
.fol-foot .star { color: var(--gold-3); font-size: 0.75rem; letter-spacing: 0.4em; margin-bottom: 0.5rem; }

.fol-cc-row {
    margin-top: 1.4rem;
    display: inline-flex; gap: 0.3rem;
}
.fol-attrib {
    margin-top: 0.9rem;
    font-family: var(--serif-caps);
    font-size: 0.58rem; letter-spacing: 0.32em;
    color: var(--bone-4); text-transform: uppercase;
}
.fol-attrib a { color: var(--bone-3); text-decoration: none; }
.fol-attrib a:hover { color: var(--gold-1); }
.fol-attrib .point { color: var(--gold-4); margin: 0 0.4em; }
.fol-cc-row .badge {
    font-family: var(--serif-caps); font-size: 0.6rem; letter-spacing: 0.28em;
    color: var(--bone-3); text-transform: uppercase;
    padding: 0.32rem 0.55rem; border: 1px solid var(--rule);
    background: rgba(17,19,26,0.4);
}

/* ── Reveal on scroll ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.85s ease, transform 0.85s ease; }
    .reveal.in { opacity: 1; transform: none; }
}

/* ── Pjax loading state (subtle — just a thin gold progress hairline) ── */
body.bm-pjax-loading::before {
    content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px;
    z-index: 999;
    background: linear-gradient(90deg, transparent 0%, var(--gold-1) 50%, transparent 100%);
    animation: bm-pjax-progress 1.2s linear infinite;
}
@keyframes bm-pjax-progress {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ── Tales index — centered single-column album page ─────────────────── */
.fol-index {
    position: relative; z-index: 3;
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(0.5rem, 1.5vw, 1.25rem) clamp(1.5rem, 4vw, 3rem) clamp(3rem, 5vw, 4rem);
}
.fol-index section + section { margin-top: clamp(3rem, 6vh, 5rem); }

/* Title page (album cover hero + identity, centered) */
.fol-index-title {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: clamp(1.8rem, 4vw, 3.5rem);
    align-items: center;
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 720px) {
    .fol-index-title {
        grid-template-columns: 1fr;
        text-align: center;
        max-width: 420px;
        margin-left: auto; margin-right: auto;
    }
}
.fol-index-title .fol-cover { max-width: 320px; margin: 0 auto; width: 100%; }

/* Re-use .fol-id but center-align variant for the index hero */
.fol-id-center { text-align: left; }
@media (max-width: 720px) {
    .fol-id-center { text-align: center; }
    .fol-id-center .meta { justify-content: center; }
}
.fol-index-lede {
    grid-column: 1 / -1;
    margin-top: clamp(1.5rem, 3vw, 2.4rem);
    font-family: var(--serif-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: var(--bone-2);
    text-align: center;
    max-width: 36em;
    margin-left: auto; margin-right: auto;
    line-height: 1.7;
}
.fol-index-lede em { color: var(--bone-1); }
/* Sibling tagline (EN/DE pair) — same size + weight as the first one;
   a thin gold rule sits between them so they read as a parallel
   translation, not a duplicate. Works regardless of which language
   comes first. */
.fol-index-lede + .fol-index-lede {
    margin-top: 0.7rem;
    position: relative;
}
.fol-index-lede + .fol-index-lede::before {
    content: '';
    display: block;
    width: 3.5rem;
    height: 1px;
    background: var(--gold-3);
    opacity: 0.55;
    margin: 0 auto 0.8rem auto;
}

.fol-eyebrow-center {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

/* ── Tale gallery — responsive grid of tiles with cover thumbnails ─── */
.fol-gallery {
    display: grid;
    gap: clamp(1.5rem, 2.5vw, 2.2rem);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.fol-tale-card {
    display: flex; flex-direction: column;
    text-decoration: none; color: inherit;
    background: linear-gradient(180deg, rgba(24,26,35,0.55), rgba(17,19,26,0.55));
    border: 1px solid var(--rule);
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    overflow: hidden;
}
.fol-tale-card:hover {
    border-color: var(--gold-2);
    transform: translateY(-3px);
    box-shadow: 0 18px 36px rgba(0,0,0,0.45), 0 0 0 1px var(--gold-3);
}
.fol-tale-cover {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ink-bg-1);
    overflow: hidden;
}
.fol-tale-cover img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.4s ease;
    filter: brightness(0.92);
}
.fol-tale-card:hover .fol-tale-cover img {
    transform: scale(1.04);
    filter: brightness(1);
}
.fol-tale-cover::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%);
}
.fol-tale-cover-empty {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, var(--ink-bg-3), var(--ink-bg-2));
    color: var(--gold-3); font-size: 2rem;
}
.fol-tale-meta {
    padding: 1rem 1.1rem 1.2rem;
    display: flex; flex-direction: column; gap: 0.35rem;
}
.fol-tale-meta .num {
    font-family: var(--serif-caps);
    font-size: 0.6rem; letter-spacing: 0.42em;
    color: var(--gold-2); text-transform: uppercase;
}
.fol-tale-meta .ttl {
    font-family: var(--serif-display);
    font-style: italic; font-weight: 500;
    font-size: 1.25rem;
    color: var(--bone-1);
    line-height: 1.2;
}
.fol-tale-card:hover .fol-tale-meta .ttl { color: var(--gold-1); }
.fol-tale-meta .sub {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--bone-3);
    line-height: 1.4;
}

/* ── Upcoming / "Coming Soon" card (cover staged, tales not yet published) ── */
.fol-tale-card-upcoming {
    cursor: default;
    /* Same chrome as a published card but no hover-lift — there is nothing to click. */
}
.fol-tale-card-upcoming:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--rule);
}
.fol-tale-card-upcoming .fol-tale-cover img {
    filter: brightness(0.55) saturate(0.7);
}
.fol-tale-card-upcoming:hover .fol-tale-cover img {
    transform: none;
    filter: brightness(0.55) saturate(0.7);
}
.fol-tale-card-upcoming .fol-tale-meta .ttl { color: var(--bone-2); }
.fol-tale-card-upcoming:hover .fol-tale-meta .ttl { color: var(--bone-2); }

.fol-coming-badge {
    position: absolute;
    top: 0.9rem; left: 0.9rem;
    padding: 0.3rem 0.7rem;
    background: rgba(10, 10, 12, 0.78);
    border: 1px solid var(--gold-3);
    color: var(--gold-1);
    font-family: var(--serif-caps);
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    z-index: 2;
    backdrop-filter: blur(2px);
}

/* ── Long-form prose pages (mission / distribution / collaborate /
       charter / ai-disclosure) ──────────────────────────────────────── */
.fol-prose { max-width: 720px; margin: 0 auto; padding: 4rem 1.5rem 2rem; }
.fol-prose .fol-eyebrow {
    font-family: var(--serif-caps);
    font-size: 0.66rem; letter-spacing: 0.45em;
    color: var(--gold-2); text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 0.9rem;
    margin-bottom: 1.4rem;
}
.fol-prose .fol-eyebrow .ornament { width: 18px; height: 1px; background: var(--gold-3); }
.fol-prose h1 {
    font-family: var(--serif-display);
    font-style: italic; font-weight: 500;
    font-size: clamp(2rem, 5vw, 3.2rem);
    color: var(--bone-1); line-height: 1.1;
    letter-spacing: 0.005em;
    margin-bottom: 0.6rem;
}
.fol-prose .lead {
    font-family: var(--serif-display);
    font-style: italic; font-weight: 400;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    color: var(--bone-2); margin-bottom: 2.5rem;
    max-width: 36em;
}
.fol-prose section { margin-top: 3rem; }
.fol-prose h2 {
    font-family: var(--serif-caps);
    font-size: 0.7rem; letter-spacing: 0.42em;
    color: var(--gold-2); text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1.3rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rule);
}
.fol-prose h3 {
    font-family: var(--serif-caps);
    font-size: 0.62rem; letter-spacing: 0.38em;
    color: var(--gold-3); text-transform: uppercase;
    font-weight: 500;
    margin: 1.5rem 0 0.6rem;
}
.fol-prose p {
    font-family: var(--serif-body);
    font-size: 1.08rem; line-height: 1.85;
    color: var(--bone-2);
    margin-bottom: 1.4rem;
    text-align: justify;
    hyphens: auto;
}
.fol-prose section:first-of-type p:first-of-type::first-letter {
    font-family: var(--blackletter);
    font-size: 4rem; float: left;
    line-height: 0.85; margin-right: 0.4rem; margin-top: 0.15rem;
    color: var(--gold-1);
}
.fol-prose em { color: var(--bone-1); font-style: italic; }
.fol-prose strong { color: var(--bone-1); font-weight: 500; }
.fol-prose ul, .fol-prose ol {
    font-family: var(--serif-body);
    font-size: 1.05rem; line-height: 1.8;
    color: var(--bone-2);
    margin: 0 0 1.4rem 1.5rem;
}
.fol-prose ul li, .fol-prose ol li { margin-bottom: 0.55rem; }
.fol-prose ul { list-style: none; }
.fol-prose ul li::before {
    content: '✦';
    color: var(--gold-3); font-size: 0.7em;
    display: inline-block; width: 1.3em; margin-left: -1.3em;
}
.fol-prose .pillars {
    display: grid; gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .fol-prose .pillars { grid-template-columns: 1fr 1fr; }
}
.fol-prose .pillar {
    border: 1px solid var(--rule);
    background: rgba(17, 19, 26, 0.45);
    padding: 1.4rem 1.4rem 1.5rem;
}
.fol-prose .pillar h3 {
    font-family: var(--serif-caps);
    font-size: 0.66rem; letter-spacing: 0.38em;
    color: var(--gold-2); text-transform: uppercase;
    font-weight: 500; margin: 0 0 0.7rem; border: 0; padding: 0;
}
.fol-prose .pillar p {
    margin: 0; font-size: 1rem;
    line-height: 1.75; color: var(--bone-2);
    text-align: left; hyphens: auto;
}
.fol-prose blockquote.creed {
    margin: 3rem auto;
    padding: 2.2rem 1.4rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    text-align: center;
    font-family: var(--blackletter);
    font-size: clamp(1.3rem, 2.6vw, 1.85rem);
    color: var(--bone-1);
    line-height: 1.55;
    position: relative;
    text-shadow: 0 0 14px rgba(201,208,216,0.10);
}
.fol-prose blockquote.creed::before,
.fol-prose blockquote.creed::after {
    content: '✦';
    position: absolute; left: 50%; transform: translateX(-50%);
    color: var(--gold-2); font-size: 0.85rem;
    background: var(--ink-bg-1); padding: 0 0.7rem;
}
.fol-prose blockquote.creed::before { top: -0.55rem; }
.fol-prose blockquote.creed::after  { bottom: -0.55rem; }

/* Table of contents (used on /charter.xhtml) */
.fol-prose .toc {
    margin: 2.5rem 0 3rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--rule);
    background: rgba(17,19,26,0.4);
}
.fol-prose .toc-title {
    font-family: var(--serif-caps);
    font-size: 0.6rem; letter-spacing: 0.42em;
    color: var(--gold-2); text-transform: uppercase;
    margin-bottom: 0.7rem;
}
.fol-prose .toc ol {
    list-style: none; margin: 0; padding: 0;
    columns: 2; column-gap: 1.4rem;
}
@media (max-width: 600px) {
    .fol-prose .toc ol { columns: 1; }
}
.fol-prose .toc ol li {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.92rem;
    margin: 0 0 0.4rem; padding: 0;
    break-inside: avoid;
}
.fol-prose .toc ol li::before { content: none; }
.fol-prose .toc ol li a {
    color: var(--bone-2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.fol-prose .toc ol li a:hover { color: var(--gold-1); border-bottom-color: var(--gold-3); }

/* Code blocks for copy-pasteable text (used on /ai-disclosure.xhtml) */
.fol-prose pre {
    background: rgba(8,9,14,0.7);
    border: 1px solid var(--rule);
    padding: 1rem 1.2rem;
    margin: 1.4rem 0;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--bone-2);
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Cross-references / "See also" footer block */
.fol-cross {
    margin-top: 4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--rule);
    text-align: center;
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.95rem; color: var(--bone-3);
    line-height: 1.7;
}
.fol-cross a {
    color: var(--gold-1); text-decoration: none;
    border-bottom: 1px solid var(--gold-3); padding-bottom: 1px;
}
.fol-cross a:hover { color: var(--bone-1); border-color: var(--bone-1); }

/* ── Top navigation — shared by every page (folio + layout.xhtml) ─── */
.fol-topnav {
    position: relative; z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.7rem 1.5rem;
    padding: 0.85rem clamp(1.25rem, 3vw, 2.5rem);
    background: linear-gradient(180deg, rgba(13,14,18,0.78) 0%, rgba(8,9,14,0.6) 100%);
    border-bottom: 1px solid var(--rule);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.fol-brand-link {
    font-family: var(--blackletter);
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    color: var(--bone-1);
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: opacity 0.25s;
    flex-shrink: 0;
}
.fol-brand-link:hover { opacity: 0.85; }
.fol-brand-link .b-letter {
    color: var(--gold-1);
    text-shadow: 0 0 12px rgba(212, 190, 140, 0.4);
}
.fol-topnav-links {
    display: flex; flex-wrap: wrap;
    gap: 0.45rem 1.15rem;
    align-items: center;
}
.fol-topnav-links a {
    font-family: var(--serif-caps);
    font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase;
    color: var(--bone-2);
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.fol-topnav-links a:hover { color: var(--gold-1); }
.fol-topnav-links a.active {
    color: var(--gold-1);
    border-bottom-color: var(--gold-3);
}
@media (max-width: 720px) {
    .fol-topnav {
        flex-direction: column;
        gap: 0.6rem;
        padding: 0.85rem 1rem;
    }
    .fol-topnav-links {
        justify-content: center;
        gap: 0.45rem 0.8rem;
    }
    .fol-topnav-links a { font-size: 0.6rem; letter-spacing: 0.28em; }
}

/* ── Doorways — two big folio gates linking to the listening surface ─ */
.fol-doorways {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.4rem);
    grid-template-columns: 1fr 1fr;
    margin-top: 1.5rem;
}
@media (max-width: 720px) {
    .fol-doorways { grid-template-columns: 1fr; }
}
.fol-doorway {
    position: relative;
    display: block;
    padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.2rem);
    background: linear-gradient(180deg, rgba(24,26,35,0.65), rgba(17,19,26,0.65));
    border: 1px solid var(--gold-3);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color 0.25s, background 0.4s, transform 0.25s, box-shadow 0.25s;
}
.fol-doorway:hover {
    border-color: var(--gold-1);
    background: linear-gradient(180deg, rgba(40,32,18,0.55), rgba(26,21,12,0.85));
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(0,0,0,0.45);
}
.fol-doorway::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-1), transparent);
    opacity: 0.55;
}
.fol-doorway::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-3), transparent);
    opacity: 0.55;
}
.fol-doorway .dw-eyebrow {
    font-family: var(--serif-caps);
    font-size: 0.6rem; letter-spacing: 0.42em;
    color: var(--gold-2); text-transform: uppercase;
}
.fol-doorway .dw-title {
    font-family: var(--blackletter);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--bone-1);
    margin: 0.6rem 0 0.2rem;
    line-height: 1.05;
    transition: color 0.25s;
}
.fol-doorway:hover .dw-title { color: var(--gold-1); }
.fol-doorway .dw-sub {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--bone-2);
}
.fol-doorway .dw-meta {
    margin-top: 0.9rem;
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.86rem;
    color: var(--bone-3);
    line-height: 1.5;
}
.fol-doorway .dw-arrow {
    position: absolute; right: 1.2rem; bottom: 1.2rem;
    font-family: var(--serif-display);
    font-size: 1.6rem;
    color: var(--gold-2);
    transition: color 0.25s, transform 0.25s;
}
.fol-doorway:hover .dw-arrow { color: var(--gold-1); transform: translateX(4px); }

/* Single grand doorway: 800 px cover on top, parchment title strip beneath */
.fol-doorway-grand {
    max-width: 800px;
    margin: 0.4rem auto 0;
    padding: 0;                              /* base padding overridden — cover bleeds to the frame */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fol-doorway-grand .dw-cover {
    aspect-ratio: 1 / 1;
    background: var(--ink-bg-1);
    overflow: hidden;
}
.fol-doorway-grand .dw-cover img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    /* No per-image hover transform — the whole card reacts as one unit. */
}
.fol-doorway-grand .dw-body {
    padding: 1rem 1.4rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.8rem;
    border-top: 1px solid var(--gold-3);
}
.fol-doorway-grand .dw-title {
    font-family: var(--serif-display);
    font-style: italic; font-weight: 500;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    color: var(--bone-1);
    line-height: 1.1;
    margin: 0;
    transition: color 0.25s;
}
.fol-doorway-grand:hover .dw-title { color: var(--gold-1); }
.fol-doorway-grand .dw-arrow {
    position: static;
    font-family: var(--serif-display);
    font-size: 1.5rem;
    color: var(--gold-2);
    transition: color 0.25s, transform 0.25s;
}
.fol-doorway-grand:hover .dw-arrow { color: var(--gold-1); transform: translateX(4px); }

/* ── Chronik — folio news list ───────────────────────────────────────── */
.fol-chronik {
    max-width: 720px;
    margin: 1.5rem auto 0;
    border-top: 1px solid var(--rule);
}
.fol-chronik-item {
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--rule);
}
.fol-chronik-item .fc-date {
    font-family: var(--serif-caps);
    font-size: 0.6rem; letter-spacing: 0.42em;
    color: var(--gold-2); text-transform: uppercase;
}
.fol-chronik-item .fc-title {
    font-family: var(--serif-display);
    font-style: italic; font-weight: 500;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    margin: 0.4rem 0 0.6rem;
    line-height: 1.25;
}
.fol-chronik-item .fc-title a {
    color: var(--bone-1);
    text-decoration: none;
    transition: color 0.25s;
}
.fol-chronik-item .fc-title a:hover { color: var(--gold-1); }
.fol-chronik-item .fc-lead {
    font-family: var(--serif-body);
    font-size: 1rem; line-height: 1.65;
    color: var(--bone-2);
}

.fol-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    font-family: var(--serif-display);
    font-style: italic;
    color: var(--bone-3);
}

/* Small "→ all entries" footer link below a section */
.fol-ghost-link {
    font-family: var(--serif-caps);
    font-size: 0.66rem; letter-spacing: 0.42em;
    color: var(--gold-2); text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 0.2rem;
    transition: color 0.2s, border-color 0.2s;
}
.fol-ghost-link:hover { color: var(--gold-1); border-bottom-color: var(--gold-3); }

/* ── Newsletter — folio signup form ──────────────────────────────────── */
.fol-newsletter-lede {
    max-width: 38em;
    margin: 1.4rem auto 1.8rem;
    text-align: center;
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--bone-3);
    line-height: 1.7;
}
.fol-newsletter-form {
    max-width: 480px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.6rem;
}
@media (max-width: 480px) {
    .fol-newsletter-form { grid-template-columns: 1fr; }
}
.fol-newsletter-form .fnl-input {
    padding: 0.85rem 1rem;
    background: rgba(17,19,26,0.55);
    border: 1px solid var(--rule-cold);
    color: var(--bone-1);
    font-family: var(--serif-body);
    font-size: 1rem;
    transition: border-color 0.25s;
    outline: none;
}
.fol-newsletter-form .fnl-input::placeholder { color: var(--bone-4); font-style: italic; }
.fol-newsletter-form .fnl-input:focus { border-color: var(--gold-2); }
.fol-newsletter-form .fnl-submit {
    padding: 0.85rem 1.4rem;
    background: linear-gradient(180deg, rgba(24,26,35,0.85), rgba(17,19,26,0.85));
    border: 1px solid var(--gold-3);
    color: var(--bone-1);
    font-family: var(--serif-caps);
    font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.fol-newsletter-form .fnl-submit:hover {
    border-color: var(--gold-1);
    background: linear-gradient(180deg, rgba(40,32,18,0.7), rgba(26,21,12,0.85));
    color: var(--gold-1);
}
.fol-newsletter-done {
    max-width: 38em;
    margin: 0 auto;
    text-align: center;
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--gold-1);
    padding: 1.2rem;
    border: 1px solid var(--gold-3);
    background: rgba(24,26,35,0.5);
}
.fol-messages {
    max-width: 480px;
    margin: 1rem auto 0;
    list-style: none;
    padding: 0;
    text-align: center;
}
.fol-messages li {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.92rem;
    padding: 0.6rem 0.9rem;
    margin-top: 0.4rem;
    border: 1px solid var(--rule);
}
.fol-messages .fnl-error { color: #d8a08c; border-color: rgba(180,90,80,0.45); background: rgba(80,30,30,0.25); }
.fol-messages .fnl-warn  { color: var(--gold-2); border-color: var(--rule-strong); background: rgba(60,50,30,0.2); }
.fol-messages .fnl-info  { color: var(--bone-1); border-color: var(--rule); background: rgba(17,19,26,0.5); }

/* ── "Now Playing" pill (persistent across pjax navigations) ─────────── */
.bm-now-playing {
    position: fixed;
    right: clamp(1rem, 2vw, 1.5rem);
    bottom: clamp(1rem, 2vw, 1.5rem);
    z-index: 200;
    display: inline-flex; align-items: center; gap: 0.85rem;
    padding: 0.6rem 0.6rem 0.6rem 0.8rem;
    background: linear-gradient(180deg, rgba(24,26,35,0.96), rgba(17,19,26,0.96));
    border: 1px solid var(--rule-strong);
    box-shadow:
        0 0 0 1px rgba(201,179,128,0.05),
        0 16px 40px rgba(0,0,0,0.55),
        0 2px 8px rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
    color: var(--bone-1);
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.25s;
    max-width: min(380px, 92vw);
    cursor: pointer;
}
.bm-now-playing[hidden] { display: none; }
.bm-now-playing:hover { border-color: var(--gold-2); }
/* When visiting the page that owns the playing tale, the pill shrinks
   to a tiny "still playing here" badge so it doesn't duplicate the exhibit. */
.bm-now-playing.on-self { opacity: 0.55; transform: scale(0.92); }
.bm-now-playing.on-self:hover { opacity: 1; transform: scale(1); }

.bm-now-playing .bmnp-cover {
    width: 44px; height: 44px;
    object-fit: cover; display: block;
    border: 1px solid var(--gold-3);
    background: var(--ink-bg-1);
    flex-shrink: 0;
}
.bm-now-playing .bmnp-meta {
    display: flex; flex-direction: column; min-width: 0;
    gap: 0.15rem;
}
.bm-now-playing .bmnp-eye {
    font-family: var(--serif-caps);
    font-size: 0.54rem; letter-spacing: 0.36em;
    color: var(--gold-2); text-transform: uppercase;
}
.bm-now-playing .bmnp-title {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--bone-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 240px;
}
.bm-now-playing .bmnp-toggle,
.bm-now-playing .bmnp-close {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--silver-2);
    background: linear-gradient(180deg, var(--ink-bg-3), var(--ink-bg-2));
    color: var(--bone-1);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    font-family: var(--serif-display);
    font-size: 1.2rem; line-height: 1;
}
.bm-now-playing .bmnp-toggle:hover,
.bm-now-playing .bmnp-close:hover {
    border-color: var(--gold-2); color: var(--gold-1);
}
.bm-now-playing .bmnp-toggle svg { width: 11px; height: 11px; fill: currentColor; }
.bm-now-playing .bmnp-toggle .pause { display: none; }
.bm-now-playing.playing .bmnp-toggle .play  { display: none; }
.bm-now-playing.playing .bmnp-toggle .pause { display: inline-block; }
.bm-now-playing.playing .bmnp-cover { box-shadow: 0 0 0 1px var(--gold-1), 0 0 14px rgba(201,179,128,0.3); }
.bm-now-playing .bmnp-close { font-family: var(--serif-display); }

/* Mobile: compact form so the pill never sits on top of the cover/content.
   Drops the eyebrow + title text, keeps cover thumb + play/pause + close.
   Shrinks to a tiny corner control instead of a full bar. */
@media (max-width: 720px) {
    .bm-now-playing {
        right: 0.5rem;
        bottom: 0.5rem;
        padding: 0.35rem;
        gap: 0.4rem;
        max-width: none;
    }
    .bm-now-playing .bmnp-meta { display: none; }
    .bm-now-playing .bmnp-cover { width: 34px; height: 34px; }
    .bm-now-playing .bmnp-toggle,
    .bm-now-playing .bmnp-close { width: 28px; height: 28px; font-size: 1rem; }
    .bm-now-playing .bmnp-toggle svg { width: 10px; height: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Liber Signatorum — the Devil's signed ledger
   Used on /fabula/album.xhtml. Each tale row is a signature with a procedural
   SVG flourish (path injected by folio-app-v2.js mountLedger()). The page
   foot carries an intact wax seal for the unsigned twentieth track.
   ═══════════════════════════════════════════════════════════════════════════ */

.fol-ledger-section { max-width: 760px; margin: 0 auto; padding: 0 1.2rem; }

.fol-ledger {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
}

.fol-ledger-row {
    --row: 0;
    opacity: 0;
    transform: translateY(8px);
    animation: ledger-row-in 600ms ease-out forwards;
    animation-delay: calc(var(--row) * 80ms + 200ms);
    border-bottom: 1px solid var(--rule);
}
.fol-ledger-row:last-child { border-bottom: none; }
@keyframes ledger-row-in {
    to { opacity: 1; transform: translateY(0); }
}

.fol-ledger-link {
    display: grid;
    grid-template-columns: 5rem 1fr 140px 24px;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0.5rem;
    color: inherit;
    text-decoration: none;
    position: relative;
    transition: background 220ms ease;
}
.fol-ledger-link::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        transparent 0%, rgba(212, 190, 140, 0.06) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
}
.fol-ledger-link:hover::before { opacity: 1; }

.fol-ledger .num {
    font-family: var(--blackletter);
    font-size: 1.6rem;
    color: var(--gold-1);
    text-align: right;
    line-height: 1;
    letter-spacing: 0.05em;
}
.fol-ledger .ttl {
    font-family: var(--serif-display);
    font-size: 1.15rem;
    color: var(--bone-1);
    line-height: 1.3;
    transition: color 220ms ease;
}
.fol-ledger .ttl .sub {
    color: var(--bone-3);
    font-style: italic;
    font-weight: 400;
}
.fol-ledger-link:hover .ttl { color: var(--gold-1); }

.fol-ledger .flourish {
    width: 140px;
    height: 24px;
    stroke: var(--gold-2);
    stroke-width: 1;
    fill: none;
    stroke-linecap: round;
}
.fol-ledger .flourish path {
    stroke-dasharray: var(--len, 200);
    stroke-dashoffset: var(--len, 200);
    animation: flourish-draw 900ms ease-out forwards;
    animation-delay: calc(var(--row) * 80ms + 500ms);
}
@keyframes flourish-draw {
    to { stroke-dashoffset: 0; }
}

.fol-ledger .sigil {
    font-family: var(--serif-caps);
    color: var(--gold-3);
    font-size: 1rem;
    transition:
        transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
        color 220ms ease;
    display: inline-block;
}
.fol-ledger-link:hover .sigil {
    color: var(--gold-1);
    transform: rotate(15deg);
}

/* ── Void footer — the unsigned twentieth ─────────────────────────────── */
.fol-ledger-void {
    margin: 4rem auto 2rem;
    text-align: center;
    opacity: 0;
    animation: ledger-row-in 800ms ease-out forwards;
    /* Lands after the last flourish finishes
       (~19 rows × 80ms + 500ms intro + 900ms draw ≈ 2.9s). */
    animation-delay: calc(var(--total-rows, 19) * 80ms + 1400ms);
}
.fol-ledger-void .seal {
    width: 88px;
    height: 88px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    transition: transform 4s ease-in-out;
}
.fol-ledger-void.idle .seal {
    animation: seal-pulse 4s ease-in-out infinite;
}
@keyframes seal-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
    }
    50% {
        transform: scale(1.03);
        filter: drop-shadow(0 6px 14px rgba(212, 190, 140, 0.18));
    }
}
.fol-ledger-void figcaption {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.fol-ledger-void .latin {
    font-family: var(--serif-caps);
    font-size: 0.95rem;
    color: var(--bone-2);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-style: italic;
}
.fol-ledger-void .gloss {
    font-family: var(--serif-display);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--bone-4);
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .fol-ledger-link {
        grid-template-columns: 3rem 1fr 24px;
        gap: 0.7rem;
        padding: 0.9rem 0.3rem;
    }
    .fol-ledger .num { font-size: 1.3rem; }
    .fol-ledger .ttl { font-size: 1rem; }
    .fol-ledger .flourish { display: none; }
}

/* ── Reduced motion — drop the staggered intro + flourish draw-in ─────── */
@media (prefers-reduced-motion: reduce) {
    .fol-ledger-row,
    .fol-ledger-void,
    .fol-ledger .flourish path,
    .fol-ledger-void.idle .seal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sternenhimmel — constellation tracklist on /fabula/album.xhtml.
   19 stars (named, linkable) + 1 dark void on a 4:3 night canvas. Each star's
   position comes from a per-slug --x/--y selector below; cluster lines (Kant,
   Zauberlehrling, Peter pair, Oz pair, bonus quartet) are injected by
   folio-app-v2.js mountConstellation() and light up on hover via the
   container's data-active-cluster attribute.
   ═══════════════════════════════════════════════════════════════════════════ */

.fol-constellation-section {
    max-width: 1000px;
    margin: 2rem auto 3rem;
    padding: 0 1rem;
}

.fol-constellation {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background:
        radial-gradient(ellipse at 35% 25%, rgba(73, 82, 96, 0.20) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 70%, rgba(138, 115, 73, 0.10) 0%, transparent 60%),
        linear-gradient(180deg, #050609 0%, #0a0a0c 70%, #08090e 100%);
    border: 1px solid var(--rule);
    overflow: hidden;
    margin-top: 1.5rem;
}

/* Faint scattered background stars — adds atmospheric depth without
   competing with the named stars. Pure CSS radial-gradient micro-dots. */
.fol-constellation::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.40), transparent 60%),
        radial-gradient(1px 1px at 78%  8%, rgba(255,255,255,0.25), transparent 60%),
        radial-gradient(1px 1px at 42% 88%, rgba(255,255,255,0.30), transparent 60%),
        radial-gradient(1px 1px at 92% 65%, rgba(255,255,255,0.35), transparent 60%),
        radial-gradient(1px 1px at 28% 52%, rgba(255,255,255,0.20), transparent 60%),
        radial-gradient(1px 1px at 64% 38%, rgba(255,255,255,0.30), transparent 60%),
        radial-gradient(1px 1px at  6% 72%, rgba(255,255,255,0.20), transparent 60%),
        radial-gradient(1px 1px at 96% 32%, rgba(255,255,255,0.25), transparent 60%);
    opacity: 0.85;
    pointer-events: none;
}

/* SVG cluster-lines layer (between background and stars). */
.fol-constellation-lines {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}
.fol-constellation-lines line {
    stroke: var(--gold-3);
    stroke-width: 0.5;
    stroke-opacity: 0;
    transition: stroke-opacity 320ms ease, stroke 320ms ease;
}
.fol-constellation[data-active-cluster="kant"]           .fol-constellation-lines line[data-cluster="kant"],
.fol-constellation[data-active-cluster="zauberlehrling"] .fol-constellation-lines line[data-cluster="zauberlehrling"],
.fol-constellation[data-active-cluster="peter"]          .fol-constellation-lines line[data-cluster="peter"],
.fol-constellation[data-active-cluster="oz"]             .fol-constellation-lines line[data-cluster="oz"],
.fol-constellation[data-active-cluster="bonus"]          .fol-constellation-lines line[data-cluster="bonus"] {
    stroke-opacity: 0.7;
    stroke: var(--gold-1);
}

/* ── Stars (links) ────────────────────────────────────────────────────── */
.fol-star {
    --x: 50%;
    --y: 50%;
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    color: inherit;
    text-decoration: none;
    opacity: 0;
    animation: star-in 600ms ease-out forwards;
    animation-delay: calc(var(--row, 0) * 90ms + 200ms);
    display: block;
}
@keyframes star-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.fol-star .dot {
    display: block;
    width: 4px; height: 4px;
    background: var(--bone-1);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(236, 226, 205, 0.5);
    transition: width 260ms ease, height 260ms ease,
                background 260ms ease, box-shadow 260ms ease;
}

.fol-star .num {
    position: absolute;
    top: -1.4rem; left: 50%;
    transform: translateX(-50%);
    font-family: var(--serif-caps);
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    color: var(--silver-2);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 240ms ease, opacity 240ms ease;
}

.fol-star .label {
    position: absolute;
    top: 1rem; left: 50%;
    transform: translate(-50%, 0);
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.85rem;
    color: var(--bone-1);
    white-space: nowrap;
    background: rgba(8, 9, 14, 0.85);
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--rule);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
}

.fol-star:hover .dot,
.fol-star:focus-visible .dot {
    width: 7px; height: 7px;
    background: var(--gold-1);
    box-shadow: 0 0 18px var(--gold-1), 0 0 36px rgba(212, 190, 140, 0.4);
}
.fol-star:hover .num,
.fol-star:focus-visible .num { color: var(--gold-1); }
.fol-star:hover .label,
.fol-star:focus-visible .label { opacity: 1; transform: translate(-50%, 4px); }

/* ── The void — a missing star, not a link ────────────────────────────── */
.fol-star-void {
    --x: 52%;
    --y: 56%;
    cursor: default;
}
.fol-star-void .dot {
    width: 18px; height: 18px;
    background: radial-gradient(circle at 50% 50%, #0a0a0c 30%, #050609 60%, #08090e 100%);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.95),
                0 0 0 1px var(--rule),
                0 0 24px rgba(73, 82, 96, 0.15);
    border: none;
}
/* Faint dashed ring around the void. */
.fol-star-void::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 28px; height: 28px;
    transform: translate(-50%, -50%);
    border: 1px dashed var(--rule);
    border-radius: 50%;
    opacity: 0.4;
    pointer-events: none;
}
.fol-star-void .label {
    opacity: 0.5;
    font-style: italic;
    color: var(--silver-2);
    border-color: transparent;
    background: transparent;
    top: 1.6rem;
    transform: translate(-50%, 0);
}
.fol-star-void:hover .label { opacity: 0.85; transform: translate(-50%, 4px); }

/* ── Per-slug positions — hand-placed so cluster members fall near each
       other on the canvas (the void lands near the visual centroid). ───── */
.fol-star[data-slug="am-anfang-war-die-tat"]         { --x: 15%; --y: 12%; }
.fol-star[data-slug="zauberlehrling-1"]              { --x: 26%; --y: 22%; }
.fol-star[data-slug="zauberlehrling-2"]              { --x: 22%; --y: 33%; }
.fol-star[data-slug="zauberlehrling-3"]              { --x: 33%; --y: 28%; }
.fol-star[data-slug="kant-sternenhimmel-und-gesetz"] { --x: 60%; --y: 14%; }
.fol-star[data-slug="kant-ding-an-sich"]             { --x: 72%; --y: 22%; }
.fol-star[data-slug="kant-kategorischer-imperativ"]  { --x: 80%; --y: 12%; }
.fol-star[data-slug="watcher-of-koenigsberg"]        { --x: 88%; --y: 24%; }
.fol-star[data-slug="ceci-tuera-cela"]               { --x: 45%; --y: 42%; }
.fol-star[data-slug="prayer-and-ashes"]              { --x: 12%; --y: 48%; }
.fol-star[data-slug="don-quixote"]                   { --x: 35%; --y: 55%; }
.fol-star[data-slug="muenchhausen"]                  { --x: 62%; --y: 50%; }
.fol-star[data-slug="peter-und-der-wolf-1"]          { --x: 28%; --y: 72%; }
.fol-star[data-slug="peter-und-der-wolf-2"]          { --x: 38%; --y: 78%; }
.fol-star[data-slug="yellow-lies"]                   { --x: 68%; --y: 70%; }
.fol-star[data-slug="yellow-crown-of-smoke"]         { --x: 78%; --y: 78%; }
.fol-star[data-slug="children-of-the-light"]         { --x: 15%; --y: 88%; }
.fol-star[data-slug="fields-without-fences"]         { --x: 50%; --y: 92%; }
.fol-star[data-slug="spiral-the-signal"]             { --x: 85%; --y: 90%; }

/* ── Mobile — portrait aspect, easier tap targets ─────────────────────── */
@media (max-width: 600px) {
    .fol-constellation { aspect-ratio: 3 / 4; }
    .fol-star .dot { width: 6px; height: 6px; }
    .fol-star .num { font-size: 0.55rem; }
    .fol-star .label { font-size: 0.78rem; padding: 0.2rem 0.55rem; }
}

/* ── Reduced motion — skip stagger + line transitions ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fol-star {
        animation: none !important;
        opacity: 1 !important;
        transform: translate(-50%, -50%) !important;
    }
    .fol-constellation-lines line { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Doppelseite (Gatefold sleeve) — vinyl-style two-column tracklist for
   /fabula/album.xhtml. Side A (1–10) on the left, Side B (11–19) on the
   right, with massive blackletter 𝔄 / 𝔅 corner watermarks. Void cartouche
   for the unreleased twentieth spans both columns at the bottom.
   No JS — pure CSS layout + animations.
   ═══════════════════════════════════════════════════════════════════════════ */

.fol-gatefold-section {
    max-width: 1100px;
    margin: 2rem auto 3rem;
    padding: 0 1rem;
}

/* The open book — gatefold framed by a leather binding.
   gap: 0 → the two pages meet at the spine (drawn by ::before).
   Multi-layer box-shadow paints a thin gold rule + dark leather strip +
   gold rule outside the pages, plus a deep ground-shadow beneath. */
.fol-gatefold {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 1.5rem;
    position: relative;
    box-shadow:
        0 0 0 1px var(--gold-4),
        0 0 0 6px #14100a,
        0 0 0 7px var(--gold-4),
        0 40px 60px rgba(0, 0, 0, 0.55),
        0 80px 110px rgba(0, 0, 0, 0.30);
}

/* Spine — vertical gutter between the two pages, falling into the crease. */
.fol-gatefold::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 32px;
    transform: translateX(-50%);
    background: linear-gradient(90deg,
        transparent       0%,
        rgba(0,0,0,0.45) 28%,
        rgba(0,0,0,0.75) 50%,
        rgba(0,0,0,0.45) 72%,
        transparent     100%);
    z-index: 3;
    pointer-events: none;
}

@media (max-width: 720px) {
    .fol-gatefold {
        grid-template-columns: 1fr;
        box-shadow:
            0 0 0 1px var(--gold-4),
            0 0 0 4px #14100a,
            0 0 0 5px var(--gold-4),
            0 18px 36px rgba(0, 0, 0, 0.5);
    }
    .fol-gatefold::before { display: none; }
}

/* ── Pages (sides) — aged dark vellum with corner blackletter watermark ── */
.fol-side {
    position: relative;
    padding: 2.8rem 2rem 2.4rem;
    border: none;
    /* Warm aged-parchment ground — dark but unmistakably PAPER, not metal.
       Per-side rules below add directional radial highlights so each page
       is slightly brighter near the spine (candlelight in the gutter). */
    background:
        radial-gradient(ellipse at 50% 50%, rgba(212, 190, 140, 0.04), transparent 70%),
        linear-gradient(180deg, #251A0F 0%, #2A1F14 50%, #251A0F 100%);
    overflow: hidden;
    min-height: 22rem;
}

/* Page-edge vignette — slight darkening top + bottom. */
.fol-side::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.50) 0%,
        transparent      14%,
        transparent      86%,
        rgba(0,0,0,0.50) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Paper-fibre grain — fractal noise tinted warm, multiplied onto the page. */
.fol-side::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.9' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.8  0 0 0 0 0.62  0 0 0 0.85 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
    opacity: 0.16;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
}

/* Side A: warmer near the spine (right edge), slightly cool at the outer
   (left) edge. Side B mirrors. Reads as a real opened book. */
.fol-side-a {
    background:
        radial-gradient(ellipse at 92% 45%, rgba(212, 190, 140, 0.05), transparent 60%),
        radial-gradient(ellipse at 12% 50%, rgba(0, 0, 0, 0.16), transparent 65%),
        linear-gradient(180deg, #261B10 0%, #2B2015 50%, #251A0F 100%);
}
.fol-side-b {
    background:
        radial-gradient(ellipse at  8% 45%, rgba(212, 190, 140, 0.05), transparent 60%),
        radial-gradient(ellipse at 88% 50%, rgba(0, 0, 0, 0.16), transparent 65%),
        linear-gradient(180deg, #261B10 0%, #2B2015 50%, #251A0F 100%);
}

/* All real content sits above the texture + vignette layers. */
.fol-side > * { position: relative; z-index: 4; }

.fol-side .side-letter {
    position: absolute;
    font-family: var(--blackletter);
    font-size: clamp(7rem, 12vw, 12rem);
    color: var(--gold-2);
    opacity: 0.14;
    line-height: 0.85;
    top: -0.15em;
    pointer-events: none;
    user-select: none;
    /* Subtle drift — gives the watermark a faint sense of breathing */
    animation: side-letter-drift 8s ease-in-out infinite alternate;
    z-index: 3;
}
.fol-side-a .side-letter { left: 0.3rem; }
.fol-side-b .side-letter { right: 0.3rem; }
@keyframes side-letter-drift {
    from { transform: translate(0, 0); }
    to   { transform: translate(0.5px, -0.5px); }
}

/* ── Track lists ─────────────────────────────────────────────────────── */
.fol-side .side-list {
    list-style: none;
    margin: 0; padding: 0;
    position: relative;
    z-index: 1;
}
.fol-side .side-list li { margin: 0; }
.fol-side .side-list a {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.7rem 0.6rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    transition: background 240ms ease, box-shadow 220ms ease;
}
.fol-side .side-list li:last-child a { border-bottom: none; }
.fol-side .side-list a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(212, 190, 140, 0.05) 0%, transparent 75%);
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
}
.fol-side .side-list a:hover::before,
.fol-side .side-list a:focus-visible::before { opacity: 1; }
.fol-side .side-list a:hover,
.fol-side .side-list a:focus-visible {
    box-shadow: inset 3px 0 0 var(--gold-1);
}

.fol-side .num {
    font-family: var(--serif-caps);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gold-2);
    text-align: right;
    letter-spacing: 0.08em;
    line-height: 1;
}
.fol-side .ttl {
    font-family: var(--serif-display);
    font-style: italic;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--bone-1);
    line-height: 1.3;
    transition: color 220ms ease;
}
.fol-side .side-list a:hover .ttl,
.fol-side .side-list a:focus-visible .ttl { color: var(--gold-1); }

/* ── Void cartouche — spans both columns ──────────────────────────────── */
.fol-gatefold-void {
    grid-column: 1 / -1;
    margin: 2.5rem auto 0.5rem;
    display: flex;
    justify-content: center;
}
.fol-gatefold-void .cartouche {
    position: relative;
    padding: 1.6rem 2.4rem;
    max-width: 480px;
    border: 1.5px solid var(--gold-3);
    outline: 1px solid var(--gold-3);
    outline-offset: 6px;
    background: rgba(8, 9, 14, 0.45);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.fol-gatefold-void .num {
    font-family: var(--blackletter);
    font-size: 2rem;
    color: var(--gold-1);
    letter-spacing: 0.1em;
    line-height: 1;
}
.fol-gatefold-void .badge {
    font-family: var(--serif-caps);
    font-size: 0.62rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--bone-3);
}
.fol-gatefold-void .ttl {
    font-family: var(--serif-display);
    font-style: italic;
    color: var(--bone-2);
    font-size: 1rem;
    margin-top: 0.2rem;
}

/* ── Page-load animations — sides slide in, cartouche fades up ────────── */
.fol-side-a {
    opacity: 0;
    transform: translateX(-12px);
    animation: side-a-in 600ms ease-out forwards;
}
.fol-side-b {
    opacity: 0;
    transform: translateX(12px);
    animation: side-b-in 600ms ease-out forwards 80ms;
}
.fol-gatefold-void {
    opacity: 0;
    transform: translateY(8px);
    animation: void-in 700ms ease-out forwards 400ms;
}
@keyframes side-a-in { to { opacity: 1; transform: translateX(0); } }
@keyframes side-b-in { to { opacity: 1; transform: translateX(0); } }
@keyframes void-in   { to { opacity: 1; transform: translateY(0); } }

/* ── Reduced motion — skip slide-ins + watermark drift ────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fol-side-a,
    .fol-side-b,
    .fol-gatefold-void {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .fol-side .side-letter { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Magic layer — extra atmosphere on top of the gatefold "ancient book":
     · candle-glow      slow flickering warm light from the spine
     · runes            faint band of Elder Futhark behind the watermark
     · wax              dried wax-droplet stains, low contrast
     · corner-flourish  small gold fleuron at outer-top corner of each page
     · li.placeholder   muted, unlinked track row (e.g. the 20th, pre-release)
   All five layers are aria-hidden — decorative only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Candle glow — flickering warm radial near the spine ────────────── */
.fol-side .candle-glow {
    position: absolute;
    top: 0; bottom: 0;
    width: 65%;
    pointer-events: none;
    z-index: 0;
    animation: candle-flicker 7s ease-in-out infinite;
    will-change: opacity;
}
.fol-side-a .candle-glow {
    right: 0;
    background: radial-gradient(ellipse at 100% 50%,
                                rgba(232, 178, 110, 0.24),
                                transparent 65%);
}
.fol-side-b .candle-glow {
    left: 0;
    background: radial-gradient(ellipse at 0% 50%,
                                rgba(232, 178, 110, 0.24),
                                transparent 65%);
}
/* Irregular flicker so it never feels like a smooth pulse — wide amplitude
   so the breathing of the candle is clearly visible. */
@keyframes candle-flicker {
    0%   { opacity: 0.80; }
    11%  { opacity: 1.05; }
    18%  { opacity: 0.50; }
    27%  { opacity: 1.10; }
    34%  { opacity: 0.75; }
    46%  { opacity: 0.55; }
    58%  { opacity: 1.05; }
    71%  { opacity: 0.65; }
    84%  { opacity: 1.00; }
    100% { opacity: 0.80; }
}

/* ── Runes — Elder Futhark band behind the watermark ────────────────── */
.fol-side .runes {
    position: absolute;
    bottom: 1.2rem;
    font-family: var(--serif-body);
    font-size: 0.85rem;
    letter-spacing: 0.45em;
    color: var(--gold-2);
    opacity: 0.32;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: clip;
}
.fol-side-a .runes { left: 1.6rem; }
.fol-side-b .runes { right: 1.6rem; text-align: right; left: auto; }

/* ── Wax droplets — dried amber stains, low contrast ─────────────────── */
.fol-side .wax {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
                                rgba(200, 90, 45, 0.70) 0%,
                                rgba(150, 55, 22, 0.85) 50%,
                                rgba(80, 25, 10, 0.90) 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6),
                inset 0 1px 1px rgba(255, 200, 150, 0.25);
    pointer-events: none;
    z-index: 3;
    filter: blur(0.4px);
    opacity: 0.88;
}
/* Hand-placed so droplets sit in empty space (not on titles).
   Side A: small drop near top-outer + larger drop near bottom-spine.
   Side B mirrors. Sizes bumped so they read as droplets, not bug-splats. */
.fol-side-a .wax-1 { top: 12%; right: 5%;  width: 15px; height: 17px; transform: rotate(12deg); }
.fol-side-a .wax-2 { bottom: 8%; right: 16%; width: 22px; height: 27px; transform: rotate(-18deg); }
.fol-side-b .wax-1 { top: 14%; left: 5%;  width: 18px; height: 19px; transform: rotate(-22deg); }
.fol-side-b .wax-2 { bottom: 10%; left: 20%; width: 20px; height: 24px; transform: rotate(28deg); }

/* ── Corner flourish — gold fleuron at outer-top corner of each page ── */
.fol-side .corner-flourish {
    position: absolute;
    top: 0.5rem;
    font-family: var(--serif-display);
    color: var(--gold-1);
    opacity: 0.75;
    font-size: 1.9rem;
    line-height: 1;
    pointer-events: none;
    z-index: 4;
    text-shadow: 0 0 10px rgba(212, 190, 140, 0.45);
}
.fol-side-a .corner-flourish { left: 0.75rem; }
.fol-side-b .corner-flourish { right: 0.75rem; }

/* ── Placeholder track row (e.g. the 20th, pre-release) ─────────────── */
.fol-side .side-list li.placeholder {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.7rem 0.6rem;
    border-bottom: 1px dashed var(--rule);
    cursor: default;
}
.fol-side .side-list li.placeholder:last-child { border-bottom: none; }
.fol-side .side-list li.placeholder .num {
    font-family: var(--serif-caps);
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--gold-3);
    font-style: italic;
    text-align: right;
    letter-spacing: 0.08em;
    line-height: 1;
}
.fol-side .side-list li.placeholder .ttl {
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 1rem;
    color: var(--bone-3);
    line-height: 1.3;
}
.fol-side .side-list li.placeholder em {
    font-style: italic;
    /* `em` already italic; this just makes the nesting explicit */
}

/* ── Reduced motion — silence the candle flicker on top of the
       existing reduced-motion guards above ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fol-side .candle-glow { animation: none !important; opacity: 0.85 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Page-corner navigation — floating prev/next "curled paper corner" buttons
   on /tales/tale.xhtml. Fixed to viewport bottom corners, hover reveals a
   hint card with the destination tale's numeral + title. Clicks share the
   data-tale-flip mechanism that powers the page-turn animation below.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base — positioning by horizontal side (prev = left / next = right).
   Vertical anchor defaults to BOTTOM; the `.top` modifier flips it.
   perspective on the parent gives each .fold a real 3D context so the
   hover curl is foreshortened (true perspective, not orthographic). */
.fol-page-corner {
    position: fixed;
    bottom: 18px;
    width: 42px;
    height: 42px;
    z-index: 40;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    perspective: 160px;
}
.fol-page-corner-prev { left: 18px; }
.fol-page-corner-next { right: 18px; }
.fol-page-corner.top  { top: 18px; bottom: auto; }

/* The visible paper-corner triangle. clip-path carves a right-triangle
   that hugs the viewport corner; gradient gives it a folded look. Each
   quadrant lights from its OPPOSITE corner — bottom-left lit from upper-
   right, top-right lit from lower-left, etc. — so the fold reads as real
   paper catching light from the room's interior in every position. */
.fol-page-corner .fold {
    position: absolute;
    inset: 0;
    box-shadow: -3px -3px 10px rgba(0, 0, 0, 0.5);
    /* Pivot lives ON the hypotenuse (the diagonal passes through 50%,50%
       of the bounding box) so the hypotenuse stays pinned while the
       right-angle corner tip lifts toward the viewer when rotated around
       the hypotenuse axis. */
    transform-origin: 50% 50%;
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 260ms ease;
}

/* Bottom-left (prev, default) */
.fol-page-corner-prev .fold {
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(135deg,
        var(--bone-2) 0%, var(--bone-3) 40%, rgba(0, 0, 0, 0.55) 100%);
}
/* Bottom-right (next, default) */
.fol-page-corner-next .fold {
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
    background: linear-gradient(225deg,
        var(--bone-2) 0%, var(--bone-3) 40%, rgba(0, 0, 0, 0.55) 100%);
}
/* Top-left (prev .top) */
.fol-page-corner-prev.top .fold {
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
    background: linear-gradient(45deg,
        var(--bone-2) 0%, var(--bone-3) 40%, rgba(0, 0, 0, 0.55) 100%);
    box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.5);
}
/* Top-right (next .top) */
.fol-page-corner-next.top .fold {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
    background: linear-gradient(-45deg,
        var(--bone-2) 0%, var(--bone-3) 40%, rgba(0, 0, 0, 0.55) 100%);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}

/* Hover / focus: classic dog-ear peel — the HYPOTENUSE stays pinned to
   the rest of the page (its axis is the fold line); the right-angle
   corner TIP lifts off the page toward the viewer and curls inward.
   The rotation axis IS the hypotenuse (a line passing through the
   element center along the diagonal). Per-corner --peel-axis is set so a
   single positive +55deg rotation always tilts the corner tip toward +Z. */
.fol-page-corner-prev      .fold { --peel-axis:  1,  1, 0; }   /* hyp: TL→BR */
.fol-page-corner-next      .fold { --peel-axis:  1, -1, 0; }   /* hyp: TR→BL */
.fol-page-corner-prev.top  .fold { --peel-axis: -1,  1, 0; }   /* hyp: TR→BL */
.fol-page-corner-next.top  .fold { --peel-axis: -1, -1, 0; }   /* hyp: TL→BR */

.fol-page-corner:hover .fold,
.fol-page-corner:focus-visible .fold {
    transform: rotate3d(var(--peel-axis), 55deg);
    box-shadow: -8px -8px 22px rgba(0, 0, 0, 0.65);
}
/* Top variants get a downward shadow on lift (light from below). */
.fol-page-corner-prev.top:hover .fold,
.fol-page-corner-prev.top:focus-visible .fold {
    box-shadow: -8px 8px 22px rgba(0, 0, 0, 0.65);
}
.fol-page-corner-next.top:hover .fold,
.fol-page-corner-next.top:focus-visible .fold {
    box-shadow: 8px 8px 22px rgba(0, 0, 0, 0.65);
}

/* Hint card — appears above (bottom corners) or below (top corners). */
.fol-page-corner .hint {
    position: absolute;
    bottom: 100%;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    padding: 0.55rem 0.9rem;
    background: rgba(8, 9, 14, 0.95);
    border: 1px solid var(--rule);
    font-family: var(--serif-display);
    font-style: italic;
    font-size: 0.88rem;
    color: var(--bone-1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 220ms ease, transform 220ms ease;
}
.fol-page-corner-prev .hint { left: 0; }
.fol-page-corner-next .hint { right: 0; }
.fol-page-corner.top .hint {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 0.5rem;
    transform: translateY(-6px);
}
.fol-page-corner:hover .hint,
.fol-page-corner:focus-visible .hint {
    opacity: 1;
    transform: translateY(0);
}
.fol-page-corner .hint .num {
    font-family: var(--serif-caps);
    font-style: normal;
    color: var(--gold-2);
    letter-spacing: 0.12em;
    margin: 0 0.4em;
}
.fol-page-corner .hint .dir {
    color: var(--gold-3);
    font-style: normal;
}

/* Mobile: smaller corners (easier touch), hide hint cards. */
@media (max-width: 600px) {
    .fol-page-corner { width: 32px; height: 32px; bottom: 12px; }
    .fol-page-corner-prev { left: 12px; }
    .fol-page-corner-next { right: 12px; }
    .fol-page-corner.top  { top: 12px; bottom: auto; }
    .fol-page-corner .hint { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mid-edge proximity chevrons — slide in when the cursor approaches the
   viewport edge (within one chevron-width). Same z-index as the corner
   chevrons (40). Sits in the same outer-edge column as the corner curls
   (18 px from the side) so the three controls visually line up. JS toggles
   body.bm-edge-near-{left,right} on mousemove; clicking dispatches into
   the existing data-tale-flip pjax path.
   ═══════════════════════════════════════════════════════════════════════════ */
.fol-edge-chevron {
    position: fixed;
    top: 50%;
    width: 42px;
    height: 42px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 9, 14, 0.85);
    border: 1px solid var(--gold-3);
    color: var(--gold-1);
    font-family: var(--serif-display);
    font-size: 1.8rem;
    line-height: 1;
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease,
                transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
                background 180ms ease,
                border-color 180ms ease,
                color 180ms ease;
}
.fol-edge-chevron-left  { left:  18px; transform: translate(-130%, -50%); }
.fol-edge-chevron-right { right: 18px; transform: translate( 130%, -50%); }

body.bm-edge-near-left  .fol-edge-chevron-left,
body.bm-edge-near-right .fol-edge-chevron-right {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%);
}

.fol-edge-chevron:hover,
.fol-edge-chevron:focus-visible {
    background: rgba(8, 9, 14, 0.95);
    border-color: var(--gold-1);
    color: var(--bone-1);
}

/* Touch / no-hover: rely on swipe + corner chevrons instead. */
@media (hover: none) {
    .fol-edge-chevron { display: none; }
}

/* Thin horizontal rules connecting the page corners — sells the "you are
   reading a folio of a book" metaphor. Rendered as real <span> elements
   (no :has() needed) so this works in older Safari too. The line sits at
   the vertical mid-height of the corner triangles and stops short of them
   so the chevrons stay visually distinct. Gold fade at the ends gives it a
   gilt page-edge feel. */
.fol-page-edge {
    position: fixed;
    /* Chevron is 42×42 at 18px from edge → ends 60px from edge.
       The line starts/ends exactly there so it touches but does not
       overlap the chevron. */
    top: 60px;
    bottom: 60px;
    width: 2px;
    background: var(--gold-1);
    box-shadow: 0 0 10px rgba(212, 190, 140, 0.35);
    opacity: 0.9;
    pointer-events: none;
    z-index: 39;   /* one below the chevrons (40) */
}
.fol-page-edge-left  { left:  18px; }   /* hugs the left edge of the corner column  */
.fol-page-edge-right { right: 18px; }   /* hugs the right edge of the corner column */

@media (max-width: 600px) {
    /* Chevron 32×32 at 12px from edge → ends 44px from edge. */
    .fol-page-edge       { top: 44px; bottom: 44px; }
    .fol-page-edge-left  { left:  12px; }
    .fol-page-edge-right { right: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Legacy "suggested-flip" rules — REPLACED by the real 3D paper-fold
   defined further below (search: "Real 3D paper-fold"). Kept dormant here
   for reference only; no [data-tale-flip] click path applies the
   .turning-* classes anymore.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    #pjax-content.turning-out-forward,
    #pjax-content.turning-out-backward,
    #pjax-content.turning-in-forward,
    #pjax-content.turning-in-backward {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Page-curl — true page-turn effect between tale pages.
   Replaces the earlier horizontal page-roll.

   Mechanism: stage + flipper + faces exist only during the animation.
   The front face (current content) lifts off its spine edge and rotates
   in 3D space, curling over and disappearing past the spine (via
   backface-visibility: hidden). Beneath it, the back face (incoming
   content) is gradually revealed via opacity fade.

   Forward (next):  front pivots around RIGHT edge, curls leftward.
   Backward (prev): front pivots around LEFT edge, curls rightward.

   transform-style: preserve-3d is applied ONLY to the temporary flipper
   (a JS-created div), NEVER to the always-on #pjax-content — so the
   all-black layout-collapse bug from before cannot recur.
   ═══════════════════════════════════════════════════════════════════════════ */

.fol-page-stage {
    position: relative;
    perspective: 1800px;
    perspective-origin: 50% 30%;
    /* Inline min-height set by JS to match the captured #pjax-content
       height so layout doesn't collapse while content sits in absolutely-
       positioned faces inside the flipper. */
}

.fol-page-flipper {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}

.fol-page-flipper .face {
    width: 100%;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
/* Split-half page turn: STATIC half stays in flow (gives the stage its
   height + keeps live audio working); BENDING half overlays it and is the
   only thing that rotates. .back sits underneath everything and is
   revealed half-by-half as the bending overlay folds away. */
.fol-page-flipper .face.front-static {
    position: relative;
    z-index: 2;
}
.fol-page-flipper .face.front-bending {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    z-index: 3;
    pointer-events: none;   /* clicks go through to the static (live) half */
}

/* Per-direction clipping — each half shows only its 50%, so the user
   perceives a vertical crease running down the page centerline. */
.fol-page-flipper.flipping-forward .face.front-static {
    clip-path: inset(0 50% 0 0);     /* keep LEFT half (static)  */
}
.fol-page-flipper.flipping-forward .face.front-bending {
    clip-path: inset(0 0 0 50%);     /* keep RIGHT half (bending) */
    transform-origin: 0% 50%;        /* pivot at the centerline   */
}
.fol-page-flipper.flipping-backward .face.front-static {
    clip-path: inset(0 0 0 50%);     /* keep RIGHT half (static)  */
}
.fol-page-flipper.flipping-backward .face.front-bending {
    clip-path: inset(0 50% 0 0);     /* keep LEFT half (bending)  */
    transform-origin: 100% 50%;      /* pivot at the centerline   */
}

/* Bend-shade overlay — dark crease running down the centerline of the
   bending half, deepening as the page lifts. */
.fol-page-flipper .face.front-bending::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
}
.fol-page-flipper.flipping-forward .face.front-bending::before {
    /* bend pivots at the LEFT edge of this clipped half → crease at left */
    background: linear-gradient(90deg,
        rgba(0, 0, 0, 0.55)  0%,
        rgba(0, 0, 0, 0.20)  8%,
        rgba(0, 0, 0, 0.00) 40%,
        rgba(0, 0, 0, 0.00) 100%);
    animation: page-bend-shade 850ms cubic-bezier(0.55, 0, 0.35, 1) forwards;
}
.fol-page-flipper.flipping-backward .face.front-bending::before {
    /* bend pivots at the RIGHT edge of this clipped half → crease at right */
    background: linear-gradient(270deg,
        rgba(0, 0, 0, 0.55)  0%,
        rgba(0, 0, 0, 0.20)  8%,
        rgba(0, 0, 0, 0.00) 40%,
        rgba(0, 0, 0, 0.00) 100%);
    animation: page-bend-shade 850ms cubic-bezier(0.55, 0, 0.35, 1) forwards;
}
@keyframes page-bend-shade {
    0%   { opacity: 0; }
    25%  { opacity: 0.55; }
    65%  { opacity: 1.00; }
    100% { opacity: 0; }
}
.fol-page-flipper .face.back {
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    opacity: 0;
    /* Parchment placeholder visible until fetched content is injected. */
    background:
        radial-gradient(ellipse at 50% 35%, rgba(212, 190, 140, 0.04), transparent 70%),
        linear-gradient(180deg, #261B10 0%, #2B2015 50%, #251A0F 100%);
}

/* The curl shadow — a dark gradient that travels along the spine-side of
   the page during the curl, simulating the shadow cast by the lifting
   paper onto the page beneath.

   Anchor is at the OUTER edge (away from where the new page comes from):
     forward (next coming from right) → spine LEFT, page lifts at RIGHT, curls leftward
     backward (prev coming from left) → spine RIGHT, page lifts at LEFT, curls rightward
   This reads as: you're grabbing the outer corner of the page and pulling
   it back toward the spine to reveal the next/prev page. */
.fol-page-flipper.flipping-forward  .face.front-bending {
    animation: page-curl-out-forward  850ms cubic-bezier(0.55, 0, 0.35, 1) forwards;
}
.fol-page-flipper.flipping-backward .face.front-bending {
    animation: page-curl-out-backward 850ms cubic-bezier(0.55, 0, 0.35, 1) forwards;
}
.fol-page-flipper.flipping-forward  .face.back,
.fol-page-flipper.flipping-backward .face.back {
    animation: page-curl-reveal 850ms cubic-bezier(0.55, 0, 0.35, 1) forwards;
}

/* Forward: front lifts at RIGHT edge, curls leftward over the left spine.
   Shadow drifts along the lifted (right) edge.

   Bend illusion: scaleY squishes vertically (page compressing under bend),
   scaleX foreshortens horizontally (perspective of the curving plane),
   rotateX tips it forward toward the viewer (bend toward you). Combined
   with the bend-shade ::before overlay, the flat plane reads as bowed. */
/* Half-page bend: the BENDING half rotates around the page centerline
   (its inner edge). The other (static) half is unmoved — anchored to the
   spine. The page reads as a real book folio being turned: you grab the
   outer edge, the half lifts and folds across the crease.
     Forward  : RIGHT half rotates LEFT  (negative rotateY, pivots at its
                left edge = page centerline) — turning to the NEXT page.
     Backward : LEFT  half rotates RIGHT (positive rotateY, pivots at its
                right edge = page centerline) — turning to the PREV page. */
@keyframes page-curl-out-forward {
    0%   { transform: rotateY(0);     box-shadow: 0 0 0 transparent;        }
    35%  { transform: rotateY(-50deg); box-shadow: -20px 14px 36px rgba(0, 0, 0, 0.45); }
    100% { transform: rotateY(-180deg); box-shadow: -10px 8px 24px rgba(0, 0, 0, 0.25); }
}
@keyframes page-curl-out-backward {
    0%   { transform: rotateY(0);    box-shadow: 0 0 0 transparent;        }
    35%  { transform: rotateY(50deg); box-shadow: 20px 14px 36px rgba(0, 0, 0, 0.45); }
    100% { transform: rotateY(180deg); box-shadow: 10px 8px 24px rgba(0, 0, 0, 0.25); }
}

/* New page (back face) fades into view as the front curls away. Stays
   dimmed during the early curl, fully visible by the end. */
@keyframes page-curl-reveal {
    0%   { opacity: 0; }
    35%  { opacity: 0; }
    100% { opacity: 1; }
}

/* Reduced motion — skip the curl; pjax becomes an instant swap. */
@media (prefers-reduced-motion: reduce) {
    .fol-page-flipper .face.front-static,
    .fol-page-flipper .face.front-bending,
    .fol-page-flipper .face.back {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }
}