.cosmic-page {
  --cosmic-blue: #225f9c;
  --cosmic-violet: #7f3a91;
  --cosmic-deep: #050507;
  --content-max-width: 1240px;
  --section-gap: clamp(68px, 9vh, 118px);
  --section-padding: clamp(24px, 6vw, 92px);
  --panel-gap: clamp(14px, 2vw, 30px);
  --media-gap: var(--panel-gap);
  --transition-duration: .9s;
  --hero-section-size: 84svh;
  --hero-text-x: max(6vw, calc((100vw - var(--content-max-width)) / 2));
  --hero-text-y: 8vh;
  --image-scale: 1;
  --image-hover-scale: 1.018;
  --image-position-x: 50%;
  --image-position-y: 50%;
  --video-position-x: 50%;
  --video-position-y: 50%;
  --concept-section-size: 72svh;
  --panel-media-height: 64vh;
  --video-media-height: 70vh;
  --color-media-height: 66vh;
  --dance-media-height: 74vh;
  --gallery-lead-height: 82vh;
  --gallery-detail-height: 52vh;
  --gallery-closing-height: 58vh;
  background: var(--cosmic-deep);
  overflow-x: clip;
}

.cosmic-page .masthead--inner {
  background: linear-gradient(180deg, rgba(3, 3, 6, .86), rgba(3, 3, 6, .22) 72%, transparent);
}

.cosmic-page figure { margin: 0; }
.cosmic-page img,
.cosmic-page video { display: block; max-width: 100%; }
.cosmic-page [data-reveal] {
  transform: translateY(18px);
  transition-duration: var(--transition-duration);
}
.cosmic-page [data-reveal].is-visible { transform: none; }

.cosmic-story-text {
  color: rgba(241, 238, 231, .84);
  font: 400 clamp(16px, 1.25vw, 20px)/1.62 "Playfair Display", Georgia, serif;
  margin: 0;
  max-width: 740px;
  white-space: pre-line;
}

.cosmic-story-text--large {
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.42;
}

.cosmic-side-label {
  color: rgba(241, 238, 231, .5);
  font: 400 9px/1.4 "DM Mono", monospace;
  letter-spacing: .17em;
  margin: 0 0 22px;
  text-transform: uppercase;
}

/* Cosmic Hero */
.cosmic-hero {
  background: #050507;
  isolation: isolate;
  min-height: var(--hero-section-size);
  overflow: hidden;
  position: relative;
}

.cosmic-hero__image {
  height: 100%;
  inset: 0;
  object-fit: var(--media-fit, cover);
  object-position: var(--media-position-x, var(--image-position-x)) var(--media-position-y, var(--image-position-y));
  position: absolute;
  transform: scale(var(--media-scale, var(--image-scale)));
  transition: transform 9s ease;
  width: 100%;
  z-index: -3;
}

.cosmic-hero:hover .cosmic-hero__image { --media-scale: var(--image-hover-scale); }

.cosmic-hero__veil {
  background:
    linear-gradient(90deg, rgba(3, 5, 12, .92) 0%, rgba(3, 5, 12, .57) 45%, rgba(8, 3, 12, .2) 72%, rgba(8, 3, 12, .46)),
    linear-gradient(0deg, rgba(3, 3, 7, .86), transparent 62%);
  inset: 0;
  position: absolute;
  z-index: -2;
}

.cosmic-hero__copy {
  bottom: var(--hero-text-y);
  left: var(--hero-text-x);
  max-width: 980px;
  position: absolute;
  right: 6vw;
  z-index: 2;
}

.cosmic-hero .kicker {
  color: rgba(241, 238, 231, .58);
  margin-bottom: 25px;
}

.cosmic-hero h1 {
  color: var(--ivory);
  font: 500 clamp(62px, 8.1vw, 130px)/.82 "Playfair Display", Georgia, serif;
  letter-spacing: -.067em;
  margin: 0;
}

.cosmic-hero h1 span {
  font-style: italic;
  white-space: nowrap;
}

.cosmic-hero__subtitle {
  color: rgba(241, 238, 231, .74);
  font: 400 clamp(15px, 1.3vw, 20px)/1.4 "DM Mono", monospace;
  letter-spacing: .08em;
  margin: clamp(24px, 4vh, 42px) 0 0;
}

.cosmic-scroll {
  align-items: center;
  bottom: 28px;
  color: var(--muted);
  display: flex;
  font: 400 9px/1 "DM Mono", monospace;
  gap: 16px;
  letter-spacing: .15em;
  position: absolute;
  right: 4vw;
  text-transform: uppercase;
}

.cosmic-scroll span { font-size: 17px; transition: transform .35s ease; }
.cosmic-scroll:hover span { transform: translateY(4px); }

/* Cosmic Shared Concept */
.cosmic-concept {
  align-items: flex-end;
  background: #06060a;
  display: flex;
  isolation: isolate;
  min-height: var(--concept-section-size);
  overflow: hidden;
  padding: var(--section-gap) var(--section-padding);
  position: relative;
}

.cosmic-concept__image {
  height: 100%;
  inset: 0;
  object-fit: var(--media-fit, cover);
  object-position: var(--media-position-x, 50%) var(--media-position-y, 50%);
  position: absolute;
  width: 100%;
  z-index: -3;
}

.cosmic-concept__veil {
  background:
    linear-gradient(90deg, rgba(3, 5, 12, .94), rgba(3, 5, 12, .48) 64%, rgba(8, 3, 12, .28)),
    linear-gradient(0deg, rgba(3, 3, 7, .84), transparent 62%);
  inset: 0;
  position: absolute;
  z-index: -2;
}

.cosmic-concept__copy {
  margin: 0 auto;
  max-width: var(--content-max-width);
  width: 100%;
}

.cosmic-concept__copy .cosmic-story-text {
  max-width: 970px;
  text-shadow: 0 5px 28px rgba(0, 0, 0, .78);
}

/* Paired editorial sections */
.cosmic-section {
  background: #07070a;
  padding: var(--section-gap) var(--section-padding);
}

.cosmic-pair {
  display: grid;
  gap: var(--panel-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: 0 auto;
  max-width: var(--content-max-width);
}

.cosmic-panel,
.cosmic-video,
.cosmic-color { min-width: 0; }

.cosmic-panel figure {
  background: #03050a;
  height: min(var(--panel-media-height), 720px);
  min-height: 500px;
  overflow: hidden;
  position: relative;
}

.cosmic-panel img {
  height: 100%;
  object-fit: var(--media-fit, cover);
  object-position: var(--media-position-x, 50%) var(--media-position-y, 50%);
  transform: scale(var(--media-scale, var(--image-scale)));
  transition: transform 7s ease;
  width: 100%;
}

.cosmic-panel:hover img { --media-scale: var(--image-hover-scale); }
.cosmic-panel--gravity img { --media-position-y: 44%; }
.cosmic-panel--velocity img { --media-position-y: 42%; }
.cosmic-panel__veil {
  background: linear-gradient(0deg, rgba(3, 4, 9, .54), transparent 48%);
  inset: 0;
  position: absolute;
}

.cosmic-panel__copy { padding: clamp(28px, 4vh, 46px) 2px 0; }
.cosmic-panel h2,
.cosmic-gallery h2 {
  color: var(--ivory);
  font: 500 clamp(50px, 5.2vw, 82px)/.9 "Playfair Display", Georgia, serif;
  letter-spacing: -.055em;
  margin: 0 0 28px;
}
.cosmic-panel--gravity h2 { text-shadow: 0 0 34px rgba(34, 95, 156, .2); }
.cosmic-panel--velocity h2 { font-style: italic; text-shadow: 0 0 34px rgba(127, 58, 145, .2); }

/* Movement Videos */
.cosmic-videos {
  background:
    radial-gradient(circle at 18% 8%, rgba(34, 95, 156, .11), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(127, 58, 145, .1), transparent 34%),
    #050508;
}

.cosmic-video figure {
  background: #020205;
  height: min(var(--video-media-height), 760px);
  min-height: 540px;
  overflow: hidden;
}

.cosmic-video video {
  height: 100%;
  object-fit: var(--media-fit, contain);
  object-position: var(--media-position-x, 50%) var(--media-position-y, 50%);
  width: 100%;
}

.cosmic-video > .cosmic-story-text { margin-top: 30px; }

/* Color and character */
.cosmic-colors { background: #08070a; }
.cosmic-color figure {
  background: #030306;
  height: min(var(--color-media-height), 700px);
  min-height: 520px;
  overflow: hidden;
}

.cosmic-color img {
  height: 100%;
  object-fit: var(--media-fit, cover);
  object-position: var(--media-position-x, 50%) var(--media-position-y, 50%);
  transform: scale(var(--media-scale, var(--image-scale)));
  transition: transform 7s ease;
  width: 100%;
}

.cosmic-color:hover img { --media-scale: var(--image-hover-scale); }
.cosmic-color--gravity img { --media-position-y: 38%; }
.cosmic-color--velocity img { --media-position-y: 42%; }
.cosmic-color__copy { padding-top: clamp(30px, 4vh, 48px); }
.cosmic-color__copy .cosmic-story-text { max-width: 570px; }

/* Dance images */
.cosmic-dance {
  background: #030305;
  padding: var(--section-gap) var(--section-padding);
}

.cosmic-dance figure {
  background: #020205;
  height: min(var(--dance-media-height), 820px);
  min-height: 560px;
  overflow: hidden;
}

.cosmic-dance img {
  height: 100%;
  object-fit: var(--media-fit, contain);
  object-position: var(--media-position-x, 50%) var(--media-position-y, 50%);
  width: 100%;
}

/* Final gallery */
.cosmic-gallery {
  background:
    radial-gradient(circle at 15% 15%, rgba(34, 95, 156, .08), transparent 30%),
    radial-gradient(circle at 85% 62%, rgba(127, 58, 145, .09), transparent 32%),
    #07070a;
  padding: var(--section-gap) var(--section-padding) calc(var(--section-gap) * 1.25);
}

.cosmic-gallery__story {
  margin: 0 auto;
  max-width: var(--content-max-width);
}

.cosmic-gallery__story + .cosmic-gallery__story {
  border-top: 1px solid var(--line);
  margin-top: calc(var(--section-gap) * 1.15);
  padding-top: calc(var(--section-gap) * 1.15);
}

.cosmic-gallery__story > header { margin-bottom: clamp(42px, 6vh, 72px); }
.cosmic-gallery h2 { font-size: clamp(62px, 7vw, 112px); margin-bottom: 0; }
.cosmic-gallery__velocity h2 { font-style: italic; }

.cosmic-gallery__lead {
  display: grid;
  gap: var(--panel-gap);
  grid-template-columns: 1.28fr .72fr;
}

.cosmic-gallery__featured {
  background: #020205;
  height: min(var(--gallery-lead-height), 900px);
  min-height: 650px;
  overflow: hidden;
}

.cosmic-gallery__supporting {
  display: grid;
  gap: var(--panel-gap);
  grid-template-rows: 1fr 1fr;
}

.cosmic-gallery__supporting figure {
  background: #020205;
  min-height: 0;
  overflow: hidden;
}

.cosmic-gallery__lead img,
.cosmic-gallery__details img,
.cosmic-gallery__closing img {
  height: 100%;
  object-fit: var(--media-fit, cover);
  object-position: var(--media-position-x, 50%) var(--media-position-y, 50%);
  width: 100%;
}

.cosmic-gallery__lead--gravity .cosmic-gallery__featured img { --media-position-y: 40%; }
.cosmic-gallery__lead--velocity .cosmic-gallery__featured img { --media-fit: contain; }
.cosmic-gallery__details {
  display: grid;
  gap: var(--panel-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--panel-gap);
}

.cosmic-gallery__details figure {
  background: #020205;
  height: min(var(--gallery-detail-height), 620px);
  min-height: 430px;
  overflow: hidden;
}

.cosmic-gallery__details figure:nth-child(1) img { --media-position-y: 38%; }
.cosmic-gallery__details figure:nth-child(2) img { --media-position-y: 44%; }
.cosmic-gallery__details figure:nth-child(3) img { --media-position-y: 40%; }

.cosmic-gallery__closing {
  display: grid;
  gap: var(--panel-gap);
  grid-template-columns: 1.25fr .75fr;
  margin-top: var(--panel-gap);
}

.cosmic-gallery__closing figure {
  background: #020205;
  height: min(var(--gallery-closing-height), 680px);
  min-height: 450px;
  overflow: hidden;
}

.cosmic-gallery__closing figure:first-child img { --media-position-y: 44%; }
.cosmic-gallery__earrings img { --media-fit: contain; }

/* Page-specific image framing */
.image-cosmic-hero,
.image-cosmic-shared { --media-position-x: 50%; --media-position-y: 50%; }
.image-cosmic-gravity-intro { --media-position-x: 50%; --media-position-y: 44%; }
.image-cosmic-velocity-intro { --media-position-x: 50%; --media-position-y: 42%; }
.image-cosmic-gravity-color { --media-position-x: 50%; --media-position-y: 38%; }
.image-cosmic-velocity-color { --media-position-x: 50%; --media-position-y: 42%; }
.image-cosmic-gravity-dance,
.image-cosmic-velocity-dance { --media-fit: contain; --media-position-x: 50%; --media-position-y: 50%; }
.image-cosmic-final-01 { --media-position-x: 50%; --media-position-y: 40%; }
.image-cosmic-final-02,
.image-cosmic-final-03 { --media-position-x: 50%; --media-position-y: 50%; }
.image-cosmic-final-04 { --media-fit: contain; --media-position-x: 50%; --media-position-y: 50%; }
.image-cosmic-final-05,
.image-cosmic-final-06 { --media-position-x: 50%; --media-position-y: 50%; }
.image-cosmic-final-07 { --media-position-x: 50%; --media-position-y: 38%; }
.image-cosmic-final-08 { --media-position-x: 50%; --media-position-y: 44%; }
.image-cosmic-final-09 { --media-position-x: 50%; --media-position-y: 40%; }
.image-cosmic-final-10 { --media-position-x: 50%; --media-position-y: 44%; }
.image-cosmic-earrings { --media-fit: contain; --media-position-x: 50%; --media-position-y: 50%; }

/* Page-specific video framing */
.video-cosmic-gravity,
.video-cosmic-velocity { --media-fit: contain; --media-position-x: 50%; --media-position-y: 50%; }

/* Page-specific text positioning */
.story-text-cosmic-hero { --text-max-width: 980px; --text-margin-left: 0px; --text-margin-top: 0px; }
.story-text-cosmic-shared { --text-max-width: var(--content-max-width); --text-margin-left: auto; --text-margin-top: 0px; }
.story-text-cosmic-gravity-intro,
.story-text-cosmic-velocity-intro,
.story-text-cosmic-gravity-video,
.story-text-cosmic-velocity-video,
.story-text-cosmic-gravity-color,
.story-text-cosmic-velocity-color { --text-max-width: 740px; --text-margin-left: 0px; --text-margin-top: 0px; }
.story-text-cosmic-gravity-final,
.story-text-cosmic-velocity-final { --text-max-width: var(--content-max-width); --text-margin-left: auto; --text-margin-top: 0px; }

/* Collection navigation */
.cosmic-next {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cosmic-next a {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 46px 7vw;
  transition: background .5s ease;
}

.cosmic-next a + a { border-left: 1px solid var(--line); }
.cosmic-next a:hover { background: #10101a; }
.cosmic-next span {
  color: var(--muted);
  font: 400 9px/1 "DM Mono", monospace;
  letter-spacing: .15em;
  margin-bottom: auto;
  text-transform: uppercase;
}
.cosmic-next strong {
  font: 500 clamp(40px, 4.5vw, 70px)/1 "Playfair Display", Georgia, serif;
  letter-spacing: -.05em;
}

@media (max-width: 1100px) {
  .cosmic-page { --section-padding: 5vw; }
  .cosmic-hero__copy { --hero-text-x: 5vw; left: var(--hero-text-x); right: 5vw; }
  .cosmic-hero h1 { font-size: clamp(60px, 8.4vw, 94px); }
  .cosmic-panel figure,
  .cosmic-color figure { min-height: 440px; }
  .cosmic-video figure { min-height: 500px; }
  .cosmic-dance figure { min-height: 500px; }
}

@media (max-width: 780px) {
  .cosmic-page {
    --section-gap: 72px;
    --section-padding: 24px;
    --panel-gap: 16px;
  }

  .cosmic-story-text { font-size: 16px; line-height: 1.58; white-space: normal; }
  .cosmic-story-text--large { font-size: 22px; line-height: 1.42; }
  .cosmic-hero { min-height: 88svh; }
  .image-cosmic-hero { --media-position-x: 50%; --media-position-y: 50%; }
  .cosmic-hero__veil {
    background:
      linear-gradient(0deg, rgba(3, 3, 8, .98), rgba(3, 3, 8, .66) 62%, rgba(3, 3, 8, .24)),
      linear-gradient(90deg, rgba(3, 5, 12, .5), rgba(8, 3, 12, .24));
  }
  .cosmic-hero__copy { bottom: 46px; left: 24px; right: 24px; }
  .cosmic-hero h1 { font-size: clamp(52px, 16vw, 78px); line-height: .88; }
  .cosmic-hero h1 span { white-space: normal; }
  .cosmic-hero__subtitle { font-size: 12px; line-height: 1.5; }
  .cosmic-scroll { display: none; }

  .cosmic-concept { min-height: 68svh; }
  .image-cosmic-shared { --media-position-x: 50%; --media-position-y: 50%; }
  .cosmic-pair { grid-template-columns: 1fr; }
  .cosmic-panel + .cosmic-panel,
  .cosmic-video + .cosmic-video,
  .cosmic-color + .cosmic-color { margin-top: 52px; }

  .cosmic-panel figure,
  .cosmic-color figure {
    height: 58svh;
    min-height: 410px;
  }
  .cosmic-panel__copy { padding-top: 28px; }
  .cosmic-panel h2 { font-size: clamp(50px, 17vw, 72px); margin-bottom: 24px; }

  .cosmic-video figure {
    height: 65svh;
    min-height: 450px;
  }
  .cosmic-video > .cosmic-story-text { margin-top: 26px; }
  .cosmic-color__copy { padding-top: 28px; }

  .cosmic-dance figure {
    height: 62svh;
    min-height: 440px;
  }
  .cosmic-dance figure + figure { margin-top: 16px; }

  .cosmic-gallery__story > header { margin-bottom: 38px; }
  .cosmic-gallery h2 { font-size: clamp(56px, 20vw, 86px); }
  .cosmic-gallery__lead { grid-template-columns: 1fr; }
  .cosmic-gallery__featured { height: auto; min-height: 0; }
  .cosmic-gallery__featured img { --media-fit: contain; height: auto; max-height: 82svh; }
  .cosmic-gallery__supporting { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .cosmic-gallery__supporting figure { height: 48svh; min-height: 350px; }
  .cosmic-gallery__details { grid-template-columns: 1fr; }
  .cosmic-gallery__details figure { height: 58svh; min-height: 400px; }
  .cosmic-gallery__closing { grid-template-columns: 1fr; }
  .cosmic-gallery__closing figure { height: 54svh; min-height: 380px; }
  .cosmic-gallery__earrings { height: auto; min-height: 0; }
  .cosmic-gallery__earrings img { height: auto; }

  .cosmic-next { grid-template-columns: 1fr; }
  .cosmic-next a { min-height: 190px; padding: 38px 24px; }
  .cosmic-next a + a { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 480px) {
  .cosmic-gallery__supporting { grid-template-columns: 1fr; }
  .cosmic-gallery__supporting figure { height: 58svh; min-height: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-page [data-reveal],
  .cosmic-page img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}