:root {
  /* IBM Plex Sans and Space Grotesk from Google Fonts */
  --cream: #FFF0DD;
  --clay: #D98A5F;
  --oxide: #6E3528;
  --plaster: #F1D7BD;
  --apricot: #F5B37E;
  --sage: #8B9A78;
  --charcoal: #171311;
  --terracotta: #B95732;
  --display: "Archivo Black", Impact, sans-serif;
  --heading: "Space Grotesk", system-ui, sans-serif;
  --body: "IBM Plex Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--charcoal);
  background:
    radial-gradient(circle at 18% 12%, rgba(245, 179, 126, 0.42), transparent 30rem),
    radial-gradient(circle at 88% 36%, rgba(185, 87, 50, 0.24), transparent 34rem),
    linear-gradient(115deg, var(--cream), var(--plaster) 48%, #eab98d 100%);
  font-family: var(--body);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.21;
  mix-blend-mode: multiply;
  background-image:
    linear-gradient(32deg, rgba(23, 19, 17, 0.08) 1px, transparent 1px),
    linear-gradient(96deg, rgba(110, 53, 40, 0.055) 1px, transparent 1px),
    radial-gradient(circle, rgba(23, 19, 17, 0.16) 0.6px, transparent 0.7px);
  background-size: 19px 23px, 41px 37px, 8px 8px;
}

.focus-field {
  position: fixed;
  width: 34vw;
  height: 34vw;
  min-width: 22rem;
  min-height: 22rem;
  border-radius: 47% 53% 45% 55%;
  filter: blur(38px);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.58;
}

.focus-a { background: var(--cream); left: 7vw; top: 8vh; animation: driftA 16s ease-in-out infinite alternate; }
.focus-b { background: var(--apricot); right: -7vw; bottom: 7vh; animation: driftB 18s ease-in-out infinite alternate; }

.corner-index {
  position: fixed;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 10;
  display: grid;
  gap: 0.34rem;
  font-family: var(--heading);
  font-weight: 700;
}

.corner-index a {
  color: var(--charcoal);
  text-decoration: none;
  background: rgba(255, 240, 221, 0.68);
  border: 2px solid var(--charcoal);
  padding: 0.36rem 0.48rem;
  line-height: 1;
  transform: rotate(-1deg);
  transition: background 1.7s ease, color 1.7s ease, transform 1.7s ease;
}

.corner-index a.active { background: var(--charcoal); color: var(--cream); transform: rotate(1.5deg); }

.workshop { position: relative; z-index: 3; }

.scene {
  min-height: 112vh;
  position: relative;
  padding: clamp(2rem, 5vw, 5rem);
  isolation: isolate;
}

.scene::before {
  content: attr(data-scene);
  position: absolute;
  left: clamp(1rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-family: var(--heading);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  color: rgba(23, 19, 17, 0.42);
}

.slab {
  border: 3px solid var(--charcoal);
  box-shadow: 16px 16px 0 rgba(23, 19, 17, 0.12);
  border-radius: 2rem 0.4rem 3rem 0.8rem;
  position: relative;
}

.stamp {
  display: inline-block;
  font-family: var(--heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  background: var(--cream);
  border: 2px solid currentColor;
  padding: 0.34rem 0.55rem;
  transform: rotate(-2deg);
}

.title-scene {
  min-height: 100vh;
  background: linear-gradient(90deg, rgba(185, 87, 50, 0.18), transparent 58%);
}

.hero-slab {
  width: min(96vw, 112rem);
  min-height: 74vh;
  margin: 0 0 0 -6vw;
  padding: clamp(1rem, 4vw, 4rem) clamp(1rem, 5vw, 5rem);
  background: var(--terracotta);
  overflow: hidden;
}

.hero-slab::after {
  content: "";
  position: absolute;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  background: rgba(255, 240, 221, 0.52);
  filter: blur(32px);
  left: var(--mx, 42%);
  top: var(--my, 34%);
  transform: translate(-50%, -50%);
  transition: left 2.4s ease, top 2.4s ease;
}

h1, .giant-word, .trace-title h2 {
  font-family: var(--display);
  font-size: clamp(4.5rem, 18vw, 17rem);
  letter-spacing: -0.07em;
  line-height: 0.78;
  margin: 0;
  text-transform: uppercase;
}

h1 { position: relative; z-index: 2; margin-top: clamp(1rem, 7vh, 5rem); color: var(--charcoal); }
h1 span { display: block; }
.hero-note {
  position: absolute;
  right: 10%;
  bottom: 10%;
  z-index: 2;
  max-width: 14rem;
  font-family: var(--heading);
  font-size: clamp(1.4rem, 2.2vw, 2.4rem);
  line-height: 0.95;
}

.stamp-one { position: relative; z-index: 2; margin-left: 8vw; }

.diagram {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  filter: url(#roughen);
}

.hero-diagram { width: min(62rem, 74vw); right: -4vw; bottom: 2vh; z-index: 4; }
.draw-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.2; stroke-dasharray: 9 8 3 12; animation: lineDraw 12s linear infinite; }
.draw-line.charcoal { stroke: var(--charcoal); }
.draw-line.sage { stroke: var(--sage); stroke-width: 4; }
.draw-line.cream { stroke: var(--cream); }
.ring path { fill: none; stroke: var(--charcoal); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 12 7; }
.nodes circle, .pulse-node { fill: var(--sage); stroke: var(--charcoal); stroke-width: 3; animation: pulse 7s ease-in-out infinite; }
.pulse-node.delay { animation-delay: -3s; }
.svg-label { font-family: var(--heading); font-size: 18px; fill: var(--charcoal); letter-spacing: 0.04em; }
.svg-label.light { fill: var(--cream); }

.signals-scene { padding-top: 16vh; }
.clay-slab {
  background: var(--plaster);
  width: min(40rem, 70vw);
  margin-left: 7vw;
  padding: clamp(1.4rem, 3vw, 3rem);
}

.clay-slab h2, .signal-table h2 {
  font-family: var(--heading);
  font-size: clamp(2.6rem, 6vw, 6.8rem);
  line-height: 0.86;
  letter-spacing: -0.06em;
  margin: 1.1rem 0;
}

.clay-slab p, .oxide-slab p, .signal-table p {
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.7;
  max-width: 31rem;
}

.annotation {
  position: absolute;
  font-family: var(--body);
  font-size: 0.92rem;
  color: var(--oxide);
  border-bottom: 2px solid var(--oxide);
  transform: rotate(2.5deg);
  opacity: 0.5;
  filter: blur(1.5px);
  transition: opacity 2s ease, filter 2s ease;
}

.scene.active .annotation, .scene.active .diagram { opacity: 1; filter: blur(0) url(#roughen); }
.note-a { left: 55vw; top: 18vh; }
.signal-map { width: min(47rem, 58vw); right: 3vw; bottom: 7vh; opacity: 0.55; transition: opacity 2.4s ease, filter 2.4s ease; }

.assembly-scene { min-height: 125vh; padding-top: 19vh; }
.giant-word {
  position: sticky;
  top: 13vh;
  margin-left: -4vw;
  color: rgba(110, 53, 40, 0.88);
  text-shadow: 0.06em 0.04em 0 rgba(255, 240, 221, 0.42);
}

.principle-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  background: var(--apricot);
  margin: 18vh 4vw 0 auto;
  width: min(72rem, 86vw);
  padding: clamp(1rem, 2.4vw, 2.3rem);
  border-radius: 0.5rem 2.4rem 0.8rem 3.2rem;
}

.principle-band div { border-left: 3px solid var(--charcoal); padding-left: 1rem; min-height: 8rem; }
.principle-band b { display: block; font-family: var(--display); font-size: 3.4rem; letter-spacing: -0.08em; }
.principle-band span { font-family: var(--heading); font-size: clamp(1.15rem, 1.8vw, 2rem); line-height: 1; }

.server-stack {
  position: absolute;
  left: 8vw;
  bottom: 8vh;
  width: 16rem;
  transform: rotate(-3deg);
}

.server-stack span {
  display: block;
  height: 2.8rem;
  margin: 0.55rem 0;
  background: var(--charcoal);
  border-radius: 0.25rem 1rem 0.2rem 0.6rem;
  box-shadow: inset 2.2rem 0 0 var(--sage), inset 2.8rem 0 0 var(--cream);
}

.server-stack em { font-family: var(--heading); font-style: normal; background: var(--cream); padding: 0.3rem 0.5rem; border: 2px solid var(--charcoal); }
.assembly-lines { width: 72vw; left: 20vw; bottom: 18vh; opacity: 0.6; }

.trace-scene {
  min-height: 118vh;
  background: radial-gradient(circle at 72% 40%, rgba(23, 19, 17, 0.92), rgba(23, 19, 17, 0.72) 29rem, transparent 29.5rem);
}

.trace-title { margin-left: auto; width: min(74rem, 82vw); color: var(--terracotta); }
.trace-title .stamp { color: var(--cream); background: var(--oxide); }
.oxide-slab {
  background: var(--oxide);
  color: var(--cream);
  width: min(34rem, 64vw);
  margin: 8vh 0 0 9vw;
  padding: 2rem;
  border-color: var(--cream);
  box-shadow: 16px 16px 0 rgba(255, 240, 221, 0.12);
}
.trace-diagram { width: min(45rem, 58vw); right: 2vw; bottom: 5vh; }
.cream-nodes circle { fill: var(--cream); stroke: var(--terracotta); }

.table-scene { min-height: 100vh; padding-top: 12vh; }
.signal-table {
  background: var(--cream);
  width: min(66rem, 82vw);
  min-height: 48vh;
  margin-left: 11vw;
  padding: clamp(1.6rem, 4vw, 4rem);
}
.signal-table h2 { max-width: 48rem; }
.table-marks { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.table-marks span {
  font-family: var(--heading);
  border: 2px solid var(--charcoal);
  background: var(--plaster);
  padding: 0.5rem 0.7rem;
  transform: rotate(var(--r, -1deg));
}
.table-marks span:nth-child(2) { --r: 1.5deg; }
.table-marks span:nth-child(3) { --r: -2.5deg; }
.table-marks span:nth-child(4) { --r: 2deg; }
.table-map { width: min(60rem, 80vw); left: 8vw; bottom: 0; opacity: 0.72; }

@keyframes driftA {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(28vw, 34vh, 0) scale(1.18); }
}

@keyframes driftB {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-32vw, -22vh, 0) scale(0.86); }
}

@keyframes lineDraw {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -240; }
}

@keyframes pulse {
  0%, 100% { r: 8; opacity: 0.55; }
  50% { r: 13; opacity: 1; }
}

@media (max-width: 820px) {
  .scene { min-height: 105vh; padding: 4.4rem 1.1rem; }
  .hero-slab { margin-left: -1.3rem; width: calc(100vw + 1.3rem); }
  .hero-note { right: 1.2rem; bottom: 2rem; }
  .clay-slab, .signal-table, .oxide-slab { width: 88vw; margin-left: 0; }
  .signal-map, .trace-diagram, .assembly-lines, .table-map { width: 90vw; left: 5vw; right: auto; }
  .principle-band { grid-template-columns: 1fr; margin-right: 0; width: 90vw; }
  .server-stack { opacity: 0.38; }
}