/* Bundled OFL faces - self-hosted, no CDN (standing rule). Licences beside
   this file: OFL-orbitron.txt, OFL-inter.txt. Variable fonts, so one file
   each covers the whole declared weight range. */
@font-face {
  font-family: 'Orbitron';
  src: url('orbitron-400-900.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('inter-400-800.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ── DHCF Brand Tokens ──────────────────────────────────────────────────── */
:root {
  --green:   #15C592;
  --blue:    #1655A3;
  --teal:    #239396;
  --navy:    #0B1D2E;
  --white:   #FFFFFF;
  --off-white: #F8FAFA;
  --grey-light: #F2F6F9;
  --grey-mid: #64748B;
  --grey-dark: #1B2430;
  --green-light: #E0F7F3;
  --font-display: 'Orbitron', 'Courier New', monospace;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --max-w: 1200px;
  /* One type scale for the whole site, so a heading or a paragraph is the same
     size whether it sits in a home-page panel or in prose. Before 2026-09-11
     the panels carried five headline clamps and three body settings of their
     own, which read as drift rather than intent. */
  --type-statement: clamp(1.75rem, 4vw, 3rem);
  --type-headline:  clamp(1.4rem, 3vw, 2rem);
  --type-lede: 1.15rem;
  --type-body: 1.05rem;
  --type-body-lh: 1.7;
  --section-pad: 96px 24px;
  --radius: 4px;
  --transition: 0.22s ease;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--grey-dark);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.2; }
.display {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.section-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
}
.body-lg { font-size: 1.125rem; line-height: 1.7; }
.body-sm { font-size: 0.9rem; line-height: 1.6; }
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-pad); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(11, 29, 46, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(21, 197, 146, 0.15);
}
.nav-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.nav-logo {
  display: flex; align-items: center; gap: 12px;
}
/* The real DHCF mark replaces the CSS-drawn box. The markup still contains
   the literal text "DHCF", which is kept as the accessible name and hidden
   visually rather than deleted - the layout template is write-locked once the
   layout is active, so this is done in the theme. */
.nav-logo .logo-mark {
  width: 113px; height: 36px;
  border: 0; border-radius: 0;
  background: url('dhcf-logo.png') left center/contain no-repeat;
  display: block;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
  color: transparent; letter-spacing: 0;
  line-height: 1.1; text-align: left;
}
.nav-logo .logo-text {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
}
.nav-links {
  display: flex; align-items: center; gap: 36px;
  list-style: none;
}
.nav-links a {
  color: rgba(255,255,255,0.75);
  font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0.03em;
  transition: color var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--green); }
.nav-cta {
  background: var(--green); color: var(--navy) !important;
  padding: 8px 20px; border-radius: var(--radius);
  font-weight: 700; font-size: 0.8rem !important;
  letter-spacing: 0.05em; font-family: var(--font-display);
  transition: background var(--transition);
}
.nav-cta:hover { background: var(--green-hover) !important; color: var(--navy) !important; }

/* ── CTAs ────────────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: var(--navy);
  padding: 14px 28px; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 0.75rem;
  font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--transition), transform var(--transition);
  border: 2px solid var(--green);
}
.btn-primary:hover { background: var(--green-hover); border-color: var(--green-hover); transform: translateY(-1px); }
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--green);
  padding: 12px 26px; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 0.75rem;
  font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 2px solid var(--green);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn-secondary:hover { background: var(--green); color: var(--navy); transform: translateY(-1px); }
.btn-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 32px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden; padding-top: 68px;
  background: var(--navy);
}
/* The hero ground is .hero::before (the plate) and .hero::after (the gradient),
   both at the end of this file. The .hero-bg / .hero-gradient divs the source
   design used are gone from hero.md: they layered the OLD poster over the plate
   at 0.22, which is why two faces showed. One plate, one gradient, in the
   theme. */
/* Centred at 760px, as the source design has it. The artwork's own small UI
   cards do show faintly through the copy; the operator looked at that on
   2026-09-10 and kept it - they read as texture, not as competing headlines,
   which is what was wrong with the old poster. Leave it alone. */
.hero-content {
  position: relative; z-index: 2;
  max-width: var(--max-w); margin: 0 auto; padding: 80px 24px;
  max-width: 760px;
}
.hero-eyebrow {
  color: var(--green); margin-bottom: 20px;
  display: flex; align-items: center; gap: 10px;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 32px; height: 2px; background: var(--green);
}
.hero h1 { color: var(--white); margin-bottom: 24px; }
.hero h1 span { color: var(--green); }
.hero-sub {
  color: rgba(255,255,255,0.72); font-size: 1.2rem;
  max-width: 600px; margin-bottom: 0;
}

/* Node constellation overlay (SVG) */
.hero-nodes {
  position: absolute; right: 0; top: 0; bottom: 0; width: 50%;
  z-index: 1; opacity: 0.12;
  pointer-events: none;
}

/* ── Divider rule ────────────────────────────────────────────────────────── */
.teal-rule { height: 3px; background: var(--green); border: 0; margin: 0; }

/* ── Panel: Paradox ─────────────────────────────────────────────────────── */
.panel-paradox {
  background: var(--white); padding: 96px 24px;
}
.panel-paradox .inner {
  max-width: var(--max-w); margin: 0 auto;
}
.panel-paradox h2 {
  font-size: var(--type-statement);
  font-weight: 800; line-height: 1.2;
  color: var(--navy); max-width: 820px;
  border-bottom: 3px solid var(--green);
  padding-bottom: 28px; margin-bottom: 28px;
}
.panel-paradox h2 em { color: var(--teal); font-style: normal; }
.panel-paradox p { max-width: 680px; font-size: var(--type-body); color: var(--grey-mid); line-height: var(--type-body-lh); }
.panel-paradox strong { color: var(--navy); }

/* ── Panel: Stats ───────────────────────────────────────────────────────── */
.panel-stats { background: var(--grey-light); padding: 80px 24px; }
.panel-stats .inner { max-width: var(--max-w); margin: 0 auto; }
.stats-headline {
  font-size: var(--type-headline); line-height: 1.3;
  font-weight: 700; color: var(--navy);
  margin-bottom: 48px; max-width: 640px;
}
.stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px; margin-bottom: 40px;
}
.stat-box {
  background: var(--teal); border-radius: var(--radius);
  padding: 40px 28px; text-align: center; color: var(--white);
}
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 900; color: var(--white); line-height: 1;
  margin-bottom: 10px;
}
.stat-label {
  font-size: 0.875rem; font-weight: 600;
  color: rgba(255,255,255,0.85); letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.stat-detail { font-size: 0.8rem; color: rgba(255,255,255,0.65); }
.stats-body { max-width: 740px; color: var(--grey-mid); font-size: var(--type-body); line-height: var(--type-body-lh); }

/* ── Panel: Origin ──────────────────────────────────────────────────────── */
.panel-origin {
  background: var(--navy); padding: 96px 24px; overflow: hidden;
}
.panel-origin .inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 0.7fr;
  gap: 64px; align-items: center;
}
.origin-quote {
  font-size: var(--type-statement);
  font-weight: 800; color: var(--white); font-style: italic;
  line-height: 1.2; margin-bottom: 28px;
}
.origin-quote .quote-mark { color: var(--green); }
.origin-body { color: rgba(255,255,255,0.72); font-size: var(--type-body); line-height: var(--type-body-lh); }
.origin-image {
  position: relative; border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 3/4;
}
.origin-image img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.origin-image::after {
  content: ''; position: absolute; inset: 0;
  border: 2px solid rgba(21,197,146,0.3);
  border-radius: var(--radius);
}
.origin-caption {
  margin-top: 16px; color: rgba(255,255,255,0.45);
  font-size: 0.8rem; text-align: center;
}

/* ── Panel: What We Build ───────────────────────────────────────────────── */
.panel-build { background: var(--white); padding: 96px 24px; }
.panel-build .inner { max-width: var(--max-w); margin: 0 auto; }
.build-headline {
  font-size: var(--type-headline); line-height: 1.3;
  font-weight: 700; color: var(--navy);
  max-width: 700px; margin-bottom: 56px;
}
.build-headline em { color: var(--teal); font-style: normal; }
.build-card {
  background: var(--off-white); border-radius: var(--radius);
  padding: 40px 32px; border-top: 3px solid var(--green);
  transition: transform var(--transition), box-shadow var(--transition);
}
.build-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.build-icon {
  width: 48px; height: 48px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: center;
}
.build-icon svg { width: 40px; height: 40px; stroke: var(--green); fill: none; stroke-width: 1.5; }
.build-card h3 {
  font-size: 1rem; font-weight: 700; color: var(--teal);
  font-family: var(--font-display); letter-spacing: 0.05em;
  font-size: 0.85rem; margin-bottom: 12px;
  text-transform: uppercase;
}
.build-card p { color: var(--grey-mid); font-size: 0.95rem; line-height: 1.7; }

/* ── Panel: Europe ──────────────────────────────────────────────────────── */
.panel-europe {
  background: var(--teal); padding: 96px 24px;
  position: relative; overflow: hidden;
}
.eu-frag-bg {
  position: absolute; inset: 0;
  background-image: url('man-connections.png');
  background-size: cover; background-position: center center;
  opacity: 0.28; pointer-events: none;
}
.panel-europe .eu-map-bg {
  position: absolute; right: -80px; top: 50%; transform: translateY(-50%);
  width: 500px; opacity: 0.07; pointer-events: none;
}
.panel-europe .inner { max-width: var(--max-w); margin: 0 auto; position: relative; z-index: 2; }
.panel-europe .eyebrow { color: rgba(255,255,255,0.6); margin-bottom: 16px; }
.europe-headline {
  font-size: var(--type-statement);
  font-weight: 800; color: var(--white); max-width: 700px;
  margin-bottom: 28px; line-height: 1.2;
}
.europe-date {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.15); border-radius: var(--radius);
  padding: 8px 16px; margin-bottom: 24px;
  font-family: var(--font-display); font-size: 0.72rem;
  color: var(--white); letter-spacing: 0.08em; font-weight: 700;
}
.panel-europe p { color: rgba(255,255,255,0.82); max-width: 680px; font-size: var(--type-body); line-height: var(--type-body-lh); }
.panel-europe strong { color: var(--white); }

/* ── Panel: Invitation ──────────────────────────────────────────────────── */
.panel-invite { background: var(--white); padding: 112px 24px; }
.panel-invite .inner { max-width: 820px; margin: 0 auto; text-align: center; }
.invite-headline {
  font-size: var(--type-statement);
  font-weight: 800; color: var(--navy); margin-bottom: 24px;
  line-height: 1.2;
}
.invite-headline em { color: var(--teal); font-style: normal; }
.panel-invite p {
  color: var(--grey-mid); font-size: var(--type-body); line-height: var(--type-body-lh);
  margin-bottom: 0;
}
.panel-invite .btn-row { justify-content: center; margin-top: 40px; }

/* ── Panel: Team ────────────────────────────────────────────────────────── */
.panel-team { background: var(--grey-light); padding: 96px 24px; }
.panel-team .inner { max-width: var(--max-w); margin: 0 auto; }
.team-headline {
  font-size: var(--type-headline); line-height: 1.3;
  font-weight: 700; color: var(--navy); margin-bottom: 56px;
}
.team-card {
  background: var(--white); border-radius: var(--radius);
  padding: 36px 28px; border-left: 3px solid var(--green);
}
.team-card h3 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.team-card .role {
  font-family: var(--font-display); font-size: 0.68rem;
  font-weight: 700; color: var(--green); letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 14px;
}
.team-card p { color: var(--grey-mid); font-size: 0.9rem; line-height: 1.7; }
.team-uf {
  margin-top: 40px; padding: 24px 28px;
  background: var(--green-light); border-radius: var(--radius);
  border-left: 3px solid var(--teal);
  color: var(--grey-dark); font-size: 0.9rem; font-style: italic;
}

/* ── Panel: Community ───────────────────────────────────────────────────── */
.panel-community {
  background: var(--green); padding: 96px 24px;
}
.panel-community .inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.panel-community h2 {
  font-size: var(--type-statement);
  font-weight: 900; color: var(--navy); margin-bottom: 20px;
  font-family: var(--font-body);
}
.panel-community p {
  color: rgba(11,29,46,0.78); font-size: var(--type-body);
  max-width: 640px; margin: 0 auto 36px; line-height: var(--type-body-lh);
}
.btn-community {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--navy); color: var(--white);
  padding: 16px 32px; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 0.78rem;
  font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background var(--transition), transform var(--transition);
}
.btn-community:hover { background: var(--blue); transform: translateY(-2px); }
.btn-community .arrow { font-size: 1.1rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer {
  background: var(--navy); padding: 60px 24px 32px;
  border-top: 1px solid rgba(21,197,146,0.15);
}
.footer-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px;
  margin-bottom: 48px;
}
.footer-brand .logo-text { color: var(--white); margin-top: 12px; font-size: 0.75rem; }
.footer-brand .logo-mark {
  width: 132px; height: 42px;
  background: url('dhcf-logo.png') left center/contain no-repeat;
  text-indent: -9999px; overflow: hidden; white-space: nowrap;
  color: transparent; display: block;
}
.footer-brand p {
  color: rgba(255,255,255,0.45); font-size: 0.85rem;
  margin-top: 12px; max-width: 300px; line-height: 1.7;
}
.footer-col h4 {
  color: var(--green); font-family: var(--font-display);
  font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {
  color: rgba(255,255,255,0.55); font-size: 0.875rem;
  transition: color var(--transition);
}
.footer-col ul a:hover { color: var(--green); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { color: rgba(255,255,255,0.35); font-size: 0.8rem; }
.footer-bottom a { color: rgba(255,255,255,0.45); font-size: 0.8rem; }
.footer-bottom a:hover { color: var(--green); }

/* ── Inner page hero (for sub-pages) ──────────────────────────────────────── */
.inner-hero {
  background: var(--navy); padding: 140px 24px 80px;
  border-bottom: 3px solid var(--green);
}
.inner-hero .inner { max-width: var(--max-w); margin: 0 auto; }
.inner-hero .eyebrow { color: var(--green); margin-bottom: 14px; }
.inner-hero h1 { color: var(--white); margin-bottom: 16px; }
.inner-hero p { color: rgba(255,255,255,0.65); font-size: var(--type-lede); max-width: 600px; }

/* ── Publications page ──────────────────────────────────────────────────── */
.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.pub-card {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,0.08); overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.pub-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.pub-card-tag {
  background: var(--green-light); padding: 28px 24px 0;
}
.pub-tag {
  display: inline-block; background: var(--green);
  color: var(--navy); padding: 3px 10px; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 0.6rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 12px;
}
.pub-tag.report { background: var(--blue); color: var(--white); }
.pub-tag.policy { background: var(--teal); color: var(--white); }
.pub-card-body { padding: 20px 24px 28px; }
.pub-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 8px; line-height: 1.35; }
.pub-card .pub-date { font-size: 0.78rem; color: var(--grey-mid); margin-bottom: 10px; }
.pub-card p { font-size: 0.875rem; color: var(--grey-mid); line-height: 1.65; margin-bottom: 16px; }
.pub-read-more {
  font-family: var(--font-display); font-size: 0.65rem;
  font-weight: 700; letter-spacing: 0.08em;
  color: var(--teal); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap var(--transition);
}
.pub-read-more:hover { gap: 10px; }

/* ── Videos page ────────────────────────────────────────────────────────── */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; }
.video-card {
  background: var(--navy); border-radius: var(--radius); overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.video-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.video-thumb {
  position: relative; aspect-ratio: 16/9;
  background: linear-gradient(135deg, #0d2a3d 0%, #1a4a6b 100%);
  display: flex; align-items: center; justify-content: center;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.video-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.play-btn {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(21,197,146,0.9);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--transition), background var(--transition);
}
.play-btn svg { width: 20px; height: 20px; fill: var(--navy); margin-left: 3px; }
.video-card:hover .play-btn { background: var(--green); transform: scale(1.08); }
.video-card-body { padding: 20px 22px 24px; }
.video-card h3 { font-size: 0.95rem; font-weight: 700; color: var(--white); margin-bottom: 6px; line-height: 1.35; }
.video-card .vid-meta { font-size: 0.78rem; color: rgba(255,255,255,0.45); }
.vid-series-label {
  display: inline-block; background: rgba(21,197,146,0.15);
  color: var(--green); padding: 2px 8px; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 0.58rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 8px;
}


/* ── Videos page: card text, quote reel, filter, featured ─────────────────── */
/* The card is a dark navy tile, so its text rules carry the .inner-page prefix
   to beat the inner-page prose defaults (h3/p) that appear later in the file. */
.inner-page a.video-card { display: flex; flex-direction: column; color: inherit; }
.inner-page .video-card h3 { color: var(--white); font-size: 0.95rem; font-weight: 700; line-height: 1.35; margin: 0 0 6px; }
.inner-page .video-card .vid-desc { color: rgba(255,255,255,0.66); font-size: 0.85rem; line-height: 1.6; margin: 0 0 12px; }
.inner-page .video-card .vid-meta { color: rgba(255,255,255,0.45); font-size: 0.78rem; }
.video-thumb .vid-series-label, .video-featured-media .vid-series-label { position: absolute; top: 10px; left: 10px; margin: 0; z-index: 2; }

/* Full-bleed bands break out of the 820px reading column, like .video-grid. */
.inner-page .video-reel, .inner-page .video-featured { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* Scrolling quote reel */
.video-reel { background: var(--navy); padding: 28px 0; overflow: hidden; border-top: 1px solid rgba(21,197,146,0.12); border-bottom: 1px solid rgba(21,197,146,0.12); }
.quote-reel { overflow: hidden; position: relative; }
.quote-reel-track { display: flex; gap: 24px; width: max-content; animation: scrollQuotes 60s linear infinite; padding: 0 12px; }
.quote-reel-track:hover { animation-play-state: paused; }
@keyframes scrollQuotes { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.quote-item { flex-shrink: 0; width: 320px; background: rgba(255,255,255,0.06); border-left: 3px solid var(--green); padding: 20px; border-radius: 0 4px 4px 0; }
.quote-item p { font-style: italic; color: rgba(255,255,255,0.82); font-size: 0.9rem; line-height: 1.65; margin: 0 0 10px; }
.quote-item .q-name { font-family: var(--font-display); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); }

/* Category filter (aligns with the wide grid) */
.video-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 8px 0 40px; }
.inner-page .video-filter { width: min(1180px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
.vfbtn { background: transparent; color: var(--grey-mid); border: 1px solid #ccc; padding: 6px 16px; border-radius: 3px; font-family: var(--font-display); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.vfbtn.on { background: var(--green); color: var(--navy); border: 2px solid var(--green); }

/* Featured interview */
.video-featured { background: var(--navy); padding: 56px 0; }
.video-featured .container { padding-left: 24px; padding-right: 24px; }
.video-featured .eyebrow { color: var(--green); margin-bottom: 16px; }
.video-featured-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.video-featured-media { position: relative; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; display: block; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.video-featured-media img { width: 100%; height: 100%; object-fit: cover; }
.video-featured-media .fx-scrim { position: absolute; inset: 0; background: rgba(11,29,46,0.35); }
.video-featured-media .video-play { position: absolute; inset: 0; }
.video-featured-media .play-btn { width: 80px; height: 80px; }
.inner-page .video-featured h2 { color: var(--white); font-size: clamp(1.1rem,2.2vw,1.55rem); font-weight: 700; line-height: 1.3; margin: 0 0 14px; }
.video-featured blockquote { border-left: 3px solid var(--green); padding-left: 14px; margin: 0 0 16px; }
.inner-page .video-featured blockquote p { color: rgba(255,255,255,0.7); font-size: 0.9rem; font-style: italic; line-height: 1.6; margin: 0; }
.inner-page .video-featured .vf-lead { color: rgba(255,255,255,0.58); font-size: 0.875rem; line-height: 1.75; margin: 0 0 20px; }
.video-watch-btn { display: inline-block; background: var(--green); padding: 12px 24px; border-radius: 4px; font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.inner-page a.video-watch-btn, .inner-page a.video-watch-btn:hover { color: var(--navy); text-decoration: none; }
@media (max-width: 760px) { .video-featured-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ── Join Us page ────────────────────────────────────────────────────────── */
.join-paths {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px;
  margin-bottom: 64px;
}
.join-card {
  border-radius: var(--radius); padding: 36px 28px;
  border-top: 3px solid var(--green);
  background: var(--off-white);
  transition: transform var(--transition);
}
.join-card:hover { transform: translateY(-3px); }
.join-card .join-num {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 900; color: var(--green); margin-bottom: 16px;
}
.join-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); margin-bottom: 10px; }
.join-card p { font-size: 0.875rem; color: var(--grey-mid); line-height: 1.7; margin-bottom: 20px; }

/* Community form */
.join-form-wrap {
  background: var(--navy); border-radius: var(--radius);
  padding: 56px; max-width: 680px; margin: 0 auto;
}
.join-form-wrap h2 { color: var(--white); font-size: 1.75rem; font-weight: 700; margin-bottom: 8px; }
.join-form-wrap p { color: rgba(255,255,255,0.6); font-size: 0.95rem; margin-bottom: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.6); letter-spacing: 0.03em; }
.form-group input, .form-group select, .form-group textarea {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius); padding: 12px 14px;
  color: var(--white); font-family: var(--font-body); font-size: 0.9rem;
  transition: border-color var(--transition);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--green);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.3); }
.form-group select option { background: var(--navy); }
.form-full { grid-column: 1 / -1; }
.form-submit { width: 100%; margin-top: 8px; justify-content: center; font-size: 0.8rem; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
  .panel-origin .inner { grid-template-columns: 1fr; }
  .origin-image { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: 32px; }
  .nav-links { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .join-form-wrap { padding: 32px 24px; }
}
/* DHCF × lazysite integration layer
   Bridges lazysite-rendered Markdown pages into the DHCF design.
   Loaded after dhcf.css. */

/* Inner (Markdown content) pages need to clear the fixed 68px nav and
   be readable as prose. The homepage renders full-bleed panels and is
   exempt (it is not wrapped in .inner-page). */
.inner-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 132px 24px 96px;
}

/* Headings are set in the BODY face, not the display face. The brand guide
   reserves Orbitron for logo display; the home page's band headlines were
   already Inter and the prose pages were not, which is what a proofreader saw
   on 2026-09-11. Orbitron stays on the logo, eyebrows, small caps labels,
   buttons and stat numerals - the register that is the same on every page. */
.inner-page h1,
.inner-page h2,
.inner-page h3 {
  font-family: var(--font-body);
  color: var(--navy);
  margin: 1.6em 0 0.5em;
}

.inner-page h1 { font-size: clamp(2rem, 5vw, 3rem); margin-top: 0; }
.inner-page h2 { font-size: var(--type-headline); }
.inner-page h3 { font-size: 1.2rem; }

.inner-page .page-subtitle {
  font-size: var(--type-lede);
  color: var(--grey-mid);
  margin: 0 0 2rem;
}

.inner-page p,
.inner-page li { font-size: var(--type-body); line-height: var(--type-body-lh); }
/* Paragraphs carried no bottom margin, so prose ran together on every inner
   page. Lists keep a tighter rhythm than paragraphs. */
.inner-page p { margin: 0 0 1.25em; }
.inner-page ul, .inner-page ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.inner-page li { margin: 0 0 0.4em; }
.inner-page dl { margin: 0 0 1.25em; }

/* The galleries break out of the 820px reading column: a grid of stills or
   cards wants the width, while the prose above it does not. */
.inner-page .video-grid,
.inner-page .pub-grid {
  width: min(1180px, calc(100vw - 48px));
  margin-left: 50%; transform: translateX(-50%);
}

.inner-page a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.inner-page a:hover { color: var(--teal); }
/* Card links are whole blocks, not prose links: the inner-page underline rule
   would otherwise underline the still, the name, the role and the topic. */
.inner-page a.video-card,
.inner-page a.video-card:hover,
.inner-page .pub-card a,
.inner-page .pub-founding a { text-decoration: none; }
.inner-page a.video-card, .inner-page a.video-card:hover { color: inherit; }

/* lazysite fenced-div boxes, re-skinned to DHCF */
.inner-page .widebox {
  background: var(--navy);
  color: var(--white);
  border-left: 4px solid var(--green);
  padding: 28px 32px;
  border-radius: var(--radius);
  margin: 2rem 0;
  font-size: 1.2rem;
}
.inner-page .examplebox,
.inner-page .textbox {
  background: var(--grey-light);
  border: 1px solid var(--green-light);
  border-left: 4px solid var(--green);
  padding: 20px 24px;
  border-radius: var(--radius);
  margin: 1.6rem 0;
}

/* Body text styling for ported homepage panels uses dhcf.css directly. */

/* Footer link rows inherit dhcf.css; ensure list reset inside content. */
.inner-page ul { padding-left: 1.3em; margin: 1rem 0; }

/* === Decorative HTML relocated from page content into the theme === */
/* hero-plate-v3.jpg, delivered 2026-09-11, 1916x821 at 2.33:1. Wider than every
   landscape hero box, so `cover` trims the left edge rather than showing a flat
   band there - which is what the two earlier plates did on a wide screen. It
   carries no headline, no logo and no value strip, so it can run full-bleed
   under live copy. A 4:5 portrait crop of the same scene takes over below
   700px; see the media query below. */
.hero::before { content:''; position:absolute; inset:0; z-index:0; background:url('hero-plate-v3.jpg') center right/cover no-repeat; pointer-events:none; }
/* The copy column is the centre 760px. The gradient holds the left two-fifths
   near-solid so the headline never sits on skin tones, and opens up past 70%
   where the portrait and the EU flag are. */
.hero::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(11,29,46,0.72) 0%, rgba(11,29,46,0.70) 26%, rgba(11,29,46,0.66) 44%, rgba(11,29,46,0.46) 66%, rgba(11,29,46,0.16) 100%); pointer-events:none; }
/* The plate is a text-free crop of the DHCF poster artwork, so it can carry
   real presence rather than hiding under the copy. It is anchored right and
   scaled to height; the gradient above keeps the left two-fifths solid navy
   so the headline never sits on skin tones. On narrow screens the portrait
   would land behind the copy, so it steps back there. */
@media (max-width: 900px) {
  .hero::before { background-position: 72% center; }
  .hero::after { background: linear-gradient(180deg, rgba(11,29,46,0.62) 0%, rgba(11,29,46,0.58) 38%, rgba(11,29,46,0.86) 100%); }
}
/* Below 700px the landscape plate was showing a 72%-wide slice of a 2.33:1
   frame: the woman filled it and the city, the river and the record cards - the
   things the picture is actually saying - were outside the crop. The same scene
   was delivered as a native 4:5 portrait, so phones get the whole composition
   instead of a sliver of it. */
@media (max-width: 700px) {
  .hero::before { background-image: url('hero-plate-v3-portrait.jpg'); background-position: center top; }
}
.hero-content { position:relative; z-index:2; }
.build-icon.icon-governance { background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%20fill='none'%20stroke='%2315C592'%20stroke-width='1.5'%3E%3Ccircle%20cx='20'%20cy='20'%20r='3'/%3E%3Ccircle%20cx='6'%20cy='10'%20r='2.5'/%3E%3Ccircle%20cx='34'%20cy='10'%20r='2.5'/%3E%3Ccircle%20cx='6'%20cy='30'%20r='2.5'/%3E%3Ccircle%20cx='34'%20cy='30'%20r='2.5'/%3E%3Cline%20x1='20'%20y1='20'%20x2='6'%20y2='10'/%3E%3Cline%20x1='20'%20y1='20'%20x2='34'%20y2='10'/%3E%3Cline%20x1='20'%20y1='20'%20x2='6'%20y2='30'/%3E%3Cline%20x1='20'%20y1='20'%20x2='34'%20y2='30'/%3E%3C/svg%3E") center/40px no-repeat; }
.build-icon.icon-certification { background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%20fill='none'%20stroke='%2315C592'%20stroke-width='1.5'%3E%3Cpath%20d='M20%204%20L36%2012%20L36%2020%20C36%2030%2028%2037%2020%2040%20C12%2037%204%2030%204%2020%20L4%2012%20Z'/%3E%3Cpolyline%20points='12,20%2017,25%2028,14'%20stroke-width='2'/%3E%3C/svg%3E") center/40px no-repeat; }
.build-icon.icon-custodian { background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%20fill='none'%20stroke='%2315C592'%20stroke-width='1.5'%3E%3Ccircle%20cx='20'%20cy='20'%20r='16'/%3E%3Ccircle%20cx='20'%20cy='20'%20r='3'%20fill='%2315C592'%20stroke='none'/%3E%3C/svg%3E") center/40px no-repeat; }
.panel-europe::before { content:''; position:absolute; inset:0; background:rgba(35,147,150,0.78); z-index:1; pointer-events:none; }
.panel-europe { position:relative; }

/* === Forms (theme-level: styles every lazysite :::form, no per-page <style>) === */
:root { --green-hover: #12b384; }
.lazysite-form { max-width: min(520px, 100%); margin: 1.5rem 0; }
.lazysite-form .form-field { display: grid; grid-template-columns: 8rem 1fr; gap: 0.6rem 0.9rem; align-items: start; margin-bottom: 0.7rem; }
.lazysite-form label { padding-top: 0.45rem; font-weight: 600; color: var(--navy); }
.lazysite-form input, .lazysite-form textarea, .lazysite-form select { width: 100%; box-sizing: border-box; padding: 0.55rem 0.7rem; border: 1px solid var(--green-light); border-radius: var(--radius); font: inherit; background: var(--off-white); }
.lazysite-form textarea { min-height: 7rem; resize: vertical; }
.lazysite-form input:focus, .lazysite-form textarea:focus, .lazysite-form select:focus { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.lazysite-form .form-field.form-submit > button { grid-column: 2; background: var(--green); color: var(--navy); border: 2px solid var(--green); padding: 0.6rem 1.6rem; border-radius: var(--radius); font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background var(--transition), border-color var(--transition); }
.lazysite-form .form-field.form-submit > button:hover { background: var(--green-hover); border-color: var(--green-hover); }
.lazysite-form .form-status { margin-top: 0.6rem; font-size: 0.9rem; color: var(--grey-mid); }

/* Hero value strip. The hero artwork has its own headlines and a value strip
   baked into the raster, which at any opacity competes with the live copy and
   can never be crisp. The artwork is therefore dropped to texture (see the
   opacity on .hero::before) and the strip rebuilt here as real text, so it is
   legible, selectable, translatable and readable by a screen reader. */
.hero-values {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  border-top: 1px solid rgba(21,197,146,0.22);
  background: linear-gradient(180deg, rgba(11,29,46,0) 0%, rgba(11,29,46,0.72) 40%);
  padding: 20px 24px 24px;
}
.hero-values ul {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--max-w);
  display: flex; flex-wrap: wrap; gap: 12px 40px; justify-content: center;
}
.hero-values li {
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  display: flex; align-items: center; gap: 10px;
}
.hero-values li::before {
  content: ''; width: 7px; height: 7px; flex: none;
  background: var(--green); transform: rotate(45deg);
}
@media (max-width: 700px) {
  .hero-values { padding: 14px 16px 16px; }
  .hero-values ul { gap: 8px 20px; }
  .hero-values li { font-size: 0.62rem; letter-spacing: 0.1em; }
}


/* == Video library: the card design lives in the Videos page section above.
   Only the oEmbed embed wrapper remains here. == */

/* The oEmbed block on a talk page. The provider's iframe is inserted as-is,
   so the wrapper sizes it rather than its own attributes. */
.oembed {
  position: relative; margin: 8px 0 32px;
  background: var(--navy); border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9;
}
.oembed iframe, .oembed video, .oembed embed, .oembed object {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
.oembed--failed {
  aspect-ratio: auto; background: var(--grey-light);
  padding: 18px 20px; word-break: break-all;
}
.oembed--failed a { color: var(--blue); text-decoration: underline; }

/* == Publications ========================================================= */
.pub-founding {
  background: var(--navy); color: var(--white);
  border-radius: var(--radius); border-left: 4px solid var(--green);
  padding: 36px 32px; margin: 36px 0 12px;
}
.pub-founding-eyebrow {
  font-family: var(--font-display); font-size: 0.68rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--green); display: block; margin-bottom: 12px;
}
.pub-founding h2 {
  font-family: var(--font-body); color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 14px;
}
.pub-founding p {
  color: rgba(255,255,255,0.75); max-width: 60ch;
  line-height: 1.7; margin-bottom: 24px;
}
.pub-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 28px 0;
}
.pub-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--grey-light);
  border-top: 3px solid var(--green);
  border-radius: var(--radius); padding: 28px 24px 24px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.pub-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(11,29,46,0.10); }
.pub-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: 2.4rem; line-height: 1;
  color: var(--green-light); margin-bottom: 10px;
}
.pub-card h3 {
  font-size: 1.05rem; color: var(--navy);
  line-height: 1.35; margin-bottom: 8px;
}
.pub-role {
  font-family: var(--font-display); font-size: 0.65rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 14px;
}
.pub-card p { color: var(--grey-mid); font-size: 0.9rem; line-height: 1.65; }
.pub-dl {
  margin-top: auto; padding-top: 18px;
  font-family: var(--font-display); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue); font-weight: 700;
}
.pub-card:hover .pub-dl { color: var(--green); }
.pub-note {
  background: var(--grey-light); border-radius: var(--radius);
  padding: 20px 24px; color: var(--grey-mid); font-size: 0.9rem;
  line-height: 1.65; margin-top: 32px;
}
.pub-note a { color: var(--blue); text-decoration: underline; }


/* == Series banner and tinted bands ====================================== */
/* The old site introduced a section with a photograph carrying a caption bar,
   and set the listing on a tinted ground. Same two devices here, in the DHCF
   palette rather than the Odoo theme's. */
.inner-page .series-banner {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  width: min(1180px, calc(100vw - 48px));
  margin-left: 50%; transform: translateX(-50%);
  margin-bottom: 40px;
  background: var(--navy);
}
.series-banner img { width: 100%; height: auto; display: block; opacity: 0.92; }
.series-caption {
  position: absolute; left: 0; bottom: 28px;
  background: rgba(35,147,150,0.94);
  border-left: 4px solid var(--green);
  padding: 18px 32px 18px 28px;
  max-width: 88%;
}
.series-title {
  display: block; font-family: var(--font-body); font-weight: 700;
  color: var(--white); font-size: clamp(1.15rem, 2.6vw, 1.9rem);
  line-height: 1.15;
}
.series-meta {
  display: block; margin-top: 6px;
  color: rgba(255,255,255,0.85); font-size: 0.85rem;
}

.inner-page .tinted-band {
  width: min(1180px, calc(100vw - 48px));
  margin-left: 50%; transform: translateX(-50%);
  background: #E0F5EE;                /* pale green, from the brand guide */
  border-radius: var(--radius);
  padding: 40px 32px 44px;
  margin-top: 48px;
}
.inner-page .tinted-band .band-title {
  font-family: var(--font-body); color: var(--navy);
  text-align: center; margin: 0 0 8px;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
}
.inner-page .tinted-band .band-sub {
  text-align: center; color: var(--grey-mid);
  margin: 0 auto 8px; max-width: 60ch; font-size: 0.95rem;
}
/* The grid already breaks out on its own; inside a band it must not do it
   twice or it escapes the band and loses the tint behind it. */
.inner-page .tinted-band .video-grid,
.inner-page .tinted-band .pub-grid {
  width: auto; margin-left: 0; transform: none; margin-top: 28px;
}
.inner-page .tinted-band .video-card { border-color: transparent; }

/* Card headers in the brand's chart order - green, blue, teal - so the three
   documents read as a set rather than three identical boxes. */
.pub-card { padding-top: 0; overflow: hidden; }
.pub-cap {
  display: block; margin: 0 -24px 20px; padding: 16px 24px 14px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--white);
}
.pub-card:nth-child(1) .pub-cap { background: var(--green); color: var(--navy); }
.pub-card:nth-child(2) .pub-cap { background: var(--blue); }
.pub-card:nth-child(3) .pub-cap { background: var(--teal); }
.pub-card .pub-num { font-size: 1.6rem; color: var(--grey-light); margin-bottom: 6px; }


/* ══════════════════════════════════════════════════════════════════════════
   STYLE-GUIDE ALIGNMENT - 2026-09-10
   Everything a page needs is a class here. Pages carry no <style> block and
   no style="" attribute; a page that needs a look gets a class in this file.
   The class vocabulary is documented at /style-guide and in STYLE-GUIDE.md.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens the brand guide names that the theme did not carry ───────────── */
/* style-guide.pdf s1.3. --pale-green was hard-coded in .tinted-band; the
   other two had no home at all. --grey-mid and --green-light are left as the
   theme set them: the guide's #5A6473 and #E0F5EE are within a shade of the
   values already in use across every page, and swapping them is a visual
   decision for the operator, not a correction. */
:root {
  --dark-blue:  #0E3D5C;   /* deep contrast, fourth chart segment */
  --pale-green: #E0F5EE;   /* backgrounds, box fills */
  --pale-blue:  #D8E6F3;   /* accent backgrounds, table headers */
}
.tinted-band, .inner-page .tinted-band { background: var(--pale-green); }

/* ── Video viewer ────────────────────────────────────────────────────────── */
/* layout.tt emits #video-lightbox on EVERY page and the theme carried no rule
   for it, so the dialog rendered in normal flow: measured on the live home
   page 2026-09-10, display:block, 43.5px tall - a stray "DHCF VIDEO / Close x"
   strip under the footer of all 29 pages. openVideo() sets display:flex, so
   the default has to be none and the centring has to be flex. */
#video-lightbox {
  display: none; position: fixed; inset: 0; z-index: 200;
  align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
  background: rgba(5,14,22,0.88);
}
.lightbox-inner {
  width: min(960px, 100%); background: var(--navy);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.lightbox-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; border-bottom: 1px solid rgba(21,197,146,0.18);
}
.lightbox-header .eyebrow { color: var(--green); }
.lightbox-close {
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.75);
  font-family: var(--font-display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 3px; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.lightbox-close:hover { background: var(--green); border-color: var(--green); color: var(--navy); }
#video-embed { aspect-ratio: 16 / 9; background: #000; }
#video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
#lightbox-description { padding: 20px 22px 26px; }
#lightbox-title { font-family: var(--font-display); font-weight: 700; color: var(--white); margin-bottom: 8px; }
#lightbox-bio { color: rgba(255,255,255,0.5); font-size: 0.82rem; margin-bottom: 10px; }
#lightbox-desc-text { color: rgba(255,255,255,0.66); font-size: 0.9rem; line-height: 1.7; }

/* ── Split panel: proposition beside a figure ────────────────────────────── */
/* .panel-paradox is the band; .paradox-inner makes its .inner two columns.
   The source design used a decorative background div (.paradox-img) with no
   <img> and no caption. This site uses a real photograph that carries a
   caption, so the figure column is markup: one canonical shape, not two. */
.paradox-inner {
  display: grid; grid-template-columns: 1fr 0.82fr;   /* source dhcf.css s.paradox-inner */
  gap: 64px; align-items: center;
}
/* The source's decorative column: a crop of the fragmentation artwork, no
   <img> and no caption. Kept because the ported panels use it; new panels
   should use .paradox-figure, which carries a real alt text and a credit. */
.paradox-img {
  aspect-ratio: 4 / 3; position: relative;
  border-radius: var(--radius); overflow: hidden;
  background-image: url('fragmentation.png');
  background-size: 200% 232%; background-position: 100% 0%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.paradox-img::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(21,197,146,0.2);
  border-radius: var(--radius); pointer-events: none;
}
.paradox-text { min-width: 0; }
/* The grid children of .panel-origin, named for the same reason: a column
   with a name is a column an author can find in the style guide. */
.origin-text { min-width: 0; }
.origin-image-wrap { min-width: 0; }
.paradox-text > h2 { max-width: none; }
.paradox-figure { margin: 0; min-width: 0; }
.paradox-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
}
.panel-paradox .paradox-caption {
  margin: 12px 0 0; max-width: none;
  font-size: 0.8rem; line-height: 1.6; color: var(--grey-mid);
}

/* ── Build pillars ───────────────────────────────────────────────────────── */
/* The cards sit in .grid-3, like every other three-across row on the site.
   The three icons are theme background images so a partial never carries
   inline SVG. icon-custodian carried a two-circle stand-in; this is the
   source drawing, with the ring of nodes. */
.build-icon.icon-custodian {
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2040%2040'%20fill='none'%20stroke='%2315C592'%20stroke-width='1.5'%3E%3Ccircle%20cx='20'%20cy='20'%20r='16'/%3E%3Ccircle%20cx='20'%20cy='20'%20r='3'%20fill='%2315C592'%20stroke='none'/%3E%3Ccircle%20cx='8'%20cy='14'%20r='2'%20fill='%2315C592'%20stroke='none'/%3E%3Ccircle%20cx='32'%20cy='14'%20r='2'%20fill='%2315C592'%20stroke='none'/%3E%3Ccircle%20cx='8'%20cy='26'%20r='2'%20fill='%2315C592'%20stroke='none'/%3E%3Ccircle%20cx='32'%20cy='26'%20r='2'%20fill='%2315C592'%20stroke='none'/%3E%3Ccircle%20cx='20'%20cy='8'%20r='2'%20fill='%2315C592'%20stroke='none'/%3E%3Ccircle%20cx='20'%20cy='32'%20r='2'%20fill='%2315C592'%20stroke='none'/%3E%3C/svg%3E") center/40px no-repeat;
}
/* A pillar card is a link on this site, so it must not pick up the prose
   underline or the link colour. */
a.build-card, a.build-card:hover { color: inherit; text-decoration: none; display: block; }

/* ── Team cards ──────────────────────────────────────────────────────────── */
/* .team-card carried its own padding, which is right for a card with no
   photograph and wrong for one with a full-bleed portrait at the top. With a
   .team-photo present the padding moves into .team-card-body. */
.team-card { padding: 0; overflow: hidden; }
.team-photo {
  width: 100%; aspect-ratio: 1 / 1;
  background: var(--grey-light);
  overflow: hidden; display: block;
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card-body { padding: 28px 28px 32px; }
.team-card-body > *:last-child { margin-bottom: 0; }
.team-uf strong { font-style: normal; color: var(--navy); }

/* ── Closing CTA on the green ground ─────────────────────────────────────── */
/* .btn-primary is green on green here and disappeared: measured on the live
   page, "Get involved" was invisible against .panel-community. The source
   uses .btn-community (navy) on this band. .btn-community-alt is its
   outlined partner for a second, quieter action. */
.panel-community .btn-row { justify-content: center; margin-top: 36px; }
.btn-community-alt {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--navy);
  border: 2px solid rgba(11,29,46,0.55);
  padding: 14px 30px; border-radius: var(--radius);
  font-family: var(--font-display); font-size: 0.78rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-community-alt:hover { background: var(--navy); color: var(--white); border-color: var(--navy); transform: translateY(-2px); }

/* ── Small utilities, so a partial never needs style="" ──────────────────── */
/* A band that continues the one above it rather than opening a new subject. */
.panel-paradox.panel-tight { padding-top: 0; }
/* A heading that is a statement, not a section opener: no green rule under it. */
.panel-paradox h2.h2-plain { border-bottom: 0; padding-bottom: 0; }
/* One step wider than the default reading measure. */
.panel-paradox p.measure-wide { max-width: 760px; }
/* Each replaces an inline attribute that was in the markup. */
.hero-sub { margin-top: 20px; }                         /* was style="margin-top:20px" */
.eyebrow-on-dark { color: rgba(255,255,255,0.5); }      /* was style="color:rgba(...)" */
.stat-number.stat-number-sm { font-size: clamp(1.4rem, 3vw, 2.2rem); }
.footer-note {                                          /* was two inline rules in layout.tt */
  margin-top: 8px; color: rgba(255,255,255,0.3); font-size: 0.78rem;
}
.footer-credit { font-size: 0.75rem; }

/* ── Responsive: the new grids collapse with the old ones ────────────────── */
@media (max-width: 900px) {
  .paradox-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Scaffolding for /style-guide only ───────────────────────────────────── */
/* The style guide is a working page on this staging host: it renders every
   component so drift is visible rather than described. These rules dress the
   page's own commentary and nothing else on the site uses them. Remove this
   block and the page together at cutover. */
.sg-band { background: var(--white); padding: 56px 24px 8px; }
.sg-band + .sg-band { padding-top: 8px; }
.sg-band .container { max-width: var(--max-w); }
/* Scoped to direct children only: an unscoped `.sg-band h2` outranked
   `.pub-founding h2` and `.display-lg` on the demos it was meant to label. */
.sg-band > .container > h2, .sg-band .sg-rules > h2 {
  font-family: var(--font-body); color: var(--navy);
  font-size: 1.35rem; margin: 0 0 6px;
}
.sg-band > .container > p { color: var(--grey-mid); font-size: 0.95rem; max-width: 70ch; margin: 0 0 14px; }
.sg-label {
  display: inline-block; margin: 0 0 10px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.78rem; color: var(--blue);
  background: var(--pale-blue); border-radius: 3px; padding: 3px 8px;
}
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 4px 0 8px; }
.sg-swatch { border: 1px solid var(--grey-light); border-radius: var(--radius); overflow: hidden; }
.sg-swatch i { display: block; height: 56px; }
.sg-swatch b, .sg-swatch code { display: block; padding: 0 10px; font-size: 0.75rem; }
.sg-swatch b { padding-top: 8px; color: var(--navy); }
.sg-swatch code { padding-bottom: 9px; color: var(--grey-mid); font-family: ui-monospace, Menlo, Consolas, monospace; }
.sg-rules { background: var(--pale-green); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 24px 28px; margin: 8px 0 0; }
.sg-band .sg-rules > h2 { margin-bottom: 10px; }
.sg-rules ol { margin: 0; padding-left: 1.2em; color: var(--grey-dark); }
.sg-rules li { margin-bottom: 8px; font-size: 0.95rem; line-height: 1.65; }
.sg-rules code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85em; background: rgba(11,29,46,0.06); border-radius: 3px; padding: 1px 5px; }
.sg-demo-dark { background: var(--navy); border-radius: var(--radius); padding: 28px; }
/* Swatch fills and demo grounds, so the style guide obeys its own first rule
   and carries no style="" attribute of its own. */
.sg-swatch.c-green      i { background: var(--green); }
.sg-swatch.c-blue       i { background: var(--blue); }
.sg-swatch.c-teal       i { background: var(--teal); }
.sg-swatch.c-dark-blue  i { background: var(--dark-blue); }
.sg-swatch.c-navy       i { background: var(--navy); }
.sg-swatch.c-grey-mid   i { background: var(--grey-mid); }
.sg-swatch.c-pale-green i { background: var(--pale-green); }
.sg-swatch.c-pale-blue  i { background: var(--pale-blue); }
.sg-swatch.c-grey-light i { background: var(--grey-light); }
.sg-swatch.c-off-white  i { background: var(--off-white); }
.sg-demo-green { background: var(--green); border-radius: var(--radius); padding: 28px; }
.sg-demo-dark .btn-row, .sg-demo-green .btn-row { margin-top: 0; }
.sg-demo-dark .display-lg, .sg-demo-dark .display, .sg-demo-dark .section-title { color: var(--white); margin: 0 0 10px; }
.sg-demo-dark .display-lg .sg-accent { color: var(--green); }
.sg-demo-dark .eyebrow { color: var(--green); margin-bottom: 14px; }
.sg-demo-dark .body-lg { color: rgba(255,255,255,0.72); margin: 0 0 6px; }
.sg-demo-dark .body-sm { color: rgba(255,255,255,0.55); margin: 0; }
.sg-band .sg-prose { padding: 0; max-width: none; margin: 0; }
.sg-gap { height: 18px; }

/* ── Prose elements the theme had no rule for ────────────────────────────── */
/* Measured on the live site 2026-09-10: a definition list rendered as flat
   body text with no indent on <dd> and no weight on <dt>, and a blockquote
   was indistinguishable from a paragraph - 0px border, no indent, no ground.
   The brand guide asks for definition lists wherever there is a term and an
   explanation, so they have to read as one. */
.inner-page dl { margin: 0 0 1.75em; }
.inner-page dt {
  font-family: var(--font-display);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--teal);
  margin: 1.6em 0 0.4em;
}
.inner-page dl > dt:first-child { margin-top: 0; }
.inner-page dd {
  margin: 0; padding-left: 18px;
  border-left: 2px solid var(--pale-green);
  color: var(--grey-dark);
}
.inner-page dd p { margin: 0 0 0.6em; }
.inner-page dd > :last-child { margin-bottom: 0; }

.inner-page blockquote {
  margin: 1.8em 0; padding: 20px 24px;
  background: var(--grey-light);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  color: var(--grey-mid);
}
.inner-page blockquote p { margin: 0 0 0.8em; }
.inner-page blockquote > :last-child { margin-bottom: 0; }

/* Not currently used by any page; here so the first one that needs it does not
   invent its own. */
.inner-page table { width: 100%; border-collapse: collapse; margin: 0 0 1.75em; font-size: 0.95rem; }
.inner-page th, .inner-page td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--grey-light); vertical-align: top; }
.inner-page thead th { background: var(--pale-blue); color: var(--navy); font-weight: 700; border-bottom: 2px solid var(--blue); }
.inner-page tbody tr:nth-child(even) { background: var(--off-white); }
.inner-page code, .inner-page pre {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.88em;
}
.inner-page code { background: var(--grey-light); border-radius: 3px; padding: 1px 5px; }
.inner-page pre { background: var(--navy); color: rgba(255,255,255,0.88); padding: 18px 20px; border-radius: var(--radius); overflow-x: auto; margin: 0 0 1.75em; }
.inner-page pre code { background: none; padding: 0; color: inherit; }
.inner-page hr { height: 2px; border: 0; background: var(--green); margin: 2.4em 0; opacity: 0.35; }
.inner-page figure { margin: 0 0 1.75em; }
.inner-page figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--grey-mid); }
/* The featured-interview quote sits on the navy band, where the grey prose
   blockquote ground above would hide it - grey text on a pale grey card. The
   dark-panel treatment is restored here, at a specificity that wins. */
.inner-page .video-featured blockquote {
  background: none; border-radius: 0;
  border-left: 3px solid var(--green);
  padding: 0 0 0 14px; margin: 0 0 16px;
}
/* The Europe band used to carry a single paragraph, so .panel-europe p had no
   bottom margin and nothing showed it. It now carries three and they ran
   together as one block of text. */
.panel-europe p { margin-bottom: 1.15em; }
.panel-europe .inner > p:last-child { margin-bottom: 0; }
/* The three board portraits are not a matched set - one monochrome on grey, one
   colour on a light studio background, one colour on black. Greyscale in the
   theme rather than in the files, so the originals stay intact and the decision
   is one line to reverse. Operator's call, 2026-09-11. */
.team-photo img { filter: grayscale(1); }

/* Source lines under a claim. The brand guide asks that assertions be grounded
   in evidence; a statistic on a public page needs somewhere to say where it
   came from, small enough not to compete with the figure it supports. */
.stats-source {
  margin: 22px 0 0; max-width: 90ch;
  font-size: 0.78rem; line-height: 1.7;
  color: var(--grey-mid);
}
.stats-source a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.stats-source a:hover { color: var(--teal); }
.stats-source em { font-style: italic; }
/* On the teal band the same line has to read against a dark ground. */
.panel-europe .stats-source { color: rgba(255,255,255,0.62); max-width: 680px; }
.panel-europe .stats-source a { color: rgba(255,255,255,0.85); }
.panel-europe .stats-source a:hover { color: var(--green); }

/* Checklist and radio groups. The engine emits .form-options wrapping one
   .form-option label per choice, each holding its own input. Without these
   rules the generic `.lazysite-form input { width: 100% }` stretched every
   checkbox to the full column and pushed its text onto the next line, and the
   generic label rule made each option read as a field heading. */
.lazysite-form .form-options { display: grid; gap: 0.45rem; }
.lazysite-form .form-option {
  display: flex; align-items: center; gap: 0.6rem;
  padding-top: 0; font-weight: 400; color: var(--grey-dark);
  cursor: pointer;
}
.lazysite-form input[type="checkbox"],
.lazysite-form input[type="radio"] {
  width: auto; flex: none; margin: 0;
  accent-color: var(--green);
}

/* ── The people page ─────────────────────────────────────────────────────── */
/* A row of team cards on an inner page takes the width, the same way the
   publication and video grids do - three biographies do not belong in an 820px
   reading column. */
.inner-page .team-grid,
.inner-page .wide-grid {
  width: min(1180px, calc(100vw - 48px));
  margin-left: 50%; transform: translateX(-50%);
  margin-top: 8px; margin-bottom: 8px;
}
.inner-page .team-card h3 { font-family: var(--font-body); margin: 0 0 4px; font-size: 1rem; }
.inner-page .team-card p { margin: 0 0 0.7em; }
.inner-page .team-card > .team-card-body > p:last-child { margin-bottom: 0; }
/* Where a person works from, under their role. Same scale as the biography,
   quieter than it. */
.person-where {
  font-size: 0.85rem; color: var(--grey-mid);
  font-style: italic; margin-bottom: 0.9em;
}
.inner-page .team-card .person-where { margin-bottom: 0.9em; }

/* The supporting network. One .person per entry, so the list grows by adding a
   block rather than by touching a layout. */
.person-list { display: grid; gap: 18px; margin: 1.5rem 0 2rem; }
.person {
  background: var(--off-white);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  padding: 22px 26px;
}
.inner-page .person h3 {
  font-family: var(--font-body); font-size: 1.05rem;
  color: var(--navy); margin: 0 0 2px;
}
.inner-page .person .role { margin-bottom: 12px; color: var(--teal); }
.inner-page .person p:last-child { margin-bottom: 0; }

/* The link off the home team band to the people page. */
.team-more { margin: 36px 0 0; }
.team-more a {
  font-family: var(--font-display); font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--blue);
}
.team-more a:hover { color: var(--green); }
/* A person's contributions: a talk, a paper, a role. One <li> per contribution,
   because someone can have several and a single bio line loses them. */
.inner-page .contrib { list-style: none; margin: 0 0 0.4em; padding: 0; }
.inner-page .contrib li {
  position: relative; padding-left: 18px; margin: 0 0 0.3em;
  font-size: 0.92rem; line-height: 1.6; color: var(--grey-mid);
}
.inner-page .contrib li::before {
  content: ''; position: absolute; left: 2px; top: 0.62em;
  width: 6px; height: 6px; background: var(--green); transform: rotate(45deg);
}
.inner-page .team-card .contrib li { font-size: 0.85rem; }

/* ── Nav sub-items ───────────────────────────────────────────────────────── */
/* Each top-level item fills the nav's height so the panel opens flush against
   the bar: hung off the text alone it would leave a gap the pointer falls
   through on the way down. */
.nav-links > li { display: flex; align-items: center; height: 68px; }
.has-sub { position: relative; }
.has-sub > a::after {
  content: ''; display: inline-block; margin-left: 7px;
  width: 5px; height: 5px; vertical-align: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: 0.75;
}
.nav-sub {
  position: absolute; top: 100%; left: -14px; z-index: 120;
  display: none; min-width: 215px; padding: 6px 0; margin: 0;
  list-style: none;
  background: rgba(11,29,46,0.98);
  border: 1px solid rgba(21,197,146,0.18);
  border-top: 2px solid var(--green);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
}
/* focus-within, not hover alone: a keyboard user tabbing into About must be
   able to reach what is under it. */
.has-sub:hover > .nav-sub,
.has-sub:focus-within > .nav-sub { display: block; }
.nav-sub > li { display: block; height: auto; }
.nav-sub a {
  display: block; padding: 9px 18px;
  font-size: 0.85rem; color: rgba(255,255,255,0.78);
  white-space: nowrap;
}
.nav-sub a:hover, .nav-sub a:focus, .nav-sub a.active { color: var(--green); background: rgba(21,197,146,0.08); }

/* ── Mobile menu ─────────────────────────────────────────────────────────── */
/* Below 900px the nav bar used to render `display: none` and a phone got no
   navigation at all. The toggle replaces it. */
.nav-toggle {
  display: none;
  align-items: center; gap: 9px;
  background: transparent; border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius); cursor: pointer;
  padding: 8px 13px;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-display); font-size: 0.66rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.nav-toggle:hover, .nav-toggle:focus-visible { color: var(--green); border-color: var(--green); }
.nav-toggle-bars { display: block; width: 16px; }
.nav-toggle-bars span {
  display: block; height: 2px; background: currentColor; border-radius: 1px;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle-bars span + span { margin-top: 3px; }
/* Open: the bars become a cross, so the control says what it will now do. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  /* The panel drops from the bar and takes the full width. The base rule at
     900px already hides .nav-links; `.open` is what brings it back. */
  .nav-links {
    display: none;
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 0 14px;
    /* Solid, not 0.99: a panel laid over body text has no reason to let any
       of it through, and translucency here only invites a legibility bug. */
    background: var(--navy); z-index: 130;
    border-top: 2px solid var(--green);
    border-bottom: 1px solid rgba(21,197,146,0.18);
    box-shadow: 0 18px 44px rgba(0,0,0,0.5);
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links > li { display: block; height: auto; }
  .nav-links > li > a { display: block; padding: 13px 24px; font-size: 0.95rem; }
  /* No hover on a touch screen, so the children are simply shown, indented,
     rather than hidden behind an interaction that does not exist there. */
  .has-sub > a::after { display: none; }
  .nav-sub {
    position: static; display: block;
    min-width: 0; margin: 0; padding: 0 0 4px;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .nav-sub a { padding: 9px 24px 9px 40px; font-size: 0.88rem; }
  .nav-sub a::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--green); transform: rotate(45deg); vertical-align: 1px; opacity: 0.6; }
  /* The call to action keeps its shape rather than becoming a full-width slab. */
  .nav-links > li > a.nav-cta { display: inline-block; margin: 8px 24px 2px; padding: 10px 22px; }
}

/* Publication card: the tag line and the released/size line under the summary. */
.pub-tags {
  font-size: 0.78rem; color: var(--teal);
  margin: 0 0 6px; line-height: 1.6;
}
.pub-meta {
  font-size: 0.75rem; color: var(--grey-mid);
  margin: 0 0 4px;
}
.pub-dl-none { color: var(--grey-mid); }

/* The home team band is a statement and two doors now, rather than three cards:
   the people live on their own pages. */
.team-lede {
  max-width: 720px; margin: 0 0 8px;
  font-size: var(--type-body); line-height: var(--type-body-lh); color: var(--grey-mid);
}
.team-more a + a { margin-left: 28px; }

/* ── Funders ─────────────────────────────────────────────────────────────── */
/* A funder's mark sits beside their entry rather than in a wall of logos: one
   supporter at a time, with what they did for the work beneath their name. */
.funder-list { display: grid; gap: 26px; margin: 1.6rem 0 2.4rem; }
/* Grid child, named so it can be found in the style guide; min-width stops a
   long unbroken string pushing the logo column wider. */
.funder-body { min-width: 0; }
.funder {
  display: grid; grid-template-columns: 268px 1fr; gap: 34px;
  align-items: start;
  background: var(--off-white);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 28px 30px;
}
.funder-logo {
  background: var(--white); border: 1px solid var(--grey-light);
  border-radius: var(--radius); padding: 16px 18px;
}
.funder-logo img { width: 100%; height: auto; display: block; }
.inner-page .funder h2 {
  font-family: var(--font-body); font-size: 1.15rem;
  color: var(--navy); margin: 0 0 2px;
}
.funder-where {
  font-family: var(--font-display); font-size: 0.66rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal); margin: 0 0 12px;
}
.inner-page .funder p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .funder { grid-template-columns: 1fr; gap: 20px; }
  .funder-logo { max-width: 260px; }
}


/* The plate's sunset blows out to pure white in places directly behind the
   headline - measured on the rendered page: the headline band means 96 but
   peaks at 255, while the left quarter means 35. Deepening the gradient enough
   to cover a 255 hot spot would dim the river and skyline that the new plate
   was commissioned to show. A shadow fixes the text where the text is and
   leaves the photograph alone. */
.hero h1 {
  text-shadow: 0 2px 28px rgba(11,29,46,0.55), 0 1px 4px rgba(11,29,46,0.45);
}
.hero-sub, .hero-eyebrow {
  text-shadow: 0 1px 14px rgba(11,29,46,0.85), 0 1px 3px rgba(11,29,46,0.6);
}

/* Two elements sit on the plate's brightest strip and a shadow is not enough
   for either. Measured on the rendered page with the copy hidden: the plate
   behind the eyebrow means 140 and peaks at 234 - the sunset itself - so accent
   green over it lands near 1.6:1. The band behind the headline means 76, which
   the shadow above handles; this is a local problem in two places, so it gets a
   local answer rather than another pass over the photograph. */
.hero .hero-eyebrow {
  display: inline-flex;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: rgba(11,29,46,0.34);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.hero .btn-secondary {
  background: rgba(11,29,46,0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.hero .btn-secondary:hover { background: var(--green); color: var(--navy); }
/* The mobile crop lands on the coat and the shadowed river, not the sunset, so
   the chip buys nothing there and wraps to two lines with the rule stranded on
   the first. Off below 700px. */
@media (max-width: 700px) {
  .hero .hero-eyebrow {
    display: flex; padding: 0; border-radius: 0;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* ------------------------------------------------------------------ */
/* Manifesto panel (homepage) - added 2026-09-14 from the designer's   */
/* mockup. Reuses .eyebrow, .btn-row, .btn-primary, .btn-secondary and */
/* the hero's dark idiom (navy ground, green eyebrow, white headline). */
/* New: .panel-manifesto, .manifesto-headline, .manifesto-lede,        */
/* .thesis-list, .thesis-no, .thesis-text, .panel-meta, .sr-only.      */
/* ------------------------------------------------------------------ */
.panel-manifesto { background: var(--navy); padding: 96px 24px; }
.panel-manifesto .inner { max-width: var(--max-w); margin: 0 auto; }
.panel-manifesto .eyebrow { color: var(--green); margin-bottom: 20px; }
.manifesto-headline { font-family: var(--font-display); font-weight: 500; font-size: var(--type-statement); line-height: 1.15; color: var(--white); margin: 0 0 18px; letter-spacing: 0.01em; }
.manifesto-headline em { color: var(--green); font-style: normal; font-weight: 400; }
.manifesto-lede { color: rgba(255,255,255,0.72); font-size: var(--type-lede); line-height: 1.65; max-width: 34rem; margin: 0 0 28px; }
.thesis-list { list-style: none; margin: 0 0 28px; padding: 20px 0 0; border-top: 1px solid rgba(21,197,146,0.35); max-width: 44rem; }
.thesis-list li { display: flex; gap: 16px; align-items: baseline; margin: 0 0 12px; }
.thesis-list li:last-child { margin-bottom: 0; }
.thesis-no { font-family: var(--font-display); font-size: 0.85rem; color: var(--green); min-width: 2.2em; letter-spacing: 0.06em; }
.thesis-text { font-size: var(--type-body); line-height: 1.5; color: rgba(255,255,255,0.9); }
.panel-manifesto .btn-row { margin-top: 0; }
.panel-manifesto .btn-secondary { border-color: rgba(255,255,255,0.35); color: var(--white); }
.panel-manifesto .btn-secondary:hover { background: var(--green); border-color: var(--green); color: var(--navy); }
.panel-meta { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin-left: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { .panel-manifesto { padding: 72px 20px; } .thesis-list li { gap: 12px; } }

/* Anchored publication cards must clear the fixed nav (deep links from the manifesto panel, 2026-09-14). */
.pub-card { scroll-margin-top: 96px; }