:root {
  /* Typography compliance trace: Space Grotesk** from Google Fonts for short energetic titles and distorted interface fragments. Use **IBM Plex Mono** only for tiny coordinate stamps */
  --parchment: #F2DFAE;
  --espresso: #21170F;
  --honey: #D89B2B;
  --taupe: #756555;
  --cobalt: #2F5BFF;
  --linen: #FFF7E1;
  --bronze: #9A6A22;
  --progress: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--espresso);
  background: var(--parchment);
  font-family: "Commissioner", "Inter", system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(33, 23, 15, .06) 1px, transparent 1px) 0 0 / 6.25vw 100%,
    radial-gradient(circle at 68% 56%, rgba(216, 155, 43, .25), transparent 34%),
    linear-gradient(110deg, rgba(255, 247, 225, .85), rgba(242, 223, 174, .35) 48%, rgba(117, 101, 85, .12));
  z-index: -5;
}

.fixed-field { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }

.grain {
  position: absolute;
  inset: -20%;
  opacity: .18;
  background-image: repeating-linear-gradient(0deg, rgba(33,23,15,.16) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(154,106,34,.11) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
  transform: translate3d(calc(var(--progress) * -1vw), calc(var(--progress) * .5vw), 0);
}

.spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 68vw;
  width: 2px;
  background: linear-gradient(var(--bronze), transparent 16%, var(--honey) 46%, transparent 70%, var(--espresso));
  box-shadow: 0 0 0 1px rgba(255,247,225,.45), 0 0 38px rgba(216,155,43,.45);
}

.spine::before,
.spine::after {
  content: "";
  position: absolute;
  left: -9px;
  width: 20px;
  height: 100%;
  background: repeating-linear-gradient(180deg, transparent 0 24px, rgba(33,23,15,.45) 24px 26px, transparent 26px 44px);
  opacity: .35;
}

.spine::after { left: 14px; opacity: .18; }

.monopole-core {
  position: absolute;
  left: calc(68vw - 18px);
  top: calc(62vh - (var(--progress) * 3vh));
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--linen) 0 10%, var(--honey) 28%, var(--bronze) 58%, rgba(216,155,43,.08) 70%);
  box-shadow: 0 0 22px var(--honey), 0 0 66px rgba(216,155,43,.72), 0 0 130px rgba(216,155,43,.32);
  animation: pulseCore 2.1s ease-in-out infinite;
}

.orbit-map {
  position: absolute;
  width: 72vmin;
  height: 72vmin;
  left: calc(68vw - 36vmin);
  top: calc(48vh - 36vmin);
  transform: rotate(calc(var(--progress) * 80deg));
  opacity: .78;
}

.ring, .broken-orbit { fill: none; stroke: var(--bronze); stroke-width: 2; stroke-dasharray: 22 18; transform-origin: center; }
.ring-b { stroke: var(--taupe); stroke-dasharray: 4 12; }
.ring-c { stroke: var(--honey); stroke-dasharray: 90 38 8 22; }
.broken-orbit { stroke: var(--espresso); stroke-width: 1.25; stroke-dasharray: 150 42 16 25; opacity: .45; }

.cobalt-flash { position: absolute; inset: 0; background: var(--cobalt); opacity: 0; mix-blend-mode: multiply; }
.cobalt-flash.flash { animation: cobaltBlink .18s steps(2, end); }

.scroll-gallery { position: relative; z-index: 3; }

.act {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 7vw;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(8, 1fr);
  isolation: isolate;
}

.act::after {
  content: attr(data-act) " / monopole.one";
  position: absolute;
  right: 3vw;
  bottom: 3vh;
  font-family: "IBM Plex Mono", monospace;
  color: var(--taupe);
  font-size: 11px;
  letter-spacing: .16em;
}

.coordinate, .mono-readout, .final-stamp, .annotation, .misregister-block, .vertical-label, .human-scale {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(10px, .8vw, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.coordinate { grid-column: 2 / 8; grid-row: 1; align-self: end; color: var(--taupe); }

.fractured-wordmark {
  grid-column: 1 / 13;
  grid-row: 3 / 6;
  font-size: clamp(4.2rem, 14vw, 15rem);
  line-height: .72;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: lowercase;
  position: relative;
  transform: translateX(calc(var(--progress) * -1.8vw));
}

.fractured-wordmark span { display: inline-block; margin-right: .02em; animation: bounceIn .95s cubic-bezier(.18,1.45,.37,1) both; }
.fractured-wordmark span:nth-child(2) { transform: translateY(-.16em); animation-delay: .13s; color: var(--bronze); }
.fractured-wordmark span:nth-child(3) { transform: translateY(.13em); animation-delay: .25s; color: var(--honey); }

[data-glitch]::before {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  color: var(--cobalt);
  opacity: 0;
  transform: translate(10px, -3px) skewX(-9deg);
  clip-path: inset(12% 0 54% 0);
  pointer-events: none;
}

.is-glitching[data-glitch]::before { animation: glitchSlice .16s steps(2, end); }

.hero-caption { grid-column: 3 / 8; grid-row: 6; font-size: clamp(1.1rem, 2vw, 2rem); color: var(--taupe); max-width: 620px; }
.ruler { position: absolute; left: 4vw; top: 20vh; width: 28px; height: 60vh; border-left: 2px solid var(--espresso); background: repeating-linear-gradient(180deg, transparent 0 18px, var(--espresso) 18px 20px, transparent 20px 36px); opacity: .42; }

.vertical-label { writing-mode: vertical-rl; grid-column: 15; grid-row: 2 / 6; color: var(--bronze); }
.mass-headline, .signal-title, .landing-type, .final-title {
  font-family: "Commissioner", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: calc(-.06em + (var(--progress) * .01em));
  line-height: .82;
  position: relative;
}
.mass-headline { grid-column: 1 / 12; grid-row: 2 / 5; font-size: clamp(4rem, 11vw, 13rem); }
.slung-copy { grid-column: 2 / 7; grid-row: 6; font-size: clamp(1.1rem, 2vw, 2.2rem); transform: rotate(-7deg); }
.scan-panel { grid-column: 9 / 14; grid-row: 5 / 8; background: linear-gradient(135deg, rgba(255,247,225,.92), rgba(216,155,43,.45)); border: 1px solid var(--bronze); box-shadow: 18px 18px 0 rgba(33,23,15,.12); overflow: hidden; transform: skewY(-4deg); }
.scan-panel span { display: block; height: 25%; background: repeating-linear-gradient(90deg, rgba(33,23,15,.28) 0 3px, transparent 3px 14px); animation: shearBand 2.8s infinite steps(4); }
.scan-panel span:nth-child(even) { margin-left: 9%; background-color: rgba(47,91,255,.08); }
.annotation { grid-column: 11 / 15; grid-row: 2; color: var(--cobalt); transform: rotate(4deg); }

.artifact-card { grid-column: 4 / 11; grid-row: 2 / 7; position: relative; background: var(--linen); border: 1px solid var(--bronze); box-shadow: -24px 30px 0 rgba(154,106,34,.22), 0 0 80px rgba(216,155,43,.3) inset; display: grid; place-items: center; transform: rotate(-3deg); }
.relic { width: min(48vw, 460px); aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--bronze); position: relative; display: grid; place-items: center; animation: slowSpin 16s linear infinite; }
.relic-core, .quiet-artifact { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle, var(--linen), var(--honey) 38%, var(--bronze)); box-shadow: 0 0 45px var(--honey); }
.ticks { position: absolute; width: 34px; height: 34px; border: 4px solid var(--espresso); }
.tick-n { top: 8%; border-bottom: 0; } .tick-s { bottom: 8%; border-top: 0; } .tick-e { right: 8%; border-left: 0; } .tick-w { left: 8%; border-right: 0; }
.orbit-type { position: absolute; inset: 10%; border-radius: 50%; animation: reverseSpin 12s linear infinite; font-family: "Space Grotesk", sans-serif; color: var(--taupe); letter-spacing: .32em; }
.side-title { grid-column: 11 / 16; grid-row: 3 / 6; font-family: "Space Grotesk", sans-serif; font-size: clamp(2.4rem, 5vw, 6rem); line-height: .9; text-transform: uppercase; color: var(--espresso); }
.mono-readout { grid-column: 3 / 12; grid-row: 7; color: var(--taupe); }
.glitch-slab { position: absolute; background: var(--cobalt); opacity: .8; height: 18px; width: 22vw; mix-blend-mode: multiply; animation: slabSkip 3.1s infinite; }
.slab-one { top: 28%; left: 8%; } .slab-two { bottom: 24%; right: 10%; animation-delay: .6s; background: var(--honey); }

.signal-title { grid-column: 2 / 15; grid-row: 2 / 4; font-size: clamp(3.5rem, 9vw, 11rem); }
.wave-strip { grid-column: 1 / 16; grid-row: 5; height: 94px; display: flex; align-items: center; gap: 1vw; transform: rotate(-4deg); }
.wave-strip i { flex: 1; height: calc(20px + var(--h, 48px)); background: linear-gradient(var(--espresso), var(--bronze), var(--honey)); clip-path: polygon(0 35%, 100% 0, 100% 70%, 0 100%); animation: waveBounce 1.4s infinite alternate cubic-bezier(.2,1.4,.4,1); }
.wave-strip i:nth-child(2n) { --h: 88px; animation-delay: -.2s; background: var(--linen); border: 1px solid var(--bronze); }
.wave-strip i:nth-child(3n) { --h: 28px; background: var(--cobalt); }
.diagonal-copy { grid-column: 7 / 13; grid-row: 6; font-size: clamp(1.2rem, 2.1vw, 2.4rem); transform: rotate(8deg); color: var(--taupe); }
.registration-cross { position: absolute; width: 86px; height: 86px; border: 1px solid var(--espresso); }
.registration-cross::before, .registration-cross::after { content: ""; position: absolute; background: var(--espresso); left: 50%; top: 8px; bottom: 8px; width: 1px; }
.registration-cross::after { top: 50%; left: 8px; right: 8px; height: 1px; width: auto; bottom: auto; }
.cross-a { left: 14vw; bottom: 18vh; } .cross-b { right: 13vw; top: 16vh; transform: rotate(12deg); }

.human-scale { grid-column: 2 / 8; grid-row: 2; color: var(--bronze); }
.landing-type { grid-column: 2 / 12; grid-row: 3 / 5; font-size: clamp(4rem, 10vw, 12rem); }
.pulled-caption { grid-column: 8 / 14; grid-row: 6; font-size: clamp(1.2rem, 2vw, 2.2rem); color: var(--taupe); }
.misregister-block { grid-column: 2 / 7; grid-row: 6 / 8; background: rgba(255,247,225,.82); border: 1px solid var(--espresso); padding: 1rem; display: flex; flex-direction: column; gap: .8rem; transform: translate(12px, -18px) skew(-5deg); box-shadow: 10px 10px 0 var(--cobalt); }

.final-orbit { grid-column: 4 / 12; grid-row: 2 / 6; position: relative; display: grid; place-items: center; }
.final-orbit::before { content: ""; width: min(62vw, 620px); aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--bronze); box-shadow: inset 0 0 70px rgba(216,155,43,.22); animation: slowSpin 22s linear infinite; }
.quiet-artifact { position: absolute; width: 98px; height: 98px; }
.fragment { position: absolute; font-family: "Space Grotesk", sans-serif; text-transform: uppercase; letter-spacing: .18em; color: var(--taupe); }
.f1 { top: 11%; left: 28%; } .f2 { right: 18%; top: 36%; } .f3 { bottom: 20%; left: 22%; } .f4 { bottom: 14%; right: 28%; }
.final-title { grid-column: 2 / 9; grid-row: 6; font-size: clamp(2.4rem, 6vw, 7rem); }
.final-copy { grid-column: 10 / 15; grid-row: 6; font-size: clamp(1.1rem, 1.8vw, 2rem); color: var(--taupe); }
.final-stamp { grid-column: 2 / 11; grid-row: 8; color: var(--bronze); }

.act > * { opacity: .25; transform-style: preserve-3d; transition: opacity .55s ease, transform .75s cubic-bezier(.18,1.45,.37,1); }
.act.active > * { opacity: 1; }
.act:not(.active) .mass-headline, .act:not(.active) .signal-title, .act:not(.active) .landing-type { transform: translateY(10vh) rotate(3deg); }
.act:not(.active) .artifact-card { transform: translateX(-12vw) rotate(-8deg); }
.act:not(.active) .scan-panel, .act:not(.active) .misregister-block { transform: translateX(10vw) skewY(-8deg); }

@keyframes pulseCore { 0%,100% { transform: scale(.88); } 50% { transform: scale(1.12); } }
@keyframes bounceIn { 0% { opacity: 0; transform: translateY(28vh) rotate(9deg) scale(.88); } 70% { opacity: 1; transform: translateY(-2vh) rotate(-2deg) scale(1.04); } 100% { opacity: 1; } }
@keyframes glitchSlice { 0%,100% { opacity: 0; } 20%, 80% { opacity: .95; transform: translate(-11px, 4px) skewX(14deg); } }
@keyframes cobaltBlink { 0%,100% { opacity: 0; } 45% { opacity: .2; } }
@keyframes shearBand { 0%,100% { transform: translateX(0); } 30% { transform: translateX(18%); } 42% { transform: translateX(-10%); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes reverseSpin { to { transform: rotate(-360deg); } }
@keyframes slabSkip { 0%, 82%, 100% { transform: translateX(0) scaleX(1); opacity: .15; } 86% { transform: translateX(22vw) scaleX(1.6); opacity: .8; } 90% { transform: translateX(-8vw) scaleX(.7); opacity: .45; } }
@keyframes waveBounce { to { transform: translateY(-28px) scaleY(1.25); } }

@media (max-width: 760px) {
  .act { padding: 8vw 5vw; grid-template-columns: repeat(8, 1fr); }
  .spine { left: 78vw; }
  .monopole-core { left: calc(78vw - 18px); }
  .orbit-map { left: calc(78vw - 36vmin); }
  .fractured-wordmark, .mass-headline, .signal-title, .landing-type { grid-column: 1 / 9; }
  .hero-caption, .slung-copy, .diagonal-copy, .pulled-caption, .final-copy { grid-column: 1 / 8; transform: none; }
  .artifact-card, .final-orbit { grid-column: 1 / 9; }
  .side-title { grid-column: 1 / 8; grid-row: 6; }
}