body {
  isolation: isolate;
  background: #100e13;
}

.campaign-air {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    repeating-linear-gradient(111deg, #eadcff04 0 1px, transparent 1px 13px),
    linear-gradient(145deg, #100d14, #18131b 45%, #100e12);
}
.campaign-air i {
  position: absolute;
  inset: -38%;
  background: radial-gradient(ellipse at 57% 48%, #774fac3d, transparent 32%);
}
.campaign-air i + i {
  background: radial-gradient(ellipse at 33% 65%, #b85d4426, transparent 28%);
  transform: translate3d(14%, 5%, 0);
}
.motion-enabled .campaign-air i { animation: air-drift 16s ease-in-out infinite alternate; }
.motion-enabled .campaign-air i + i { animation: air-drift 21s -7s ease-in-out infinite alternate-reverse; }
@keyframes air-drift {
  from { transform: translate3d(-11%, -5%, 0) rotate(-12deg); }
  to { transform: translate3d(15%, 10%, 0) rotate(18deg); }
}

.site-header { background: #141017c9; border-color: #b4a0c23b; }
.header-edition { color: #c7b6d1; }
.sequence { background: linear-gradient(115deg, #110e17c4 10%, #21152b50 74%, transparent); }
.hero { isolation: isolate; }
.hero-copy h1 {
  text-shadow: 1px 2px #493754, 2px 4px #362641, 4px 7px #23192c, 9px 15px 30px #08060dbb;
}
.set-design {
  position: absolute;
  z-index: -1;
  inset: 0 -18px;
  overflow: hidden;
  pointer-events: none;
  perspective: 900px;
}
.set-floor {
  position: absolute;
  inset: 15% -30% -48%;
  transform: translateY(19%) rotateX(61deg);
  background:
    repeating-linear-gradient(90deg, #c5a5ec38 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, #c5a5ec34 0 1px, transparent 1px 72px);
  mask-image: radial-gradient(ellipse at 62% 42%, #000 7%, transparent 59%);
}
.set-arc {
  position: absolute;
  right: 3%;
  top: 8%;
  width: 53%;
  aspect-ratio: 1;
  border: 1px solid #c99af08a;
  border-right-color: #dca9a77a;
  border-radius: 50%;
  box-shadow: 0 0 55px #ad6bef32, inset 0 0 20px #a469eb2c;
  transform: rotateX(24deg) rotateY(-25deg) rotateZ(22deg);
}
.set-arc-inner { right: 4.5%; top: 12%; width: 47%; opacity: .55; }
.motion-enabled .set-arc {
  transform: translateY(var(--set-shift, 0px)) rotateX(24deg) rotateY(calc(-25deg + var(--orbit, 0deg))) rotateZ(22deg);
}
.motion-enabled .set-arc-inner {
  transform: translateY(calc(var(--set-shift, 0px) * -.5)) rotateX(42deg) rotateY(calc(16deg - var(--orbit, 0deg))) rotateZ(-31deg);
}
.stage {
  border-color: #c9a8e57a;
  box-shadow: 14px 16px 0 -1px #17111f, 15px 17px #9a75bd52, 28px 35px 65px #050407ae;
}
.stage-rulers {
  position: absolute;
  inset: 36px 14px;
  pointer-events: none;
  border: 1px solid #c9a8e529;
  background:
    repeating-linear-gradient(0deg, #c9a8e568 0 1px, transparent 1px 9px) left center / 5px 42% no-repeat,
    repeating-linear-gradient(90deg, #c9a8e568 0 1px, transparent 1px 9px) center bottom / 42% 5px no-repeat;
}
.button { background: linear-gradient(135deg, #60358b, #2b193f); }

.campaign-index {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid #a586ba61;
  background: #a586ba61;
}
.campaign-index a {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 112px;
  padding: 13px clamp(12px, 2vw, 24px);
  background: linear-gradient(145deg, #2e2039, #17111f);
  isolation: isolate;
}
.campaign-index span { color: #c5aad8; font: 10px/1.4 var(--mono); letter-spacing: .09em; }
.campaign-index strong { font: 28px/1.15 var(--display); }
.campaign-index b { position: absolute; right: 14px; top: 12px; color: var(--accent); }
.motion-enabled .campaign-index a.pointer-active {
  z-index: 1;
  transform: perspective(480px) rotateX(var(--pointer-pitch)) rotateY(var(--pointer-yaw)) translateZ(12px);
  box-shadow: 0 11px 24px #09050dc7;
}

.section-heading { border-color: #a586ba64; }
.section-heading h2 { text-shadow: 2px 3px #422d4c, 5px 7px #231a2c; }
.collection-category > h3 { color: #e8d6f1; border-left: 2px solid #af84ce; padding-left: 12px; }
.product-image { border-color: #8c78994f; }
.look-section { background: linear-gradient(145deg, #2d203a98, #160f1bc4 67%, #231c29c4); }
.looks { gap: clamp(16px, 2.4vw, 32px); }
.look-image { border: 1px solid #aa8abe59; box-shadow: 9px 9px 0 -1px #131019, 10px 10px #9774b052; }
.looks figcaption { margin-top: 7px; }
.about { position: relative; isolation: isolate; }
.about-seal {
  position: absolute;
  z-index: -1;
  right: 2%;
  top: 16%;
  width: clamp(68px, 15vw, 210px);
  height: 70%;
  object-fit: contain;
  opacity: .12;
  transform: perspective(550px) rotateX(18deg) rotateY(-27deg) rotateZ(15deg);
  filter: drop-shadow(12px 16px 0 #a277c9);
}
.motion-enabled .about.pointer-active .about-seal {
  transform: perspective(550px) rotateX(calc(18deg + var(--pointer-pitch)))
    rotateY(calc(-27deg + var(--pointer-yaw))) rotateZ(15deg) translateZ(26px);
}
.site-footer { background: linear-gradient(140deg, #29163f, #17111f 70%, #322138); }
.motion-enabled :is(.campaign-index, .section-heading, .looks figure, .about, .footer-main) {
  transform: perspective(1150px) translateY(var(--chapter-rise, 0px)) rotateX(var(--chapter-angle, 0deg));
}

@media (max-width: 690px) {
  .set-design { inset-inline: -12px; }
  .set-arc { right: 2%; top: 32%; width: 88%; }
  .set-arc-inner { right: 7%; top: 37%; width: 74%; }
  .stage { box-shadow: 6px 8px 0 -1px #17111f, 7px 9px #9a75bd66, 12px 15px 29px #0504079e; }
  .stage-rulers { inset: 27px 8px; }
  .campaign-index a { min-height: 85px; padding: 20px 8px 10px; }
  .campaign-index span { font-size: 8px; }
  .campaign-index strong { font-size: clamp(16px, 5vw, 26px); }
  .campaign-index b { right: 6px; top: 3px; }
  .about-seal { width: 26%; right: 7%; }
  .motion-enabled .set-arc { animation: mobile-orbit 5s ease-in-out infinite alternate; }
  .motion-enabled .set-arc-inner { animation-direction: alternate-reverse; }
}

@keyframes mobile-orbit {
  from { rotate: -9deg; opacity: .45; }
  to { rotate: 10deg; opacity: .9; }
}

@media (pointer: coarse) {
  .motion-enabled :is(.stage, .product, .looks figure, .piece-viewport:not(.is-zoomed)) {
    touch-action: pan-y pinch-zoom;
  }
  .motion-enabled .stage-art,
  .motion-enabled .garment-art {
    transition: transform 150ms cubic-bezier(.2,.7,.25,1);
  }
  .motion-enabled .pointer-active :is(.product-image, .look-image)::after {
    background: radial-gradient(circle at var(--pointer-x) var(--pointer-y), #dfc7ff49, transparent 66%);
  }
}