:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ecf4f1;
  --paper: #081211;
  --card: #101c1a;
  --card-strong: #142320;
  --muted: #9aa9a5;
  --line: #263633;
  --accent: #55d7c0;
  --accent-bright: #58e0c7;
  --accent-soft: #16352f;
  --deep: #050e0d;
  --deep-2: #0a1816;
  --on-deep: #f2f7f5;
  --shadow: 0 24px 70px rgba(0, 0, 0, .32);
  --header-bg: rgba(8, 18, 17, .86);
}

:root[data-theme="dark"] .brandMark { background: #eef6f3; color: #0d5e52; }
:root[data-theme="dark"] .navCta,
:root[data-theme="dark"] .button.primary,
:root[data-theme="dark"] .projectActions a.liveAction { border-color: #eef6f3; background: #eef6f3; color: #07110f; }
:root[data-theme="dark"] .navCta:hover,
:root[data-theme="dark"] .button.primary:hover,
:root[data-theme="dark"] .projectActions a.liveAction:hover { border-color: var(--accent); background: var(--accent); color: #06110f; }
:root[data-theme="dark"] .portraitCard,
:root[data-theme="dark"] .expertiseBand,
:root[data-theme="dark"] .contactSection { background: #050e0d; }
:root[data-theme="dark"] .projectMediaIcon { background: rgba(6, 17, 15, .9); color: #eff7f4; }
:root[data-theme="dark"] .floatingBadge { background: rgba(16, 28, 26, .94); }
:root[data-theme="dark"] .pageGlow { opacity: .72; }

.imageUnavailable::after {
  content: "Image unavailable";
  display: grid;
  place-items: center;
  min-height: 240px;
  color: var(--muted);
  font-size: 11px;
}