:root {
  /* Design terms: Intersection Observer triggers all scroll-based animations with a `threshold: 0.15`; Intersection Observer-triggered `slide-reveal` animations with staggered delays (0s; Source Sans 3 providing a brief Source Sans 3" (Google Fonts. */
  --asphalt: #1A1612;
  --concrete: #6B6259;
  --kraft: #F5F0EB;
  --sienna: #A0522D;
  --amber: #D4883A;
  --terracotta: #C97B4B;
  --oxide: #8B3A2A;
  --soot: #2C2420;
  --ease-heavy: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--asphalt);
  color: var(--kraft);
  font-family: "Source Sans 3", Inter, sans-serif;
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.block { position: relative; min-height: 100vh; overflow: hidden; }

h1, h2 {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin: 0;
}

p { font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.7; }

.kicker, .tagline, .watch-quote {
  font-family: "Barlow Condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.data-line, .sector-stamp, .note, figcaption, footer, .watch-tag {
  font-family: "Share Tech Mono", monospace;
  letter-spacing: 0.05em;
}

.photo-field, .photo-frame, .watch-photo {
  background-size: cover;
  background-position: center;
  position: relative;
}

.photo-frame::after, .watch-photo::after, .photo-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.45'/%3E%3C/svg%3E");
  opacity: 0.22;
  mix-blend-mode: overlay;
}

.bw { filter: grayscale(1) contrast(1.3); }
.sodium { filter: grayscale(1) contrast(1.15) sepia(0.55) saturate(1.7) hue-rotate(338deg); }

.hero-photo {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  animation: slowPan 30s linear infinite alternate;
  background-image:
    linear-gradient(90deg, rgba(26,22,18,0.15), rgba(26,22,18,0.75)),
    url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1800&q=80");
}

.block-roll { background: var(--asphalt); }
.roll-content {
  position: absolute;
  left: 12vw;
  top: 50%;
  transform: translateY(-30%);
  z-index: 2;
  max-width: 70rem;
}
.roll-content h1 { font-size: clamp(4rem, 12vw, 10rem); color: var(--kraft); }
.kicker { color: var(--amber); font-size: clamp(1.2rem, 2.5vw, 2rem); margin: 0 0 1rem; }
.tagline { color: var(--amber); max-width: 42rem; font-size: 1.2rem; }
.sector-stamp { position: absolute; bottom: 2rem; left: 3vw; color: var(--concrete); font-size: 0.75rem; }
.stencil { position: absolute; font-family: "Oswald", sans-serif; color: var(--concrete); opacity: 0.18; text-transform: uppercase; pointer-events: none; }
.stencil-hero { right: -2vw; top: 12vh; font-size: 13vw; transform: rotate(-5deg); }

.block-route {
  min-height: 130vh;
  padding: 8vh 4vw 16vh;
  background: var(--asphalt);
}
.route-band { position: absolute; left: 0; right: 0; height: 36vh; background: var(--soot); }
.route-band-one { top: 22vh; }
.route-band-two { bottom: 10vh; background: #2C2420; }
.route-stencil-one { top: 12vh; left: 45vw; font-size: 9vw; }
.route-stencil-two { bottom: 18vh; left: 3vw; font-size: 8vw; transform: rotate(2deg); }
.route-cluster { position: relative; display: grid; grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1fr); align-items: end; gap: 0; z-index: 2; max-width: 920px; }
.cluster-copy { background: var(--kraft); color: var(--soot); padding: clamp(1.2rem, 3vw, 3rem); border: 2px solid var(--soot); box-shadow: 18px 18px 0 rgba(160,82,45,0.45); }
.cluster-copy h2 { color: var(--soot); font-size: clamp(3rem, 7vw, 6rem); }
.data-line { color: var(--sienna); font-size: 0.8rem; margin: 0 0 0.6rem; }
.photo-frame { min-height: 330px; border: 4px solid var(--kraft); background-color: var(--concrete); }
.cluster-one { margin-left: 2vw; transform: rotate(-1.5deg); }
.cluster-two { margin-left: auto; margin-top: -6vh; transform: rotate(0deg); grid-template-columns: minmax(280px, 1fr) minmax(220px, 0.85fr); }
.cluster-three { margin-left: 42vw; margin-top: 8vh; transform: rotate(2deg); max-width: 720px; grid-template-columns: 0.85fr 1fr; }
.photo-alley { background-image: url("https://images.unsplash.com/photo-1519501025264-65ba15a82390?auto=format&fit=crop&w=1000&q=80"); }
.photo-corner { background-image: url("https://images.unsplash.com/photo-1514565131-fce0801e5785?auto=format&fit=crop&w=1000&q=80"); }
.photo-underpass { background-image: url("https://images.unsplash.com/photo-1528657249085-c569d3db6f9f?auto=format&fit=crop&w=1000&q=80"); }

.block-evidence { min-height: 120vh; padding: 8vh 4vw; background: var(--soot); }
.block-evidence::before {
  content: ""; position: absolute; inset: 0; opacity: 0.28;
  background-image: linear-gradient(rgba(107,98,89,0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(107,98,89,0.18) 1px, transparent 1px);
  background-size: 48px 48px;
}
.case-title { position: relative; z-index: 2; font-size: clamp(4rem, 11vw, 9rem); color: var(--kraft); margin-left: 5vw; }
.redaction { background: var(--asphalt); height: 2.4rem; }
.case-redaction { position: absolute; top: 15vh; left: 9vw; width: 35vw; z-index: 3; transform-origin: left; }
.evidence-board { position: relative; z-index: 2; height: 820px; margin: 2vh auto 0; max-width: 1200px; }
.thread-map { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.thread-map line { stroke: var(--oxide); stroke-width: 2; stroke-dasharray: 900; stroke-dashoffset: 900; }
.evidence-board.is-visible .thread-map line { animation: drawThread 2s var(--ease-heavy) forwards; }
.evidence-item { position: absolute; transition: transform 0.35s var(--ease-heavy), z-index 0.1s; }
.evidence-item:hover { transform: scale(1.05) rotate(0deg); z-index: 10; }
.evidence-photo { margin: 0; background: var(--kraft); padding: 0.45rem; color: var(--soot); box-shadow: 12px 12px 0 rgba(26,22,18,0.45); }
.evidence-photo .photo-frame { width: 100%; min-height: 160px; border: 0; }
figcaption { color: var(--soot); font-size: 0.72rem; margin-top: 0.4rem; }
.note, .scrap { color: var(--amber); background: rgba(26,22,18,0.86); border: 1px solid var(--concrete); padding: 1rem; font-size: 0.8rem; }
.note span { color: var(--concrete); }
.redacted-note { background: var(--kraft); padding: 1rem; width: 210px; }
.redacted-note span { display: block; height: 16px; background: var(--asphalt); margin: 12px 0; }
.pin { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--oxide); border: 2px solid var(--kraft); z-index: 5; }
.pin-one { left: 12%; top: 18%; } .pin-two { left: 60%; top: 14%; } .pin-three { left: 48%; top: 63%; } .pin-four { right: 17%; top: 43%; }
.ev-one { left: 4%; top: 8%; width: 230px; transform: rotate(-3deg); }
.ev-two { left: 31%; top: 25%; transform: rotate(2deg); }
.ev-three { left: 56%; top: 4%; width: 250px; transform: rotate(4deg); }
.ev-four { right: 4%; top: 32%; transform: rotate(-2deg); }
.ev-five { left: 42%; top: 58%; transform: rotate(-4deg); }
.ev-six { right: 12%; bottom: 4%; width: 220px; transform: rotate(2deg); }
.ev-seven { left: 7%; bottom: 13%; max-width: 260px; transform: rotate(3deg); }
.ev-eight { left: 22%; top: 48%; transform: rotate(-1deg); }
.photo-stoop { background-image: url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80"); }
.photo-window { background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?auto=format&fit=crop&w=800&q=80"); }
.photo-payphone { background-image: url("https://images.unsplash.com/photo-1493246507139-91e8fad9978e?auto=format&fit=crop&w=800&q=80"); }

.block-watch { display: grid; place-items: center; min-height: 100vh; padding: 8vw; }
.watch-photo { position: absolute; inset: 0; filter: grayscale(1) contrast(1.35); animation: slowZoom 20s ease-in-out infinite alternate; background-image: linear-gradient(rgba(26,22,18,0.15), rgba(26,22,18,0.55)), url("https://images.unsplash.com/photo-1449824913935-59a10b8d2000?auto=format&fit=crop&w=1800&q=80"); }
.watch-quote { position: relative; z-index: 2; max-width: 980px; margin: 0; color: var(--kraft); font-size: clamp(1.5rem, 4vw, 3rem); line-height: 1.15; text-shadow: 0 2px 20px rgba(26,22,18,0.8); text-transform: uppercase; }
.watch-quote span { display: inline-block; opacity: 0; transform: translateY(1.1rem); transition: opacity 0.7s var(--ease-heavy), transform 0.7s var(--ease-heavy); }
.watch-quote.is-visible span { opacity: 1; transform: translateY(0); }
.watch-tag { position: absolute; z-index: 2; left: 10vw; bottom: 13vh; color: var(--amber); font-size: 0.8rem; }

.block-end { min-height: 80vh; background: var(--asphalt); padding: 16vh 9vw 5vh; }
.end-content { max-width: 42rem; margin-left: 7vw; }
.end-content h2 { font-size: clamp(2rem, 5vw, 4rem); color: var(--amber); }
.end-content p { color: var(--kraft); max-width: 38rem; }
.final-line { position: absolute; left: 0; right: 0; bottom: 96px; height: 1px; background: var(--sienna); }
footer { position: absolute; left: 9vw; bottom: 38px; color: var(--concrete); font-size: 0.75rem; display: flex; gap: 1rem; align-items: center; }
footer a { color: var(--concrete); text-decoration: none; transition: color 0.25s var(--ease-heavy); }
footer a:hover { color: var(--amber); }
.badge { width: 14px; height: 17px; display: inline-block; background: var(--amber); clip-path: polygon(50% 0, 92% 18%, 82% 72%, 50% 100%, 18% 72%, 8% 18%); position: relative; }
.badge::after { content: ""; position: absolute; inset: 4px; background: var(--soot); clip-path: inherit; }

.reveal { opacity: 0; transition: opacity 1.2s var(--ease-heavy), transform 1.2s var(--ease-heavy); }
.from-left { transform: translateX(-7rem); }
.from-right { transform: translateX(7rem); }
.from-bottom { transform: translateY(6rem); }
.reveal.is-visible { opacity: 1; transform: translate(0, 0) rotate(var(--keep-rotate, 0deg)); }
.slide-on-load { animation: loadSlide 1.2s var(--ease-heavy) both; }
.redact-slide { transform: scaleX(1); transition: transform 1.2s var(--ease-heavy); }
.redact-slide.is-visible { transform: scaleX(0.15); }

@keyframes loadSlide { from { opacity: 0; transform: translate(-8rem, -30%); } to { opacity: 1; transform: translate(0, -30%); } }
@keyframes slowPan { from { background-position: 45% center; } to { background-position: 58% center; } }
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes drawThread { to { stroke-dashoffset: 0; } }

@media (max-width: 820px) {
  .roll-content { left: 6vw; right: 6vw; }
  .block-route { min-height: auto; padding-bottom: 8vh; }
  .route-cluster, .cluster-two, .cluster-three { grid-template-columns: 1fr; margin: 8vh 0; max-width: none; }
  .photo-frame { min-height: 240px; }
  .evidence-board { height: 980px; }
  .ev-one { left: 0; top: 6%; width: 190px; }
  .ev-two { left: 44%; top: 17%; }
  .ev-three { left: 18%; top: 34%; width: 210px; }
  .ev-four { right: 0; top: 53%; }
  .ev-five { left: 6%; top: 67%; }
  .ev-six { right: 4%; bottom: 2%; width: 190px; }
  .thread-map { opacity: 0.65; }
  footer { flex-wrap: wrap; right: 9vw; }
}