/* LOYALTY — shared visual system
   Cold War classroom game. 1950s propaganda poster aesthetic. */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Special+Elite&family=Bebas+Neue&family=Courier+Prime:wght@400;700&display=swap');

:root {
  --red:        #B11226;
  --red-deep:   #7A0C19;
  --red-ink:    #9A0F20;
  --ink:        #0E0E0E;
  --ink-soft:   #1f1c19;
  --paper:      #F2E9D8;
  --paper-warm: #ECE0C8;
  --paper-deep: #D9C9A7;
  --gray:       #6b6258;
  --gray-soft:  #b4a995;
  --stamp:      #8B0F20;

  --font-display: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --font-head:    'Oswald', 'Arial Narrow', sans-serif;
  --font-type:    'Special Elite', 'Courier Prime', Courier, monospace;
  --font-mono:    'Courier Prime', Courier, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-type);
  -webkit-font-smoothing: antialiased;
}

/* Halftone overlay used liberally */
.halftone {
  background-image: radial-gradient(circle, var(--ink) 1px, transparent 1.4px);
  background-size: 5px 5px;
  opacity: 0.18;
}
.halftone-red {
  background-image: radial-gradient(circle, var(--red) 1px, transparent 1.4px);
  background-size: 5px 5px;
}

/* Paper grain — subtle noise via layered gradients */
.paper-grain {
  background-color: var(--paper);
  background-image:
    radial-gradient(at 20% 30%, rgba(139,15,32,0.04) 0, transparent 50%),
    radial-gradient(at 80% 70%, rgba(14,14,14,0.05) 0, transparent 50%),
    radial-gradient(at 50% 90%, rgba(139,15,32,0.03) 0, transparent 60%);
}

/* Headline types */
.h-display {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}
.h-condensed {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Rubber-stamp util */
.stamp {
  display: inline-block;
  border: 3px solid var(--stamp);
  color: var(--stamp);
  padding: 4px 12px;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  transform: rotate(-6deg);
  opacity: 0.85;
  background: transparent;
}
.stamp::before {
  content: '';
}

/* Redaction bar */
.redact {
  background: var(--ink);
  color: var(--ink);
  padding: 0 6px;
  user-select: none;
}

/* Print helpers */
@media print {
  body { background: white; }
  .no-print { display: none !important; }
  .page-break { page-break-after: always; }
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 10px 18px;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: all 0.12s ease;
}
.btn:hover { background: var(--red); border-color: var(--red); }
.btn.btn-red { background: var(--red); border-color: var(--red); }
.btn.btn-red:hover { background: var(--ink); border-color: var(--ink); }
.btn.btn-ghost { background: transparent; color: var(--ink); }
.btn.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* Dossier card chrome */
.dossier {
  background: var(--paper-warm);
  border: 2px solid var(--ink);
  position: relative;
}
.dossier::before {
  /* tape strip */
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 110px; height: 22px;
  background: rgba(218,196,150,0.7);
  border: 1px dashed rgba(0,0,0,0.15);
}

/* CLASSIFIED bar */
.classified-bar {
  background: var(--ink);
  color: var(--red);
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  padding: 6px 14px;
  font-size: 12px;
  text-align: center;
}