/* Harbour: deep blue surfaces, clear text and saturated highlight colours. */
@media screen {
  :root {
    color-scheme: dark;
    --bg: #0b1e2b;
    --header: #102e40;
    --panel: #17384a;
    --raised: #20485b;
    --feature: #175368;
    --hover: #27576c;
    --fg: #fffaf3;
    --muted: #d3e6ee;
    --line: #427e91;
    --accent: #ffc278;
    --accent-ink: #302012;
    --ornament: #3e8da0;
    --tag-ink: #ffe0b8;
    --tag-line: #cc9255;
    --graph-bg: #0d2633;
    --graph-ink: #fffaf3;
    --graph-edge: #94ccdf;
    --card-blue: #174d78;
    --card-orange: #8c3e17;
    --card-teal: #12645b;
  }
  .profile-hero { background: var(--header); }
  .featured-band::before { background: var(--feature); }
  .selected-work-card:nth-child(3n+1) { background: var(--card-blue); }
  .selected-work-card:nth-child(3n+2) { background: var(--card-orange); }
  .selected-work-card:nth-child(3n) { background: var(--card-teal); }
  .selected-work-card { border: 1px solid #ffffff26; box-shadow: 0 8px 20px #07131b40; }
  .selected-work-card:hover { border-color: var(--accent); }
  .selected-work-card .work-event { color: var(--fg); }
  .selected-work-card:hover h4 { color: var(--fg); text-decoration: underline; text-underline-offset: 4px; }
  .read-more { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
  .read-more:hover { background: #f6d2ac; color: var(--accent-ink); }
  .paper-hero::before, .paper-hero::after { background: var(--ornament); }
  #paper-authors, .abstract-section p, .project-metadata { color: var(--muted); }
  .pdf-link, .supplementary-format { border-color: var(--tag-line); }
  .pdf-link:hover { background: var(--hover); }
  .keywords li { color: var(--tag-ink); border-color: var(--tag-line); background: var(--panel); }
  .project-symbol { background: var(--raised); border-color: var(--tag-line); }
  .project-symbol svg, .project-meta-item svg { stroke: var(--muted); }
  .project-meta-item .completed-icon path { stroke: var(--accent-ink); }
  .project-meta-item .ongoing-icon circle { fill: var(--raised); }
  .project-search .filter-group-toggle:hover, .filter-group-toggle[aria-expanded="true"],
  .project-search .filter-option:hover, .filter-option[aria-pressed="true"],
  #graph-options-toggle[aria-expanded="true"] { background: var(--hover); }
  .graph-stage { background: var(--graph-bg); }
  .graph-options, .graph-selection { background: var(--panel); }
  .graph-tooltip { background: var(--header); }
}