/* ============================================================
   DEAD AIR - Benji Margolis's basement wall
   Site theme for the static pages (cards have their own css)
   Aesthetic: dim basement wall, pinned/taped evidence,
   typewriter posts, handwritten marker notes, amber CRT glow.
   ============================================================ */

:root{
  /* paper + ink */
  --wall:#14110d;          /* dim basement wall */
  --wall-2:#1d1812;        /* lighter wall patch */
  --paper:#e8e2d0;         /* aged newsprint cream */
  --paper-2:#ded6c0;       /* shadowed paper */
  --manila:#cdb891;        /* folder / index card */
  --ink:#1a1714;           /* typed/printed ink */
  --ink-soft:#48402f;      /* faded ink */
  --redact:#15110d;        /* redaction bar */
  /* signal + accents */
  --amber:#ffb000;         /* pirate-radio / CRT glow */
  --amber-dim:#a8752a;     /* amber, calmed down */
  --verified:#5f8f7a;      /* "corroborated" green */
  --marker:#c0392b;        /* Benji's red marker */
  --tape:rgba(222,205,128,.42);
  /* type */
  --type:'Courier Prime',ui-monospace,'Cascadia Mono',Menlo,monospace; /* Benji typed it himself */
  --stamp:'Special Elite','Courier Prime',monospace;                   /* typed/stamped headers */
  --hand:'Caveat','Bradley Hand',cursive;                              /* his handwriting */
  --news:'PT Serif',Georgia,'Times New Roman',serif;                   /* forwarded clippings */
  --headline:'Oswald','Arial Narrow',sans-serif;                       /* clipping headlines */
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--wall);
  color:var(--paper);
  font-family:var(--type);
  font-size:16px;
  line-height:1.7;
  /* wall texture: uneven warm light + grain, vignette toward the edges */
  background-image:
    radial-gradient(120% 90% at 50% -10%, rgba(255,176,0,.05), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.55), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  background-attachment:fixed;
  min-height:100vh;
}

/* faint static CRT veil over everything (no animation -> reduced-motion safe) */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.06) 2px 3px);
  mix-blend-mode:multiply;
}

a{ color:var(--amber); text-decoration:none; border-bottom:1px dotted var(--amber-dim); }
a:hover{ color:#ffd27a; border-bottom-color:#ffd27a; }

/* ---------- layout ---------- */
.wrap{ max-width:880px; margin:0 auto; padding:34px 20px 120px; position:relative; z-index:1; }

/* ---------- masthead / homemade header ---------- */
.masthead{ margin:6px 0 30px; }
.masthead .site-id{
  font-family:var(--stamp); letter-spacing:.06em; line-height:1.05;
  font-size:clamp(30px,7vw,56px); color:var(--paper);
  text-shadow:0 0 18px rgba(255,176,0,.16), 1px 2px 0 rgba(0,0,0,.5);
  margin:0;
}
.masthead .site-id .on{ color:var(--amber); }
.masthead .tag{
  font-family:var(--type); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber-dim); margin-top:8px;
}
.masthead .by{ font-family:var(--hand); font-size:22px; color:var(--marker); transform:rotate(-1.4deg); display:inline-block; margin-top:6px; }

/* homemade nav: looks like tabbed file dividers */
nav.tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; border-bottom:1px solid rgba(255,176,0,.18); padding-bottom:14px; }
nav.tabs a{
  font-family:var(--type); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--manila); color:var(--ink); border:1px solid #00000033; border-bottom:none;
  padding:7px 12px 6px; border-radius:3px 3px 0 0; transform:translateY(2px) rotate(-.4deg);
  box-shadow:0 -2px 6px rgba(0,0,0,.25);
}
nav.tabs a:hover{ background:#dcc8a0; color:#000; }
nav.tabs a[aria-current]{ background:var(--amber); color:#1a1714; transform:translateY(0); }

/* ---------- headings ---------- */
h1,h2,h3{ font-family:var(--stamp); color:var(--paper); line-height:1.15; letter-spacing:.01em; }
h1{ font-size:clamp(26px,5vw,38px); margin:.2em 0 .5em; }
h2{ font-size:22px; margin:1.8em 0 .5em; color:var(--amber); text-shadow:0 0 10px rgba(255,176,0,.12); }
h2::before{ content:'▸ '; color:var(--amber-dim); }
h3{ font-size:17px; margin:1.4em 0 .4em; color:#e8d9b8; }

/* ---------- Benji's typed body ("the sheet") ---------- */
.sheet{
  background:var(--paper); color:var(--ink);
  border-radius:2px; padding:30px 32px; margin:22px 0;
  box-shadow:0 10px 26px rgba(0,0,0,.5), inset 0 0 60px rgba(120,90,40,.06);
  position:relative; transform:rotate(-.25deg);
  background-image:linear-gradient(180deg, rgba(0,0,0,.04), transparent 12px);
}
.sheet::before{ /* a strip of tape at the top */
  content:''; position:absolute; top:-12px; left:50%; width:120px; height:26px; transform:translateX(-50%) rotate(-1.5deg);
  background:var(--tape); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.sheet h1,.sheet h2,.sheet h3{ color:var(--ink); text-shadow:none; }
.sheet h2{ color:#7a3b18; } .sheet h2::before{ color:#a8752a; }
.sheet p,.sheet li{ color:var(--ink); }
.sheet a{ color:#9a5a14; border-bottom-color:#c79a3f; }
.sheet a:hover{ color:#c0392b; }

/* ---------- Benji's handwritten margin notes ---------- */
.scrawl{
  font-family:var(--hand); color:var(--marker); font-size:21px; line-height:1.35;
  transform:rotate(-1.6deg); display:block; margin:14px 0; padding-left:6px;
}
.scrawl.tilt-r{ transform:rotate(1.4deg); }
.scrawl::before{ content:'↳ '; opacity:.6; }
em.note{ font-family:var(--hand); color:var(--marker); font-size:1.25em; font-style:normal; }

/* ---------- forwarded evidence artifacts ---------- */
/* generic pinned artifact */
.artifact{ position:relative; margin:26px 0; padding:22px 22px 18px; border-radius:2px;
  box-shadow:0 8px 20px rgba(0,0,0,.45); }
.artifact .pin{ position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ff6b5e, #9e1b10 70%);
  box-shadow:0 2px 4px rgba(0,0,0,.5); }
.artifact .src{ font-family:var(--type); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; margin-bottom:8px; }

/* newspaper clipping */
.clipping{ background:var(--paper-2); color:var(--ink); transform:rotate(.5deg);
  font-family:var(--news); border:1px solid #b9ad8e; }
.clipping .kicker{ font-family:var(--headline); text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:#6b3a18; }
.clipping .hed{ font-family:var(--headline); font-weight:700; font-size:clamp(20px,3.4vw,28px); line-height:1.05; margin:4px 0 6px; color:#1a1410; }
.clipping .byline{ font-family:var(--news); font-style:italic; font-size:12px; color:#5a5240; border-bottom:1px solid #b9ad8e; padding-bottom:8px; margin-bottom:10px; }
.clipping p{ font-size:14.5px; column-gap:22px; }
.clipping.two-col p{ columns:2; }

/* intercept / audio transcript - looks like a thermal/teletype printout w/ amber edge */
.intercept{ background:#100d09; color:#ffd9a0; border:1px solid rgba(255,176,0,.3);
  font-family:var(--type); transform:rotate(-.4deg);
  box-shadow:0 8px 20px rgba(0,0,0,.6), inset 0 0 40px rgba(255,176,0,.04); }
.intercept .src{ color:var(--amber); opacity:.85; }
.intercept .meta{ font-size:10.5px; color:var(--amber-dim); letter-spacing:.1em; margin-bottom:10px; }
.intercept p,.intercept .line{ color:#f0d6a6; font-size:14px; }
.intercept .ts{ color:var(--amber-dim); }   /* timestamps */

/* whistleblower / official document - manila + monospace + stamps */
.document{ background:var(--manila); color:#211a10; border:1px solid #9c8a63; transform:rotate(-.6deg);
  font-family:var(--type); }
.document .src{ color:#5a4a28; }
.document .doc-head{ display:flex; justify-content:space-between; gap:12px; font-size:11px; letter-spacing:.08em;
  border-bottom:1px dashed #8a7847; padding-bottom:8px; margin-bottom:12px; text-transform:uppercase; }
.document p,.document li{ font-size:13.5px; }

/* witness report - index card, lined */
.witness{ background:repeating-linear-gradient(180deg,#f3eede 0 27px,#dCe3e8 27px 28px);
  color:#1a1714; border:1px solid #c3b58f; transform:rotate(.4deg); font-family:var(--news); }
.witness .src{ color:#6b5a32; }

/* ---------- stamps + redaction ---------- */
.stamp{ font-family:var(--stamp); color:var(--marker); border:2px solid var(--marker);
  display:inline-block; padding:2px 10px; letter-spacing:.18em; text-transform:uppercase; font-size:13px;
  transform:rotate(-7deg); opacity:.82; border-radius:2px; box-shadow:0 0 0 2px rgba(192,57,43,.08); }
.stamp.green{ color:var(--verified); border-color:var(--verified); }
.redact{ background:var(--redact); color:var(--redact); border-radius:1px; padding:0 .25em;
  user-select:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.6); }
.redact::selection{ background:var(--redact); color:var(--redact); }

/* ---------- amber "signal" callout / CRT box ---------- */
.signal-box{ border:1px solid rgba(255,176,0,.4); background:rgba(255,176,0,.04);
  padding:18px 20px; margin:24px 0; border-radius:2px; box-shadow:inset 0 0 30px rgba(255,176,0,.05); }
.signal-box .label{ font-family:var(--type); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); }
.signal-box p{ color:#f0d6a6; }

/* ---------- misc ---------- */
blockquote{ border-left:3px solid var(--amber-dim); margin:18px 0; padding:4px 0 4px 16px; color:#e8d9b8; font-style:italic; }
hr{ border:none; border-top:1px dashed rgba(255,176,0,.2); margin:34px 0; }
.small{ font-size:12.5px; color:var(--amber-dim); }
.center{ text-align:center; }
code,.mono{ font-family:var(--type); }

footer.wall-footer{ margin-top:60px; padding-top:18px; border-top:1px solid rgba(255,176,0,.16);
  font-family:var(--type); font-size:11.5px; letter-spacing:.1em; color:var(--amber-dim);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; text-transform:uppercase; }

/* ---------- mobile ---------- */
@media (max-width:640px){
  .wrap{ padding:24px 14px 90px; }
  .sheet{ padding:22px 18px; }
  .clipping.two-col p{ columns:1; }
  nav.tabs{ gap:6px; }
}

/* ---------- reduced motion: kill any transforms that read as jitter ---------- */
@media (prefers-reduced-motion: reduce){
  .sheet,.artifact,.clipping,.intercept,.document,.witness,.scrawl,.scrawl.tilt-r,.stamp,nav.tabs a{ transform:none !important; }
}