/*
 * One full-width floral stage for each category.
 * The first word passes behind petals; the second stays in the foreground.
 */

.category-hero.category-composed {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: clamp(24px, 3vw, 45px) 0 clamp(40px, 5vw, 80px);
  overflow-x: clip;
  overflow-y: visible;
  background: #000;
  isolation: isolate;
  container-type: inline-size;
}
.category-composed > .category-kicker {
  position: relative;
  width: min(1280px, calc(100% - var(--gutter) * 2));
  max-width: none;
  margin: 0 auto;
  padding: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.7;
  text-align: center;
  z-index: 6;
}
.category-stage {
  --category-title-size: clamp(145px, 19vw, 350px);
  --category-title-top: clamp(34px, 3vw, 50px);
  --category-front-factor: .42;
  --category-front-top: calc(var(--category-title-top) + var(--category-title-size) * var(--category-front-factor));
  --category-front-scale: 1;
  --category-art-overhang: clamp(42px, 5vw, 90px);
  --category-canvas-width: 100vw;
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  height: max(
    calc(var(--category-title-top) + var(--category-title-size) * 1.9 + 24px),
    calc(var(--category-front-top) + var(--category-canvas-width) * var(--category-art-ratio, .5) * var(--category-front-scale) - var(--category-art-overhang))
  );
  min-height: 0;
  margin-top: clamp(12px, 1.4vw, 24px);
  overflow: visible;
  isolation: isolate;
}
.category-backdrop {
  position: absolute;
  inset: calc(-1 * clamp(110px, 10vw, 180px)) 0 -40px;
  overflow: visible;
  mask-image: linear-gradient(180deg, transparent 0%, #000 clamp(110px, 10vw, 180px), #000 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 clamp(110px, 10vw, 180px), #000 65%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.category-backdrop > .category-flower-back {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 140%;
  max-width: none;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center top;
  opacity: .4;
  filter: none;
  mix-blend-mode: normal;
  mask-image: none;
  -webkit-mask-image: none;
  transform: translate(-50%, var(--parallax-y, 0px));
}
.category-composed .category-scene-title {
  position: static;
  width: auto;
  max-width: none;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  color: var(--paper);
  font-family: var(--display);
  font-size: var(--category-title-size);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.025em;
  text-transform: uppercase;
  z-index: auto;
}
.category-scene-title > .category-word {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.category-word-first {
  top: var(--category-title-top);
  text-shadow: 0 3px 20px #0008;
  z-index: 2;
}
.category-word-second {
  top: calc(var(--category-title-top) + var(--category-title-size) * .88);
  text-shadow: 0 3px 20px #0008;
  z-index: 5;
}
.category-stage > .category-flower-front {
  position: absolute;
  top: var(--category-front-top);
  left: 50%;
  display: block;
  width: calc(100% * var(--category-front-scale));
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: center top;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  mask-image: none;
  -webkit-mask-image: none;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
}
.category-stage-single .category-word-first {
  top: var(--category-title-top);
  text-shadow: 0 3px 20px #0008;
  z-index: 5;
}
.category-composed > .archive-intro {
  position: relative;
  width: min(680px, calc(100% - var(--gutter) * 2));
  max-width: none;
  margin: clamp(25px, 3vw, 45px) auto 0;
  padding: 0;
  color: var(--paper);
  font-size: clamp(22px, 2.15vw, 32px);
  line-height: 1.45;
  letter-spacing: -.025em;
  text-align: center;
  text-shadow: 0 2px 10px #000d, 0 0 25px #0008;
  z-index: 6;
}
.category-composed + .archive-content {
  padding-top: clamp(16px, 2vw, 32px);
}

.category-theme-2 .category-stage {
  --category-front-factor: .38;
}
.category-theme-4 .category-stage {
  --category-front-factor: .35;
}

@media (min-width: 810px) {
  .category-theme-4 .category-stage {
    --category-front-scale: 1.1;
  }
}

@supports (width: 1cqw) {
  .category-stage {
    --category-canvas-width: 100cqw;
  }
}

@media (min-width: 810px) and (max-width: 1439.98px) {
  .category-theme-3 .category-backdrop > .category-flower-back {
    width: 210%;
  }
}

@media (max-width: 809px) {
  .category-hero.category-composed {
    padding-top: 23px;
    padding-bottom: 38px;
  }
  .category-composed > .category-kicker {
    width: calc(100% - var(--gutter) * 2);
    font-size: 8px;
  }
  .category-stage {
    --category-title-size: clamp(86px, 28.5vw, 220px);
    --category-title-top: clamp(24px, 4vw, 36px);
    --category-front-scale: 1.3;
    --category-art-overhang: clamp(32px, 5vw, 60px);
    aspect-ratio: auto;
    margin-top: 13px;
  }
  .category-backdrop > .category-flower-back {
    width: 220%;
    opacity: .4;
  }
  .category-composed .category-scene-title {
    font-size: var(--category-title-size);
    line-height: .9;
    letter-spacing: -.025em;
  }
  .category-scene-title > .category-word {
    left: var(--gutter);
    right: var(--gutter);
  }
  .category-stage > .category-flower-front {
    top: var(--category-front-top);
    width: calc(100% * var(--category-front-scale));
    height: auto;
    max-width: none;
    max-height: none;
  }
  .category-stage-single .category-word-first {
    top: var(--category-title-top);
  }
  .category-composed > .archive-intro {
    width: calc(100% - var(--gutter) * 2);
    max-width: 580px;
    margin: 24px auto 0;
    font-size: clamp(20px, 3.35vw, 26px);
    line-height: 1.45;
  }
  .category-composed + .archive-content {
    padding-top: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-backdrop > .category-flower-back {
    transform: translate(-50%, 0);
  }
}