/* Sharp supplied ornament assets and the ZIP botanical shadow treatment.
   This file is loaded after the existing artwork and typography styles. */

.botanical {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.botanical::before,
.botanical::after {
  content: "";
  display: block;
  position: absolute;
  inset: -60px auto -60px auto;
  width: 40vw;
  opacity: .13;
  filter: blur(1.5px);
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(30deg, transparent 0 43%, rgba(54,83,66,.72) 44% 45%, transparent 46% 100%),
    linear-gradient(45deg, transparent 0 49%, rgba(54,83,66,.55) 50% 51%, transparent 52% 100%),
    linear-gradient(60deg, transparent 0 55%, rgba(54,83,66,.44) 56% 57%, transparent 58% 100%),
    linear-gradient(74deg, transparent 0 61%, rgba(54,83,66,.32) 62% 63%, transparent 64% 100%);
}

.botanical::before {
  left: -14vw;
  transform: rotate(-8deg);
}

.botanical::after {
  right: -14vw;
  transform: scaleX(-1) rotate(-8deg);
}

/* Hero foreground artwork and rails retain the source image proportions. */
.hero .hero-reference {
  position: relative;
  z-index: 0;
}

.hero .hero-foreground {
  position: absolute;
  z-index: 2;
  top: var(--section-space);
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.hero .decoration-rail {
  position: absolute;
  z-index: 3;
  top: calc(var(--section-space) + 7.06cqi);
  width: 4.85cqi;
  height: 35.44cqi;
  object-fit: fill;
  display: block;
  pointer-events: none;
}

.hero .decoration-rail.hero-decoration-left {
  left: 11.03%;
}

.hero .decoration-rail.hero-decoration-right {
  right: 9.26%;
  transform: scaleX(-1);
}

.hero .hero-brand {
  z-index: 5;
}

/* Use the ZIP's live brand mark instead of enlarging a raster symbol. */
.hero .hero-brand .gold-ornament {
  display: block;
  position: absolute;
  top: -4.4cqi;
  left: 50%;
  transform: translateX(-50%);
  color: #c48935;
  font: 400 4.5cqi/1 var(--serif);
}

.hero .hero-copy {
  z-index: 4;
}

/* Botanical shadows sit over raster artwork, while live content stays clear. */
.night-image,
.night-copy,
.rose-copy,
.rose-photo,
.about > *,
.preorder-art,
.preorder-copy,
.faq-heading,
.faq-list {
  position: relative;
  z-index: 3;
}

.night-copy h2,
.night-copy > .script-subtitle,
.night-copy .body-copy,
.archetypes .center-heading,
.archetypes .archetype-grid,
.inside > h2,
.inside .open-book,
.inside .inside-button,
.rose-copy h2,
.rose-copy > p {
  z-index: 3;
}

.archetypes .section-reference,
.inside .section-reference {
  position: relative;
  z-index: 0;
}

/* Replacement botanical illustrations occupy the original icon slots only. */
.archetypes .archetype {
  position: relative;
}

.archetypes img.archetype-icon {
  position: absolute;
  z-index: 3;
  top: 1.6cqi;
  left: 50%;
  width: 7cqi;
  height: 7cqi;
  max-width: none;
  margin: 0;
  object-fit: contain;
  transform: translateX(-50%);
}

/* Transparent copy panels let the restored section shadows show through.
   Keep their original image dimensions so every text position stays fixed. */
.night-reference,
.rose-reference {
  visibility: hidden;
}

/* The ZIP's native gold rule replaces the rose panel's raster divider. */
.rose-copy::before {
  content: "";
  position: absolute;
  left: 19.5%;
  top: 42%;
  width: 36.4%;
  height: .1cqi;
  background: #c48935;
}

.rose-copy::after {
  content: "✦";
  position: absolute;
  left: 37.8%;
  top: 42%;
  transform: translate(-50%, -50%);
  color: #c48935;
  font: 400 2.4cqi/1 var(--serif);
}

/* Keep new shadows behind the actual open-book photograph. */
.inside .section-reference {
  z-index: 2;
}

/* The supplied replacement banner is shown exactly, without extra overlays. */
.banner-accessible-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.banner-image-frame {
  position: relative;
}

.uploaded-banner-image {
  display: block;
  width: 100%;
  height: auto;
}

.banner-preorder {
  position: absolute;
  left: 38.1%;
  top: 42%;
  width: 23.9%;
  height: 6.4%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.book-excerpt-preorder {
  left: 32.9%;
  top: 82.4%;
  width: 34.2%;
  height: 8.3%;
}

.rose.uploaded-rose {
  display: block;
  padding: 0;
}

.bonus-rose-preorder {
  left: 13.2%;
  top: 70.5%;
  width: 33%;
  height: 8.4%;
}

.about.uploaded-author {
  display: block;
  padding: 0 0 var(--section-space);
}

/* Cover the old photo and its frame without altering the surrounding artwork. */
.author-full-photo {
  position: absolute;
  top: 1.75%;
  left: 11.2%;
  width: 30.74%;
  height: auto;
  display: block;
  border: 0;
  border-radius: 0;
}

/* Remove only the white strip before the supplied archetypes artwork. */
.archetypes {
  padding-block: 0;
}

/* The replacement artwork includes its own heading area. */
.inside.uploaded-inside {
  padding-block: 0;
}

.night.uploaded-night {
  display: block;
  padding: 0;
  background: var(--cream);
}

.hero.uploaded-banner {
  padding-top: 0;
  padding-bottom: 0;
}

:root {
  /* Match the dark green sampled from the Rose Meditation artwork's CTA. */
  --reference-button-green: #022d26;
  --reference-button-text: #f4eee0;
}

.site-footer,
.preorder .pill-button,
.preorder .submit-button {
  background: var(--reference-button-green);
  color: var(--reference-button-text);
  font-family: var(--serif);
  font-weight: 400;
}

.site-footer p,
.site-footer .contact-trigger {
  letter-spacing: .1em;
}

.preorder .pill-button,
.preorder .submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-shadow: inset 0 0 0 1px rgba(198, 149, 64, .65);
}

.preorder .pill-button:hover,
.preorder .submit-button:hover {
  background: #063f35;
}

.preorder .button-star {
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  background: linear-gradient(135deg, #f1d292, #b07a2b, #e9bd68);
  clip-path: polygon(50% 0, 56% 36%, 85% 15%, 64% 44%, 100% 50%,
    64% 56%, 85% 85%, 56% 64%, 50% 100%, 44% 64%, 15% 85%,
    36% 56%, 0 50%, 36% 44%, 15% 15%, 44% 36%);
}