/* ═══════════════════════════════════════════════
   robertlandacademy.org — Counter-Narrative Capture Page
   Mobile-first. Dark chalkboard. Board-deck aesthetic.
   GSAP ScrollTrigger + Lenis smooth scroll
   ═══════════════════════════════════════════════ */

/* --- Reset & Base --- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg:          #0d0d0d;
  --bg-elevated: #161616;
  --text:        #d4d0c8;
  --text-muted:  #7a7770;
  --text-faint:  #4a4840;
  --accent:      #c4a35a;
  --accent-dim:  #8a7340;
  --border:      #2a2826;
  --red:         #c33;

  --font-sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif:  Georgia, 'Times New Roman', Times, serif;
  --font-mono:   'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;

  --measure:     38rem;
  --space-section: 8rem;
  --space-section-mobile: 5rem;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* Lenis smooth scroll overrides */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* --- Background layers (fixed, z-index 2) --- */

.bg-layer {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  visibility: hidden;  /* remove from compositor when inactive — GSAP toggles on scroll */
}

.chalkboard-bg {
  z-index: 1;
  background-image: linear-gradient(rgba(13,13,13,0.75), rgba(13,13,13,0.75)), url("images/chalkboard_bg.webp");
  background-size: cover, cover;
  background-position: center, center;
  opacity: 1;
  visibility: visible;
}

.opening-crown-bg {
  background-image: url("images/opening_crown_bg.webp");
  opacity: 0.5;  /* visible on load — first slide */
  filter: brightness(0.6) contrast(1);
  visibility: visible;
}

.opening-gleed-bg {
  background-image: url("images/opening_gleed_bg.webp");
  filter: brightness(0.6) contrast(1);
}

.opening-hawkins-bg {
  background-image: url("images/opening_hawkins_bg.webp");
  filter: brightness(0.6) contrast(1);
}

.opening-airborne-bg {
  background-image: url("images/opening_airborne_bg.webp");
  background-position: center 75%;
  filter: brightness(0.6) contrast(1);
}

.opening-bridge-bg {
  background-image: url("images/opening_bridge_bg.webp");
  filter: brightness(0.6) contrast(1);
}

.field-bg {
  background-image: url("images/campus_field_bg.webp");
  opacity: 0;
  filter: brightness(0.6) contrast(1);
}

.runaway-bg {
  background-image: url("images/runaway_bg.webp");
  filter: brightness(0.29) contrast(1.1);
}

.founder-bg {
  background-image: url("images/bowman_founder_bg.webp");
  filter: brightness(0.45) contrast(1);
}

.snowglobe-bg {
  background-image: url("images/snowglobe_bg.webp");
  filter: brightness(0.12);
}

.blackbox-bg {
  background-image: url("images/blackbox_bg.webp");
  filter: brightness(0.11) contrast(1.1);
}


/* --- Layout --- */

.container {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.beat {
  position: relative;
  z-index: 1;
  padding: var(--space-section-mobile) 0;
}

@media (min-width: 640px) {
  .beat {
    padding: var(--space-section) 0;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* --- Marker-swipe underline --- */

.marker-swipe {
  position: relative;
  white-space: nowrap;
}

.marker-swipe::after {
  content: '';
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: -0.25em;
  height: 0.28em;
  background: var(--accent);
  opacity: 0.6;
  transform: rotate(-0.6deg) skewX(-6deg) scaleX(var(--swipe-progress, 0));
  transform-origin: left center;
  z-index: -1;
  filter: url(#marker-texture);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24'%3E%3Cpath d='M1 16 C8 10,14 18,24 13 C34 8,42 17,56 12 C68 7,78 16,92 11 C104 6,112 15,128 10 C142 5,150 14,166 11 C178 8,188 16,200 10 C212 5,222 14,236 11 C248 8,258 15,272 10 C282 6,290 13,299 11 L299 24 L1 24Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24'%3E%3Cpath d='M1 16 C8 10,14 18,24 13 C34 8,42 17,56 12 C68 7,78 16,92 11 C104 6,112 15,128 10 C142 5,150 14,166 11 C178 8,188 16,200 10 C212 5,222 14,236 11 C248 8,258 15,272 10 C282 6,290 13,299 11 L299 24 L1 24Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.marker-swipe--static {
  --swipe-progress: 1;
}


/* ═══════════════════════════════════════════════
   SCENE SYSTEM — Per-scene pinned sections
   GSAP ScrollTrigger handles pinning + animation
   ═══════════════════════════════════════════════ */

.scene {
  position: relative;
  z-index: 3;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.scene-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Wider container for portrait row */
.container--wide {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* Multi-phase scenes: phases stacked absolutely within viewport */
.scene .phase {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

/* Constrain text phases to reading width */
.phase-inner {
  max-width: var(--measure);
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* CTA: normal flow, not pinned, content centered in viewport */
.scene--cta {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

.scene--cta .scene-viewport {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Board title — serif italic */
.board-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  letter-spacing: 0.01em;
  text-align: center;
}

@media (min-width: 640px) {
  .board-title {
    font-size: 1.65rem;
  }
}

/* Portrait grid */
.portrait-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1.25rem;
  width: 92vw;
  max-width: 92vw;
  padding: 0;
}

@media (min-width: 640px) {
  .portrait-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 1.5rem;
    width: 90vw;
    max-width: 90vw;
  }
}

@media (min-width: 900px) {
  .portrait-row {
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem 2rem;
    width: 96vw;
    max-width: 90rem;
  }
}

.portrait-card {
  opacity: 0;
  text-align: center;
}

.portrait-frame {
  aspect-ratio: 3 / 4;
  background-color: transparent;
  border: none;
  border-radius: 2px;
  margin-bottom: 0.6rem;
  overflow: hidden;
  position: relative;
}

.portrait-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, black 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 80% at 50% 45%, black 50%, transparent 100%);
}

.portrait-name {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
}

.portrait-rank {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ─── Staff criminal record grid (3x3, mirrors police portrait treatment) ─── */

.staff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 1.25rem;
  width: 92vw;
  max-width: 92vw;
  padding: 0;
}

@media (max-width: 639px) {
  .staff-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 640px) {
  .staff-grid {
    gap: 2rem 1.5rem;
    width: 90vw;
    max-width: 90vw;
  }
}

@media (min-width: 900px) {
  .staff-grid {
    gap: 2rem 2rem;
    width: 96vw;
    max-width: 90rem;
  }
}

.staff-card {
  opacity: 0;
  text-align: center;
}

.staff-frame {
  aspect-ratio: 1;
  width: 70%;
  max-width: 240px;
  margin: 0 auto 0.6rem;
  background-color: transparent;
  border: none;
  overflow: hidden;
  position: relative;
}

.staff-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-name {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
}

.staff-charge {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}


/* Scroll-down indicator */
.scroll-arrow {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translateX(-50%);
  animation: arrow-float 2.4s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.scroll-hint {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.scroll-chevron {
  width: 28px;
  height: auto;
  color: var(--text-faint);
}

@keyframes arrow-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* Quote citation line */
.quote-cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-style: normal;
  color: var(--accent-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}


/* ─── Phase 7: 200 lawsuit circles ─── */

.circle-grid {
  position: absolute;
  inset: -5vh -3vw;
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 0;
  z-index: 3;
}

.circle-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* CSS dot replaces SVG circle for mobile compatibility */
.lawsuit-dot {
  width: 85%;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #0d0d0d;
  opacity: 0;
}

.circle-quote-overlay {
  position: relative;
  z-index: 4;
  max-width: var(--measure);
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}

.circle-quote-overlay .board-title,
.circle-quote-overlay .quote-cite {
  text-shadow:
    0 0 8px  rgba(10, 10, 8, 1),
    0 0 20px rgba(10, 10, 8, 0.8);
}


/* ─── Newspaper Headlines (stacked vertically) ─── */

.headline-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 90vw;
  max-width: 72rem;
}

.headline-stack-card,
.article-stack-card {
  opacity: 0;
  line-height: 0;
  flex: 1 1 0;
  max-width: 22rem;
}

.headline-stack-card img,
.article-stack-card img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Article sequence — same treatment */
.headline-stack--articles {
  max-width: 72rem;
}

@media (max-width: 639px) {
  .headline-stack {
    flex-direction: column;
    gap: 0.75rem;
    max-width: 26rem;
    max-height: 90dvh;
    justify-content: center;
  }

  .headline-stack-card,
  .article-stack-card {
    max-width: 100%;
  }

  .headline-stack-card img,
  .article-stack-card img {
    max-height: 28dvh;
    width: auto;
    margin: 0 auto;
    object-fit: contain;
  }
}



/* ─── Denial quote — chalk X overlay ─── */

.circle-quote {
  position: relative;
  padding: 2rem 3rem;
}
.chalk-x {
  position: absolute;
  inset: -1rem -2rem;
  width: calc(100% + 4rem);
  height: calc(100% + 2rem);
  pointer-events: none;
}

/* Denial attribution — GSAP controls opacity */
.denial-attribution {
  opacity: 0;
}

/* Denial prefix — GSAP drives blur */
.denial-prefix {
  transition: filter 0.1s linear;
}

/* Denial key phrase — GSAP drives scale */
.denial-key {
  display: inline;
  transition: transform 0.1s linear;
}


/* ─── Fade-in observer utility ─── */

[data-fade-in] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-fade-in].is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─── Reduced motion: collapse scenes, show everything ─── */

@media (prefers-reduced-motion: reduce) {
  .scene {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .scene-viewport {
    position: relative;
    height: auto;
    min-height: 0;
  }

  .scene .phase {
    position: relative;
    opacity: 1;
    padding: 3rem 0;
  }

  .portrait-card,
  .staff-card,
  .headline-stack-card,
  .article-stack-card {
    opacity: 1;
  }

  .denial-attribution {
    opacity: 1;
  }

  .lawsuit-dot {
    opacity: 1;
  }

  html.lenis, html.lenis body {
    scroll-behavior: auto;
  }

  [data-fade-in] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bg-layer { transition: none; }
}


/* ═══════════════════════════════════════════════
   MOBILE CONTINUOUS SCROLL — free-scroll on touch
   Replaces ScrollTrigger on pointer: coarse devices
   (phones, tablets). Backgrounds crossfade smoothly.
   ═══════════════════════════════════════════════ */

@media (pointer: coarse) {
  /* 1. Single-phase scenes: full viewport height */
  .scene {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  /* 2. Multi-phase scenes: expand to fit phases */
  .scene[data-scene="staff"],
  .scene[data-scene="pursuit"],
  .scene[data-scene="confrontation"] {
    height: auto;
    min-height: auto;
    overflow: visible;
  }

  /* Multi-phase scene viewports: flow vertically */
  .scene[data-scene="staff"] .scene-viewport,
  .scene[data-scene="pursuit"] .scene-viewport,
  .scene[data-scene="confrontation"] .scene-viewport {
    height: auto;
    display: block;
  }

  /* 3. Individual phases: full-screen slides */
  .scene[data-scene="staff"] .phase,
  .scene[data-scene="pursuit"] .phase,
  .scene[data-scene="confrontation"] .phase {
    position: relative;
    height: 100dvh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
  }

  /* 4. All card/portrait content visible immediately */
  .portrait-card,
  .staff-card,
  .headline-stack-card,
  .article-stack-card,
  .denial-attribution,
  .circle-quote-overlay {
    opacity: 1;
  }

  /* 5. Circles scene: hide dots, show quote over bg image */
  .circle-grid {
    display: none;
  }

  /* 6. Chalk X: fully drawn immediately */
  .x-stroke-1 {
    stroke-dashoffset: 0 !important;
  }

  /* 7. CTA: allows taller-than-viewport content */
  .scene--cta {
    min-height: 100dvh;
    height: auto;
    overflow: visible;
  }

  /* 8. Background crossfade transition */
  .bg-layer { transition: opacity 0.6s ease; }

  /* 9. Hide scroll hint arrow (mobile users know to swipe) */
  .scroll-arrow {
    display: none;
  }

  /* 10. Board title visible by default (no GSAP to fade it in) */
  .board-title {
    opacity: 1;
  }

  /* 11. Quote cite visible by default */
  .quote-cite {
    opacity: 1;
  }

  /* 12. Marker swipes fully drawn (GSAP would animate these) */
  .marker-swipe {
    --swipe-progress: 1;
  }
}


/* ═══════════════════════════════════════════════
   THE LANDING — Primary conversion
   ═══════════════════════════════════════════════ */

.cta-inner {
  text-align: center;
  position: relative;
  max-width: 30rem;
}

/* Scrim — focused behind CTA stack, no hard edges */
.cta-inner::before {
  content: '';
  position: absolute;
  inset: -4rem -3rem;
  background: radial-gradient(ellipse 65% 58% at 50% 42%, rgba(13, 13, 13, 0.65) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

.cta-headline {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: 0.01em;
  margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .cta-headline {
    font-size: 2.5rem;
  }
}

.cta-subhead {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 30rem;
  margin: 0 auto 1rem;
}

/* ── "Next Drop" hook ── */

.next-drop {
  max-width: 30rem;
  margin: 2.5rem auto 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(212, 208, 200, 0.12);
}

.next-drop-hook {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 0.5rem;
}

@media (min-width: 640px) {
  .next-drop-hook {
    font-size: 1.65rem;
  }
}

.next-drop-sub {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.capture-form {
  max-width: 28rem;
  margin: 0 auto;
}

.form-row {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  background-color: rgba(212, 208, 200, 0.06);
}

.form-row input[type="email"] {
  flex: 1;
  padding: 0.85rem 1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  background: transparent;
  border: none;
  outline: none;
}

.form-row input[type="email"]::placeholder {
  color: var(--text-muted);
}

.form-row input[type="email"]:focus {
  background-color: rgba(212, 208, 200, 0.04);
}

.form-row button {
  padding: 0.85rem 1.6rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bg);
  background-color: var(--accent);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.form-row button:hover {
  background-color: var(--accent-dim);
}

.form-row button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cf-turnstile {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

/* ── Helper line + bypass link ── */

.cta-helper {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
  margin-bottom: 0.75rem;
}

.form-error {
  display: none;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: #c97;
  margin-top: 0.5rem;
}

.form-error.is-visible {
  display: block;
}

.promise {
  margin-top: 0.75rem;
  font-size: 0.72rem;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}

.survivor-link {
  margin-top: 2rem;
  font-size: 0.82rem;
}

.survivor-link a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  transition: opacity 0.15s ease;
}

.survivor-link a:hover {
  opacity: 0.75;
}



/* ═══════════════════════════════════════════════
   SHARE PAGE — Standalone survivor intake
   ═══════════════════════════════════════════════ */

.share-page {
  padding: 4rem 0 3rem;
}

.share-back-link {
  margin-top: 2rem;
  font-size: 0.8rem;
}

.share-back-link a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.share-back-link a:hover {
  color: var(--text);
}

/* ─── CTA disclaimer ─── */

.cta-disclaimer {
  margin-top: 2.5rem;
  font-size: 0.72rem;
  color: var(--text-faint);
  line-height: 1.6;
}

.survivor-heading {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 2rem;
}

.survivor-form {
  max-width: 28rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.form-group .required {
  color: var(--accent);
}

.form-group .optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

.form-group input[type="email"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  background-color: rgba(212, 208, 200, 0.06);
  border: 1px solid var(--border);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.15s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent-dim);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
}

.form-group select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%237a7770' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.5rem;
}

.form-group select option {
  background-color: var(--bg-elevated);
  color: var(--text);
}

.form-group textarea {
  resize: vertical;
  min-height: 5rem;
}

.survivor-submit {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.75rem 2rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.survivor-submit:hover {
  border-color: var(--accent-dim);
  color: var(--text);
}

.survivor-submit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.consent-notice {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-muted);
}




/* ─── Mobile: background image framing ─── */

@media (max-width: 639px) {
  .runaway-bg {
    background-position: 60% center;  /* keep running figures visible in portrait crop */
  }

  .founder-bg {
    background-position: center 30%;
  }

  .blackbox-bg {
    background-position: center 35%;
  }

  /* Slightly smaller circle grid on narrow screens */
  .circle-grid {
    inset: -3vh -1vw;
    content-visibility: auto;
    contain-intrinsic-size: 100vw 100vh;
  }

  /* Constrain CTA scrim to prevent horizontal scroll */
  .cta-inner::before {
    inset: -2rem -1.5rem;
  }

  /* Prevent circle-quote / chalk-x horizontal bleed */
  .circle-quote {
    padding: 1.5rem 1rem;
  }
  .chalk-x {
    inset: -0.5rem -0.5rem;
    width: calc(100% + 1rem);
    height: calc(100% + 1rem);
  }
}


/* ═══════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════ */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background-color: var(--accent);
  color: var(--bg);
}



/* ═══════════════════════════════════════════════
   SKIP TO EVIDENCE — Fixed button + interstitial
   ═══════════════════════════════════════════════ */

.skip-to-evidence {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, color 0.15s ease;
}

.skip-to-evidence.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.skip-to-evidence:hover {
  color: var(--accent);
}

.skip-to-evidence:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (max-width: 639px) {
  .skip-to-evidence {
    bottom: 1rem;
    right: 1rem;
    padding: 0.6rem 0.8rem;
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .skip-to-evidence {
    bottom: calc(2rem + env(safe-area-inset-bottom));
  }
  @media (max-width: 639px) {
    .skip-to-evidence {
      bottom: calc(1rem + env(safe-area-inset-bottom));
    }
  }
}

/* ── Interstitial overlay ── */

.interstitial-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 13, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.interstitial-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.interstitial-card {
  max-width: 28rem;
  width: 100%;
  padding: 2.5rem 2rem;
  text-align: center;
}

.interstitial-heading {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.interstitial-body {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 1.75rem;
}

.interstitial-form {
  max-width: 28rem;
  margin: 0 auto;
}

.interstitial-promise {
  margin-top: 1.25rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.interstitial-bypass {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.interstitial-bypass:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

@media (max-width: 639px) {
  .interstitial-card {
    padding: 2rem 1.5rem;
  }

  .interstitial-heading {
    font-size: 1.15rem;
  }
}