Widen geography to 'The Corridor'

I-95. Lynch would use it. Doesn't explain itself. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Background: black and gray topography contour pattern
2026-10-04 12:34:32 -04:00 · 2026-10-04 12:20:19 -04:00 · 2026-10-04 12:16:00 -04:00 · 2026-10-04 12:11:52 -04:00
2 changed files with 78 additions and 736 deletions
--- a/index.html
+++ b/index.html
@ -3,43 +3,15 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Project Blindspot — Something is running the streets of Philadelphia</title>
+  <title>Project Blindspot — The Corridor</title>
-  <meta name="description" content="An unregistered vehicle has been documented across Philadelphia since early 2024. It broadcasts live telemetry from inside the car. The footage doesn't explain itself.">
+  <meta name="description" content="Something is running the corridor. We have the footage.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Inter:wght@300;400;500&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Space+Mono:wght@400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <div class="ticker" aria-hidden="true">
    <div class="ticker-track">
      <span class="ticker-item">SYSTEM ACTIVE</span>
      <span class="ticker-sep">·</span>
      <span class="ticker-item">SIGNAL: <span class="accent">STRONG</span></span>
      <span class="ticker-sep">·</span>
      <span class="ticker-item">LAST TRANSMISSION: KENSINGTON AVE / 02:47</span>
      <span class="ticker-sep">·</span>
      <span class="ticker-item">VEHICLE: UNREGISTERED</span>
      <span class="ticker-sep">·</span>
      <span class="ticker-item">SIGHTINGS LOGGED: 14</span>
      <span class="ticker-sep">·</span>
      <span class="ticker-item">IDENTITY: UNKNOWN</span>
      <span class="ticker-sep">·</span>
      <span class="ticker-item">SYSTEM ACTIVE</span>
      <span class="ticker-sep">·</span>
      <span class="ticker-item">SIGNAL: <span class="accent">STRONG</span></span>
      <span class="ticker-sep">·</span>
      <span class="ticker-item">LAST TRANSMISSION: KENSINGTON AVE / 02:47</span>
      <span class="ticker-sep">·</span>
      <span class="ticker-item">VEHICLE: UNREGISTERED</span>
      <span class="ticker-sep">·</span>
      <span class="ticker-item">SIGHTINGS LOGGED: 14</span>
      <span class="ticker-sep">·</span>
      <span class="ticker-item">IDENTITY: UNKNOWN</span>
    </div>
  </div>
  <header class="site-header">
    <div class="container">
      <div class="wordmark">
@ -47,200 +19,30 @@
        <span class="wordmark-name">BLINDSPOT</span>
      </div>
      <nav class="nav">
-        <a href="#about">Sightings</a>
+        <a href="#tune-in" class="nav-cta">Tune In</a>
        <a href="#archive">The Broadcasts</a>
        <a href="#transmissions">Transmissions</a>
        <a href="#tune-in" class="nav-cta">Report</a>
      </nav>
    </div>
  </header>
  <section class="hero">
    <div class="container">
-      <div class="hero-tag">PHILADELPHIA &nbsp;·&nbsp; ONGOING &nbsp;·&nbsp; UNVERIFIED</div>
+      <div class="hero-tag">THE CORRIDOR &nbsp;·&nbsp; ONGOING</div>
      <h1 class="hero-title">
-        Something is<br>
+        Something is running<br>
-        running the streets.<br>
+        the corridor.<br>
-        <span class="accent">The footage doesn't lie.</span>
+        <span class="accent">We have the footage.</span>
      </h1>
      <p class="hero-sub">
        An unregistered vehicle has been documented across Philadelphia since early 2024.
        It appears without warning. It disappears the same way. Whoever is inside that
        car built a broadcast rig — live telemetry, four cameras, signal going out in
        real time. We don't know who. We don't know why.
      </p>
      <a href="#transmissions" class="btn-primary">See the Evidence</a>
    </div>
    <div class="hero-grid" aria-hidden="true"></div>
  </section>
  <section class="features" id="about">
    <div class="container">
      <div class="section-label">DOCUMENTED SIGHTINGS &mdash; WHAT WE KNOW</div>
      <div class="feature-grid">
        <div class="feature-card">
          <div class="feature-icon">⬡</div>
          <h3>The Vehicle</h3>
          <p>A modified sports car. No consistent registration. No plates that check out. First picked up on a dashcam on Girard Avenue, February 2024, at 3am. It's been seen from Kensington to the Navy Yard. Surveillance cameras lose it within four seconds. We don't know why.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">⬡</div>
          <h3>The Signal</h3>
          <p>Whoever is in that car built something sophisticated. An OBS broadcast rig reading live OBD-II telemetry — speed, RPM, lateral g-force, heading — overlaid on four dashcam angles. The streams go out without notice. They end without explanation. We've been archiving them.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">⬡</div>
          <h3>The Community</h3>
          <p>There are people in this archive. Some have seen it in person. Some have footage they can't explain. Some found us through the transmissions. None of us fully agree on what we're looking at. We post everything anyway.</p>
        </div>
      </div>
    </div>
  </section>
  <section class="platform-section" id="archive">
    <div class="container platform-inner">
      <div class="platform-text">
        <div class="section-label">THE BROADCASTS &mdash; TECHNICAL NOTES</div>
        <h2>It's broadcasting.<br>From inside the car.</h2>
        <p>
          We've reverse-engineered enough of the setup to understand what we're seeing.
          The rig runs OBS with a live WebSocket connection to the car's OBD-II data bus.
          Speed, RPM, lateral g-force, heading — rendered in real time over four dashcam
          feeds. The broadcast goes out whenever the car moves.
        </p>
        <p>
          Whoever built this knew what they were doing. The overlay system is clean,
          the telemetry is accurate, and the camera composite is deliberate. This is
          not a dashcam. This is a cockpit. Someone designed it to be watched.
        </p>
        <ul class="platform-list">
          <li>OBD-II / ELM327 live telemetry confirmed</li>
          <li>OBS WebSocket overlay — custom build</li>
          <li>Four-angle dashcam composite</li>
          <li>Streams archived on first detection</li>
          <li>Plugin architecture — unknown purpose</li>
        </ul>
      </div>
      <div class="platform-visual" aria-hidden="true">
        <div class="dash-mock">
          <div class="dash-header">
            <span class="dash-title">BLINDSPOT / COCKPIT v0.9</span>
            <span class="dash-live accent">● LIVE</span>
          </div>
          <div class="dash-row">
            <div class="dash-gauge">
              <div class="dash-label">VELOCITY</div>
              <div class="dash-value">67 <span class="dash-unit">mph</span></div>
            </div>
            <div class="dash-gauge">
              <div class="dash-label">RPM</div>
              <div class="dash-value accent">3,847</div>
            </div>
          </div>
          <div class="dash-row">
            <div class="dash-gauge">
              <div class="dash-label">HEADING</div>
              <div class="dash-value">N&thinsp;&middot;&thinsp;NE</div>
            </div>
            <div class="dash-gauge">
              <div class="dash-label">LAT G</div>
              <div class="dash-value accent">0.8 <span class="dash-unit">g</span></div>
            </div>
          </div>
          <div class="dash-location">
            <span class="dash-label">POSITION</span>
            <span class="dash-loc-val">KENSINGTON AVE &nbsp;/&nbsp; 02:47:13</span>
          </div>
          <div class="dash-bar"><div class="dash-bar-fill"></div></div>
          <div class="dash-obs">● REC &nbsp;&nbsp; OBS · 4-CAM COMPOSITE</div>
        </div>
      </div>
    </div>
  </section>
  <section class="transmissions-section" id="transmissions">
    <div class="container">
      <div class="section-label">TRANSMISSIONS &mdash; ONGOING</div>
      <h2>The archive is open.</h2>
      <p class="transmissions-intro">The car runs. The signal goes out. These are the excerpts we've been able to document. Timestamps are approximate. We can't verify all of them. We're posting them anyway.</p>
      <div class="transmission-log">
        <div class="transmission-entry">
          <div class="t-meta">
            <span class="t-id">T &middot; 001</span>
            <span class="t-loc">Girard Avenue &mdash; 03:12AM</span>
          </div>
          <blockquote class="t-quote">
            "It asked me what I was afraid of. I said I didn't know. The RPMs climbed to 6,800 and held there for eleven seconds. Then it said: <em>that's not nothing.</em>"
          </blockquote>
          <div class="t-data">
            <span>RPM: 6,800</span>
            <span>DURATION: 0:11</span>
            <span>CAMERA: OFFLINE</span>
          </div>
        </div>
        <div class="transmission-entry">
          <div class="t-meta">
            <span class="t-id">T &middot; 002</span>
            <span class="t-loc">I-95 Southbound &mdash; Girard Interchange</span>
          </div>
          <blockquote class="t-quote">
            "The dashcam captured something in lane three. We've watched the clip forty times. We still don't agree on what it is."
          </blockquote>
          <div class="t-data">
            <span>RPM: 4,100</span>
            <span>SPEED: 71mph</span>
            <span>ANOMALY: LOGGED</span>
          </div>
        </div>
        <div class="transmission-entry">
          <div class="t-meta">
            <span class="t-id">T &middot; 003</span>
            <span class="t-loc">Kensington &amp; Allegheny &mdash; 01:55AM</span>
          </div>
          <blockquote class="t-quote">
            "The car refused to turn left. There was no mechanical reason for it. I didn't argue."
          </blockquote>
          <div class="t-data">
            <span>RPM: 900</span>
            <span>SPEED: 0mph</span>
            <span>DURATION: 2:34</span>
          </div>
        </div>
        <div class="transmission-entry transmission-entry--locked">
          <div class="t-meta">
            <span class="t-id">T &middot; 004</span>
            <span class="t-loc">Location: [REDACTED]</span>
          </div>
          <blockquote class="t-quote t-quote--redacted">
            ████████████████████████████ ██████ ████ ████████████ ███ ████████
            ████████████████ ████████████ Schuylkill ████████████████████████.
          </blockquote>
          <div class="t-data">
            <span>DATA: CORRUPTED</span>
            <span>CAMERA: RECOVERED</span>
            <span>STATUS: PENDING REVIEW</span>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="join-section" id="tune-in">
    <div class="container">
      <div class="section-label">TUNE IN &mdash; FIND THE FREQUENCY</div>
      <h2>New transmissions land<br>when the car runs.</h2>
      <p>If you've seen it — footage, a sighting, an encounter you can't explain — post it to the archive. Or drop your frequency and we'll reach you when the signal goes out.</p>
      <form class="join-form" action="#" method="post">
        <input type="email" name="email" placeholder="your frequency // email" required autocomplete="email">
        <button type="submit" class="btn-primary">Tune In</button>
      </form>
-      <p class="join-note">We don't know what this is either. That's why you're here.</p>
+      <p class="join-note">Transmissions drop when the car runs.</p>
    </div>
  </section>
@ -251,7 +53,7 @@
        <span class="wordmark-name">BLINDSPOT</span>
      </div>
      <p class="footer-tagline">Something is in the blind spot. It always has been.</p>
-      <p class="footer-copy">blindspot.fail &mdash; Philadelphia &mdash; est. 2024</p>
+      <p class="footer-copy">blindspot.fail &mdash; The Corridor &mdash; est. 2024</p>
    </div>
  </footer>
--- a/style.css
+++ b/style.css
@ -1,14 +1,9 @@
-/* ============================================================
+/* Project Blindspot — blindspot.fail */
   Project Blindspot — blindspot.fail
   Automotive gothic. Philadelphia streets. Lynch meets Knight Rider.
   Color system: near-black bg / dark gray surfaces / red accent
   ============================================================ */
 :root {
  --black:      #0a0a0a;
  --bg:         #111113;
  --surface:    #1a1a1e;
  --surface-hi: #222228;
  --border:     #2e2e36;
  --gray-dim:   #555566;
  --gray-mid:   #888899;
@ -21,85 +16,35 @@
  --mono:       'Space Mono', monospace;
 }
 /* ---- Reset ---- */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 html { scroll-behavior: smooth; }
 body {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--mono);
-  background: var(--bg);
+  background-color: #0c0c0e;
  background-image:
    repeating-radial-gradient(ellipse 620px 420px at 18% 32%,
      transparent 0px, transparent 36px,
      rgba(44, 46, 62, 0.55) 37px, transparent 38px),
    repeating-radial-gradient(ellipse 520px 360px at 78% 62%,
      transparent 0px, transparent 46px,
      rgba(44, 46, 62, 0.45) 47px, transparent 48px),
    repeating-radial-gradient(ellipse 700px 280px at 52% 88%,
      transparent 0px, transparent 30px,
      rgba(44, 46, 62, 0.35) 31px, transparent 32px),
    repeating-radial-gradient(ellipse 380px 520px at 88% 18%,
      transparent 0px, transparent 54px,
      rgba(44, 46, 62, 0.4) 55px, transparent 56px);
  color: var(--gray-hi);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
 }
 /* ---- Layout ---- */
 .container {
  max-width: 1080px;
  margin: 0 auto;
-  padding: 0 24px;
+  padding: 0 32px;
 }
 /* ---- Typography ---- */
 h1, h2, h3 {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: 0.02em;
 }
 .accent { color: var(--red-bright); }
 .section-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
 }
 /* ---- Ticker ---- */
 .ticker {
  background: var(--black);
  border-bottom: 1px solid var(--red-dim);
  height: 26px;
  overflow: hidden;
  position: relative;
 }
 .ticker-track {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  animation: ticker-scroll 40s linear infinite;
  padding: 0 16px;
  height: 100%;
 }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
 }
 .ticker-item {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-dim);
  flex-shrink: 0;
 }
 .ticker-item .accent { color: var(--red); }
 .ticker-sep {
  color: var(--border);
  flex-shrink: 0;
  font-size: 0.7rem;
 }
 /* ---- Header ---- */
@ -122,8 +67,7 @@ h1, h2, h3 {
 .wordmark {
  display: flex;
  align-items: baseline;
-  gap: 6px;
+  gap: 7px;
  text-decoration: none;
 }
 .wordmark-project {
@ -136,485 +80,78 @@ h1, h2, h3 {
 .wordmark-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
-  font-size: 1.15rem;
+  font-size: 1.1rem;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.14em;
  color: var(--white);
 }
 .wordmark-sm .wordmark-name  { font-size: 0.95rem; }
 .wordmark-sm .wordmark-project { font-size: 0.55rem; }
 .nav {
  display: flex;
  align-items: center;
  gap: 28px;
 }
 .nav a {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-mid);
  text-decoration: none;
  transition: color 0.15s;
 }
 .nav a:hover { color: var(--white); }
 .nav-cta {
-  color: var(--red) !important;
+  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  border: 1px solid var(--red-dim);
  padding: 6px 16px;
-  border-radius: 3px;
+  border-radius: 2px;
-  transition: background 0.15s, color 0.15s !important;
+  transition: background 0.15s, color 0.15s;
 }
 .nav-cta:hover {
  background: var(--red-glow);
-  color: var(--red-bright) !important;
+  color: var(--red-bright);
 }
 /* ---- Hero ---- */
 .hero {
  position: relative;
-  padding: 100px 0 90px;
+  padding: 120px 0 100px;
  overflow: hidden;
 }
-.hero-grid {
+.hero-grid { display: none; }
-  position: absolute;
+
-  inset: 0;
+.hero .container { position: relative; z-index: 1; }
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.3;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 40%, transparent 100%);
 }
 .hero-tag {
  font-family: var(--mono);
-  font-size: 0.62rem;
+  font-size: 0.65rem;
-  letter-spacing: 0.18em;
+  letter-spacing: 0.14em;
-  text-transform: uppercase;
+  color: var(--gray-dim);
-  color: var(--red);
+  margin-bottom: 28px;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
 }
 .hero-tag::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--red);
 }
 .hero-title {
-  font-size: clamp(2.8rem, 6.5vw, 4.8rem);
+  font-family: 'Rajdhani', sans-serif;
  line-height: 1.08;
  max-width: 640px;
  margin-bottom: 28px;
  color: var(--white);
 }
 .hero-sub {
  font-size: 1.05rem;
  color: var(--gray-mid);
  max-width: 520px;
  margin-bottom: 36px;
  line-height: 1.75;
 }
 .btn-primary {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  border: none;
  padding: 14px 32px;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
 }
 .btn-primary:hover {
  background: var(--red-bright);
  transform: translateY(-1px);
 }
 .btn-primary:active { transform: translateY(0); }
 /* ---- Features ---- */
 .features {
  padding: 90px 0;
  border-top: 1px solid var(--border);
 }
 .feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 16px;
 }
 .feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--red-dim);
  padding: 28px 24px;
  border-radius: 2px;
  transition: border-color 0.2s, background 0.2s;
 }
 .feature-card:hover {
  border-top-color: var(--red);
  background: var(--surface-hi);
 }
 .feature-icon {
  color: var(--red-dim);
  font-size: 1.1rem;
  margin-bottom: 14px;
 }
 .feature-card h3 {
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  color: var(--white);
 }
 .feature-card p {
  font-size: 0.9rem;
  color: var(--gray-mid);
  line-height: 1.7;
 }
 /* ---- Platform Section ---- */
 .platform-section {
  padding: 90px 0;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface) 100%);
 }
 .platform-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
 }
 .platform-text h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  margin-bottom: 20px;
 }
 .platform-text p {
  font-size: 0.92rem;
  color: var(--gray-mid);
  line-height: 1.8;
  margin-bottom: 16px;
 }
 .platform-list {
  list-style: none;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
 }
 .platform-list li {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--gray-hi);
  display: flex;
  align-items: center;
  gap: 12px;
 }
 .platform-list li::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  background: var(--red);
  border-radius: 50%;
  flex-shrink: 0;
 }
 /* ---- Dashboard Mock ---- */
 .dash-mock {
  background: var(--black);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 22px 24px;
  font-family: var(--mono);
  box-shadow: 0 0 48px rgba(212, 43, 43, 0.1), inset 0 1px 0 rgba(255,255,255,0.03);
 }
 .dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
 }
 .dash-title {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--gray-dim);
  text-transform: uppercase;
 }
 .dash-live {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  color: var(--red-bright);
 }
 .dash-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
 }
 .dash-gauge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 12px 14px;
 }
 .dash-label {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--gray-dim);
  margin-bottom: 5px;
  text-transform: uppercase;
  display: block;
 }
 .dash-value {
  font-size: 1.45rem;
  font-weight: 700;
-  color: var(--gray-hi);
+  font-size: clamp(2.6rem, 6vw, 4.8rem);
-  letter-spacing: 0.03em;
+  line-height: 1.08;
  line-height: 1;
 }
 .dash-unit {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--gray-dim);
  letter-spacing: 0.1em;
 }
 .dash-value.accent { color: var(--red-bright); }
 .dash-location {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 12px;
 }
 .dash-loc-val {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--gray-hi);
  text-transform: uppercase;
 }
 .dash-bar {
  height: 3px;
  background: var(--surface-hi);
  border-radius: 2px;
  margin-bottom: 14px;
  overflow: hidden;
 }
 .dash-bar-fill {
  height: 100%;
  width: 42%;
  background: linear-gradient(90deg, var(--red-dim), var(--red-bright));
 }
 .dash-obs {
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  color: var(--red);
  text-align: right;
  text-transform: uppercase;
 }
 /* ---- Transmissions Section ---- */
 .transmissions-section {
  padding: 90px 0;
  border-top: 1px solid var(--border);
 }
 .transmissions-section h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: 12px;
 }
 .transmissions-intro {
  font-size: 0.92rem;
  color: var(--gray-mid);
  max-width: 540px;
  line-height: 1.75;
  margin-bottom: 48px;
  font-style: italic;
 }
 .transmission-log {
  display: flex;
  flex-direction: column;
  gap: 2px;
 }
 .transmission-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red-dim);
  padding: 24px 28px;
  border-radius: 0 2px 2px 0;
  transition: border-left-color 0.2s, background 0.2s;
 }
 .transmission-entry:hover {
  border-left-color: var(--red);
  background: var(--surface-hi);
 }
 .transmission-entry--locked {
  border-left-color: var(--border);
  opacity: 0.7;
 }
 .transmission-entry--locked:hover {
  border-left-color: var(--gray-dim);
  background: var(--surface);
 }
 .t-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
 }
 .t-id {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: var(--red);
  text-transform: uppercase;
  flex-shrink: 0;
 }
 .transmission-entry--locked .t-id {
  color: var(--gray-dim);
 }
 .t-loc {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--gray-dim);
  text-transform: uppercase;
 }
 .t-quote {
  font-size: 0.97rem;
  color: var(--gray-hi);
  line-height: 1.75;
  border: none;
  padding: 0;
  margin-bottom: 16px;
  font-style: italic;
  max-width: 680px;
 }
 .t-quote em {
  color: var(--white);
-  font-style: normal;
+  letter-spacing: 0.02em;
 }
-.t-quote--redacted {
+.accent { color: var(--red-bright); }
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--gray-dim);
  letter-spacing: 0.04em;
  line-height: 1.9;
  font-style: normal;
 }
-.t-data {
+/* ---- Tune In ---- */
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
 }
 .t-data span {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--gray-dim);
  text-transform: uppercase;
 }
 /* ---- Join Section ---- */
 .join-section {
-  padding: 100px 0;
+  padding: 80px 0 100px;
  border-top: 1px solid var(--border);
  text-align: center;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(139, 0, 0, 0.04) 100%);
 }
 .join-section h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 16px;
 }
 .join-section > .container > p {
  font-size: 0.95rem;
  color: var(--gray-mid);
  max-width: 440px;
  margin: 0 auto 32px;
  line-height: 1.75;
 }
 .join-form {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
-  margin-bottom: 20px;
+  margin-bottom: 18px;
 }
 .join-form input[type="email"] {
  font-family: var(--mono);
-  font-size: 0.78rem;
+  font-size: 0.75rem;
  letter-spacing: 0.06em;
  background: var(--surface);
  border: 1px solid var(--border);
@ -629,13 +166,28 @@ h1, h2, h3 {
 .join-form input[type="email"]::placeholder { color: var(--gray-dim); }
 .join-form input[type="email"]:focus { border-color: var(--red-dim); }
 .btn-primary {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  border: none;
  padding: 13px 28px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.15s;
 }
 .btn-primary:hover { background: var(--red-bright); }
 .join-note {
  font-family: var(--mono);
-  font-size: 0.62rem !important;
+  font-size: 0.62rem;
  letter-spacing: 0.1em;
-  color: var(--gray-dim) !important;
+  color: var(--gray-dim);
  text-transform: uppercase;
  margin-bottom: 0 !important;
 }
 /* ---- Footer ---- */
@ -658,29 +210,17 @@ h1, h2, h3 {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--gray-dim);
  font-style: italic;
 }
 .footer-copy {
-  font-family: var(--mono);
+  font-size: 0.58rem;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--border);
  text-transform: uppercase;
 }
 /* ---- Responsive ---- */
-@media (max-width: 760px) {
+@media (max-width: 600px) {
  .platform-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .nav a:not(.nav-cta) { display: none; }
  .join-form input[type="email"] { width: 100%; }
-
+  .hero { padding: 80px 0 70px; }
  .t-meta { flex-direction: column; gap: 4px; align-items: flex-start; }
  .t-data { gap: 14px; }
 }
Author	SHA1	Message	Date
Stephen Groundwater	6c644e8d14	Widen geography to 'The Corridor' I-95. Lynch would use it. Doesn't explain itself. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-10-04 12:34:32 -04:00
Stephen Groundwater	ad6d0d760f	Background: black and gray topography contour pattern Layered repeating-radial-gradients at four focal points create organic topo map contours. Grid overlay removed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-10-04 12:20:19 -04:00
Stephen Groundwater	8e16cb51e3	Reduce to minimum — coordinates, title, form Remove ticker, transmission log, dash mock, all fake data. Less is more. The footage will do the talking. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-10-04 12:16:00 -04:00
Stephen Groundwater	a82b8ecae4	Strip to the bone — mystery first, no backstory Remove all explainer sections. Hero is coordinates + 3 lines. Dash mock moves into hero as right-column visual. Transmissions are the whole story. Let it breathe. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-10-04 12:11:52 -04:00