/* Light visual direction: dark teal remains only as readable text. */
.subscribe-top {
  background: var(--yellow);
  color: var(--ink);
}

.hero {
  color: var(--ink);
}

.hero-shade {
  background: linear-gradient(90deg, rgba(250,247,239,.96) 0%, rgba(250,247,239,.82) 30%, rgba(250,247,239,.12) 62%, transparent 100%);
}

.hero-copy .intro {
  color: rgba(7,60,73,.88);
}

.hero-date {
  color: var(--ink);
  border-left-color: var(--yellow);
}

.quote-art {
  background: #dceff1;
  color: var(--ink);
}

.quote-art p {
  color: #52727a;
}

.newsletter {
  background: #dceff1;
  color: var(--ink);
}

.newsletter::before,
.newsletter::after {
  color: rgba(7,60,73,.05);
}

.newsletter form > div {
  border-color: rgba(7,60,73,.35);
  background: rgba(255,255,255,.55);
}

.newsletter input,
.newsletter input::placeholder {
  color: var(--ink);
}

.newsletter-consent {
  color: #496970 !important;
}

.newsletter-consent a {
  color: var(--ink);
}

.home-note img {
  mix-blend-mode: multiply;
}

.confirmation-page {
  background: var(--cream);
  color: var(--ink);
}

/* About: full artwork first, light text panel below. */
.about-hero {
  display: block;
  min-height: 0;
  max-height: none;
  aspect-ratio: auto;
  overflow: visible;
  background: var(--cream);
  color: var(--ink);
}

.about-photo {
  display: block;
  width: 100%;
  height: calc(100vh - 94px);
  min-height: 480px;
  max-height: 760px;
  aspect-ratio: auto;
  background: #f7f4ec;
  border: 0;
}

.about-photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  -webkit-mask-image: none;
  mask-image: none;
}

.about-intro {
  min-height: 0;
  align-items: center;
  padding: 62px 24px 70px;
  background: var(--cream);
  color: var(--ink);
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.about-intro::before {
  display: none;
}

.about-intro h1 {
  color: var(--ink);
}

.about-intro > p:last-of-type {
  color: #355a63;
}

.about-flags span {
  background: #fffdf8;
  border-color: var(--line);
}

.about-quote {
  background: #dceff1;
}

@media (max-width: 760px) {
  .about-photo {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 1600 / 1102;
  }

  .about-photo > img {
    object-fit: contain;
    object-position: center;
  }

  .about-intro {
    padding: 44px 20px 55px;
  }
}

@media (max-width: 560px) {
  .hero-image {
    object-position: 42% center;
  }

  .hero-copy h1 {
    font-size: clamp(44px, 14vw, 52px);
    line-height: .91;
  }

  .hero-copy {
    bottom: 48px;
  }

  .hero-shade {
    background: linear-gradient(0deg, rgba(250,247,239,.96), rgba(250,247,239,.3) 78%, transparent);
  }
}