/* A deeper shade of the brand blue anchors the footer. */
:root {
  --footer-navy: #101a24;
  --surface-gray-forward: linear-gradient(90deg, var(--gray-1) 0%, var(--gray-2) 34%, var(--gray-4) 66%, var(--gray-3) 100%);
  --surface-gray-backward: linear-gradient(90deg, var(--gray-3) 0%, var(--gray-4) 34%, var(--gray-2) 66%, var(--gray-1) 100%);
}

.page-index .mono-intro,
.page-about .about-story-opening,
.page-programs .programs-intro,
.page-programs .program-editorial,
.page-programs .online-program,
.page-story .story-intro,
.page-partners .partners-opening,
.page-partners .partners-together,
.page-contact .contact-opening {
  background: var(--paper);
  color: var(--ink);
}

.page-index .mono-program,
.page-programs .program-feature,
.page-about .about-story-invitation,
.page-contact .contact-information {
  background: var(--surface-gray-forward);
  color: var(--ink);
}

.page-index .mono-invitation,
.page-programs .program-notice,
.page-story .story-after,
.page-partners .partners-contact,
.page-programs .global-program,
.page-story .story-journey,
.page-partners .partners-encounter {
  background: var(--surface-gray-backward);
  color: var(--ink);
}

.page-about .about-story-experiences {
  background: #c6cacd;
  color: var(--ink);
}

.page-index .mono-story {
  background: #e3e3e3;
  color: var(--ink);
}

/* Horizontal color stops meet the slanted edge without a flat-color seam. */
.page-index .mono-program::before,
.page-index .mono-story::before,
.page-index .mono-invitation::before,
.page-about .about-story-experiences::before,
.page-about .about-story-invitation::before,
.page-programs .program-feature::before,
.page-programs .global-program::before,
.page-programs .program-notice::before,
.page-story .story-journey::before,
.page-story .story-after::before,
.page-partners .partners-contact::before,
.page-contact .contact-information::before {
  background: inherit;
}

.page-story .story-journey figcaption,
.page-partners .partners-team-photo figcaption,
.page-index .mono-story-title .eyebrow,
.page-index .mono-story .jo-credit,
.page-programs .global-program .word-world {
  color: var(--ink);
}

.page-story .story-final-quote {
  color: var(--ink);
}

.page-story .journey-word-okinawa {
  background: var(--surface-gray-forward);
  color: var(--ink);
}

.page-story .journey-word-japan {
  background: var(--paper);
  color: var(--ink);
}

.page-story .journey-options button {
  background: transparent;
  color: var(--ink);
}

.page-story .journey-options button[aria-selected="true"] {
  background: var(--blue);
  color: var(--paper);
}

.page-story .story-after .press-button {
  box-shadow: 4px 4px 0 var(--ink);
}

.page-index .mono-story .press-button {
  box-shadow: 4px 4px 0 var(--ink);
}

.site-footer {
  background: var(--footer-navy);
  color: var(--paper);
}

@media (hover: hover) {
  :is(.page-index, .page-about, .page-programs, .page-story, .page-partners, .page-contact) main .text-link:hover {
    color: inherit;
  }

  .page-index .mono-story .press-button:hover {
    background: var(--gray-4);
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
  }

  .page-story .story-after .press-button:hover {
    background: var(--gray-4);
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
  }
}