/* ============================================================
   Outreach pages — /indigenous-health/ and /rural-health/
   Two sibling pages with one layout: photo hero → the gap (cited stats) → what we do (split)
   → how it runs (3 steps) → CTA. Palette is the only difference between them: .ou-first uses
   the Aboriginal flag's black/red/yellow, .ou-rural the site navy.
   ⚠️ Stat figures are cited to references.json via the shared <sup> buttons — if you change a
   number, change the citation with it.
   ============================================================ */

/* ---- Hero ---- */
.ou-hero { position:relative; overflow:hidden; padding:190px 0 var(--space-3xl); color:#fff;
  background-size:cover; background-position:center 55%; }
.ou-hero::before { content:""; position:absolute; inset:0; }
.ou-hero .wrap { position:relative; z-index:1; }
.ou-hero h1 { color:#fff; letter-spacing:-.02em; max-width:15em; }
.ou-hero .lede { color:rgba(255,255,255,.9); max-width:40em; margin:var(--space-s) 0 0; }
.ou-hero .eyebrow { color:#fff; }
/* First Nations: black sky over red earth, sun off the right edge — the same composition as the
   Close the Gap card on /about/. ⚠️ NOT an imitation of Aboriginal art; it is the flag's palette,
   which is free to use. If real artwork is wanted, commission an Aboriginal artist and credit them. */
.ou-first .ou-hero { background:linear-gradient(180deg, #0b0b0b 0 56%, #cc3f1e 56% 100%); }
.ou-first .ou-hero::before { background:none; }
.ou-sun { position:absolute; right:-90px; top:calc(56% - 150px); width:300px; height:300px; border-radius:50%;
  background:#ffce00; box-shadow:0 0 0 18px rgba(255,206,0,.16), 0 0 0 40px rgba(255,206,0,.07); }
.ou-first .ou-hero .eyebrow { color:#ffce00; }
/* Rural: photo with a navy scrim so the copy stays legible over sky. */
.ou-rural .ou-hero::before { background:linear-gradient(180deg, rgba(8,20,36,.86) 0%, rgba(8,20,36,.72) 55%, rgba(8,20,36,.55) 100%); }
.ou-rural .ou-hero .eyebrow { color:var(--brand-200); }

/* ---- The gap: cited stat cards ---- */
.ou-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-m); }
.ou-stat { background:var(--brand-25); border-radius:var(--radius-lg); padding:var(--space-l); box-shadow:var(--shadow-xs); }
.ou-stat .v { font-size:var(--step-3); font-weight:var(--weight-extrabold); color:var(--color-secondary); line-height:var(--line-none); letter-spacing:-.02em; }
.ou-first .ou-stat .v { color:#cc3f1e; }
.ou-stat p { margin:var(--space-xs) 0 0; font-size:var(--text-md); color:var(--color-ink-soft); line-height:var(--line-relaxed); }
.ou-stat strong { color:var(--color-ink); }

/* ---- What we do (split) ---- */
.ou-split { display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-xl); align-items:center; }
.ou-split-copy h2 { color:var(--color-secondary); }
.ou-split-copy > p { font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); margin:var(--space-s) 0 0; max-width:36em; }
.ou-media { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.ou-media img { display:block; width:100%; height:auto; }

/* ---- Commitment panel ---- */
.ou-pledge { position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:var(--space-2xl) var(--space-xl); color:#fff; text-align:center; }
.ou-first .ou-pledge { background:linear-gradient(150deg,#0b0b0b,#cc3f1e); }
.ou-rural .ou-pledge { background:var(--grad-deep); }
.ou-pledge h2 { color:#fff; max-width:20em; margin:0 auto var(--space-s); }
.ou-pledge p { color:rgba(255,255,255,.9); font-size:var(--text-lg); line-height:var(--line-relaxed); max-width:40em; margin:0 auto; }
.ou-pledge-tag { display:inline-block; margin:0 0 var(--space-m); padding:var(--space-3xs) var(--space-s); border-radius:var(--radius-full);
  font-size:var(--text-xs); font-weight:var(--weight-extrabold); letter-spacing:.12em; text-transform:uppercase; }
.ou-first .ou-pledge-tag { background:#ffce00; color:#0b0b0b; }
.ou-rural .ou-pledge-tag { background:rgba(255,255,255,.92); color:#0b2a4a; }

/* ---- How it runs ---- */
.ou-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-m); counter-reset:ou; }
.ou-step { background:var(--brand-25); border-radius:var(--radius-lg); padding:var(--space-l); box-shadow:var(--shadow-xs); counter-increment:ou; }
.ou-step::before { content:counter(ou); display:flex; align-items:center; justify-content:center; width:36px; height:36px; margin-bottom:var(--space-s);
  border-radius:var(--radius-full); background:var(--grad-chip); color:#fff; font-weight:var(--weight-extrabold); font-size:var(--text-sm); }
.ou-first .ou-step::before { background:linear-gradient(150deg,#cc3f1e,#ffce00); }
.ou-step h3 { margin:0 0 var(--space-2xs); font-size:var(--text-lg); color:var(--color-secondary); }
.ou-step p { margin:0; font-size:var(--text-md); color:var(--color-ink-soft); line-height:var(--line-relaxed); }

/* ---- Reveal timing: tall blocks, so finish the fade as they enter (see about.css) ---- */
@supports (animation-timeline: view()) {
  .reveal { animation-range: entry 0% entry 35%; }
  .reveal.d1 { animation-range: entry 5% entry 40%; }
  .reveal.d2 { animation-range: entry 10% entry 45%; }
  .reveal.d3 { animation-range: entry 15% entry 50%; }
}

@media (max-width:920px){
  .ou-split { grid-template-columns:1fr; gap:var(--space-l); }
  .ou-stats, .ou-steps { grid-template-columns:1fr; }
}
@media (max-width:680px){
  .ou-hero { padding-top:150px; }
  .ou-sun { width:180px; height:180px; right:-60px; top:calc(56% - 90px); }
}

/* ---- Rural research: the three rural entries from research.json ---- */
.ou-papers { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-m); }
.ou-paper { display:flex; flex-direction:column; background:var(--color-surface); border-radius:var(--radius-lg);
  border:1px solid var(--color-border-soft); box-shadow:var(--shadow-xs); padding:var(--space-l); }
.ou-paper-venue { margin:0 0 var(--space-2xs); font-size:var(--text-xs); font-weight:var(--weight-extrabold);
  letter-spacing:.1em; text-transform:uppercase; color:var(--color-primary); }
.ou-paper h3 { margin:0; font-size:var(--text-lg); line-height:var(--line-snug, 1.3); color:var(--color-secondary); }
.ou-paper-sum { margin:var(--space-s) 0 0; font-size:var(--text-md); line-height:var(--line-relaxed); color:var(--color-ink-soft); }
/* The format label is a compliance detail, not decoration — an accepted abstract is not a talk. */
.ou-paper-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2xs);
  margin:var(--space-m) 0 0; padding-top:var(--space-s); border-top:1px solid var(--color-border-soft);
  font-size:var(--text-sm); color:var(--color-ink-soft); }
.ou-paper-format { padding:2px var(--space-2xs); border-radius:var(--radius-full); background:var(--brand-25);
  font-weight:var(--weight-bold); color:var(--color-secondary); }
.btn-row.centred { justify-content:center; margin-top:var(--space-xl); }
@media (max-width:900px) { .ou-papers { grid-template-columns:1fr; } }

/* /rural-health/: #how and #research were adjacent on the page ground (2026-09-16 sweep). */
section.block#research { background:var(--color-surface); }