/* Lighter waterfront blues alternate with the campaign's navy anchors.
   Screen-only: keep the established economical print palette unchanged. */
@media screen {
  :root {
    --baby-blue: #d4ebf7;
    --sky-blue: #b9ddf2;
    --blue-ink: #102f43;
    --blue-copy: #294b60;
    --blue-line: #102f433b;
  }

  .priorities,
  .mosaic-projects {
    color: var(--blue-ink);
    background: var(--baby-blue);
  }

  .priorities .eyebrow,
  .mosaic-projects .eyebrow,
  .campaign-assets .eyebrow {
    color: var(--copper-dark);
  }

  .priorities .priority-intro-copy > p,
  .priorities .priority-card p,
  .priorities .platform-question-link,
  .mosaic-projects .projects-heading > p:last-child,
  .campaign-assets-heading > p:last-child {
    color: var(--blue-copy);
  }

  .priorities .priority-card {
    color: var(--blue-ink);
    border-top-color: var(--blue-line);
  }

  .priorities .card-topline,
  .priorities .card-link,
  .priorities .priority-card .card-link span,
  .priorities .priority-intro-copy .text-link {
    color: var(--copper-dark);
  }

  .priorities .platform-question-link a {
    color: var(--blue-ink);
  }

  /* Retain the dark theme links as a clear navigation anchor within the blue. */
  .priorities .platform-threads {
    border-color: var(--blue-ink);
    background: var(--blue-line);
  }

  .exploration-note {
    color: var(--blue-ink);
    background: var(--sky-blue);
    box-shadow: 12px 12px 0 #edf6fb;
  }

  .exploration-note .exploration-lead,
  .exploration-note .exploration-closing {
    color: var(--blue-copy);
  }

  .exploration-note .exploration-lead strong {
    color: var(--blue-ink);
  }

  .exploration-note .exploration-label span,
  .exploration-note .question-list li::before,
  .exploration-note .text-link {
    color: var(--copper-dark);
  }

  .exploration-note .question-list {
    border-color: var(--blue-line);
  }

  .campaign-assets {
    color: var(--blue-ink);
    background: var(--sky-blue);
    border-top-color: var(--copper);
  }

  .campaign-assets .campaign-asset figcaption a {
    color: var(--blue-ink);
  }

  :is(.priorities, .exploration-note, .mosaic-projects, .campaign-assets) a:focus-visible {
    outline: 3px solid var(--copper-dark);
    outline-offset: 5px;
  }

  .priorities .platform-threads a:focus-visible {
    outline-color: var(--cream);
    outline-offset: -5px;
  }
}