/* ======================================================================
   Slide canvas — fixed 1920×1080 for deck rendering.
   Viewport in render.js matches; PNG/PDF output is pixel-accurate.
   ====================================================================== */
.deck-slide {
  width: 1920px;
  height: 1080px;
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
}

/* ======================================================================
   Type primitives
   ====================================================================== */
.headline-cn {
  font-family: var(--font-cn);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
}
.slogan {
  font-family: var(--font-disp);
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}
.mono {
  font-family: var(--font-body);
  letter-spacing: 0.04em;
}
.eyebrow {
  font-family: var(--font-disp);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ======================================================================
   Backgrounds
   ====================================================================== */
.bg-red    { background: var(--red);    color: var(--cream); }
.bg-cream  { background: var(--cream);  color: var(--ink);   }
.bg-ink    { background: var(--ink);    color: var(--cream); }
.bg-deep   { background: var(--deep);   color: var(--cream); }

/* ======================================================================
   Stamps & seals — faux rubber-stamp / Chinese seal aesthetic
   ====================================================================== */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 4px solid currentColor;
  padding: 10px 18px;
  font-family: var(--font-disp);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  transform: rotate(-6deg);
  opacity: 0.92;
}

.seal-cn {
  display: inline-grid;
  place-items: center;
  background: var(--red);
  color: var(--cream);
  font-family: var(--font-cn);
  font-weight: 900;
  line-height: 1;
  box-shadow:
    inset 0 0 0 4px var(--cream),
    inset 0 0 0 6px var(--red);
}

/* ======================================================================
   Poster frame — shared between deck and landing page
   ====================================================================== */
.poster-frame {
  position: relative;
  background: var(--cream);
  border: 4px solid var(--gold);
  overflow: hidden;
}
.poster-frame img,
.poster-frame .poster-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ======================================================================
   Swatches
   ====================================================================== */
.swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-7);
  font-family: var(--font-body);
}
.swatch-hex   { font-size: 22px; letter-spacing: 0.16em; }
.swatch-name  { font-family: var(--font-disp); font-size: 36px; letter-spacing: 0.14em; margin-top: 8px; }
.swatch-note  { font-size: 14px; line-height: 1.5; opacity: 0.85; margin-top: 16px; max-width: 240px; }

/* ======================================================================
   Effects — propaganda-poster pastiche
   ====================================================================== */
/* Red duotone overlay for poster backgrounds. Apply to a wrapper. */
.duotone {
  position: relative;
}
.duotone::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--red);
  mix-blend-mode: multiply;
  z-index: 1;
}
.duotone::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(204,0,0,0.55) 0%, rgba(139,0,0,0.55) 100%);
  mix-blend-mode: lighten;
  z-index: 1;
}
.duotone > * { position: relative; z-index: 2; }

/* SVG-noise grain. Apply to any element with position: relative. */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><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.22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.5;
  z-index: 3;
}

/* Halftone dot pattern */
.halftone {
  background-image: radial-gradient(circle, var(--ink) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
}

/* Masking-tape corner detail for collaged cards */
.tape {
  position: absolute;
  width: 140px;
  height: 32px;
  background: rgba(245, 240, 232, 0.78);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.tape--tl { top: -14px; left: 30px; transform: rotate(-4deg); }
.tape--tr { top: -14px; right: 30px; transform: rotate(5deg); }
.tape--bl { bottom: -14px; left: 30px; transform: rotate(3deg); }
.tape--br { bottom: -14px; right: 30px; transform: rotate(-5deg); }

/* Rules / dividers */
.rule {
  display: block;
  width: 80px;
  height: 4px;
  background: var(--red);
  margin: var(--s-4) 0;
  border: 0;
}
.rule--gold { background: var(--gold); }
.rule--ink  { background: var(--ink);  }

/* Slide page-number footer (used on most slides) */
.page-no {
  position: absolute;
  right: 60px; bottom: 48px;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* Faux browser chrome — wraps the live landing-page iframe on slide 7 */
.chrome {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  background: #1a1a1a;
}
.chrome-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: #2a2a2a;
  color: #aaa;
  font-family: var(--font-body);
  font-size: 14px;
}
.chrome-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #555;
}
.chrome-url {
  margin-left: auto;
  margin-right: auto;
  background: #1a1a1a;
  padding: 6px 16px;
  border-radius: 4px;
  letter-spacing: 0.1em;
}
.chrome-body {
  flex: 1;
  background: var(--red);
}
.chrome-body iframe {
  width: 100%; height: 100%; border: 0; display: block;
}