/* =====================================================
   economic.wiki  —  styles.css
   A 1929 commodities-exchange annual, rebound as
   living hypertext. All hex values come from DESIGN.md.
   ===================================================== */

:root {
    /* Palette — nine ranked colors, used in priority */
    --ink-onyx:        #0E0F14;
    --ink-velvet:      #16131C;
    --gold-tarnished:  #B08A42;
    --gold-leaf:       #D9B25C;
    --gold-verdigris:  #7C8C56;
    --paper-cotton:    #E8E4D9;
    --paper-aged:      #C8B999;
    --burgundy-stamp:  #5A1E22;
    --shadow-deep:     #06070A;

    /* 8px modular scale */
    --s-1:  8px;
    --s-2:  16px;
    --s-3:  24px;
    --s-4:  32px;
    --s-5:  48px;
    --s-6:  64px;
    --s-7:  96px;
    --s-8:  128px;
    --s-9:  192px;
    --s-10: 256px;

    /* Fluid grid */
    --well:    clamp(56ch, 60vw, 64ch);
    --margin-w: min(160px, 18vw);
    --gutter:  clamp(24px, 4vw, 48px);

    /* Type — fonts (DESIGN.md spec) */
    --font-display: "Poiret One", "Avenir Next Condensed Light", "Futura PT Light", "Futura", sans-serif;
    --font-sub:     "Limelight",  "Georgia", serif;
    --font-body:    "Cormorant Garamond", "Hoefler Text", "Adobe Caslon Pro", "Georgia", serif;
    --font-sc:      "Cormorant SC", "Cormorant Garamond", "Georgia", serif;
    --font-mono:    "IBM Plex Mono", "ibm plex", "space mono", "space", "Inter", "inter", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    background: var(--ink-onyx);
    color: var(--paper-cotton);
    font-family: var(--font-body);
    font-size: 19px;
    line-height: 1.78;
    font-weight: 400;
    letter-spacing: -0.005em;
    font-feature-settings: "onum" 1, "dlig" 1;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

::selection { background: var(--gold-tarnished); color: var(--ink-onyx); }

/* ============ FOUR FLUTED CORNER PIECES ============ */
.corner {
    position: fixed;
    width: 64px;
    height: 64px;
    z-index: 50;
    pointer-events: none;
    filter: drop-shadow(2px 2px 0 var(--shadow-deep));
}
.corner--tl { top: 0; left: 0; }
.corner--tr { top: 0; right: 0; }
.corner--bl { bottom: 0; left: 0; }
.corner--br { bottom: 0; right: 0; }

/* ============ FLOATING SPINE (after 80vh) ============ */
.spine {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%) rotate(180deg);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background: var(--ink-velvet);
    border-right: 2px solid var(--gold-tarnished);
    padding: var(--s-3) var(--s-2);
    font-family: var(--font-sc);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--gold-leaf);
    z-index: 40;
    transition: transform 480ms cubic-bezier(0.2, 0.6, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
}
.spine.is-visible {
    transform: translate(0, -50%) rotate(180deg);
}
.spine__zig {
    width: 28px;
    height: 9px;
    transform: rotate(180deg);
}
.spine__title {
    text-transform: uppercase;
}

/* ============ PAGE WRAPPER ============ */
.page {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--s-7) var(--s-5) var(--s-5);
    position: relative;
}

/* ============ MASTHEAD ============ */
.masthead {
    position: relative;
    text-align: center;
    padding: var(--s-7) 0 var(--s-6);
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sunburst {
    position: absolute;
    width: clamp(420px, 60vw, 720px);
    height: clamp(420px, 60vw, 720px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}

.ziggurat-frame {
    width: clamp(320px, 60vw, 600px);
    height: auto;
    margin: 0 auto var(--s-3);
    position: relative;
    z-index: 1;
}
.ziggurat-frame--bot {
    margin: var(--s-3) auto 0;
}

.masthead__supra {
    font-family: var(--font-sc);
    font-size: 11px;
    letter-spacing: 0.42em;
    color: var(--gold-tarnished);
    text-transform: uppercase;
    margin: 0 0 var(--s-3);
    position: relative;
    z-index: 1;
}

.masthead__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3.2rem, 7vw, 6.8rem);
    line-height: 1.05;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper-cotton);
    margin: 0;
    position: relative;
    z-index: 1;
}
.masthead__title .dot {
    color: var(--gold-leaf);
    margin: 0 0.18em;
    font-weight: 400;
}

.masthead__subtitle {
    font-family: var(--font-sub);
    font-size: clamp(1rem, 1.6vw, 1.3rem);
    letter-spacing: 0.42em;
    color: var(--gold-tarnished);
    text-transform: uppercase;
    margin: var(--s-2) 0 var(--s-3);
    position: relative;
    z-index: 1;
}

.masthead__opening {
    max-width: 56ch;
    margin: var(--s-5) auto 0;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.78;
    color: var(--paper-cotton);
    position: relative;
    z-index: 1;
}
.masthead__opening em {
    color: var(--gold-leaf);
    font-style: italic;
    font-weight: 300;
}

/* ============ ZIG FRIEZE DIVIDER ============ */
.zig-frieze {
    height: 32px;
    border: 0;
    margin: var(--s-5) 0;
    background-color: transparent;
    background-image:
        linear-gradient(to bottom, transparent 0 12px, var(--gold-tarnished) 12px 14px, transparent 14px 16px, var(--gold-tarnished) 16px 18px, transparent 18px 20px),
        repeating-linear-gradient(
            to right,
            transparent 0 6px,
            var(--gold-tarnished) 6px 7px,
            transparent 7px 9px,
            var(--gold-tarnished) 9px 10px,
            transparent 10px 12px,
            var(--gold-tarnished) 12px 13px,
            transparent 13px 17px,
            var(--gold-tarnished) 17px 18px,
            transparent 18px 22px,
            var(--gold-tarnished) 22px 23px,
            transparent 23px 27px,
            var(--gold-tarnished) 27px 28px,
            transparent 28px 33px
        );
    position: relative;
}
.zig-frieze::before,
.zig-frieze::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    background: var(--gold-leaf);
    transform: translateY(-50%) rotate(45deg);
}
.zig-frieze::before { left: 50%; margin-left: -4px; }
.zig-frieze::after  { display: none; }

/* ============ SPREAD: MARGINS + WELL ============ */
.spread {
    display: grid;
    grid-template-columns: var(--margin-w) minmax(0, 1fr) var(--margin-w);
    gap: var(--gutter);
    align-items: start;
    margin-top: var(--s-5);
}

.well {
    max-width: var(--well);
    margin: 0 auto;
    width: 100%;
    grid-column: 2;
}

/* ============ MARGIN COLUMNS ============ */
.margin {
    position: relative;
    background: var(--ink-velvet);
    border: 1px solid rgba(176, 138, 66, 0.18);
    padding: var(--s-3) var(--s-2);
    min-height: 800px;
}
.margin--left  { grid-column: 1; }
.margin--right { grid-column: 3; }

.fluted-column {
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    opacity: 0.55;
    pointer-events: none;
}
.fluted-column--left  { left: 50%;  transform: translateX(-50%); }
.fluted-column--right { right: 50%; transform: translateX(50%);  }

.ledger-numerals {
    position: relative;
    z-index: 2;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-sc);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--gold-tarnished);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--s-7);
    margin-top: var(--s-7);
}
.ledger-numerals li {
    background: var(--ink-velvet);
    padding: 4px 8px;
    border: 1px solid var(--gold-tarnished);
    text-transform: uppercase;
}

/* Era-stamp seal */
.era-stamp {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: var(--s-5);
}
.era-stamp svg {
    width: 64px;
    height: 64px;
    filter: drop-shadow(1px 1px 0 var(--shadow-deep));
}
.era-stamp__year {
    font-family: var(--font-sc);
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--gold-verdigris);
    margin: var(--s-1) 0 0;
}

/* Marginalia (italic editorial hand) */
.marginalia {
    position: relative;
    z-index: 2;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 12px;
    line-height: 1.5;
    color: var(--gold-verdigris);
    text-align: right;
    margin: var(--s-3) 0;
    padding-right: var(--s-1);
}
.marginalia em {
    color: var(--gold-leaf);
}

/* Navigation rail */
.rail {
    position: relative;
    z-index: 2;
    margin-top: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    border-top: 1px solid var(--gold-tarnished);
    padding-top: var(--s-3);
}
.rail__item {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    text-decoration: none;
    color: var(--paper-aged);
    font-family: var(--font-sc);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 6px;
    border-left: 2px solid transparent;
    transition: border-color 280ms ease, color 280ms ease;
}
.rail__zig {
    width: 22px;
    height: 13px;
    flex-shrink: 0;
}
.rail__zig-fill rect {
    fill: var(--gold-tarnished);
    transition: fill 280ms ease;
}
.rail__item:hover .rail__zig-fill rect {
    fill: var(--gold-verdigris);
}
.rail__item:hover {
    color: var(--gold-verdigris);
}
.rail__item.is-active .rail__zig-fill rect {
    fill: var(--gold-leaf);
}
.rail__item.is-active {
    color: var(--gold-leaf);
    border-left-color: var(--gold-leaf);
}

/* ============ ENTRY (SECTION) ============ */
.entry {
    margin: var(--s-5) 0;
    scroll-margin-top: var(--s-7);
}

.entry__head {
    font-family: var(--font-sub);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1.18;
    letter-spacing: 0.08em;
    color: var(--gold-leaf);
    text-transform: uppercase;
    margin: 0 0 var(--s-3);
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    border-bottom: 1px solid var(--gold-tarnished);
    padding-bottom: var(--s-2);
}
.entry__numeral {
    font-family: var(--font-display);
    color: var(--gold-tarnished);
    font-size: 0.85em;
    letter-spacing: 0.18em;
}
.entry__title {
    flex: 1;
}

.entry p {
    margin: 0 0 var(--s-3);
}
.entry em { color: var(--gold-leaf); font-style: italic; font-weight: 300; }
.entry strong { color: var(--paper-cotton); font-weight: 500; }

.lede {
    font-size: 21px;
    line-height: 1.7;
    color: var(--paper-aged);
    border-left: 2px solid var(--gold-tarnished);
    padding-left: var(--s-3);
    font-style: italic;
    font-weight: 300;
}

.ticker-line {
    font-family: var(--font-sc);
    font-size: 12px;
    letter-spacing: 0.24em;
    color: var(--gold-verdigris);
    text-transform: uppercase;
    text-align: center;
    border-top: 1px solid var(--gold-tarnished);
    border-bottom: 1px solid var(--gold-tarnished);
    padding: var(--s-1) 0;
    margin: var(--s-4) 0 !important;
}
.ticker {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--paper-cotton);
    letter-spacing: 0.06em;
    margin-right: 4px;
    background: var(--ink-velvet);
    padding: 2px 4px;
    border: 1px solid var(--gold-tarnished);
}

/* ============ CARTOUCHE ============ */
.cartouche {
    position: relative;
    margin: var(--s-3) 0 var(--s-5);
    text-align: center;
    padding: var(--s-3) 0;
}
.cartouche__svg {
    width: 100%;
    max-width: 720px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(1px 2px 0 var(--shadow-deep));
}
.cartouche__path {
    stroke-dasharray: 2400;
    stroke-dashoffset: 2400;
}
.cartouche.is-drawn .cartouche__path {
    animation: draw-cartouche 1400ms cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}
@keyframes draw-cartouche {
    to { stroke-dashoffset: 0; }
}

.definition {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 480px;
    margin: 0;
    text-align: center;
    pointer-events: auto;
}
.definition__term {
    font-family: var(--font-sub);
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    color: var(--gold-leaf);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin: 0 0 var(--s-1);
    line-height: 1.1;
}
.definition__body {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--paper-aged);
    margin: 0;
}
.definition__body em { color: var(--gold-tarnished); font-weight: 300; }

/* ============ LEDGER LIST ============ */
.ledger-list {
    list-style: none;
    margin: var(--s-3) 0;
    padding: 0;
    border-top: 1px solid var(--gold-tarnished);
}
.ledger-list li {
    display: flex;
    gap: var(--s-2);
    padding: var(--s-2) 0;
    border-bottom: 1px solid rgba(176, 138, 66, 0.35);
}
.ledger-list__num {
    font-family: var(--font-sc);
    color: var(--gold-leaf);
    flex-shrink: 0;
    width: 32px;
    letter-spacing: 0.18em;
}
.ledger-list__body {
    flex: 1;
}

/* ============ MARBLE PLINTH ============ */
.plinth {
    margin: var(--s-4) 0 var(--s-4) -12px;
    max-width: 280px;
    transform: rotate(-0.4deg);
    filter: drop-shadow(2px 3px 0 var(--shadow-deep));
}
.plinth svg {
    width: 100%;
    height: auto;
    display: block;
}
.plinth figcaption {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 12px;
    color: var(--gold-verdigris);
    margin-top: var(--s-1);
    text-align: right;
}

/* ============ NOTE-REF (stepped pyramid glyph) ============ */
.note-ref {
    display: inline-block;
    vertical-align: super;
    margin: 0 2px;
    text-decoration: none;
    line-height: 0;
}
.note-glyph {
    width: 14px;
    height: 5px;
    transition: filter 280ms ease;
}
.note-ref:hover .note-glyph {
    filter: brightness(1.3);
}

/* ============ LEDGER SPREAD (verso/recto) ============ */
.ledger {
    display: grid;
    grid-template-columns: 1fr 4px 1fr;
    gap: var(--s-2);
    margin: var(--s-3) 0;
    padding: var(--s-3);
    border: 1px solid var(--gold-tarnished);
    background: var(--ink-velvet);
}
.ledger__verso, .ledger__recto {
    padding: var(--s-2);
}
.ledger__fold {
    background: var(--gold-tarnished);
    width: 1px;
    margin: 0 auto;
    height: 100%;
    box-shadow: 0 0 0 1px var(--gold-tarnished), 2px 0 0 var(--ink-velvet), 3px 0 0 var(--gold-tarnished);
}
.ledger__head {
    font-family: var(--font-sc);
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--gold-tarnished);
    text-transform: uppercase;
    margin: 0 0 var(--s-2);
    border-bottom: 1px solid var(--gold-tarnished);
    padding-bottom: 4px;
}
.ledger__list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.6;
}
.ledger__list li {
    padding: var(--s-1) 0;
    border-bottom: 1px dotted rgba(176, 138, 66, 0.35);
    display: flex;
    gap: var(--s-1);
}
.ledger__list .num {
    font-family: var(--font-sc);
    color: var(--gold-leaf);
    width: 24px;
    flex-shrink: 0;
}

/* ============ ANNAL SPREAD (timeline) ============ */
.annal {
    list-style: none;
    margin: var(--s-4) 0;
    padding: 0;
    position: relative;
}
.annal::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--gold-tarnished);
    transform: translateX(-50%);
}
.annal__row {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: var(--s-2);
    align-items: start;
    margin-bottom: var(--s-4);
    position: relative;
}
.annal__year {
    grid-column: 2;
    text-align: center;
}
.annal__year .zig-bullet {
    width: 60px;
    height: 36px;
    display: block;
    margin: 0 auto;
}
.annal__year-num {
    display: block;
    font-family: var(--font-sub);
    font-size: 14px;
    letter-spacing: 0.18em;
    color: var(--gold-leaf);
    margin-top: 4px;
}
.annal__entry {
    padding: var(--s-2);
    background: var(--ink-velvet);
    border: 1px solid rgba(176, 138, 66, 0.5);
    font-size: 16px;
    line-height: 1.6;
}
.annal__row--left .annal__entry  { grid-column: 1; text-align: right; }
.annal__row--right .annal__entry { grid-column: 3; text-align: left; }

/* ============ CONSULT FORM ============ */
.consult {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-2);
    align-items: center;
    margin: var(--s-3) 0;
    padding: var(--s-3);
    border: 1px solid var(--gold-tarnished);
    background: var(--ink-velvet);
}
.consult__label {
    font-family: var(--font-sc);
    font-size: 12px;
    letter-spacing: 0.24em;
    color: var(--gold-tarnished);
    text-transform: uppercase;
}
.consult__input {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--gold-tarnished);
    color: var(--paper-cotton);
    font-family: var(--font-body);
    font-size: 18px;
    padding: var(--s-1) 0;
    outline: none;
    font-style: italic;
}
.consult__input::placeholder {
    color: var(--gold-verdigris);
    opacity: 0.7;
    font-style: italic;
}
.consult__btn {
    background: var(--burgundy-stamp);
    color: var(--gold-leaf);
    border: 1px solid var(--gold-tarnished);
    padding: var(--s-1) var(--s-3);
    font-family: var(--font-sub);
    font-size: 13px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 280ms ease, color 280ms ease;
}
.consult__btn:hover {
    background: var(--gold-tarnished);
    color: var(--ink-onyx);
}
.consult__result {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--gold-leaf);
    margin: var(--s-2) 0 0;
    text-align: center;
    min-height: 1.5em;
}

/* ============ PATRONAGE ============ */
.patronage {
    list-style: none;
    margin: var(--s-3) 0;
    padding: 0;
}
.patronage li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-2);
    padding: var(--s-2) 0;
    border-bottom: 1px dotted rgba(176, 138, 66, 0.4);
}
.patronage__name {
    font-family: var(--font-display);
    font-size: 19px;
    letter-spacing: 0.08em;
    color: var(--paper-cotton);
}
.patronage__role {
    font-family: var(--font-sc);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--gold-tarnished);
    text-transform: uppercase;
    align-self: center;
}

/* ============ COLOPHON / SWATCH ============ */
.swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--s);
    border: 1px solid var(--gold-tarnished);
    vertical-align: middle;
    margin: 0 2px;
}
.strike-date {
    font-family: var(--font-sc);
    font-size: 13px;
    letter-spacing: 0.24em;
    color: var(--gold-tarnished);
    text-transform: uppercase;
    text-align: center;
    margin-top: var(--s-3) !important;
    padding: var(--s-2) 0;
    border-top: 1px solid var(--gold-tarnished);
    border-bottom: 1px solid var(--gold-tarnished);
}
.strike-date sup { font-size: 0.65em; }

/* ============ ENDNOTES ============ */
.endnotes {
    background: var(--ink-velvet);
    margin: var(--s-7) calc(var(--margin-w) * -0.25) 0;
    padding: var(--s-5) var(--s-5) var(--s-7);
    border-top: 2px solid var(--gold-tarnished);
    border-bottom: 2px solid var(--gold-tarnished);
    position: relative;
}
.endnotes__head {
    font-family: var(--font-sub);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    letter-spacing: 0.18em;
    color: var(--gold-leaf);
    text-transform: uppercase;
    text-align: center;
    margin: var(--s-3) 0 var(--s-4);
}
.endnotes__list {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--s-5);
    list-style: none;
    counter-reset: ennum;
    column-count: 2;
    column-gap: var(--s-5);
    column-rule: 1px solid var(--gold-tarnished);
}
.endnotes__list li {
    break-inside: avoid;
    margin-bottom: var(--s-2);
    padding-left: var(--s-3);
    text-indent: -var(--s-3);
    font-size: 15px;
    line-height: 1.6;
    color: var(--paper-aged);
    border-left: 1px solid rgba(176, 138, 66, 0.3);
    padding-left: var(--s-2);
    margin-left: 0;
}
.endnotes__num {
    font-family: var(--font-sc);
    color: var(--gold-leaf);
    margin-right: var(--s-1);
    letter-spacing: 0.18em;
}
.foot-zig {
    width: clamp(280px, 50vw, 480px);
    height: auto;
    display: block;
    margin: var(--s-5) auto var(--s-3);
}
.footer-credit {
    font-family: var(--font-sc);
    font-size: 12px;
    letter-spacing: 0.24em;
    color: var(--gold-tarnished);
    text-transform: uppercase;
    text-align: center;
    margin: var(--s-2) 0;
}
.footer-cookie {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 13px;
    color: var(--gold-verdigris);
    text-align: center;
    max-width: 640px;
    margin: var(--s-3) auto 0;
    line-height: 1.6;
}

/* ============ LINK / UNDERLINE-DRAW ============ */
a {
    color: var(--gold-leaf);
    text-decoration: none;
    background-image: linear-gradient(to right, var(--gold-leaf), var(--gold-leaf));
    background-position: 0 100%;
    background-size: 0% 1px;
    background-repeat: no-repeat;
    transition: background-size 380ms ease-out;
    padding-bottom: 2px;
}
a:hover {
    background-size: 100% 1px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .spread {
        grid-template-columns: var(--margin-w) minmax(0, 1fr);
    }
    .well { grid-column: 2; }
    .margin--right {
        grid-column: 1 / -1;
        order: 9;
        min-height: auto;
        margin-top: var(--s-5);
    }
    .margin--right .fluted-column {
        display: none;
    }
    .rail {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        border-top: 1px solid var(--gold-tarnished);
    }
    .endnotes__list { column-count: 1; }
}

@media (max-width: 768px) {
    .page { padding: var(--s-5) var(--s-3) var(--s-3); }
    .spread {
        grid-template-columns: 1fr;
    }
    .margin--left {
        grid-column: 1;
        min-height: auto;
        margin-bottom: var(--s-3);
    }
    .margin--left .fluted-column {
        display: none;
    }
    .ledger-numerals {
        flex-direction: row;
        gap: var(--s-2);
        justify-content: center;
        margin-top: 0;
    }
    .well { grid-column: 1; }
    .ledger { grid-template-columns: 1fr; }
    .ledger__fold { display: none; }
    .annal::before { left: 24px; }
    .annal__row { grid-template-columns: 48px 1fr; }
    .annal__year { grid-column: 1; }
    .annal__row--left .annal__entry,
    .annal__row--right .annal__entry { grid-column: 2; text-align: left; }
    .corner { width: 40px; height: 40px; }
    .spine { display: none; }
    .consult { grid-template-columns: 1fr; }
    .endnotes { margin-left: 0; margin-right: 0; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    #sunburst { animation: none; }
    .cartouche.is-drawn .cartouche__path { animation: none; stroke-dashoffset: 0; }
    .spine { transition: none; }
    a { transition: none; }
}

/* ============ PRINT ============ */
@media print {
    body {
        background: var(--paper-cotton) !important;
        color: var(--ink-onyx) !important;
    }
    .corner, .spine, .sunburst, .rail, .consult { display: none !important; }
    .margin {
        background: transparent !important;
        border-color: rgba(0,0,0,0.35) !important;
    }
    .ink-velvet, .ledger, .endnotes, .annal__entry, .ticker {
        background: transparent !important;
    }
    .endnotes {
        background: transparent !important;
        border-color: rgba(0,0,0,0.5) !important;
    }
    .masthead__title, .entry__head, .definition__term, .endnotes__head {
        color: rgba(0,0,0,0.65) !important;
    }
    .gold-tarnished, .ziggurat-frame g[fill="#B08A42"] rect {
        fill: rgba(0,0,0,0.35) !important;
    }
    a { color: rgba(0,0,0,0.7) !important; }
    .marginalia, .lede em, .entry em { color: rgba(0,0,0,0.55) !important; }
    .strike-date, .footer-credit { color: rgba(0,0,0,0.55) !important; }
}