/* ============================================================
   TRANSMISSION №003 — reality.exe
   Cyber-grunge glitch edition · Stardust Gravity
   Stock: Bright White Card 290 · Inks: Black · Rubine · Cobalt · Fluoro Pink
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;600;700;800;900&family=Space+Mono:wght@400;700&family=Permanent+Marker&family=Press+Start+2P&family=VT323&family=Noto+Sans+JP:wght@500;700;900&display=swap');

:root{
  --paper:#EAE7DE;      /* bright white card */
  --ink:#131110;        /* process black */
  --ink2:#1d1a17;
  --rubine:#DA2A17;     /* red sun */
  --cobalt:#2C46E0;     /* electric cobalt */
  --cyan:#19C7E6;       /* cobalt mis-reg split */
  --fluo:#FF2E97;       /* fluoro pink */
  --smoke:#c9c6bf;
  --disp:'Anton',sans-serif;
  --grot:'Archivo',sans-serif;
  --mono:'Space Mono',monospace;
  --hand:'Permanent Marker',cursive;
  --jp:'Noto Sans JP',sans-serif;
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--paper); color:var(--ink);
  font-family:var(--grot);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px),
    radial-gradient(120% 80% at 50% 0%, rgba(0,0,0,.05), transparent 60%);
  -webkit-font-smoothing:antialiased;
}
.sheet{ max-width:1320px; margin:0 auto; padding:40px 40px 80px; }

/* grain + scanline reusable layers (apply inside dark fields) */
.grain::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:40;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.6'/></svg>");
  background-size:200px 200px; mix-blend-mode:overlay; opacity:.5; }
.scan::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:39;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1.5px, transparent 1.5px 3.5px);
  mix-blend-mode:multiply; opacity:.55; }

/* ===================== UTILITY BAR ===================== */
.util{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  border-bottom:2px solid var(--ink); padding-bottom:9px; }
.util .blk{ background:var(--ink); color:var(--paper); padding:3px 9px; }
.util .fl{ color:var(--fluo); }
.util .sq{ width:9px; height:9px; background:var(--rubine); display:inline-block; }

/* ===================== MASTHEAD ===================== */
.mast{ margin-top:26px; position:relative; }
.mast .kicker{ font-family:var(--mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink); display:flex; gap:14px; align-items:center; }
.mast .kicker .fl{ color:var(--fluo); }
.wordmark{ margin:6px 0 0; font-family:var(--disp); text-transform:uppercase; line-height:.82;
  font-size:clamp(60px,12vw,158px); letter-spacing:-.01em; color:var(--ink); position:relative; }
.wordmark .gli{ position:relative; display:inline-block;
  text-shadow:4px 0 var(--fluo), -4px 0 var(--cyan); }
.wordmark .exe{ color:var(--rubine); font-size:.3em; vertical-align:super; margin-left:.12em; text-shadow:none; }
.mast .sub{ display:flex; gap:16px; flex-wrap:wrap; align-items:baseline; margin-top:14px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2); }
.mast .sub b{ color:var(--rubine); }
.mast .lead{ max-width:680px; margin:14px 0 0; font-weight:600; font-size:16px; line-height:1.5; text-wrap:pretty; }
.mast .lead .fl{ color:var(--fluo); font-weight:800; }

/* ===================== POSTER GRID ===================== */
.grid{ margin-top:50px; display:grid; grid-template-columns:1fr 1fr; gap:46px 40px; }
@media(max-width:980px){ .grid{ grid-template-columns:1fr; } }

.comp{ }
.comp-cap{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2);
  border-top:2px solid var(--ink); padding-top:8px; margin-top:12px; }
.comp-cap .n{ font-family:var(--disp); font-size:20px; letter-spacing:0; color:var(--ink); }
.comp-cap .ttl{ color:var(--rubine); }
.comp-cap .inks{ display:flex; gap:5px; align-items:center; }
.comp-cap .inks i{ width:11px; height:11px; display:block; border:1px solid rgba(0,0,0,.35); }

/* ---- the poster card (dark field) ---- */
.poster{ position:relative; aspect-ratio:62/80; background:var(--ink); overflow:hidden; container-type:inline-size;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.8);
  border:1px solid #000; }
.poster .torn{ position:absolute; inset:0; z-index:38; pointer-events:none;
  box-shadow:inset 0 0 0 6px var(--paper), inset 0 0 22px 6px rgba(0,0,0,.6); }
.poster .bleed{ position:absolute; inset:0; }

/* photographic layers */
.ph{ position:absolute; object-fit:cover; }
.smoke{ filter:grayscale(1) contrast(1.25) brightness(.62); mix-blend-mode:screen; opacity:.85; }
.smoke-lo{ filter:grayscale(1) contrast(1.3) brightness(.5); mix-blend-mode:screen; opacity:.7; }

/* ---- halftone burning sun ---- */
.sun{ position:absolute; border-radius:50%; overflow:hidden;
  background:
    radial-gradient(120% 120% at 50% 18%, #ff5a2a 0%, var(--rubine) 42%, #a81d10 100%); }
.sun::before{ content:''; position:absolute; inset:0; border-radius:50%; z-index:2;
  background-image:radial-gradient(circle, rgba(0,0,0,.6) 30%, transparent 32%);
  background-size:7px 7px; mix-blend-mode:multiply; }
.sun .sil{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 92%; z-index:3;
  filter:brightness(0); }
.sun .glow{ position:absolute; inset:-12%; border-radius:50%; z-index:1; box-shadow:0 0 70px 10px rgba(218,42,23,.55); }

/* ---- RGB-split glitch stack (for busts) ---- */
.glitch{ position:absolute; }
.glitch .l{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.glitch .base{ filter:grayscale(1) contrast(1.18) brightness(1.0); z-index:2; }
.glitch .cy{ filter:grayscale(1) brightness(1.05) sepia(1) hue-rotate(150deg) saturate(7); mix-blend-mode:screen; transform:translate(-8px,2px); z-index:1; opacity:.7; }
.glitch .mg{ filter:grayscale(1) brightness(1.05) sepia(1) hue-rotate(290deg) saturate(7); mix-blend-mode:screen; transform:translate(8px,-2px); z-index:3; opacity:.4; }
.glitch .slice{ position:absolute; left:0; width:100%; height:14%; object-fit:cover; z-index:4;
  transform:translateX(10px); filter:grayscale(1) contrast(1.2); clip-path:inset(0); opacity:.9; }

/* ---- glitch tear (scanline-torn, not a clean field) ---- */
.tear{ position:absolute; z-index:6; mix-blend-mode:screen; opacity:.9;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.65) 0 1.5px, transparent 1.5px 4px),
    linear-gradient(178deg, var(--cyan), var(--cobalt) 26%, var(--fluo) 58%, var(--rubine) 100%);
  clip-path:polygon(44% 0,58% 1%,50% 9%,62% 16%,46% 24%,60% 33%,49% 42%,63% 50%,47% 59%,59% 67%,50% 76%,61% 84%,48% 92%,56% 100%,42% 100%,47% 92%,39% 84%,51% 76%,41% 67%,53% 59%,39% 50%,52% 42%,40% 33%,54% 24%,41% 16%,52% 9%,43% 1%); }
.tear.b{ filter:blur(8px); opacity:.45; clip-path:none; }

/* ---- amped glitch utilities ---- */
.ht{ position:absolute; inset:0; z-index:30; pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,0,0,.55) 26%, transparent 28%);
  background-size:5px 5px; mix-blend-mode:soft-light; opacity:.55; }
.vhs{ position:absolute; left:-2%; width:104%; z-index:31; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(90deg, transparent, rgba(25,199,230,.55) 18%, rgba(255,46,151,.6) 78%, transparent);
  filter:blur(.5px); box-shadow:0 0 0 rgba(0,0,0,0); }
.gblock{ position:absolute; z-index:32; mix-blend-mode:screen; pointer-events:none; }
.dispband{ position:absolute; overflow:hidden; z-index:7; pointer-events:none; mix-blend-mode:screen; opacity:.85; }
.dispband img{ position:absolute; width:100%; }
.chrom{ text-shadow:3px 0 var(--fluo), -3px 0 var(--cyan); }

/* ---- Yokoo rising-sun rays ---- */
.burst{ position:absolute; z-index:1; pointer-events:none; border-radius:50%;
  background:repeating-conic-gradient(from -7deg at 50% 50%, var(--rubine) 0 7deg, transparent 7deg 14.5deg);
  -webkit-mask:radial-gradient(circle, transparent 28%, #000 31%, #000 80%, transparent 95%);
  mask:radial-gradient(circle, transparent 28%, #000 31%, #000 80%, transparent 95%); opacity:.92; }
.burst.f{ background:repeating-conic-gradient(from 3deg at 50% 50%, var(--fluo) 0 2.2deg, transparent 2.2deg 14.5deg); mix-blend-mode:screen; opacity:.6; }
.burst.c{ background:repeating-conic-gradient(from 7deg at 50% 50%, var(--cobalt) 0 1.6deg, transparent 1.6deg 29deg); mix-blend-mode:screen; opacity:.5; }
.rosette{ position:absolute; z-index:4; pointer-events:none; }
.rosette circle,.rosette path,.rosette ellipse{ }

/* ---- wireframe perspective grid ---- */
.wire{ position:absolute; z-index:5; opacity:.5; mix-blend-mode:screen; }
.wire line{ stroke:#7fa8ff; stroke-width:1; }

/* ---- lightning ---- */
.bolt{ position:absolute; z-index:5; }
.bolt path{ stroke:#fff; fill:none; stroke-width:2.4; filter:drop-shadow(0 0 5px #cfe0ff); }

/* ===================== STICKER ===================== */
.sticker{ position:absolute; z-index:20; background:var(--paper); color:var(--ink);
  padding:8px 8px 6px; width:23%; transform:rotate(-3deg);
  box-shadow:3px 5px 0 rgba(0,0,0,.5); border:1px solid rgba(0,0,0,.2); font-family:var(--grot); }
.sticker .sh{ font-family:var(--disp); font-size:1.5cqw; letter-spacing:.02em; text-transform:uppercase; text-align:center; line-height:1; }
.sticker .globe{ display:block; width:38%; margin:5px auto 4px; }
.sticker .globe circle, .sticker .globe path, .sticker .globe line, .sticker .globe ellipse{ stroke:var(--ink); fill:none; stroke-width:3; }
.sticker .bar{ height:14%; width:88%; margin:0 auto;
  background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 3px, var(--ink) 3px 4px, transparent 4px 7px); }
.sticker .sf{ font-family:var(--mono); font-size:.85cqw; letter-spacing:.18em; text-align:center; margin-top:5px; }

/* ===================== TYPE OVERLAYS ===================== */
.scrawl{ position:absolute; z-index:22; font-family:var(--hand); color:#fff; line-height:.96;
  text-shadow:0 0 1px rgba(0,0,0,.5); transform:rotate(-4deg); }
.scrawl .u{ display:block; height:2px; background:#fff; margin-top:5px; width:70%; }
.jp{ position:absolute; z-index:22; font-family:var(--jp); font-weight:900; writing-mode:vertical-rl;
  letter-spacing:.12em; color:var(--rubine); text-shadow:2px 0 var(--fluo); }
.term{ position:absolute; z-index:22; font-family:var(--mono); font-size:1.05cqw; color:#dfe7d8; line-height:1.7; letter-spacing:.02em; }
.term .er{ color:var(--fluo); }
.term .pmt{ color:var(--cyan); }

/* fluoro marks */
.mark{ position:absolute; z-index:23; pointer-events:none; }
.mark path, .mark line, .mark circle{ stroke:var(--fluo); fill:none; stroke-width:4; filter:drop-shadow(0 0 5px rgba(255,46,151,.7)); }
.mark.fill path, .mark.fill circle{ fill:var(--fluo); stroke:none; }
.eyedrip{ position:absolute; z-index:24; }
.eyedrip path{ fill:var(--fluo); filter:drop-shadow(0 0 6px rgba(255,46,151,.8)); }

/* index tab on poster */
.idx{ position:absolute; top:0; left:0; z-index:25; background:var(--rubine); color:#fff;
  font-family:var(--disp); font-size:2.4cqw; padding:.3cqw 1.1cqw .1cqw; letter-spacing:.02em; }

/* ===================== INK BUILD STRIP ===================== */
.build{ margin-top:60px; border:2px solid var(--ink); }
.build .bh{ display:flex; justify-content:space-between; padding:9px 16px; border-bottom:2px solid var(--ink);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; }
.build .bh .fl{ color:var(--fluo); }
.build .row{ display:flex; }
.build .sw{ flex:1; height:74px; position:relative; border-right:1px solid rgba(0,0,0,.25); }
.build .sw:last-child{ border-right:0; }
.build .sw span{ position:absolute; left:9px; bottom:7px; font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.build .sw.lt span{ color:rgba(0,0,0,.7); } .build .sw.dk span{ color:rgba(255,255,255,.85); }

/* ===================== FOOT ===================== */
.foot{ margin-top:50px; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end;
  border-top:2px solid var(--ink); padding-top:20px; }
.foot .sig{ font-family:var(--disp); text-transform:uppercase; font-size:24px; line-height:.95; }
.foot .sig .fl{ color:var(--fluo); } .foot .sig em{ color:var(--rubine); font-style:normal; }
.foot p{ margin:8px 0 0; font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--ink2); line-height:1.7; max-width:660px; }
.foot .chop{ width:104px; height:104px; border:2px solid var(--fluo); border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:9px; text-align:center; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  box-shadow:0 0 0 4px var(--paper), 0 0 0 6px var(--fluo); }
.footline{ margin-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2);
  border-top:1px solid rgba(0,0,0,.4); padding-top:9px; }

/* ===================== v3 · arcade · tron · real type · glitch×100 ===================== */
.headline{ position:absolute; z-index:33; font-family:var(--disp); text-transform:uppercase; color:#fff; line-height:.8; text-align:center; letter-spacing:.005em;
  text-shadow:4px 0 var(--fluo), -4px 0 var(--cyan), 2px 5px 0 rgba(0,0,0,.5); -webkit-text-stroke:1px rgba(0,0,0,.25); }
.hud{ position:absolute; z-index:34; font-family:'Press Start 2P',monospace; font-size:1.5cqw; color:#fff; line-height:1.8; text-shadow:2px 2px 0 rgba(0,0,0,.75); }
.hud .c{ color:var(--cyan); } .hud .f{ color:var(--fluo); } .hud .r{ color:#ff4a32; }
.blink{ animation:bl 1.1s steps(1) infinite; } @keyframes bl{ 50%{ opacity:0; } }
.tron{ position:absolute; left:0; bottom:0; width:100%; height:34%; z-index:4; overflow:hidden; perspective:190px; perspective-origin:50% -8%; pointer-events:none; }
.tron .sky{ position:absolute; inset:0; background:linear-gradient(transparent 40%, rgba(255,46,151,.16)); }
.tron .hz{ position:absolute; left:0; top:0; width:100%; height:3px; background:var(--fluo); box-shadow:0 0 16px 4px var(--fluo); z-index:2; }
.tron .floor{ position:absolute; left:-50%; width:200%; height:240%; bottom:0; transform-origin:50% 100%; transform:rotateX(82deg);
  background-image:repeating-linear-gradient(90deg, transparent 0 calc(4.16% - 2px), var(--cyan) calc(4.16% - 2px) 4.16%), repeating-linear-gradient(0deg, transparent 0 22px, var(--cyan) 22px 24px);
  filter:drop-shadow(0 0 3px var(--cyan)); opacity:.92; }
.sortband{ position:absolute; z-index:33; pointer-events:none; mix-blend-mode:screen; filter:blur(.4px); }
.cropmk line{ stroke:#fff; stroke-width:1.4; opacity:.85; }
.cropmk{ position:absolute; z-index:35; }

/* ---- masthead tagline + grouped ink build ---- */
.mast .tagline{ font-family:var(--disp); font-size:clamp(26px,4.8vw,62px); line-height:.88; text-transform:uppercase; letter-spacing:.01em; margin:12px 0 2px; color:var(--ink); text-shadow:4px 0 var(--fluo), -4px 0 var(--cobalt); }
.mast .tagline .x{ color:var(--rubine); }
.build .bgrp{ display:flex; }
.build .gcol{ border-right:2px solid var(--ink); display:flex; flex-direction:column; }
.build .gcol:last-child{ border-right:0; }
.build .gcol.stock{ flex:1.1; } .build .gcol.proc{ flex:3; } .build .gcol.fluo{ flex:1.5; }
.build .glab{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px 5px; border-bottom:1px solid rgba(0,0,0,.3); color:var(--ink2); white-space:nowrap; }
.build .glab.fl{ color:var(--fluo); }
.build .gcol .row{ flex:1; }

/* ---- rainbow data-tear + AI-ruins scrawl marks ---- */
.tear.rb{ background:repeating-linear-gradient(0deg, rgba(0,0,0,.6) 0 1.4px, transparent 1.4px 3.6px), linear-gradient(178deg,#16c9e8,#2c46e0 16%,#7a23e0 34%,#ff2e97 52%,#ff4a32 72%,#ffe24a 100%); }
.scribble{ position:absolute; z-index:24; pointer-events:none; }
.scribble path,.scribble line,.scribble circle{ stroke:var(--fluo); fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px rgba(255,46,151,.75)); }
.aberr{ position:absolute; inset:0; z-index:36; pointer-events:none; mix-blend-mode:screen; opacity:.45;
  background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(25,201,232,.12) 2px 3px, transparent 3px 5px, rgba(255,46,151,.12) 5px 6px); }