@font-face{ font-family:'Playfair Display Var'; src:url(../fonts/playfair-display-var.woff2) format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Karla Var'; src:url(../fonts/karla-var.woff2) format('woff2'); font-weight:300 800; font-style:normal; font-display:swap; }

:root{
  --font-display:'Playfair Display Var', Georgia, serif;
  --font-body:'Karla Var', system-ui, -apple-system, sans-serif;
  --radius-s:8px; --radius-m:14px; --radius-l:18px;

  --ink:#0F1F2E; --ink-soft:#42525F; --ink-faint:#6E7C86;
  --paper:#FBF3E6; --paper-raised:#FFFEFA; --paper-sunken:#F1E6D2; --line:#E3D5BC;
  --accent:#E98A2B; --accent-soft:#F8DDB4; --accent-ink:#6B3E12;
  --accent2:#4F6F53; --accent2-soft:#DCE5DA; --gold:#D9B45A; --sage:#A6B59A;
  --shadow:0 1px 2px rgba(15,31,46,0.06), 0 6px 18px -10px rgba(15,31,46,0.18);
  --letterbox:#0B141C;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#F5EEE1; --ink-soft:#CBD6D2; --ink-faint:#93A5A0;
    --paper:#101B26; --paper-raised:#17242F; --paper-sunken:#0B141C; --line:#2B3B47;
    --accent:#F0A24D; --accent-soft:#4A3216; --accent-ink:#FBE3C2;
    --accent2:#7FA184; --accent2-soft:#22332A; --gold:#E4C578; --sage:#8FA084;
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 10px 24px -12px rgba(0,0,0,0.6);
    --letterbox:#000000;
  }
}
:root[data-theme="dark"]{
  --ink:#F5EEE1; --ink-soft:#CBD6D2; --ink-faint:#93A5A0;
  --paper:#101B26; --paper-raised:#17242F; --paper-sunken:#0B141C; --line:#2B3B47;
  --accent:#F0A24D; --accent-soft:#4A3216; --accent-ink:#FBE3C2;
  --accent2:#7FA184; --accent2-soft:#22332A; --gold:#E4C578; --sage:#8FA084;
  --letterbox:#000000;
}
:root[data-theme="light"]{
  --ink:#0F1F2E; --ink-soft:#42525F; --ink-faint:#6E7C86;
  --paper:#FBF3E6; --paper-raised:#FFFEFA; --paper-sunken:#F1E6D2; --line:#E3D5BC;
  --accent:#E98A2B; --accent-soft:#F8DDB4; --accent-ink:#6B3E12;
  --accent2:#4F6F53; --accent2-soft:#DCE5DA; --gold:#D9B45A; --sage:#A6B59A;
  --letterbox:#0B141C;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--letterbox); overflow:hidden; }
body{ font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4{ font-family:var(--font-display); text-wrap:balance; margin:0; }
p{ margin:0; }

.cast-wrap{ height:100vh; width:100vw; display:flex; align-items:center; justify-content:center; position:relative; }
.cast-frame{
  position:relative; width:100vw; height:56.25vw; max-height:100vh; max-width:177.78vh;
  overflow:hidden; box-shadow:0 0 80px rgba(0,0,0,0.45);
}

.stage{
  position:absolute; inset:0;
  background:var(--paper); color:var(--ink); overflow:hidden;
  font-size:clamp(12px, 1.35vw, 29px);
  display:flex; flex-direction:column;
  padding:1.05em 1.8em 0.7em; gap:0.55em;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.9s ease;
}
.stage.active{ opacity:1; visibility:visible; pointer-events:auto; }
.stage::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 42% at 12% -8%, var(--accent-soft) 0%, transparent 70%),
    radial-gradient(ellipse 60% 46% at 100% 112%, var(--accent2-soft) 0%, transparent 70%),
    linear-gradient(200deg, var(--accent-soft) -10%, transparent 45%);
  opacity:0.5;
}
.card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow); position:relative; z-index:1; }

/* ---------- Header (slim) ---------- */
.band-header{ flex:none; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.header-brand{ display:flex; align-items:center; gap:0.4em; }
.header-brand .sun-icon{ width:0.85em; height:0.85em; color:var(--accent); flex:none; }
.state-name{ font-size:2.2em; font-weight:700; line-height:1; }
.state-sub{ font-size:0.7em; font-weight:700; color:var(--ink-faint); letter-spacing:0.02em; margin-left:0.6em; }
.logo-plate{ padding:0.3em 0.5em; border-radius:var(--radius-s); background:#FBF3E6; box-shadow:var(--shadow); }
.logo-mark{ height:2.2em; width:auto; display:block; }

/* ---------- Decorative path rule (the "journey" motif) ---------- */
.path-rule{ flex:none; height:0.22em; border-radius:999px; margin:0 0.1em; position:relative; z-index:1;
  background:linear-gradient(90deg, var(--gold) 0%, var(--accent) 32%, var(--accent2) 100%); opacity:0.55; }

/* ---------- The motion card: numbers + chart together ---------- */
.motion-card{ flex:2.9; min-height:0; display:flex; flex-direction:column; padding:0.55em 1.1em 0.6em; }
.motion-numbers{ flex:none; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1em; padding-bottom:0.45em; border-bottom:1px solid var(--line); }
.motion-stat{ position:relative; }
.motion-stat .n{ font-family:var(--font-body); font-weight:800; font-size:2.5em; line-height:1; letter-spacing:-0.01em; position:relative; z-index:1; }
.motion-stat.primary{ padding:0.1em 0 0.1em 0.2em; }
.motion-stat.primary::before{
  content:''; position:absolute; left:-0.5em; top:-0.6em; width:6em; height:6em; z-index:-1;
  background:radial-gradient(circle, var(--accent-soft) 0%, transparent 72%); opacity:0.8; pointer-events:none;
}
.motion-stat.primary .n{ color:var(--accent2); font-size:2.9em; }
.motion-stat .l{ font-size:0.64em; font-weight:700; color:var(--ink-soft); margin-top:0.15em; }
.motion-stat .sub{ font-size:0.56em; font-weight:600; color:var(--ink-faint); margin-top:0.15em; line-height:1.3; }
.motion-chart-wrap{ flex:1; min-height:0; position:relative; margin-top:0.4em; }
.motion-chart-wrap svg{ width:100%; height:100%; display:block; }
.motion-chart-head{ flex:none; display:flex; justify-content:space-between; align-items:baseline; font-size:0.58em; font-weight:700; color:var(--ink-faint); margin-top:0.35em; }
.chart-year{ position:absolute; top:0.2em; right:0.3em; font-family:var(--font-body); font-weight:800; font-size:2.6em; color:var(--ink); opacity:0.16; line-height:1; pointer-events:none; z-index:1; }

/* ---------- Prevention Index card ---------- */
.band-index{ flex:0.95; min-height:0; position:relative; z-index:1; }
.index-card{ height:100%; padding:0.5em 1.1em; display:flex; align-items:center; gap:1em; }
.index-figure{ flex:none; text-align:left; }
.index-figure .n{ font-family:var(--font-body); font-weight:800; font-size:2.7em; line-height:1; color:var(--accent-ink); letter-spacing:-0.01em; }
.index-figure .l{ font-size:0.64em; font-weight:700; color:var(--ink-soft); margin-top:0.15em; line-height:1.35; }
.index-detail{ flex:1; font-size:0.62em; font-weight:600; color:var(--ink-soft); line-height:1.45; border-left:1px solid var(--line); padding-left:1em; }
.index-detail b{ color:var(--ink); }

/* ---------- Pictogram cards ---------- */
.band-pictogram{ flex:1.15; min-height:0; position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:0.7em; }
.pictogram-card{ height:100%; padding:0.55em 1.1em; display:flex; flex-direction:column; }
.pictogram-card h3{ font-size:0.72em; font-weight:700; flex:none; margin-bottom:0.25em; }
.pictogram-body{ flex:1; display:flex; align-items:center; gap:1em; min-height:0; }
.pictogram-grid{ flex:none; display:grid; grid-template-columns:repeat(10, 1fr); grid-template-rows:repeat(10, 1fr); gap:2px; width:5.2em; height:5.2em; }
.pictogram-grid .dot{ border-radius:50%; background:var(--sage); opacity:0.5; }
.pictogram-grid .dot.at-risk{ background:var(--accent-ink); opacity:1; }
.pictogram-grid .dot.c-thalassemia{ background:var(--accent); opacity:1; }
.pictogram-grid .dot.c-sickle{ background:var(--accent2); opacity:1; }
.pictogram-grid .dot.c-other{ background:var(--ink-faint); opacity:0.85; }
.pictogram-text{ font-size:0.62em; font-weight:600; color:var(--ink-soft); line-height:1.4; }
.pictogram-text b{ color:var(--ink); font-size:1.5em; font-family:var(--font-body); font-weight:800; display:block; line-height:1.1; margin-bottom:0.14em; }
.pictogram-legend{ display:flex; gap:1em; flex-wrap:wrap; margin-top:0.4em; font-size:0.94em; font-weight:700; }
.pictogram-legend span{ display:inline-flex; align-items:center; gap:0.4em; }
.pictogram-legend .sw{ width:0.8em; height:0.8em; border-radius:50%; flex:none; }

/* ---------- Closing "Road to 2047" slide ---------- */
.vision-hero-card{ flex:2.1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:0.15em; }
.vision-year{ font-family:var(--font-body); font-weight:800; font-size:6em; line-height:0.95; color:var(--accent-ink); letter-spacing:-0.01em; }
.vision-sub{ font-size:0.95em; font-weight:700; color:var(--ink-soft); }
.band-vision-stats{ flex:1.7; min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:0.7em; position:relative; z-index:1; }
.vision-stat{ padding:0.6em 1.1em; display:flex; flex-direction:column; }
.vision-stat h3{ font-size:0.72em; font-weight:700; flex:none; margin-bottom:0.25em; }
.vision-stat-text-wrap{ flex:1; display:flex; align-items:center; }
.vision-stat-text{ font-size:0.68em; font-weight:600; color:var(--ink-soft); line-height:1.5; }
.vision-stat-text b{ color:var(--ink); }
.state-grid{ grid-template-columns:repeat(7, 1fr); grid-template-rows:repeat(4, 1fr); width:6.4em; height:3.7em; }
.state-grid .dot{ border-radius:4px; }
.vision-cta{ flex:1.05; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0.5em 2em; background:var(--accent-soft); border-color:var(--accent); }
.vision-cta h3{ font-size:0.95em; font-weight:700; margin-bottom:0.2em; }
.vision-cta p{ font-size:0.66em; font-weight:600; color:var(--ink-soft); line-height:1.5; max-width:64ch; }

/* ---------- Fine print ---------- */
.band-note{ flex:none; display:flex; flex-direction:column; gap:0.3em; position:relative; z-index:1; }
.band-note-row{ display:flex; align-items:center; justify-content:space-between; gap:1em; }
.band-note p{ font-size:0.52em; color:var(--ink-faint); font-weight:600; line-height:1.35; max-width:100%; }
.band-note .credit{ font-size:0.52em; color:var(--ink-faint); font-weight:600; white-space:nowrap; }
.band-note .pillars{ display:flex; gap:1em; flex:none; }
.band-note .pillars span{ display:inline-flex; align-items:center; gap:0.32em; font-size:0.52em; font-weight:700; color:var(--ink-soft); letter-spacing:0.02em; }
.band-note .pillars svg{ width:1.1em; height:1.1em; color:var(--accent); flex:none; }

/* ---------- Player chrome ---------- */
.player-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:14px 20px; background:rgba(10,16,20,0.72); backdrop-filter:blur(6px);
  opacity:1; transition:opacity 0.5s ease;
}
.player-bar.idle{ opacity:0; pointer-events:none; }
.player-bar button{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08); color:#F5EEE1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; flex:none;
}
.player-bar button:hover{ background:rgba(255,255,255,0.18); }
.player-bar svg{ width:16px; height:16px; }
.player-dots{ display:flex; gap:8px; align-items:center; }
.player-dots button{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.3); border:none; padding:0; }
.player-dots button[aria-current="true"]{ background:#E98A2B; width:22px; border-radius:999px; }
.player-label{ color:#F5EEE1; font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:0.03em; min-width:8ch; text-align:center; }