/* ============================================================
   THEATER AN DER MARSCHNERSTRASSE — Colors & Type
   Brand: protest-graphic energy × the emotion of the stage.
   Black / White / a single defiant Red. Rough, hand-set, loud.
   ------------------------------------------------------------
   FONTS — substitutions flagged (see README › Typography):
   - Display  : "Anton"   ≈ rough wood-type poster caps (logo + #DIE WELLE)
   - Headline : "Oswald"  ≈ condensed grotesque sub-heads
   - Text     : "Archivo" ≈ neutral grotesque for Fließtext / UI
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Archivo:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- CORE PALETTE (from the brand sheet) ---------------- */
  --ink:        #000000;   /* CMYK 0/0/0/100  · the void, the stage at dark */
  --red:        #C8101E;   /* CMYK 0/95/85/5  · passion, tension, relevance */
  --concrete:   #C8C4C0;   /* CMYK 10/10/10/20 · printed paper grey */

  /* ---- EXTENDED NEUTRALS (paper & ink derivatives) -------- */
  --paper:      #ECE8E1;   /* warm off-white — the sheet ground */
  --paper-2:    #E0DCD4;   /* a shade deeper, for panels on paper */
  --bone:       #F4F1EB;   /* lightest paper highlight */
  --soot:       #0B0B0C;   /* near-black surface, slightly warm */
  --soot-2:     #161617;   /* raised surface on black */
  --ash:        #2A2A2C;   /* hairlines / dividers on black */
  --smoke:      #6E6A66;   /* muted text on paper */

  /* ---- RED DERIVATIVES ------------------------------------ */
  --red-deep:   #9E0C16;   /* pressed / active */
  --red-bright: #E11522;   /* hover lift on dark */
  --red-wash:   rgba(200,16,30,0.12); /* tint fills */

  /* ---- SEMANTIC: LIGHT (paper) SURFACE -------------------- */
  --bg:            var(--paper);
  --surface:       var(--bone);
  --fg:            var(--ink);
  --fg-muted:      var(--smoke);
  --accent:        var(--red);
  --accent-hover:  var(--red-deep);
  --on-accent:     var(--bone);
  --border:        rgba(0,0,0,0.16);
  --border-strong: var(--ink);

  /* ---- SEMANTIC: DARK (stage) SURFACE --------------------- */
  --bg-dark:        var(--ink);
  --surface-dark:   var(--soot-2);
  --fg-dark:        var(--bone);
  --fg-muted-dark:  #9A9690;
  --border-dark:    var(--ash);

  /* ---- TYPE FAMILIES -------------------------------------- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-head:    'Oswald', 'Arial Narrow', sans-serif;
  --font-text:    'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* ---- TYPE SCALE (poster-loud, big jumps) ---------------- */
  --step-mega: clamp(3.5rem, 11vw, 9rem);   /* hero poster word   */
  --step-xl:   clamp(2.5rem, 6vw, 5rem);    /* page / play title  */
  --step-lg:   clamp(1.9rem, 3.4vw, 3rem);  /* section heads      */
  --step-md:   clamp(1.4rem, 2vw, 2rem);    /* card titles        */
  --step-sm:   1.25rem;
  --step-base: 1.0625rem;                    /* 17px body          */
  --step-xs:   0.8125rem;                    /* 13px meta / eyebrow*/

  --leading-tight: 0.92;
  --leading-head:  1.02;
  --leading-body:  1.6;

  /* ---- SPACING (8px base) --------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* ---- RADII (near-square; this brand is cut, not rounded)  */
  --r-0: 0px;     /* default — hard corners, torn/cut edges    */
  --r-1: 2px;     /* the most softening we allow on UI chrome  */
  --r-pill: 999px;/* only for tiny tags / the social circle    */

  /* ---- BORDERS -------------------------------------------- */
  --rule-hair: 1px solid var(--border);
  --rule-ink:  2px solid var(--ink);
  --rule-red:  3px solid var(--red);

  /* ---- SHADOWS (flat / printed — almost none) ------------- */
  --shadow-none: none;
  --shadow-press: 0 0 0 transparent;               /* default flat */
  --shadow-poster: 6px 6px 0 var(--ink);           /* hard offset block */
  --shadow-poster-red: 6px 6px 0 var(--red);
  --shadow-lift: 0 10px 30px rgba(0,0,0,0.35);     /* sparingly, on dark */

  /* ---- MOTION --------------------------------------------- */
  --ease-cut: cubic-bezier(0.2, 0, 0, 1);   /* snappy, decisive */
  --dur-fast: 120ms;
  --dur:      200ms;
}

/* ============================================================
   ELEMENT DEFAULTS
   ============================================================ */
body {
  font-family: var(--font-text);
  font-size: var(--step-base);
  line-height: var(--leading-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display poster word — the loud one */
.display, h1.poster {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-mega);
  line-height: var(--leading-tight);
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-xl);
  line-height: var(--leading-head);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

h2, .h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--step-lg);
  line-height: var(--leading-head);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-md);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

h4, .h4 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: var(--step-sm);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

p, .body { font-size: var(--step-base); line-height: var(--leading-body); }
.lead { font-size: var(--step-sm); line-height: 1.5; }
small, .small { font-size: var(--step-xs); }

/* Eyebrow / kicker — red, spaced caps. The brand's signature label. */
.eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--red);
}

/* Subhead in red (UNTERÜBERSCHRIFT) */
.subhead {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--red);
}

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-deep); }

/* ============================================================
   TEXTURE — the handmade / letterpress feel.
   Reusable grain + torn-edge utilities (no external images).
   ============================================================ */

/* fine printed grain — layer over any block via class */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.55;
  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.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  background-size: 160px 160px;
}
.grain.on-dark::after { mix-blend-mode: screen; opacity: 0.10; }

/* rough torn-paper bottom edge for black blocks */
.torn-bottom {
  -webkit-mask: linear-gradient(#000 0 0);
  clip-path: polygon(0 0, 100% 0, 100% 92%,
    96% 96%, 92% 90%, 88% 97%, 83% 91%, 78% 98%, 73% 92%, 68% 99%,
    62% 93%, 57% 99%, 52% 92%, 46% 98%, 41% 92%, 36% 99%, 31% 93%,
    26% 98%, 21% 91%, 16% 97%, 11% 91%, 6% 96%, 0 92%);
}

/* brushed red underline (echoes the logo stroke) */
.brush-rule {
  height: 8px; border: 0; margin: 0;
  background: var(--red);
  clip-path: polygon(2% 35%, 12% 20%, 30% 55%, 48% 25%, 66% 60%,
    82% 28%, 96% 55%, 100% 45%, 99% 75%, 84% 60%, 66% 88%, 48% 58%,
    30% 86%, 14% 60%, 3% 78%);
}