/* The homepage uses pale greens over the existing coastal film and photography. */
.home-page {
  --spring-paper: #f5f7ec;
  --spring-ink: #19382b;
  --spring-secondary: #365544;
  --spring-line: #aabda6;
  --spring-glass: rgba(239, 247, 227, .88);
  background: var(--spring-paper);
}

.home-page .disclosure {
  background: #d9e8ce;
  color: var(--spring-ink);
}

.home-page:not(.header-scrolled) .site-header {
  background: rgba(241, 247, 232, .91);
  border-color: rgba(255, 255, 255, .65);
  color: var(--spring-ink);
  backdrop-filter: blur(12px);
}

.home-page:not(.header-scrolled) .header-cta {
  border-color: #89a58e;
  background: rgba(255, 255, 255, .35);
  color: var(--spring-ink);
}

.home-page .film-hero {
  background: #aec6ae;
  color: var(--spring-ink);
}

.home-page .film-backdrop video {
  filter: brightness(1.37) saturate(1.04);
}

.home-page .film-shade {
  background: linear-gradient(90deg, rgba(220, 237, 215, .16), transparent 72%),
              linear-gradient(0deg, rgba(220, 237, 215, .2), transparent 36%);
}

.home-page .film-hero-copy,
.home-page .table-story-copy,
.home-page .moment-copy {
  background: var(--spring-glass);
  border: 1px solid rgba(250, 254, 243, .8);
  box-shadow: 0 12px 44px rgba(22, 53, 43, .12);
  color: var(--spring-ink);
  backdrop-filter: blur(5px);
}

.home-page .film-hero-copy {
  width: min(730px, 87%);
  right: auto;
  bottom: clamp(116px, 16vh, 160px);
  padding: clamp(26px, 4.3vw, 62px);
  border-radius: 22px;
}

.home-page .film-hero h1 {
  font-size: clamp(62px, 8.4vw, 110px);
  margin-bottom: 20px;
}

.home-page .film-hero h1 em,
.home-page .table-story-copy h2 em,
.home-page .moment-copy h2 em {
  color: #3a6549;
}

.home-page .hero-greeting {
  margin-bottom: 22px;
  color: var(--spring-secondary);
}

.home-page .hero-greeting > span {
  background: #60836a;
}

.home-page .film-hero-copy > p,
.home-page .table-story-copy p {
  color: var(--spring-secondary);
}

.home-page .film-hero-actions .button,
.home-page .table-story-copy .button {
  background: #234a36;
  color: #f9fff2;
}

.home-page .film-hero-actions .button:hover,
.home-page .table-story-copy .button:hover {
  background: #326448;
}

.home-page .watch-button,
.home-page .moment-play {
  color: var(--spring-ink);
}

.home-page .play-circle,
.home-page .moment-play > span {
  background: #e2eed8;
  border-color: #7d9b81;
}

.home-page .film-hero-note {
  align-items: center;
  padding: 8px 15px;
  border: 1px solid rgba(250, 254, 243, .75);
  border-radius: 12px;
  background: rgba(238, 247, 227, .92);
  backdrop-filter: blur(6px);
}

.home-page .film-hero-note > span,
.home-page .film-toggle {
  color: var(--spring-ink);
}

.home-page .film-hero-note > a > span,
.home-page .film-toggle {
  background: #e4efd9;
  border-color: #91ac93;
}

.home-page .film-timeline {
  background: rgba(242, 249, 233, .5);
}

.home-page .film-timeline > span {
  background: #3a694a;
}

.home-page .testing-story,
.home-page .cinematic-range,
.home-page .contact-section {
  color: var(--spring-ink);
  background: linear-gradient(130deg, #edf4e4, #e2ecd7);
}

.home-page .cinematic-range .eyebrow,
.home-page .cinematic-range .section-aside,
.home-page .cinematic-range .range-card .article-meta,
.home-page .cinematic-range .range-card p,
.home-page .range-afterword,
.home-page .contact-intro > p {
  color: var(--spring-secondary);
}

.home-page .cinematic-range .section-aside .text-link,
.home-page .cinematic-range .range-card .read-link {
  color: var(--spring-ink);
}

.home-page .range-afterword {
  border-color: var(--spring-line);
}

.home-page .table-story,
.home-page .moment-section {
  background: #b5cbb0;
}

.home-page .table-shade,
.home-page .moment-shade {
  background: rgba(210, 230, 205, .17);
}

.home-page .table-story-copy {
  width: min(570px, 86%);
  padding: clamp(25px, 4vw, 54px);
  border-radius: 18px;
}

.home-page .table-story-copy h2 {
  font-size: clamp(45px, 5.2vw, 78px);
}

.home-page .table-caption {
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--spring-glass);
  color: var(--spring-ink);
}

.home-page .moment-copy {
  left: 50%;
  right: auto;
  width: min(680px, 86%);
  margin-left: max(-340px, -43%);
  padding: clamp(24px, 4vw, 46px);
  border-radius: 18px;
}

.home-page .moment-copy h2 {
  font-size: clamp(48px, 6vw, 84px);
}

.home-page .faq-section {
  background: #eef3e6;
}

.home-page .contact-section form {
  background: rgba(252, 255, 246, .72);
  border-color: var(--spring-line);
}

.home-page .film-dialog,
.home-page footer {
  background: #e5eddc;
  color: var(--spring-ink);
}

.home-page .film-dialog > p,
.home-page .film-close,
.home-page .footer-grid p,
.home-page .footer-note,
.home-page .footer-bottom {
  color: var(--spring-secondary);
}

.home-page .footer-top,
.home-page .footer-bottom {
  border-color: var(--spring-line);
}

.home-page footer .outline-light {
  border-color: #799780;
  color: var(--spring-ink);
}

.home-page footer::after {
  color: rgba(83, 123, 91, .15);
}

/* Illustrated type covers keep the site’s photography reserved for features. */
.article-cover.editorial-cover,
.range-art.is-editorial,
.product-visual.editorial-product-visual {
  --cover-paper: #e5efdb;
  --cover-accent: #3d6547;
  --cover-ink: #183629;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(57, 89, 63, .2);
  border-radius: 8px;
  color: var(--cover-ink);
  background: linear-gradient(145deg, var(--cover-paper), #f6f7ea 97%);
}

.editorial-cover.cover-1,
.range-art.is-editorial.range-1,
.editorial-product-visual.range-1 {
  --cover-paper: #eee4c8;
  --cover-accent: #705536;
}

.editorial-cover.cover-2,
.range-art.is-editorial.range-2,
.editorial-product-visual.range-2 {
  --cover-paper: #dae9e2;
  --cover-accent: #355f57;
}

.editorial-cover::before,
.range-art.is-editorial::before,
.editorial-product-visual::before {
  position: absolute;
  z-index: -1;
  inset: 9px;
  content: "";
  border: 1px solid var(--cover-accent);
  border-radius: 4px;
  opacity: .22;
  pointer-events: none;
}

.editorial-cover::after,
.range-art.is-editorial::after,
.editorial-product-visual::after {
  position: absolute;
  z-index: -1;
  right: -19%;
  bottom: -60%;
  width: 87%;
  aspect-ratio: 1;
  content: "";
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 14px, var(--cover-accent) 15px 16px);
  opacity: .16;
  pointer-events: none;
}

.article-cover.editorial-cover .cover-label,
.range-art.is-editorial > .eyebrow {
  padding: 5px 8px;
  background: rgba(255, 255, 255, .55);
  border-radius: 4px;
  color: var(--cover-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .07em;
}

.editorial-cover .cover-number {
  position: absolute;
  left: 20px;
  bottom: 15px;
  color: var(--cover-accent);
  font: 700 clamp(59px, 12vw, 160px)/.86 var(--sans);
  letter-spacing: -.09em;
  pointer-events: none;
}

.range-art.is-editorial {
  height: clamp(230px, 28vw, 350px);
}

.range-art.is-editorial > .eyebrow {
  display: inline-block;
}

.range-art.is-editorial .range-image-title {
  color: var(--cover-ink);
  font-size: clamp(28px, 3.1vw, 47px);
  line-height: 1.07;
  overflow-wrap: anywhere;
}

.product-visual.editorial-product-visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  height: auto;
  min-height: clamp(265px, 40vw, 520px);
  padding: clamp(28px, 5vw, 72px);
}

.editorial-product-visual > strong {
  max-width: 100%;
  color: var(--cover-accent);
  font-size: clamp(36px, 5.1vw, 78px);
  line-height: .98;
  letter-spacing: -.065em;
  overflow-wrap: anywhere;
}

.product-visual.editorial-product-visual > span {
  position: static;
  padding: 5px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .55);
  color: var(--cover-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .07em;
}

.editorial-cover .cover-arrow,
.range-art.is-editorial .cover-arrow {
  background: #f8fbf2;
  border-color: #9eb29a;
  color: var(--cover-ink);
}

.article-cover.editorial-cover:focus-visible,
.range-art.is-editorial:focus-visible {
  outline: 3px solid #3c6c4a;
  outline-offset: 4px;
}

.home-page .cinematic-range .range-art.is-editorial {
  height: clamp(260px, 30vw, 390px);
}

.home-page .cinema-journal .journal-card:first-child .editorial-cover {
  height: clamp(280px, 40vw, 470px);
}

@media (max-width: 560px) {
  .home-page .film-hero-copy {
    width: 86%;
    bottom: 148px;
    padding: 24px 20px;
    border-radius: 14px;
  }

  .home-page .film-hero h1 {
    font-size: clamp(36px, 13.5vw, 74px);
  }

  .home-page .film-hero-actions {
    flex-wrap: wrap;
    gap: 6px 17px;
  }

  .home-page .film-hero-note {
    gap: 9px;
    padding: 5px 9px;
  }

  .home-page .film-toggle {
    padding-right: 10px;
    padding-left: 10px;
  }

  .home-page .table-story-copy h2,
  .home-page .moment-copy h2 {
    font-size: clamp(39px, 10vw, 56px);
  }
}