/* ============================================================
   ICH HASSE MEINE BAND — shared base
   Roh & analog · Tape / Plakat · Gold auf warmem Schwarz
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Newsreader:ital,opsz,wght@0,6..72,200;0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&family=Caveat:wght@500;600&display=swap');

:root{
  /* warm near-black ground */
  --ink:        #14110f;
  --ink-2:      #1b1714;   /* raised panel */
  --ink-3:      #221d18;   /* card / inset */
  --ink-edge:   #0d0b09;   /* deepest, vignette */

  /* paper / ink */
  --cream:      #e8e2d4;
  --cream-2:    #cfc7b6;
  --cream-dim:  rgba(232,226,212,.60);
  --cream-faint:rgba(232,226,212,.34);

  /* gold accent */
  --gold:       #c9a227;
  --gold-br:    #e0b73a;
  --gold-deep:  #8f721a;

  /* sparing "hate" rust — emphasis only */
  --rust:       #a6402a;

  --rule:       rgba(232,226,212,.14);
  --rule-soft:  rgba(232,226,212,.08);
  --gold-rule:  rgba(201,162,39,.34);

  --mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --hand: 'Caveat', cursive;

  --tracking-wide: .42em;
  --tracking-mid:  .22em;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--serif);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- analog film-grain + vignette overlay ---------------- */
.grain,.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
}
.grain{
  opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  background:radial-gradient(120% 90% at 50% 38%, transparent 52%, rgba(13,11,9,.55) 100%);
  z-index:9998;
}

/* ---- shared type primitives ------------------------------ */
.mono{ font-family:var(--mono); }
.tag{
  font-family:var(--mono); font-weight:700;
  font-size:.66rem; letter-spacing:var(--tracking-mid);
  text-transform:uppercase; color:var(--gold);
}
.kicker{
  font-family:var(--mono); font-weight:400;
  font-size:.7rem; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--cream-dim);
}

::selection{ background:var(--gold); color:var(--ink); }

/* tape strip — translucent, slightly skewed */
.tape{
  position:absolute; width:118px; height:30px;
  background:rgba(225,214,180,.16);
  border-left:1px solid rgba(255,255,255,.10);
  border-right:1px solid rgba(0,0,0,.18);
  box-shadow:0 1px 6px rgba(0,0,0,.35);
  backdrop-filter:blur(.5px);
}
.tape::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.05) 6px 7px);
}