:root {
  /* Typography compliance tokens from DESIGN.md: Space Mono** for a readable technical rhythm. Use **IBM Plex Mono** for tiny detector readouts */
  --asphalt: #151111;
  --sunset: #F05A28;
  --amber: #FFB000;
  --peach: #FFD0A3;
  --oxide: #9E2F1F;
  --violet: #7B2CFF;
  --cyan: #23D7C8;
  --concrete: #6B625B;
  --display: "Share Tech Mono", monospace;
  --body: "Space Mono", monospace;
  --readout: "IBM Plex Mono", monospace;
  --spray: "Rubik Spray Paint", fantasy;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--asphalt);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--peach);
  font-family: var(--body);
  background:
    radial-gradient(circle at 18% 14%, rgba(240, 90, 40, .32), transparent 28rem),
    radial-gradient(circle at 82% 70%, rgba(158, 47, 31, .38), transparent 34rem),
    linear-gradient(135deg, #151111 0%, #241412 42%, #151111 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(255, 208, 163, .045) 0 1px, transparent 1px 5px);
  mix-blend-mode: overlay;
}

.wall-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .33;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(0,0,0,.33) 0 1px, transparent 1px),
    linear-gradient(110deg, transparent 0 18%, rgba(107,98,91,.15) 18% 19%, transparent 19% 44%, rgba(240,90,40,.08) 44% 45%, transparent 45%);
  background-size: 17px 19px, 23px 21px, 100% 100%;
}

.heat-stain {
  position: fixed;
  width: 42vmax;
  height: 42vmax;
  border-radius: 50%;
  filter: blur(22px);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
}

.heat-one { left: -18vmax; top: 12vh; background: radial-gradient(circle, rgba(240,90,40,.25), transparent 67%); }
.heat-two { right: -20vmax; bottom: -8vmax; background: radial-gradient(circle, rgba(255,176,0,.18), transparent 70%); }

.hud-frame {
  position: fixed;
  inset: 18px;
  z-index: 50;
  pointer-events: none;
  border: 1px solid rgba(255, 176, 0, .24);
  box-shadow: inset 0 0 34px rgba(255,176,0,.08), 0 0 22px rgba(123,44,255,.1);
}

.corner {
  position: absolute;
  width: 64px;
  height: 64px;
  border-color: var(--amber);
  filter: drop-shadow(0 0 8px rgba(255,176,0,.55));
}
.tl { left: -1px; top: -1px; border-top: 3px solid; border-left: 3px solid; }
.tr { right: -1px; top: -1px; border-top: 3px solid; border-right: 3px solid; }
.bl { left: -1px; bottom: -1px; border-bottom: 3px solid; border-left: 3px solid; }
.br { right: -1px; bottom: -1px; border-bottom: 3px solid; border-right: 3px solid; }

.scanline-label,
.coordinate {
  position: absolute;
  font-family: var(--readout);
  font-size: clamp(.56rem, .8vw, .75rem);
  color: var(--amber);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 1px 0 var(--violet), -1px 0 rgba(35,215,200,.65);
}
.scanline-label.top { top: -13px; left: 92px; background: var(--asphalt); padding: 0 12px; }
.scanline-label.bottom { bottom: -13px; right: 92px; background: var(--asphalt); padding: 0 12px; }
.coordinate.x { left: -7px; top: 44%; transform: rotate(-90deg) translateY(-100%); transform-origin: left top; }
.coordinate.y { right: -7px; top: 26%; transform: rotate(90deg) translateY(-100%); transform-origin: right top; }

.compass {
  position: absolute;
  width: 128px;
  height: 128px;
  right: 34px;
  top: 34px;
  border: 1px dashed rgba(35,215,200,.65);
  border-radius: 50%;
  animation: compassTurn 18s linear infinite;
}
.compass::before,
.compass::after { content: ""; position: absolute; inset: 49% 8px auto; border-top: 1px solid rgba(35,215,200,.55); }
.compass::after { transform: rotate(90deg); }
.compass i { position: absolute; inset: 18px; border: 1px solid rgba(123,44,255,.45); border-radius: 50%; }
.compass b { position: absolute; left: 50%; top: -7px; width: 3px; height: 23px; background: var(--sunset); }
.compass span { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); transform: translate(-50%, -50%); }

.reticle {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 82px;
  margin: -41px 0 0 -41px;
  z-index: 60;
  pointer-events: none;
  border: 1px solid rgba(35,215,200,.7);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(35,215,200,.38), inset 0 0 18px rgba(35,215,200,.18);
  transition: transform .08s linear;
  mix-blend-mode: screen;
}
.reticle span { position: absolute; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }
.reticle span:nth-child(1) { left: 50%; top: -18px; width: 1px; height: 28px; }
.reticle span:nth-child(2) { left: 50%; bottom: -18px; width: 1px; height: 28px; }
.reticle span:nth-child(3) { top: 50%; left: -18px; width: 28px; height: 1px; }
.reticle span:nth-child(4) { top: 50%; right: -18px; width: 28px; height: 1px; }

.hud-tabs {
  position: fixed;
  z-index: 70;
  left: 40px;
  bottom: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: min(700px, calc(100vw - 80px));
}
.hud-tabs a {
  color: var(--peach);
  text-decoration: none;
  font-family: var(--readout);
  font-size: .68rem;
  letter-spacing: .08em;
  padding: 8px 10px;
  border: 1px solid rgba(255,176,0,.33);
  background: rgba(21,17,17,.66);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 10px 100%, 0 calc(100% - 8px));
}
.hud-tabs a::before { content: attr(data-scan) " / "; color: var(--amber); }
.hud-tabs a.active { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 16px rgba(35,215,200,.24); }

.archive { position: relative; z-index: 5; }
.scan {
  position: relative;
  min-height: 100vh;
  padding: clamp(96px, 11vw, 150px) clamp(34px, 7vw, 112px);
  overflow: hidden;
  isolation: isolate;
}
.scan::before {
  content: attr(data-scene);
  position: absolute;
  right: clamp(28px, 5vw, 72px);
  top: clamp(80px, 10vw, 126px);
  font-family: var(--readout);
  color: rgba(255,176,0,.45);
  font-size: clamp(.8rem, 1.2vw, 1rem);
  letter-spacing: .4em;
  writing-mode: vertical-rl;
}
.scan::after {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: -3;
  background:
    linear-gradient(90deg, rgba(107,98,91,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(107,98,91,.06) 1px, transparent 1px);
  background-size: 8.33% 100%, 100% 74px;
  opacity: .8;
  transform: skewY(-1.5deg);
}

.field-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .86;
  filter: drop-shadow(0 0 10px rgba(255,176,0,.24));
}
.field-lines path {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: drawField 3.8s ease-in-out forwards, lineGlitch 4.8s infinite steps(2, end);
}
.field-lines path:nth-child(even) { stroke: var(--cyan); animation-delay: .35s, 0s; opacity: .7; }
.field-lines path:nth-child(3) { stroke: var(--sunset); animation-delay: .65s, 0s; }

.missing-point {
  position: absolute;
  left: var(--void-x, 50%);
  top: var(--void-y, 50%);
  width: clamp(118px, 17vw, 245px);
  height: clamp(118px, 17vw, 245px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,17,17,1) 0 24%, rgba(123,44,255,.32) 25% 29%, transparent 31% 100%);
  border: 1px dashed rgba(255,176,0,.5);
  box-shadow: 0 0 44px rgba(123,44,255,.35), inset 0 0 40px rgba(0,0,0,.8);
  z-index: 0;
}
.missing-point::after {
  content: "S?";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  font-family: var(--spray);
  font-size: clamp(2rem, 6vw, 5.5rem);
  color: rgba(255,176,0,.12);
  text-decoration: line-through;
}
.final-void { width: clamp(220px, 30vw, 410px); height: clamp(220px, 30vw, 410px); box-shadow: 0 0 75px rgba(35,215,200,.35), 0 0 120px rgba(123,44,255,.28); }

.hero-title,
.alley-title,
.wall-heading,
.final-entry h2,
.wiki-fragment h2 {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hero-title {
  position: relative;
  max-width: 11ch;
  font-size: clamp(4.2rem, 13vw, 13.5rem);
  line-height: .78;
  color: var(--sunset);
  text-shadow: 5px 0 var(--violet), -3px 2px var(--cyan), 0 0 24px rgba(240,90,40,.42);
  transform: rotate(-4deg) translateY(4vh);
  animation: titleSettle 1.6s steps(5, end) both;
}
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .7;
}
.glitch-title::before { color: var(--violet); transform: translate(8px, -3px); clip-path: inset(0 0 60% 0); }
.glitch-title::after { color: var(--cyan); transform: translate(-5px, 4px); clip-path: inset(50% 0 0 0); }
.glitch-burst .glitch-title::before { animation: glitchSlice .24s steps(2, end) 4; }
.glitch-burst .glitch-title::after { animation: glitchSlice .19s steps(2, end) 4 reverse; }

.lead-note {
  position: relative;
  max-width: 520px;
  margin: 7vh 0 0 9vw;
  padding: 18px 22px;
  background: rgba(255,208,163,.12);
  border-left: 4px solid var(--amber);
  color: var(--peach);
  transform: rotate(2.5deg);
  box-shadow: -10px 12px 0 rgba(158,47,31,.38);
}

.field-note,
.wiki-fragment,
.readout-cluster,
.final-entry,
.tape-piece {
  background: rgba(21,17,17,.78);
  border: 1px solid rgba(255,176,0,.28);
  backdrop-filter: blur(2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.32);
}
.field-note {
  position: absolute;
  width: min(330px, 76vw);
  padding: 16px;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--peach);
  clip-path: polygon(0 8px, 96% 0, 100% 84%, 9px 100%);
}
.field-note span,
.wiki-fragment small,
.final-entry small {
  display: block;
  margin-bottom: 10px;
  color: var(--amber);
  font-family: var(--readout);
  font-size: .68rem;
  letter-spacing: .18em;
}
.note-a { right: 10vw; bottom: 18vh; transform: rotate(-6deg); }
.note-b { left: 12vw; bottom: 12vh; transform: rotate(4deg); border-color: rgba(35,215,200,.42); }
.note-c { right: 11vw; bottom: 14vh; transform: rotate(-3deg); }
.note-final { left: 7vw; bottom: 11vh; transform: rotate(2deg); }

.stamp {
  position: absolute;
  font-family: var(--display);
  letter-spacing: .12em;
  color: var(--amber);
  border: 3px solid var(--amber);
  border-radius: 50%;
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 1.05rem;
  transform: rotate(-16deg);
  opacity: .82;
  mix-blend-mode: screen;
  box-shadow: inset 0 0 20px rgba(255,176,0,.18);
}
.stamp-origin { left: 49vw; bottom: 13vh; }
.stamp-false { right: 10vw; top: 18vh; color: var(--sunset); border-color: var(--sunset); }
.stamp-wall { right: 13vw; bottom: 18vh; }

.photo-strip {
  position: absolute;
  z-index: -2;
  min-height: 170px;
  border: 8px solid rgba(255,208,163,.15);
  background:
    linear-gradient(135deg, rgba(240,90,40,.78), rgba(35,215,200,.34)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 2px, transparent 2px 8px),
    radial-gradient(circle at 35% 45%, rgba(255,208,163,.18), transparent 20%),
    linear-gradient(120deg, #331512, #101010 60%, #522017);
  background-blend-mode: multiply, overlay, screen, normal;
  filter: contrast(1.35) saturate(1.35);
  clip-path: polygon(4% 0, 100% 8%, 96% 100%, 0 91%);
  opacity: .78;
}
.photo-strip span {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: var(--readout);
  font-size: .66rem;
  letter-spacing: .14em;
  color: var(--peach);
  background: rgba(21,17,17,.72);
  padding: 6px 8px;
}
.strip-one { right: 4vw; top: 24vh; width: 36vw; transform: rotate(7deg); }
.strip-two { right: 8vw; bottom: 18vh; width: 34vw; transform: rotate(-8deg); }
.strip-three { left: 8vw; top: 14vh; width: 42vw; transform: rotate(5deg); }

.spray-glyph {
  position: absolute;
  right: 16vw;
  top: 17vh;
  font-family: var(--spray);
  color: rgba(255,176,0,.18);
  font-size: clamp(8rem, 22vw, 22rem);
  transform: rotate(13deg);
  z-index: -1;
}
.glyph-small { right: 8vw; top: 8vh; color: rgba(35,215,200,.16); }
.vertical-tag {
  position: absolute;
  left: 5vw;
  top: 9vh;
  writing-mode: vertical-rl;
  font-family: var(--spray);
  font-size: clamp(3rem, 9vw, 8rem);
  color: rgba(240,90,40,.42);
  letter-spacing: .08em;
}
.wiki-fragment {
  position: relative;
  width: min(620px, 78vw);
  padding: clamp(24px, 4vw, 42px);
  clip-path: polygon(0 0, 96% 3%, 100% 91%, 4% 100%);
}
.fragment-large { margin-left: 36vw; margin-top: 13vh; transform: rotate(-2deg); }
.fragment-warning { margin-left: 40vw; margin-top: 18vh; transform: rotate(3deg); border-color: rgba(240,90,40,.42); }
.wiki-fragment h2 { margin: 0 0 16px; font-size: clamp(2rem, 5vw, 5.2rem); line-height: .9; color: var(--sunset); }
.wiki-fragment p { margin: 0; line-height: 1.7; }

.equation-stencil {
  position: absolute;
  left: 23vw;
  bottom: 30vh;
  font-family: var(--display);
  font-size: clamp(2rem, 7vw, 7rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--amber);
  text-shadow: 4px 4px rgba(123,44,255,.5);
  transform: rotate(-11deg);
}
.spray-arrow { position: absolute; right: 23vw; top: 18vh; font-size: 8rem; color: var(--cyan); transform: rotate(145deg); text-shadow: 0 0 20px rgba(35,215,200,.5); }
.noise-stack { position: absolute; left: 12vw; bottom: 16vh; font-family: var(--display); font-size: clamp(2rem, 6vw, 6rem); line-height: .82; color: rgba(255,176,0,.18); transform: rotate(-7deg); }
.noise-stack span { display: block; text-shadow: 4px 0 var(--violet), -3px 0 var(--cyan); }
.alley-title { position: relative; display: inline-block; margin: 8vh 0 0 22vw; font-size: clamp(3.2rem, 10vw, 10rem); line-height: .82; color: var(--amber); text-shadow: 4px 0 var(--violet), -2px 2px var(--cyan); transform: rotate(2deg); }
.readout-cluster { width: min(430px, 76vw); padding: 18px 20px; margin: 8vh 0 0 48vw; font-family: var(--readout); border-color: rgba(35,215,200,.45); color: var(--cyan); }
.readout-cluster b { color: var(--amber); }
.broken-magnet { position: absolute; left: 13vw; top: 20vh; width: 240px; height: 160px; border: 32px solid var(--sunset); border-bottom: 0; border-radius: 130px 130px 0 0; transform: rotate(-18deg); opacity: .72; filter: drop-shadow(6px 0 var(--violet)); }
.broken-magnet span,
.broken-magnet em { position: absolute; bottom: -58px; font-family: var(--spray); font-size: 3rem; color: var(--peach); }
.broken-magnet span { left: -18px; }
.broken-magnet em { right: -14px; color: rgba(255,208,163,.22); text-decoration: line-through; }
.broken-magnet i { position: absolute; right: -36px; top: 24px; width: 58px; height: 92px; background: repeating-linear-gradient(45deg, var(--violet) 0 4px, transparent 4px 10px); opacity: .75; }
.wall-heading { margin: 5vh 0 0 8vw; font-size: clamp(3rem, 10vw, 10rem); color: var(--sunset); text-shadow: 5px 0 var(--violet), -3px 1px var(--cyan); transform: rotate(-3deg); }
.evidence-band { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; margin-top: 8vh; }
.tape-piece { padding: 22px; min-height: 132px; font-size: clamp(.86rem, 1.2vw, 1rem); color: var(--peach); clip-path: polygon(2% 0, 100% 4%, 97% 100%, 0 94%); }
.tape-piece:nth-child(1) { grid-column: 2 / span 4; transform: rotate(3deg); border-color: rgba(255,176,0,.45); }
.tape-piece:nth-child(2) { grid-column: 7 / span 4; transform: rotate(-4deg); }
.tape-piece:nth-child(3) { grid-column: 4 / span 5; transform: rotate(1deg); }
.tape-piece:nth-child(4) { grid-column: 9 / span 3; transform: rotate(6deg); }
.tape-piece.red { color: var(--sunset); border-color: rgba(240,90,40,.46); }
.tape-piece.cyan { color: var(--cyan); border-color: rgba(35,215,200,.5); }
.tape-piece.amber { color: var(--amber); }
.final-entry { position: relative; width: min(740px, 82vw); margin: 19vh auto 0; padding: clamp(28px, 5vw, 58px); text-align: left; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 92%); border-color: rgba(35,215,200,.48); }
.final-entry h2 { margin: 0 0 18px; font-size: clamp(2.7rem, 8vw, 8.5rem); line-height: .82; color: var(--cyan); text-shadow: 5px 0 var(--violet), -3px 2px var(--amber); }
.final-entry p { max-width: 620px; line-height: 1.75; }

@keyframes compassTurn { to { transform: rotate(360deg); } }
@keyframes drawField { to { stroke-dashoffset: 120; } }
@keyframes lineGlitch { 0%, 90%, 100% { transform: translate(0,0); opacity: .8; } 92% { transform: translate(9px,-3px); opacity: 1; } 94% { transform: translate(-6px,4px); opacity: .6; } }
@keyframes titleSettle { 0% { transform: rotate(-8deg) translate(30px, -20px); filter: blur(2px); } 62% { transform: rotate(-2deg) translate(-10px, 20px); } 100% { transform: rotate(-4deg) translateY(4vh); filter: blur(0); } }
@keyframes glitchSlice { 0% { clip-path: inset(0 0 82% 0); transform: translate(12px,-4px); } 50% { clip-path: inset(37% 0 34% 0); transform: translate(-12px,6px); } 100% { clip-path: inset(72% 0 0 0); transform: translate(7px,-2px); } }

@media (max-width: 800px) {
  .hud-frame { inset: 10px; }
  .compass { width: 86px; height: 86px; right: 18px; top: 24px; }
  .hud-tabs { left: 20px; bottom: 20px; gap: 5px; }
  .hud-tabs a { font-size: .55rem; padding: 6px 7px; }
  .scan { padding: 90px 24px 130px; }
  .hero-title { font-size: clamp(3.7rem, 21vw, 8rem); }
  .lead-note, .fragment-large, .fragment-warning, .readout-cluster, .final-entry { margin-left: 0; }
  .field-note { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin-top: 24px; }
  .photo-strip { width: 78vw; opacity: .45; }
  .strip-one, .strip-two, .strip-three { left: 12vw; right: auto; top: auto; bottom: 12vh; }
  .evidence-band { display: block; }
  .tape-piece { margin: 16px 0; }
  .vertical-tag, .spray-arrow, .equation-stencil { opacity: .45; }
}