/* Crimson velvet campaign. Scoped separately so previous campaigns stay intact. */
.noctelle-campaign.rose-campaign {
  --campaign-gold: #e8c8a0;
  min-height: max(590px, calc(100svh - var(--hero-header-height)));
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 52px clamp(42px, 7.5vw, 150px) 86px;
  gap: 5%;
  background: #260c12;
}
.noctelle-campaign .campaign-scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  pointer-events: none;
}
.noctelle-campaign .campaign-scene .campaign-roses {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
}
.noctelle-campaign.rose-campaign:after {
  background: linear-gradient(90deg, #21080d80, #21080d22 42%, transparent 62%),
    linear-gradient(0deg, #16090db0, transparent 25%);
}
.noctelle-campaign.rose-campaign .campaign-copy {
  align-self: center;
  width: 100%;
  max-width: 680px;
  padding: 0;
}
.noctelle-campaign.rose-campaign .campaign-copy .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 9px;
  letter-spacing: .2em;
  color: #ecd2af;
  margin-bottom: 28px;
}
.noctelle-campaign .campaign-star { font-size: 22px; line-height: 1; }
.noctelle-campaign.rose-campaign .campaign-copy h1 {
  font-family: var(--serif);
  font-size: clamp(102px, 9vw, 170px);
  line-height: .8;
  font-weight: 500;
  letter-spacing: -.055em;
  color: #f5e7d3;
  margin: 0 0 34px;
  text-shadow: 0 4px 36px #16070c40;
}
.noctelle-campaign.rose-campaign .campaign-copy h1 em {
  display: inline-block;
  font-weight: 500;
  line-height: 1.08;
  color: var(--campaign-gold);
}
.noctelle-campaign.rose-campaign .campaign-copy .campaign-intro {
  font-size: 14px;
  line-height: 1.8;
  color: #f0ded1;
  max-width: 430px;
  margin-bottom: 28px;
}
.noctelle-campaign .campaign-actions { gap: 25px; }
.noctelle-campaign.rose-campaign .campaign-actions .button {
  min-height: 54px;
  padding: 16px 25px;
  gap: 28px;
  background: #e8c8a0;
  border-color: #e8c8a0;
  color: #2b1117;
  box-shadow: 0 8px 28px #14060b26;
}
.noctelle-campaign.rose-campaign .campaign-actions .button:hover {
  background: #f6deba;
  border-color: #f6deba;
}
.noctelle-campaign.rose-campaign .campaign-copy .campaign-note {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  margin: 27px 0 0;
  font-size: 8px;
  letter-spacing: .17em;
  color: #d6bba7;
  max-width: none;
}
.noctelle-campaign.rose-campaign .campaign-product {
  position: absolute;
  inset: 21% 6% 10% 49%;
  width: auto;
  height: auto;
  max-width: none;
  min-width: 0;
  justify-self: stretch;
  align-self: stretch;
  margin: 0;
  transform: none;
  overflow: visible;
  background: transparent;
}
.noctelle-campaign.rose-campaign .campaign-product > span {
  display: flex;
  inset: auto 3% 0 8%;
  align-items: center;
  gap: 24px;
  padding: 16px 0 0;
  border-top: 1px solid #e8c8a045;
  background: transparent;
  text-shadow: 0 2px 12px #19090e;
  font-size: 8px;
  letter-spacing: .2em;
  color: #ead2b8;
}
.noctelle-campaign .campaign-product small {
  font-size: clamp(24px, 1.9vw, 36px);
  line-height: 1.15;
  margin-top: 8px;
  color: #f6e9d8;
}
.noctelle-campaign .campaign-product .campaign-product-arrow {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border: 1px solid #e8c8a060;
  border-radius: 50%;
  font-size: 23px;
  transition: background .2s ease, transform .2s ease;
}
.noctelle-campaign .campaign-product:hover .campaign-product-arrow {
  background: #e8c8a01f;
  transform: translate(2px, -2px);
}
.noctelle-campaign .campaign-product:focus-visible { outline: 1px solid #e8c8a0; outline-offset: 8px; }
.noctelle-campaign.rose-campaign .campaign-scroll { left: clamp(42px, 7.5vw, 150px); bottom: 22px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .noctelle-campaign.rose-campaign { min-height: 590px; padding-inline: 6%; gap: 3%; }
  .noctelle-campaign .campaign-scene .campaign-roses { object-fit: contain; }
  .noctelle-campaign.rose-campaign .campaign-copy h1 { font-size: clamp(68px, 8.5vw, 94px); }
  .noctelle-campaign.rose-campaign .campaign-copy .eyebrow { font-size: 8px; max-width: 340px; }
  .noctelle-campaign.rose-campaign .campaign-product { right: 5%; bottom: 8%; }
  .noctelle-campaign.rose-campaign .campaign-product > span { left: 5%; right: 0; }
  .noctelle-campaign .campaign-actions { gap: 17px; }
}
@media (max-width: 760px) {
  .noctelle-campaign.rose-campaign {
    --scene-height: clamp(315px, 87vw, 470px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--scene-height) auto;
    align-content: start;
    gap: 0;
    min-height: max(720px, calc(100svh - var(--hero-header-height)));
    padding: 0 7% 60px;
    background: #200b11;
  }
  .noctelle-campaign .campaign-scene { bottom: auto; height: calc(var(--scene-height) + 30px); }
  .noctelle-campaign .campaign-scene .campaign-roses { object-position: center 44%; }
  .noctelle-campaign.rose-campaign:after {
    inset: 0 0 auto;
    height: calc(var(--scene-height) + 31px);
    background: linear-gradient(0deg, #200b11 0%, #200b1185 13%, transparent 31%);
  }
  .noctelle-campaign.rose-campaign .campaign-copy {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    max-width: 520px;
    padding: 24px 0 0;
  }
  .noctelle-campaign.rose-campaign .campaign-copy .eyebrow {
    font-size: 6.5px;
    letter-spacing: .14em;
    margin-bottom: 21px;
    gap: 9px;
  }
  .noctelle-campaign .campaign-star { font-size: 17px; }
  .noctelle-campaign.rose-campaign .campaign-copy h1 { font-size: clamp(76px, 22vw, 132px); margin-bottom: 20px; }
  .noctelle-campaign.rose-campaign .campaign-copy .campaign-intro { font-size: 12px; margin-bottom: 24px; }
  .noctelle-campaign.rose-campaign .campaign-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .noctelle-campaign.rose-campaign .campaign-actions .button { min-height: 48px; padding: 14px 18px; gap: 19px; }
  .noctelle-campaign.rose-campaign .campaign-copy .campaign-note { font-size: 7px; gap: 13px; margin-top: 24px; }
  .noctelle-campaign.rose-campaign .campaign-product {
    inset: 0 0 auto;
    height: var(--scene-height);
    width: 100%;
    max-width: none;
    grid-column: auto;
    grid-row: auto;
  }
  .noctelle-campaign.rose-campaign .campaign-product > span { inset: auto 7% 0; padding: 12px 0 0; gap: 14px; font-size: 6.5px; }
  .noctelle-campaign .campaign-product small { font-size: 23px; margin-top: 5px; }
  .noctelle-campaign .campaign-product .campaign-product-arrow { width: 34px; height: 34px; flex-basis: 34px; font-size: 19px; }
  .noctelle-campaign.rose-campaign .campaign-scroll { left: 7%; bottom: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .noctelle-campaign .campaign-product .campaign-product-arrow { transition: none; }
}