/* ========================================================================
   rettX poster — A0 portrait (841 × 1189 mm)
   ECRD 2026 · Poster #81
   Brand-locked palette (no teal). Body text ≥ 20pt for 1.5m readability.
   ======================================================================== */

:root {
  /* Brand */
  --purple:        #914DAA;
  --purple-deep:   #5B2D8C;
  --pink:          #ED3385;
  --blue:          #435BD0;
  --indigo-deep:   #291B6C;
  --text:          #1C2450;
  --text-soft:     #4A4F73;

  /* Tints */
  --tint-lavender: #F6F1FB;
  --tint-pink:     #FCF2F7;
  --tint-blue:     #F1F4FC;
  --tint-grey:     #F4F4F8;

  /* Map ramp (lavender → indigo) */
  --map-empty:     #EAEAF3;
  --map-l2:        #E8D8EE;
  --map-l3:        #C9A9D8;
  --map-l4:        #9B6AC0;
  --map-l5:        #6B43A6;
  --map-l6:        #291B6C;

  /* Card */
  --card-bg:       #FFFFFF;
  --card-border:   #E4E4EE;
  --card-radius:   4mm;
}

/* -------- Global -------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #FFFFFF;
  color: var(--text);
  font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* -------- Poster frame -------- */
.poster {
  width: 841mm;
  min-height: 1189mm;
  margin: 0 auto;
  padding: 8mm 14mm 7mm 14mm;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 5mm;
}

/* ============================================================
   HEADER (light, white)
   ============================================================ */
.header {
  display: grid;
  grid-template-columns: 265mm 1fr 95mm;
  align-items: center;
  gap: 8mm;
  padding: 4mm 6mm 6mm 6mm;
  border-bottom: 0.7mm solid var(--purple);
}
.header-wordmark {
  display: flex;
  align-items: center;
  gap: 12mm;
}
.logo-rettx { width: 95mm; height: 30mm; display: block; }
.logo-rettx svg { width: 100%; height: 100%; display: block; }
.logo-rse-header { width: 145mm; height: 44mm; display: block; }
.logo-rse-header svg { width: 100%; height: 100%; display: block; }

.header-title-block { padding: 0 4mm; }
.title {
  font-size: 36pt;          /* ~ 12.7mm */
  line-height: 1.16;
  font-weight: 800;
  color: var(--indigo-deep);
  margin: 0 0 2.5mm 0;
  letter-spacing: -0.005em;
}
.header-tagline {
  font-size: 22pt;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.01em;
}

.header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4mm;
}
.badge-ecrd {
  background: var(--indigo-deep);
  color: #FFFFFF;
  border-radius: 2mm;
  padding: 3mm 6mm;
  text-align: center;
  line-height: 1.1;
}
.badge-ecrd-line1 { font-size: 22pt; font-weight: 800; letter-spacing: .12em; }
.badge-ecrd-line2 { font-size: 24pt; font-weight: 800; margin-top: 1.5mm; }
.badge-ecrd-line2 span { color: var(--pink); }

/* ============================================================
   MAIN GRID (3 columns)
   ============================================================ */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr 0.9fr;
  gap: 6mm;
}
.col {
  display: flex;
  flex-direction: column;
  gap: 6mm;
  min-width: 0;
}

/* -------- Card base -------- */
.card {
  background: var(--card-bg);
  border: 0.4mm solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 7mm 7mm 8mm 7mm;
  break-inside: avoid;
}

/* -------- Section heading -------- */
.section-h {
  font-size: 34pt;
  font-weight: 900;
  letter-spacing: 0.10em;
  margin: 0 0 5mm 0;
  padding-bottom: 3mm;
  border-bottom: 0.7mm solid currentColor;
  text-transform: uppercase;
}
.section-h-pink   { color: var(--pink); }
.section-h-blue   { color: var(--blue); }
.section-h-purple { color: var(--purple); }
.section-h-light  { color: #FFFFFF; border-bottom-color: rgba(255,255,255,.45); }
.section-h-mini   { font-size: 22pt; margin-bottom: 4mm; padding-bottom: 2mm; }

/* -------- Lead / body text -------- */
.lead {
  font-size: 24pt;
  line-height: 1.34;
  margin: 0 0 6mm 0;
  color: var(--text);
}
.card-sub {
  font-size: 21pt;
  color: var(--text-soft);
  margin: -3mm 0 6mm 0;
  font-style: italic;
}

/* ============================================================
   Bullet-icon lists (Challenge / Governance)
   ============================================================ */
.bullet-icons {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4mm;
}
.bullet-icons li {
  display: grid;
  grid-template-columns: 14mm 1fr;
  gap: 4mm;
  align-items: start;
  font-size: 23pt;
  line-height: 1.30;
  color: var(--text);
}
.bullet-icons li strong { color: var(--indigo-deep); }
.bi-icon {
  width: 13mm;
  height: 13mm;
  color: var(--purple);
  flex-shrink: 0;
  margin-top: 0.5mm;
}
.gov-bullets .bi-icon { color: var(--blue); }

/* ============================================================
   Key Components (left col)
   ============================================================ */
.components { display: flex; flex-direction: column; gap: 5mm; }
.component {
  display: grid;
  grid-template-columns: 22mm 1fr;
  gap: 5mm;
  align-items: start;
}
.comp-icon {
  width: 21mm; height: 21mm;
  padding: 3mm;
  border-radius: 3mm;
  background: var(--tint-lavender);
}
.comp-icon-pink   { color: var(--pink);   background: var(--tint-pink); }
.comp-icon-blue   { color: var(--blue);   background: var(--tint-blue); }
.comp-icon-purple { color: var(--purple); background: var(--tint-lavender); }

.comp-body strong {
  display: block;
  font-size: 24pt;
  color: var(--indigo-deep);
  margin-bottom: 2mm;
  line-height: 1.2;
}
.comp-body p {
  margin: 0;
  font-size: 22pt;
  line-height: 1.32;
  color: var(--text);
}

/* ============================================================
   Hub-and-spoke ecosystem diagram (middle col)
   ============================================================ */
.hub-diagram-wrap {
  margin: 1mm 0 0 0;
  padding: 4mm;
  background: var(--tint-lavender);
  border-radius: 3mm;
}
.hub-diagram {
  width: 100%;
  height: auto;
  display: block;
}

/* WHAT WE COLLECT chip strip below hub diagram */
.collect-strip {
  margin-top: 5mm;
  padding: 4mm 0 0 0;
  border-top: 0.4mm solid var(--card-border);
}
.collect-title {
  font-size: 20pt;
  font-weight: 800;
  color: var(--purple);
  letter-spacing: 0.10em;
  margin-bottom: 4mm;
  text-transform: uppercase;
}
.collect-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3mm;
}
.chip {
  font-size: 21pt;
  font-weight: 600;
  color: var(--indigo-deep);
  background: var(--tint-lavender);
  border: 0.3mm solid #DCD3EA;
  padding: 3mm 5mm;
  border-radius: 30mm;
  line-height: 1.1;
}
.chip strong { font-weight: 800; }
.chip em { font-style: italic; }

/* ============================================================
   Early Implementation horizontal row
   ============================================================ */
.impl-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 4mm;
  padding: 3mm 0 5mm 0;
}
.impl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6mm;
  justify-content: flex-start;
}
.impl-icon {
  width: 41mm; height: 41mm;
}
.impl-icon-pink   { color: var(--pink); }
.impl-icon-purple { color: var(--purple); }
.impl-icon-blue   { color: var(--blue); }
.impl-icon-indigo { color: var(--indigo-deep); }
.impl-text {
  font-size: 23pt;
  line-height: 1.28;
  color: var(--text);
}
.impl-text strong { color: var(--indigo-deep); font-size: 26pt; display:block; margin-bottom: 3mm; min-height: 24mm; line-height: 1.18; }
.impl-sep {
  width: 0.4mm;
  height: 57mm;
  background: var(--card-border);
}

/* ============================================================
   RIGHT COLUMN — Big stats
   ============================================================ */
.card-numbers .big-stat {
  display: grid;
  grid-template-columns: 38mm 1fr;
  gap: 6mm;
  align-items: center;
  padding: 7mm 0;
  border-bottom: 0.3mm solid var(--card-border);
}
.card-numbers .big-stat:last-child { border-bottom: none; padding-bottom: 2mm; }
.card-numbers .big-stat:first-of-type { padding-top: 2mm; }

.bs-icon-circle {
  width: 38mm; height: 38mm;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.bs-icon { width: 22mm; height: 22mm; color: #FFFFFF; }
.big-stat-pink   .bs-icon-circle { background: var(--pink); }
.big-stat-purple .bs-icon-circle { background: var(--purple); }
.big-stat-blue   .bs-icon-circle { background: var(--blue); }

.bs-num {
  font-size: 120pt;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--indigo-deep);
}
.big-stat-pink   .bs-num { color: var(--pink); }
.big-stat-purple .bs-num { color: var(--purple); }
.big-stat-blue   .bs-num { color: var(--blue); }
.bs-label {
  font-size: 22pt;
  font-weight: 700;
  color: var(--text);
  margin-top: 2.5mm;
  line-height: 1.2;
}
.bs-label em { font-style: italic; }

/* ============================================================
   Map card
   ============================================================ */
.card-map { padding-bottom: 4mm; }
.map-wrap {
  width: 100%;
  aspect-ratio: 1200 / 1100;
  background: var(--tint-grey);
  border-radius: 2mm;
  padding: 2mm;
}
.map-wrap svg, .map-wrap > div > svg {
  width: 100%; height: 100%; display: block;
}
.map-legend {
  list-style: none;
  margin: 5mm 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3mm 4mm;
  font-size: 20pt;
  font-weight: 700;
  color: var(--text);
}
.map-legend li { display: flex; align-items: center; gap: 3mm; }
.map-foot {
  margin: 3mm 0 0 0;
  font-size: 13pt;
  line-height: 1.35;
  color: var(--text-soft);
}
.sw {
  display: inline-block;
  width: 9mm; height: 7mm;
  border-radius: 0.6mm;
  border: 0.2mm solid rgba(0,0,0,0.08);
}

/* ============================================================
   Mini charts pair
   ============================================================ */
.charts-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5mm;
}
.card-mini { padding: 4mm 5mm 5mm 5mm; }

/* mutation chart : pie + legend */
.mut-chart { display: block; }
.pie-wrap {
  display: grid;
  grid-template-columns: 78mm 1fr;
  gap: 7mm;
  align-items: center;
  padding: 2mm 0 1mm 0;
}
.pie-svg { width: 78mm; height: 78mm; display: block; }
.pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.6mm;
}
.pie-legend li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 3mm;
  align-items: center;
  font-size: 19pt;
  color: var(--text);
}
.pie-sw {
  width: 6mm; height: 6mm;
  border-radius: 1mm;
  display: inline-block;
}
.pie-label {
  font-family: "Consolas", "Courier New", monospace;
  font-weight: 700;
  color: var(--indigo-deep);
}
.pie-label em { color: var(--text-soft); font-style: normal; font-weight: 600; font-family: inherit; }
.pie-num {
  font-weight: 800;
  color: var(--indigo-deep);
  text-align: right;
  white-space: nowrap;
}
.pie-num small { font-weight: 600; color: var(--text-soft); font-size: 78%; }

/* age chart */
.age-chart { padding-top: 1mm; }
.ac-bars {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1.5mm;
  align-items: end;
  height: 70mm;
}
.ac-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2mm;
  height: 100%;
  min-width: 0;
}
.ac-num {
  font-size: 18pt;
  font-weight: 800;
  color: var(--indigo-deep);
}
.ac-bar-wrap {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.ac-bar {
  width: 100%;
  border-radius: 1mm 1mm 0 0;
  min-height: 0.5mm;
}
.ac-label {
  font-size: 14pt;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.ac-axis {
  text-align: center;
  font-size: 16pt;
  color: var(--text-soft);
  margin-top: 3mm;
  font-style: italic;
}

/* ============================================================
   BOTTOM BAND (indigo) — solid color, no gradient
   ============================================================ */
.bottom-band {
  background: var(--indigo-deep);
  color: #FFFFFF;
  border-radius: var(--card-radius);
  padding: 14mm 14mm;
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 0.85fr;
  gap: 14mm;
  align-items: stretch;
  margin-top: auto;        /* pin to bottom of poster */
}
.bb-vision .section-h { margin-bottom: 8mm; font-size: 32pt; }
.vision-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8mm;
}
.vision-list li {
  display: grid;
  grid-template-columns: 16mm 1fr;
  gap: 6mm;
  align-items: start;
  font-size: 22pt;
  line-height: 1.30;
}
.vision-list li > div { display: flex; flex-direction: column; gap: 2mm; }
.vision-list li strong {
  color: #FFD7E8;
  font-size: 24pt;
  display: block;
}
.vision-list li p {
  margin: 0;
  font-size: 20pt;
  font-weight: 400;
  line-height: 1.32;
  color: #E6E1F5;
}
.vi-icon { width: 14mm; height: 14mm; color: var(--pink); margin-top: 1mm; }

.bb-community {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7mm;
  border-left: 0.4mm solid rgba(255,255,255,0.25);
  border-right: 0.4mm solid rgba(255,255,255,0.25);
  padding: 0 8mm;
}
.bb-community .section-h { margin-bottom: 0; font-size: 32pt; text-align: center; }
.bb-community-quote {
  font-size: 28pt;
  line-height: 1.32;
  font-weight: 600;
  text-align: center;
}
.bb-community-quote strong { color: var(--pink); font-weight: 800; }
.bb-attrib {
  font-size: 20pt;
  font-style: italic;
  text-align: center;
  color: #C8C0E5;
}
.bb-meet {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.25);
  padding-top: 7mm;
  text-align: center;
}
.bb-meet-label {
  font-size: 22pt;
  font-weight: 800;
  color: var(--pink);
  letter-spacing: 0.06em;
  margin-bottom: 3mm;
}
.bb-meet-detail {
  font-size: 22pt;
  line-height: 1.3;
  color: #FFFFFF;
}
.bb-meet-detail strong { color: #FFD7E8; }

.bb-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4mm;
  text-align: center;
}
.bb-qr-cap {
  font-size: 22pt;
  font-weight: 700;
  color: #FFFFFF;
}
#qr-img {
  background: #FFFFFF;
  padding: 4mm;
  border-radius: 2mm;
  width: 78mm; height: 78mm;
}
#qr-img svg { width: 100%; height: 100%; display: block; }
.bb-qr-url {
  font-size: 26pt;
  font-weight: 800;
  color: var(--pink);
  letter-spacing: 0.02em;
}
.bb-qr-list {
  list-style: none;
  margin: 4mm 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3mm;
  font-size: 20pt;
  color: #E6E1F5;
  text-align: left;
}
.bb-qr-list li::before {
  content: "\2022\00a0";
  color: var(--pink);
  font-weight: 800;
}

/* ============================================================
   COMPACT FOOTER (white)
   ============================================================ */
.footer-compact {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8mm;
  padding: 3mm 4mm 0 4mm;
  border-top: 0.4mm solid var(--card-border);
}
.fc-left, .fc-right {
  display: flex;
  align-items: center;
  gap: 4mm;
}
.fc-right { justify-content: flex-end; }
.logo-rettx-small { width: 42mm; height: 12mm; display: block; }
.logo-rettx-small svg { width: 100%; height: 100%; display: block; }
.logo-rse-small { width: 72mm; height: 19mm; display: block; }
.logo-rse-small svg { width: 100%; height: 100%; display: block; }

.fc-text {
  font-size: 18pt;
  color: var(--text);
  line-height: 1.3;
}
.fc-urls strong { color: var(--purple); }

/* ============================================================
   ROADMAP card (left col)
   ============================================================ */
.roadmap {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7mm;
  position: relative;
}
.roadmap::before {
  content: "";
  position: absolute;
  left: 6mm;
  top: 4mm;
  bottom: 4mm;
  width: 2px;
  background: var(--tint-lavender);
  z-index: 0;
}
.rm-step {
  display: grid;
  grid-template-columns: 14mm 1fr;
  gap: 4mm;
  align-items: start;
  position: relative;
  z-index: 1;
}
.rm-marker {
  width: 12mm; height: 12mm;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--purple-deep);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rm-step.rm-done .rm-marker {
  background: var(--purple-deep);
  border-color: var(--purple-deep);
}
.rm-step.rm-done .rm-marker::after {
  content: '✓';
  color: #FFFFFF;
  font-weight: 900;
  font-size: 16pt;
  line-height: 1;
}
.rm-when {
  font-size: 24pt;
  font-weight: 800;
  color: var(--purple-deep);
  letter-spacing: 0.04em;
  margin-bottom: 2mm;
}
.rm-what {
  font-size: 24pt;
  color: var(--text);
  line-height: 1.3;
}
.rm-what strong { color: var(--text); }

/* ============================================================
   GET INVOLVED card (middle col)
   ============================================================ */
.get-list {
  display: flex;
  flex-direction: column;
  gap: 6mm;
}
.get-row {
  display: grid;
  grid-template-columns: 18mm 1fr;
  gap: 5mm;
  align-items: start;
  padding: 5mm 0;
  border-bottom: 1px solid var(--tint-lavender);
}
.get-row:last-child { border-bottom: none; padding-bottom: 0; }
.get-icon {
  width: 18mm; height: 18mm;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.get-icon svg { width: 11mm; height: 11mm; color: #FFFFFF; fill: #FFFFFF; }
.get-icon-pink { background: var(--pink); }
.get-icon-purple { background: var(--purple); }
.get-icon-blue { background: var(--blue); }
.get-who {
  font-size: 24pt;
  font-weight: 800;
  color: var(--purple-deep);
  letter-spacing: 0.02em;
  margin-bottom: 3mm;
}
.get-action {
  font-size: 24pt;
  color: var(--text);
  line-height: 1.32;
}
.get-action strong { color: var(--purple); }

/* ============================================================
   HOW DATA FLOWS (full-width strip between main-grid and band)
   ============================================================ */
.flow-strip {
  background: var(--tint-lavender);
  border-radius: var(--card-radius);
  padding: 9mm 11mm 11mm 11mm;
}
.flow-strip > .section-h {
  margin-bottom: 8mm;
}
.flow-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 6mm;
  align-items: stretch;
}
.flow-step {
  background: #FFFFFF;
  border-radius: 6mm;
  padding: 7mm 7mm 8mm 7mm;
  display: flex;
  flex-direction: column;
  gap: 4mm;
  border-left: 4mm solid var(--purple);
}
.flow-step:nth-of-type(1) { border-left-color: var(--pink); }
.flow-step:nth-of-type(2) { border-left-color: var(--purple); }
.flow-step:nth-of-type(3) { border-left-color: var(--blue); }
.flow-step:nth-of-type(4) { border-left-color: var(--indigo-deep); }
.flow-head {
  display: flex;
  align-items: center;
  gap: 5mm;
}
.flow-num {
  width: 14mm; height: 14mm;
  border-radius: 50%;
  background: var(--purple);
  color: #FFFFFF;
  font-size: 22pt;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.flow-step:nth-of-type(1) .flow-num { background: var(--pink); }
.flow-step:nth-of-type(2) .flow-num { background: var(--purple); }
.flow-step:nth-of-type(3) .flow-num { background: var(--blue); }
.flow-step:nth-of-type(4) .flow-num { background: var(--indigo-deep); }
.flow-icon {
  width: 14mm; height: 14mm;
  color: var(--purple-deep);
}
.flow-step strong {
  font-size: 24pt;
  color: var(--purple-deep);
  line-height: 1.25;
}
.flow-step p {
  margin: 0;
  font-size: 20pt;
  line-height: 1.32;
  color: var(--text);
}
.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  width: 16mm;
}
.flow-arrow svg {
  width: 100%;
  height: 14mm;
}

/* ============================================================
   Print
   ============================================================ */
@page { size: A0 portrait; margin: 0; }
@media print {
  html, body { background: #FFFFFF; }
  .poster { box-shadow: none; }
}