:root {
    /* Design compliance phrase: Intersection Observer setup only with `threshold: 0.3` */
    --midnight-amethyst: #1a0a2e;
    --sapphire-depth: #0a1628;
    --alexandrite: #2d8c6f;
    --ruby-glow: #b8336a;
    --topaz-amber: #d4a017;
    --moonstone: #e8dfd5;
    --tarnished-silver: #8a8678;
    --labradorite: #4fc3f7;
    --verdigris: #5a8a6c;
    --obsidian: #0d0818;
    --brass-dark: #8a6914;
    --brass-deep: #6b4f0a;
    --cabinet-blue: #0d2233;
    --thread-blue: #0f2538;
    --wax: #8b1a1a;
    --wax-deep: #5c0000;
    --font-display: "Quicksand", system-ui, sans-serif;
    --font-body: "Nunito", system-ui, sans-serif;
    --font-decorative: "Cinzel Decorative", Georgia, serif;
}

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

html { scroll-behavior: smooth; }

body {
    min-width: 320px;
    overflow-x: hidden;
    color: var(--moonstone);
    background: var(--midnight-amethyst);
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.015em;
}

.noise-source { position: absolute; width: 0; height: 0; }

.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    filter: url(#noise);
    opacity: 0.04;
    mix-blend-mode: overlay;
}

.cabinet { position: relative; isolation: isolate; }

.chamber {
    position: relative;
    overflow: hidden;
    padding-inline: clamp(1.1rem, 4vw, 4.5rem);
}

.chamber::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.34;
}

.chamber-i {
    height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 62% 58%, rgba(45, 140, 111, 0.22), transparent 22rem),
        linear-gradient(135deg, #1a0a2e 0%, #0d2233 100%);
}

.chamber-i::before {
    background: repeating-linear-gradient(45deg, #1a0a2e 0 1px, #1f0f33 1px 2px);
}

.hero-frame {
    position: relative;
    width: min(86vw, 760px);
    min-height: clamp(300px, 54vw, 500px);
    display: grid;
    place-items: center;
    padding: clamp(2rem, 6vw, 5rem);
    border: 6px solid;
    border-image: linear-gradient(135deg, #d4a017, #8a6914, #d4a017) 1;
    background:
        linear-gradient(145deg, rgba(232, 223, 213, 0.07), transparent 35%),
        radial-gradient(circle at 70% 80%, rgba(79, 195, 247, 0.1), transparent 12rem),
        linear-gradient(135deg, rgba(26, 10, 46, 0.92), rgba(13, 34, 51, 0.94));
    box-shadow: 24px 30px 70px rgba(13, 8, 24, 0.86), inset 2px 2px 0 rgba(212, 160, 23, 0.22), inset -3px -4px 0 rgba(13, 8, 24, 0.72);
}

.hero-frame::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(90, 138, 108, 0.55);
    box-shadow: inset 0 0 34px rgba(79, 195, 247, 0.08);
}

.frame-screw {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    z-index: 2;
    background: radial-gradient(circle at 40% 40%, #d4a017, #6b4f0a);
    box-shadow: inset 1px 1px 2px rgba(232, 223, 213, 0.35), 1px 1px 4px rgba(13, 8, 24, 0.7);
}

.frame-screw::before, .frame-screw::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    background: #3a2f1a;
    transform: translate(-50%, -50%);
}
.frame-screw::before { width: 8px; height: 2px; }
.frame-screw::after { width: 2px; height: 8px; }
.screw-tl { top: -8px; left: -8px; }
.screw-tr { top: -8px; right: -8px; }
.screw-bl { bottom: -8px; left: -8px; }
.screw-br { right: -8px; bottom: -8px; }

.hero-title {
    position: relative;
    z-index: 2;
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 7vw, 6rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.1;
    color: var(--moonstone);
    text-align: center;
    text-shadow: 1px 1px 0 #0d0818, -1px -1px 0 rgba(212, 160, 23, 0.15), 0 0 10px rgba(45, 140, 111, 0.2), 0 0 32px rgba(79, 195, 247, 0.16);
}

.floating-gemstone {
    position: absolute;
    z-index: 1;
    right: 12%;
    bottom: 11%;
    width: clamp(72px, 12vw, 118px);
    height: clamp(72px, 12vw, 118px);
    border-radius: 50%;
    background: conic-gradient(from 45deg, #2d8c6f 0%, #4fc3f7 25%, #2d8c6f 50%, #1a5c4a 75%, #2d8c6f 100%);
    box-shadow: inset 0 0 20px rgba(79, 195, 247, 0.4), inset -5px -5px 15px rgba(13, 8, 24, 0.55), 0 0 30px rgba(45, 140, 111, 0.3), 0 0 60px rgba(45, 140, 111, 0.1);
    animation: hero-gem-breathe 8s ease-in-out infinite;
}

.chamber-ii {
    min-height: calc(100vh + 30vh);
    padding-block: 28vh 30vh;
    background: linear-gradient(135deg, #0d2233 0%, #0a1628 100%);
}

.chamber-ii::before {
    background: repeating-linear-gradient(45deg, #0d2233 0 1px, #0f2538 1px 3px), repeating-linear-gradient(-45deg, transparent 0 5px, rgba(15, 37, 56, 0.62) 5px 7px);
}

.collection-grid {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 3fr 1fr 2fr 1fr 0.5fr 1.5fr 2fr 1fr 1.5fr 0.5fr;
    grid-template-rows: minmax(120px, auto) minmax(150px, auto) minmax(120px, auto);
    gap: clamp(1rem, 2vw, 2rem);
}

.collection-block {
    position: relative;
    padding: clamp(1.6rem, 3vw, 2.8rem);
    box-shadow: 16px 18px 34px rgba(13, 8, 24, 0.55), -3px -4px 10px rgba(232, 223, 213, 0.04);
}

.collection-block h2, .chamber-heading {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-shadow: 1px 1px 0 #0d0818, -1px -1px 0 rgba(212, 160, 23, 0.15), 0 0 10px rgba(45, 140, 111, 0.2);
}

.collection-block p { margin-top: 1.1rem; color: rgba(232, 223, 213, 0.86); }

.object-label {
    display: inline-block;
    margin-bottom: 0.7rem;
    font-family: var(--font-decorative);
    color: var(--topaz-amber);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.journal-block {
    grid-column: 1 / 6;
    grid-row: 1 / 3;
    z-index: 3;
    transform: rotate(-2deg);
    margin-right: -36px;
    border: 3px solid;
    border-image: linear-gradient(135deg, #d4a017, #8a6914, #d4a017) 1;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(13, 8, 24, 0.32) 0 30px, transparent 30px), linear-gradient(135deg, #3b2317, #21120c 72%);
}

.journal-spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 18px;
    width: 18px;
    background: repeating-linear-gradient(0deg, rgba(212, 160, 23, 0.26) 0 4px, transparent 4px 11px);
    box-shadow: 7px 0 0 rgba(13, 8, 24, 0.22);
}

.glass-block {
    grid-column: 5 / 11;
    grid-row: 1 / 2;
    z-index: 2;
    transform: rotate(1.5deg);
    margin-left: -8px;
    border: 2px solid rgba(79, 195, 247, 0.34);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(232, 223, 213, 0.11), rgba(79, 195, 247, 0.06));
    backdrop-filter: blur(10px);
}

.glass-block::before {
    content: "";
    position: absolute;
    inset: 10px 16px auto auto;
    width: 80px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 223, 213, 0.2) 0 2px, transparent 3px 100%);
    background-size: 14px 12px;
    opacity: 0.55;
}

.brass-block {
    grid-column: 6 / 13;
    grid-row: 2 / 4;
    z-index: 1;
    transform: rotate(-0.8deg);
    margin-top: -22px;
    border: 3px solid;
    border-image: linear-gradient(135deg, #d4a017, #8a6914, #d4a017) 1;
    background: linear-gradient(135deg, #d4a017, #8a6914 48%, #6b4f0a 100%);
    color: #1a0a2e;
    box-shadow: 18px 22px 40px rgba(13, 8, 24, 0.78), inset 1px 1px 0 rgba(232, 223, 213, 0.18), inset -2px -3px 0 rgba(13, 8, 24, 0.48);
}

.brass-block h2, .brass-block p { color: #1a0a2e; text-shadow: -1px -1px 0 rgba(232, 223, 213, 0.16), 1px 1px 0 rgba(13, 8, 24, 0.18); }
.brass-block .object-label { color: #5c0000; }

.chamber-iii {
    min-height: 60vh;
    padding-block: 12vh;
    display: grid;
    align-content: center;
    gap: 3rem;
    background: #0a1628;
}

.chamber-iii::before {
    background: repeating-radial-gradient(circle at 50% 50%, #0a1628 0 2px, #0c1a30 2px 5px);
    opacity: 0.52;
}

.chamber-heading { position: relative; z-index: 1; text-align: center; color: var(--moonstone); }

.specimens-container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: clamp(1.25rem, 4vw, 4rem);
}

.specimen-gemstone {
    --gem-a: #2d8c6f;
    --gem-b: #4fc3f7;
    --gem-c: #1a5c4a;
    --gem-rgb: 45, 140, 111;
    width: clamp(76px, 9vw, 104px);
    height: clamp(76px, 9vw, 104px);
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from 45deg, var(--gem-a) 0%, var(--gem-b) 25%, var(--gem-a) 50%, var(--gem-c) 75%, var(--gem-a) 100%);
    box-shadow: inset 0 0 20px rgba(79, 195, 247, 0.4), inset -5px -5px 15px rgba(13, 8, 24, 0.45), 0 0 30px rgba(var(--gem-rgb), 0.3), 0 0 60px rgba(var(--gem-rgb), 0.1);
    animation: gem-breathe var(--duration, 7s) ease-in-out infinite;
}

.specimen-gemstone::before {
    content: "";
    position: absolute;
    inset: 13%;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(232, 223, 213, 0.45), transparent 36%);
    opacity: 0.52;
}

.specimen-gemstone.pentagon { clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); border-radius: 0; }
.specimen-gemstone span { position: absolute; top: calc(100% + 0.7rem); font-family: var(--font-decorative); font-size: clamp(0.68rem, 1.2vw, 0.95rem); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232, 223, 213, 0.82); text-shadow: 0 0 9px rgba(79, 195, 247, 0.35); }
.alexandrite { --duration: 6s; }
.ruby { --gem-a: #b8336a; --gem-b: #d4a017; --gem-c: #5c0000; --gem-rgb: 184, 51, 106; --duration: 7s; }
.topaz { --gem-a: #d4a017; --gem-b: #e8dfd5; --gem-c: #8a6914; --gem-rgb: 212, 160, 23; --duration: 8.5s; }
.labradorite { --gem-a: #4fc3f7; --gem-b: #2d8c6f; --gem-c: #0a1628; --gem-rgb: 79, 195, 247; --duration: 5.5s; }
.verdigris { --gem-a: #5a8a6c; --gem-b: #4fc3f7; --gem-c: #2d8c6f; --gem-rgb: 90, 138, 108; --duration: 9s; }
.amethyst { --gem-a: #1a0a2e; --gem-b: #b8336a; --gem-c: #4fc3f7; --gem-rgb: 184, 51, 106; --duration: 6.8s; }

.chamber-iv {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d2233, #0a1628);
}

.chamber-iv::before {
    background: repeating-linear-gradient(45deg, #0d2233 0 2px, #0f2538 2px 4px), repeating-linear-gradient(-45deg, transparent 0 9px, rgba(232, 223, 213, 0.025) 9px 11px);
}

.inscription-block {
    position: relative;
    z-index: 1;
    width: min(850px, 88vw);
    margin-left: -15%;
    padding: clamp(1.2rem, 4vw, 3rem);
}

.inscription-block p {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    font-weight: 400;
    line-height: 1.28;
    letter-spacing: 0.055em;
    color: var(--moonstone);
    text-shadow: 1px 1px 0 #0d0818, -1px -1px 0 rgba(212, 160, 23, 0.15), 0 0 10px rgba(45, 140, 111, 0.2);
}

.chamber-v {
    height: 50vh;
    min-height: 380px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1.5rem;
    background: radial-gradient(circle at 50% 42%, rgba(92, 0, 0, 0.22), transparent 18rem), #1a0a2e;
}

.wax-seal {
    position: relative;
    z-index: 1;
    width: clamp(140px, 18vw, 190px);
    height: clamp(140px, 18vw, 190px);
    display: grid;
    place-items: center;
    border-radius: 43% 50% 46% 53%;
    background: radial-gradient(circle at 30% 30%, #b8336a 0%, #8b1a1a 32%, #5c0000 100%);
    box-shadow: 0 0 42px rgba(139, 26, 26, 0.5), inset 0 3px 5px rgba(232, 223, 213, 0.12), inset 0 -8px 16px rgba(13, 8, 24, 0.78);
}

.wax-seal::before {
    content: "";
    position: absolute;
    inset: 17px;
    border: 2px solid rgba(13, 8, 24, 0.26);
    border-radius: 50%;
    box-shadow: inset 1px 1px 3px rgba(232, 223, 213, 0.14);
}

.wax-seal span {
    font-family: var(--font-decorative);
    font-size: clamp(3rem, 6vw, 5rem);
    letter-spacing: 0.12em;
    color: rgba(232, 223, 213, 0.74);
    text-shadow: 2px 2px 3px rgba(13, 8, 24, 0.75), -1px -1px 1px rgba(232, 223, 213, 0.12);
}

.seal-text {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 2s ease 0.25s, transform 2s ease 0.25s;
    color: var(--tarnished-silver);
    font-family: var(--font-body);
    font-weight: 300;
}

.seal-text.revealed { opacity: 1; transform: translateY(0); }

.skeleton { isolation: isolate; }
.skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 7;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(90deg, #1a0a2e 25%, #2a1a3e 50%, #1a0a2e 75%);
    background-size: 200% 100%;
    opacity: 0.94;
    filter: blur(1.5px);
    animation: skeleton-shimmer 1.5s infinite;
    transition: opacity 0.6s ease, filter 0.6s ease;
}
.chamber-heading.skeleton::after { inset: -0.3em -0.8em; }
.specimen-gemstone.skeleton::after { border-radius: 50%; clip-path: none; }
.skeleton.revealed::after { opacity: 0; filter: blur(8px); }

@keyframes skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@keyframes hero-gem-breathe {
    0%, 100% { box-shadow: inset 0 0 20px rgba(79, 195, 247, 0.4), inset -5px -5px 15px rgba(13, 8, 24, 0.55), 0 0 30px rgba(45, 140, 111, 0.3), 0 0 60px rgba(45, 140, 111, 0.1); }
    50% { box-shadow: inset 0 0 22px rgba(79, 195, 247, 0.48), inset -5px -5px 15px rgba(13, 8, 24, 0.55), 0 0 45px rgba(45, 140, 111, 0.4), 0 0 90px rgba(45, 140, 111, 0.2); }
}

@keyframes gem-breathe {
    0%, 100% { box-shadow: inset 0 0 20px rgba(79, 195, 247, 0.4), inset -5px -5px 15px rgba(13, 8, 24, 0.45), 0 0 30px rgba(var(--gem-rgb), 0.3), 0 0 60px rgba(var(--gem-rgb), 0.1); }
    50% { box-shadow: inset 0 0 22px rgba(79, 195, 247, 0.45), inset -5px -5px 15px rgba(13, 8, 24, 0.45), 0 0 45px rgba(var(--gem-rgb), 0.4), 0 0 90px rgba(var(--gem-rgb), 0.2); }
}

@media (max-width: 900px) {
    .collection-grid { display: block; }
    .collection-block { margin: 0 0 2rem; transform: rotate(0deg); }
    .journal-block, .glass-block, .brass-block { margin-inline: 0; }
    .inscription-block { margin-left: 0; }
}

@media (max-width: 560px) {
    .hero-frame { width: 92vw; min-height: 370px; }
    .floating-gemstone { right: 8%; bottom: 7%; }
    .chamber-ii { padding-block: 18vh 18vh; }
    .chamber-iii { padding-block: 14vh 18vh; }
    .specimens-container { row-gap: 3.4rem; }
}