/* Eclipse — page-specific framing within the shared dress-story system. */
.dress-story-page--eclipse {
  --story-accent: #d8d4cc;
  --story-glow: rgba(216, 212, 204, .1);
  --story-deep: #050505;
}

.dress-story-page--eclipse .masthead--inner {
  background: linear-gradient(180deg, rgba(3, 3, 3, .9), rgba(3, 3, 3, .2) 72%, transparent);
}

.eclipse-hero { --hero-section-size: 94svh; }
.image-eclipse-hero { --media-position-x: 58%; --media-position-y: 50%; }
.eclipse-hero .ds-hero__veil {
  background:
    linear-gradient(90deg, rgba(3, 3, 3, .96), rgba(3, 3, 3, .64) 52%, rgba(3, 3, 3, .16) 82%),
    linear-gradient(0deg, rgba(3, 3, 3, .9), transparent 66%);
}
.eclipse-hero .ds-hero__copy { max-width: 960px; }
.eclipse-hero .ds-hero__body { max-width: 860px; }

.eclipse-section-copy h2,
.eclipse-accessories h2 {
  color: var(--ivory);
  font: 500 clamp(48px, 5.4vw, 88px)/.92 "Playfair Display", Georgia, serif;
  letter-spacing: -.055em;
  margin: 0 0 clamp(30px, 4vh, 48px);
}

.eclipse-section-copy .ds-story-text + .ds-story-text { margin-top: 24px; }

.eclipse-split {
  align-items: center;
  display: grid;
  gap: clamp(44px, 7vw, 100px);
  grid-template-columns: minmax(360px, .86fr) minmax(0, 1.14fr);
}
.eclipse-split__copy { margin: 0; }
.eclipse-split__copy .ds-story-text { max-width: 640px; }
.eclipse-identity__media {
  aspect-ratio: 1;
  min-height: 0;
}
.eclipse-identity__media img {
  --media-fit: cover;
  --media-position-x: 50%;
  --media-position-y: 50%;
}

.eclipse-material-cover {
  background: #020303;
  padding: 0;
}
.eclipse-material-cover__media {
  height: clamp(560px, 68svh, 860px);
  min-height: 0;
  width: 100%;
}
.eclipse-material-cover__media img {
  --media-fit: cover;
  --media-position-x: 50%;
  --media-position-y: 50%;
}

.eclipse-landscape-video-section { padding: 0; }
.eclipse-landscape-video {
  height: clamp(560px, 68svh, 860px);
  isolation: isolate;
  min-height: 0;
  width: 100%;
}
.eclipse-landscape-video video {
  --media-fit: cover;
  --media-position-x: 50%;
  --media-position-y: 50%;
  inset: 0;
  position: absolute;
  z-index: 0;
}
.eclipse-landscape-video__veil {
  background: linear-gradient(90deg, rgba(2, 3, 3, .78) 0%, rgba(2, 3, 3, .38) 48%, rgba(2, 3, 3, .06) 100%);
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.eclipse-landscape-video__copy {
  bottom: clamp(48px, 8vh, 96px);
  left: clamp(28px, 6vw, 104px);
  margin: 0;
  max-width: 760px;
  position: absolute;
  right: clamp(28px, 8vw, 130px);
  z-index: 2;
}
.eclipse-landscape-video__copy .ds-story-text {
  color: #f3f0e9;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .7);
}

.eclipse-balance__layout {
  align-items: center;
  display: grid;
  gap: clamp(40px, 6vw, 90px);
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
}
.eclipse-balance__copy { margin: 0; }
.eclipse-balance__copy .ds-story-text { max-width: 600px; }
.eclipse-balance__copy .ds-story-text + .ds-story-text { margin-top: 24px; }
.eclipse-balance__media {
  align-items: start;
  display: grid;
  gap: var(--story-gap);
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
  min-width: 0;
}
.eclipse-balance__portrait {
  aspect-ratio: 3 / 4;
  min-height: 0;
}
.eclipse-balance__landscape {
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.eclipse-balance__portrait img,
.eclipse-balance__landscape img {
  --media-fit: cover;
  --media-position-x: 50%;
  --media-position-y: 50%;
}

.eclipse-process__split {
  align-items: center;
  display: grid;
  gap: clamp(42px, 7vw, 104px);
  grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
}
.eclipse-process__video {
  height: min(70vh, 780px);
  justify-self: start;
  min-height: 520px;
  width: min(100%, 440px);
}
.eclipse-process__video video {
  --media-fit: contain;
  --media-position-x: 50%;
  --media-position-y: 50%;
}
.eclipse-process__split-copy { margin: 0; }
.eclipse-process__split-copy .ds-story-text { max-width: 640px; }
.eclipse-process__peplum-copy {
  margin-bottom: clamp(34px, 5vh, 58px);
  margin-top: clamp(68px, 9vh, 112px);
}

.eclipse-process__pair .ds-media {
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
}
.eclipse-process__pair img {
  --media-fit: cover;
  --media-position-x: 50%;
  --media-position-y: 50%;
}

.eclipse-conclusion__copy { margin: 0; }
.eclipse-conclusion__copy .ds-story-text { max-width: 900px; }

.eclipse-final .eclipse-final__principal {
  aspect-ratio: auto;
  height: min(76vh, 840px);
  margin: 0 auto var(--story-gap);
  max-width: 760px;
  min-height: 560px;
  width: min(760px, 100%);
}
.eclipse-final__principal video,
.eclipse-final__gallery video {
  --media-fit: contain;
  --media-position-x: 50%;
  --media-position-y: 50%;
}
.eclipse-final__gallery {
  gap: var(--story-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--story-gap);
}
.eclipse-final__gallery figure {
  aspect-ratio: auto;
  height: min(64vh, 700px);
  min-height: 430px;
}
.eclipse-final__gallery > figure:first-child {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 760px;
  width: min(760px, 100%);
}
.eclipse-final__gallery img {
  --media-fit: cover;
  --media-position-x: 50%;
  --media-position-y: 50%;
}

.eclipse-accessories__header { margin-bottom: clamp(42px, 6vh, 72px); }
.eclipse-accessories__image {
  aspect-ratio: 1;
  margin: 0 auto;
  min-height: 0;
  width: min(100%, 900px);
}
.eclipse-accessories__image img {
  --media-fit: cover;
  --media-position-x: 50%;
  --media-position-y: 50%;
}

@media (max-width: 980px) {
  .eclipse-split { gap: clamp(30px, 5vw, 56px); grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); }
  .eclipse-balance__layout { gap: clamp(30px, 5vw, 56px); grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); }
  .eclipse-process__split { gap: clamp(32px, 5vw, 60px); grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr); }
  .eclipse-material-cover__media,
  .eclipse-landscape-video { height: min(64svh, 760px); min-height: 520px; }
}

@media (max-width: 780px) {
  .eclipse-hero { --hero-section-size: 96svh; }
  .image-eclipse-hero { --media-position-x: 67%; --media-position-y: 50%; }
  .eclipse-hero .ds-hero__veil {
    background:
      linear-gradient(0deg, rgba(3, 3, 3, .99), rgba(3, 3, 3, .74) 66%, rgba(3, 3, 3, .26)),
      linear-gradient(90deg, rgba(3, 3, 3, .5), transparent);
  }
  .eclipse-hero .ds-hero__copy { bottom: 38px; }
  .eclipse-hero .ds-hero__body { font-size: 14px; line-height: 1.5; }
  .eclipse-split { grid-template-columns: 1fr; }
  .eclipse-identity__media { width: 100%; }
  .eclipse-split__copy { padding-top: 8px; }
  .eclipse-balance__layout,
  .eclipse-balance__media,
  .eclipse-process__split { grid-template-columns: 1fr; }
  .eclipse-process__video {
    height: 64svh;
    justify-self: center;
    min-height: 440px;
    width: min(100%, 440px);
  }
  .eclipse-balance__portrait,
  .eclipse-balance__landscape,
  .eclipse-process__pair .ds-media,
  .eclipse-accessories__image { height: auto; min-height: 0; }
  .eclipse-process__peplum-copy { margin-top: 72px; }
  .eclipse-final .eclipse-final__principal,
  .eclipse-final__gallery figure {
    height: 58svh;
    min-height: 400px;
  }
  .eclipse-final__gallery { gap: 14px; grid-template-columns: 1fr; }
  .eclipse-final__gallery > figure:first-child { grid-column: auto; width: 100%; }
  .eclipse-final__gallery figure { width: 100%; }
  .eclipse-material-cover__media,
  .eclipse-landscape-video { height: clamp(420px, 58svh, 620px); min-height: 0; }
  .eclipse-landscape-video__copy {
    bottom: 42px;
    left: 24px;
    right: 24px;
  }
}

@media (max-width: 480px) {
  .eclipse-hero { min-height: 880px; }
  .eclipse-section-copy h2,
  .eclipse-accessories h2 { font-size: clamp(44px, 14vw, 62px); }
}