*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{background:#0a0a0a;color:#fff;font-family:'Space Mono',monospace;
  overflow:hidden;height:100vh;height:100dvh;width:100vw;}

/* ---- dark field ---- */
.wrap{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden;}
.bg{position:absolute;inset:0;z-index:0;background:#101010;}
.bg::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 55% 42%, #1a1a1a 0%, #0c0c0c 70%);}

/* ---- construction grid (the faint white "box") ---- */
.grid-lines{position:fixed;inset:0;pointer-events:none;z-index:1;}
.grid-lines .v{position:absolute;top:0;bottom:0;width:1px;background:rgba(236,234,228,0.10);}
.grid-lines .h{position:absolute;left:0;right:0;height:1px;background:rgba(236,234,228,0.10);}

/* ---- animated film grain (on top of everything) ---- */
.grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:0.24;
  background-image:url("assets/grain.png");background-repeat:repeat;
  animation:gs 0.4s steps(3) infinite;}
@keyframes gs{
  0%{transform:translate(0,0);}   25%{transform:translate(-4%,3%);}
  50%{transform:translate(3%,-2%);} 75%{transform:translate(-2%,4%);}
  100%{transform:translate(3%,-3%);}
}

/* ============================================================
   THE MANIFESTO — mono, justified, synthesised / double-exposed
   ============================================================ */
.manifesto{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:70vw;                                   /* sits inside the 12.5%–87.5% grid box */
  font-weight:400; text-transform:uppercase;
  font-size:clamp(17px, 2.34vw, 34px);
  line-height:1.45; letter-spacing:0.02em;
  color:#fff; text-align:justify; text-align-last:center;

  /* the effect: chromatic split (red/blue fringe) + strong CRT glow.
     The grain layer above provides the double-exposure texture. */
  text-shadow:
    0.7px 0 rgba(255,45,60,0.32),
   -0.7px 0 rgba(60,150,255,0.32),
    0 0 22px rgba(200,222,255,0.50),
    0 0 44px rgba(180,210,255,0.30);
}

/* old-computer scanlines, faint */
.manifesto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.26) 2px 3px);
}

/* ============================================================
   ENTER — the route out to the Substack. Sits on the 84% line.
   ============================================================ */
.enter{
  position:absolute; left:50%; top:84%; transform:translate(-50%,-50%); z-index:2;
  display:inline-block; padding:0.55em 1.6em;
  background:#0a0a0a;                           /* masks the grid line behind it */
  color:#fff; text-decoration:none;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.34em;
  border:1px solid rgba(236,234,228,0.28);
  text-shadow:
    0.5px 0 rgba(255,45,60,0.32),
   -0.5px 0 rgba(60,150,255,0.32),
    0 0 14px rgba(200,222,255,0.45);
  transition:border-color 0.2s ease, letter-spacing 0.2s ease;
}
.enter:hover,.enter:focus-visible{
  border-color:rgba(236,234,228,0.7); letter-spacing:0.44em; outline:none;
  text-shadow:
    1.6px 0 rgba(255,45,60,0.5),
   -1.6px 0 rgba(60,150,255,0.5),
    0 0 18px rgba(200,222,255,0.6);
}

/* accessibility: kill grain motion for reduced-motion users */
@media (prefers-reduced-motion: reduce){ .grain{animation:none;} }

/* mobile: thicker side margins, drop the size */
@media(max-width:640px){
  .manifesto{width:76vw;font-size:clamp(16px,4.32vw,24px);}
}