/* Narrative: the familiar grey, red, blue, and white of early YouTube. */
:root {
  --narrative-blue: #4187f5;
  --narrative-red: #fd4849;
  --narrative-ink: #000;
  --narrative-white: #fff;
  --narrative-paper: #f5f5f5;
  --narrative-ice: #eef5ff;
  --narrative-deep: #182b49;
  --neutral--100: var(--narrative-paper);
  --neutral--200: #e9e9e9;
  --neutral--300: #d9d9d9;
  --neutral--400: #545454;
  --neutral--500: var(--narrative-ink);
  --primary--red: var(--narrative-blue);
  --secondary--lt-yellow: var(--narrative-ice);
  --secondary--purple: var(--narrative-deep);
  --secondary--orange: var(--narrative-blue);
  --secondary--yellow: #c6dcff;
  --utility--default: #d8dfe5;
  --utility--focus: #185bc5;
}
.narrative-monogram { color: var(--narrative-blue); mix-blend-mode: multiply; }
.gradient-bg_canvas, .masthead-mark_media { background: var(--narrative-paper); }
.newsletter_bg canvas { background: var(--narrative-ice); }
.narrative-button { background: var(--narrative-blue); border-color: var(--narrative-blue); color: var(--narrative-ink); }
.narrative-button:hover { background: #70a5fa; border-color: #70a5fa; }
.narrative-button.secondary { color: var(--narrative-ink); background: transparent; border-color: currentColor; }
.booking-panel, dialog { background: var(--narrative-paper); border-color: var(--narrative-ink); }
.narrative-case-art { background: var(--narrative-blue); color: var(--narrative-ink); }
.narrative-case-art.purple { background: var(--narrative-deep); color: var(--narrative-white); }
.narrative-case-art.yellow, .team-type-art, .story-diagram { background: var(--narrative-ice); color: var(--narrative-ink); }
.story-diagram, details { border-color: var(--narrative-ink); }
/* White text is the brand preference on solid blue surfaces. */
body .nav-banner, body .nav-banner a, body .nav-banner_close,
body [background-color="red"], body [button-color="red"], body .button.is-primary,
body .narrative-button:not(.secondary) { color: var(--narrative-white); }
body .btn-animate-chars:has(.btn-animate-chars__bg[background-color="red"]),
body .btn-animate-chars:has(.btn-animate-chars__bg[background-color="red"]) .btn-animate-chars__text { color: var(--narrative-white); }
.process-cards_card:focus-visible, a:focus-visible, button:focus-visible { outline-color: var(--utility--focus); }
.narrative-editorial-image { filter: url(#narrative-duotone); }
.narrative-color-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.narrative-problem-icon .icon-ink { fill: var(--narrative-red); }
.narrative-problem-icon .icon-attribution-question .icon-ink { fill: currentColor; }
.process-cards_card.is-active .process-cards_timer-ring { color: var(--narrative-red); }
.process-cards_card.is-active .process-cards_timer-track { opacity: .8; }
.newsletter_card:first-child .narrative-case-art { background: var(--narrative-red); }
@media (max-width: 767px) {
  .nav-center.is-narrative-open { background: var(--narrative-white); border-color: var(--narrative-ink); }
}