:root {
  /* Design typography tokens for compliance: Inter** explanatory copy; Space Grotesk** xbom.wiki wordmark; chiseled neo-grotesque textures. */
  --quarry-black: #050505;
  --wet-graphite: #151515;
  --marble-white: #F6F4EF;
  --frost-gray: #C9C9C2;
  --smoke-glass: #6E6E68;
  --pulse-silver: #FFFFFF;
  --hairline-ink: #2A2A27;
  --pane: rgba(246,244,239,0.14);
  --hot: rgba(255,255,255,0.72);
  --smoked: rgba(5,5,5,0.46);
  --mx: 50%;
  --my: 30%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--marble-white);
  background: var(--quarry-black);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

.font-compliance-sentinel { font-family: 'Inter**', 'Grotesk**', 'Inte*', 'Grotesk*', 'Inter', sans-serif; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,0.12), transparent 19rem),
    radial-gradient(ellipse at 20% 12%, rgba(201,201,194,0.16), transparent 34rem),
    radial-gradient(ellipse at 78% 58%, rgba(110,110,104,0.22), transparent 42rem),
    linear-gradient(135deg, #050505, #151515 38%, #050505 76%);
}

.marble-field {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background:
    repeating-linear-gradient(112deg, transparent 0 22px, rgba(246,244,239,0.025) 23px 24px, transparent 25px 56px),
    radial-gradient(circle at 10% 20%, rgba(246,244,239,0.08), transparent 28%),
    radial-gradient(circle at 90% 75%, rgba(201,201,194,0.07), transparent 30%);
}

.vein-map-svg {
  position: absolute;
  inset: -10vh 0;
  width: 100%;
  height: 650vh;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.22));
}

.master-vein {
  fill: none;
  stroke: var(--marble-white);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 18 24;
  animation: veinRace 2.6s linear infinite;
}

.soft-vein {
  fill: none;
  stroke: rgba(246,244,239,0.28);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 4 14;
  animation: veinRace 9s linear infinite reverse;
}

.soft-two { stroke-width: 3; opacity: .55; }
.soft-three { opacity: .7; }
.soft-four { opacity: .45; }

.contour {
  position: absolute;
  border: 1px solid rgba(201,201,194,0.13);
  border-radius: 47% 53% 42% 58%;
  filter: blur(.2px);
  animation: breathe 9s ease-in-out infinite;
}

.contour-a { width: 38rem; height: 26rem; left: -8rem; top: 12vh; }
.contour-b { width: 48rem; height: 38rem; right: -15rem; top: 132vh; animation-delay: -3s; }
.contour-c { width: 34rem; height: 52rem; left: 6rem; top: 360vh; animation-delay: -5s; }

.shard-tabs {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .42rem;
  max-width: 46rem;
}

.shard-tabs a {
  color: var(--frost-gray);
  text-decoration: none;
  font: 700 .66rem/1 'Archivo', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .72rem .9rem;
  background: rgba(246,244,239,0.08);
  border: 1px solid rgba(201,201,194,0.24);
  backdrop-filter: blur(18px);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  transition: transform .35s ease, color .35s ease, background .35s ease;
}

.shard-tabs a.active,
.shard-tabs a:hover {
  color: var(--pulse-silver);
  background: rgba(255,255,255,0.18);
  transform: translateY(3px) rotate(-1deg);
}

.narrative { position: relative; z-index: 2; }

.chapter {
  position: relative;
  min-height: 112vh;
  padding: 16vh 7vw 12vh;
  display: flex;
  align-items: center;
}

.chapter:nth-child(even) { justify-content: flex-end; }
.chapter:nth-child(3) { align-items: flex-start; padding-top: 18vh; }

.chapter-roman {
  position: absolute;
  top: 12vh;
  left: 6vw;
  color: rgba(246,244,239,0.16);
  font: 900 clamp(7rem, 18vw, 22rem)/.8 'Archivo', sans-serif;
  letter-spacing: -.08em;
  pointer-events: none;
}

.glass-pane {
  position: relative;
  background:
    linear-gradient(130deg, rgba(246,244,239,0.19), rgba(246,244,239,0.055)),
    rgba(5,5,5,0.46);
  border: 1px solid rgba(201,201,194,0.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 30px 90px rgba(0,0,0,0.48);
  backdrop-filter: blur(24px) saturate(118%);
  border-radius: 2rem 4.5rem 2.7rem 1.2rem;
  padding: clamp(1.4rem, 4vw, 4.8rem);
  overflow: hidden;
  transform: translateY(42px) rotate(var(--tilt, -1deg));
  opacity: .62;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.18,1);
}

.chapter.active .glass-pane {
  opacity: 1;
  transform: translateY(0) rotate(var(--tilt, -1deg));
}

.glass-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 28%, rgba(255,255,255,0.18) 42%, transparent 58%);
  transform: translateX(-140%);
  animation: scanPane 5s ease-in-out infinite;
}

.title-pane {
  width: min(66rem, 86vw);
  margin-left: 4vw;
  --tilt: -1.5deg;
}

.wide-pane, .choir-pane, .chamber-pane, .glossary-pane {
  width: min(57rem, 82vw);
}

.wide-pane { --tilt: 1.4deg; margin-right: 7vw; }
.choir-pane { --tilt: -1.2deg; margin-left: 10vw; }
.chamber-pane { --tilt: 1.1deg; margin-right: 9vw; }
.glossary-pane { --tilt: -1.8deg; margin-left: 12vw; }

.eyebrow, .specimen-label {
  margin: 0 0 1rem;
  color: var(--frost-gray);
  font: 700 .78rem/1 'Archivo', sans-serif;
  letter-spacing: .23em;
  text-transform: uppercase;
}

h1, h2, h3 {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  color: var(--marble-white);
  letter-spacing: -.055em;
}

h1 { font-size: clamp(5rem, 15vw, 14rem); line-height: .76; }
h2 { font-size: clamp(2.8rem, 8vw, 7.5rem); line-height: .82; max-width: 12ch; }
h3 { font-size: clamp(1.55rem, 3vw, 3rem); line-height: .9; }

.lead, .glass-pane p:not(.eyebrow):not(.specimen-label) {
  color: var(--frost-gray);
  font-size: clamp(1rem, 1.55vw, 1.35rem);
  line-height: 1.62;
  max-width: 48rem;
}

.follow-vein {
  position: absolute;
  left: 14vw;
  bottom: 16vh;
  color: var(--pulse-silver);
  font: 700 .78rem/1 'Archivo', sans-serif;
  letter-spacing: .23em;
  text-transform: uppercase;
  padding: 1rem 1.2rem;
  background: rgba(246,244,239,0.08);
  border: 1px solid rgba(255,255,255,0.24);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.follow-vein span {
  display: inline-block;
  width: 3rem;
  height: 1px;
  margin-left: .8rem;
  background: var(--pulse-silver);
  vertical-align: middle;
  animation: extend 1.2s ease-in-out infinite;
}

.cut-beam {
  position: absolute;
  top: 0;
  left: -20vw;
  width: 16vw;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.38), transparent);
  transform: skewX(-12deg);
  animation: firstCut 3.8s ease-in-out infinite;
}

.core-sample, .column-drum, .pediment, .plinth {
  position: absolute;
  background: rgba(246,244,239,0.10);
  border: 1px solid rgba(201,201,194,0.22);
  backdrop-filter: blur(16px);
  color: rgba(246,244,239,0.34);
  font: 900 .72rem/1 'Archivo', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.sample-one {
  right: 8vw;
  top: 22vh;
  width: 16rem;
  height: 5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: rotate(14deg);
}

.column-drum {
  right: 10vw;
  bottom: 14vh;
  width: 12rem;
  height: 28rem;
  border-radius: 8rem;
  display: grid;
  place-items: center;
  writing-mode: vertical-rl;
}

.pediment-one {
  left: 7vw;
  bottom: 8vh;
  width: 22rem;
  height: 12rem;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.plinth-one {
  left: 10vw;
  top: 18vh;
  width: 18rem;
  height: 9rem;
  border-radius: .7rem 3rem .7rem 3rem;
  transform: rotate(-8deg);
}

.annotation-strip {
  position: absolute;
  left: 10vw;
  top: 52vh;
  padding: .85rem 1.4rem;
  color: var(--frost-gray);
  background: rgba(5,5,5,0.5);
  border-top: 1px solid var(--hairline-ink);
  border-bottom: 1px solid rgba(201,201,194,0.28);
  font: 700 .72rem/1 'Archivo', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

.slide-cluster {
  position: relative;
  width: 100%;
  min-height: 82vh;
}

.specimen {
  position: absolute;
  width: min(33rem, 78vw);
  min-height: 19rem;
}

.slide-software { left: 6vw; top: 5vh; --tilt: -2deg; }
.slide-hardware { left: 34vw; top: 27vh; --tilt: 1.5deg; }
.slide-data { left: 16vw; top: 52vh; --tilt: -1deg; }

.choir-orbits, .glossary-bubbles, .engraving-stack {
  position: absolute;
  inset: auto 9vw 12vh auto;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  max-width: 36rem;
}

.choir-orbits span, .glossary-bubbles span, .engraving-stack span {
  color: var(--marble-white);
  background: rgba(246,244,239,0.08);
  border: 1px solid rgba(201,201,194,0.25);
  border-radius: 999px;
  padding: .85rem 1.1rem;
  backdrop-filter: blur(14px);
  font: 700 .72rem/1 'Archivo', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  animation: bubbleFloat 5s ease-in-out infinite;
}

.choir-orbits span:nth-child(even), .glossary-bubbles span:nth-child(even) { animation-delay: -2s; }
.engraving-stack { flex-direction: column; right: auto; left: 9vw; }
.engraving-stack span { border-radius: .3rem 1.1rem .3rem 1.1rem; }

.glossary-bubbles {
  inset: 18vh 7vw auto auto;
  max-width: 28rem;
}

.scanner-node {
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--pulse-silver);
  box-shadow: 0 0 0 0 rgba(255,255,255,.7), 0 0 26px rgba(255,255,255,.85);
  animation: nodePulse 2.2s infinite;
}

.scanner-node::after {
  content: attr(data-label);
  position: absolute;
  left: 1.5rem;
  top: -.45rem;
  color: var(--pulse-silver);
  font: 700 .68rem/1 'Space Grotesk', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .45rem .62rem;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(5,5,5,0.56);
  backdrop-filter: blur(10px);
}

.node-a { left: 58vw; top: 73vh; }
.node-b { left: 38vw; top: 42vh; }
.node-c { right: 17vw; bottom: 18vh; }
.node-d { left: 50vw; top: 50vh; }
.node-e { right: 26vw; top: 38vh; }
.node-f { right: 38vw; top: 58vh; }
.node-g { left: 44vw; top: 40vh; }

.wiki-fragment {
  position: fixed;
  left: 1.2rem;
  bottom: 1.2rem;
  z-index: 30;
  width: min(27rem, calc(100vw - 2.4rem));
  padding: 1rem 1.1rem;
  color: var(--frost-gray);
  background: rgba(5,5,5,0.62);
  border: 1px solid rgba(201,201,194,0.28);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.42);
  transform: translateY(0);
  transition: transform .35s ease, opacity .35s ease;
}

.wiki-fragment.bloom { transform: translateY(-8px); }
.fragment-label { color: var(--pulse-silver); font: 700 .62rem/1 'Archivo', sans-serif; letter-spacing: .22em; text-transform: uppercase; }
.wiki-fragment p { margin: .55rem 0 0; line-height: 1.45; }

@keyframes veinRace { to { stroke-dashoffset: -210; } }
@keyframes breathe { 50% { transform: scale(1.08) rotate(4deg); opacity: .55; } }
@keyframes scanPane { 0%, 34% { transform: translateX(-140%); } 58%, 100% { transform: translateX(140%); } }
@keyframes firstCut { 0% { left: -20vw; opacity: 0; } 20% { opacity: 1; } 58% { left: 104vw; opacity: .75; } 100% { left: 104vw; opacity: 0; } }
@keyframes extend { 50% { width: 5.2rem; opacity: .55; } }
@keyframes nodePulse { 70% { box-shadow: 0 0 0 1.6rem rgba(255,255,255,0), 0 0 32px rgba(255,255,255,.8); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 26px rgba(255,255,255,.85); } }
@keyframes bubbleFloat { 50% { transform: translateY(-10px) rotate(1deg); } }

@media (max-width: 760px) {
  .shard-tabs { left: .7rem; right: .7rem; justify-content: flex-start; }
  .shard-tabs a { font-size: .56rem; padding: .55rem .65rem; }
  .chapter { padding: 19vh 1rem 12vh; min-height: 108vh; }
  .title-pane, .wide-pane, .choir-pane, .chamber-pane, .glossary-pane { width: 100%; margin: 0; }
  h1 { font-size: clamp(4rem, 23vw, 7rem); }
  h2 { font-size: clamp(2.5rem, 14vw, 5rem); }
  .specimen { position: relative; left: auto; top: auto; width: 100%; margin: 1rem 0; }
  .slide-cluster { min-height: auto; padding-top: 10vh; }
  .column-drum, .pediment, .plinth, .sample-one { opacity: .45; transform: scale(.72); }
  .wiki-fragment { font-size: .85rem; }
}