/* ============================================================
   ON RECORD — black + high-vis yellow advocacy site
   Design language pulled from the reference set:
   - Cards Against Humanity: #000 felt, white "dealt" cards with 2px
     inset borders, scatter, one heavy weight, accent = border only,
     stark black<->white/yellow polarity flips, pill buttons.
   - Eat Real Food / André Cândido: monospace tracked section labels,
     huge tight display, one chromatic "highlighter" event.
   - ORYZO: zero drop shadows, full-bleed, rotated edge label, scroll prompt.
   ============================================================ */

:root {
  --black: #000000;          /* table felt */
  --paper: #ffffff;          /* card face / text on black */
  --hv-yellow: #ffec00;      /* high-vis yellow — the one loud accent */
  --grey: #9a9a9a;
  --line: #2a2a2a;

  --font-display: "Archivo", "Arial Black", Helvetica, sans-serif;
  --font-body: "Archivo", Helvetica, system-ui, -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Gotham is a commercial font (not web-loadable for free); Montserrat is the closest free match.
     If you have licensed Gotham web fonts, add them via @font-face and prepend "Gotham", here. */
  --font-petition: "Montserrat", "Archivo", Helvetica, system-ui, sans-serif;

  --maxw: 1180px;
  --pill: 40px;
  --card-radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 6px 6px;
}

/* scanline overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.07) 3px);
  z-index: 9999;
  mix-blend-mode: multiply;
}

a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--hv-yellow); color: var(--black);
  padding: 10px 16px; z-index: 10001; font-weight: 700;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------- Eyebrow / section label (monospace pill tag) ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--hv-yellow);
  color: var(--black);
  padding: 7px 16px;
  border-radius: 100px;
}
.eyebrow--ghost { background: transparent; color: var(--hv-yellow); border: 1px solid var(--hv-yellow); }

/* ---------- Buttons (pill, 2px inset border system) ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
  border-radius: var(--pill);
  padding: 15px 32px;
  transition: transform .12s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-yellow { background: var(--hv-yellow); color: var(--black); }
.btn-yellow:hover { background: var(--paper); }
/* outline = 2px inset border, no stroke (CAH) */
.btn-outline {
  background: transparent; color: var(--paper);
  box-shadow: inset 0 0 0 2px var(--paper);
}
.btn-outline:hover { background: var(--paper); color: var(--black); }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-lg { padding: 18px 38px; font-size: 18px; }
.btn-block { display: block; width: 100%; }

/* ---------- Vertical rotated edge label (ORYZO) ---------- */
.edge-label {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 8px 4px;
  z-index: 400;
  pointer-events: none;
}
@media (max-width: 800px) { .edge-label { display: none; } }

/* ---------- Pop-up ---------- */
.popup-overlay[hidden] { display: none !important; }
.popup-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 10000;
}
.popup {
  position: relative;
  background: var(--black);
  box-shadow: inset 0 0 0 3px var(--hv-yellow);
  border-radius: var(--card-radius);
  max-width: 460px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  padding: 30px 26px 24px;
}
.popup-title { font-size: clamp(24px, 6vw, 34px); margin-bottom: 12px; }
.popup-body { font-size: 15px; margin: 0 0 16px; }
/* form sits on a white card inside the pop-up: dark labels, compact spacing */
.popup-form .field { margin-bottom: 10px; }
.popup-form .field label {
  color: #333;
  font-size: 11px; margin-bottom: 4px;
}
.popup-form .field input { padding: 11px 12px; }
.popup-form .btn { margin-top: 8px; }
.popup-dismiss { margin-top: 12px; }
.popup-close {
  position: absolute; top: 8px; right: 14px;
  background: none; border: none; color: var(--paper);
  font-size: 34px; line-height: 1; cursor: pointer;
}
.popup-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 7vw, 42px);
  line-height: 0.92; text-transform: uppercase;
  margin: 0 0 18px; color: var(--hv-yellow);
}
.popup-body { margin: 0 0 16px; font-size: 16px; }
.popup-stop {
  font-family: var(--font-display);
  font-size: 26px; text-transform: uppercase; margin: 0 0 20px;
}
.popup-cta { width: 100%; }
.popup-dismiss {
  display: block; width: 100%; margin-top: 14px;
  background: none; border: none; color: var(--grey);
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.05em; text-decoration: underline; cursor: pointer;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: rgba(0,0,0,0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(4px);
}
.wordmark {
  font-family: var(--font-display);
  font-size: 15px; letter-spacing: 0.02em; line-height: 1.05;
  text-decoration: none; color: var(--paper);
  text-transform: uppercase;
  max-width: 62%;
}
.nav .btn { flex-shrink: 0; }
@media (max-width: 560px) { .wordmark { font-size: 12px; } }

/* ---------- Hero ---------- */
.hero { padding-bottom: 24px; overflow: hidden; }
.banner-strip {
  background: var(--hv-yellow); color: var(--black);
  transform: rotate(-2.2deg) scale(1.06);
  margin: 28px 0 44px; padding: 12px 0;
  white-space: nowrap; overflow: hidden;
  border-top: 3px solid var(--black); border-bottom: 3px solid var(--black);
}
.banner-strip span {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(20px, 4vw, 30px);
  text-transform: uppercase;
  animation: marquee 26s linear infinite;
}
@keyframes marquee { from { transform: translateX(0);} to { transform: translateX(-50%);} }

.hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.hero-eyebrow { margin-bottom: 22px; }
.hero-head {
  font-family: var(--font-display);
  font-size: clamp(44px, 10vw, 104px);
  line-height: 0.9; text-transform: uppercase;
  margin: 0 0 24px;
}
.hero-frame { max-width: 640px; font-size: 18px; margin: 0 0 30px; }
.scroll-prompt {
  margin-top: 28px; color: var(--hv-yellow);
  font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px;
}

/* ---------- Card wall ---------- */
.wall-section { padding: 26px 16px 56px; }
.wall-head {
  max-width: var(--maxw); margin: 0 auto 30px; padding: 0 6px;
}
.wall-head h2,
.wall-head p {
  font-family: var(--font-display);
  font-size: clamp(28px, 6vw, 54px);
  line-height: 0.92; text-transform: uppercase;
  margin: 14px 0 0;
}
.wall {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 30px;
}

/* slot wraps each card so the deal-in entrance and the float/flip don't fight */
.card-slot {
  animation: deal .55s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay: var(--deal-delay, 0s);
}
@keyframes deal {
  0%   { opacity: 0; transform: translateY(30px) rotate(var(--deal-rot, -5deg)) scale(.92); }
  100% { opacity: 1; transform: none; }
}

.card {
  position: relative; min-height: 340px;
  perspective: 1300px; cursor: pointer;
  will-change: transform;
  animation: drift var(--dur, 9s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.card:hover, .card:focus-within, .card.flipped { animation-play-state: paused; }
/* gentle float, minimal rotation so the text stays easy to read */
@keyframes drift {
  0%   { transform: translate(0,0) rotate(var(--rot,0deg)); }
  50%  { transform: translate(var(--dx,6px), var(--dy,-12px)) rotate(calc(var(--rot,0deg) - var(--dr,1deg))); }
  100% { transform: translate(0,0) rotate(var(--rot,0deg)); }
}

.card-inner {
  position: relative; width: 100%; min-height: 340px;
  transition: transform .5s ease; transform-style: preserve-3d;
}
.card.flipped .card-inner { transform: rotateY(180deg); }

.card-face {
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  padding: 24px; display: flex; flex-direction: column;
  border-radius: var(--card-radius);
}
/* front defines the card height (in normal flow); back is overlaid */
.card-front {
  position: relative;
  min-height: 340px;
  background: var(--paper); color: var(--black);
  box-shadow: inset 0 0 0 3px var(--black);
}
.card-back {
  position: absolute; inset: 0; height: 100%;
}
/* every 3rd card is a high-vis accent card (border only) */
.card-slot:nth-child(3n) .card-front { box-shadow: inset 0 0 0 5px var(--hv-yellow); }

/* photo slot at the top of every card */
.card-photo {
  position: relative;
  width: 100%; height: 132px;
  border-radius: 8px;
  margin-bottom: 18px;
  background: #1a1a1a;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.card-photo .photo-ph {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--hv-yellow);
  /* faint halftone fill so the empty slot still looks intentional */
  background-image: radial-gradient(rgba(255,236,0,0.16) 1.5px, transparent 1.5px);
  background-size: 7px 7px;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.card-tag {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 12px; color: #555;
}
.card-claim {
  font-family: var(--font-display);
  font-size: 23px; line-height: 1.08; text-transform: uppercase;
  margin: 0; color: var(--black);
}
/* front actions: "Tap for more" pill + "Check for yourself" link, side by side */
.card-actions {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.card-hint {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--black); color: var(--hv-yellow);
  padding: 8px 14px; border-radius: 100px;
}
.card-check {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none;
  background: var(--hv-yellow); color: var(--black);
  box-shadow: inset 0 0 0 2px var(--black);
  padding: 8px 14px; border-radius: 100px;
}
.card-check--dead { opacity: 0.45; cursor: default; }

/* back: black face, yellow inset border, polarity inverted */
.card-back {
  background: var(--black); color: var(--paper);
  box-shadow: inset 0 0 0 3px var(--hv-yellow);
  transform: rotateY(180deg);
  justify-content: flex-start;
}
.card-back .card-tag { color: var(--hv-yellow); }
.card-desc { font-size: 17px; line-height: 1.45; margin: 14px 0 16px; }
.card-source { margin-top: auto; font-family: var(--font-mono); font-weight: 700; }
/* big "View source" button: reverse colour of the back (paper on black) */
.card-source-btn {
  display: inline-block;
  font-size: 15px; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  background: var(--paper); color: var(--black);
  padding: 14px 26px; border-radius: 100px;
}
.card-source .pending { color: var(--grey); font-style: italic; font-weight: 400; font-size: 13px; }
.card-date { display: block; color: var(--grey); font-weight: 400; font-size: 13px; margin-top: 8px; }

/* ---------- "What they took" slot machine + random card reveal ---------- */
.slot-overlay[hidden], .rcard-overlay[hidden] { display: none !important; }
.slot-overlay {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(0,0,0,0.94);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.slot-box {
  width: 100%; max-width: 460px; text-align: center;
  background: var(--black);
  box-shadow: inset 0 0 0 3px var(--hv-yellow);
  border-radius: var(--card-radius);
  padding: 28px 22px;
}
.slot-eyebrow {
  font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 11px; font-weight: 700; color: var(--hv-yellow);
}
.slot-head {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(20px, 5.5vw, 28px); line-height: 1.02; margin: 10px 0 20px;
}
.slot-reels { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.reel {
  flex: 1; max-width: 132px; height: 60px; overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 3px var(--hv-yellow);
  border-radius: 8px;
}
.reel-strip { will-change: transform; }
.reel-cell {
  height: 60px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 14px; line-height: 1; color: var(--black);
  padding: 0 4px; text-align: center; white-space: nowrap;
}
.reel-cell--hit { color: #cc0000; }
.slot-result {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(17px, 4.6vw, 24px); line-height: 1.05; color: var(--hv-yellow);
  min-height: 1.2em; margin: 0;
  opacity: 0; transform: scale(.9);
  transition: opacity .3s ease, transform .3s ease;
}
.slot-result.show { opacity: 1; transform: scale(1); }

.rcard-overlay {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(0,0,0,0.9);
  display: flex; align-items: center; justify-content: center; padding: 26px;
}
.rcard-close {
  position: absolute; top: 14px; right: 18px;
  background: none; border: none; color: var(--paper);
  font-size: 36px; line-height: 1; cursor: pointer; z-index: 2;
}
.rcard-mount { width: 100%; max-width: 360px; }
.rcard-mount .card { animation: none; }
.rcard-sign { display: block; width: 100%; margin: 20px auto 0; }

/* ---------- Closing frame lines (YELLOW inversion band) ---------- */
.closing {
  background: var(--hv-yellow); color: var(--black);
  text-align: center; padding: 70px 22px;
}
.closing-line {
  font-family: var(--font-display);
  font-size: clamp(30px, 6.5vw, 60px);
  line-height: 0.98; text-transform: uppercase;
  margin: 0 auto 18px; max-width: 900px;
}
.closing-line--alt { margin-bottom: 0; opacity: 0.78; }

/* ---------- Petition ---------- */
.petition { padding: 70px 22px 80px; }
.petition-inner { max-width: 700px; margin: 0 auto; }
.petition-head {
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 60px);
  line-height: 0.92; text-transform: uppercase; margin: 16px 0 24px;
}
.petition-statement { font-size: 17px; margin-bottom: 30px; }
.petition-statement ul { padding-left: 20px; }
.petition-statement li { margin-bottom: 6px; }

/* form sits on a white dealt card */
.petition-form {
  background: var(--paper); color: var(--black);
  box-shadow: inset 0 0 0 3px var(--black);
  border-radius: var(--card-radius);
  padding: 30px 28px;
}
/* Honeypot: hidden trap field for bots. Real people never see or fill it;
   anything submitted in it is treated as a bot and discarded server-side. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.field { margin-bottom: 16px; }
.field label {
  display: block; font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px;
  margin-bottom: 7px; color: #333;
}
.field input {
  width: 100%; padding: 14px;
  background: #f4f4f0; color: var(--black);
  border: 2px solid var(--black); border-radius: 8px;
  font-family: var(--font-petition); font-size: 16px;
}
.field input:focus { outline: none; border-color: var(--hv-yellow); box-shadow: inset 0 0 0 2px var(--hv-yellow); }
.field input.invalid { border-color: #d50000; }
.form-error { margin-top: 12px; color: #d50000; font-weight: 600; }
.form-note { margin: 14px 0 0; font-family: var(--font-mono); font-size: 11px; color: #777; text-align: center; }

.field-choice .choice-label {
  display: block; font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 16px;
  line-height: 1.4; margin: 0 0 8px; color: #333;
}
.choice-options { display: flex; gap: 24px; }
.choice-option {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-petition); font-size: 18px; font-weight: 600; cursor: pointer;
}
.choice-option input[type="radio"] {
  width: 24px; height: 24px; margin: 0; flex: none;
  accent-color: var(--black); cursor: pointer;
}

.signed {
  background: var(--black); color: var(--paper);
  box-shadow: inset 0 0 0 3px var(--hv-yellow);
  border-radius: var(--card-radius);
  padding: 34px 28px;
}
.signed-head {
  font-family: var(--font-display);
  font-size: clamp(34px, 8vw, 60px); text-transform: uppercase;
  color: var(--hv-yellow); margin: 0 0 16px; line-height: 0.92;
}
.signed-share { font-weight: 800; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.share-row .btn { flex: 1 1 auto; }

/* ---------- Footer ---------- */
.footer-cta {
  display: block; background: var(--hv-yellow); color: var(--black);
  text-align: center; text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 40px); text-transform: uppercase;
  padding: 24px 18px;
}
.footer-fine {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 18px 22px 30px; font-family: var(--font-mono); font-size: 12px;
  color: var(--grey); max-width: var(--maxw); margin: 0 auto;
}
.footer-fine a { color: var(--grey); }

/* ---------- Privacy page ---------- */
.doc { max-width: 720px; margin: 0 auto; padding: 44px 22px 80px; }
.doc h1 { font-family: var(--font-display); font-size: clamp(34px, 8vw, 60px); text-transform: uppercase; margin: 0 0 28px; }
.doc h2 { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 15px; margin: 32px 0 10px; color: var(--hv-yellow); }
.doc a { color: var(--hv-yellow); }
.doc .back { display: inline-block; margin-bottom: 30px; font-family: var(--font-mono); font-weight: 700; }

/* ---------- Motion / accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .card { animation: none !important; }
  .banner-strip span { animation: none !important; }
  html { scroll-behavior: auto; }
}

@media (max-width: 760px) {
  .wall { grid-template-columns: 1fr; gap: 20px; max-width: 460px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .card, .card-inner { min-height: 320px; }
  .card-claim { font-size: 22px; }
}

/* Display headings: one family (Archivo) locked to weight 900 so the heavy
   headline renders the SAME on desktop and phone. These used to rely on the
   separate "Archivo Black" web font, which failed to load on many phones and
   fell back to a lighter system font, making mobile look thinner. */
.popup-title, .popup-stop, .wordmark, .banner-strip span, .hero-head,
.wall-head h2, .wall-head p, .card-claim, .slot-head, .reel-cell,
.slot-result, .closing-line, .petition-head, .signed-head,
.footer-cta, .doc h1 {
  font-weight: 900;
}