:root {
  --obsidian: #17120F;
  --pomegranate: #8F1D2C;
  --lapis: #274C77;
  --serpentine: #2F5D50;
  --limestone: #E6D6B8;
  --brass: #C69A3D;
  --terracotta: #B45A35;
  --quartz: #D8E6E7;
  --display: "Grenze Gotisch", serif;
  --label: "Alegreya Sans SC", sans-serif;
  --text: "Literata", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--obsidian); }
body {
  margin: 0;
  color: var(--limestone);
  font-family: var(--text);
  background: var(--obsidian);
  overflow-x: hidden;
  cursor: crosshair;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .28;
  background:
    radial-gradient(circle at 18% 27%, rgba(216,230,231,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 35%, rgba(198,154,61,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 44% 82%, rgba(230,214,184,.12) 0 1px, transparent 2px),
    repeating-linear-gradient(102deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px);
  mix-blend-mode: screen;
}

.cursor-dust {
  position: fixed;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 60;
  background: radial-gradient(circle, rgba(230,214,184,.22), transparent 58%);
  mix-blend-mode: soft-light;
  transform: translate3d(-200px, -200px, 0);
}

.pin-nav {
  position: fixed;
  right: 24px;
  top: 50%;
  width: 92px;
  height: 520px;
  transform: translateY(-50%);
  z-index: 40;
}
.nav-lines { position: absolute; inset: 0; overflow: visible; }
.nav-lines path { fill: none; stroke: rgba(198,154,61,.48); stroke-width: 1.2; stroke-dasharray: 12 10; }
.pin {
  position: absolute;
  left: 34px;
  width: 21px;
  height: 21px;
  color: var(--limestone);
  text-decoration: none;
  transform: rotate(45deg);
}
.pin:nth-of-type(1) { top: 16px; }
.pin:nth-of-type(2) { top: 110px; left: 45px; }
.pin:nth-of-type(3) { top: 204px; left: 25px; }
.pin:nth-of-type(4) { top: 300px; left: 50px; }
.pin:nth-of-type(5) { top: 394px; left: 22px; }
.pin:nth-of-type(6) { top: 488px; left: 36px; }
.pin span {
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, var(--limestone), var(--brass) 38%, #6f4c19 72%);
  border: 1px solid rgba(23,18,15,.7);
  box-shadow: 0 0 0 3px rgba(198,154,61,.16), 0 8px 18px rgba(0,0,0,.5);
  transition: transform .5s ease, box-shadow .5s ease;
}
.pin::after {
  content: attr(data-label);
  position: absolute;
  right: 30px;
  top: -4px;
  transform: rotate(-45deg);
  font: 700 12px var(--label);
  letter-spacing: .12em;
  opacity: 0;
  color: var(--brass);
  transition: opacity .35s, right .35s;
}
.pin.active span, .pin:hover span { transform: scale(1.38) rotate(180deg); box-shadow: 0 0 18px rgba(198,154,61,.75); }
.pin.active::after, .pin:hover::after { opacity: 1; right: 34px; }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 8vh 8vw;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.chamber::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 20% 10%, rgba(198,154,61,.13), transparent 24%),
    radial-gradient(circle at 85% 70%, rgba(39,76,119,.22), transparent 34%),
    linear-gradient(120deg, #120e0c, var(--obsidian));
}
.chamber::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(36deg, transparent 48%, rgba(230,214,184,.055) 49% 50%, transparent 51%),
    linear-gradient(116deg, transparent 47%, rgba(180,90,53,.06) 48% 49%, transparent 50%);
}

.kilim-frame, .cloth-band, .fragment-border {
  position: absolute;
  pointer-events: none;
  background:
    repeating-linear-gradient(45deg, var(--pomegranate) 0 18px, var(--brass) 18px 24px, var(--lapis) 24px 42px, var(--serpentine) 42px 54px);
  box-shadow: inset 0 0 0 6px rgba(23,18,15,.55);
}
.kilim-frame.top { top: 0; left: 0; right: 0; height: 34px; }
.cloth-band.diagonal { width: 140vw; height: 120px; top: 9vh; left: -20vw; transform: rotate(-8deg); opacity: .85; }

.quarry-wall {
  width: min(1100px, 92vw);
  min-height: 72vh;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  clip-path: polygon(4% 7%, 74% 0, 96% 13%, 91% 88%, 42% 100%, 0 82%);
  background:
    radial-gradient(circle at 52% 50%, rgba(216,230,231,.08), transparent 20%),
    radial-gradient(circle at 24% 72%, rgba(47,93,80,.28), transparent 21%),
    repeating-radial-gradient(circle at 50% 50%, #211a16 0 2px, #17120F 3px 10px);
  box-shadow: inset 0 0 120px rgba(0,0,0,.75), 0 30px 80px rgba(0,0,0,.55);
}
.glowing-crack {
  position: absolute;
  top: -5%;
  bottom: -5%;
  left: 50%;
  width: var(--crack-width, 7px);
  transform: translateX(-50%) skewX(-8deg);
  background: linear-gradient(var(--quartz), var(--brass), var(--pomegranate), var(--quartz));
  filter: blur(.2px) drop-shadow(0 0 24px var(--brass));
  clip-path: polygon(42% 0, 70% 17%, 36% 34%, 63% 49%, 30% 66%, 58% 83%, 44% 100%, 0 100%, 25% 83%, 8% 65%, 32% 47%, 9% 31%, 28% 13%, 0 0);
}
.dust-sweep { position: absolute; inset: 0; background: linear-gradient(98deg, transparent 0 35%, rgba(230,214,184,.2) 45%, transparent 58%); transform: translateX(var(--sweep, -82%)); mix-blend-mode: screen; }
.cartouche, .label {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--brass);
}
.cartouche { align-self: end; margin-bottom: -4vh; padding: 9px 18px; border: 1px solid rgba(198,154,61,.5); background: rgba(23,18,15,.6); }
.wordmark, h2, .final-mark {
  font-family: var(--display);
  margin: 0;
  line-height: .8;
  letter-spacing: -.035em;
  color: var(--limestone);
  text-shadow: 0 3px 0 rgba(23,18,15,.9), 0 0 28px rgba(198,154,61,.35);
}
.wordmark { font-size: clamp(7rem, 22vw, 22rem); opacity: var(--word-opacity, .22); filter: contrast(1.2); }
.hero-note { align-self: start; max-width: 560px; margin-top: -3vh; }
.field-note { font-size: clamp(1rem, 1.5vw, 1.35rem); line-height: 1.7; color: var(--quartz); }

.mosaic-path { position: absolute; left: 8vw; bottom: -5vh; width: 78vw; height: 22vh; z-index: 4; }
.mosaic-path i { position: absolute; display: block; width: 90px; height: 70px; background: var(--path-color, var(--limestone)); clip-path: polygon(12% 8%, 90% 0, 100% 72%, 46% 100%, 0 75%); box-shadow: inset 0 0 0 3px rgba(23,18,15,.25); transform: translate(var(--drift-x,0), var(--drift-y,0)) rotate(var(--rot,0deg)); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.mosaic-path i:nth-child(1) { left: 3%; top: 46%; --path-color: #C69A3D; }
.mosaic-path i:nth-child(2) { left: 15%; top: 20%; --path-color: #274C77; }
.mosaic-path i:nth-child(3) { left: 29%; top: 54%; --path-color: #B45A35; }
.mosaic-path i:nth-child(4) { left: 43%; top: 8%; --path-color: #2F5D50; }
.mosaic-path i:nth-child(5) { left: 55%; top: 48%; --path-color: #E6D6B8; }
.mosaic-path i:nth-child(6) { left: 67%; top: 23%; --path-color: #8F1D2C; }
.mosaic-path i:nth-child(7) { left: 79%; top: 56%; --path-color: #D8E6E7; }
.mosaic-path i:nth-child(8) { left: 91%; top: 18%; --path-color: #C69A3D; }

.chamber-heading { position: relative; max-width: 560px; padding: 34px 42px; }
.chamber-heading h2, .night-copy h2, .ledger-cover h2 { font-size: clamp(4rem, 8vw, 9rem); }
.chamber-heading p, .night-copy p { font-size: clamp(1.05rem, 1.55vw, 1.45rem); line-height: 1.65; }
.slab.slate-a, .niche, .ledger-cover {
  background: rgba(23,18,15,.82);
  border: 2px solid rgba(198,154,61,.45);
  box-shadow: 0 22px 70px rgba(0,0,0,.48), inset 0 0 60px rgba(230,214,184,.06);
}
.slab.slate-a { clip-path: polygon(0 8%, 92% 0, 100% 86%, 9% 100%); }
.shard-table { grid-template-columns: 1fr 1.15fr; gap: 4vw; background-color: var(--obsidian); }
.specimen-stage { position: relative; width: min(560px, 90vw); height: 600px; }
.specimen.shard {
  position: absolute;
  inset: 70px 70px 130px 30px;
  clip-path: polygon(16% 1%, 84% 12%, 98% 58%, 58% 100%, 4% 78%);
  background: radial-gradient(circle at 34% 27%, var(--quartz), transparent 14%), linear-gradient(135deg, #102638, var(--lapis) 52%, #13202a);
  box-shadow: inset 0 0 0 8px rgba(230,214,184,.2), inset 0 0 70px rgba(0,0,0,.45), 0 24px 70px rgba(0,0,0,.58);
  transition: transform .45s ease, filter .45s ease;
}
.specimen.shard:hover { transform: rotate(-4deg) translateY(-14px); filter: saturate(1.35); }
.specimen.shard::after { content: attr(data-rub); position: absolute; right: 11%; bottom: 18%; font: 800 16px var(--label); letter-spacing: .14em; color: rgba(230,214,184,.18); }
.mineral-lines { position: absolute; inset: 0; background: repeating-linear-gradient(118deg, transparent 0 24px, rgba(216,230,231,.3) 25px, transparent 27px 48px); mix-blend-mode: screen; }
.brass-pin { position: absolute; width: 36px; height: 36px; right: 20%; top: 18%; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 9px rgba(198,154,61,.2); }
.hanging-tag { position: absolute; right: 0; bottom: 55px; width: 230px; padding: 24px 22px; color: var(--obsidian); background: var(--limestone); clip-path: polygon(7% 0, 94% 5%, 100% 88%, 18% 100%, 0 74%); transform-origin: 50% -60px; box-shadow: 0 12px 30px rgba(0,0,0,.42); }
.hanging-tag::before { content: ""; position: absolute; top: -90px; left: 50%; width: 1px; height: 96px; background: var(--brass); }
.hanging-tag b { display: block; font: 800 18px var(--label); letter-spacing: .09em; color: var(--pomegranate); }
.hanging-tag em { display: block; margin-top: 12px; font-style: normal; line-height: 1.4; }
.swing { animation: swing 4.5s ease-in-out infinite; }
@keyframes swing { 0%,100%{ transform: rotate(-2deg);} 50%{ transform: rotate(3deg);} }
.fragment-border { right: -8%; top: -4%; width: 190px; height: 460px; clip-path: polygon(20% 0, 100% 10%, 78% 100%, 0 85%); opacity: .88; }

.pebble-basin::before { background: radial-gradient(circle at center, rgba(216,230,231,.14), transparent 32%), linear-gradient(160deg, #101816, var(--serpentine)); }
.basin-ring { position: absolute; width: min(76vw, 760px); height: min(76vw, 760px); border-radius: 50%; border: 22px solid rgba(230,214,184,.18); box-shadow: inset 0 0 80px rgba(0,0,0,.6), 0 0 0 3px rgba(198,154,61,.35); }
.niche { text-align: center; border-radius: 46% 46% 4% 4% / 22% 22% 4% 4%; z-index: 2; }
.pebbles { position: absolute; inset: 0; z-index: 3; }
.pebble { position: absolute; border: 0; padding: 0; font: 700 13px var(--label); color: var(--obsidian); letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 0 24px rgba(0,0,0,.28), 0 18px 35px rgba(0,0,0,.38); transition: transform .35s ease; cursor: pointer; }
.pebble:hover { transform: translateY(-12px) rotate(8deg); }
.p1 { left: 18%; top: 63%; width: 116px; height: 82px; border-radius: 52% 48% 44% 56%; background: var(--quartz); }
.p2 { left: 70%; top: 58%; width: 132px; height: 92px; border-radius: 45% 55% 60% 40%; background: var(--serpentine); color: var(--limestone); }
.p3 { left: 65%; top: 21%; width: 96px; height: 110px; border-radius: 46% 54% 52% 48%; background: var(--terracotta); color: var(--limestone); }
.p4 { left: 15%; top: 23%; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle, var(--quartz) 0 16%, var(--lapis) 17% 34%, var(--limestone) 35% 58%, var(--brass) 59%); }
.pebble-note { position: absolute; bottom: 11vh; left: 50%; transform: translateX(-50%); padding: 13px 24px; background: var(--limestone); color: var(--obsidian); font: 800 16px var(--label); letter-spacing: .12em; text-transform: uppercase; clip-path: polygon(5% 0, 100% 12%, 94% 100%, 0 88%); }

.threshold { grid-template-columns: .9fr 1.1fr; gap: 5vw; }
.arch-niche { width: min(520px, 88vw); min-height: 620px; padding: 120px 50px 50px; text-align: center; border: 18px solid var(--limestone); border-bottom-width: 26px; border-radius: 50% 50% 3% 3% / 24% 24% 3% 3%; background: linear-gradient(#211916, #15100e); box-shadow: inset 0 0 70px rgba(0,0,0,.65), 0 20px 60px rgba(0,0,0,.45); }
.arch-niche h2 { font-size: clamp(4rem, 8vw, 8rem); }
.lintel { position: absolute; top: calc(50% - 310px); left: 10vw; font: 800 20px var(--label); letter-spacing: .24em; color: var(--brass); text-transform: uppercase; }
.threshold-slabs { display: grid; grid-template-columns: repeat(2, minmax(160px, 260px)); gap: 24px; transform: rotate(-5deg); }
.threshold-slabs .slab { min-height: 210px; display: grid; place-items: center; font: 800 22px var(--label); letter-spacing: .18em; text-transform: uppercase; color: var(--limestone); box-shadow: inset 0 0 42px rgba(0,0,0,.36), 0 18px 45px rgba(0,0,0,.4); transition: transform .4s ease; }
.threshold-slabs .slab:hover { transform: translateY(-16px) rotate(6deg); }
.tile-red { background: var(--pomegranate); clip-path: polygon(0 18%, 80% 0, 100% 70%, 24% 100%); }
.tile-gold { background: var(--brass); color: var(--obsidian) !important; clip-path: polygon(16% 0, 100% 20%, 82% 100%, 0 76%); }
.tile-green { grid-column: span 2; background: var(--serpentine); clip-path: polygon(8% 0, 96% 12%, 100% 82%, 0 100%); }

.ledger { background: var(--limestone); color: var(--obsidian); }
.ledger::before { background: repeating-linear-gradient(0deg, rgba(180,90,53,.12) 0 2px, transparent 2px 34px), linear-gradient(110deg, var(--limestone), #cdb88f); }
.ledger-cover { padding: 30px 42px; color: var(--limestone); transform: rotate(-2deg); }
.ledger-pages { width: min(960px, 92vw); display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.ledger-pages article { min-height: 260px; padding: 24px; background: rgba(23,18,15,.9); color: var(--limestone); clip-path: polygon(0 8%, 93% 0, 100% 88%, 10% 100%); box-shadow: 0 18px 38px rgba(23,18,15,.25); transition: transform .4s ease; }
.ledger-pages article:hover { transform: translateY(-14px) rotate(-2deg); }
.ledger-pages span { font: 900 52px var(--display); color: var(--brass); }
.ledger-pages b { display: block; margin: 10px 0; font: 800 17px var(--label); color: var(--quartz); text-transform: uppercase; letter-spacing: .1em; }
.wax-seal { position: absolute; right: 14vw; bottom: 12vh; width: 120px; height: 120px; display: grid; place-items: center; border-radius: 50%; background: var(--pomegranate); color: var(--limestone); font: 900 42px var(--display); box-shadow: inset 0 0 30px rgba(0,0,0,.38); }

.courtyard::before { background: radial-gradient(circle at 70% 18%, rgba(216,230,231,.25), transparent 13%), linear-gradient(180deg, #090809, var(--obsidian) 45%, #111816); }
.moon { position: absolute; right: 17vw; top: 12vh; width: 110px; height: 110px; border-radius: 50%; background: var(--quartz); box-shadow: 0 0 70px rgba(216,230,231,.5); }
.night-copy { width: min(760px, 86vw); transform: translateX(-8vw); }
.final-mark { position: absolute; right: 9vw; bottom: 8vh; font-size: clamp(5rem, 13vw, 15rem); color: rgba(230,214,184,.16); }
.dust-field span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--quartz); opacity: .62; animation: mote 9s linear infinite; }
@keyframes mote { from { transform: translateY(20px); opacity: 0; } 20% { opacity: .72; } to { transform: translateY(-120px) translateX(44px); opacity: 0; } }

.chamber .chamber-heading, .chamber .specimen-stage, .chamber .arch-niche, .chamber .threshold-slabs, .chamber .ledger-cover, .chamber .ledger-pages, .chamber .night-copy { opacity: .38; transform: translateY(28px) rotate(var(--tilt,0)); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.chamber.in-view .chamber-heading, .chamber.in-view .specimen-stage, .chamber.in-view .arch-niche, .chamber.in-view .threshold-slabs, .chamber.in-view .ledger-cover, .chamber.in-view .ledger-pages, .chamber.in-view .night-copy { opacity: 1; transform: translateY(0) rotate(var(--tilt,0)); }
.living-mosaic { transform: translateX(80px) rotate(8deg); transition: transform 1s ease; }
.in-view .living-mosaic { transform: translateX(0) rotate(-3deg); }

@media (max-width: 900px) {
  .pin-nav { right: -12px; transform: translateY(-50%) scale(.78); }
  .chamber { padding: 9vh 7vw; }
  .shard-table, .threshold { grid-template-columns: 1fr; }
  .specimen-stage { height: 520px; }
  .ledger-pages { grid-template-columns: 1fr 1fr; }
  .night-copy { transform: none; }
}

@media (max-width: 620px) {
  .pin-nav { display: none; }
  .wordmark { font-size: 28vw; }
  .ledger-pages { grid-template-columns: 1fr; }
  .threshold-slabs { grid-template-columns: 1fr; }
  .tile-green { grid-column: auto; }
}