/* Editorial hero: readable copy beside the original Study artwork. */
.study-hero { display: block; }
.study-hero .hero-grid { display:flex; align-items:center; min-height:640px; padding-block:4rem; }
.study-hero .hero-copy,
:root[data-theme="dark"] .study-hero .hero-copy {
  width:48%; margin:0; padding:0; background:transparent; box-shadow:none;
  display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem;
}
.hero-heading-panel,.hero-details-panel { padding:0; background:none; max-width:100%; }
.hero-heading-panel { width:100%; container-type:inline-size; }
.study-hero .hero-copy .hero-heading-panel h1 { font-size:min(5.3rem,9.6cqi); text-wrap:initial; overflow-wrap:normal; }
.hero-title-line { display:block; white-space:nowrap; }
.study-hero .hero-heading-panel .flourish { margin:1.5rem 0 0; }
.hero-details-panel { width:max-content; }
.study-hero .hero-details-panel .hero-sub { font-size:clamp(1.1rem,1.5vw,1.3rem); margin-bottom:1.5rem; }
.hero-details-panel .btn { max-width:100%; }
.study-hero .availability { margin-top:1rem; }
.study-hero .study-hero-art {
  position:absolute; inset:0 0 0 auto; width:50%; height:100%; margin:0;
  object-fit:cover; object-position:70% center; opacity:1; filter:none;
  mask-image:linear-gradient(to right,transparent,#000 15%);
}
:root[data-theme="dark"] .study-hero-art { opacity:1; filter:none; }
@media(prefers-color-scheme:dark) {
  :root:not([data-theme]) .study-hero .hero-copy { background:transparent; box-shadow:none; }
  :root:not([data-theme]) .study-hero-art { opacity:1; filter:none; }
}
@media(max-width:900px) {
  .study-hero .hero-grid { min-height:0; padding-block:3rem 1rem; }
  .study-hero .hero-copy, :root[data-theme="dark"] .study-hero .hero-copy { width:100%; max-width:620px; margin-inline:auto; text-align:center; align-items:center; }
  .study-hero .hero-heading-panel .flourish { margin-inline:auto; }
  .study-hero { display:flex; flex-direction:column; }
  .study-hero .hero-grid { order:1; }
  .study-hero .study-hero-art { order:2; position:relative; inset:auto; width:100%; height:auto; max-height:none; object-fit:contain; mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent); }
}

/* Fade only the artwork, never the live handwriting or its readable paper core. */
.affirmation-vignette { margin: 2rem auto 0; max-width: 420px; }
.affirmation-paper,
:root[data-theme="dark"] .affirmation-paper {
  position: relative;
  isolation: isolate;
  background: none;
  mix-blend-mode: normal;
  margin: 0 auto;
  padding: 6rem 4.5rem 4rem 2.5rem;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.affirmation-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('assets/botanical-paper.webp') center / 100% 100% no-repeat;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 84%, transparent),
              linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent);
  mask-composite: intersect;
}
.affirmation-vignette figcaption {
  text-align: center;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: .75rem;
}
@media(max-width:700px) {
  .affirmation-paper { min-height: 340px; padding: 5rem 3.5rem 3rem 2rem; }
}
@supports not (mask-composite:intersect) {
  .affirmation-paper::before { mask-image: radial-gradient(ellipse closest-side, #000 70%, transparent 100%); }
}