/* Official INRAV brand colors, per the brand guide (2026-07-27):
   0F9BD2 (blue), 1E2757 (navy), 7D858B (gray), F2F2F2 (near-white, used at
   30% as a background wash), plus the amber accent already in use. These five
   are the ONLY colors on the site — one flat navy background everywhere, no
   per-section shade cycling.

   Visual direction (2026-08-14, per Zuko — "cool and creative, not AI
   generated"): an investigative case-file / declassified-dossier language,
   built entirely inside the existing 5-color palette rather than adding new
   colors. Four deliberate, restrained signature moves instead of scattering
   effects everywhere:
     1. Type system with a job for each face — Fraunces (serif) for the one
        big display headline only, Archivo for structural h2/h3, Inter for
        body copy, IBM Plex Mono for all "interface" text — labels, eyebrows,
        stat numbers, nav chrome — so data/labels read distinctly from prose.
     2. Case-stamp eyebrows — bordered/filled mono tags, slightly rotated,
        like an ink stamp or evidence tag, instead of plain uppercase text.
     3. Redaction-bar reveal on stat numbers — a solid bar slides away on
        scroll-into-view instead of a plain fade.
     4. Torn/rotated paper — a jagged section divider, tape-corner photos,
        and slightly rotated cards that straighten on hover, breaking the
        too-perfect equal-grid look. */
:root {
  --color-navy: #1e2757;
  --color-blue: #0f9bd2;
  --color-gray: #7d858b;
  --color-offwhite: #f2f2f2;
  --color-amber: #edaf12;

  --color-text: rgba(242, 242, 242, 0.88);
  --color-text-dim: var(--color-gray);
  --surface: rgba(242, 242, 242, 0.3);
  --surface-border: rgba(242, 242, 242, 0.4);

  --font-display: "Archivo", var(--font-sans);
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max-width: 1160px;
  --radius: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-navy);
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

/* Full-bleed wrapper — breaks an element out of .container to span the
   full viewport width, edge to edge. */
.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.full-bleed img {
  width: 100%;
  display: block;
}

/* Subtle grain overlay — a scanned-document texture, not a new color, just
   noise in the existing navy. Fixed so it reads consistently over every
   section rather than tiling oddly with scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

::selection {
  background: var(--color-blue);
  color: var(--color-offwhite);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  color: var(--color-offwhite);
  margin: 0 0 0.5em;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* h1 is the one serif moment on the site — everything else stays grotesk/mono. */
h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  letter-spacing: -0.01em;
}

h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--color-amber);
}

h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p {
  margin: 0 0 1em;
}

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

/* Draft banner — remove once real copy, assets, and org sign-off are in */
.draft-banner {
  background: var(--color-amber);
  color: var(--color-navy);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  position: relative;
  z-index: 200;
}

/* ============ Corner nav: minimal floating on the TOC, becomes a full
   quick-jump bar once you scroll past it (.scrolled, toggled by JS) ============ */
/* Invisible scroll trigger for sub-pages with no full-viewport hero to key
   the nav's solid-background transition off of (see initCornerNavScroll). */
#nav-sentinel {
  height: 1px;
}

.corner-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 150;
  pointer-events: none;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.corner-nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  transition: padding 0.35s var(--ease);
}

.corner-nav.scrolled {
  background: rgba(30, 39, 87, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.corner-nav.scrolled .container {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.corner-logo,
.corner-actions {
  pointer-events: auto;
}

.corner-logo {
  flex-shrink: 0;
}

.corner-logo img {
  display: block;
  height: 30px;
  width: auto;
  max-width: none;
  flex-shrink: 0;
  /* white logo file with the original gradient arrow; no filter needed */
}

.corner-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

#lang-toggle {
  min-width: 3.4rem;
}

/* Section quick-links: invisible/inert until the bar has dropped down */
.quick-nav-links {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.corner-nav.scrolled .quick-nav-links {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.quick-nav-links a {
  font-family: var(--font-mono);
  color: rgba(242, 242, 242, 0.75);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.quick-nav-links a:hover,
.quick-nav-links a.active {
  color: var(--color-blue);
  text-decoration: none;
}

/* Narrow screens: links drop to their own wrapped row under the logo instead
   of hiding behind a menu button. */
@media (max-width: 1100px) {
  .corner-nav .container { flex-wrap: wrap; row-gap: 0.5rem; }

  .quick-nav-links {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
  }

  .quick-nav-links a { font-size: 0.74rem; }
}

.pill-btn {
  background: rgba(242, 242, 242, 0.1);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(242, 242, 242, 0.3);
  color: var(--color-offwhite);
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  font-family: var(--font-mono);
}

.pill-btn:hover {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: var(--color-offwhite);
  text-decoration: none;
}

/* ============ Side dot navigation (scrollspy) ============ */
.dot-nav {
  position: fixed;
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 150;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.dot-nav a {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(242, 242, 242, 0.28);
  display: block;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.dot-nav a:hover {
  transform: scale(1.3);
  text-decoration: none;
}

.dot-nav a.active {
  background: var(--color-blue);
  transform: scale(1.4);
}

.dot-nav a .dot-label {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-offwhite);
  background: var(--color-navy);
  border: 1px solid var(--surface-border);
  padding: 0.25rem 0.6rem;
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}

.dot-nav a:hover .dot-label {
  opacity: 1;
}

@media (max-width: 900px) {
  .dot-nav { display: none; }
}

/* ============ TOC / landing section ============ */
.toc-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  color: var(--color-offwhite);
  /* Flat navy wash over the photo — one solid color, not a gradient */
  background: linear-gradient(rgba(30, 39, 87, 0.92), rgba(30, 39, 87, 0.92)), var(--hero-image, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 7rem 0 4rem;
}

.toc-section .container {
  position: relative;
  z-index: 1;
}

/* Case-stamp eyebrow — an ink-stamp tag, not plain uppercase text */
.toc-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-amber);
  border: 1.5px solid var(--color-amber);
  padding: 0.4em 0.8em;
  display: inline-block;
  margin-bottom: 1.75rem;
}

/* The INRAV wordmark is the single biggest, most prominent thing on the
   hero — everything else (eyebrow, tagline, lede) is deliberately smaller. */
.toc-section h1.toc-brand {
  color: var(--color-offwhite);
  font-size: clamp(4rem, 14vw, 9rem);
  line-height: 0.9;
  letter-spacing: 0;
  max-width: none;
  margin-bottom: 0.15em;
}

.toc-brand img {
  display: block;
  width: clamp(240px, 46vw, 480px);
  height: auto;
  /* white logo file with the original gradient arrow; no filter needed */
}

.toc-tagline {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-offwhite);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  max-width: 20ch;
  margin: 0 0 0.75em;
}

.toc-tagline em {
  font-style: italic;
  font-weight: 800;
  color: var(--color-amber);
}

.toc-section .lede {
  max-width: 56ch;
  font-size: 1.15rem;
  color: rgba(242, 242, 242, 0.8);
  margin-bottom: 3rem;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(242, 242, 242, 0.2);
}

.toc-list li {
  border-bottom: 1px solid rgba(242, 242, 242, 0.2);
}

.toc-list li > a {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.1rem 0.25rem;
  color: var(--color-offwhite);
  text-decoration: none;
  transition: padding-left 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}

.toc-list li > a:hover {
  padding-left: 1rem;
  color: var(--color-blue);
  background: rgba(242, 242, 242, 0.04);
}

/* Plain square marker, no numbering — stands in for the old "01" file tab. */
.toc-num {
  width: 0.5em;
  height: 0.5em;
  background: var(--color-blue);
  flex-shrink: 0;
  align-self: center;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}

.toc-list li > a:hover .toc-num {
  background: var(--color-blue);
  color: var(--color-navy);
  border-color: var(--color-blue);
}

.toc-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  flex: 1;
}

.toc-desc {
  font-size: 0.85rem;
  color: rgba(242, 242, 242, 0.55);
  display: none;
}

@media (min-width: 700px) {
  .toc-desc { display: block; max-width: 26ch; text-align: right; }
}

.toc-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 0 0.25rem 1.25rem;
}

.scroll-cue {
  margin-top: 3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(242, 242, 242, 0.55);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.scroll-cue::after {
  content: "";
  width: 1px;
  height: 28px;
  background: rgba(242, 242, 242, 0.4);
  animation: scrollcue 1.8s infinite;
}

@keyframes scrollcue {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ============ Flowing sections ============ */
/* One flat background color throughout — sections no longer alternate shades. */
.flow-section {
  position: relative;
  padding: 6.5rem 0;
  scroll-margin-top: 1rem;
}

/* Diagonal seam between sections — same navy fill as the background, so it
   has no visible effect now that every section is one flat color. Kept for
   structure in case sections ever diverge in color again. */
.flow-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 90px;
  overflow: hidden;
  line-height: 0;
}

.flow-divider svg {
  width: 100%;
  height: 100%;
  display: block;
}

.section-heading {
  max-width: 62ch;
  margin-bottom: 2.75rem;
}

/* Case-stamp eyebrow chip — filled, mono. Used for every section label
   site-wide. A plain square marker stands in for the old "01." numbering. */
.eyebrow-small {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-blue);
  padding: 0.32em 0.65em;
  border-radius: 2px;
  margin-bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.eyebrow-small::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  background: var(--color-navy);
  flex-shrink: 0;
}

/* Stat row with count-up animation + redaction-bar reveal */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.stat-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-blue);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

/* The redaction bar itself: covers the card, then slides off to the right
   once the section scrolls into view (gated by the parent's .is-visible,
   same reveal-stagger system already driving the fade-up elsewhere). */
.stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--color-navy);
  border-right: 2px solid var(--color-amber);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 0.8s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms + 150ms);
}

.reveal-stagger.is-visible .stat-card::before {
  transform: scaleX(0);
}

.stat-card > * {
  position: relative;
  z-index: 1;
}

.stat-card .stat-number {
  font-family: var(--font-mono);
  font-size: 2.15rem;
  font-weight: 600;
  color: var(--color-blue);
  display: block;
}

.stat-card .stat-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-dim);
  font-size: 0.76rem;
}

/* Values / icon grid */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
}

.value-item {
  text-align: center;
  transition: transform 0.3s var(--ease);
}

.value-item:hover {
  transform: translateY(-6px);
}

.value-item img {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
}

.value-item h3 {
  font-size: 1.05rem;
}

/* Card grid (board, advisory council, allies) — alternating rotation so the
   grid doesn't read as a too-perfect template; straightens on hover. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.75rem 1.75rem;
  align-items: start;
}

/* Language group headings on the Publications page (English / Spanish) */
.pub-lang-heading {
  margin: 2.5rem 0 1.5rem;
}

.pub-lang-heading:first-of-type {
  margin-top: 0;
}

/* Advisory Council and Allies each have 5 cards — auto-fit alone would pack
   4 per row, leaving the 5th to hang alone on its own row. Force 3 columns so
   it wraps into a balanced 3-then-2 layout instead. */
.advisory-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .advisory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .advisory-grid { grid-template-columns: 1fr; }
}

/* "Dossier sheet" cards — an actual paper document pinned to a case board,
   not a dark glass rectangle. Deliberate light/dark inversion (offwhite
   "paper" against the navy site background) so these read as physical
   evidence, not another SaaS feature-grid card. Hard offset shadow instead
   of a soft blur, colored top tab. */
.card {
  position: relative;
  border: none;
  border-top: 4px solid var(--color-blue);
  border-radius: var(--radius);
  padding: 1.75rem;
  background: rgba(242, 242, 242, 0.97);
  color: var(--color-navy);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 5px 7px 0 rgba(12, 15, 40, 0.4);
}

.card-grid .card:nth-child(3n+1) { --tilt: -0.6deg; }
.card-grid .card:nth-child(3n+2) { --tilt: 0.5deg; }
.card-grid .card:nth-child(3n+3) { --tilt: -0.4deg; }

.card:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 8px 11px 0 rgba(12, 15, 40, 0.4);
}

.card h3 {
  color: var(--color-navy);
  margin-bottom: 0.4rem;
}

.card p {
  color: rgba(30, 39, 87, 0.78);
}

.card a {
  color: var(--color-blue);
}

.card .meta {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-blue);
  font-weight: 600;
  font-size: 0.76rem;
  margin-bottom: 0.75rem;
}

/* Team avatars — real photos drop in later; initials placeholder for now */
.avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--color-offwhite);
  background: linear-gradient(135deg, var(--color-blue), var(--color-navy));
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(242, 242, 242, 0.25);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Ally logo wall */
.partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.partner-logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  width: 100%;
}

.partner-logo img {
  max-height: 64px;
  width: auto;
  margin: 0 auto;
  background: var(--color-offwhite);
  border-radius: 6px;
  padding: 6px 12px;
}

.partner-logo-text {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  background: var(--color-offwhite);
  border-radius: 6px;
  padding: 0.6rem 1.4rem;
}

.card-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 700;
  font-size: 0.85rem;
}

.placeholder-note {
  font-family: var(--font-mono);
  background: rgba(237, 175, 18, 0.1);
  border: 1px dashed var(--color-amber);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-amber);
  margin-bottom: 1.5rem;
}

/* Section header paired with a die-cut "evidence photo" — real INRAV imagery
   (sourced from their own official one-pager/report covers, not stock) used
   as loose cutouts rather than framed rectangles, since the source PNGs are
   already silhouetted. Sits beside the heading on desktop, stacks on mobile. */
.section-with-image {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.section-with-image > .section-heading {
  flex: 1 1 420px;
  margin-bottom: 0;
}

.evidence-photo {
  flex: 0 0 300px;
  max-width: 300px;
  margin: 0 auto;
  filter: grayscale(1) contrast(1.08) drop-shadow(10px 14px 16px rgba(0, 0, 0, 0.5));
  transition: transform 0.4s var(--ease);
}

.evidence-photo:hover {
  transform: scale(1.03);
}

@media (max-width: 700px) {
  .evidence-photo { flex-basis: 220px; max-width: 220px; }
}

/* Instagram embed grid (Publications & Policy page). Instagram's own
   embed.js swaps each blockquote for an iframe at a fixed intrinsic width,
   so the grid just needs to center whatever width that ends up being. */
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.instagram-embed-wrap {
  display: flex;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 1rem;
  min-height: 400px;
  align-items: center;
}

.instagram-embed-wrap iframe {
  border-radius: 6px !important;
}

/* LinkedIn embed grid — same pattern as Instagram above, but LinkedIn's
   embed is a plain iframe (no separate widget script needed). */
.linkedin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.linkedin-embed-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--surface-border);
}

.linkedin-embed-wrap iframe {
  display: block;
  width: 100%;
}

/* Photo showcase (archival B&W Venezuela imagery) — pinned like a piece of
   evidence: slight rotation, hard offset shadow, torn tape at two corners. */
.photo-banner {
  position: relative;
  border-radius: 2px;
  overflow: visible;
  transform: rotate(-1.1deg);
  box-shadow: 8px 10px 0 rgba(12, 15, 40, 0.35);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.photo-banner:hover {
  transform: rotate(0deg);
  box-shadow: 4px 6px 0 rgba(12, 15, 40, 0.35);
}

.photo-banner > img {
  width: 100%;
  border-radius: 2px;
  filter: grayscale(1) contrast(1.05);
  transition: transform 0.6s var(--ease);
}

.photo-banner:hover > img {
  transform: scale(1.03);
}

.photo-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 2px;
  background: linear-gradient(0deg, rgba(30, 39, 87, 0.55), transparent 55%);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered variant: each direct child fades in with an incremental delay,
   set as --i by JS (see initReveal in main.js) */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Footer */
.site-footer {
  background: var(--color-navy);
  color: var(--color-gray);
  padding: 3.5rem 0 2rem;
  font-size: 0.9rem;
  border-top: 1px solid var(--surface-border);
}

.site-footer a {
  color: var(--color-offwhite);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-grid h4 {
  color: var(--color-offwhite);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.9rem;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-grid li {
  margin-bottom: 0.5rem;
}

.footer-bottom {
  font-family: var(--font-mono);
  border-top: 1px solid rgba(242, 242, 242, 0.15);
  padding-top: 1.5rem;
  font-size: 0.76rem;
  color: var(--color-gray);
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--color-blue);
  color: var(--color-offwhite);
}

.btn-primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 10px 24px rgba(15, 155, 210, 0.35);
}

.btn-outline {
  background: transparent;
  border-color: rgba(242, 242, 242, 0.6);
  color: var(--color-offwhite);
}

.btn-outline:hover {
  background: var(--color-offwhite);
  color: var(--color-navy);
}

.btn-amber {
  background: var(--color-amber);
  color: var(--color-navy);
}

.btn-amber:hover {
  box-shadow: 0 10px 24px rgba(237, 175, 18, 0.4);
}

/* Simple stub-page layout (Tracker / Policy / Donate placeholders) */
.stub-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--color-offwhite);
  background: var(--color-navy);
  padding: 6rem 0;
}

.stub-page h1 {
  color: var(--color-offwhite);
}

.stub-page .lede {
  max-width: 56ch;
  color: rgba(242, 242, 242, 0.8);
  font-size: 1.1rem;
}

@media (max-width: 700px) {
  .toc-desc { display: none; }
  .flow-section { padding: 4.5rem 0; }
  .photo-banner { transform: rotate(0deg); margin: 0 1rem; }
  .card-grid .card { --tilt: 0deg; }
}

/* PANA Act legislative timeline: a horizontal arrow with entries alternating
   above/below the line. 14 grid tracks let the interior entries run two
   columns wide (300px-ish) while staying centered on their dot; the two
   end entries stay one column wide. Collapses to a vertical list under 1024px. */
.timeline {
  list-style: none;
  margin: 0 0 3.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  grid-template-rows: auto 3.25rem auto;
  column-gap: 0.5rem;
}

.timeline::before {
  content: "";
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  height: 5px;
  border-radius: 3px;
  background: rgba(242, 242, 242, 0.22);
}

.timeline::after {
  content: "";
  grid-row: 2;
  grid-column: 14 / 15;
  justify-self: end;
  align-self: center;
  width: 16px;
  height: 30px;
  margin-right: -0.5rem;
  background: rgba(242, 242, 242, 0.22);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.tl-item {
  position: relative;
  text-align: center;
}

.tl-item:nth-child(odd)  { grid-row: 1; align-self: end; }
.tl-item:nth-child(even) { grid-row: 3; align-self: start; }
.tl-item:nth-child(1) { grid-column: 1 / 3; }
.tl-item:nth-child(2) { grid-column: 2 / 6; }
.tl-item:nth-child(3) { grid-column: 4 / 8; }
.tl-item:nth-child(4) { grid-column: 6 / 10; }
.tl-item:nth-child(5) { grid-column: 8 / 12; }
.tl-item:nth-child(6) { grid-column: 10 / 14; }
.tl-item:nth-child(7) { grid-column: 13 / 15; }

.tl-item::after {
  content: "";
  position: absolute;
  left: 50%;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-blue);
  border: 3px solid var(--color-navy);
  box-shadow: 0 0 0 2px rgba(242, 242, 242, 0.35);
  transform: translateX(-50%);
}

.tl-item:nth-child(odd)::after  { bottom: calc(-1.625rem - 10px); }
.tl-item:nth-child(even)::after { top: calc(-1.625rem - 10px); }

.tl-year {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--color-blue);
}

.tl-item p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(242, 242, 242, 0.82);
}

.tl-key .tl-year { color: var(--color-amber); }
.tl-key::after { background: var(--color-amber); }

@media (max-width: 1024px) {
  .timeline {
    display: block;
    margin-left: 0.5rem;
    padding-left: 1.75rem;
    border-left: 4px solid rgba(242, 242, 242, 0.22);
  }

  .timeline::before,
  .timeline::after { display: none; }

  .tl-item,
  .tl-item:nth-child(odd),
  .tl-item:nth-child(even) {
    grid-row: auto;
    grid-column: auto;
    text-align: left;
    padding: 0 0 1.75rem;
  }

  .tl-item:last-child { padding-bottom: 0; }

  .tl-item::after,
  .tl-item:nth-child(odd)::after,
  .tl-item:nth-child(even)::after {
    left: calc(-1.75rem - 2px);
    top: 0.1rem;
    bottom: auto;
  }
}

/* ===== Theory of change: "If we do / We achieve" (2026-10-07) =====
   Modeled on inrav.org/proyectos (Spanish): two equal columns, left dark navy
   with white text, right white with bold dark text, centered headings. */
.change-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 2.5rem;
  border-radius: var(--radius);
  overflow: hidden;
}

.change-col {
  padding: 2rem 2.5rem;
}

.change-col h3 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.change-col ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.8;
}

.change-col-do {
  background: #0f1534;
  color: #ffffff;
}

.change-col-do h3 {
  color: #ffffff;
}

.change-col-achieve {
  background: #ffffff;
  color: #232425;
}

.change-col-achieve h3 {
  color: #232425;
}

.change-col-achieve ul {
  font-weight: 700;
}

@media (max-width: 700px) {
  .change-columns {
    grid-template-columns: 1fr;
  }
}

/* ===== Card color themes, sitewide (2026-10-07) =====
   Four themes from inrav.org/proyectos' theory-of-change cards, rotating by
   position in every .card-grid: 1 dark navy, 2 slate, 3 light gray, 4 amber,
   then repeat. Site card shape (tilt, hard shadow, top tab) is kept; the tab
   matches each theme's title color. Links and .meta captions are recolored
   per theme so they stay readable (blue fails on amber, weak on slate). */
.card-grid > .card:nth-child(4n+1) { background: #0f1534; border-top-color: #edaf12; }
.card-grid > .card:nth-child(4n+1) h3 { color: #edaf12; }
.card-grid > .card:nth-child(4n+1) p { color: #b3b8d9; }
.card-grid > .card:nth-child(4n+1) a,
.card-grid > .card:nth-child(4n+1) .meta { color: #0f9bd2; }

.card-grid > .card:nth-child(4n+2) { background: #383e5d; border-top-color: #f2f2f2; }
.card-grid > .card:nth-child(4n+2) h3 { color: #f2f2f2; }
.card-grid > .card:nth-child(4n+2) p { color: #b3b8d9; }
.card-grid > .card:nth-child(4n+2) a,
.card-grid > .card:nth-child(4n+2) .meta { color: #79c4e1; }

.card-grid > .card:nth-child(4n+3) { background: #ededed; border-top-color: #0f1534; }
.card-grid > .card:nth-child(4n+3) h3 { color: #0f1534; }
.card-grid > .card:nth-child(4n+3) p { color: #000000; }
.card-grid > .card:nth-child(4n+3) a,
.card-grid > .card:nth-child(4n+3) .meta { color: #0a678c; }

.card-grid > .card:nth-child(4n+4) { background: #edaf12; border-top-color: #383e5d; }
.card-grid > .card:nth-child(4n+4) h3 { color: #383e5d; }
.card-grid > .card:nth-child(4n+4) p { color: #000000; }
.card-grid > .card:nth-child(4n+4) a,
.card-grid > .card:nth-child(4n+4) .meta { color: #0f1534; }

/* ===== Follow INRAV: one social section, 2x2 previews (2026-10-07) =====
   2 columns, not 4: Instagram's embed needs ~326px minimum width. */
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem;
  margin-top: 2.5rem;
  align-items: stretch;
}

.social-panel {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  padding: 1rem;
}

.social-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-amber);
  margin: 0 0 0.75rem;
}

/* Every preview box is the same fixed height (matches the 600px Facebook
   and LinkedIn embeds). Longer Instagram/X posts scroll inside the box
   instead of being cut off or stretching their row. */
.social-embed {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-radius: 6px;
  height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
}

.social-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.social-embed-ig .instagram-media {
  margin: 0 auto !important;
}

/* Fallback link shown if X's timeline doesn't load */
.social-embed-x {
  background: rgba(242, 242, 242, 0.06);
}

.social-embed-x .twitter-tweet {
  margin: 0 auto !important;
}

.social-embed-x > a,
.social-embed-x blockquote > a {
  font-weight: 700;
  color: var(--color-offwhite);
  padding: 2rem 1rem;
  text-align: center;
}

@media (max-width: 800px) {
  .social-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== Loot Tracker section: live preview of the external tracker (2026-10-22) ===== */
.tracker-embed {
  margin-top: 2rem;
  height: 680px;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.tracker-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 800px) {
  .tracker-embed {
    height: 520px;
  }
}