/* Product personalities layered on top of the approved Birth Chart template. */
.variant-synastry { --variant-wash: 205, 192, 181; }
.variant-numerology { --variant-wash: 221, 204, 194; }
.variant-workbook { --variant-wash: 202, 211, 199; }
.variant-astrocartography { --variant-wash: 190, 205, 198; }

.variant-synastry .product-hero-wheel,
.variant-numerology .product-hero-wheel,
.variant-workbook .product-hero-wheel { isolation: isolate; }
.variant-astrocartography .product-hero-wheel { isolation: isolate; }

.dual-wheel img { width: min(590px, 40vw); }
.dual-wheel img:first-child { left: 42%; top: 45%; opacity: .78; }
.dual-wheel img:nth-child(2) { left: 60%; top: 58%; opacity: .64; }
.dual-wheel::after {
  content: "A  +  B";
  position: absolute;
  left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 88px; height: 88px;
  border: 1px solid rgba(18,17,16,.48);
  border-radius: 50%;
  background: rgba(var(--paper-rgb), .88);
  font: 400 10px/1 var(--font-mono);
  letter-spacing: .16em;
}

.matrix-hero { display: grid; place-items: center; }
.matrix-hero img {
  position: static;
  width: min(570px, 43vw);
  max-height: 610px;
  object-fit: contain;
  transform: none;
  filter: saturate(.6);
}
.matrix-hero::before,
.workbook-hero::before {
  content: "";
  position: absolute;
  inset: 7% 2% 5% 6%;
  border: 1px solid rgba(18,17,16,.18);
  background: rgba(var(--variant-wash), .12);
  z-index: -1;
}

.workbook-hero { display: grid; place-items: center; }
.workbook-hero img {
  position: static;
  width: min(550px, 41vw);
  max-height: 600px;
  object-fit: contain;
  transform: none;
  filter: saturate(.55) contrast(.97);
}

.astro-hero { display: grid; place-items: center; }
.astro-hero img {
  position: static;
  width: min(620px, 45vw);
  max-height: 610px;
  object-fit: contain;
  transform: none;
  filter: saturate(.82) contrast(.98);
}
.astro-hero::before {
  content: "";
  position: absolute;
  inset: 5% 1% 6% 5%;
  border: 1px solid rgba(18,17,16,.18);
  background: rgba(var(--variant-wash), .14);
  z-index: -1;
}
.proof-card-astro img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; }
.astro-method-proof { grid-template-columns: minmax(0,.78fr) minmax(320px,1.22fr); align-items:center; }
.astro-method-image { margin:0; }
.astro-method-image img { width:100%; display:block; border:1px solid rgba(18,17,16,.16); }

.proof-card-cover > div { background: rgba(var(--paper-rgb), .72); }
.proof-card-cover img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; }
.proof-card-aspects img { width: 138%; }
.proof-card-overlap > div { position: relative; }
.proof-card-overlap img { position: absolute; width: 78%; }
.proof-card-overlap img:first-child { left: -5%; top: 4%; opacity: .72; }
.proof-card-overlap img:nth-child(2) { right: -7%; bottom: 0; opacity: .55; }

.proof-card-matrix img { width: 118%; }
.proof-card-method img { width: 150%; }
.number-study {
  width: 100%; height: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(var(--paper-rgb), .72);
}
.number-study span {
  display: grid; place-items: center;
  border-right: 1px solid rgba(18,17,16,.18);
  border-bottom: 1px solid rgba(18,17,16,.18);
  font: 400 clamp(52px, 7vw, 104px)/1 var(--font-display);
}
.number-study span:nth-child(3n) { border-right: 0; }
.number-study span:nth-last-child(-n+3) { border-bottom: 0; }

.proof-card-workbook img { width: 110%; align-self: start; }
.journal-study {
  width: 100%; height: 100%; padding: clamp(28px, 4vw, 58px);
  display: flex; flex-direction: column;
  background: rgba(var(--paper-rgb), .8);
}
.journal-study .journal-day { font: 400 9px/1 var(--font-mono); letter-spacing: .16em; color: var(--muted); }
.journal-study h4 { margin: 34px 0 26px; font: 400 clamp(31px, 4vw, 56px)/1.02 var(--font-display); }
.journal-lines { flex: 1; min-height: 180px; background: repeating-linear-gradient(to bottom, transparent 0 37px, rgba(18,17,16,.16) 38px); }
.journal-check { display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(18,17,16,.22); font: 400 9px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 1120px) {
  .dual-wheel img { width: min(600px, 70vw); }
  .matrix-hero img, .workbook-hero img, .astro-hero img { width: min(590px, 78vw); }
}

@media (max-width: 700px) {
  .dual-wheel img { width: 86vw; }
  .dual-wheel img:first-child { left: 38%; }
  .dual-wheel img:nth-child(2) { left: 64%; }
  .dual-wheel::after { width: 68px; height: 68px; }
  .matrix-hero img, .workbook-hero img, .astro-hero img { width: 88vw; max-height: 370px; }
  .matrix-hero::before, .workbook-hero::before, .astro-hero::before { inset: 3% 0 5%; }
  .astro-method-proof { grid-template-columns:1fr; }
  .proof-card-overlap img { width: 95%; }
}