/* ==========================================================================
   The Run In — Zine edition · colors & type
   Terrace fanzine: risograph inks, newsprint, photocopy texture
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Special+Elite&family=Oswald:wght@400;500;600;700&family=Newsreader:ital,wght@0,400;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Risograph ink colors — imperfect, punchy, from a dodgy print shop in Highbury */
  --riso-red:    #E83530;   /* fluoro red, the Arsenal flag */
  --riso-red-deep: #B3221E;
  --riso-blue:   #3B4EA8;
  --riso-yellow: #F5C518;
  --riso-black:  #1A1713;   /* never pure black — photocopier black */
  --riso-white:  #FAF6EB;   /* pulped-paper off-white */
  --riso-cream:  #F1E9D2;   /* aged paper */
  --riso-tan:    #D8C9A3;
  --riso-pink:   #F5A0A0;

  /* Mood helpers */
  --zine-bg:      var(--riso-cream);
  --zine-paper:   var(--riso-white);
  --zine-ink:     var(--riso-black);
  --zine-accent:  var(--riso-red);
  --zine-hot:     var(--riso-yellow);
  --zine-cold:    var(--riso-blue);

  /* City — they get a dull grey-blue. Sorry. */
  --zine-city:    #6C89A8;

  /* Type */
  --font-hero:     'Anton', 'Impact', 'Oswald', sans-serif;    /* tall, condensed, tabloid */
  --font-block:    'Archivo Black', 'Impact', sans-serif;       /* chunky block headlines */
  --font-news:     'Oswald', 'Bebas Neue', sans-serif;          /* nav, subhead */
  --font-body:     'Newsreader', Georgia, serif;                /* editorial body */
  --font-stamp:    'Special Elite', 'Courier Prime', monospace; /* typewriter stamp */
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* Borders — heavy zine ink */
  --ink-heavy:  3px solid var(--riso-black);
  --ink-med:    2px solid var(--riso-black);
  --ink-hair:   1px solid var(--riso-black);
}

/* Photocopy texture — a subtle noise layer you can apply to any surface */
.zine-grain {
  position: relative;
}
.zine-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: multiply;
  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 values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Misregister — a shadow offset that mimics a badly-registered riso print */
.misreg-red   { text-shadow: 2px 2px 0 var(--riso-red); }
.misreg-blue  { text-shadow: -2px 2px 0 var(--riso-blue); }
.misreg-yellow { text-shadow: 3px 0px 0 var(--riso-yellow); }

/* Torn edge — clip-path jagged */
.torn-bottom {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 96% 100%, 92% calc(100% - 6px), 88% 100%, 84% calc(100% - 4px), 78% 100%, 72% calc(100% - 8px), 66% 100%, 60% calc(100% - 4px), 54% 100%, 48% calc(100% - 7px), 42% 100%, 36% calc(100% - 5px), 30% 100%, 24% calc(100% - 8px), 18% 100%, 12% calc(100% - 4px), 6% 100%, 0 calc(100% - 6px));
}

/* Stamp — a rotated, inky label */
.zine-stamp {
  display: inline-block;
  font-family: var(--font-stamp);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border: 2.5px solid var(--zine-ink);
  color: var(--zine-ink);
  background: transparent;
  transform: rotate(-3deg);
  text-transform: uppercase;
  font-weight: 700;
}
.zine-stamp.red { color: var(--riso-red); border-color: var(--riso-red); }

/* Headline utility */
.zine-hero-hed {
  font-family: var(--font-hero);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.88;
  color: var(--zine-ink);
  text-transform: uppercase;
}

.zine-kicker {
  font-family: var(--font-news);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  color: var(--riso-red);
}

.zine-pull {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--zine-ink);
}

.zine-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--zine-ink);
}