/* 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);
}

.site-header nav a[aria-current="page"]::after { width: 100%; }
.guide-icon { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #dce8d3; color: #285943; }

@media (min-width: 1121px) {
  .site-header--product nav a { white-space: nowrap; }
}

@media (min-width: 851px) and (max-width: 1120px) {
  .site-header--product .header-cta { margin-left: auto; }
  .site-header--product .menu-toggle { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; justify-content: center; color: inherit; }
  .site-header--product .menu-toggle span { display: block; width: 27px; height: 1px; background: currentColor; }
  .site-header--product .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .site-header--product .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-header--product nav { display: none; position: absolute; inset: 100% 0 auto; flex-direction: column; gap: 4px; padding: 20px 6% 28px; color: var(--ink); background: #f7f5ec; border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px #102e2010; }
  .site-header--product nav.open { display: flex; }
  .site-header--product nav a { align-self: flex-start; padding: 13px 0; font-size: 16px; }
}

.lauren-page { color: #19382b; }
.lauren-page .eyebrow { color: #365544; font-weight: 700; text-transform: uppercase; }
.lauren-page p { font-size: clamp(1rem, 1.45vw, 1.125rem); line-height: 1.7; }
.lauren-intro { background: #e5edda; }
.lauren-layout { max-width: 68rem; margin-inline: auto; display: grid; gap: clamp(1.75rem, 6vw, 5.5rem); grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); align-items: center; }
.lauren-intro .breadcrumb { display: inline-block; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.lauren-intro h1 { margin: .65rem 0 1.1rem; font-size: clamp(2.65rem, 7.1vw, 6rem); line-height: 1.02; }
.lauren-intro-copy > p { max-width: 40ch; margin-bottom: 1.55rem; }
.lauren-portrait { width: 100%; max-width: 24rem; margin: 0; justify-self: end; }
.lauren-portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 32%; border-radius: 14px; background: #d9e5d1; }
.lauren-story { background: #f5f7ec; }
.lauren-story-layout { grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); align-items: start; }
.lauren-story h2, .lauren-check h2 { font-size: clamp(2rem, 4vw, 3.55rem); line-height: 1.08; margin: .7rem 0 1.2rem; }
.lauren-story-copy p { max-width: 62ch; }
.lauren-story-copy p:last-child { margin-bottom: 0; }
.lauren-check { background: #e5edda; }
.lauren-check-card { max-width: 55rem; margin-inline: auto; padding: clamp(1.4rem, 5.5vw, 4rem); border: 1px solid #b9c9b3; border-radius: 14px; background: #fffdf5; }
.lauren-check-card p { max-width: 62ch; }
.lauren-check-card .button { max-width: 100%; }
.lauren-check-card .button svg { flex-shrink: 0; }
.lauren-page .lauren-standards { max-width: 55rem; margin: 1.25rem auto 0; font-size: .95rem; }
.lauren-standards a { text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 720px) {
  .lauren-layout { grid-template-columns: minmax(0, 1fr); }
  .lauren-portrait { justify-self: start; }
  .lauren-story h2 { margin-bottom: 0; }
}

.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);
  }
}