/* =====================================================
   MasqueradeProtocol.com
   Memphis-Group meets cyber-library
   ===================================================== */

:root {
    /* Palette - retro-futuristic */
    --bone-vellum: #ECE3CC;
    --twilight-velour: #1B1539;
    --library-paper: #F7F1DE;
    --plum-lacquer: #2A1F4F;
    --ink-aubergine: #1A0E2E;
    --cream-lamp: #FBF4DD;
    --aged-indigo: #4D3D7A;
    --persimmon-glow: #FF6F3C;
    --atomic-mint: #5BE7B0;
    --sherbet-pink: #FF9DC1;
    --sun-plastic: #FFD43B;
    --neon-cyan: #1FE7F5;
    --neon-magenta: #FF2BD6;
    --carnival-gilt: #C9A24A;
    --carbon-arc: #0A0814;
    --carbon-arc-deep: #0A0814;

    --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
    --font-rounded: "Fredoka", "Inter", system-ui, sans-serif;
    --font-body: "Cormorant Garamond", Georgia, serif;
    --font-hand: "Caveat", "Caveat Brush", cursive;
    --font-mono: "JetBrains Mono", "Space Mono", ui-monospace, monospace;

    --easing-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.78;
    color: var(--ink-aubergine);
    background: var(--bone-vellum);
    overflow-x: hidden;
    cursor: default;
    /* Bacterio Light texture */
    background-image:
        radial-gradient(ellipse 8px 5px at 23% 12%, rgba(10,8,20,0.07) 60%, transparent 61%),
        radial-gradient(ellipse 6px 8px at 67% 28%, rgba(10,8,20,0.06) 60%, transparent 61%),
        radial-gradient(ellipse 10px 6px at 41% 54%, rgba(10,8,20,0.05) 60%, transparent 61%),
        radial-gradient(ellipse 5px 9px at 88% 71%, rgba(10,8,20,0.07) 60%, transparent 61%),
        radial-gradient(ellipse 7px 5px at 12% 86%, rgba(10,8,20,0.06) 60%, transparent 61%),
        radial-gradient(ellipse 9px 6px at 76% 92%, rgba(10,8,20,0.05) 60%, transparent 61%);
    background-size: 320px 320px;
    background-repeat: repeat;
}

img, svg {
    display: block;
    max-width: 100%;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

a {
    color: var(--aged-indigo);
    text-decoration: none;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color 280ms var(--easing-overshoot), text-shadow 280ms var(--easing-overshoot);
}

a:hover {
    color: var(--neon-magenta);
    text-decoration-style: solid;
    text-decoration-color: var(--neon-cyan);
    text-decoration-thickness: 1.5px;
    text-shadow: 0 0 8px rgba(31, 231, 245, 0.6);
}

/* =====================================================
   PAGE WRAPPER
   ===================================================== */
.page {
    position: relative;
    width: 100%;
    overflow: hidden;
    transition: transform 320ms var(--easing-overshoot);
}

.page.mask-mode {
    transform: translate(8px, -4px);
}

/* =====================================================
   FLOATING ORNAMENT LAYER (parallax)
   ===================================================== */
.floating-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.memphis-patch {
    position: absolute;
    will-change: transform;
}

.patch-squiggle {
    width: 220px;
    top: 8vh;
    right: 6vw;
    animation: undulate 6s ease-in-out infinite;
}

.patch-ellipse {
    width: 130px;
    top: 38vh;
    left: 4vw;
    animation: rotateSlow 22s linear infinite;
}

.patch-checker {
    width: 110px;
    top: 76vh;
    right: 12vw;
    animation: shimmy 4s ease-in-out infinite;
}

.patch-halfdisc {
    width: 140px;
    top: 128vh;
    left: 8vw;
    animation: pulseShape 3.5s ease-in-out infinite;
}

.patch-ribbon {
    width: 240px;
    top: 198vh;
    right: 4vw;
    animation: undulate 7s ease-in-out infinite;
}

.patch-spine {
    width: 36px;
    top: 274vh;
    left: 6vw;
    animation: rotateSlow 28s linear infinite;
}

@keyframes undulate {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
}

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes shimmy {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-3px) rotate(-2deg); }
    75% { transform: translateX(3px) rotate(2deg); }
}

@keyframes pulseShape {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50% { transform: scale(1.06); opacity: 1; }
}

@keyframes shakeError {
    0% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}

.shake-error {
    animation: shakeError 240ms ease-in-out;
}

.shake-error-flare {
    filter: drop-shadow(0 0 6px var(--neon-magenta)) drop-shadow(0 0 16px var(--neon-magenta));
}

/* =====================================================
   MASK CURSOR
   ===================================================== */
.mask-cursor {
    position: fixed;
    width: 200px;
    height: 80px;
    top: -100px;
    left: -100px;
    pointer-events: none;
    z-index: 60;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.85);
    transition: opacity 320ms ease, transform 220ms ease-out;
    will-change: transform, opacity;
}

.mask-cursor.active {
    opacity: 0.85;
}

/* =====================================================
   MASK MODE INDICATOR
   ===================================================== */
.mask-indicator {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-80px);
    background: var(--ink-aubergine);
    color: var(--cream-lamp);
    padding: 10px 22px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    z-index: 80;
    transition: transform 320ms var(--easing-overshoot);
    box-shadow:
        0 0 6px rgba(255, 43, 214, 0.6),
        0 0 18px rgba(255, 43, 214, 0.4),
        0 0 32px rgba(255, 43, 214, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
}

.mask-indicator.show {
    transform: translateX(-50%) translateY(0);
}

.mask-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon-magenta);
    box-shadow: 0 0 6px var(--neon-magenta);
    animation: pulseShape 1.4s ease-in-out infinite;
}

.mask-indicator kbd {
    background: rgba(251, 244, 221, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-mono);
    border: 1px solid rgba(251, 244, 221, 0.3);
}

/* =====================================================
   CHAPTER STRUCTURE
   ===================================================== */
.chapter {
    position: relative;
    width: 100%;
    padding: 100px 5vw;
    z-index: 10;
}

.chapter-frontispiece { min-height: 110vh; }
.chapter-domino { min-height: 130vh; background: var(--bone-vellum); }
.chapter-dossier { min-height: 150vh; }
.chapter-carnival { min-height: 140vh; background: var(--cream-lamp); }
.chapter-unmasking {
    min-height: 120vh;
    background: var(--twilight-velour);
    color: var(--cream-lamp);
}

/* Ex Libris stamp on each chapter */
.ex-libris {
    position: absolute;
    top: 40px;
    left: 5vw;
    width: 60px;
    height: 60px;
    z-index: 12;
    animation: rotateSlow 60s linear infinite;
}

.ex-libris-dark svg circle:first-child {
    fill: var(--twilight-velour);
}

/* Protocol ID metadata */
.protocol-id {
    position: absolute;
    top: 50px;
    right: 5vw;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--carbon-arc);
    z-index: 12;
    text-transform: uppercase;
}

.protocol-id-light {
    color: var(--carnival-gilt);
}

/* Chapter num + title shared */
.chapter-num {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    color: var(--aged-indigo);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.chapter-num-light {
    color: var(--carnival-gilt);
}

.chapter-title {
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 7.5vw, 7.2rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--ink-aubergine);
    font-variation-settings: "SOFT" 100, "opsz" 144;
    margin-bottom: 32px;
}

.chapter-title-light {
    color: var(--cream-lamp);
}

.dropcap {
    display: inline-block;
    font-size: clamp(6rem, 12vw, 9rem);
    line-height: 0.85;
    color: var(--persimmon-glow);
    text-shadow:
        0 0 6px rgba(255, 111, 60, 0.4),
        0 0 18px rgba(255, 111, 60, 0.25);
    margin-right: 8px;
    position: relative;
    transform: translateY(8px);
}

.dropcap-magenta {
    color: var(--neon-magenta);
    text-shadow:
        0 0 6px rgba(255, 43, 214, 0.5),
        0 0 18px rgba(255, 43, 214, 0.3);
}

.dropcap-cyan {
    color: var(--neon-cyan);
    text-shadow:
        0 0 6px rgba(31, 231, 245, 0.5),
        0 0 18px rgba(31, 231, 245, 0.3);
}

.dropcap-gilt {
    color: var(--carnival-gilt);
    text-shadow:
        0 0 6px rgba(201, 162, 74, 0.5),
        0 0 18px rgba(201, 162, 74, 0.3);
}

/* Ghost rule (dotted line that overhangs panels) */
.ghost-rule {
    position: absolute;
    border: 0;
}

.ghost-rule-h {
    border-top: 2px dotted var(--ink-aubergine);
    width: calc(100% + 80px);
    left: -40px;
    bottom: 60px;
    opacity: 0.4;
}

.ghost-rule-v {
    border-left: 2px dotted var(--ink-aubergine);
    height: 200px;
    top: 30%;
    right: 20%;
    opacity: 0.35;
}

.ghost-rule-light {
    border-top-color: var(--cream-lamp) !important;
    opacity: 0.3;
}

/* =====================================================
   CHAPTER I: FRONTISPIECE
   ===================================================== */
.chapter-frontispiece {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(201, 162, 74, 0.08) 0%, transparent 50%),
        var(--bone-vellum);
}

.frontispiece-grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: auto auto auto;
    gap: 24px;
    padding-top: 80px;
    position: relative;
    min-height: 75vh;
}

.confetti-cloud {
    grid-column: 1 / -1;
    grid-row: 1 / 4;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.confetti-bit {
    position: absolute;
    will-change: transform, opacity;
}

.title-block {
    grid-column: 2 / 11;
    grid-row: 1 / 2;
    z-index: 5;
    padding-top: 60px;
}

.display-title {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 11rem);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.02em;
    color: var(--ink-aubergine);
    font-variation-settings: "SOFT" 100, "opsz" 144;
    position: relative;
}

.title-line {
    display: block;
    overflow: hidden;
}

.line-1 {
    color: var(--ink-aubergine);
}

.line-2 {
    color: var(--persimmon-glow);
    transform: translateX(60px);
    text-shadow:
        4px 4px 0 var(--carnival-gilt),
        0 0 16px rgba(255, 111, 60, 0.18);
}

.title-line .title-letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(28px) scale(0.85);
    transition: opacity 600ms var(--easing-overshoot), transform 600ms var(--easing-overshoot);
}

.title-line .title-letter.in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.subtitle {
    font-family: var(--font-rounded);
    font-size: clamp(1.1rem, 1.6vw, 1.45rem);
    font-weight: 500;
    color: var(--aged-indigo);
    margin-top: 36px;
    max-width: 580px;
    line-height: 1.5;
}

.subtitle-mark {
    color: var(--carnival-gilt);
    font-family: var(--font-display);
    font-size: 1.4em;
    margin-right: 4px;
}

.frontispiece-aside {
    grid-column: 9 / 14;
    grid-row: 2 / 3;
    margin-top: 80px;
    padding: 24px 28px;
    background: var(--library-paper);
    border-left: 3px solid var(--carnival-gilt);
    box-shadow: 6px 6px 0 var(--ink-aubergine);
    transform: rotate(1.2deg);
    z-index: 5;
}

.open-book-small {
    width: 200px;
    margin-bottom: 16px;
}

.frontispiece-blurb {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink-aubergine);
    line-height: 1.6;
}

.caveat-note {
    display: inline-block;
    font-family: var(--font-hand);
    font-size: 1.25em;
    color: var(--aged-indigo);
    transform: rotate(-2deg);
}

.frontispiece-foot {
    grid-column: 2 / 14;
    grid-row: 3 / 4;
    align-self: end;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 80px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--aged-indigo);
    text-transform: uppercase;
}

.dotted-divider {
    flex: 1;
    height: 0;
    border-top: 2px dotted var(--ink-aubergine);
    opacity: 0.35;
}

.folio-num {
    white-space: nowrap;
}

/* =====================================================
   WEDGE BREAK BANDS
   ===================================================== */
.wedge-break {
    position: relative;
    width: 110%;
    height: 80px;
    margin-left: -5%;
    transform: rotate(-7deg);
    margin-top: -40px;
    margin-bottom: -40px;
    overflow: hidden;
    z-index: 8;
}

.wedge-break::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--persimmon-glow);
    clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 70%);
}

.wedge-2::before {
    background: var(--atomic-mint);
    clip-path: polygon(0 30%, 100% 0, 100% 70%, 0 100%);
}

.wedge-3::before {
    background: var(--sherbet-pink);
}

.wedge-4::before {
    background: var(--sun-plastic);
}

.wedge-confetti {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 2;
}

.wedge-shape {
    position: absolute;
    will-change: transform;
}

/* =====================================================
   CHAPTER II: THE DOMINO
   ===================================================== */
.domino-grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 28px;
    padding-top: 80px;
    position: relative;
}

.domino-header {
    grid-column: 6 / 14;
    margin-bottom: 40px;
}

.domino-prose {
    grid-column: 2 / 9;
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--ink-aubergine);
}

.domino-prose p {
    margin-bottom: 28px;
}

.footnote-num {
    font-family: var(--font-hand);
    font-size: 1.4em;
    color: var(--neon-magenta);
    cursor: pointer;
    margin: 0 2px;
    display: inline-block;
    transform: rotate(-4deg) translateY(-2px);
    transition: transform 280ms var(--easing-overshoot), text-shadow 280ms var(--easing-overshoot);
}

.footnote-num:hover {
    transform: rotate(2deg) translateY(-3px) scale(1.15);
    text-shadow: 0 0 8px rgba(255, 43, 214, 0.6);
}

.pull-quote {
    font-family: var(--font-rounded);
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--plum-lacquer);
    margin: 48px 0;
    padding: 16px 0;
    position: relative;
}

.quote-mark {
    font-family: var(--font-rounded);
    font-size: 2em;
    color: var(--sun-plastic);
    line-height: 0;
    vertical-align: -0.4em;
    text-shadow: 2px 2px 0 var(--carbon-arc);
}

.quote-mark.left {
    margin-right: 8px;
}

.quote-mark.right {
    margin-left: 8px;
}

.domino-marginalia {
    grid-column: 10 / 14;
    margin-top: 80px;
    align-self: start;
}

.marginalia-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transform: rotate(-1.5deg);
}

.caveat-arrow {
    font-family: var(--font-hand);
    font-size: 2rem;
    color: var(--neon-magenta);
    line-height: 1;
}

/* Mask Rack */
.mask-rack {
    grid-column: 2 / 14;
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    perspective: 1200px;
}

.mask-card {
    background: var(--library-paper);
    border: 2px solid var(--ink-aubergine);
    padding: 28px 20px 22px;
    position: relative;
    transition: transform 320ms var(--easing-overshoot), box-shadow 320ms var(--easing-overshoot);
    text-align: center;
    box-shadow: 6px 6px 0 var(--carnival-gilt);
}

.mask-card:nth-child(1) { transform: rotate(-1.5deg); }
.mask-card:nth-child(2) { transform: rotate(1deg); margin-top: 18px; }
.mask-card:nth-child(3) { transform: rotate(-0.5deg); margin-top: -10px; }
.mask-card:nth-child(4) { transform: rotate(2deg); margin-top: 12px; }

.mask-card:hover {
    transform: translateY(-12px) rotate(0deg) !important;
    box-shadow:
        6px 6px 0 var(--carnival-gilt),
        0 0 18px rgba(255, 43, 214, 0.4),
        0 0 32px rgba(255, 43, 214, 0.2);
}

.mask-card.active {
    box-shadow:
        6px 6px 0 var(--neon-cyan),
        0 0 18px rgba(31, 231, 245, 0.6),
        0 0 32px rgba(31, 231, 245, 0.3);
}

.mask-svg {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
}

.mask-label {
    display: block;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ink-aubergine);
    margin-bottom: 4px;
}

.mask-meta {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--aged-indigo);
    text-transform: uppercase;
}

.domino-toggle {
    grid-column: 3 / 12;
    margin-top: 60px;
    text-align: center;
}

.mask-toggle {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: var(--ink-aubergine);
    color: var(--cream-lamp);
    padding: 16px 32px;
    border-radius: 999px;
    font-family: var(--font-rounded);
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 320ms var(--easing-overshoot);
    border: 2px solid var(--ink-aubergine);
}

.mask-toggle:hover {
    background: var(--neon-magenta);
    color: var(--ink-aubergine);
    border-color: var(--neon-magenta);
    box-shadow:
        0 0 12px rgba(255, 43, 214, 0.5),
        0 0 28px rgba(255, 43, 214, 0.3);
    transform: translateY(-3px);
}

.mask-toggle.active {
    background: var(--neon-magenta);
    color: var(--ink-aubergine);
    border-color: var(--neon-magenta);
    box-shadow:
        0 0 12px rgba(255, 43, 214, 0.6),
        0 0 28px rgba(255, 43, 214, 0.4);
}

.toggle-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--persimmon-glow);
    box-shadow: 0 0 6px var(--persimmon-glow);
}

.mask-toggle.active .toggle-dot {
    background: var(--cream-lamp);
    box-shadow: 0 0 6px var(--cream-lamp);
}

.mask-toggle kbd {
    font-family: var(--font-mono);
    font-size: 11px;
    background: rgba(251, 244, 221, 0.18);
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(251, 244, 221, 0.3);
}

.toggle-help {
    margin-top: 20px;
    font-family: var(--font-hand);
    font-size: 1.3rem;
    color: var(--aged-indigo);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
    transform: rotate(-1deg);
}

/* =====================================================
   CHAPTER III: THE DOSSIER
   ===================================================== */
.chapter-dossier {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(201, 162, 74, 0.06) 0%, transparent 60%),
        var(--bone-vellum);
}

.dossier-header {
    grid-column: 4 / 12;
    text-align: center;
    margin: 0 auto 60px;
    max-width: 760px;
}

.dossier-blurb {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--aged-indigo);
    margin-top: 16px;
}

.dossier-book {
    position: relative;
    margin: 60px auto 0;
    max-width: 1240px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--library-paper);
    box-shadow:
        0 30px 60px -20px rgba(10, 8, 20, 0.4),
        0 18px 40px -15px rgba(10, 8, 20, 0.3),
        inset 0 0 0 8px var(--library-paper),
        inset 0 0 0 10px var(--carnival-gilt);
    border-radius: 4px;
    overflow: visible;
    transform: rotate(-0.4deg);
    min-height: 580px;
}

.dossier-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 8px;
    transform: translateX(-50%);
    background: linear-gradient(to right,
        rgba(10, 8, 20, 0.05) 0%,
        rgba(10, 8, 20, 0.4) 25%,
        rgba(10, 8, 20, 0.5) 50%,
        rgba(10, 8, 20, 0.4) 75%,
        rgba(10, 8, 20, 0.05) 100%);
    z-index: 5;
}

.dossier-spine::before,
.dossier-spine::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 4px;
    background: var(--carnival-gilt);
}

.dossier-spine::before { top: 16%; }
.dossier-spine::after { bottom: 16%; }

.dossier-page {
    padding: 60px 50px;
    position: relative;
    overflow: hidden;
}

.dossier-page-left {
    border-right: 1px solid rgba(10, 8, 20, 0.1);
}

.page-marbled {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        conic-gradient(from 45deg at 30% 30%,
            rgba(255, 111, 60, 0.05),
            rgba(91, 231, 176, 0.05),
            rgba(255, 157, 193, 0.05),
            rgba(255, 212, 59, 0.05),
            rgba(255, 111, 60, 0.05));
    opacity: 0.6;
    mix-blend-mode: multiply;
}

.dossier-stamp {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 90px;
    transform: rotate(8deg);
    animation: pulseShape 4s ease-in-out infinite;
}

.article-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ink-aubergine);
    margin: 28px 0 10px;
    font-variation-settings: "SOFT" 100, "opsz" 96;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.article-title:first-of-type {
    margin-top: 0;
}

.article-numeral {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.6rem;
    color: var(--carnival-gilt);
    text-shadow: 1px 1px 0 rgba(0,0,0,0.05);
}

.article-body {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.72;
    color: var(--ink-aubergine);
    margin-bottom: 8px;
}

.footnote-link {
    cursor: pointer;
    color: var(--neon-cyan);
    transition: text-shadow 280ms;
}

.footnote-link sup {
    font-family: var(--font-hand);
    font-size: 1.3em;
    color: var(--neon-magenta);
}

.footnote-link:hover sup {
    text-shadow: 0 0 8px rgba(255, 43, 214, 0.7);
}

.dossier-marginalia {
    position: absolute;
    width: 180px;
    z-index: 8;
}

.dossier-marginalia .caveat-note {
    display: block;
    line-height: 1.3;
    font-size: 1.1rem;
    transform: rotate(-3deg);
}

.margin-left {
    top: 20%;
    left: -160px;
    text-align: right;
}

.margin-right {
    top: 70%;
    right: -160px;
    text-align: left;
}

/* =====================================================
   CHAPTER IV: THE CARNIVAL
   ===================================================== */
.carnival-grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: auto repeat(2, auto);
    gap: 24px;
    padding-top: 80px;
    position: relative;
}

.carnival-header {
    grid-column: 3 / 12;
    margin-bottom: 50px;
}

.carnival-blurb {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--aged-indigo);
    margin-top: 12px;
}

.carnival-tile {
    padding: 32px 24px;
    background: var(--library-paper);
    border: 2px solid var(--ink-aubergine);
    position: relative;
    cursor: default;
    transition: transform 320ms var(--easing-overshoot), box-shadow 320ms var(--easing-overshoot);
    overflow: hidden;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tile-a { grid-column: 2 / 7; grid-row: 2 / 3; background: var(--sherbet-pink); transform: rotate(-1.5deg); }
.tile-b { grid-column: 7 / 11; grid-row: 2 / 3; background: var(--atomic-mint); transform: rotate(1deg); }
.tile-c { grid-column: 11 / 14; grid-row: 2 / 4; background: var(--persimmon-glow); transform: rotate(-0.5deg); min-height: 380px; }
.tile-d { grid-column: 2 / 5; grid-row: 3 / 4; background: var(--sun-plastic); transform: rotate(2deg); }
.tile-e { grid-column: 5 / 9; grid-row: 3 / 4; background: var(--cream-lamp); transform: rotate(-1deg); }
.tile-f { grid-column: 9 / 11; grid-row: 3 / 4; background: var(--twilight-velour); transform: rotate(1.5deg); }
.tile-f .tile-title, .tile-f .tile-cap, .tile-f .tile-id { color: var(--cream-lamp); }
.tile-f { box-shadow: 6px 6px 0 var(--neon-cyan); }

.carnival-tile:hover {
    transform: translateY(-8px) rotate(0deg) !important;
    box-shadow:
        8px 8px 0 var(--ink-aubergine),
        0 0 18px rgba(31, 231, 245, 0.3);
}

.tile-id {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--ink-aubergine);
    text-transform: uppercase;
    align-self: flex-start;
}

.tile-title {
    font-family: var(--font-rounded);
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 700;
    color: var(--ink-aubergine);
    margin: 16px 0;
    line-height: 1;
}

.tile-shape {
    width: 100%;
    height: auto;
    max-height: 120px;
    margin: 8px 0;
}

.tile-cap {
    font-family: var(--font-hand);
    font-size: 1.4rem;
    color: var(--ink-aubergine);
    transform: rotate(-2deg);
    align-self: flex-end;
}

/* Bacterio pattern using SVG */
.tile-bacterio {
    background: var(--cream-lamp);
}

.bacterio-pattern {
    flex: 1;
    margin: 8px 0;
    background-image:
        radial-gradient(ellipse 22px 14px at 18% 22%, var(--carbon-arc) 60%, transparent 61%),
        radial-gradient(ellipse 16px 22px at 62% 38%, var(--carbon-arc) 60%, transparent 61%),
        radial-gradient(ellipse 28px 16px at 38% 62%, var(--carbon-arc) 60%, transparent 61%),
        radial-gradient(ellipse 14px 26px at 80% 70%, var(--carbon-arc) 60%, transparent 61%),
        radial-gradient(ellipse 20px 12px at 12% 80%, var(--carbon-arc) 60%, transparent 61%),
        radial-gradient(ellipse 18px 14px at 50% 12%, var(--carbon-arc) 60%, transparent 61%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 80px;
}

.tile-c .tile-shape {
    max-height: 240px;
}

/* =====================================================
   CHAPTER V: THE UNMASKING
   ===================================================== */
.chapter-unmasking {
    position: relative;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(31, 231, 245, 0.04) 0%, transparent 60%),
        var(--twilight-velour);
}

.chapter-unmasking::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1px at 12% 18%, rgba(251, 244, 221, 0.2) 100%, transparent),
        radial-gradient(circle 1px at 38% 42%, rgba(251, 244, 221, 0.15) 100%, transparent),
        radial-gradient(circle 1.2px at 71% 26%, rgba(251, 244, 221, 0.18) 100%, transparent),
        radial-gradient(circle 1px at 88% 64%, rgba(251, 244, 221, 0.2) 100%, transparent),
        radial-gradient(circle 1px at 22% 78%, rgba(251, 244, 221, 0.15) 100%, transparent),
        radial-gradient(circle 1.5px at 56% 86%, rgba(251, 244, 221, 0.22) 100%, transparent);
    background-size: 600px 600px;
    pointer-events: none;
    opacity: 0.5;
}

.unmasking-grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 24px;
    padding-top: 100px;
    position: relative;
    z-index: 2;
}

.unmasking-header {
    grid-column: 3 / 12;
    margin-bottom: 80px;
}

.unmasking-prose {
    grid-column: 4 / 12;
}

.unmasking-line {
    font-family: var(--font-body);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    line-height: 1.75;
    color: var(--cream-lamp);
    font-style: italic;
    max-width: 720px;
}

.register-area {
    grid-column: 4 / 12;
    margin-top: 80px;
    text-align: center;
}

.caveat-handwriting {
    font-family: var(--font-hand);
    font-size: clamp(2rem, 4vw, 3.4rem);
    color: var(--cream-lamp);
    line-height: 1.2;
    margin-bottom: 40px;
    transform: rotate(-1deg);
}

.register-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-hand);
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    color: var(--carnival-gilt);
    padding: 18px 40px;
    background: rgba(201, 162, 74, 0.06);
    border: 1px dashed var(--carnival-gilt);
    border-radius: 8px;
    text-decoration: none;
    transition: all 320ms var(--easing-overshoot);
    transform: rotate(-1.5deg);
    text-shadow: none;
}

.register-btn:hover {
    background: var(--carnival-gilt);
    color: var(--twilight-velour);
    text-shadow:
        0 0 6px rgba(201, 162, 74, 0.5),
        0 0 18px rgba(201, 162, 74, 0.3);
    box-shadow:
        0 0 12px rgba(201, 162, 74, 0.4),
        0 0 28px rgba(201, 162, 74, 0.2);
    transform: rotate(0deg) translateY(-4px);
}

.register-quill {
    font-size: 1.2em;
    transform: translateY(-2px) rotate(15deg);
    display: inline-block;
}

/* =====================================================
   FOOTER: LIBRARY CARD POCKET
   ===================================================== */
.library-footer {
    position: relative;
    background: var(--cream-lamp);
    padding: 80px 5vw 60px;
    overflow: hidden;
    border-top: 4px solid var(--carnival-gilt);
}

.footer-marbled {
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from 30deg at 25% 30%,
            rgba(255, 111, 60, 0.18),
            rgba(91, 231, 176, 0.18),
            rgba(255, 157, 193, 0.18),
            rgba(255, 212, 59, 0.18),
            rgba(255, 111, 60, 0.18)),
        conic-gradient(from 200deg at 75% 70%,
            rgba(91, 231, 176, 0.12),
            rgba(255, 212, 59, 0.12),
            rgba(255, 157, 193, 0.12),
            rgba(255, 111, 60, 0.12),
            rgba(91, 231, 176, 0.12));
    mix-blend-mode: multiply;
    opacity: 0.7;
    pointer-events: none;
}

.footer-bookmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
    opacity: 0.8;
}

.footer-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.footer-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ink-aubergine);
    font-variation-settings: "SOFT" 100, "opsz" 96;
}

.footer-sub {
    font-family: var(--font-hand);
    font-size: 1.2rem;
    color: var(--aged-indigo);
    transform: rotate(-1deg);
    align-self: flex-start;
}

.card-pocket {
    position: relative;
    width: 100%;
    max-width: 240px;
    height: 110px;
    background: linear-gradient(135deg, #d5c4a1 0%, #c9b894 100%);
    border-radius: 6px 6px 2px 2px;
    cursor: pointer;
    margin: 0 auto;
    box-shadow:
        inset 0 0 0 2px rgba(10, 8, 20, 0.15),
        0 4px 12px rgba(10, 8, 20, 0.2);
    overflow: hidden;
}

.card-pocket::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px dashed var(--carbon-arc);
    border-radius: 4px;
    pointer-events: none;
}

.pocket-stamp {
    position: absolute;
    top: 14px;
    left: 16px;
    transform: rotate(-4deg);
    z-index: 2;
}

.pocket-stamp .caveat-note {
    color: var(--ink-aubergine);
    font-size: 1.05rem;
}

.pocket-card {
    position: absolute;
    bottom: -75px;
    left: 14px;
    right: 14px;
    height: 90px;
    background: var(--cream-lamp);
    border: 1.5px solid var(--ink-aubergine);
    border-radius: 4px 4px 2px 2px;
    transition: bottom 360ms var(--easing-overshoot);
    z-index: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-pocket:hover .pocket-card {
    bottom: 18px;
}

.pocket-card-pattern {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle 3px at 15% 30%, var(--persimmon-glow) 100%, transparent),
        radial-gradient(circle 3px at 30% 60%, var(--atomic-mint) 100%, transparent),
        radial-gradient(circle 3px at 50% 25%, var(--sherbet-pink) 100%, transparent),
        radial-gradient(circle 3px at 70% 65%, var(--sun-plastic) 100%, transparent),
        radial-gradient(circle 3px at 85% 35%, var(--neon-cyan) 100%, transparent);
    opacity: 0.7;
}

.pocket-card-text {
    position: relative;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--ink-aubergine);
    background: rgba(251, 244, 221, 0.85);
    padding: 4px 10px;
    border-radius: 2px;
}

.footer-credits {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--ink-aubergine);
}

.footer-credits .protocol-id-light {
    color: var(--ink-aubergine);
}

.footer-credits .caveat-note {
    font-family: var(--font-hand);
    font-size: 1.1rem;
    color: var(--aged-indigo);
    letter-spacing: normal;
    text-transform: none;
}

/* =====================================================
   NAVIGATION MEDALLION
   ===================================================== */
.medallion {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 140px;
    height: 140px;
    z-index: 70;
    pointer-events: none;
}

.medallion-ring {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    transition: transform 320ms var(--easing-overshoot);
}

.medallion-ring.rotated {
    transform: rotate(8deg);
}

.medallion::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ink-aubergine);
    box-shadow:
        0 8px 24px rgba(10, 8, 20, 0.4),
        inset 0 0 0 3px var(--carnival-gilt),
        inset 0 0 0 4px rgba(0,0,0,0.2);
    pointer-events: auto;
}

.medallion.glow-cyan::before {
    box-shadow:
        0 8px 24px rgba(10, 8, 20, 0.4),
        inset 0 0 0 3px var(--carnival-gilt),
        inset 0 0 0 4px rgba(0,0,0,0.2),
        0 0 6px var(--neon-cyan),
        0 0 18px var(--neon-cyan),
        0 0 32px rgba(31, 231, 245, 0.3);
}

.medallion.glow-magenta::before {
    box-shadow:
        0 8px 24px rgba(10, 8, 20, 0.4),
        inset 0 0 0 3px var(--carnival-gilt),
        inset 0 0 0 4px rgba(0,0,0,0.2),
        0 0 6px var(--neon-magenta),
        0 0 18px var(--neon-magenta),
        0 0 32px rgba(255, 43, 214, 0.3);
}

.medallion-glyph {
    position: absolute;
    width: 28px;
    height: 28px;
    color: var(--cream-lamp);
    pointer-events: auto;
    transition: color 280ms, transform 280ms var(--easing-overshoot);
    cursor: pointer;
    padding: 0;
    background: transparent;
    border: 0;
}

.medallion-glyph svg {
    width: 100%;
    height: 100%;
}

.glyph-1 { top: 12%; left: 50%; transform: translateX(-50%); }
.glyph-2 { top: 32%; right: 8%; }
.glyph-3 { bottom: 12%; right: 22%; }
.glyph-4 { bottom: 12%; left: 22%; }
.glyph-5 { top: 32%; left: 8%; }

.medallion-glyph:hover {
    color: var(--neon-cyan);
    transform: scale(1.25) translateX(-40%);
    filter: drop-shadow(0 0 4px var(--neon-cyan)) drop-shadow(0 0 8px var(--neon-cyan));
}

.glyph-1:hover { transform: translateX(-50%) scale(1.25); }
.glyph-2:hover { transform: scale(1.25); }
.glyph-3:hover { transform: scale(1.25); }
.glyph-4:hover { transform: scale(1.25); }
.glyph-5:hover { transform: scale(1.25); }

.medallion-glyph.active {
    color: var(--neon-cyan);
    filter: drop-shadow(0 0 4px var(--neon-cyan)) drop-shadow(0 0 8px var(--neon-cyan));
}

.medallion-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--carnival-gilt);
    color: var(--ink-aubergine);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    transition: all 280ms var(--easing-overshoot);
    z-index: 2;
}

.medallion-center:hover {
    background: var(--neon-magenta);
    color: var(--cream-lamp);
    box-shadow:
        0 0 8px var(--neon-magenta),
        0 0 18px var(--neon-magenta);
    transform: translate(-50%, -50%) scale(1.1);
}

.medallion-center.active {
    background: var(--neon-magenta);
    color: var(--cream-lamp);
    box-shadow:
        0 0 8px var(--neon-magenta),
        0 0 18px var(--neon-magenta);
}

.medallion-m {
    transform: translateY(-1px);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 960px) {
    .frontispiece-grid,
    .domino-grid,
    .carnival-grid,
    .unmasking-grid {
        grid-template-columns: repeat(8, 1fr);
    }

    .title-block { grid-column: 1 / 9; padding-top: 30px; }
    .frontispiece-aside { grid-column: 1 / 9; margin-top: 40px; }
    .frontispiece-foot { grid-column: 1 / 9; }

    .domino-header { grid-column: 1 / 9; }
    .domino-prose { grid-column: 1 / 9; }
    .domino-marginalia { grid-column: 1 / 9; margin-top: 20px; }
    .mask-rack { grid-column: 1 / 9; grid-template-columns: repeat(2, 1fr); }
    .domino-toggle { grid-column: 1 / 9; }

    .dossier-book { grid-template-columns: 1fr; }
    .dossier-page-left { border-right: 0; border-bottom: 1px solid rgba(10,8,20,0.1); }
    .dossier-spine { display: none; }
    .margin-left, .margin-right { display: none; }

    .carnival-header { grid-column: 1 / 9; }
    .tile-a { grid-column: 1 / 9; grid-row: auto; }
    .tile-b { grid-column: 1 / 9; grid-row: auto; }
    .tile-c { grid-column: 1 / 9; grid-row: auto; min-height: 240px; }
    .tile-d { grid-column: 1 / 5; grid-row: auto; }
    .tile-e { grid-column: 5 / 9; grid-row: auto; }
    .tile-f { grid-column: 1 / 9; grid-row: auto; }

    .unmasking-header { grid-column: 1 / 9; }
    .unmasking-prose { grid-column: 1 / 9; }
    .register-area { grid-column: 1 / 9; }

    .footer-content { grid-template-columns: 1fr; gap: 32px; }
    .footer-credits { align-items: flex-start; text-align: left; }

    .medallion { width: 110px; height: 110px; bottom: 20px; right: 20px; }

    .ex-libris { width: 44px; height: 44px; top: 24px; }
}

@media (max-width: 560px) {
    .chapter { padding: 70px 5vw; }
    .protocol-id { font-size: 9px; }
    .display-title { font-size: clamp(2.6rem, 13vw, 4.5rem); }
    .line-2 { transform: translateX(20px); }
    .mask-rack { grid-template-columns: 1fr; }
    .dossier-page { padding: 40px 24px; }
    .medallion { width: 90px; height: 90px; }
}