/* 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;
  --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);
}
.hero-bg {
  position: absolute; inset: 0;
  background-image: url('hero-woman.png');
  background-size: cover; background-position: center 20%;
  opacity: 0.22;
}
.hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(11,29,46,0.97) 0%, rgba(11,29,46,0.85) 45%, rgba(11,29,46,0.3) 100%);
}
.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: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800; line-height: 1.15;
  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: 1.1rem; color: var(--grey-mid); line-height: 1.8; }
.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: clamp(1.25rem, 2.5vw, 1.75rem);
  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: 1rem; line-height: 1.75; }

/* ── 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: clamp(1.75rem, 4vw, 3rem);
  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: 1rem; line-height: 1.8; }
.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: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700; color: var(--navy);
  max-width: 700px; margin-bottom: 56px; line-height: 1.3;
}
.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;
}
.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: clamp(1.75rem, 4vw, 3rem);
  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: 1.05rem; line-height: 1.8; }
.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: clamp(1.75rem, 4vw, 3rem);
  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: 1.1rem; line-height: 1.85;
  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: clamp(1.25rem, 2.5vw, 1.875rem);
  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: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900; color: var(--navy); margin-bottom: 20px;
  font-family: var(--font-display); letter-spacing: -0.02em;
}
.panel-community p {
  color: rgba(11,29,46,0.78); font-size: 1.1rem;
  max-width: 640px; margin: 0 auto 36px; line-height: 1.8;
}
.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: 1.1rem; 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;
}

/* ── 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;
}

.inner-page h1,
.inner-page h2,
.inner-page h3 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 1.6em 0 0.5em;
  letter-spacing: -0.01em;
}

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

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

.inner-page p,
.inner-page li { font-size: 1.05rem; line-height: 1.7; }
/* 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 .video-name { color: var(--navy); }
.inner-page a.video-card .video-role { color: var(--teal); }
.inner-page a.video-card .video-topic { color: var(--grey-mid); }
.inner-page a.video-card:hover .video-name { color: var(--teal); }

/* 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::before { content:''; position:absolute; inset:0; z-index:0; background:url('hero-portrait.png') right center/auto 112% no-repeat; opacity:0.92; pointer-events:none; }
.hero::after { content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(11,29,46,0.99) 0%, rgba(11,29,46,0.97) 34%, rgba(11,29,46,0.72) 56%, rgba(11,29,46,0.22) 78%, rgba(11,29,46,0.10) 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: 78% center; opacity: 0.5; }
  .hero::after { background: linear-gradient(180deg, rgba(11,29,46,0.94) 0%, rgba(11,29,46,0.88) 55%, rgba(11,29,46,0.96) 100%); }
}
.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; right:-80px; top:50%; transform:translateY(-50%); width:500px; height:500px; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20500'%3E%3Cpath%20fill='%23ffffff'%20d='M200,50%20L280,80%20L320,140%20L300,200%20L340,220%20L360,280%20L320,340%20L260,360%20L200,340%20L160,370%20L120,340%20L100,290%20L60,260%20L80,200%20L60,160%20L100,120%20L140,100%20L200,50Z'/%3E%3C/svg%3E") center/contain no-repeat; opacity:0.07; pointer-events:none; z-index:0; }
.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 ======================================================== */
/* Preview frames on the index, the embed itself on each talk page, so the
   grid reads as a set of films rather than a list of names. */
.video-grid {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin: 40px 0 8px;
}
.video-card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.video-card:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 10px 30px rgba(11,29,46,0.10);
}
.video-frame {
  position: relative; display: block;
  background: var(--navy); aspect-ratio: 16 / 9;
}
.video-frame img { width: 100%; height: 100%; object-fit: cover; }
.video-frame::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(11,29,46,0.55);
  border: 2px solid rgba(255,255,255,0.9);
  transition: background var(--transition);
}
.video-frame::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; transform: translate(-40%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--white);
  opacity: 0.95;
}
.video-card:hover .video-frame::before { background: var(--green); }
.video-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.95rem; color: var(--navy);
  padding: 18px 20px 0;
}
.video-role {
  color: var(--teal); font-size: 0.78rem; font-weight: 600;
  padding: 6px 20px 0; line-height: 1.45;
}
.video-topic {
  color: var(--grey-mid); font-size: 0.85rem;
  padding: 10px 20px 22px; line-height: 1.55;
}

/* 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-display); 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-display); 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-display); 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; }