/*
Theme Name: SIGNAL LOST
Theme URI: https://signallost.erf.studio
Author: Erf Talebi
Author URI: https://erf.studio
Description: Labour-history archive as numbered dossiers. Riso protest-poster language: flat vermillion ink, typewriter voice, condensed display, file furniture. Copyright (c) 2026 Erfan Talebi.
Version: 0.1.0
License: GPL v2 or later
Text Domain: signal-lost
*/

/* ============================================================
   TOKENS — poster inks. Red is ink: flat fields allowed.
   ============================================================ */
:root{
  --sl-black:#0a0908;
  --sl-black-2:#14110e;
  --sl-bone:#e6dfcc;
  --sl-bone-dim:#9d977f;
  --sl-bone-faint:#57523f;
  --sl-red:#da2f20;
  --sl-red-deep:#8a1e14;
  --sl-amber:#d7a021;
  --sl-ink:#1a0808;          /* black ink used ON the red field */
  --sl-ink-dim:#4a1114;

  --sl-display:'Anton','Arial Narrow Bold',sans-serif;
  --sl-type:'Special Elite','Courier Prime',ui-monospace,monospace;
  --sl-mono:'Courier Prime',ui-monospace,monospace;
  --sl-pixel:'VT323',ui-monospace,monospace;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:1rem; --sp-4:1.5rem;
  --sp-5:2.5rem; --sp-6:4rem; --sp-7:6rem; --sp-8:9rem;
  --gutter:clamp(1.1rem,4.5vw,3.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--sl-black);color:var(--sl-bone);
  font-family:var(--sl-type);font-size:clamp(15px,1.05vw,17px);
  line-height:1.7;overflow-x:hidden;
}
::selection{background:var(--sl-red);color:var(--sl-bone)}
a{color:inherit}
img{max-width:100%;height:auto}

.sl-wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter);position:relative}

/* ============================================================
   PAPER TOOTH — xerox grain over everything
   ============================================================ */
.sl-grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.07;mix-blend-mode:screen;
  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.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:sl-grain 850ms steps(3) infinite}
@keyframes sl-grain{0%{transform:translate(0,0)}33%{transform:translate(-2.5%,2%)}66%{transform:translate(2%,-2.5%)}100%{transform:translate(-1%,1%)}}

/* ============================================================
   CORNER LABELS — file furniture. Two palettes: on-red (hero
   pages set .sl-on-red on body via template) and on-black.
   They hand off once you read (body.sl-scrolled).
   ============================================================ */
.sl-corner{position:fixed;z-index:60;font-family:var(--sl-type);font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sl-bone-faint);
  pointer-events:none;line-height:1.55;transition:opacity .4s var(--ease)}
.sl-corner b{color:var(--sl-red);font-weight:400}
body.sl-on-red .sl-corner{color:var(--sl-ink)}
body.sl-on-red .sl-corner b{color:var(--sl-red-deep)}
body.sl-scrolled .sl-corner{opacity:0}
.sl-corner--tl{top:var(--sp-3);left:var(--gutter)}
.sl-corner--tr{top:var(--sp-3);right:var(--gutter);text-align:right}
.sl-corner--bl{bottom:var(--sp-3);left:var(--gutter)}
.sl-corner--br{bottom:var(--sp-3);right:var(--gutter);text-align:right}
@media(max-width:600px){.sl-corner{font-size:9px;letter-spacing:.14em}.sl-corner--bl,.sl-corner--br{display:none}}

/* ============================================================
   SHARED VOICE
   ============================================================ */
.sl-display{font-family:var(--sl-display);text-transform:uppercase;line-height:.94;
  letter-spacing:.005em;font-weight:400;color:var(--sl-bone)}

/* rubber stamp — grunge-masked, rotate at point of use */
.sl-stamp{display:inline-block;font-family:var(--sl-display);text-transform:uppercase;
  color:var(--sl-red);border:3px solid var(--sl-red);padding:.18em .55em;
  letter-spacing:.14em;font-size:clamp(.9rem,1.6vw,1.25rem);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.72 0.28'/></filter><rect width='120' height='60' filter='url(%23r)'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.72 0.28'/></filter><rect width='120' height='60' filter='url(%23r)'/></svg>");
  -webkit-mask-size:120px 60px;mask-size:120px 60px}
.sl-stamp--dim{color:var(--sl-bone-faint);border-color:var(--sl-bone-faint)}

/* marquee strip — repetition wall (plain HTML widget-friendly) */
.sl-marquee{border-top:1px solid var(--sl-bone-faint);border-bottom:1px solid var(--sl-bone-faint);
  overflow:hidden;white-space:nowrap;padding:.45em 0;position:relative;z-index:5;background:var(--sl-black)}
.sl-marquee__inner{display:inline-block;animation:sl-tick 26s linear infinite;will-change:transform}
.sl-marquee span{font-family:var(--sl-display);text-transform:uppercase;
  font-size:clamp(.95rem,1.6vw,1.35rem);color:var(--sl-red);letter-spacing:.10em;padding-right:.9em}
.sl-marquee i{font-style:normal;color:var(--sl-bone-faint)}
@keyframes sl-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* the red plate — THE FILE ON US section ground */
.sl-plate{background:var(--sl-red);color:var(--sl-ink)}
.sl-plate ::selection{background:var(--sl-ink);color:var(--sl-red)}

.sl-foot{border-top:1px solid var(--sl-bone-faint);padding:var(--sp-5) 0 var(--sp-6);text-align:center;
  color:var(--sl-bone-faint);font-size:12px;letter-spacing:.3em;text-transform:uppercase}

/* ============================================================
   DOSSIER SINGLE (single-sl_dossier.php)
   ============================================================ */
.sl-dossier{max-width:980px;margin:0 auto;padding:0 var(--gutter)}
.sl-back{display:inline-block;margin:calc(var(--sp-3) + 2.2rem) 0 0;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--sl-bone-dim);
  text-decoration:none;border-bottom:1px solid var(--sl-bone-faint);padding-bottom:.2em}
.sl-back:hover{color:var(--sl-red)}

.sl-dhead{padding:var(--sp-6) 0 var(--sp-5);border-bottom:1px solid var(--sl-bone-faint);position:relative}
.sl-dhead__no{font-family:var(--sl-pixel);color:var(--sl-amber);font-size:clamp(1.6rem,3vw,2.4rem)}
.sl-dhead__subject{margin:.1em 0 .18em;font-size:clamp(3rem,9vw,7rem)}
.sl-dhead__meta{display:flex;gap:1.8em;flex-wrap:wrap;color:var(--sl-bone-dim);font-size:clamp(13px,1.1vw,15px)}
.sl-dhead__meta .yr{color:var(--sl-amber);font-family:var(--sl-mono)}
.sl-dhead__stamp{position:absolute;right:0;top:var(--sp-6);transform:rotate(7deg)}
@media(max-width:700px){.sl-dhead__stamp{position:static;transform:rotate(-4deg);margin-top:var(--sp-3)}}

.sl-essay{padding:var(--sp-6) 0;max-width:68ch}
.sl-essay h2{font-family:var(--sl-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2rem);color:var(--sl-bone);margin:var(--sp-5) 0 var(--sp-3);letter-spacing:.03em}
.sl-essay p{margin:0 0 var(--sp-4)}

.sl-slip{margin:var(--sp-5) 0 var(--sp-7);border:2px dashed var(--sl-bone-faint);padding:var(--sp-4) var(--sp-5);
  display:flex;justify-content:space-between;align-items:center;gap:1.5em;flex-wrap:wrap;
  text-decoration:none;transition:border-color .2s}
.sl-slip:hover{border-color:var(--sl-red)}
.sl-slip__label{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--sl-bone-faint)}
.sl-slip__next{font-family:var(--sl-display);text-transform:uppercase;font-size:clamp(1.2rem,2.4vw,1.8rem);color:var(--sl-bone)}
.sl-slip__next b{color:var(--sl-red);font-weight:400}
.sl-slip__stamp{font-family:var(--sl-type);letter-spacing:.2em;color:var(--sl-bone-dim);font-size:12px;text-transform:uppercase}

@media(prefers-reduced-motion:reduce){
  .sl-grain,.sl-marquee__inner{animation:none}
}