/* =========================================================
   THE THREE DEMANDS (v2)
   In-page module on /index.html, below the expert grid.
   Replaces the old static .demands list with the full
   prosecutorial case: a preamble that establishes the
   common-fate / prisoner's-dilemma / nuclear analog, and
   three demand cards (Summit, Liability, Transition Body)
   each carrying a sourced sub-argument and a graphic.
   Uses tokens from style.css and landing.css. Prefix: dv2-.
   ========================================================= */

.demands-v2 {
  background: var(--bg-elev-2);
  padding: 64px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.dv2-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- PREAMBLE ---------- */
.dv2-preamble {
  max-width: 760px;
  margin: 0 auto 40px;
}
/* THE ASK header (2026-05-20). Sits between .dv2-preamble and .dv2-list. */
.dv2-section-header {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.6vw, 38px); font-weight: 700;
  line-height: 1.18; letter-spacing: -0.01em;
  color: var(--accent-2-deep);
  margin: 16px auto 28px; max-width: 22ch;
  text-align: center; text-wrap: balance;
}
@media (min-width: 720px) { .dv2-section-header { margin: 24px auto 36px; } }
.dv2-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.dv2-eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--accent-2-deep);
  border-radius: 50%;
  display: inline-block;
}
.dv2-headline {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 20px;
}

.dv2-frame {
  font-family: var(--font-serif);
  color: var(--ink);
}
.dv2-frame-beat {
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 18px;
  max-width: 62ch;
}
.dv2-frame-beat strong {
  font-weight: 700;
  color: var(--danger);
}
.dv2-frame-src {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  white-space: nowrap;
}
.dv2-frame-lede {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  max-width: 62ch;
}

/* Pull-quote: primary Oppenheimer line with a smaller Harris echo beneath */
.dv2-pull {
  margin: 0 0 24px;
  padding: 18px 22px;
  background: var(--bg-elev);
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-serif);
}
.dv2-pull > p:first-child {
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 10px;
  font-weight: 500;
}
.dv2-pull q {
  font-style: italic;
  quotes: "\201C" "\201D";
}
.dv2-pull-cite {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  margin: 0;
}
.dv2-pull-echo {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.dv2-pull-echo q {
  font-style: italic;
  font-weight: 500;
}
.dv2-pull-echo-cite {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

/* ---------- LIST OF THE THREE DEMANDS ---------- */
.dv2-list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dv2-card {
  padding: 26px 24px;
  border-radius: 12px;
  position: relative;
}
.dv2-card-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.dv2-card-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.78;
  margin: 0 0 6px;
}
.dv2-card-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.dv2-card-hook {
  font-family: var(--font-serif);
  font-size: 16.5px;
  line-height: 1.55;
  margin: 0 0 20px;
  max-width: 60ch;
}
.dv2-card-close {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid currentColor;
  border-top-color: rgba(255, 255, 255, 0.15);
  max-width: 62ch;
  opacity: 0.92;
}

/* Demand 1: primary, dark green */
.dv2-card-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 18px rgba(28, 38, 32, 0.18);
}
.dv2-card-primary .dv2-card-num {
  color: rgba(255, 255, 255, 0.78);
}
.dv2-card-primary .dv2-card-title {
  color: #fff;
}
.dv2-card-primary .dv2-card-hook {
  color: rgba(255, 255, 255, 0.92);
}
.dv2-card-primary .dv2-card-close {
  color: rgba(255, 255, 255, 0.9);
  border-top-color: rgba(255, 255, 255, 0.2);
}

/* Demand 2 and 3: secondary, cream w/ orange accent */
.dv2-card-secondary {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent-2);
  color: var(--ink);
}
.dv2-card-secondary .dv2-card-num {
  color: var(--accent-2-deep);
}
.dv2-card-secondary .dv2-card-title {
  color: var(--ink);
}
.dv2-card-secondary .dv2-card-hook {
  color: var(--ink-dim);
}

/* Frontier-nation paragraph in Demand 1 (added 2026-05-20). Tighter
   register than .dv2-card-hook, scoped to the dark-green primary card. */
.dv2-card-frontier {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.55;
  margin: 0 0 18px;
  max-width: 56ch;
}
.dv2-card-primary .dv2-card-frontier {
  color: rgba(255, 255, 255, 0.86);
}

/* Tumbler Ridge case sidebar in Demand 2 (2026-05-20). */
.dv2-case-sidebar {
  margin: 18px 0 20px; padding: 18px 20px 16px;
  background: rgba(184, 90, 42, 0.06);
  border-left: 3px solid var(--accent-2-deep);
  border-radius: 0 6px 6px 0;
}
.dv2-case-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-2-deep); margin: 0 0 8px;
}
.dv2-case-body {
  font-family: var(--font-serif); font-size: 15px; line-height: 1.6;
  color: var(--ink); margin: 0 0 10px; max-width: 58ch;
}
.dv2-case-footer {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0;
}
.dv2-case-link {
  color: var(--accent-2-deep); font-weight: 600;
  text-decoration: none; border-bottom: 1px solid currentColor;
}
.dv2-case-link:hover { color: var(--accent); }
.dv2-card-secondary .dv2-card-close {
  color: var(--ink);
  border-top-color: var(--rule);
}

/* Expert corroboration quote inside Demand 1 */
.dv2-card-quote {
  margin: 20px 0 0;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid rgba(255, 255, 255, 0.4);
  border-radius: 0 8px 8px 0;
  font-family: var(--font-serif);
}
.dv2-card-quote p {
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
  margin: 0 0 8px;
  color: #fff;
}
.dv2-card-quote footer {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  font-style: normal;
}

/* ---------- DEMAND 1 INNER: PRECEDENT TIMELINE ---------- */
.dv2-timeline {
  margin: 22px 0 0;
  padding: 0;
}
.dv2-timeline-rail {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.dv2-timeline-node {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  border-left: 3px solid rgba(255, 255, 255, 0.5);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: baseline;
}
.dv2-timeline-year {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  grid-row: 1;
  grid-column: 1;
  font-feature-settings: 'tnum';
}
.dv2-timeline-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  grid-row: 1;
  grid-column: 2;
}
.dv2-timeline-note {
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  grid-row: 2;
  grid-column: 1 / -1;
}
/* Inline citation chip inside timeline notes (Phase 2 sourcing
   tightening, 2026-05-11). Used for the UNEP / UN Treaty Series
   citations on the Montreal Protocol + Ottawa Treaty rows. */
.dv2-timeline-cite {
  display: inline;
  margin-left: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
.dv2-timeline-node-now {
  background: rgba(217, 119, 66, 0.2);
  border-left-color: var(--accent-2);
  position: relative;
  overflow: hidden;
}
.dv2-timeline-node-now .dv2-timeline-year {
  color: #ffd7b8;
}
.dv2-timeline-node-now::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 0 rgba(217, 119, 66, 0.7);
  animation: dv2-pulse 2.4s cubic-bezier(0.66, 0, 0.34, 1) infinite;
}
@keyframes dv2-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 119, 66, 0.7); }
  70%  { box-shadow: 0 0 0 14px rgba(217, 119, 66, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 119, 66, 0); }
}

/* ---------- DEMAND 2 INNER: INDUSTRY LIABILITY GRID ---------- */
.dv2-grid {
  margin: 18px 0 0;
  padding: 0;
}
.dv2-grid-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.dv2-grid-cells {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.dv2-grid-cell {
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-left-width: 4px;
  border-left-color: var(--accent);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: baseline;
}
.dv2-grid-icon {
  grid-row: 1 / -1;
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  align-self: center;
}
.dv2-grid-name {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.dv2-grid-sub {
  grid-row: 2;
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  line-height: 1.45;
}
.dv2-grid-cell-fail {
  border-color: var(--danger);
  border-left-color: var(--danger);
  background: rgba(139, 44, 27, 0.04);
}
.dv2-grid-cell-fail .dv2-grid-icon {
  background: var(--danger);
}
.dv2-grid-cell-fail .dv2-grid-name {
  color: var(--danger);
}
.dv2-grid-cell-fail .dv2-grid-sub {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- DEMAND 3 INNER: PEER JURISDICTION GRID ---------- */
.dv2-peers {
  margin: 18px 0 0;
  padding: 0;
}
.dv2-peers-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.dv2-peers-cells {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dv2-peers-cell {
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-left-width: 4px;
  border-left-color: var(--accent);
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
}
.dv2-peers-flag {
  grid-row: 1 / -1;
  grid-column: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  align-self: center;
}
.dv2-peers-name {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.dv2-peers-body {
  grid-row: 2;
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--ink-dim);
}
.dv2-peers-mark {
  grid-row: 1 / -1;
  grid-column: 3;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  align-self: center;
}
.dv2-peers-cell-fail {
  border-color: var(--danger);
  border-left-color: var(--danger);
  background: rgba(139, 44, 27, 0.04);
}
.dv2-peers-cell-fail .dv2-peers-flag {
  border-color: var(--danger);
  color: var(--danger);
}
.dv2-peers-cell-fail .dv2-peers-name {
  color: var(--danger);
}
.dv2-peers-cell-fail .dv2-peers-body {
  color: var(--ink);
  font-weight: 500;
}
.dv2-peers-cell-fail .dv2-peers-mark {
  color: var(--danger);
}
.dv2-peers-callback {
  margin: 14px 0 0;
  font-family: var(--font-serif);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  font-style: italic;
}
.dv2-peers-callback strong {
  font-weight: 700;
  color: var(--danger);
  font-style: normal;
}
.dv2-peers-backref {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-style: normal;
}
.dv2-peers-backref:hover,
.dv2-peers-backref:focus-visible {
  color: var(--accent-2-deep);
}

/* ---------- CLOSING CTA ---------- */
.dv2-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 auto;
  max-width: 560px;
  text-align: center;
}
.dv2-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  background: var(--accent);
  color: var(--bg-light);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(46, 93, 63, 0.18);
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.dv2-cta-btn:hover,
.dv2-cta-btn:focus-visible {
  background: #254c33;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(46, 93, 63, 0.25);
  outline: none;
}
.dv2-cta-ghost {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-dim);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  letter-spacing: 0.01em;
}
.dv2-cta-ghost:hover,
.dv2-cta-ghost:focus-visible {
  color: var(--accent);
}

/* ---------- SCROLL-IN STAGGER (motion.js adds .motion-in per child) ---------- */
.dv2-preamble,
.dv2-card,
.dv2-cta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.dv2-preamble.motion-in,
.dv2-card.motion-in,
.dv2-cta.motion-in {
  opacity: 1;
  transform: none;
}

/* ---------- RESPONSIVE: 720px tablet ---------- */
@media (min-width: 720px) {
  .demands-v2 { padding: 80px 0; }
  .dv2-wrap { padding: 0 32px; }
  .dv2-preamble { margin-bottom: 48px; }

  /* Timeline: 3 nodes horizontal at tablet */
  .dv2-timeline-rail {
    flex-direction: row;
    gap: 14px;
  }
  .dv2-timeline-node {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Industry grid: 5 columns */
  .dv2-grid-cells {
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .dv2-grid-cell {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 6px;
    padding: 16px 14px;
    text-align: center;
  }
  .dv2-grid-icon {
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
  }
  .dv2-grid-name {
    grid-row: 2;
    grid-column: 1;
    text-align: center;
    font-size: 14.5px;
  }
  .dv2-grid-sub {
    grid-row: 3;
    grid-column: 1;
    text-align: center;
    font-size: 10.5px;
    line-height: 1.4;
  }

  /* CTA: horizontal row */
  .dv2-cta {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }
}

/* ---------- RESPONSIVE: 960px desktop ---------- */
@media (min-width: 960px) {
  .demands-v2 { padding: 96px 0; }
  .dv2-card { padding: 32px 36px; }
  .dv2-card-primary { padding: 36px 40px; }
  .dv2-card-hook { font-size: 17.5px; }
  .dv2-frame-beat { font-size: 18px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .dv2-preamble,
  .dv2-card,
  .dv2-cta {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .dv2-timeline-node-now::after { animation: none; }
  .dv2-cta-btn:hover { transform: none; }
}

/* ---------- PRINT ---------- */
@media print {
  .demands-v2 {
    background: #fff;
    border: 0;
    padding: 24px 0;
  }
  .dv2-card-primary {
    background: #fff;
    color: #000;
    border: 2px solid #000;
    box-shadow: none;
  }
  .dv2-card-primary .dv2-card-num,
  .dv2-card-primary .dv2-card-title,
  .dv2-card-primary .dv2-card-hook,
  .dv2-card-primary .dv2-card-close { color: #000; }
  .dv2-card-quote {
    background: #fff;
    border-left: 2px solid #000;
  }
  .dv2-card-quote p,
  .dv2-card-quote footer { color: #000; }
  .dv2-timeline-node,
  .dv2-timeline-node-now {
    background: #fff;
    border: 1px solid #000;
  }
  .dv2-timeline-year,
  .dv2-timeline-name,
  .dv2-timeline-note { color: #000; }
  .dv2-timeline-node-now::after { display: none; }
  .dv2-cta-btn { background: #fff; color: #000; border: 2px solid #000; box-shadow: none; }
}