:root {
  /* Design compliance vocabulary: Intersection Observer with `threshold: 0.3` — elements animating. Space Mono appears in the exact center: "WHAT ENDURES IS STRUCTURE." This section is mostly empty space with animated geometry — a visual rest. The Fraunces WONK axis is now at 1.0 — fully expressive. A final ripple emanates from the emblem on scroll arrival. (Google Fonts) */
  --oxblood: #5B1A2A;
  --burgundy: #8C2F3E;
  --rosewood: #C4616E;
  --cream: #F5EDE0;
  --parchment: #E8D5B7;
  --umber: #1E1118;
  --verdigris: #3D7A6E;
  --brass: #9B8852;
  --black: #0D0A0E;
  --aged: #D4BFA0;
  --depth-gradient: linear-gradient(175deg, #5B1A2A 0%, #1E1118 60%, #0D0A0E 100%);
  --cream-emergence: radial-gradient(ellipse at 50% 30%, #F5EDE0 0%, #E8D5B7 50%, #D4BFA0 100%);
  --mineral-vein: linear-gradient(90deg, #3D7A6E 0%, #9B8852 50%, #C4616E 100%);
  --ease-tectonic: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --golden: 1.618rem;
  --wonk: 0;
  --soft: 45;
  --weight: 900;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--cream);
  background: var(--black);
  font-family: "Instrument Sans", Inter, system-ui, sans-serif;
  font-variation-settings: "wdth" 92, "wght" 400;
  line-height: 1.72;
  letter-spacing: 0.015em;
}

.svg-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.descent {
  position: relative;
  z-index: 3;
  min-height: 550vh;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.stratum {
  position: relative;
  min-height: 100vh;
  transform-style: preserve-3d;
  isolation: isolate;
}

.stratum--surface {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background: var(--depth-gradient);
}

.stratum--topsoil {
  min-height: 200vh;
  padding: 8.09rem 17.5vw 13.09rem;
  background: linear-gradient(180deg, rgba(91, 26, 42, 0.94), rgba(30, 17, 24, 0.98));
}

.stratum--bedrock {
  min-height: 150vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0D0A0E;
}

.stratum--core {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--oxblood);
  background: #F5EDE0;
  overflow: hidden;
}

.surface-field {
  position: absolute;
  inset: -20vmax;
  background:
    radial-gradient(circle at 25% 28%, rgba(196, 97, 110, 0.28), transparent 32%),
    radial-gradient(circle at 74% 68%, rgba(61, 122, 110, 0.16), transparent 30%),
    linear-gradient(175deg, #5B1A2A 0%, #1E1118 60%, #0D0A0E 100%);
  animation: burgundyDrift 16s var(--ease-tectonic) infinite alternate;
}

.hero-title {
  position: sticky;
  top: 32vh;
  z-index: 4;
  max-width: 100vw;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(4rem, 12vw, 14rem);
  line-height: 0.76;
  text-align: center;
  color: #F5EDE0;
  letter-spacing: -0.075em;
  font-variation-settings: "wght" var(--weight), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
  text-shadow: 0 18px 70px rgba(13, 10, 14, 0.66);
  transition: font-variation-settings 240ms var(--ease-tectonic), transform 600ms var(--ease-tectonic);
}

.hero-title::before,
.hero-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(155, 136, 82, 0.34);
  transform: translate3d(0.08em, 0.08em, -80px);
}

.hero-title::after {
  -webkit-text-stroke-color: rgba(61, 122, 110, 0.25);
  transform: translate3d(-0.11em, -0.08em, -140px);
}

.hero-title:hover { --weight: 300; transform: scale(1.012); }

.hero-line {
  position: relative;
  z-index: 4;
  margin: 2.4rem 0 2.1rem;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(1.5rem, 3vw, 3rem);
  color: var(--parchment);
}

.mineral-line {
  position: relative;
  z-index: 4;
  width: min(0px, 65vw);
  height: 1px;
  background: var(--mineral-vein);
  box-shadow: 0 0 28px rgba(61, 122, 110, 0.4);
  animation: lineExtend 4s var(--ease-tectonic) forwards;
}

.scroll-triangle {
  position: absolute;
  bottom: 3rem;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 22px solid var(--brass);
  filter: drop-shadow(0 0 18px rgba(155, 136, 82, 0.45));
  animation: primitivePulse 3s var(--ease-tectonic) infinite;
}

.motif-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.motif-layer--root {
  opacity: 0.55;
  background-image: url("#root-network");
  background-size: 360px 180px;
  transform: translate3d(0, var(--root-shift, 0px), -160px);
}

.motif-layer--root svg,
#root-network path { stroke: rgba(155, 136, 82, 0.10); stroke-width: 1.4; fill: none; }

.motif-layer--leaves {
  opacity: var(--leaf-opacity, 0.04);
  background:
    radial-gradient(ellipse 34px 54px at 34px 40px, transparent 50%, rgba(61, 122, 110, 0.16) 51%, transparent 54%),
    radial-gradient(ellipse 34px 54px at 66px 40px, transparent 50%, rgba(61, 122, 110, 0.16) 51%, transparent 54%),
    linear-gradient(35deg, transparent 47%, rgba(61, 122, 110, 0.13) 48%, transparent 51%);
  background-size: 100px 88px;
  animation: leafRotate 120s linear infinite;
  mix-blend-mode: screen;
}

.motif-layer--voronoi { opacity: var(--voronoi-opacity, 0); }
.motif-layer--voronoi i {
  position: absolute;
  border: 1px solid rgba(196, 97, 110, 0.17);
  background: rgba(196, 97, 110, 0.025);
  clip-path: polygon(12% 0, 82% 8%, 100% 51%, 58% 100%, 0 72%);
}
.motif-layer--voronoi i:nth-child(1) { width: 32vw; height: 30vh; left: 4vw; top: 18vh; }
.motif-layer--voronoi i:nth-child(2) { width: 24vw; height: 44vh; left: 31vw; top: 8vh; }
.motif-layer--voronoi i:nth-child(3) { width: 31vw; height: 34vh; right: 8vw; top: 14vh; }
.motif-layer--voronoi i:nth-child(4) { width: 21vw; height: 29vh; left: 13vw; bottom: 12vh; }
.motif-layer--voronoi i:nth-child(5) { width: 35vw; height: 32vh; left: 41vw; bottom: 19vh; }
.motif-layer--voronoi i:nth-child(6) { width: 20vw; height: 38vh; right: -4vw; bottom: 7vh; }
.motif-layer--voronoi i:nth-child(7) { width: 18vw; height: 24vh; left: 56vw; top: 41vh; }
.motif-layer--voronoi i:nth-child(8) { width: 22vw; height: 20vh; left: 2vw; top: 52vh; }

.content-card {
  position: relative;
  z-index: 5;
  width: min(65vw, 880px);
  min-height: 25rem;
  margin: 0 0 8.09rem;
  padding: clamp(2rem, 5vw, 4.6rem);
  color: var(--umber);
  background: var(--cream-emergence);
  border: 1px solid rgba(140, 47, 62, 0.78);
  box-shadow: 0 20px 60px rgba(30, 17, 24, 0.4), inset 0 0 0 1px rgba(245, 237, 224, 0.72);
  opacity: 0;
  transform: translate3d(0, 40px, 120px) rotateX(2deg);
  transition: opacity 600ms var(--ease-tectonic), transform 600ms var(--ease-tectonic), border-color 800ms var(--ease-tectonic);
  overflow: hidden;
}

.content-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("#hex-card");
  background-size: 48px 42px;
  opacity: 0.12;
}

.content-card::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid rgba(155, 136, 82, 0.28);
  pointer-events: none;
}

.content-card.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 120px) rotateX(0deg);
}

.content-card--offset { margin-left: auto; }

.content-card h2,
.content-card p,
.content-card .card-label,
.geometric-diagram { position: relative; z-index: 2; }

.card-label {
  display: block;
  margin-bottom: 1.618rem;
  color: var(--brass);
  font-family: "Space Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.content-card h2 {
  margin: 0 0 1.618rem;
  max-width: 12ch;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.6rem, 6.8vw, 7rem);
  line-height: 0.91;
  letter-spacing: -0.055em;
  color: var(--oxblood);
  font-variation-settings: "wght" 760, "SOFT" 72, "WONK" var(--wonk), "opsz" 120;
}

.content-card p {
  max-width: 45rem;
  margin: 0;
  font-size: clamp(1.02rem, 1.45vw, 1.35rem);
}

.geometric-diagram {
  position: absolute;
  right: 2.5rem;
  bottom: 2.4rem;
  width: 9rem;
  height: 9rem;
  opacity: 0.72;
}

.geometric-diagram--leaf b { position: absolute; border: 1.5px solid var(--verdigris); }
.geometric-diagram--leaf b:nth-child(1) { width: 5rem; height: 7.5rem; border-radius: 50%; left: 1.1rem; top: .6rem; transform: rotate(-31deg); }
.geometric-diagram--leaf b:nth-child(2) { width: 5rem; height: 7.5rem; border-radius: 50%; right: 1.1rem; top: .6rem; transform: rotate(31deg); }
.geometric-diagram--leaf b:nth-child(3) { width: 0; height: 0; border-left: 3.2rem solid transparent; border-right: 3.2rem solid transparent; border-bottom: 6rem solid rgba(61, 122, 110, 0.16); left: 1.3rem; top: 1.8rem; }

.geometric-diagram--rings b { position: absolute; inset: var(--ring); border: 1.5px solid rgba(91, 26, 42, 0.66); border-radius: 50%; }
.geometric-diagram--rings b:nth-child(1) { --ring: 0; }
.geometric-diagram--rings b:nth-child(2) { --ring: 1.1rem; border-color: rgba(30, 17, 24, 0.45); }
.geometric-diagram--rings b:nth-child(3) { --ring: 2.05rem; }
.geometric-diagram--rings b:nth-child(4) { --ring: 3.08rem; border-color: rgba(30, 17, 24, 0.38); }
.geometric-diagram--rings b:nth-child(5) { --ring: 3.86rem; }

.geometric-diagram--trinity b:nth-child(1) { position: absolute; inset: .4rem; border: 1.5px solid var(--oxblood); border-radius: 50%; }
.geometric-diagram--trinity b:nth-child(2) { position: absolute; left: 1.8rem; top: 1.45rem; width: 0; height: 0; border-left: 2.75rem solid transparent; border-right: 2.75rem solid transparent; border-bottom: 5.25rem solid rgba(140, 47, 62, 0.22); }
.geometric-diagram--trinity b:nth-child(3) { position: absolute; left: 3.22rem; top: 4.45rem; width: 2.5rem; height: 2.5rem; border: 1.5px solid var(--brass); }

.geometric-divider {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 2rem;
  width: min(65vw, 880px);
  margin: -3rem 0 5.09rem;
}
.geometric-divider--second { margin-left: auto; }

.primitive { display: block; width: 24px; height: 24px; animation: primitivePulse 4s var(--ease-tectonic) infinite; }
.primitive:nth-child(2) { animation-delay: 320ms; }
.primitive:nth-child(3) { animation-delay: 640ms; }
.primitive--circle { border-radius: 50%; background: var(--brass); }
.primitive--triangle { width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 24px solid var(--brass); }
.primitive--square { background: var(--brass); }

.tree-ring {
  position: absolute;
  width: min(70vmin, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.24;
  pointer-events: none;
}
.tree-ring--one { right: 7vw; top: 18vh; transform: translateZ(-220px); }
.tree-ring--bedrock { width: min(86vmin, 900px); opacity: 0.42; }
.tree-ring span { position: absolute; inset: var(--i); border: 1px solid rgba(91, 26, 42, 0.08); border-radius: 50%; }
.tree-ring span:nth-child(odd) { border-color: rgba(30, 17, 24, 0.07); }
.tree-ring--bedrock span { border-color: rgba(91, 26, 42, 0.21); }
.tree-ring--bedrock span:nth-child(odd) { border-color: rgba(196, 97, 110, 0.10); }
.tree-ring span:nth-child(1) { --i: 0; }
.tree-ring span:nth-child(2) { --i: 1.1rem; }
.tree-ring span:nth-child(3) { --i: 2.4rem; }
.tree-ring span:nth-child(4) { --i: 3.25rem; }
.tree-ring span:nth-child(5) { --i: 4.7rem; }
.tree-ring span:nth-child(6) { --i: 5.6rem; }
.tree-ring span:nth-child(7) { --i: 7.25rem; }
.tree-ring span:nth-child(8) { --i: 8.05rem; }
.tree-ring span:nth-child(9) { --i: 9.9rem; }
.tree-ring span:nth-child(10) { --i: 11rem; }
.tree-ring span:nth-child(11) { --i: 12.75rem; }
.tree-ring span:nth-child(12) { --i: 13.6rem; }
.tree-ring span:nth-child(13) { --i: 15.1rem; }
.tree-ring span:nth-child(14) { --i: 16.2rem; }
.tree-ring span:nth-child(15) { --i: 17.5rem; }

.fibonacci-spiral {
  position: absolute;
  width: min(76vmin, 760px);
  opacity: 0.92;
  transform: translateZ(80px);
}
.fibonacci-spiral path {
  fill: none;
  stroke: #8C2F3E;
  stroke-width: 1.5;
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
  transition: stroke-dashoffset 2s var(--ease-tectonic);
}
.fibonacci-spiral.is-drawn path { stroke-dashoffset: 0; }

.bedrock-statement {
  position: sticky;
  top: 48vh;
  z-index: 4;
  margin: 0;
  color: var(--parchment);
  font-family: "Space Mono", monospace;
  font-size: clamp(0.86rem, 1.4vw, 1.25rem);
  letter-spacing: 0.18em;
  text-align: center;
  text-shadow: 0 0 32px rgba(245, 237, 224, 0.26);
}

.core-emblem {
  position: relative;
  width: min(44vmin, 360px);
  aspect-ratio: 1;
  margin-bottom: 2.6rem;
}
.core-emblem span { position: absolute; display: block; }
.emblem-circle { inset: 0; border: 2px solid var(--oxblood); border-radius: 50%; }
.emblem-triangle { left: 50%; top: 14%; transform: translateX(-50%); width: 0; height: 0; border-left: min(16vmin, 130px) solid transparent; border-right: min(16vmin, 130px) solid transparent; border-bottom: min(29vmin, 235px) solid rgba(91, 26, 42, 0.08); filter: drop-shadow(0 0 0 var(--oxblood)); }
.emblem-triangle::after { content: ""; position: absolute; left: min(-16vmin, -130px); top: 0; width: 0; height: 0; border-left: min(16vmin, 130px) solid transparent; border-right: min(16vmin, 130px) solid transparent; border-bottom: min(29vmin, 235px) solid transparent; }
.emblem-square { width: 27%; height: 27%; left: 36.5%; top: 49%; border: 2px solid var(--oxblood); }
.core-domain {
  margin: 0 0 .75rem;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 2rem;
}
.core-date {
  margin: 0;
  color: var(--brass);
  font-family: "Space Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
}

.ripple,
.viewport-ripple::before {
  position: fixed;
  border: 1px solid rgba(61, 122, 110, 0.7);
  border-radius: 50%;
  pointer-events: none;
}
.ripple {
  z-index: 20;
  width: 10px;
  height: 10px;
  left: var(--x);
  top: var(--y);
  border-color: rgba(140, 47, 62, 0.58);
  transform: translate(-50%, -50%) scale(0);
  animation: cardRipple 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.ripple:nth-last-child(2) { animation-delay: 80ms; opacity: .7; }
.ripple:nth-last-child(3) { animation-delay: 160ms; opacity: .45; }
.viewport-ripple { position: fixed; inset: 0; z-index: 19; pointer-events: none; }
.viewport-ripple.is-active::before {
  content: "";
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  transform: translate(-50%, -50%) scale(0);
  animation: viewportRipple 2s var(--ease-tectonic) forwards;
}

@keyframes burgundyDrift { to { transform: translate3d(-4vmax, 3vmax, 0) scale(1.04); filter: saturate(1.12); } }
@keyframes lineExtend { to { width: min(65vw, 980px); } }
@keyframes primitivePulse { 50% { transform: scale(1.08); opacity: .72; } }
@keyframes leafRotate { to { transform: rotate(360deg) scale(1.25); } }
@keyframes cardRipple { to { opacity: 0; transform: translate(-50%, -50%) scale(18); } }
@keyframes viewportRipple { 0% { opacity: .88; transform: translate(-50%, -50%) scale(0); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(150); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .content-card { opacity: 1; transform: none; }
  .fibonacci-spiral path { stroke-dashoffset: 0; }
}

@media (max-width: 760px) {
  .stratum--topsoil { padding-left: 7vw; padding-right: 7vw; }
  .content-card, .geometric-divider { width: 86vw; }
  .hero-title { font-size: clamp(3.3rem, 17vw, 7rem); }
  .geometric-diagram { position: relative; right: auto; bottom: auto; margin-top: 2rem; }
}