:root {
  /* Compliance trace: IBM Plex Sans Condensed** station logs / Space Mono** frequency numbers */
  --fired-clay: #B85B3A;
  --paper: #F1D6B2;
  --sienna: #6E2E22;
  --espresso: #241512;
  --cyan: #43F4E8;
  --violet: #B767FF;
  --amber: #FFB347;
  --red: #D33F2F;
  --display: "Archivo Black", Impact, sans-serif;
  --warped: "Anybody", "Arial Black", sans-serif;
  --body: "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  --mono: "Space Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--espresso);
  background:
    radial-gradient(circle at 10% 12%, rgba(67, 244, 232, .18), transparent 22rem),
    radial-gradient(circle at 88% 20%, rgba(183, 103, 255, .18), transparent 20rem),
    linear-gradient(105deg, rgba(110, 46, 34, .34), transparent 28%),
    var(--paper);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(2deg, rgba(36,21,18,.04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(91deg, rgba(110,46,34,.05) 0 1px, transparent 1px 11px),
    radial-gradient(circle at 20% 80%, rgba(211,63,47,.12), transparent 18rem);
  mix-blend-mode: multiply;
  z-index: 20;
}

.font-trace { display: none; }

.grain {
  position: fixed;
  inset: -20%;
  pointer-events: none;
  opacity: .45;
  background-image:
    radial-gradient(circle, rgba(36,21,18,.18) 0 1px, transparent 1px),
    radial-gradient(circle, rgba(241,214,178,.35) 0 1px, transparent 1px);
  background-size: 17px 19px, 29px 31px;
  animation: fiberDrift 9s steps(4) infinite;
  z-index: 21;
}

.cursor-sheen {
  position: fixed;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(67,244,232,.18), rgba(183,103,255,.10) 35%, transparent 68%);
  mix-blend-mode: screen;
  z-index: 19;
}

.intro {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-content: center;
  padding: 8vw 5vw;
  overflow: hidden;
  background:
    linear-gradient(178deg, rgba(241,214,178,.92), rgba(184,91,58,.23)),
    radial-gradient(circle at 50% 10%, rgba(255,179,71,.28), transparent 32rem);
}

.intro::before,
.intro::after {
  content: "";
  position: absolute;
  background: rgba(241,214,178,.7);
  border: 1px solid rgba(110,46,34,.24);
  box-shadow: 0 18px 50px rgba(36,21,18,.22);
  transform: rotate(-6deg);
}

.intro::before { width: 28vw; height: 10vw; left: -7vw; top: 18vh; }
.intro::after { width: 20vw; height: 8vw; right: 5vw; bottom: 12vh; transform: rotate(9deg); }

.intro__curve {
  position: absolute;
  left: 48%;
  top: -5vh;
  width: 8rem;
  height: 118vh;
  border-left: .55rem solid var(--cyan);
  border-radius: 45% 55% 35% 65%;
  filter: drop-shadow(0 0 18px var(--cyan)) drop-shadow(0 0 38px var(--violet));
  transform: rotate(8deg) skewY(-10deg);
  opacity: .62;
  animation: pulseCable 2.8s infinite alternate;
}

.permit {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  padding: .35rem .65rem;
  border: 2px solid var(--red);
  color: var(--red);
  font-family: var(--mono);
  font-size: clamp(.65rem, 1vw, .9rem);
  font-weight: 700;
  transform: rotate(-3deg);
  background: rgba(241,214,178,.54);
}

.permit--hero { margin-left: 8vw; margin-bottom: 2vh; }

.intro__kicker,
.tape-counter,
.artifact__time,
.receipt,
.frequency-strip {
  font-family: var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.intro__kicker {
  margin: 0 0 .7rem;
  color: var(--sienna);
  font-weight: 700;
}

.wordmark {
  position: relative;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.7rem, 17vw, 16rem);
  line-height: .78;
  letter-spacing: -.09em;
  text-transform: uppercase;
  transform: rotate(-3deg) translateX(-2vw);
  color: var(--espresso);
  text-shadow: .055em .035em 0 rgba(211,63,47,.65), -.035em -.025em 0 rgba(67,244,232,.75);
  animation: mastheadIn 1.1s cubic-bezier(.18,.95,.2,1) both, inkJitter 4.6s steps(2) infinite 1.2s;
}

.wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  background: linear-gradient(105deg, transparent 18%, var(--cyan) 35%, var(--violet) 45%, var(--amber) 55%, transparent 72%);
  background-size: 260% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  mix-blend-mode: screen;
  animation: holoSweep 3.4s ease-in-out infinite;
}

.intro__subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 2rem;
  font-family: var(--warped);
  font-weight: 800;
  text-transform: uppercase;
}

.intro__subtitle span {
  padding: .25rem .55rem;
  background: var(--espresso);
  color: var(--paper);
  transform: rotate(var(--r, -2deg));
}
.intro__subtitle span:nth-child(even) { --r: 2deg; color: var(--cyan); }

.tape-counter { margin-top: 3rem; color: var(--sienna); }

.timeline {
  position: relative;
  padding: 10vh 4vw 16vh;
}

.sound-river {
  position: absolute;
  top: 0;
  left: 50%;
  width: 220px;
  height: 100%;
  transform: translateX(-50%);
  overflow: visible;
  z-index: 1;
}

.river-shadow,
.river-base,
.river-fill {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.river-shadow { stroke: rgba(36,21,18,.27); stroke-width: 22; }
.river-base { stroke: rgba(110,46,34,.55); stroke-width: 8; stroke-dasharray: 2 18; }
.river-fill { stroke: url(#none); stroke: var(--cyan); stroke-width: 7; filter: drop-shadow(0 0 12px var(--cyan)) drop-shadow(0 0 24px var(--violet)); stroke-dasharray: 1; stroke-dashoffset: 1; }

.chapter {
  position: relative;
  min-height: 62vh;
  display: grid;
  align-items: center;
  z-index: 2;
}

.chapter--left { justify-items: start; padding-left: 6vw; padding-right: 52vw; }
.chapter--right { justify-items: end; padding-right: 6vw; padding-left: 52vw; }
.chapter--wide { padding-right: 43vw; }

.node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--red);
  border: .28rem solid var(--paper);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 .45rem rgba(211,63,47,.22), 0 0 28px rgba(67,244,232,.65);
}
.node--hole { background: var(--espresso); box-shadow: inset 0 0 0 .35rem var(--amber), 0 0 30px var(--violet); }
.node--speaker { background: repeating-radial-gradient(circle, var(--espresso) 0 10%, var(--fired-clay) 11% 18%); }
.node--melt { border-radius: 56% 44% 62% 38%; background: linear-gradient(135deg, var(--cyan), var(--violet), var(--amber)); }

.artifact {
  position: relative;
  width: min(42rem, 100%);
  padding: clamp(1.4rem, 3vw, 2.6rem);
  background:
    linear-gradient(90deg, rgba(255,255,255,.16), transparent 40%),
    var(--paper);
  border: 1px solid rgba(110,46,34,.45);
  box-shadow: 0 2rem 4rem rgba(36,21,18,.28);
  clip-path: polygon(1% 2%, 98% 0, 100% 8%, 98% 94%, 92% 100%, 5% 98%, 0 89%, 2% 12%);
  transform: rotate(var(--tilt, -1.2deg)) translateY(3rem);
  opacity: 0;
  transition: transform .85s cubic-bezier(.2,1,.2,1), opacity .85s ease;
}

.chapter--right .artifact { --tilt: 1.4deg; }
.chapter.is-visible .artifact { opacity: 1; transform: rotate(var(--tilt, -1.2deg)) translateY(0); }

.artifact::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 8%, rgba(67,244,232,.28), rgba(183,103,255,.2), transparent 46%);
  transform: translateX(-120%);
  mix-blend-mode: screen;
}
.chapter.is-visible .artifact::before { animation: artifactGlint 2.3s ease .35s both; }

.artifact::after {
  content: "";
  position: absolute;
  top: -.9rem;
  left: 12%;
  width: 8rem;
  height: 2rem;
  background: rgba(255,179,71,.38);
  border: 1px solid rgba(110,46,34,.22);
  transform: rotate(-4deg);
}

.artifact h2,
.outro h2 {
  margin: .45rem 0 .75rem;
  font-family: var(--display);
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  line-height: .84;
  letter-spacing: -.06em;
  text-transform: uppercase;
  color: var(--espresso);
}

.artifact__time { color: var(--red); font-size: .78rem; }
.artifact__pull {
  margin: 0 0 1rem;
  font-family: var(--warped);
  font-size: clamp(1.35rem, 2.6vw, 2.45rem);
  font-weight: 800;
  line-height: .98;
  color: var(--sienna);
}
.artifact p:not(.artifact__pull) { font-size: clamp(1.05rem, 1.45vw, 1.38rem); line-height: 1.25; }

.stamp {
  position: absolute;
  right: 1.2rem;
  bottom: 1rem;
  font-family: var(--display);
  color: rgba(211,63,47,.72);
  border: .25rem solid currentColor;
  padding: .2rem .5rem;
  transform: rotate(-13deg);
}
.stamp--red { color: var(--red); }

.waveform { display: flex; gap: .35rem; height: 4rem; align-items: center; margin: 1rem 0; }
.waveform span { flex: 1; background: var(--espresso); height: calc(20% + var(--h, 40%)); animation: bars 1.5s ease-in-out infinite alternate; }
.waveform span:nth-child(2n) { --h: 70%; background: var(--cyan); }
.waveform span:nth-child(3n) { --h: 34%; background: var(--red); }

.redactions { display: grid; gap: .55rem; margin: 1.4rem 0; }
.redactions i { display: block; height: .9rem; background: var(--espresso); transform: rotate(-1deg); }
.redactions i:nth-child(2) { width: 67%; background: var(--red); transform: rotate(1deg); }
.redactions i:nth-child(3) { width: 82%; }

blockquote {
  margin: 1.2rem 0 0;
  padding-left: 1rem;
  border-left: .45rem solid var(--red);
  font-family: var(--warped);
  font-size: clamp(1.4rem, 3vw, 3rem);
  font-weight: 800;
  line-height: .95;
}

.pause {
  position: relative;
  min-height: 34vh;
  display: grid;
  place-items: center;
  z-index: 2;
  color: var(--sienna);
}

.receipt {
  padding: 1rem;
  background: rgba(241,214,178,.7);
  transform: rotate(5deg);
  box-shadow: 0 1rem 2rem rgba(36,21,18,.18);
}

.shard {
  position: absolute;
  width: 6rem;
  height: 3rem;
  background: linear-gradient(120deg, var(--cyan), var(--violet), transparent);
  clip-path: polygon(0 30%, 100% 0, 70% 100%, 12% 78%);
  mix-blend-mode: screen;
  animation: shardFloat 5s ease-in-out infinite;
}
.shard--a { left: 19%; top: 23%; }
.shard--b { right: 17%; bottom: 18%; animation-delay: -2s; }

.paper-ring {
  width: 13rem;
  height: 13rem;
  border: 1.2rem solid rgba(110,46,34,.20);
  border-radius: 50%;
  box-shadow: inset 0 0 0 .35rem rgba(36,21,18,.08);
}

.pause--two p {
  position: absolute;
  font-family: var(--mono);
  text-transform: uppercase;
}

.outro {
  position: relative;
  z-index: 2;
  width: min(62rem, 90vw);
  margin: 12vh auto 0;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--espresso);
  color: var(--paper);
  clip-path: polygon(3% 0, 100% 3%, 96% 100%, 0 94%);
  box-shadow: 0 2rem 5rem rgba(36,21,18,.45);
  opacity: 0;
  transform: translateY(3rem) rotate(-1deg);
  transition: .8s ease;
}
.outro.is-visible { opacity: 1; transform: translateY(0) rotate(-1deg); }
.outro h2 { color: var(--paper); text-shadow: .05em .03em 0 var(--red); }
.outro p { font-size: clamp(1.2rem, 2vw, 1.7rem); }
.outro__label { font-family: var(--mono); color: var(--cyan); text-transform: uppercase; }
.frequency-strip { color: var(--amber); border-top: 1px solid rgba(241,214,178,.3); padding-top: 1rem; }

@keyframes mastheadIn { from { transform: rotate(-5deg) translateX(-14vw); opacity: 0; } }
@keyframes holoSweep { 0% { background-position: 150% 0; opacity: .2; } 45%, 70% { opacity: .9; } 100% { background-position: -130% 0; opacity: .25; } }
@keyframes inkJitter { 50% { text-shadow: .045em .025em 0 rgba(211,63,47,.7), -.05em -.02em 0 rgba(67,244,232,.8); transform: rotate(-2.6deg) translateX(-1.8vw); } }
@keyframes pulseCable { to { opacity: .95; filter: drop-shadow(0 0 28px var(--cyan)) drop-shadow(0 0 55px var(--violet)); } }
@keyframes fiberDrift { to { transform: translate3d(-3%, 2%, 0); } }
@keyframes artifactGlint { to { transform: translateX(120%); } }
@keyframes bars { to { transform: scaleY(.35); filter: hue-rotate(40deg); } }
@keyframes shardFloat { 50% { transform: translateY(-1.2rem) rotate(8deg); } }

@media (max-width: 820px) {
  .chapter--left,
  .chapter--right,
  .chapter--wide { padding: 18vh 5vw 8vh 18vw; justify-items: stretch; }
  .sound-river { left: 8vw; }
  .node { left: 8vw; }
  .wordmark { font-size: clamp(4rem, 20vw, 8rem); }
  .artifact h2, .outro h2 { font-size: clamp(2.5rem, 16vw, 5rem); }
}