/* MasqproT.com — A Specimen Archive of Hidden Protocols
   Goblincore research laboratory meets scholarly publishing. */

:root {
    --c-bg: #e8dcc8;        /* Aged Parchment */
    --c-card: #f5f0e6;      /* Cream Linen */
    --c-deep: #2a1f14;      /* Forest Loam */
    --c-body: #3d3328;      /* Charcoal Earth */
    --c-copper: #8b7355;    /* Oxidized Copper */
    --c-lichen: #6b7c5e;    /* Lichen Green */
    --c-brass: #c9a84c;     /* Aged Brass */
    --c-flare: #f4e8c1;     /* Dusty Sunbeam */
    --c-shadow: #1e1812;    /* Peat Dark */
    --c-ink-faded: #7a6b5d; /* Faded Ink */
    --c-mint-anomaly: #4aeadc;
    --c-lilac-anomaly: #c4b5fd;
    --c-pink-spore: #f9a8d4;
    --design-tool-token: 0; /* Tool: */

    /* Design vocabulary retained without fetching external assets: Interactive Discovery Tool:** While other designs use cursor-follow for decorative purposes Intersection Observer. Entry animation: `opacity: 0; JetBrains Mono" (Google Fonts JetBrains Mono" at 16px in `#6b7c5e`. Playfair Display serif Playfair Display" (Google Fonts Playfair Display" at `clamp(3.5rem Playfair Display" at 24px Source Serif 4" (Google Fonts Source Serif 4" at 14px listing fabricated catalog metadata. A single horizontal rule in `#8b7355` at 0.3 opacity separates the colophon title from the body. */

    --font-display: "Playfair Display", "Lora", Georgia, serif;
    --font-body: "Source Serif 4", "Lora", Georgia, serif;
    --font-mono: "JetBrains Mono", "Inter", ui-monospace, monospace;
    --font-hand: "Caveat", "Lora", cursive;
    --font-ui: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

    --mx: 50%;
    --my: 30%;
    --flare-x: 78%;
    --flare-y: 22%;
}

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

html, body { width: 100%; overflow-x: hidden; }

body {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
    font-variation-settings: 'wght' 400;
    line-height: 1.65;
    color: var(--c-body);
    background: var(--c-bg);
    min-height: 100vh;
    position: relative;
    cursor: default;
}

em { font-style: italic; }

/* ============================================================
   Noise overlay (aged paper grain)
   ============================================================ */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0 0.08  0 0 0 0.08 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* ============================================================
   Marginalia Rail
   ============================================================ */
.marginalia-rail {
    position: fixed;
    right: 0;
    top: 0;
    width: 60px;
    height: 100vh;
    z-index: 30;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 80px 0;
    font-family: var(--font-mono);
}

.marginalia-rail .glyph {
    display: block;
    text-align: center;
    font-size: 16px;
    color: var(--c-lichen);
    opacity: 0.25;
    transform: scale(1);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, color 0.3s ease-out;
    line-height: 1;
    font-weight: 500;
}

.marginalia-rail .glyph.active {
    opacity: 0.9;
    transform: scale(1.55);
    color: var(--c-copper);
    text-shadow: 0 0 8px rgba(244,232,193,0.6);
}

.marginalia-rail .glyph.near {
    opacity: 0.55;
    transform: scale(1.2);
    color: var(--c-lichen);
}

/* ============================================================
   Hero — "The Archive Entrance"
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    padding: clamp(80px, 12vh, 160px) clamp(24px, 6vw, 120px) clamp(60px, 10vh, 120px);
    background: var(--c-bg);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

/* Primary cursor-follow lens flare */
.hero-flare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(circle at var(--flare-x, 78%) var(--flare-y, 22%),
            rgba(244, 232, 193, 0.42) 0%,
            rgba(244, 232, 193, 0.22) 18%,
            rgba(244, 232, 193, 0.06) 38%,
            transparent 55%);
    transition: background 0.35s ease-out;
}

/* Secondary fixed flare for depth */
.hero-flare-secondary {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 800px 500px at 82% 18%,
            rgba(201, 168, 76, 0.14) 0%,
            transparent 60%),
        radial-gradient(circle at 12% 92%,
            rgba(107, 124, 94, 0.18) 0%,
            transparent 40%);
}

/* Decorative mushrooms */
.mushroom, .moss-tendril {
    position: absolute;
    pointer-events: none;
    opacity: 0.18;
    z-index: 1;
    animation: breathe 10s ease-in-out infinite;
}

.mushroom-1 {
    width: 90px;
    height: 108px;
    left: 6%;
    top: 14%;
    animation-duration: 11s;
}

.mushroom-2 {
    width: 70px;
    height: 84px;
    right: 14%;
    bottom: 22%;
    animation-duration: 9s;
    animation-delay: -2s;
}

.mushroom-3 {
    width: 150px;
    height: 100px;
    left: 42%;
    bottom: 6%;
    opacity: 0.14;
    animation-duration: 12s;
    animation-delay: -4s;
}

.mushroom-4 {
    width: 80px;
    height: 104px;
    right: 30%;
    top: 10%;
    opacity: 0.15;
    animation-duration: 10s;
    animation-delay: -1s;
}

.moss-1 {
    width: 260px;
    height: 78px;
    left: -30px;
    bottom: 18%;
    opacity: 0.22;
    animation-duration: 14s;
}

@keyframes breathe {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.18; }
    50% { transform: scale(1.06) rotate(0.6deg); opacity: 0.24; }
}

/* Brass catalog plate, top-right */
.hero-brass-plate {
    position: absolute;
    top: clamp(24px, 4vh, 48px);
    right: clamp(80px, 8vw, 140px);
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-copper);
    background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(139,115,85,0.06));
    border: 1px solid var(--c-copper);
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow:
        inset 0 1px 0 rgba(244,232,193,0.4),
        0 2px 6px rgba(30,24,18,0.1);
}

.plate-coordinates { opacity: 0.85; }
.plate-catalog { color: var(--c-deep); opacity: 0.7; }

.hero-content {
    position: relative;
    z-index: 4;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.hero-eyebrow {
    font-family: var(--font-hand);
    font-size: clamp(16px, 1.2vw, 20px);
    color: var(--c-ink-faded);
    margin-bottom: clamp(18px, 2vh, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.eyebrow-mark {
    color: var(--c-copper);
    font-size: 22px;
    opacity: 0.7;
}

.eyebrow-text {
    letter-spacing: 0.02em;
    font-style: italic;
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3.5rem, 3rem + 3vw, 6rem);
    color: var(--c-deep);
    letter-spacing: 0.15em;
    line-height: 1;
    margin: 0 0 clamp(16px, 2.2vh, 30px);
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.title-char {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                color 0.6s ease,
                text-shadow 0.6s ease;
    position: relative;
    color: var(--c-deep);
    text-shadow:
        1px 1px 0 rgba(201,168,76,0.15),
        -1px 0 0 rgba(139,115,85,0.18),
        2px 2px 4px rgba(30,24,18,0.12);
    will-change: transform;
}

.title-char:hover {
    color: var(--c-copper);
    transform: translateY(-4px) rotate(-1.2deg);
    text-shadow:
        1px 1px 0 rgba(201,168,76,0.45),
        -1px 0 0 rgba(139,115,85,0.38),
        0 6px 16px rgba(30,24,18,0.3);
}

.hero-subtitle {
    font-family: var(--font-hand);
    font-size: clamp(20px, 1.6vw, 28px);
    color: var(--c-ink-faded);
    font-weight: 400;
    margin-bottom: clamp(18px, 2.4vh, 32px);
    letter-spacing: 0.01em;
}

.hero-description {
    font-family: var(--font-body);
    font-size: clamp(1rem, 0.9rem + 0.3vw, 1.15rem);
    line-height: 1.75;
    color: var(--c-body);
    max-width: 640px;
    margin: 0 auto clamp(24px, 3vh, 40px);
    font-style: italic;
}

.hero-underline {
    background-image: linear-gradient(to right,
        transparent 0%, transparent 2%,
        var(--c-brass) 2%, var(--c-brass) 98%,
        transparent 98%);
    background-position: 0 92%;
    background-size: 100% 1px;
    background-repeat: no-repeat;
    padding-bottom: 1px;
}

.hero-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-lichen);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    opacity: 0.85;
}

.meta-key { color: var(--c-copper); opacity: 0.9; }
.meta-val { color: var(--c-deep); margin-left: 6px; }
.meta-sep { color: var(--c-copper); opacity: 0.5; }

.hero-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: clamp(24px, 4vh, 56px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 5;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-copper);
    opacity: 0.7;
}

.scroll-line {
    width: 1px;
    height: 36px;
    background: linear-gradient(to bottom, transparent, var(--c-copper));
}

.scroll-arrow {
    font-size: 14px;
    animation: scroll-bob 2.4s ease-in-out infinite;
}

@keyframes scroll-bob {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(4px); opacity: 0.9; }
}

/* ============================================================
   Archive section
   ============================================================ */
.archive {
    position: relative;
    z-index: 2;
    padding: clamp(60px, 8vh, 120px) clamp(24px, 6vw, 120px);
    background: var(--c-bg);
}

.archive-header {
    max-width: 1400px;
    margin: 0 auto clamp(36px, 5vh, 64px);
    padding-right: 60px; /* clear marginalia rail */
}

.archive-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-lichen);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--c-copper);
    opacity: 0.85;
}

.archive-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 1.8rem + 1.8vw, 3.6rem);
    color: var(--c-copper);
    font-feature-settings: 'smcp';
    letter-spacing: 0.02em;
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.section-sigil {
    font-family: var(--font-display);
    color: var(--c-brass);
    font-size: 0.75em;
    opacity: 0.7;
    font-style: italic;
}

.archive-lead {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(1rem, 0.9rem + 0.25vw, 1.15rem);
    color: var(--c-body);
    max-width: 720px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.archive-filter-strip {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.filter-chip {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 1px solid var(--c-copper);
    color: var(--c-copper);
    background: transparent;
    border-radius: 2px;
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
}

.filter-chip:hover {
    background: rgba(201,168,76,0.12);
    color: var(--c-deep);
}

.filter-chip.active {
    background: var(--c-copper);
    color: var(--c-bg);
}

/* ============================================================
   Card grid (specimen drawer)
   ============================================================ */
.card-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding-right: 60px; /* space for marginalia rail */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: minmax(260px, auto);
    gap: 28px;
}

.card {
    background: var(--c-card);
    border: 1px solid var(--c-copper);
    border-radius: 2px;
    padding: 36px 24px 24px;
    position: relative;
    transform: translateY(20px) rotate(calc(var(--card-rotation, 0) * 1deg));
    opacity: 0;
    transition:
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s ease,
        opacity 0.6s ease;
    box-shadow:
        0 1px 0 rgba(244,232,193,0.6) inset,
        0 1px 2px rgba(30,24,18,0.08),
        0 2px 4px rgba(30,24,18,0.06);
    display: flex;
    flex-direction: column;
    isolation: isolate;
}

.card.is-visible {
    opacity: 1;
    transform: translateY(0) rotate(calc(var(--card-rotation, 0) * 1deg));
}

.card:hover {
    transform: translateY(-6px) rotate(0deg);
    box-shadow:
        0 1px 0 rgba(244,232,193,0.6) inset,
        0 10px 34px rgba(30,24,18,0.2),
        0 2px 6px rgba(30,24,18,0.1);
    z-index: 5;
}

.card-wide {
    grid-column: span 2;
}

@media (max-width: 760px) {
    .card-wide { grid-column: span 1; }
}

/* Specimen pin */
.specimen-pin {
    position: absolute;
    top: -6px;
    left: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #e8c87a, var(--c-brass) 45%, var(--c-copper) 100%);
    box-shadow:
        0 1px 2px rgba(30,24,18,0.5),
        inset 0 1px 1px rgba(255,240,200,0.6);
    z-index: 2;
}

.specimen-pin::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244,232,193,0.35) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.card:hover .specimen-pin::after {
    opacity: 1;
}

/* Card-content */
.card-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-lichen);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dotted rgba(139,115,85,0.35);
}

.label-prefix { opacity: 0.65; }
.label-num {
    color: var(--c-copper);
    font-weight: 500;
    letter-spacing: 0.16em;
}
.label-genus {
    margin-left: auto;
    color: var(--c-ink-faded);
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.04em;
}

.card-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.1rem, 1rem + 0.3vw, 1.4rem);
    color: var(--c-deep);
    line-height: 1.2;
    margin-bottom: 6px;
    padding-right: 54px; /* clear watermark */
}

.card-taxonomy {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 13px;
    color: var(--c-lichen);
    margin-bottom: 14px;
    letter-spacing: 0.01em;
}

.card-body {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--c-body);
    flex-grow: 1;
    margin-bottom: 12px;
}

.card-handwritten {
    font-family: var(--font-hand);
    font-size: 15px;
    color: var(--c-ink-faded);
    margin-bottom: 12px;
    line-height: 1.3;
    transform: rotate(-0.4deg);
    transform-origin: left center;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding-top: 10px;
    border-top: 1px dotted rgba(139,115,85,0.3);
    color: var(--c-ink-faded);
}

.card-stamp {
    border: 1px solid var(--c-lichen);
    color: var(--c-lichen);
    padding: 2px 6px;
    border-radius: 1px;
    font-weight: 500;
    transform: rotate(-2deg);
    opacity: 0.75;
}

/* ============================================================
   Card watermark patterns (::after-style elements)
   ============================================================ */
.card-watermark {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 48px;
    height: 48px;
    pointer-events: none;
    opacity: 0.25;
    color: var(--c-lichen);
}

.pattern-circles::before,
.pattern-circles::after,
.pattern-concentric::before,
.pattern-concentric::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
}
.pattern-circles::after {
    inset: 10px;
    border-width: 1px;
}
.pattern-concentric::before { inset: 0; }
.pattern-concentric::after {
    inset: 8px;
    box-shadow: 0 0 0 8px currentColor inset;
    border-radius: 50%;
    background: transparent;
    border: 1px solid currentColor;
    opacity: 0.4;
}

.pattern-crosshair::before,
.pattern-crosshair::after {
    content: "";
    position: absolute;
    background: currentColor;
}
.pattern-crosshair::before {
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
}
.pattern-crosshair::after {
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
}
.pattern-crosshair {
    border: 1px solid currentColor;
    border-radius: 50%;
}

.pattern-dotgrid {
    background-image:
        radial-gradient(circle, currentColor 1px, transparent 1.5px);
    background-size: 10px 10px;
    opacity: 0.28;
}

.pattern-waves {
    background-image:
        repeating-linear-gradient(45deg,
            currentColor 0 1px,
            transparent 1px 8px);
    border: 1px solid currentColor;
    border-radius: 4px;
}

.pattern-starburst::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%),
        linear-gradient(45deg, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%),
        linear-gradient(90deg, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%),
        linear-gradient(135deg, transparent 47%, currentColor 47%, currentColor 53%, transparent 53%);
    opacity: 0.7;
    -webkit-mask: radial-gradient(circle, black 30%, transparent 72%);
            mask: radial-gradient(circle, black 30%, transparent 72%);
}
.pattern-starburst::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
}

.pattern-lattice {
    background-image:
        linear-gradient(90deg, currentColor 1px, transparent 1px),
        linear-gradient(0deg, currentColor 1px, transparent 1px);
    background-size: 8px 8px;
    border: 1px solid currentColor;
    opacity: 0.22;
}

.pattern-triangle::before {
    content: "";
    position: absolute;
    inset: 4px;
    background:
        linear-gradient(135deg, transparent 49%, currentColor 49%, currentColor 51%, transparent 51%),
        linear-gradient(45deg, transparent 49%, currentColor 49%, currentColor 51%, transparent 51%);
    border-bottom: 1px solid currentColor;
}

.pattern-spiral::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
}
.pattern-spiral::after {
    content: "";
    position: absolute;
    inset: 10px;
    border: 1px solid currentColor;
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.pattern-hash {
    background-image:
        repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 6px),
        repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 6px);
    opacity: 0.24;
    border-radius: 2px;
}

.pattern-nested::before,
.pattern-nested::after {
    content: "";
    position: absolute;
    border: 1px solid currentColor;
}
.pattern-nested::before { inset: 0; }
.pattern-nested::after {
    inset: 8px;
    border-radius: 50%;
}
.pattern-nested {
    box-shadow: inset 0 0 0 1px currentColor;
}

.pattern-lines {
    background-image: repeating-linear-gradient(-60deg,
        currentColor 0 1px,
        transparent 1px 6px);
    border-left: 1px solid currentColor;
    border-right: 1px solid currentColor;
    opacity: 0.32;
}

/* Moss divider */
.moss-divider {
    display: block;
    width: 300px;
    height: 40px;
    margin: clamp(40px, 6vh, 72px) auto 0;
    opacity: 0.45;
}

/* ============================================================
   Annexe — Marginalia & Method
   ============================================================ */
.annexe {
    position: relative;
    z-index: 2;
    padding: clamp(60px, 8vh, 120px) clamp(24px, 6vw, 120px);
    background:
        linear-gradient(180deg, rgba(232,220,200,0.6), rgba(245,240,230,0.8)),
        var(--c-bg);
    border-top: 1px solid rgba(139,115,85,0.25);
    border-bottom: 1px solid rgba(139,115,85,0.25);
}

.annexe-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-right: 60px;
}

.annexe-heading {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: clamp(32px, 4vh, 56px);
}

.annexe-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem);
    color: var(--c-deep);
    letter-spacing: 0.01em;
}

.annexe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(24px, 4vw, 56px);
    column-gap: clamp(32px, 6vw, 72px);
}

.annexe-block {
    position: relative;
    padding-left: 40px;
    border-left: 1px solid rgba(139,115,85,0.3);
    padding-bottom: 12px;
}

.annexe-index {
    position: absolute;
    left: -2px;
    top: 0;
    font-family: var(--font-display);
    font-style: italic;
    color: var(--c-copper);
    font-size: 22px;
    background: var(--c-bg);
    padding: 0 6px 0 0;
    transform: translateY(-4px);
}

.annexe-h {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--c-deep);
    margin-bottom: 10px;
    line-height: 1.3;
}

.annexe-block p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--c-body);
}

/* ============================================================
   Colophon footer
   ============================================================ */
.colophon {
    position: relative;
    z-index: 2;
    background: var(--c-deep);
    color: var(--c-bg);
    padding: clamp(56px, 8vh, 96px) clamp(24px, 6vw, 120px);
    overflow: hidden;
}

.colophon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(201,168,76,0.08), transparent 60%);
    pointer-events: none;
}

.colophon-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-right: 60px;
    position: relative;
}

.colophon-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 18px;
}

.colophon-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem);
    color: var(--c-bg);
    letter-spacing: 0.04em;
}

.colophon-mark {
    font-size: 24px;
    color: var(--c-brass);
    opacity: 0.7;
}

.colophon-rule {
    border: none;
    border-top: 1px solid var(--c-copper);
    opacity: 0.3;
    margin: 0 0 32px;
}

.colophon-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(24px, 4vw, 48px);
    margin-bottom: 36px;
}

.colophon-h {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-brass);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px dotted rgba(201,168,76,0.3);
}

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

.colophon-list li {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--c-bg);
    padding: 4px 0;
    border-bottom: 1px dotted rgba(232,220,200,0.1);
}

.cl-date {
    font-family: var(--font-mono);
    color: var(--c-lichen);
    font-size: 11px;
    letter-spacing: 0.1em;
    margin-right: 4px;
}

.colophon-p {
    font-family: var(--font-body);
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--c-bg);
}

.colophon-p em {
    color: var(--c-brass);
    font-style: italic;
}

.cl-dim {
    color: rgba(232,220,200,0.55);
    font-size: 12px;
    font-style: italic;
}

.colophon-foot {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232,220,200,0.5);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 860px) {
    .marginalia-rail { width: 40px; padding: 60px 0; }
    .marginalia-rail .glyph { font-size: 14px; }

    .hero {
        padding: 80px 24px 60px;
    }
    .hero-brass-plate {
        right: 60px;
    }
    .archive-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .card-grid {
        padding-right: 40px;
    }
    .annexe-inner, .colophon-inner, .archive-header {
        padding-right: 40px;
    }
}

@media (max-width: 520px) {
    .hero-brass-plate { display: none; }
    .hero-title { letter-spacing: 0.08em; }
    .card-grid { gap: 22px; }
    .card { padding: 32px 20px 20px; }
}