/* ==========================================================================
   layer2.wiki — A Victorian Compendium of Layer the Second
   ========================================================================== */

/* ---- Palette --------------------------------------------------------- */
:root {
    --vellum:       #F2E8D5;   /* Aged Vellum (primary bg) */
    --parchment:    #E8D8BE;   /* Foxed Parchment (secondary bg) */
    --ink:          #2B1D0E;   /* Iron-Gall Ink (primary text) */
    --faded:        #5C4A3A;   /* Faded Ink (secondary text) */
    --brass:        #A67C52;   /* Burnished Brass (primary accent) */
    --verdigris:    #4A7C6F;   /* Verdigris (secondary accent) */
    --sealing:      #8B3A3A;   /* Sealing Wax (highlight) */
    --iron:         #3E2F23;   /* Oxidized Iron (borders/rules) */

    --col-center: 65%;
    --col-margin: 17.5%;

    --serif-display: "Playfair Display", "Lora", Georgia, serif;
    --serif-italic:  "Cormorant Garamond", "Lora", Georgia, serif;
    --serif-body:    "Crimson Text", "Lora", Georgia, serif;
    --serif-margin:  "IM Fell English", "Crimson Text", Georgia, serif;
    --serif-mono:    "IM Fell DW Pica SC", "Courier Prime", "Courier New", monospace;
}

/* ---- Reset / base ---------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--vellum);
    color: var(--ink);
    font-family: var(--serif-body);
    font-size: 18px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Paper grain texture overlay using SVG noise data URI */
.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.32;
    mix-blend-mode: multiply;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.11 0 0 0 0 0.05 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    background-size: 220px 220px;
}

/* Vignette (book spine shadow) */
.page-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(ellipse 100% 80% at 50% 50%, transparent 55%, rgba(43, 29, 14, 0.18) 100%),
        linear-gradient(to right, rgba(43, 29, 14, 0.15) 0%, transparent 6%, transparent 94%, rgba(43, 29, 14, 0.15) 100%);
}

/* ---- Typography ------------------------------------------------------ */
h1, h2, h3, h4 {
    font-family: var(--serif-display);
    font-weight: 900;
    color: var(--ink);
    letter-spacing: 0.01em;
    margin: 0;
    line-height: 1.15;
}

p { margin: 0 0 1em 0; }

em, i { font-style: italic; }
strong { font-weight: 700; }

::selection {
    background: var(--brass);
    color: var(--vellum);
}

a {
    color: var(--sealing);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: color 220ms ease, background 220ms ease;
}

a:hover { color: var(--ink); background: rgba(166, 124, 82, 0.18); }

/* ---- Folio three-column grid ---------------------------------------- */
.folio-header,
.dispatch-section,
.folio-entry,
.folio-footer {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: var(--col-margin) var(--col-center) var(--col-margin);
    gap: 0;
    padding: 5vh 0;
    min-height: 100vh;
}

.folio-margin {
    position: relative;
    padding: 2.5rem 1.5rem;
    color: var(--faded);
    font-family: var(--serif-margin);
    font-size: 14px;
    line-height: 1.6;
    border-color: var(--iron);
}

.folio-margin-left  { border-right: 1px solid rgba(62, 47, 35, 0.25); }
.folio-margin-right { border-left:  1px solid rgba(62, 47, 35, 0.25); }

.folio-center {
    padding: 2.5rem 3.5rem;
    position: relative;
}

.margin-rule {
    height: 1px;
    background: var(--iron);
    margin: 1rem 0;
    opacity: 0.55;
}

.margin-fleuron {
    text-align: center;
    color: var(--iron);
    font-size: 28px;
    line-height: 1;
    margin: 1.5rem 0;
}

.margin-annotation {
    font-style: italic;
    margin: 1.5rem 0;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(62, 47, 35, 0.35);
}

.margin-thumbnail {
    margin: 1.5rem 0;
    text-align: center;
}

.thumb-svg {
    width: 70px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.thumb-caption {
    display: block;
    margin-top: 0.4rem;
    font-size: 11px;
    font-style: italic;
    color: var(--faded);
}

.entry-anchor {
    font-family: var(--serif-display);
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
    text-align: right;
    line-height: 1.2;
    border-right: 3px double var(--iron);
    padding-right: 0.6rem;
    margin-bottom: 1.6rem;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   TITLE PAGE
   ========================================================================== */
.title-page {
    text-align: center;
    padding-top: 6vh;
    padding-bottom: 6vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 90vh;
}

.title-ornament {
    width: min(560px, 90%);
    margin: 1.2rem auto;
}

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

.title-superscript {
    font-family: var(--serif-margin);
    font-style: italic;
    color: var(--faded);
    letter-spacing: 0.18em;
    font-size: 14px;
    text-transform: uppercase;
    margin: 0.5rem 0 1.2rem 0;
}

.folio-title {
    text-align: center;
    margin: 0 auto;
    max-width: 720px;
    color: var(--ink);
}

.title-line {
    display: block;
    font-family: var(--serif-display);
    color: var(--ink);
}

.title-the {
    font-family: var(--serif-italic);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(20px, 2.4vw, 28px);
    color: var(--faded);
    letter-spacing: 0.08em;
    margin-bottom: -0.15em;
}

.title-main {
    font-weight: 900;
    font-size: clamp(56px, 9vw, 124px);
    letter-spacing: 0.02em;
    line-height: 1;
}

.title-of {
    font-family: var(--serif-italic);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(20px, 2.4vw, 30px);
    color: var(--faded);
    margin: 0.2em 0 0.1em 0;
}

.title-sub {
    font-weight: 900;
    font-size: clamp(28px, 4.4vw, 56px);
    letter-spacing: 0.03em;
    color: var(--ink);
}

.title-rule {
    display: block;
    height: 2px;
    width: 60%;
    margin: 1.6em auto 1em auto;
    background:
        linear-gradient(to right, transparent 0%, var(--iron) 12%, var(--iron) 88%, transparent 100%);
    position: relative;
}

.title-rule::before, .title-rule::after {
    content: "\2766";
    position: absolute;
    top: -0.7em;
    color: var(--iron);
    font-size: 18px;
}

.title-rule::before { left: 38%; }
.title-rule::after  { right: 38%; }

.title-tag {
    font-family: var(--serif-italic);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(15px, 1.6vw, 19px);
    color: var(--faded);
    line-height: 1.5;
    display: block;
    max-width: 580px;
    margin: 0.3em auto 0;
    letter-spacing: 0.02em;
}

.title-publisher {
    margin-top: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 520px;
}

.publisher-line {
    flex: 1;
    height: 1px;
    background: var(--iron);
    opacity: 0.55;
}

.publisher-text {
    font-family: var(--serif-margin);
    font-style: italic;
    font-size: 13px;
    color: var(--faded);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ==========================================================================
   CHAPTER NAVIGATION
   ========================================================================== */
.chapter-nav {
    position: relative;
    z-index: 5;
    background: var(--parchment);
    padding: 1rem 0 1.2rem 0;
    border-top: 3px double var(--iron);
    border-bottom: 3px double var(--iron);
}

.chapter-nav-rule {
    width: 65%;
    height: 1px;
    margin: 0.4rem auto;
    background: var(--iron);
    opacity: 0.4;
}

.chapter-nav-list {
    list-style: none;
    margin: 0 auto;
    padding: 0.4rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.2rem;
    max-width: 90%;
}

.chapter-tab {
    position: relative;
    display: inline-block;
    font-family: var(--serif-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--iron);
    background: var(--vellum);
    overflow: hidden;
    transition: color 220ms ease;
}

.chapter-tab::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(62, 47, 35, 0.5);
    pointer-events: none;
}

.chapter-tab::after {
    /* brass polishing sweep */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(166, 124, 82, 0.55) 45%,
        rgba(232, 216, 190, 0.7) 55%,
        transparent 100%);
    transform: translateX(-110%);
    transition: transform 320ms ease;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.chapter-tab:hover {
    color: var(--ink);
    background: var(--vellum);
}

.chapter-tab:hover::after {
    transform: translateX(110%);
}

.chapter-tab.disabled {
    color: var(--faded);
    cursor: not-allowed;
    opacity: 0.7;
    background: repeating-linear-gradient(
        45deg,
        var(--vellum) 0,
        var(--vellum) 6px,
        var(--parchment) 6px,
        var(--parchment) 8px);
}

.chapter-tab.disabled::after { display: none; }

/* ==========================================================================
   FRAMED BLOCKS — Victorian engraved frame
   ========================================================================== */
.framed-block {
    position: relative;
    background: var(--vellum);
    padding: 2.2rem 2.4rem 2rem 2.4rem;
    margin: 0;
    border: 1px solid var(--iron);
    box-shadow:
        inset 0 0 0 4px var(--vellum),
        inset 0 0 0 5px rgba(62, 47, 35, 0.55);
}

.framed-block::before,
.framed-block::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

/* Inner double-rule */
.framed-block::before {
    top: 8px; left: 8px; right: 8px; bottom: 8px;
    border: 1px double rgba(62, 47, 35, 0.55);
}

/* repeating ornamental pattern on outer edge */
.framed-block::after {
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    background-image:
        repeating-linear-gradient(0deg, transparent 0 14px, var(--iron) 14px 15px, transparent 15px 28px),
        repeating-linear-gradient(90deg, transparent 0 14px, var(--iron) 14px 15px, transparent 15px 28px);
    background-size: 100% 1px, 1px 100%;
    background-position: 0 0, 0 0;
    background-repeat: repeat-x, repeat-y;
    opacity: 0.0;
}

.frame-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    pointer-events: none;
    background: transparent;
    z-index: 2;
    transition: opacity 600ms ease;
}

.frame-corner::before, .frame-corner::after {
    content: "";
    position: absolute;
    background: var(--iron);
}

.frame-corner.tl { top: -2px; left: -2px;
    border-top: 2px solid var(--iron); border-left: 2px solid var(--iron); }
.frame-corner.tr { top: -2px; right: -2px;
    border-top: 2px solid var(--iron); border-right: 2px solid var(--iron); }
.frame-corner.bl { bottom: -2px; left: -2px;
    border-bottom: 2px solid var(--iron); border-left: 2px solid var(--iron); }
.frame-corner.br { bottom: -2px; right: -2px;
    border-bottom: 2px solid var(--iron); border-right: 2px solid var(--iron); }

.frame-corner.tl::before { top: 6px; left: 6px; width: 14px; height: 1px; }
.frame-corner.tl::after  { top: 6px; left: 6px; width: 1px; height: 14px; }
.frame-corner.tr::before { top: 6px; right: 6px; width: 14px; height: 1px; }
.frame-corner.tr::after  { top: 6px; right: 6px; width: 1px; height: 14px; }
.frame-corner.bl::before { bottom: 6px; left: 6px; width: 14px; height: 1px; }
.frame-corner.bl::after  { bottom: 6px; left: 6px; width: 1px; height: 14px; }
.frame-corner.br::before { bottom: 6px; right: 6px; width: 14px; height: 1px; }
.frame-corner.br::after  { bottom: 6px; right: 6px; width: 1px; height: 14px; }

.frame-rail {
    position: absolute;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='10' viewBox='0 0 40 10'><g fill='none' stroke='%233E2F23' stroke-width='0.7'><path d='M0 5 Q 10 0 20 5 Q 30 10 40 5'/><circle cx='20' cy='5' r='1.2' fill='%233E2F23'/></g></svg>");
    background-repeat: repeat-x;
    opacity: 0.85;
    transition: transform 700ms ease, opacity 700ms ease;
}

.frame-rail.top    { top: 8px; left: 36px; right: 36px; height: 10px; }
.frame-rail.bottom { bottom: 8px; left: 36px; right: 36px; height: 10px; transform: scaleY(-1); }
.frame-rail.left   { left: 8px; top: 36px; bottom: 36px; width: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='40' viewBox='0 0 10 40'><g fill='none' stroke='%233E2F23' stroke-width='0.7'><path d='M5 0 Q 0 10 5 20 Q 10 30 5 40'/><circle cx='5' cy='20' r='1.2' fill='%233E2F23'/></g></svg>");
    background-repeat: repeat-y; }
.frame-rail.right  { right: 8px; top: 36px; bottom: 36px; width: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='40' viewBox='0 0 10 40'><g fill='none' stroke='%233E2F23' stroke-width='0.7'><path d='M5 0 Q 0 10 5 20 Q 10 30 5 40'/><circle cx='5' cy='20' r='1.2' fill='%233E2F23'/></g></svg>");
    background-repeat: repeat-y; transform: scaleX(-1); }

/* Frame-assemble animation: corners then rails */
.framed-block.assembling .frame-corner { opacity: 0; transform: scale(0.5); }
.framed-block.assembling .frame-rail.top    { transform: scaleX(0); transform-origin: center; }
.framed-block.assembling .frame-rail.bottom { transform: scaleY(-1) scaleX(0); transform-origin: center; }
.framed-block.assembling .frame-rail.left   { transform: scaleY(0); transform-origin: center; }
.framed-block.assembling .frame-rail.right  { transform: scaleX(-1) scaleY(0); transform-origin: center; }

.framed-block.assembled .frame-corner {
    opacity: 1;
    transform: scale(1);
    transition: opacity 280ms ease 0ms, transform 280ms ease 0ms;
}

.framed-block.assembled .frame-rail.top,
.framed-block.assembled .frame-rail.bottom,
.framed-block.assembled .frame-rail.left,
.framed-block.assembled .frame-rail.right {
    transition: transform 520ms ease 280ms;
}

.framed-block.assembled .frame-rail.top    { transform: scaleX(1); }
.framed-block.assembled .frame-rail.bottom { transform: scaleY(-1) scaleX(1); }
.framed-block.assembled .frame-rail.left   { transform: scaleY(1); }
.framed-block.assembled .frame-rail.right  { transform: scaleX(-1) scaleY(1); }

/* ==========================================================================
   DISPATCH
   ========================================================================== */
.dispatch-section { padding-top: 4vh; }

.dispatch-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
    align-items: start;
}

.cartouche-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    font-family: var(--serif-italic);
    font-style: italic;
    font-weight: 600;
    color: var(--brass);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 1rem;
}

.cartouche-side {
    color: var(--iron);
    font-style: normal;
}

.dispatch-heading {
    font-family: var(--serif-display);
    font-weight: 900;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.18;
    color: var(--ink);
    text-align: center;
    margin-bottom: 1.4rem;
    letter-spacing: 0.005em;
}

.dispatch-heading em {
    font-family: var(--serif-italic);
    font-style: italic;
    font-weight: 500;
    color: var(--sealing);
}

.dispatch-pullquote {
    font-family: var(--serif-italic);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(19px, 1.9vw, 23px);
    line-height: 1.5;
    color: var(--faded);
    text-align: center;
    max-width: 80%;
    margin: 0 auto 2rem auto;
    border-top: 1px solid var(--iron);
    border-bottom: 1px solid var(--iron);
    padding: 1rem 0;
    position: relative;
}

.dispatch-pullquote::before, .dispatch-pullquote::after {
    content: "\2766";
    position: absolute;
    color: var(--brass);
    font-size: 14px;
    background: var(--vellum);
    padding: 0 8px;
}

.dispatch-pullquote::before { top: -10px; left: 50%; transform: translateX(-50%); }
.dispatch-pullquote::after  { bottom: -10px; left: 50%; transform: translateX(-50%); }

.dispatch-body-with-engraving {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: start;
}

.engraving-frontis {
    text-align: center;
}

.engrave-svg {
    width: 100%;
    height: auto;
    display: block;
    color: var(--ink);
}

.engrave-caption {
    font-family: var(--serif-margin);
    font-style: italic;
    font-size: 13px;
    color: var(--faded);
    line-height: 1.5;
    margin-top: 0.6rem;
    text-align: center;
}

/* dispatch prose */
.dispatch-prose p {
    text-align: justify;
    hyphens: auto;
    margin-bottom: 1.1em;
}

/* drop capital */
.with-dropcap { position: relative; }

.drop-capital {
    float: left;
    font-family: var(--serif-display);
    font-weight: 900;
    font-size: 5.4em;
    line-height: 0.85;
    padding: 0.08em 0.12em 0 0;
    margin: 0.04em 0.12em -0.05em 0;
    color: var(--ink);
    background: transparent;
    transition: color 1000ms ease;
    position: relative;
}

.drop-capital::before {
    /* botanical filigree growing from the cap */
    content: "";
    position: absolute;
    inset: -10% -14% -6% -6%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='%23A67C52' stroke-width='0.8' opacity='0.0'><path d='M5 95 Q 20 60 12 30 Q 40 38 60 18 M 95 95 Q 80 60 88 30 Q 60 38 40 18'/><circle cx='12' cy='30' r='2'/><circle cx='88' cy='30' r='2'/><circle cx='40' cy='18' r='2'/><circle cx='60' cy='18' r='2'/></g></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    transition: opacity 1000ms ease;
    opacity: 0;
}

.drop-capital.illuminated {
    color: var(--sealing);
    text-shadow:
        1px 0 0 rgba(166, 124, 82, 0.4),
        2px 1px 0 rgba(62, 47, 35, 0.3);
}

.drop-capital.illuminated::before { opacity: 1; }

/* dispatch aside */
.dispatch-aside {
    background: var(--parchment);
}

.aside-heading {
    font-family: var(--serif-display);
    font-weight: 900;
    font-size: 22px;
    text-align: center;
    border-bottom: 1px solid var(--iron);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    letter-spacing: 0.04em;
}

.notices-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notice {
    font-family: var(--serif-margin);
    font-size: 14px;
    line-height: 1.6;
    padding: 0.7rem 0;
    border-bottom: 1px dotted rgba(62, 47, 35, 0.45);
    color: var(--ink);
}

.notice:last-child { border-bottom: none; }

.notice-date {
    display: block;
    font-style: italic;
    color: var(--faded);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.notice.deprecated {
    cursor: not-allowed;
    transition: background 220ms ease, color 220ms ease;
}

.notice.deprecated:hover {
    background: rgba(139, 58, 58, 0.08);
}

.notice.deprecated.shake {
    animation: shake-error 150ms ease-in-out 2;
    color: var(--sealing);
    background: rgba(139, 58, 58, 0.16);
}

.strike { text-decoration: line-through; color: var(--sealing); }

.aside-divider {
    color: var(--iron);
    text-align: center;
    margin: 1rem 0;
    letter-spacing: 0.4em;
    font-size: 16px;
}

.aside-meta {
    font-family: var(--serif-margin);
    font-size: 12.5px;
    color: var(--faded);
    line-height: 1.6;
    margin: 0;
}

.meta-label {
    font-style: italic;
    color: var(--ink);
}

/* ==========================================================================
   ORNAMENTAL DIVIDER
   ========================================================================== */
.ornamental-divider {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 1.2rem 0;
    text-align: center;
}

.divider-svg {
    width: 80%;
    max-width: 900px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ==========================================================================
   FOLIO ENTRIES
   ========================================================================== */
.folio-entry {
    background:
        linear-gradient(180deg, transparent 0%, rgba(232, 216, 190, 0.08) 100%);
}

.entry-eyebrow {
    font-family: var(--serif-margin);
    font-style: italic;
    color: var(--brass);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 0.4rem;
}

.entry-title {
    font-family: var(--serif-display);
    font-weight: 900;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: 1.12;
    color: var(--ink);
    margin-bottom: 1.6rem;
    border-left: 4px double var(--iron);
    padding-left: 1rem;
    letter-spacing: 0.005em;
}

.entry-title em {
    font-family: var(--serif-italic);
    font-style: italic;
    font-weight: 500;
    color: var(--sealing);
}

.entry-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2.4rem;
    align-items: start;
}

.entry-grid.reverse {
    grid-template-columns: 1fr 1.3fr;
}

.entry-grid.reverse .entry-engraving {
    order: 1;
}

.entry-grid.reverse .entry-prose {
    order: 2;
}

.entry-prose p {
    text-align: justify;
    hyphens: auto;
    margin-bottom: 1.1em;
    color: var(--ink);
}

.entry-prose p strong {
    font-family: var(--serif-display);
    font-weight: 700;
    color: var(--ink);
}

.entry-engraving {
    margin: 0;
}

.engraving-frame {
    background: var(--vellum);
    border: 1px solid var(--iron);
    padding: 8px;
    box-shadow:
        inset 0 0 0 3px var(--vellum),
        inset 0 0 0 4px rgba(62, 47, 35, 0.45);
    position: relative;
}

.engraving-frame::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px double rgba(62, 47, 35, 0.6);
    pointer-events: none;
}

.engrave-caption-block {
    font-family: var(--serif-margin);
    font-style: italic;
    font-size: 13.5px;
    color: var(--faded);
    line-height: 1.55;
    margin-top: 0.6rem;
    padding: 0 0.4rem;
    text-align: center;
}

/* SVG engraving stroke-draw animation */
.engrave-path {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    transition: stroke-dashoffset 1500ms ease;
}

.engrave-svg.drawn .engrave-path {
    stroke-dashoffset: 0;
}

.engrave-spin {
    animation: gear-spin 16s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

.engrave-spin-rev {
    animation: gear-spin-rev 12s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
}

/* state-channel capsule animation */
.capsule {
    animation: capsule-glide 4.5s ease-in-out infinite;
}

.capsule-group .capsule:nth-child(1) { animation-delay: 0s; }
.capsule-group .capsule:nth-child(2) { animation-delay: 1.5s; }
.capsule-group .capsule:nth-child(3) { animation-delay: 3s; }

/* carriage rolling */
.carriage {
    animation: carriage-roll 8s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: center;
}

/* ==========================================================================
   CARTOUCHE — ornate callout box
   ========================================================================== */
.cartouche {
    position: relative;
    background: var(--parchment);
    border: 1px solid var(--iron);
    padding: 1.4rem 1.6rem 1.2rem 1.6rem;
    margin: 1.6rem 0;
    box-shadow: inset 0 0 0 3px var(--parchment), inset 0 0 0 4px rgba(62, 47, 35, 0.4);
}

.cartouche-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%233E2F23' stroke-width='1'><path d='M2 22 Q 2 8 12 2'/><path d='M2 18 Q 6 10 12 6'/><circle cx='2' cy='22' r='1.2' fill='%233E2F23'/></g></svg>");
}
.cartouche-corner.tl { top: -2px; left: -2px; }
.cartouche-corner.tr { top: -2px; right: -2px; transform: scaleX(-1); }
.cartouche-corner.bl { bottom: -2px; left: -2px; transform: scaleY(-1); }
.cartouche-corner.br { bottom: -2px; right: -2px; transform: scale(-1, -1); }

.cartouche-label {
    font-family: var(--serif-italic);
    font-style: italic;
    font-weight: 600;
    color: var(--brass);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12.5px;
    margin: 0 0 0.4rem 0;
    text-align: center;
    border-bottom: 1px solid rgba(62, 47, 35, 0.4);
    padding-bottom: 0.4rem;
}

.cartouche-content {
    font-family: var(--serif-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    margin: 0;
    text-align: center;
}

/* ornate list */
.ornate-list {
    list-style: none;
    margin: 1.2rem 0;
    padding: 0;
}

.ornate-list li {
    padding: 0.4rem 0 0.4rem 1.6rem;
    position: relative;
    border-bottom: 1px dotted rgba(62, 47, 35, 0.3);
    line-height: 1.6;
}

.ornate-list li:last-child { border-bottom: none; }

.list-marker {
    position: absolute;
    left: 0;
    top: 0.4rem;
    color: var(--brass);
    font-size: 14px;
}

/* ==========================================================================
   FOOTER / COLOPHON
   ========================================================================== */
.folio-footer {
    background: var(--parchment);
    padding-top: 2vh;
    padding-bottom: 4vh;
    border-top: 3px double var(--iron);
}

.colophon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding-top: 2rem;
}

.colophon-block {
    border-top: 1px solid var(--iron);
    padding-top: 1rem;
}

.colophon-heading {
    font-family: var(--serif-display);
    font-weight: 900;
    font-size: 18px;
    color: var(--ink);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    text-align: center;
}

.colophon-text {
    font-family: var(--serif-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--faded);
    text-align: center;
    margin: 0;
}

.footer-rule {
    height: 1px;
    background: var(--iron);
    margin: 2rem 0 1rem 0;
    opacity: 0.5;
}

.footer-imprint {
    font-family: var(--serif-italic);
    font-style: italic;
    color: var(--faded);
    text-align: center;
    margin: 0;
    letter-spacing: 0.12em;
    font-size: 14px;
}

/* ==========================================================================
   Page-entry stagger animation
   ========================================================================== */
.fade-in-up {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Shake-error pattern
   ========================================================================== */
@keyframes shake-error {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-3px); }
    40%  { transform: translateX(3px); }
    60%  { transform: translateX(-2px); }
    80%  { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

.shake {
    animation: shake-error 150ms ease-in-out 2;
}

.flash-error {
    background-color: rgba(139, 58, 58, 0.18) !important;
    transition: background-color 380ms ease;
}

/* gear spin */
@keyframes gear-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes gear-spin-rev {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

@keyframes capsule-glide {
    0%, 100%   { transform: translate(0, 0); opacity: 1; }
    25%        { transform: translate(20px, -8px); opacity: 0.8; }
    50%        { transform: translate(40px, 0); opacity: 0.6; }
    75%        { transform: translate(20px, 8px); opacity: 0.8; }
}

@keyframes carriage-roll {
    from { transform: translateX(-50px); }
    to   { transform: translateX(50px); }
}

/* page-turn transition for nav */
@keyframes page-turn-out {
    from { transform: translateX(0) rotate(0deg); opacity: 1; }
    to   { transform: translateX(-12px) rotate(-1.5deg); opacity: 0.6; }
}

.page-turning {
    animation: page-turn-out 380ms ease forwards;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
    .folio-header,
    .dispatch-section,
    .folio-entry,
    .folio-footer {
        grid-template-columns: 8% 1fr 8%;
    }

    .folio-center { padding: 2.5rem 1.5rem; }
    .folio-margin { padding: 1.5rem 0.6rem; font-size: 12.5px; }
    .margin-thumbnail { display: none; }

    .dispatch-grid { grid-template-columns: 1fr; }
    .dispatch-body-with-engraving { grid-template-columns: 1fr; }
    .entry-grid, .entry-grid.reverse { grid-template-columns: 1fr; }
    .colophon-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    html, body { font-size: 16px; }
    .folio-header,
    .dispatch-section,
    .folio-entry,
    .folio-footer {
        grid-template-columns: 1fr;
        padding: 4vh 0;
    }
    .folio-margin { display: none; }
    .folio-center { padding: 1.5rem 1.2rem; }
    .title-main { font-size: 56px; }
    .chapter-nav-list { gap: 0.4rem 0.6rem; padding: 0.4rem 1rem; }
    .chapter-tab { padding: 0.4rem 0.7rem; font-size: 12.5px; }
    .drop-capital { font-size: 4.2em; }
    .dispatch-pullquote { max-width: 100%; font-size: 17px; }
}