.blue-mirage-page {
  --mirage-blue: #61b7d8;
  --mirage-deep: #03090d;
  --content-max-width: 1240px;
  --section-gap: clamp(64px, 8vh, 104px);
  --section-padding: clamp(24px, 6vw, 92px);
  --media-gap: clamp(14px, 2vw, 30px);
  --transition-duration: .9s;
  --hero-section-size: 82svh;
  --hero-text-x: max(6vw, calc((100vw - var(--content-max-width)) / 2));
  --hero-text-y: 9vh;
  --story-text-x: max(6vw, calc((100vw - var(--content-max-width)) / 2));
  --story-text-y: var(--section-gap);
  --image-scale: 1;
  --image-hover-scale: 1.018;
  --image-position-x: 50%;
  --image-position-y: 48%;
  --video-position-x: 50%;
  --video-position-y: 50%;
  --paired-media-height: 66vh;
  --cinematic-section-size: 72svh;
  --gallery-lead-height: 82vh;
  background: var(--mirage-deep);
}

.blue-mirage-page .masthead--inner {
  background: linear-gradient(180deg, rgba(2, 7, 10, .82), transparent);
}

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

.mirage-story-text {
  color: rgba(241, 238, 231, .86);
  font: 400 clamp(16px, 1.3vw, 21px)/1.62 "Playfair Display", Georgia, serif;
  margin: 0;
  max-width: 760px;
  white-space: pre-line;
}

.mirage-story-text--large { font-size: clamp(22px, 2.1vw, 36px); line-height: 1.4; }
.mirage-section-copy { margin: 0 auto clamp(38px, 5vh, 64px); max-width: var(--content-max-width); }
.mirage-section-copy .mirage-story-text { max-width: 980px; }
.mirage-section-number {
  color: rgba(241, 238, 231, .52);
  font: 400 9px/1.5 "DM Mono", monospace;
  letter-spacing: .17em;
  margin: 0 0 28px;
  text-transform: uppercase;
}

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

.mirage-hero__backdrop {
  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 8s ease;
  width: 100%;
  z-index: -3;
}

.mirage-hero:hover .mirage-hero__backdrop { --media-scale: var(--image-hover-scale); }
.mirage-hero__veil {
  background:
    linear-gradient(90deg, rgba(2, 7, 10, .94) 0%, rgba(2, 7, 10, .62) 46%, rgba(2, 7, 10, .14) 78%),
    linear-gradient(0deg, rgba(2, 7, 10, .86), transparent 62%);
  inset: 0;
  position: absolute;
  z-index: -2;
}

.mirage-hero__copy {
  bottom: var(--hero-text-y);
  left: var(--hero-text-x);
  max-width: 780px;
  position: absolute;
  z-index: 2;
}

.mirage-hero h1 {
  color: var(--ivory);
  font: 500 clamp(76px, 9.2vw, 148px)/.82 "Playfair Display", Georgia, serif;
  letter-spacing: -.07em;
  margin: 0 0 38px;
}

.mirage-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;
}
.mirage-scroll span { font-size: 17px; transition: transform .35s ease; }
.mirage-scroll:hover span { transform: translateY(4px); }

/* Butterfly symbolism */
.mirage-symbolism {
  background: radial-gradient(circle at 70% 20%, rgba(42, 128, 162, .15), transparent 40%), #050b0f;
  padding: var(--section-gap) var(--section-padding);
}
.mirage-symbolism__media {
  display: grid;
  gap: var(--media-gap);
  grid-template-columns: 1fr 1fr;
  margin: 0 auto;
  max-width: var(--content-max-width);
}
.mirage-symbolism__media figure {
  background: #02070a;
  height: var(--paired-media-height);
  min-height: 500px;
  overflow: hidden;
}
.mirage-symbolism__media img,
.mirage-symbolism__media video { height: 100%; width: 100%; }
.mirage-symbolism__media img { object-fit: var(--media-fit, cover); object-position: var(--media-position-x, 50%) var(--media-position-y, 52%); }
.mirage-symbolism__media video { object-fit: var(--media-fit, contain); object-position: var(--media-position-x, 50%) var(--media-position-y, 50%); }

/* Cultural meaning */
.mirage-culture {
  background: #03080b;
  isolation: isolate;
  min-height: var(--cinematic-section-size);
  overflow: hidden;
  position: relative;
}
.mirage-culture > video {
  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;
}
.mirage-culture__veil {
  background:
    linear-gradient(90deg, rgba(2, 7, 10, .9), rgba(2, 7, 10, .34) 68%),
    linear-gradient(0deg, rgba(2, 7, 10, .82), transparent 58%);
  inset: 0;
  position: absolute;
  z-index: -2;
}
.mirage-culture__copy {
  bottom: var(--story-text-y);
  left: var(--story-text-x);
  max-width: 900px;
  position: absolute;
}

/* Transformation */
.mirage-transformation { background: #060a0d; padding: var(--section-gap) var(--section-padding); }
.mirage-transformation__media {
  display: grid;
  gap: var(--media-gap);
  grid-template-columns: 1.08fr .92fr;
  margin: 0 auto;
  max-width: var(--content-max-width);
}
.mirage-transformation__media figure { aspect-ratio: 4 / 3; overflow: hidden; }
.mirage-transformation__media img { height: 100%; object-fit: var(--media-fit, cover); object-position: var(--media-position-x, 50%) var(--media-position-y, 50%); width: 100%; }

/* Final dress */
.mirage-final { background: #070a0d; padding: var(--section-gap) var(--section-padding) calc(var(--section-gap) * 1.25); }
.mirage-final__header,
.mirage-final__showcase { margin-left: auto; margin-right: auto; max-width: var(--content-max-width); }
.mirage-final__header { margin-bottom: clamp(42px, 6vh, 72px); }
.mirage-final h2 {
  color: var(--ivory);
  font: 500 clamp(58px, 7vw, 112px)/.9 "Playfair Display", Georgia, serif;
  letter-spacing: -.06em;
  margin: 0;
}
.mirage-final__showcase {
  display: grid;
  gap: var(--media-gap);
  grid-template-columns: 1.15fr .85fr;
}
.mirage-final__lead { background: #030609; height: var(--gallery-lead-height); min-height: 650px; overflow: hidden; }
.mirage-final__details { display: grid; gap: var(--media-gap); grid-template-rows: 1fr 1fr; }
.mirage-final__details figure { background: #030609; min-height: 0; overflow: hidden; }
.mirage-final__showcase img { height: 100%; object-fit: var(--media-fit, contain); object-position: var(--media-position-x, 50%) var(--media-position-y, 50%); width: 100%; }

/* Page-specific image framing */
.image-bluemirage-header { --media-position-x: 50%; --media-position-y: 48%; }
.image-bluemirage-sewing { --media-position-x: 50%; --media-position-y: 52%; }
.image-bluemirage-transformation-01,
.image-bluemirage-transformation-02 { --media-position-x: 50%; --media-position-y: 50%; }
.image-bluemirage-final-01,
.image-bluemirage-final-02,
.image-bluemirage-final-03 { --media-fit: contain; --media-position-x: 50%; --media-position-y: 50%; }

/* Page-specific video framing */
.video-bluemirage-fly { --media-fit: contain; --media-position-x: 50%; --media-position-y: 50%; }
.video-bluemirage-lapse { --media-fit: cover; --media-position-x: 50%; --media-position-y: 50%; }

/* Page-specific text positioning */
.story-text-bluemirage-hero { --text-max-width: 780px; --text-margin-left: 0px; --text-margin-top: 0px; }
.story-text-bluemirage-symbolism,
.story-text-bluemirage-transformation { --text-max-width: var(--content-max-width); --text-margin-left: auto; --text-margin-top: 0px; }
.story-text-bluemirage-culture { --text-max-width: 900px; --text-margin-left: 0px; --text-margin-top: 0px; }
.story-text-bluemirage-final { --text-max-width: var(--content-max-width); --text-margin-left: auto; --text-margin-top: 0px; }

/* Collection navigation */
.mirage-next { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
.mirage-next a {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 46px 7vw;
  transition: background .5s ease;
}
.mirage-next a + a { border-left: 1px solid var(--line); }
.mirage-next a:hover { background: #0b1820; }
.mirage-next span {
  color: var(--muted);
  font: 400 9px/1 "DM Mono", monospace;
  letter-spacing: .15em;
  margin-bottom: auto;
  text-transform: uppercase;
}
.mirage-next strong { font: 500 clamp(40px, 4.5vw, 70px)/1 "Playfair Display", Georgia, serif; letter-spacing: -.05em; }

@media (max-width: 1100px) {
  .blue-mirage-page { --section-padding: 5vw; }
  .mirage-hero__copy,
  .mirage-culture__copy { left: 5vw; }
}

@media (max-width: 780px) {
  .blue-mirage-page { --section-gap: 72px; --section-padding: 24px; }
  .mirage-hero { min-height: 88svh; }
  .image-bluemirage-header { --media-position-x: 62%; --media-position-y: 50%; }
  .mirage-hero__veil {
    background:
      linear-gradient(0deg, rgba(2, 7, 10, .98) 0%, rgba(2, 7, 10, .7) 62%, rgba(2, 7, 10, .28)),
      linear-gradient(90deg, rgba(2, 7, 10, .5), transparent);
  }
  .mirage-hero__copy { bottom: 48px; left: 24px; max-width: none; right: 24px; }
  .mirage-hero h1 { font-size: clamp(68px, 22vw, 104px); line-height: .86; margin-bottom: 28px; }
  .mirage-story-text { font-size: 16px; line-height: 1.58; white-space: normal; }
  .mirage-story-text--large { font-size: 23px; line-height: 1.42; }
  .mirage-scroll { display: none; }
  .mirage-symbolism__media,
  .mirage-transformation__media { grid-template-columns: 1fr; }
  .mirage-symbolism__media figure { height: 60svh; min-height: 410px; }
  .mirage-culture { min-height: 68svh; }
  .mirage-culture__copy { bottom: 48px; left: 24px; right: 24px; }
  .mirage-transformation__media figure { aspect-ratio: 4 / 3; }
  .mirage-final__header { margin-bottom: 42px; }
  .mirage-final__showcase { grid-template-columns: 1fr; }
  .mirage-final__lead { height: auto; min-height: 0; }
  .mirage-final__lead img { height: auto; }
  .mirage-final__details { gap: 14px; grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .mirage-final__details figure { height: 52svh; min-height: 380px; }
  .mirage-next { grid-template-columns: 1fr; }
  .mirage-next a { min-height: 190px; padding: 38px 24px; }
  .mirage-next a + a { border-left: 0; border-top: 1px solid var(--line); }
}

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