.lh-mag.moments-feature {
  --moment-paper: #f4efe7;
  --moment-dark: #321d2a;
  --moment-glow: #754553;
  --moment-accent: #f1c7b6;
  --moment-cover-focus: 50% 47%;
  overflow: clip;
}

.moments-feature[data-moment="proposal"] { --moment-cover-focus: 50% 65%; }
.moments-feature[data-moment="gift"] {
  --moment-dark: #34251f;
  --moment-glow: #795546;
  --moment-accent: #f4c8a0;
}
.moments-feature[data-moment="valentine"] {
  --moment-dark: #3d1727;
  --moment-glow: #833c50;
  --moment-cover-focus: 50% 55%;
}
.moments-feature[data-moment="new-year"] {
  --moment-dark: #262333;
  --moment-glow: #544560;
  --moment-accent: #e8cedd;
}
.moments-feature[data-moment="christmas"] {
  --moment-dark: #362024;
  --moment-glow: #744743;
  --moment-accent: #f0cfaa;
  --moment-cover-focus: 50% 55%;
}

.moments-feature .hero .hero-grid {
  display: block;
  margin-inline: auto;
  text-align: center;
}
.moments-feature .hero h1 {
  max-width: 24ch;
  margin-inline: auto;
  font: 400 clamp(2.4rem, 5vw, 5.1rem)/1.04 MadeMirage, Georgia, serif;
  text-wrap: balance;
}
.moments-feature .hero .hero-lede {
  max-width: 54ch;
  margin: 1.5rem auto 0;
}
.moments-feature .hero .hero-side {
  max-width: 50ch;
  margin: 1.45rem auto 0;
  padding: 0;
  border: 0;
}
.moments-feature .hero .hero-side p { margin-bottom: 0; }
.moments-feature .hero .hero-side strong {
  font: 600 .85rem/1.5 Switzer, Arial, sans-serif;
  color: #754654;
}

.article-cinema .moments-feature.lh-mag > .hero-media {
  width: 94%;
  max-width: 1380px;
  height: clamp(360px, 58vw, 76svh);
  margin: 0 auto clamp(2rem, 5vw, 5rem);
}
.article-cinema .moments-feature .article-hero-camera > :is(img, video) {
  object-position: var(--moment-cover-focus);
}

.moments-feature .section .section-head {
  display: block;
  margin: 0 auto clamp(1.5rem, 4vw, 3rem);
  text-align: center;
}
.moments-feature .section .section-num { display: none; }
.moments-feature .section .section-head h2 {
  max-width: 25ch;
  margin-inline: auto;
  font: 400 clamp(2rem, 4.3vw, 3.85rem)/1.1 MadeMirage, Georgia, serif;
  text-wrap: balance;
}
.moments-feature .section .copy {
  width: min(100%, 64ch);
  max-width: none;
  margin-inline: auto;
}
.moments-feature .section .copy .lead {
  font: 400 clamp(1.4rem, 2.5vw, 1.95rem)/1.45 MadeMirage, Georgia, serif;
}
.moments-feature .section--cream { background: var(--moment-paper); }
.moments-feature .section--deep {
  background: radial-gradient(ellipse at 50% 0%, var(--moment-glow), var(--moment-dark) 82%);
}
.moments-feature .section--deep .copy :is(p, .lead) { color: #fff8f0; }
.moments-feature :is(.quote, .memory, .resolution) .display {
  font-family: MadeMirage, Georgia, serif;
  text-wrap: balance;
}

.moments-feature .moments-panel {
  min-width: 0;
  border: 0;
  color: #fff8f0;
  background: radial-gradient(ellipse at 10% 0%, var(--moment-glow), var(--moment-dark) 88%);
}
.moments-feature .moments-panel:nth-child(even) {
  background: radial-gradient(ellipse at 90% 0%, var(--moment-glow), var(--moment-dark) 88%);
}
.moments-feature .moments-panel :is(h3, p) { color: #fff8f0; }
.moments-feature .moments-panel h3 { font-family: MadeMirage, Georgia, serif; }
.moments-feature .moments-panel > span { color: var(--moment-accent); }

.moments-feature .article-related-section .section-head h2 { max-width: none; }
.moments-feature .article-related-section .article-related-grid + .article-related-grid {
  margin-top: clamp(1.5rem, 4vw, 3.75rem);
}
.moments-feature .cta { padding-block: clamp(3rem, 6vw, 5.5rem); }
.moments-feature .cta .display { font-family: MadeMirage, Georgia, serif; }

@media (min-width: 761px) {
  .moments-feature :is(.idea-grid, .prep-grid, .reason-grid, .offer-grid, .ritual-grid, .reconnect-grid, .gift-steps) {
    gap: clamp(2.15rem, 3vw, 2.75rem);
  }
}

@media (max-width: 760px) {
  .article-cinema .moments-feature.lh-mag > .hero-media {
    width: 100%;
    height: clamp(16rem, 92vw, 27rem);
  }
  .moments-feature .cta-actions { padding-bottom: .75rem; }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .article-cinema .moments-feature.lh-mag > .hero-media {
    transform: none;
    clip-path: inset(0 calc((1 - var(--article-frame-scale, 1)) * 50%));
  }
}