/* ============================================================
   political.wiki — An Illuminated Encyclopedia of Governance
   Dark-academia / illuminated-manuscript treatment
   Palette: #1C1014 #F0E6D3 #C9A84C #2B1D11 #D4C5B0 #8B3A3A #5C6B4F
   Type:    Cormorant Garamond, Libre Baskerville, IM Fell English
   ============================================================ */

:root {
    --bg-mahogany:   #1C1014;
    --bg-mahogany-2: #2B1D11;
    --surface-ivory: #F0E6D3;
    --accent-gold:   #C9A84C;
    --text-dark:     #2B1D11;
    --text-on-dark:  #D4C5B0;
    --wax-red:       #8B3A3A;
    --olive-ink:     #5C6B4F;

    --font-display: "Cormorant Garamond", "Cormorant", "EB Garamond", Garamond, serif;
    --font-body:    "Libre Baskerville", "Libre Caslon Text", Georgia, serif;
    --font-margin:  "IM Fell English", "Libre Baskerville", Georgia, serif;

    --folio-pad-x: clamp(28px, 5vw, 96px);
    --folio-pad-y: clamp(40px, 7vh, 112px);

    --rule-gold:    repeating-linear-gradient(90deg,
                        #C9A84C 0 1px,
                        rgba(201, 168, 76, 0) 1px 6px);
    --rule-engraved: repeating-linear-gradient(90deg,
                        rgba(43, 29, 17, 0.55) 0 2px,
                        transparent 2px 5px,
                        rgba(43, 29, 17, 0.18) 5px 7px,
                        transparent 7px 12px);

    --easing-page: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-mahogany);
    color: var(--text-on-dark);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    /* Layered background — deep mahogany with a faint vellum bloom */
    background:
        radial-gradient(ellipse 60% 45% at 18% 22%, rgba(201, 168, 76, 0.08), transparent 70%),
        radial-gradient(ellipse 70% 55% at 82% 78%, rgba(139, 58, 58, 0.10), transparent 75%),
        linear-gradient(180deg, #1C1014 0%, #18080C 50%, #1C1014 100%);
    min-height: 100vh;
    position: relative;
}

.grain-svg { position: absolute; width: 0; height: 0; }

.grain-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
    opacity: 0.55;
}
.grain-dark {
    background-color: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch' seed='13'/><feColorMatrix values='0 0 0 0 0.11   0 0 0 0 0.06   0 0 0 0 0.07   0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 320px 320px;
}

/* -------------------------------------------------------------
   Reading progress (gold thread)
   ------------------------------------------------------------- */
.reading-progress {
    position: fixed;
    top: 0;
    right: 0;
    width: 2px;
    height: 100vh;
    background: linear-gradient(180deg, rgba(201, 168, 76, 0.08), rgba(201, 168, 76, 0.04) 50%, rgba(201, 168, 76, 0.08));
    z-index: 50;
}
.reading-progress__fill {
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #E8C56A 0%, #C9A84C 50%, #8B3A3A 100%);
    box-shadow: 0 0 14px rgba(201, 168, 76, 0.55);
    transition: height 220ms linear;
}

/* -------------------------------------------------------------
   Marginalia (sticky left navigation)
   ------------------------------------------------------------- */
.marginalia {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100vh;
    z-index: 40;
    padding: 48px 28px 36px 36px;
    color: var(--text-on-dark);
    background:
        linear-gradient(180deg, rgba(43, 29, 17, 0.0) 0%, rgba(43, 29, 17, 0.35) 100%),
        linear-gradient(90deg, rgba(28, 16, 20, 1) 0%, rgba(28, 16, 20, 0.85) 70%, rgba(28, 16, 20, 0) 100%);
    border-right: 1px solid rgba(201, 168, 76, 0.18);
    overflow: hidden;
}

.marginalia::after {
    /* Vertical gold thread along the inner edge */
    content: "";
    position: absolute;
    top: 64px;
    bottom: 64px;
    right: 18px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(201, 168, 76, 0.4) 12%, rgba(201, 168, 76, 0.4) 88%, transparent);
}

.marginalia__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.marginalia__crest {
    width: 86px;
    height: 86px;
    margin-bottom: 6px;
    filter: drop-shadow(0 0 18px rgba(201, 168, 76, 0.18));
}
.crest-svg { width: 100%; height: 100%; }

.marginalia__title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--surface-ivory);
}
.marginalia__sigil {
    font-family: var(--font-display);
    color: var(--accent-gold);
    font-size: 28px;
    line-height: 1;
}
.marginalia__brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    font-variant: small-caps;
}
.marginalia__subtitle {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(212, 197, 176, 0.78);
    margin: -10px 0 4px 0;
}

/* Folio nav */
.folio-nav {
    margin-top: 6px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}
.folio-nav::-webkit-scrollbar { width: 4px; }
.folio-nav::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.18); }

.folio-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.folio-nav__item {
    display: grid;
    grid-template-columns: 22px 28px 1fr;
    align-items: baseline;
    gap: 6px;
    padding: 9px 10px 9px 4px;
    cursor: pointer;
    border-left: 1px solid transparent;
    color: rgba(212, 197, 176, 0.55);
    transition: color 600ms var(--easing-page),
                border-color 600ms var(--easing-page),
                background 600ms var(--easing-page);
    font-family: var(--font-margin);
    font-size: 13px;
    letter-spacing: 0.02em;
}
.folio-nav__pilcrow {
    font-family: var(--font-display);
    color: rgba(201, 168, 76, 0.35);
    font-size: 18px;
    transition: color 600ms var(--easing-page);
}
.folio-nav__numeral {
    font-family: var(--font-display);
    font-style: italic;
    color: rgba(212, 197, 176, 0.55);
    font-size: 14px;
    letter-spacing: 0.06em;
}
.folio-nav__label {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 14px;
}
.folio-nav__item:hover {
    color: var(--surface-ivory);
}
.folio-nav__item:hover .folio-nav__pilcrow {
    color: var(--accent-gold);
}
.folio-nav__item.is-active {
    color: var(--surface-ivory);
    background: linear-gradient(90deg, rgba(201, 168, 76, 0.08) 0%, transparent 100%);
    border-left: 1px solid var(--accent-gold);
}
.folio-nav__item.is-active .folio-nav__pilcrow {
    color: var(--accent-gold);
    text-shadow: 0 0 12px rgba(201, 168, 76, 0.55);
}
.folio-nav__item.is-active .folio-nav__numeral {
    color: var(--accent-gold);
}

.marginalia__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(201, 168, 76, 0.15);
}
.marginalia__seal { display: inline-flex; }
.marginalia__year {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.18em;
    color: rgba(201, 168, 76, 0.7);
}

/* -------------------------------------------------------------
   Folio stack (the spine of the document)
   ------------------------------------------------------------- */
.folio-stack {
    position: relative;
    margin-left: 320px;
    z-index: 5;
}

.folio {
    position: relative;
    min-height: 100vh;
    padding: var(--folio-pad-y) var(--folio-pad-x);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1200ms var(--easing-page),
                transform 1200ms var(--easing-page);
}
.folio.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Subtle vellum bloom behind each spread */
.folio::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 40% at 70% 50%, rgba(240, 230, 211, 0.04), transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(43, 29, 17, 0.35) 100%);
    z-index: -1;
}

/* Folio chrome (numeral + engraved rule + date) */
.folio__chrome {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    margin-bottom: 36px;
    color: var(--accent-gold);
}
.folio__numeral,
.folio__date {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 13px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(201, 168, 76, 0.85);
}
.folio__rule {
    height: 1px;
    background: var(--rule-gold);
    opacity: 0.6;
}

/* Two-column manuscript spread: 40 / 60 */
.folio__body {
    display: grid;
    grid-template-columns: minmax(240px, 40%) minmax(0, 60%);
    gap: clamp(28px, 5vw, 88px);
    align-items: start;
    flex: 1;
}

.folio__left {
    position: sticky;
    top: var(--folio-pad-y);
    align-self: start;
    padding-right: 8px;
}

.folio__eyebrow {
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--accent-gold);
    font-size: 13px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}

.folio__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(48px, 6.4vw, 96px);
    line-height: 0.92;
    letter-spacing: -0.01em;
    margin: 0 0 22px 0;
    color: var(--surface-ivory);
    font-variant: small-caps;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.folio__title .title-line {
    display: block;
}
.folio__title .title-line--accent {
    color: var(--accent-gold);
    font-style: italic;
    font-variant: normal;
    text-shadow: 0 0 40px rgba(201, 168, 76, 0.18);
}

.folio__title--display {
    font-size: clamp(64px, 9vw, 132px);
    line-height: 0.88;
}

.folio__kicker {
    font-family: var(--font-body);
    font-style: italic;
    color: rgba(212, 197, 176, 0.85);
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 24px 0;
    max-width: 28em;
}
.folio__kicker .pilcrow {
    color: var(--accent-gold);
    font-family: var(--font-display);
    font-size: 22px;
    margin-right: 6px;
    vertical-align: -2px;
}

/* Margin index (small Roman list in sidebar) */
.margin-index {
    list-style: none;
    margin: 18px 0 0 0;
    padding: 0;
    border-left: 1px solid rgba(201, 168, 76, 0.18);
    padding-left: 14px;
}
.margin-index__item {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 14px;
    color: rgba(212, 197, 176, 0.78);
    line-height: 1.7;
}
.margin-index__roman {
    color: var(--accent-gold);
    margin-right: 6px;
    font-style: normal;
    letter-spacing: 0.05em;
}

/* Ornamental rules */
.ornamental-rule {
    height: 12px;
    margin: 24px 0 8px 0;
    background-image: var(--rule-engraved);
    background-repeat: no-repeat;
    background-size: 100% 1px, 100% 1px;
    background-position: top, bottom;
    position: relative;
}
.ornamental-rule::before,
.ornamental-rule::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(201, 168, 76, 0.5), transparent);
}
.ornamental-rule::before { left: 0; }
.ornamental-rule::after  { right: 0; }
.ornamental-rule--triple {
    height: 22px;
    background:
        linear-gradient(180deg, transparent calc(50% - 6px), rgba(201, 168, 76, 0.55) calc(50% - 6px) calc(50% - 5px), transparent calc(50% - 5px)),
        linear-gradient(180deg, transparent 50%, rgba(201, 168, 76, 0.85) 50% calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(180deg, transparent calc(50% + 5px), rgba(201, 168, 76, 0.55) calc(50% + 5px) calc(50% + 6px), transparent calc(50% + 6px));
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.ornamental-rule--triple::before,
.ornamental-rule--triple::after {
    content: "❦";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-gold);
    background: var(--bg-mahogany);
    padding: 0 10px;
    font-family: var(--font-display);
    font-size: 14px;
    width: auto;
    height: auto;
    background: transparent;
}
.ornamental-rule--triple::before {
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-mahogany);
    padding: 0 14px;
}
.ornamental-rule--triple::after { display: none; }

.ornamental-rule--inline {
    height: 8px;
    margin: 18px auto;
    width: 60%;
    opacity: 0.6;
}

/* -------------------------------------------------------------
   Right column — parchment panels
   ------------------------------------------------------------- */
.folio__right {
    position: relative;
    padding: 0;
}

.parchment {
    position: relative;
    background: var(--surface-ivory);
    background-image:
        radial-gradient(ellipse 80% 60% at 30% 20%, rgba(212, 197, 176, 0.35), transparent 70%),
        radial-gradient(ellipse 70% 60% at 80% 80%, rgba(201, 168, 76, 0.07), transparent 70%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch' seed='7'/><feColorMatrix values='0 0 0 0 0.95   0 0 0 0 0.90   0 0 0 0 0.83   0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: auto, auto, 280px 280px;
    color: var(--text-dark);
    padding: clamp(32px, 4vw, 64px) clamp(28px, 4vw, 56px);
    box-shadow:
        0 0 0 1px rgba(43, 29, 17, 0.12),
        0 24px 60px -28px rgba(0, 0, 0, 0.8),
        0 0 90px rgba(201, 168, 76, 0.04);
    border-radius: 2px;
}

/* Subtle ruled-paper effect & worn edges */
.parchment::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(43, 29, 17, 0.16);
    pointer-events: none;
}
.parchment::after {
    content: "";
    position: absolute;
    inset: 22px;
    border: 1px dashed rgba(43, 29, 17, 0.08);
    pointer-events: none;
}

.parchment--prologue {
    transform: rotate(-0.35deg);
}
.parchment--layered {
    transform: rotate(0.25deg);
}
.parchment--columns { /* doctrines folio */
    transform: rotate(-0.15deg);
}
.parchment--ledger {
    transform: rotate(0.2deg);
}
.parchment--gallery {
    transform: rotate(-0.2deg);
}
.parchment--archive {
    transform: rotate(0.15deg);
}
.parchment--colophon {
    transform: rotate(-0.1deg);
}

/* Manuscript text */
.manuscript-text {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.85;
    color: var(--text-dark);
    margin: 0 0 18px 0;
    text-align: justify;
    hyphens: auto;
}
.manuscript-text em {
    font-style: italic;
    color: var(--bg-mahogany-2);
}

/* Drop-cap (illuminated capital) — applied via class to the paragraph */
.drop-cap::first-letter {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent-gold);
    font-size: 96px;
    line-height: 0.85;
    float: left;
    padding: 6px 14px 0 0;
    margin: 4px 8px -4px 0;
    text-shadow: 0 0 28px rgba(201, 168, 76, 0.35);
    /* Knotwork SVG border */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><defs><pattern id='knot' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'><path d='M0 5 Q2.5 0 5 5 T10 5' fill='none' stroke='%23C9A84C' stroke-width='0.6' opacity='0.55'/><path d='M5 0 Q10 2.5 5 5 T5 10' fill='none' stroke='%23C9A84C' stroke-width='0.6' opacity='0.55'/></pattern></defs><rect width='80' height='80' fill='none' stroke='%23C9A84C' stroke-width='1' opacity='0.55'/><rect x='3' y='3' width='74' height='74' fill='none' stroke='url(%23knot)' stroke-width='2'/></svg>");
    background-repeat: no-repeat;
    background-position: -4px -2px;
    background-size: 102px 102px;
    padding-left: 12px;
}

/* Pull-quotes — float in overlapping parchment-toned boxes */
.pull-quote {
    position: relative;
    background: linear-gradient(180deg, #F7EFDD 0%, #ECDDC0 100%);
    color: var(--bg-mahogany-2);
    padding: 26px 32px 22px 36px;
    margin: 28px 0;
    box-shadow:
        0 0 0 1px rgba(201, 168, 76, 0.4),
        0 18px 40px -22px rgba(0, 0, 0, 0.55);
    max-width: 22em;
    font-family: var(--font-display);
    z-index: 2;
}
.pull-quote::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(201, 168, 76, 0.5);
    pointer-events: none;
}
.pull-quote--right {
    float: right;
    margin: 6px -16px 18px 28px;
    transform: rotate(1deg);
}
.pull-quote--left {
    float: left;
    margin: 6px 28px 18px -20px;
    transform: rotate(-1deg);
}
.pull-quote--center {
    margin: 30px auto;
    text-align: center;
    transform: rotate(0.3deg);
    max-width: 28em;
}

.pull-quote__mark {
    position: absolute;
    top: -18px;
    left: 14px;
    font-family: var(--font-display);
    font-size: 76px;
    color: var(--accent-gold);
    line-height: 1;
    font-weight: 700;
}
.pull-quote__text {
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.4;
    color: var(--bg-mahogany-2);
    margin: 0 0 10px 0;
}
.pull-quote__attrib {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 13px;
    color: var(--olive-ink);
    margin: 0;
    letter-spacing: 0.04em;
}

/* Entry list (Folio II) */
.entry-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 22px;
    clear: both;
}
.entry {
    background: rgba(255, 250, 235, 0.55);
    padding: 18px 20px;
    border-left: 2px solid var(--accent-gold);
    box-shadow: 0 0 0 1px rgba(43, 29, 17, 0.07);
}
.entry__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    margin: 0 0 4px 0;
    color: var(--bg-mahogany-2);
    font-variant: small-caps;
    letter-spacing: 0.02em;
}
.entry__date {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 13px;
    color: var(--wax-red);
    margin: 0 0 8px 0;
    letter-spacing: 0.06em;
}
.entry__body {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-dark);
    margin: 0;
}

/* Doctrines grid (Folio III) */
.doctrines-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin: 22px 0 8px 0;
    clear: both;
}
.doctrine {
    background: rgba(255, 250, 235, 0.6);
    padding: 22px 24px 20px 24px;
    border: 1px solid rgba(43, 29, 17, 0.12);
    position: relative;
    transition: transform 700ms var(--easing-page),
                box-shadow 700ms var(--easing-page);
}
.doctrine::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(201, 168, 76, 0.35);
    pointer-events: none;
}
.doctrine:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.5),
                0 12px 30px -16px rgba(0, 0, 0, 0.45);
}
.doctrine__symbol {
    font-family: var(--font-display);
    color: var(--accent-gold);
    font-size: 28px;
    line-height: 1;
    display: inline-block;
    margin-bottom: 8px;
    text-shadow: 0 0 18px rgba(201, 168, 76, 0.35);
}
.doctrine__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    margin: 0 0 4px 0;
    color: var(--bg-mahogany-2);
    font-variant: small-caps;
    letter-spacing: 0.01em;
}
.doctrine__sub {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 13px;
    color: var(--olive-ink);
    margin: 0 0 10px 0;
    letter-spacing: 0.04em;
}
.doctrine__body {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-dark);
    margin: 0;
}

/* Ledger (Folio IV) */
.ledger {
    margin: 22px 0;
    border-top: 1px solid rgba(43, 29, 17, 0.45);
    border-bottom: 1px solid rgba(43, 29, 17, 0.45);
    background: rgba(255, 250, 235, 0.4);
}
.ledger__row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr;
    gap: 18px;
    padding: 12px 14px;
    border-bottom: 1px dashed rgba(43, 29, 17, 0.18);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-dark);
    align-items: baseline;
}
.ledger__row:last-child { border-bottom: none; }
.ledger__row--head {
    background: rgba(43, 29, 17, 0.08);
    border-bottom: 1px solid var(--bg-mahogany-2);
}
.ledger__row--head .ledger__col {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--bg-mahogany-2);
}
.ledger__col--name {
    font-family: var(--font-display);
    font-weight: 600;
    font-variant: small-caps;
    font-size: 18px;
    letter-spacing: 0.01em;
    color: var(--bg-mahogany-2);
}
.ledger__row:not(.ledger__row--head):nth-child(even) {
    background: rgba(212, 197, 176, 0.18);
}
.ledger__col--years {
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--wax-red);
    text-align: right;
    letter-spacing: 0.05em;
}

/* Figures gallery (Folio V) */
.figures-list {
    list-style: none;
    margin: 16px 0 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.figure {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    padding: 16px 18px 18px 12px;
    border-left: 1px solid rgba(201, 168, 76, 0.45);
    background: rgba(255, 250, 235, 0.45);
    transition: background 700ms var(--easing-page);
}
.figure:hover {
    background: rgba(255, 250, 235, 0.85);
}
.figure__sigil {
    font-family: var(--font-display);
    color: var(--accent-gold);
    font-size: 26px;
    line-height: 1;
    text-shadow: 0 0 12px rgba(201, 168, 76, 0.4);
}
.figure__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    margin: 0;
    color: var(--bg-mahogany-2);
    font-variant: small-caps;
    letter-spacing: 0.01em;
}
.figure__years {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 13px;
    color: var(--wax-red);
    margin: 2px 0 8px 0;
    letter-spacing: 0.04em;
}
.figure__quote {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-dark);
    margin: 0 0 8px 0;
    border-left: 1px solid rgba(201, 168, 76, 0.55);
    padding-left: 10px;
}
.figure__note {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 13px;
    color: var(--olive-ink);
    line-height: 1.6;
    margin: 0;
}

/* Archive search (Folio VI) */
.archive-search {
    margin-top: 24px;
}
.archive-search__label {
    display: block;
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--accent-gold);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.archive-search__field {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: baseline;
    gap: 6px;
    border-bottom: 1px solid var(--accent-gold);
    padding: 4px 0 6px 0;
    background: linear-gradient(180deg, transparent 0%, rgba(201,168,76,0.05) 100%);
}
.archive-search__pilcrow {
    font-family: var(--font-display);
    color: var(--accent-gold);
    font-size: 22px;
    line-height: 1;
}
.archive-search__input {
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--surface-ivory);
    width: 100%;
    padding: 4px 0;
    font-style: italic;
}
.archive-search__input::placeholder {
    color: rgba(212, 197, 176, 0.45);
    font-style: italic;
}
.archive-search__hint {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 12px;
    color: rgba(212, 197, 176, 0.6);
    margin: 8px 0 0 0;
    letter-spacing: 0.04em;
}

.archive-list {
    list-style: none;
    margin: 18px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.archive-entry {
    padding: 14px 18px 14px 18px;
    border-bottom: 1px dashed rgba(43, 29, 17, 0.22);
    transition: background 500ms var(--easing-page),
                opacity 500ms var(--easing-page),
                transform 500ms var(--easing-page);
}
.archive-entry:last-child { border-bottom: none; }
.archive-entry.is-hidden {
    display: none;
}
.archive-entry.is-match {
    background: linear-gradient(90deg, rgba(201, 168, 76, 0.13) 0%, transparent 100%);
}
.archive-entry__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    margin: 0 0 2px 0;
    color: var(--bg-mahogany-2);
    font-variant: small-caps;
    letter-spacing: 0.01em;
}
.archive-entry__meta {
    font-family: var(--font-margin);
    font-style: italic;
    font-size: 13px;
    color: var(--wax-red);
    margin: 0 0 6px 0;
    letter-spacing: 0.04em;
}
.archive-entry__body {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text-dark);
    margin: 0;
}
.archive-empty {
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--olive-ink);
    text-align: center;
    margin: 20px 0;
    font-size: 15px;
}

/* Colophon (Folio VII) */
.colophon-list {
    margin: 18px 0;
    padding: 0;
}
.colophon-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 18px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(43, 29, 17, 0.18);
}
.colophon-row__term {
    font-family: var(--font-margin);
    font-style: italic;
    color: var(--wax-red);
    font-size: 14px;
    letter-spacing: 0.06em;
    margin: 0;
}
.colophon-row__def {
    font-family: var(--font-body);
    color: var(--text-dark);
    font-size: 15px;
    margin: 0;
}
.colophon-final {
    font-family: var(--font-display);
    font-style: italic;
    text-align: center;
    font-size: 18px;
    color: var(--bg-mahogany-2);
    margin-top: 22px;
}
.colophon-pilcrow {
    color: var(--accent-gold);
    font-size: 22px;
    margin: 0 6px;
}

/* Folio corner ornaments */
.folio__corner {
    position: absolute;
    width: 60px;
    height: 60px;
    pointer-events: none;
    z-index: 3;
    opacity: 0.85;
    filter: drop-shadow(0 0 10px rgba(201, 168, 76, 0.18));
}
.folio__corner--tr { top: -8px; right: -8px; }
.folio__corner--bl { bottom: -8px; left: -8px; }

/* Folio page number (Roman, bottom centre) */
.folio__page-no {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-margin);
    font-style: italic;
    color: rgba(201, 168, 76, 0.55);
    font-size: 13px;
    letter-spacing: 0.32em;
}

/* -------------------------------------------------------------
   Per-folio chromatic accents
   ------------------------------------------------------------- */
.folio--prologue::before {
    background:
        radial-gradient(ellipse 60% 50% at 75% 40%, rgba(201, 168, 76, 0.10), transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(43, 29, 17, 0.4) 100%);
}
.folio--origins::before {
    background:
        radial-gradient(ellipse 60% 50% at 25% 60%, rgba(92, 107, 79, 0.16), transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(43, 29, 17, 0.4) 100%);
}
.folio--doctrines::before {
    background:
        radial-gradient(ellipse 70% 55% at 70% 30%, rgba(139, 58, 58, 0.12), transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(43, 29, 17, 0.4) 100%);
}
.folio--institutions::before {
    background:
        radial-gradient(ellipse 60% 50% at 30% 50%, rgba(201, 168, 76, 0.10), transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(43, 29, 17, 0.4) 100%);
}
.folio--figures::before {
    background:
        radial-gradient(ellipse 60% 50% at 80% 50%, rgba(92, 107, 79, 0.12), transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(43, 29, 17, 0.4) 100%);
}
.folio--archive::before {
    background:
        radial-gradient(ellipse 60% 50% at 25% 30%, rgba(139, 58, 58, 0.10), transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(43, 29, 17, 0.4) 100%);
}
.folio--colophon::before {
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201, 168, 76, 0.13), transparent 70%),
        linear-gradient(180deg, transparent 0%, rgba(43, 29, 17, 0.5) 100%);
}

/* -------------------------------------------------------------
   Responsive — collapse to single-column manuscript
   ------------------------------------------------------------- */
@media (max-width: 1180px) {
    .marginalia { width: 280px; }
    .folio-stack { margin-left: 280px; }
    .folio__title { font-size: clamp(40px, 6vw, 80px); }
    .entry-list { grid-template-columns: 1fr 1fr; }
    .figures-list { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .marginalia {
        position: relative;
        width: 100%;
        height: auto;
        padding: 28px 24px;
        border-right: none;
        border-bottom: 1px solid rgba(201, 168, 76, 0.18);
    }
    .marginalia::after { display: none; }
    .marginalia__inner { gap: 16px; }
    .marginalia__crest { width: 72px; height: 72px; }
    .folio-nav__list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px 14px;
    }
    .folio-nav__item {
        grid-template-columns: 18px 22px 1fr;
        padding: 6px 8px;
        font-size: 12px;
    }
    .marginalia__footer { padding-top: 14px; }
    .folio-stack { margin-left: 0; }
    .folio { padding: 56px 24px; }
    .folio__body {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .folio__left { position: relative; top: auto; }
    .folio__title--display { font-size: clamp(56px, 12vw, 96px); }
    .doctrines-grid { grid-template-columns: 1fr; }
    .entry-list { grid-template-columns: 1fr; }
    .pull-quote--right,
    .pull-quote--left {
        float: none;
        margin: 22px auto;
        max-width: 100%;
        transform: none;
    }
    .ledger__row {
        grid-template-columns: 1.6fr 1fr 0.6fr;
        gap: 10px;
    }
    .colophon-row { grid-template-columns: 110px 1fr; }
}

@media (max-width: 540px) {
    body { font-size: 16px; }
    .parchment { padding: 28px 20px; }
    .drop-cap::first-letter {
        font-size: 72px;
        background-size: 78px 78px;
        padding-left: 8px;
    }
    .pull-quote__text { font-size: 19px; }
    .pull-quote__mark { font-size: 60px; }
    .ledger__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .ledger__col--years { text-align: left; }
    .colophon-row { grid-template-columns: 1fr; gap: 2px; }
    .figure { grid-template-columns: 30px 1fr; }
}