@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;
  --good:#4F6F53; --good-soft:#DCE5DA;
  --watch:#C99A3D; --watch-soft:#F1E2BE;
  --attn:#B0483A; --attn-soft:#F1DAD2;
  --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;
    --good:#7FA184; --good-soft:#1C2B21; --watch:#E0BE6E; --watch-soft:#3D2F14;
    --attn:#E08A78; --attn-soft:#3F241E;
    --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;
  --good:#7FA184; --good-soft:#1C2B21; --watch:#E0BE6E; --watch-soft:#3D2F14;
  --attn:#E08A78; --attn-soft:#3F241E; --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;
  --good:#4F6F53; --good-soft:#DCE5DA; --watch:#C99A3D; --watch-soft:#F1E2BE;
  --attn:#B0483A; --attn-soft:#F1DAD2; --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%; }
.icon{ width:1em; height:1em; fill:currentColor; flex:none; }
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.15em 1.7em; gap:0.6em;
  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 55% 38% at 10% -5%, var(--accent-soft) 0%, transparent 68%),
    radial-gradient(ellipse 55% 40% at 105% 108%, var(--accent2-soft) 0%, transparent 68%);
  opacity:0.55;
}
.card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow); overflow:hidden; position:relative; }

/* ---------- Header ---------- */
.band-header{ flex:none; min-height:6.1em; display:flex; align-items:flex-start; justify-content:space-between; gap:1.2em; position:relative; z-index:1; }
.brand{ display:flex; align-items:flex-start; gap:0.75em; }
.centre-badge{
  flex:none; width:2.5em; height:2.5em; border-radius:0.6em; background:var(--accent);
  color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.05em;
  display:flex; align-items:center; justify-content:center; letter-spacing:0.02em;
  box-shadow:var(--shadow);
}
.centre-name{ font-size:1.85em; font-weight:700; line-height:1.08; }
.centre-strapline{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:0.82em; color:var(--accent-ink); margin-top:0.18em; max-width:38ch; }
.centre-meta{ display:flex; gap:1.1em; margin-top:0.3em; flex-wrap:wrap; }
.centre-meta span{ font-size:0.58em; font-weight:600; color:var(--ink-soft); display:flex; align-items:center; gap:0.35em; }
.centre-meta .icon{ width:0.9em; height:0.9em; color:var(--accent); }
.header-right{ text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; }
.logo-plate{ padding:0.35em 0.6em; border-radius:var(--radius-s); background:#FBF3E6; box-shadow:var(--shadow); }
.logo-mark{ height:3.1em; width:auto; display:block; }
.host-lockup{ display:flex; align-items:center; gap:0.35em; justify-content:flex-end; margin-top:0.35em; font-size:0.52em; color:var(--ink-faint); font-weight:600; }
.host-lockup .host-mark{ width:1.05em; height:1.05em; color:var(--accent2); }
.host-lockup b{ color:var(--ink-soft); }

/* ---------- KPI stats ---------- */
.band-stats{ flex:none; height:6em; display:grid; grid-template-columns:repeat(6,1fr); gap:0.55em; position:relative; z-index:1; }
.stat-tile{ padding:0.5em 0.65em; display:flex; flex-direction:column; justify-content:center; }
.stat-tile .stat-icon{ width:1.05em; height:1.05em; color:var(--accent); margin-bottom:0.2em; }
.stat-tile .stat-number{ font-family:var(--font-display); font-weight:700; font-size:1.62em; font-variant-numeric:tabular-nums; line-height:1; }
.stat-tile .stat-label{ margin-top:0.2em; font-size:0.55em; color:var(--ink-soft); font-weight:600; }

/* ---------- Main content ---------- */
.band-main{ flex:2.5; min-height:0; display:grid; grid-template-columns:1fr 2.3fr; gap:0.6em; position:relative; z-index:1; }
.panel{ padding:0.7em 0.95em; display:flex; flex-direction:column; min-height:0; }
.panel h3{ font-size:0.78em; font-weight:700; margin-bottom:0.32em; flex:none; }

.clinical-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.5em; flex:none; }
.mini-stat{ background:var(--paper-sunken); border-radius:var(--radius-s); padding:0.65em 0.6em; }
.mini-stat .n{ font-family:var(--font-display); font-weight:700; font-size:1.42em; font-variant-numeric:tabular-nums; }
.mini-stat .l{ font-size:0.52em; color:var(--ink-soft); font-weight:600; margin-top:0.25em; }
.gender-bar{ display:flex; height:1.4em; border-radius:999px; overflow:hidden; border:1px solid var(--line); margin-top:0.4em; flex:none; }
.gender-bar span{ display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:0.54em; }
.clinical-note{ margin-top:0.45em; font-size:0.48em; color:var(--ink-faint); font-weight:600; flex:none; }

.growth-panel{ position:relative; }
.growth-head{ display:flex; justify-content:space-between; align-items:baseline; flex:none; }
.growth-head .sub{ font-size:0.5em; color:var(--ink-faint); font-weight:600; }
.growth-chart{ flex:1; min-height:0; position:relative; margin-top:0.3em; }
.growth-chart svg{ width:100%; height:100%; overflow:visible; }
.growth-legend{ flex:none; display:flex; gap:1.6em; margin-top:0.5em; flex-wrap:wrap; }
.growth-legend span{ display:inline-flex; align-items:center; gap:0.45em; font-size:0.62em; font-weight:700; color:var(--ink-soft); }
.growth-legend .sw{ width:1.5em; height:0.3em; border-radius:2px; }
.growth-legend b{ font-variant-numeric:tabular-nums; color:var(--ink); font-size:1.05em; }

.gline{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:drawline 16s linear infinite; }
.gdot{ opacity:0; animation:dotshow 16s linear infinite; }
.gscanner{ animation:scan 16s linear infinite; }
@keyframes drawline{ 0%{ stroke-dashoffset:var(--len); } 78%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; } }
@keyframes dotshow{ 0%{ opacity:0; } 76%{ opacity:0; } 78%{ opacity:1; } 100%{ opacity:1; } }
@keyframes scan{ 0%{ transform:translateX(0); opacity:1; } 78%{ transform:translateX(var(--scanmax)); opacity:1; } 84%{opacity:0;} 100%{ transform:translateX(0); opacity:0; } }
.stage:not(.active) .gline, .stage:not(.active) .gdot, .stage:not(.active) .gscanner{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
  .gline{ animation:none; stroke-dashoffset:0; }
  .gdot{ animation:none; opacity:1; }
  .gscanner{ animation:none; display:none; }
}

/* ---------- Signal board + roles ---------- */
.band-lower{ flex:none; height:6.6em; display:grid; grid-template-columns:1.2fr 1fr; gap:0.6em; position:relative; z-index:1; }
.indicators-panel{ padding:0.5em 0.9em; display:flex; flex-direction:column; }
.indicators-head{ display:flex; justify-content:space-between; align-items:baseline; flex:none; margin-bottom:0.35em; }
.indicators-panel h3{ font-size:0.7em; font-weight:700; }
.rag-legend{ display:flex; gap:0.7em; font-size:0.44em; font-weight:700; }
.rag-legend span::before{ content:''; display:inline-block; width:0.7em; height:0.7em; border-radius:50%; margin-right:0.3em; vertical-align:middle; }
.rag-legend .good{ color:var(--good); } .rag-legend .good::before{ background:var(--good); }
.rag-legend .watch{ color:var(--watch); } .rag-legend .watch::before{ background:var(--watch); }
.rag-legend .attn{ color:var(--attn); } .rag-legend .attn::before{ background:var(--attn); }
.meter-row{ display:flex; flex-direction:column; justify-content:space-around; gap:0.3em; flex:1; min-height:0; }
.meter-top{ display:flex; justify-content:space-between; font-size:0.54em; font-weight:600; color:var(--ink-soft); margin-bottom:0.18em; }
.meter-top .counts span{ font-variant-numeric:tabular-nums; font-weight:700; margin-left:0.6em; }
.meter-top .counts .good{ color:var(--good); } .meter-top .counts .watch{ color:var(--watch); } .meter-top .counts .attn{ color:var(--attn); }
.meter-track{ display:flex; height:0.55em; border-radius:999px; background:var(--paper-sunken); overflow:hidden; }
.meter-track span{ display:block; height:100%; }
.meter-track .good{ background:var(--good); } .meter-track .watch{ background:var(--watch); } .meter-track .attn{ background:var(--attn); }

.roles-panel{ padding:0.5em 1em; display:flex; align-items:center; justify-content:space-around; flex-wrap:wrap; row-gap:0.3em; height:100%; }
.role-card{ text-align:center; max-width:6.2em; }
.role-card .avatar{ width:3.2em; height:3.2em; margin:0 auto 0.3em; border-radius:50%; overflow:hidden; }
.role-card .avatar-photo{ width:2.7em; height:2.7em; margin:0 auto 0.28em; border-radius:50%; background-size:cover; background-position:center center; border:2px solid var(--paper-raised); box-shadow:var(--shadow); flex:none; }
.role-card h4{ font-size:0.56em; font-weight:700; line-height:1.15; }
.role-card .role-sub{ font-size:0.42em; color:var(--ink-faint); font-weight:600; margin-top:0.12em; line-height:1.2; }
.centre-badge.program{ background:var(--accent2); }
.footprint-row{ flex:1; min-height:0; display:flex; align-items:center; justify-content:space-around; }
.footprint-stat{ text-align:center; }
.footprint-stat .n{ font-family:var(--font-display); font-weight:700; font-size:1.5em; font-variant-numeric:tabular-nums; line-height:1; }
.footprint-stat .l{ font-size:0.5em; color:var(--ink-soft); font-weight:600; margin-top:0.3em; }

/* ---------- Honest note ---------- */
.band-note{ flex:none; padding:0.55em 0.9em; display:flex; align-items:center; gap:0.65em; position:relative; z-index:1; }
.band-note .icon{ width:1.3em; height:1.3em; color:var(--accent2); flex:none; }
.band-note p{ font-size:0.58em; color:var(--ink-soft); font-weight:600; line-height:1.3; }
.band-note b{ color:var(--ink); }

/* ---------- Footer ---------- */
.band-footer{ flex:none; height:1.4em; display:flex; align-items:center; justify-content:space-between; font-size:0.48em; color:var(--ink-faint); font-weight:600; border-top:1px solid var(--line); padding-top:0.3em; position:relative; z-index:1; }

/* ---------- Player chrome (outside the 16:9 frame content) ---------- */
.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 .icon{ 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; }