/* ============================================
   munju.org — Victorian Reading Room in Amber
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --umber-dark: #2B2118;
    --sienna-earth: #5C3D2E;
    --terracotta-warm: #C4784A;
    --cream-marble: #F2E8DA;
    --ochre-gold: #D4A855;
    --sage-mist: #8B9A7E;
    --ash-stone: #7A7068;
    --vellum-light: #FFF8F0;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow: hidden;
    height: 100%;
}

body {
    font-family: 'Source Sans 3', sans-serif;
    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    font-weight: 400;
    color: var(--cream-marble);
    background: var(--umber-dark);
    overflow: hidden;
    height: 100%;
}

/* --- Parallax Wrapper --- */
#parallax-wrapper {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 300px;
    perspective-origin: center center;
    -webkit-overflow-scrolling: touch;
}

/* --- Parallax Sections --- */
.parallax-section {
    position: relative;
    height: 100vh;
    overflow: hidden;
    transform-style: preserve-3d;
}

/* --- Parallax Layers --- */
.parallax-bg {
    position: absolute;
    top: -30%;
    left: -10%;
    right: -10%;
    bottom: -30%;
    transform: translateZ(-200px) scale(1.67);
    will-change: transform;
    z-index: 1;
}

.parallax-mid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateZ(-80px) scale(1.27);
    will-change: transform;
    z-index: 2;
    pointer-events: none;
}

.parallax-fg {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(2rem, 4vw, 5rem);
}

/* --- Lens Flare Base --- */
.lens-flare {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

.flare-core {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,168,85,0.6) 0%, rgba(212,168,85,0.2) 30%, transparent 70%);
    opacity: 0;
    transition: opacity 0.8s ease;
}

.flare-diffusion {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,248,240,0.08) 0%, rgba(212,168,85,0.04) 40%, transparent 70%);
    opacity: 0;
    transition: opacity 1s ease;
}

.lens-flare.visible .flare-core {
    opacity: 1;
}

.lens-flare.visible .flare-diffusion {
    opacity: 1;
}

/* --- Dust Motes --- */
.dust-mote {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255,248,240,0.3);
    opacity: 0;
    transition: opacity 1s ease;
}

.lens-flare.visible .dust-mote {
    opacity: 1;
}

.dust-mote:nth-child(3) { animation: dustDrift1 8s ease-in-out infinite; }
.dust-mote:nth-child(4) { animation: dustDrift2 11s ease-in-out infinite 1s; }
.dust-mote:nth-child(5) { animation: dustDrift3 9s ease-in-out infinite 2s; }
.dust-mote:nth-child(6) { animation: dustDrift1 12s ease-in-out infinite 0.5s; }
.dust-mote:nth-child(7) { animation: dustDrift2 10s ease-in-out infinite 3s; }
.dust-mote:nth-child(8) { animation: dustDrift3 7s ease-in-out infinite 1.5s; }
.dust-mote:nth-child(9) { animation: dustDrift1 13s ease-in-out infinite 4s; }
.dust-mote:nth-child(10) { animation: dustDrift2 9s ease-in-out infinite 2.5s; }
.dust-mote:nth-child(11) { animation: dustDrift3 11s ease-in-out infinite 0.8s; }
.dust-mote:nth-child(12) { animation: dustDrift1 8s ease-in-out infinite 3.5s; }
.dust-mote:nth-child(13) { animation: dustDrift2 10s ease-in-out infinite 1.2s; }
.dust-mote:nth-child(14) { animation: dustDrift3 12s ease-in-out infinite 2.8s; }

@keyframes dustDrift1 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(15px, -10px); }
    50% { transform: translate(-8px, -20px); }
    75% { transform: translate(12px, -5px); }
}

@keyframes dustDrift2 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-12px, -15px); }
    50% { transform: translate(10px, 8px); }
    75% { transform: translate(-5px, -18px); }
}

@keyframes dustDrift3 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(8px, 12px); }
    50% { transform: translate(-15px, -8px); }
    75% { transform: translate(5px, -15px); }
}

/* --- Flare Positioning per Section --- */

/* Vestibule flare: upper right */
.flare-vestibule .flare-core { top: 10%; right: 15%; left: auto; }
.flare-vestibule .flare-diffusion { top: -5%; right: 5%; left: auto; }
.flare-vestibule .dust-mote:nth-child(3) { top: 15%; right: 20%; }
.flare-vestibule .dust-mote:nth-child(4) { top: 8%; right: 25%; }
.flare-vestibule .dust-mote:nth-child(5) { top: 20%; right: 12%; }
.flare-vestibule .dust-mote:nth-child(6) { top: 12%; right: 30%; }
.flare-vestibule .dust-mote:nth-child(7) { top: 25%; right: 18%; }
.flare-vestibule .dust-mote:nth-child(8) { top: 5%; right: 22%; }
.flare-vestibule .dust-mote:nth-child(9) { top: 18%; right: 28%; }
.flare-vestibule .dust-mote:nth-child(10) { top: 22%; right: 15%; }

/* Gallery flare: top center */
.flare-gallery .flare-core { top: -5%; left: 50%; transform: translateX(-50%); }
.flare-gallery .flare-diffusion { top: -15%; left: 50%; transform: translateX(-50%); }
.flare-gallery .dust-mote:nth-child(3) { top: 5%; left: 45%; }
.flare-gallery .dust-mote:nth-child(4) { top: 10%; left: 52%; }
.flare-gallery .dust-mote:nth-child(5) { top: 3%; left: 48%; }
.flare-gallery .dust-mote:nth-child(6) { top: 12%; left: 55%; }
.flare-gallery .dust-mote:nth-child(7) { top: 7%; left: 42%; }
.flare-gallery .dust-mote:nth-child(8) { top: 15%; left: 50%; }

/* Archive flare: left side */
.flare-archive .flare-core { top: 20%; left: 5%; }
.flare-archive .flare-diffusion { top: 5%; left: -5%; }
.flare-archive .dust-mote:nth-child(3) { top: 25%; left: 10%; }
.flare-archive .dust-mote:nth-child(4) { top: 18%; left: 15%; }
.flare-archive .dust-mote:nth-child(5) { top: 30%; left: 8%; }
.flare-archive .dust-mote:nth-child(6) { top: 22%; left: 20%; }
.flare-archive .dust-mote:nth-child(7) { top: 15%; left: 12%; }
.flare-archive .dust-mote:nth-child(8) { top: 28%; left: 18%; }
.flare-archive .dust-mote:nth-child(9) { top: 20%; left: 22%; }
.flare-archive .dust-mote:nth-child(10) { top: 32%; left: 6%; }
.flare-archive .dust-mote:nth-child(11) { top: 12%; left: 16%; }
.flare-archive .dust-mote:nth-child(12) { top: 26%; left: 25%; }

/* Courtyard flare: top center (skylight) */
.flare-courtyard .flare-core {
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 400px;
}
.flare-courtyard .flare-diffusion {
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 1000px;
    height: 1000px;
}
.flare-courtyard .dust-mote:nth-child(3) { top: 10%; left: 40%; }
.flare-courtyard .dust-mote:nth-child(4) { top: 15%; left: 55%; }
.flare-courtyard .dust-mote:nth-child(5) { top: 8%; left: 48%; }
.flare-courtyard .dust-mote:nth-child(6) { top: 20%; left: 42%; }
.flare-courtyard .dust-mote:nth-child(7) { top: 12%; left: 58%; }
.flare-courtyard .dust-mote:nth-child(8) { top: 25%; left: 45%; }
.flare-courtyard .dust-mote:nth-child(9) { top: 5%; left: 52%; }
.flare-courtyard .dust-mote:nth-child(10) { top: 18%; left: 38%; }
.flare-courtyard .dust-mote:nth-child(11) { top: 22%; left: 60%; }
.flare-courtyard .dust-mote:nth-child(12) { top: 28%; left: 50%; }
.flare-courtyard .dust-mote:nth-child(13) { top: 14%; left: 35%; }
.flare-courtyard .dust-mote:nth-child(14) { top: 30%; left: 55%; }

/* Seal flare: crosses emblem diagonally */
.flare-seal .flare-core { top: 30%; left: 40%; }
.flare-seal .flare-diffusion { top: 15%; left: 30%; }
.flare-seal .dust-mote:nth-child(3) { top: 35%; left: 45%; }
.flare-seal .dust-mote:nth-child(4) { top: 40%; left: 50%; }
.flare-seal .dust-mote:nth-child(5) { top: 32%; left: 42%; }
.flare-seal .dust-mote:nth-child(6) { top: 38%; left: 55%; }
.flare-seal .dust-mote:nth-child(7) { top: 28%; left: 48%; }
.flare-seal .dust-mote:nth-child(8) { top: 42%; left: 52%; }


/* ============================================
   SECTION 1: THE VESTIBULE
   ============================================ */

/* Carrara marble texture */
.marble-carrara {
    background:
        radial-gradient(ellipse 120% 80% at 20% 30%, rgba(242,232,218,0.15) 0%, transparent 60%),
        radial-gradient(ellipse 80% 150% at 70% 60%, rgba(122,112,104,0.12) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 45% 80%, rgba(242,232,218,0.1) 0%, transparent 70%),
        radial-gradient(ellipse 200% 60% at 80% 20%, rgba(212,168,85,0.06) 0%, transparent 40%),
        linear-gradient(135deg, rgba(92,61,46,0.08) 0%, transparent 50%),
        linear-gradient(170deg,
            var(--umber-dark) 0%,
            #332820 30%,
            #2E221A 60%,
            var(--umber-dark) 100%
        );
}

/* Victorian corner ornaments */
.victorian-corner {
    position: absolute;
    width: 80px;
    height: 80px;
    z-index: 5;
}

.victorian-corner::before,
.victorian-corner::after {
    content: '';
    position: absolute;
    background: var(--ochre-gold);
    opacity: 0.4;
}

.corner-tl { top: 30px; left: 30px; }
.corner-tr { top: 30px; right: 30px; }
.corner-bl { bottom: 30px; left: 30px; }
.corner-br { bottom: 30px; right: 30px; }

.corner-tl::before { top: 0; left: 0; width: 60px; height: 2px; }
.corner-tl::after { top: 0; left: 0; width: 2px; height: 60px; }
.corner-tr::before { top: 0; right: 0; width: 60px; height: 2px; left: auto; }
.corner-tr::after { top: 0; right: 0; width: 2px; height: 60px; left: auto; }
.corner-bl::before { bottom: 0; left: 0; width: 60px; height: 2px; top: auto; }
.corner-bl::after { bottom: 0; left: 0; width: 2px; height: 60px; top: auto; }
.corner-br::before { bottom: 0; right: 0; width: 60px; height: 2px; top: auto; left: auto; }
.corner-br::after { bottom: 0; right: 0; width: 2px; height: 60px; top: auto; left: auto; }

/* Acanthus leaf curl on corners */
.victorian-corner {
    transition: transform 0.5s ease-out;
}

.corner-tl { border-top: 1px solid rgba(212,168,85,0.2); border-left: 1px solid rgba(212,168,85,0.2); border-radius: 8px 0 0 0; }
.corner-tr { border-top: 1px solid rgba(212,168,85,0.2); border-right: 1px solid rgba(212,168,85,0.2); border-radius: 0 8px 0 0; }
.corner-bl { border-bottom: 1px solid rgba(212,168,85,0.2); border-left: 1px solid rgba(212,168,85,0.2); border-radius: 0 0 0 8px; }
.corner-br { border-bottom: 1px solid rgba(212,168,85,0.2); border-right: 1px solid rgba(212,168,85,0.2); border-radius: 0 0 8px 0; }

/* Vestibule content */
.vestibule-content {
    text-align: center;
}

.site-title {
    font-family: 'Source Serif 4', serif;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    font-weight: 600;
    color: var(--cream-marble);
    letter-spacing: 0.04em;
    line-height: 1.1;
    margin-bottom: 1rem;
    text-shadow: 0 2px 20px rgba(43,33,24,0.5);
}

.site-subtitle {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: var(--ash-stone);
    letter-spacing: 0.08em;
}


/* ============================================
   SECTION 2: THE GALLERY
   ============================================ */

/* Sienna marble texture */
.marble-sienna {
    background:
        radial-gradient(ellipse 100% 80% at 30% 40%, rgba(196,120,74,0.12) 0%, transparent 50%),
        radial-gradient(ellipse 80% 120% at 60% 70%, rgba(92,61,46,0.15) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 80% 30%, rgba(212,168,85,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 150% 80% at 20% 80%, rgba(122,112,104,0.1) 0%, transparent 45%),
        linear-gradient(160deg,
            #3A2A1F 0%,
            var(--sienna-earth) 40%,
            #4A352A 70%,
            #3A2A1F 100%
        );
}

/* Column references */
.column-left,
.column-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    background:
        repeating-linear-gradient(90deg,
            rgba(122,112,104,0.06) 0px,
            rgba(242,232,218,0.04) 2px,
            rgba(122,112,104,0.06) 4px
        );
    box-shadow: inset -2px 0 8px rgba(43,33,24,0.3);
}

.column-left { left: 0; }
.column-right { right: 0; box-shadow: inset 2px 0 8px rgba(43,33,24,0.3); }

/* Gallery content */
.gallery-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 700px;
    width: 100%;
}

/* Exhibit panels */
.exhibit-panel {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 2px solid var(--ash-stone);
    border-left: 4px solid var(--ash-stone);
    border-right: 4px solid var(--ash-stone);
    background: rgba(43,33,24,0.6);
    backdrop-filter: blur(4px);
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out, border-color 0.5s ease-out;
}

.exhibit-panel:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(43,33,24,0.3);
    border-color: var(--ochre-gold);
}

/* Fleur-de-lis ornament atop each panel */
.exhibit-ornament {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
}

.exhibit-ornament::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 20px;
    background: var(--ochre-gold);
    border-radius: 50% 50% 2px 2px;
    opacity: 0.6;
}

.exhibit-ornament::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 12px;
    border: 2px solid var(--ochre-gold);
    border-bottom: none;
    border-radius: 50% 50% 0 0;
    opacity: 0.4;
}

/* Pediment header shape */
.exhibit-title {
    font-family: 'Source Serif 4', serif;
    font-weight: 600;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: var(--ochre-gold);
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(212,168,85,0.2);
    position: relative;
}

.exhibit-title::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 8px solid rgba(212,168,85,0.15);
}

.exhibit-text {
    color: var(--cream-marble);
    line-height: 1.7;
    opacity: 0.9;
}


/* ============================================
   SECTION 3: THE ARCHIVE
   ============================================ */

/* Dark marble texture */
.marble-dark {
    background:
        radial-gradient(ellipse 90% 70% at 40% 50%, rgba(92,61,46,0.1) 0%, transparent 50%),
        radial-gradient(ellipse 70% 100% at 70% 30%, rgba(122,112,104,0.08) 0%, transparent 55%),
        radial-gradient(ellipse 120% 50% at 20% 70%, rgba(43,33,24,0.15) 0%, transparent 40%),
        linear-gradient(145deg,
            #231A13 0%,
            var(--umber-dark) 40%,
            #1F1811 70%,
            #231A13 100%
        );
}

/* Filigree overlay (inverted parallax: scrolls faster) */
.filigree-overlay {
    position: absolute;
    top: -20%;
    left: -10%;
    right: -10%;
    bottom: -20%;
    z-index: 4;
    pointer-events: none;
    opacity: 0.04;
    background:
        radial-gradient(circle 3px at 10% 20%, var(--ochre-gold) 50%, transparent 50%),
        radial-gradient(circle 2px at 30% 40%, var(--ochre-gold) 50%, transparent 50%),
        radial-gradient(circle 3px at 50% 15%, var(--ochre-gold) 50%, transparent 50%),
        radial-gradient(circle 2px at 70% 35%, var(--ochre-gold) 50%, transparent 50%),
        radial-gradient(circle 3px at 90% 25%, var(--ochre-gold) 50%, transparent 50%),
        repeating-linear-gradient(45deg,
            transparent 0px,
            transparent 18px,
            rgba(212,168,85,0.3) 18px,
            rgba(212,168,85,0.3) 19px
        ),
        repeating-linear-gradient(-45deg,
            transparent 0px,
            transparent 18px,
            rgba(212,168,85,0.3) 18px,
            rgba(212,168,85,0.3) 19px
        );
    will-change: transform;
}

/* Book spread layout */
.archive-content {
    width: 100%;
    max-width: 900px;
}

.book-spread {
    display: flex;
    position: relative;
    gap: 0;
    min-height: 60vh;
}

.book-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(43,33,24,0.8) 10%,
        rgba(43,33,24,0.9) 50%,
        rgba(43,33,24,0.8) 90%,
        transparent 100%
    );
    box-shadow:
        -3px 0 10px rgba(43,33,24,0.4),
        3px 0 10px rgba(43,33,24,0.4);
    z-index: 2;
}

.book-page {
    flex: 1;
    padding: clamp(1.5rem, 3vw, 3rem);
    background: rgba(43,33,24,0.4);
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out;
}

.book-page:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(43,33,24,0.3);
}

.page-left {
    border-right: 1px solid rgba(122,112,104,0.15);
    border-radius: 4px 0 0 4px;
}

.page-right {
    border-left: 1px solid rgba(122,112,104,0.15);
    border-radius: 0 4px 4px 0;
}

.page-heading {
    font-family: 'Source Serif 4', serif;
    font-weight: 600;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--ochre-gold);
    margin-bottom: 1.2rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(212,168,85,0.15);
}

.page-text {
    color: var(--cream-marble);
    line-height: 1.8;
    margin-bottom: 1rem;
    opacity: 0.85;
}

.page-text em {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    color: var(--terracotta-warm);
}


/* ============================================
   SECTION 4: THE COURTYARD
   ============================================ */

.zen-garden {
    background: linear-gradient(180deg,
        #2B2118 0%,
        #332820 50%,
        #2B2118 100%
    );
}

/* Zen garden ripple rings */
.ripple {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(139,154,126,0.12);
}

.ripple-1 {
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ripple-2 {
    width: 350px;
    height: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(139,154,126,0.09);
}

.ripple-3 {
    width: 520px;
    height: 520px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(139,154,126,0.06);
}

.ripple-4 {
    width: 720px;
    height: 720px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(139,154,126,0.04);
}

.ripple-5 {
    width: 950px;
    height: 950px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(139,154,126,0.02);
}

/* Contemplation quote */
.courtyard-content {
    text-align: center;
    max-width: 600px;
}

.contemplation {
    position: relative;
}

.contemplation p {
    font-family: 'Source Serif 4', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.3rem, 3vw, 2rem);
    color: var(--cream-marble);
    line-height: 1.6;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
}

.contemplation cite {
    font-family: 'Source Sans 3', sans-serif;
    font-style: normal;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    color: var(--sage-mist);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


/* ============================================
   SECTION 5: THE SEAL
   ============================================ */

/* Emperador (dark) marble texture */
.marble-emperador {
    background:
        radial-gradient(ellipse 100% 80% at 50% 50%, rgba(92,61,46,0.12) 0%, transparent 50%),
        radial-gradient(ellipse 60% 100% at 30% 40%, rgba(43,33,24,0.15) 0%, transparent 50%),
        radial-gradient(ellipse 80% 60% at 70% 70%, rgba(122,112,104,0.08) 0%, transparent 55%),
        radial-gradient(ellipse 40% 30% at 50% 30%, rgba(196,120,74,0.05) 0%, transparent 60%),
        linear-gradient(155deg,
            #1A130E 0%,
            #231A13 30%,
            #1F1811 60%,
            #1A130E 100%
        );
}

.seal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

/* Seal emblem */
.seal-emblem {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seal-ring {
    position: absolute;
    border-radius: 50%;
    border-style: solid;
}

.seal-ring-outer {
    width: 220px;
    height: 220px;
    border-width: 3px;
    border-color: var(--ochre-gold);
    opacity: 0.5;
    top: 0;
    left: 0;
}

.seal-ring-middle {
    width: 180px;
    height: 180px;
    border-width: 1px;
    border-color: var(--terracotta-warm);
    opacity: 0.4;
    top: 20px;
    left: 20px;
}

.seal-ring-inner {
    width: 140px;
    height: 140px;
    border-width: 2px;
    border-color: var(--ochre-gold);
    opacity: 0.6;
    top: 40px;
    left: 40px;
}

.seal-monogram {
    font-family: 'Source Serif 4', serif;
    font-weight: 600;
    font-size: 4rem;
    color: var(--ochre-gold);
    z-index: 2;
    text-shadow: 0 2px 15px rgba(212,168,85,0.3);
}

.seal-inscription {
    font-family: 'Source Sans 3', sans-serif;
    font-size: clamp(0.75rem, 1.1vw, 0.95rem);
    color: var(--ash-stone);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}


/* ============================================
   HOVER-LIFT ANIMATIONS
   ============================================ */

[data-hover-lift] {
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out, border-color 0.5s ease-out;
}

[data-hover-lift]:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(43,33,24,0.3);
}


/* ============================================
   TEXT LINK STYLES
   ============================================ */

a {
    color: var(--cream-marble);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
    display: inline-block;
}

a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--terracotta-warm);
    opacity: 0;
    transition: opacity 0.3s ease;
}

a:hover {
    color: var(--terracotta-warm);
    transform: translateY(-2px);
}

a:hover::after {
    opacity: 1;
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .book-spread {
        flex-direction: column;
        min-height: auto;
    }

    .book-spine {
        width: 100%;
        height: 4px;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(43,33,24,0.8) 10%,
            rgba(43,33,24,0.9) 50%,
            rgba(43,33,24,0.8) 90%,
            transparent 100%
        );
        box-shadow:
            0 -3px 10px rgba(43,33,24,0.4),
            0 3px 10px rgba(43,33,24,0.4);
    }

    .page-left {
        border-right: none;
        border-bottom: 1px solid rgba(122,112,104,0.15);
        border-radius: 4px 4px 0 0;
    }

    .page-right {
        border-left: none;
        border-top: 1px solid rgba(122,112,104,0.15);
        border-radius: 0 0 4px 4px;
    }

    .victorian-corner {
        width: 50px;
        height: 50px;
    }

    .corner-tl::before, .corner-tr::before, .corner-bl::before, .corner-br::before { width: 35px; }
    .corner-tl::after, .corner-tr::after, .corner-bl::after, .corner-br::after { height: 35px; }

    .column-left, .column-right {
        width: 20px;
    }

    .seal-emblem {
        width: 160px;
        height: 160px;
    }

    .seal-ring-outer { width: 160px; height: 160px; }
    .seal-ring-middle { width: 130px; height: 130px; top: 15px; left: 15px; }
    .seal-ring-inner { width: 100px; height: 100px; top: 30px; left: 30px; }

    .seal-monogram { font-size: 3rem; }
}

@media (max-width: 480px) {
    .gallery-content {
        gap: 1.5rem;
    }

    .exhibit-panel {
        padding: 1.2rem;
    }

    .flare-core {
        width: 200px;
        height: 200px;
    }

    .flare-diffusion {
        width: 500px;
        height: 500px;
    }
}