/* SKOAD Festival — shared poster styles */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@300;400;500;600;700&family=Major+Mono+Display&family=Bagel+Fat+One&family=Rubik+Mono+One&family=Archivo+Black&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  --skoad-green: #00B14F;
  --skoad-green-bright: #2BFF6A;
  --skoad-green-deep: #007A37;
  --ink: #0a0a0a;
  --paper: #f3efe3;
  --paper-warm: #ece5d2;
  --bone: #e8e2d0;
}

.poster {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02";
}

.poster, .poster * { box-sizing: border-box; }

/* ==== Grain texture ==== */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.18;
  mix-blend-mode: overlay;
  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 1.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.grain-strong::before { opacity: 0.32; mix-blend-mode: multiply; }

/* ==== Display utility classes ==== */
.f-anton { font-family: 'Anton', sans-serif; letter-spacing: -0.02em; }
.f-archivo { font-family: 'Archivo Black', sans-serif; letter-spacing: -0.03em; }
.f-bagel { font-family: 'Bagel Fat One', sans-serif; letter-spacing: -0.02em; }
.f-rubik { font-family: 'Rubik Mono One', sans-serif; letter-spacing: -0.04em; }
.f-mono { font-family: 'DM Mono', monospace; letter-spacing: 0; }
.f-major { font-family: 'Major Mono Display', monospace; letter-spacing: 0.02em; }
.f-grotesk { font-family: 'Space Grotesk', sans-serif; }

/* tight headlines */
.tight { line-height: 0.82; }
.uppercase { text-transform: uppercase; }

/* ==== Poster outer card ==== */
.poster-card {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--paper);
}

/* === Tweaks panel === */
.tw-row { display: flex; align-items: center; gap: 8px; }