/* Conversation 1 — premium chapter-opening hero + page system
   Assets: top-set (hero) + middle-fill (canvas). No redesign.
   Scoped to body.pwl-lesson-prototype only.
*/

body.pwl-lesson-prototype {
  --pwl-hero-plum: #3a2870;
  --pwl-hero-plum-soft: #5a4a96;
  --pwl-page-ink: #2b2927;
  --pwl-page-parchment: #f6efe6;
  /* Match rendered site header so hero meets the menu with no ribbon */
  --pwl-header-offset: 6.375rem;
  /* Full page width — chapter opening sheet, not a centered art card */
  --pwl-manuscript-max: 100%;
  --pwl-middle-fill: url("../images/Preparing%20with%20Love/preparing-with-love-middle-fill.png");
  --pwl-middle-tile-step: clamp(30rem, 54vw, 38rem);
  /* Tall enough to show lighthouse base/cliff above the parchment — top anchor unchanged */
  --pwl-hero-height: clamp(26rem, 56vw, 46rem);
  --pwl-hero-type-top: 52%;
  background: var(--pwl-page-parchment);
}

/* Allow full-bleed manuscript (site wrapper clips by default) */
body.pwl-lesson-prototype > .wrapper {
  overflow: visible;
}

body.pwl-lesson-prototype main.page.pwl-lesson-page {
  position: relative;
  isolation: isolate;
  overflow: visible;
  background: var(--pwl-page-parchment);
  padding-top: 0;
  padding-bottom: 0;
}

/* One continuous manuscript sheet — full content width */
body.pwl-lesson-prototype .pwl-lesson-manuscript {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: var(--pwl-manuscript-max);
  margin: 0 auto;
  /* Exact header height — hero meets the menu with no parchment ribbon */
  padding-top: var(--pwl-header-offset, 6.375rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  box-sizing: border-box;
  overflow: visible;
}

/* Match the menu face in the header band so no parchment peeks through */
body.pwl-lesson-prototype .pwl-lesson-manuscript::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--pwl-header-offset, 6.375rem);
  background: rgba(255, 253, 251, 0.98);
  z-index: 0;
  pointer-events: none;
}

/* —— Continuing canvas: begins at the hero (not behind the menu) —— */
body.pwl-lesson-prototype .pwl-lesson-page-wash {
  position: absolute;
  top: var(--pwl-header-offset, 6.375rem);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--pwl-page-parchment);
  background-image: var(--pwl-middle-fill);
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
}

body.pwl-lesson-prototype .pwl-lesson-page-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(246, 239, 230, 0.38) 0px,
    rgba(246, 239, 230, 0.08) 14px,
    transparent 36px,
    transparent calc(100% - 36px),
    rgba(246, 239, 230, 0.08) calc(100% - 14px),
    rgba(246, 239, 230, 0.38) 100%
  );
  background-size: 100% var(--pwl-middle-tile-step);
  opacity: 0.42;
  mix-blend-mode: soft-light;
}

body.pwl-lesson-prototype .pwl-lesson-page-wash::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(44rem, 78%);
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    ellipse 68% 70% at 50% 35%,
    rgba(252, 247, 240, 0.26) 0%,
    rgba(252, 247, 240, 0.1) 52%,
    transparent 82%
  );
}

body.pwl-lesson-prototype .pwl-lesson-shell {
  position: relative;
  z-index: 1;
  /* Reading column only — hero stays full manuscript width */
  width: min(100% - (var(--pwl-edge-pad, 0.85rem) * 2), 42rem);
  max-width: none;
  margin: 0 auto;
  padding-top: clamp(1.25rem, 3vw, 2rem);
  padding-bottom: 0;
  box-sizing: border-box;
}

/* —— Hero: full-width chapter opening — sits above the page wash —— */
body.pwl-lesson-prototype .pwl-lesson-heirloom-hero {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: none;
  height: var(--pwl-hero-height);
  /* Overlap the lower wash so the soft edge sits on top of it */
  margin: 0 0 clamp(-2.75rem, -5vw, -1.75rem);
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  isolation: isolate;
}

body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  overflow: hidden;
  line-height: 0;
  background: transparent;
  z-index: 0;
  /* Soft dissolve into the wash behind — no hard seam */
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 72%,
    rgba(0, 0, 0, 0.85) 82%,
    rgba(0, 0, 0, 0.4) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 72%,
    rgba(0, 0, 0, 0.85) 82%,
    rgba(0, 0, 0, 0.4) 92%,
    transparent 100%
  );
}

body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
  /* Artwork is clean — anchor to top so lamp, roof, and spire stay visible */
  object-position: center top;
  transform: none;
}

body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__inner {
  position: absolute;
  left: 50%;
  top: var(--pwl-hero-type-top);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(42rem, 92%);
  margin: 0;
  padding: 0.55rem 0.75rem 0.45rem;
  text-align: center;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  box-shadow: none;
  isolation: isolate;
}

/*
 * Localized soft-focus / light veil — behind hero typography only.
 * Does not blur the full hero, wash lavender, or obscure lighthouse/home.
 */
body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 0;
  width: min(34rem, 118%);
  height: min(19.5rem, 108%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 62% 58% at 50% 48%,
    rgba(255, 251, 246, 0.5) 0%,
    rgba(252, 244, 238, 0.28) 34%,
    rgba(246, 232, 238, 0.1) 58%,
    transparent 76%
  );
  -webkit-backdrop-filter: blur(1.75px);
  backdrop-filter: blur(1.75px);
  -webkit-mask-image: radial-gradient(
    ellipse 72% 68% at 50% 50%,
    #000 12%,
    rgba(0, 0, 0, 0.75) 42%,
    rgba(0, 0, 0, 0.28) 68%,
    transparent 82%
  );
  mask-image: radial-gradient(
    ellipse 72% 68% at 50% 50%,
    #000 12%,
    rgba(0, 0, 0, 0.75) 42%,
    rgba(0, 0, 0, 0.28) 68%,
    transparent 82%
  );
}

@media (prefers-reduced-motion: reduce) {
  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__inner::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: radial-gradient(
      ellipse 62% 58% at 50% 48%,
      rgba(255, 251, 246, 0.46) 0%,
      rgba(252, 244, 238, 0.24) 38%,
      transparent 74%
    );
  }
}

/* Masthead: PREPARING WITH LOVE + BEGINNING share one center axis */
body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__masthead {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: clamp(-1.35rem, -2.8vw, -0.65rem) 0 0;
  /* Reserve full BEGINNING height so the heart divider sits below it */
  padding: 0 0 clamp(5.5rem, 14vw, 8.75rem);
  text-align: center;
}

/* 1 — Small spaced caps — raised slightly above BEGINNING */
body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__program {
  position: relative;
  z-index: 2;
  margin: 0 0 0;
  transform: translateY(clamp(-0.55rem, -1.2vw, -0.3rem));
  font-family: "Trajan Pro", Cinzel, "Times New Roman", serif;
  font-size: clamp(0.8rem, 1.65vw, 0.98rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--pwl-hero-plum-soft);
  text-shadow:
    0 0 12px rgba(255, 252, 248, 0.85),
    0 0 3px rgba(255, 248, 240, 0.55);
}

/*
 * BEGINNING — atmospheric/secondary under PREPARING WITH LOVE.
 * Large height preserved; tracking tightened + slight left bias so glyphs
 * sit in open sky/sea and clear the lighthouse on the right.
 * Noticeably more legible than prior pale wash; still quieter than chapter title.
 */
body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__backdrop {
  position: absolute;
  top: clamp(1.35rem, 2.8vw, 1.85rem);
  left: 50%;
  z-index: 0;
  display: block;
  width: max-content;
  max-width: none;
  margin: 0;
  margin-right: -0.02em;
  padding: 0;
  border: none;
  background: none;
  font-family: "Cormorant Garamond", Baskerville, Georgia, serif;
  font-size: clamp(4.35rem, 14vw, 8.75rem);
  font-weight: 600;
  letter-spacing: 0.012em;
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  /* Soft mauve-lavender — complete word readable; not as dark as chapter title */
  color: rgba(118, 78, 120, 0.56);
  white-space: nowrap;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  /* Center, then nudge further left so final G clears lighthouse (open sky) */
  transform: translateX(calc(-50% - 4.75vw));
  text-shadow:
    0 0 18px rgba(255, 250, 246, 0.88),
    0 0 36px rgba(252, 236, 242, 0.42),
    0 1px 0 rgba(255, 252, 248, 0.28);
}

/*
 * C2 only — LIVING is shorter than BEGINNING; reuse of the left lighthouse
 * clearance offset reads left-heavy. Shift slightly right so the word optically
 * centers with the lower hero text group. Size/look unchanged. C1 untouched.
 */
body.pwl-lesson-prototype.pwl-c2 .pwl-lesson-heirloom-hero__backdrop {
  transform: translateX(calc(-50% - 1.5vw + 18px));
}

/* Heart ornament — clear of BEGINNING */
body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__flourish {
  position: relative;
  z-index: 1;
  display: block;
  width: min(14rem, 54%);
  margin: 0.35rem auto 0.95rem;
}

body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__flourish img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.88;
}

/* 2 — Chapter title (below BEGINNING’s band) */
body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__chapter {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 38rem;
  margin: 0 0 0.45rem;
  font-family: "Cormorant Garamond", Baskerville, Georgia, serif;
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1.28;
  color: var(--pwl-hero-plum-soft);
  text-shadow:
    0 0 12px rgba(255, 252, 248, 0.85),
    0 0 3px rgba(255, 248, 240, 0.5);
}

body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__chapter::before,
body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__chapter::after {
  content: none;
  display: none;
}

/* 3 — Primary conversation title */
body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__conversation {
  position: relative;
  z-index: 1;
  margin: 0 0 0.6rem;
  max-width: 40rem;
  padding: 0;
  font-family: "Cormorant Garamond", Baskerville, Georgia, serif;
  font-size: clamp(1.85rem, 4vw, 2.7rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.14;
  color: var(--pwl-hero-plum);
  text-shadow:
    0 1px 0 rgba(42, 24, 78, 0.1),
    0 0 18px rgba(255, 253, 249, 0.9),
    0 0 8px rgba(255, 248, 242, 0.7);
}

/* 4 — Quiet progress (below titles) */
body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__progress {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0;
  font-family: "Cormorant Garamond", Baskerville, Georgia, serif;
  font-size: clamp(0.92rem, 1.7vw, 1.08rem);
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.14em;
  line-height: 1.35;
  text-transform: uppercase;
  color: rgba(90, 74, 150, 0.72);
  text-shadow: 0 0 10px rgba(255, 252, 248, 0.75);
}

body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__progress::before,
body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__progress::after {
  content: "•";
  font-size: 0.7em;
  letter-spacing: 0;
  color: rgba(143, 107, 171, 0.55);
}

/* Soft edge only — wash stays behind the hero */
body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__art::after {
  content: none;
  display: none;
}

body.pwl-lesson-prototype .pwl-lesson-heirloom-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(246, 239, 230, 0.2) 55%,
    rgba(246, 239, 230, 0.55) 100%
  );
}

/* Progress + Small Anchor — leave air before Opening Reflection */
body.pwl-lesson-prototype .pwl-chapter-progress {
  position: relative;
  z-index: 2;
  margin-top: clamp(0.85rem, 2.2vw, 1.35rem);
  margin-bottom: clamp(1.95rem, 4.2vw, 2.75rem);
}

body.pwl-lesson-prototype .gh-anchor-statement[data-pwl-lesson-anchor-statement] {
  margin: 0 auto clamp(2.35rem, 5vw, 3.25rem);
  max-width: min(100%, 28rem);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* —— Content: subtle vellum reading fields (not modern cards) —— */
body.pwl-lesson-prototype .pwl-journal-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: clamp(0.35rem, 1.2vw, 0.75rem) auto clamp(1rem, 2.2vw, 1.35rem);
  padding: 0 clamp(0.2rem, 1.6vw, 0.85rem);
  max-width: 42rem;
  background: transparent;
  border: none;
  box-shadow: none;
}

body.pwl-lesson-prototype .pwl-journal-panel {
  position: relative;
  z-index: 1;
  isolation: isolate;
  margin: 0;
  /* Extra air above purple h2 and below each section’s final paragraph */
  padding: clamp(1.7rem, 4vw, 2.45rem) clamp(1.05rem, 3vw, 1.75rem)
    clamp(1.75rem, 4.1vw, 2.55rem);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Vellum field lives on ::before so text is never edge-faded.
   Center quieter for reading; outer margins stay more open to manuscript art.
   Soft vertical feather only — no rectangular edge / card look. */
body.pwl-lesson-prototype .pwl-journal-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.15rem -0.55rem;
  pointer-events: none;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-image:
    url("../images/Preparing%20with%20Love/pwl-botanical-lavender.svg"),
    radial-gradient(
      ellipse 84% 74% at 50% 44%,
      rgba(255, 252, 247, 0.86) 0%,
      rgba(252, 245, 236, 0.62) 38%,
      rgba(248, 238, 246, 0.28) 64%,
      transparent 84%
    ),
    linear-gradient(
      180deg,
      rgba(255, 250, 244, 0.1) 0%,
      rgba(255, 250, 244, 0.48) 9%,
      rgba(250, 242, 234, 0.36) 50%,
      rgba(246, 236, 244, 0.42) 91%,
      rgba(246, 236, 244, 0.08) 100%
    );
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 3.15rem auto, auto, auto;
  background-position: right 6% bottom 10%, center, center;
  opacity: 0.98;
  /* Intersect: radial keeps side margins open; linear softens top/bottom */
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 4%,
      #000 11%,
      #000 89%,
      rgba(0, 0, 0, 0.4) 96%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 92% 90% at 50% 48%,
      #000 52%,
      rgba(0, 0, 0, 0.88) 68%,
      rgba(0, 0, 0, 0.38) 84%,
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 4%,
      #000 11%,
      #000 89%,
      rgba(0, 0, 0, 0.4) 96%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 92% 90% at 50% 48%,
      #000 52%,
      rgba(0, 0, 0, 0.88) 68%,
      rgba(0, 0, 0, 0.38) 84%,
      transparent 100%
    );
  mask-composite: intersect;
  box-shadow: 0 14px 36px rgba(90, 70, 110, 0.03);
}

body.pwl-lesson-prototype .pwl-journal-panel::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

/* Optional lesson panels: no boxes or rules on the prototype */
body.pwl-lesson-prototype .pwl-lesson-panel,
body.pwl-lesson-prototype .pwl-chapter-complete-note {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.pwl-lesson-prototype .pwl-journal-panel--major {
  padding-top: clamp(1.85rem, 4.2vw, 2.65rem);
  padding-bottom: clamp(1.9rem, 4.3vw, 2.7rem);
  border-top: none;
}

body.pwl-lesson-prototype .pwl-journal-panel--opening {
  border-top: none;
  /* Opening invitation — extra breathing room from hero / progress / Anchor */
  margin-top: clamp(0.35rem, 1.2vw, 0.7rem);
  padding-top: clamp(2rem, 4.6vw, 2.9rem);
  padding-bottom: clamp(1.85rem, 4.2vw, 2.6rem);
}

body.pwl-lesson-prototype .pwl-journal-panel--opening h2 {
  font-size: clamp(1.36rem, 2.55vw, 1.6rem);
  color: #4a1f82;
  margin-bottom: 0.95rem;
}

body.pwl-lesson-prototype .pwl-journal-panel--lead {
  padding-top: clamp(1.35rem, 3.2vw, 1.9rem);
  padding-bottom: clamp(1.4rem, 3.3vw, 1.95rem);
}

body.pwl-lesson-prototype .pwl-journal-panel--practice,
body.pwl-lesson-prototype .pwl-journal-panel--ahead {
  background: transparent;
}

/*
 * Lavender heart ornament — only decorative separator between journal sections.
 * Generous equal air above/below so sections feel distinct without cards.
 */
body.pwl-lesson-prototype .pwl-section-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  /* Heart as punctuation between heirloom sheets (~12% tighter than prior air) */
  margin: clamp(2.6rem, 4.8vw, 3.7rem) auto;
  width: min(9.5rem, 42%);
  border: none;
}

body.pwl-lesson-prototype .pwl-journal-stack > .pwl-section-divider:first-child {
  margin-top: clamp(1.6rem, 3.4vw, 2.35rem);
  margin-bottom: clamp(2.15rem, 4vw, 2.95rem);
}

/*
 * C2 only — tighter heart rhythm (~40% prior cut, ~17% more, then ~11%) so teaching →
 * Medium Anchor → heart → next section feels connected. C1 unchanged.
 */
body.pwl-lesson-prototype.pwl-c2 .pwl-section-divider {
  margin: clamp(1.14rem, 2.14vw, 1.63rem) auto;
}

body.pwl-lesson-prototype.pwl-c2 .pwl-journal-stack > .pwl-section-divider:first-child {
  margin-top: clamp(0.70rem, 1.47vw, 1.03rem);
  margin-bottom: clamp(0.96rem, 1.78vw, 1.29rem);
}

/*
 * C2 only — strip interior panel lavender sprigs from ALL journal panels.
 * Source: pwl-botanical-lavender.svg on .pwl-journal-panel::before (prototype).
 * Prior :has(.gh-anchor-medium) left sprigs on teaching panels without Medium Anchors.
 * Keep manuscript/page-margin florals; C1 panel botanicals unchanged.
 */
body.pwl-lesson-prototype.pwl-c2 .pwl-journal-panel::before {
  background-image:
    radial-gradient(
      ellipse 84% 74% at 50% 44%,
      rgba(255, 252, 247, 0.86) 0%,
      rgba(252, 245, 236, 0.62) 38%,
      rgba(248, 238, 246, 0.28) 64%,
      transparent 84%
    ),
    linear-gradient(
      180deg,
      rgba(255, 250, 244, 0.1) 0%,
      rgba(255, 250, 244, 0.48) 9%,
      rgba(250, 242, 234, 0.36) 50%,
      rgba(246, 236, 244, 0.42) 91%,
      rgba(246, 236, 244, 0.08) 100%
    );
  background-size: auto, auto;
  background-position: center, center;
}

/*
 * C2 only — Medium Anchor crest hierarchy: clearly larger than Simple (~42px),
 * still restrained vs Heirloom. ~18–20% above prior clamp(56px, 8vw, 70px) / 52px.
 * Simple Anchor (.gh-anchor-statement) untouched.
 */
body.pwl-lesson-prototype.pwl-c2 .gh-anchor-medium > img,
body.pwl-lesson-prototype.pwl-c2 .gh-anchor-medium__mark {
  width: clamp(66px, 9.5vw, 84px);
  max-width: min(84px, 28%);
}

@media (max-width: 700px) {
  body.pwl-lesson-prototype.pwl-c2 .gh-anchor-medium > img,
  body.pwl-lesson-prototype.pwl-c2 .gh-anchor-medium__mark {
    width: 62px;
    max-width: 62px;
  }
}

body.pwl-lesson-prototype .pwl-section-divider__ornament {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.78;
}

/* Unused when hearts separate every section; keep harmless if leftover */
body.pwl-lesson-prototype .pwl-section-space {
  display: none;
  height: 0;
  margin: 0;
  padding: 0;
}

body.pwl-lesson-prototype .pwl-journal-panel p {
  margin: 0 auto 1.45rem;
  max-width: 36.5rem;
  font-size: clamp(1.06rem, 1.9vw, 1.18rem);
  line-height: 1.88;
  color: var(--pwl-page-ink);
}

body.pwl-lesson-prototype .pwl-journal-panel p:last-child {
  margin-bottom: 0;
}

body.pwl-lesson-prototype .pwl-journal-panel h2 {
  margin: 0.15rem 0 0.95rem;
  font-family: "Cormorant Garamond", Baskerville, Georgia, serif;
  font-size: clamp(1.28rem, 2.4vw, 1.48rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.28;
  color: #5c1196;
  text-align: center;
}

body.pwl-lesson-prototype .pwl-journal-panel h3 {
  margin: 1.55rem auto 0.55rem;
  max-width: 36.5rem;
  font-family: "Cormorant Garamond", Baskerville, Georgia, serif;
  font-size: clamp(1.12rem, 2vw, 1.26rem);
  font-weight: 600;
  font-style: italic;
  color: #5c3470;
}

body.pwl-lesson-prototype .pwl-journal-panel ul,
body.pwl-lesson-prototype .pwl-journal-panel ol {
  margin: 0 auto 1.25rem;
  max-width: 36.5rem;
  padding-left: 1.25rem;
  line-height: 1.75;
}

body.pwl-lesson-prototype .pwl-journal-panel li + li {
  margin-top: 0.4rem;
}

body.pwl-lesson-prototype .pwl-lesson-nav {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0.35rem;
  padding-top: clamp(0.85rem, 2vw, 1.25rem);
  border-top: none;
  background: transparent;
}

body.pwl-lesson-prototype .pwl-back-chapter {
  margin-top: 0.6rem;
}

body.pwl-lesson-prototype .gh-heirloom-anchor[data-pwl-heirloom-placement="after-navigation"] {
  margin-top: clamp(2.5rem, 5.5vw, 3.65rem);
  margin-bottom: clamp(0.65rem, 1.8vw, 1rem);
}

body.pwl-lesson-prototype .pwl-lesson-close-fade {
  height: clamp(2.75rem, 5.5vw, 4rem);
  margin: 0.25rem 0 0;
  background: linear-gradient(180deg, transparent, rgba(246, 239, 230, 0.88));
  pointer-events: none;
}

/* —— Responsive —— */
@media (max-width: 1200px) {
  body.pwl-lesson-prototype {
    --pwl-hero-height: clamp(24rem, 54vw, 40rem);
    --pwl-hero-type-top: 54%;
  }

  body.pwl-lesson-prototype .pwl-lesson-page-wash {
    background-size: 100% auto;
    background-position: top center;
  }
}

/*
 * Mobile + iPad: hero ends cleanly; body begins after (no tuck under artwork).
 * Desktop (≥1024) keeps approved negative hero margin / soft overlap.
 */
@media (max-width: 1023px) {
  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero {
    margin-bottom: 0;
  }

  body.pwl-lesson-prototype .pwl-lesson-shell {
    padding-top: clamp(1.15rem, 3.2vw, 1.85rem);
  }
}

@media (max-width: 900px) {
  body.pwl-lesson-prototype {
    --pwl-hero-height: clamp(22rem, 62vw, 34rem);
    --pwl-hero-type-top: 55%;
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__inner {
    width: min(34rem, 92%);
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__inner::before {
    width: min(30rem, 122%);
    height: min(17.5rem, 112%);
    top: 47%;
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__image {
    object-position: center top;
  }

  /* C2 LIVING — keep prior tablet sizing/placement; desktop LIVING unchanged */
  body.pwl-lesson-prototype.pwl-c2 .pwl-lesson-heirloom-hero__backdrop {
    top: clamp(1.2rem, 3vw, 1.65rem);
    font-size: clamp(3.5rem, 14vw, 6.25rem);
    letter-spacing: 0.01em;
    color: rgba(112, 74, 116, 0.58);
    transform: translateX(calc(-50% - 1.75vw));
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__masthead {
    margin-top: clamp(-1.1rem, -2.5vw, -0.5rem);
    padding-bottom: clamp(4.85rem, 15vw, 7.5rem);
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__program {
    margin-bottom: 0;
    font-size: clamp(0.76rem, 2vw, 0.9rem);
    transform: translateY(clamp(-0.45rem, -1.4vw, -0.25rem));
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__flourish {
    width: min(12rem, 56%);
    margin-bottom: 0.8rem;
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__chapter {
    font-size: clamp(1.32rem, 4.2vw, 1.7rem);
    margin-bottom: 0.4rem;
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__conversation {
    font-size: clamp(1.6rem, 5.2vw, 2.15rem);
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__progress {
    font-size: clamp(0.84rem, 2.8vw, 0.98rem);
  }

  body.pwl-lesson-prototype .pwl-lesson-page-wash::after {
    width: min(100%, 86%);
    background: radial-gradient(
      ellipse 78% 65% at 50% 35%,
      rgba(252, 247, 240, 0.3) 0%,
      rgba(252, 247, 240, 0.12) 55%,
      transparent 82%
    );
  }

  body.pwl-lesson-prototype .pwl-journal-stack {
    padding: 0 0.1rem;
  }

  body.pwl-lesson-prototype .pwl-journal-panel {
    padding: clamp(1.55rem, 4vw, 2.1rem) clamp(0.95rem, 3.2vw, 1.4rem)
      clamp(1.6rem, 4.2vw, 2.2rem);
  }

  body.pwl-lesson-prototype .pwl-journal-panel::before {
    inset: -0.1rem -0.25rem;
    background-size: 2.7rem auto, auto, auto;
  }

  /* C2: no sprig layer — keep two-layer wash sizes only */
  body.pwl-lesson-prototype.pwl-c2 .pwl-journal-panel::before {
    background-size: auto, auto;
  }

  body.pwl-lesson-prototype .pwl-section-divider {
    margin: clamp(2.25rem, 4.7vw, 3.1rem) auto;
  }

  body.pwl-lesson-prototype.pwl-c2 .pwl-section-divider {
    margin: clamp(1.00rem, 2.05vw, 1.37rem) auto;
  }
}

/*
 * C1 BEGINNING — iPad/tablet band only (not desktop ≥1024).
 * Do NOT reuse desktop lighthouse offset. Optically center in open sky.
 */
@media (min-width: 701px) and (max-width: 1023px) {
  body.pwl-lesson-prototype:not(.pwl-c2) .pwl-lesson-heirloom-hero__backdrop {
    top: clamp(1.15rem, 2.8vw, 1.55rem);
    font-size: clamp(3.05rem, 7.6vw, 4.35rem);
    letter-spacing: 0.008em;
    margin-right: 0;
    color: rgba(112, 74, 116, 0.58);
    /* Near-center with tiny open-sky bias — not the desktop -4.75vw nudge */
    transform: translateX(calc(-50% - 0.6vw));
  }
}

/*
 * Intermediate / half-screen only: slightly narrower text measure so body copy
 * clears lavender/floral/script side art. Vellum field (stack) stays wider than
 * the text so it still feathers into parchment. Wide desktop + phone untouched.
 */
@media (min-width: 701px) and (max-width: 1150px) {
  body.pwl-lesson-prototype .pwl-lesson-shell {
    width: min(100% - (var(--pwl-edge-pad, 0.85rem) * 2), 38rem);
  }

  body.pwl-lesson-prototype .pwl-journal-stack {
    max-width: 38rem;
  }

  body.pwl-lesson-prototype .pwl-journal-panel p,
  body.pwl-lesson-prototype .pwl-journal-panel h3,
  body.pwl-lesson-prototype .pwl-journal-panel ul,
  body.pwl-lesson-prototype .pwl-journal-panel ol {
    max-width: 32.85rem; /* ~10% from 36.5rem */
  }
}

@media (max-width: 700px) {
  body.pwl-lesson-prototype {
    --pwl-hero-height: clamp(20rem, 78vw, 28rem);
    --pwl-hero-type-top: 56%;
  }

  body.pwl-lesson-prototype .pwl-lesson-page-wash {
    background-size: 100% auto;
    background-position: top center;
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__image {
    object-position: center top;
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__inner {
    width: 94%;
    padding: 0.3rem 0.35rem 0.35rem;
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero__inner::before {
    width: min(24rem, 128%);
    height: min(15.5rem, 118%);
    top: 48%;
    -webkit-backdrop-filter: blur(1.35px);
    backdrop-filter: blur(1.35px);
  }

  /*
   * C1 BEGINNING — phone only. Stay large/elegant/readable in open sky;
   * fit between foliage and lighthouse. Desktop untouched.
   */
  body.pwl-lesson-prototype:not(.pwl-c2) .pwl-lesson-heirloom-hero__backdrop {
    top: clamp(1rem, 3.2vw, 1.4rem);
    font-size: clamp(2.35rem, 11.2vw, 3.15rem);
    letter-spacing: 0.006em;
    margin-right: 0;
    color: rgba(108, 72, 112, 0.6);
    transform: translateX(-50%);
  }

  /* C2 LIVING — keep prior phone sizing/placement; desktop LIVING unchanged */
  body.pwl-lesson-prototype.pwl-c2 .pwl-lesson-heirloom-hero__backdrop {
    top: clamp(1.1rem, 3.4vw, 1.5rem);
    font-size: clamp(2.85rem, 15vw, 4.75rem);
    letter-spacing: 0.01em;
    color: rgba(108, 72, 112, 0.6);
    transform: translateX(calc(-50% - 0.25vw));
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__masthead {
    margin-top: clamp(-0.85rem, -2vw, -0.35rem);
    padding-bottom: clamp(4rem, 16vw, 5.85rem);
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__program {
    margin-bottom: 0;
    letter-spacing: 0.14em;
    font-size: clamp(0.72rem, 3vw, 0.84rem);
    transform: translateY(clamp(-0.35rem, -1.2vw, -0.2rem));
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__flourish {
    width: min(11rem, 60%);
    margin: 0.12rem auto 0.7rem;
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__chapter {
    font-size: clamp(1.22rem, 5vw, 1.48rem);
    margin-bottom: 0.35rem;
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__conversation {
    font-size: clamp(1.42rem, 6vw, 1.85rem);
    margin-bottom: 0.45rem;
  }

  body.pwl-lesson-prototype .pwl-lesson-heirloom-hero .pwl-lesson-hero__progress {
    font-size: clamp(0.8rem, 3vw, 0.92rem);
    letter-spacing: 0.1em;
  }

  body.pwl-lesson-prototype .pwl-lesson-shell {
    width: min(100% - 1.2rem, 42rem);
  }

  body.pwl-lesson-prototype .pwl-journal-stack {
    padding: 0;
  }

  body.pwl-lesson-prototype .pwl-journal-panel {
    /* Wide reading field — avoid narrow boxed look on phones */
    padding: clamp(1.5rem, 5.2vw, 1.9rem) clamp(0.85rem, 3.8vw, 1.2rem)
      clamp(1.55rem, 5.4vw, 2rem);
  }

  body.pwl-lesson-prototype .pwl-journal-panel::before {
    inset: -0.05rem -0.08rem;
    background-size: 2.35rem auto, auto, auto;
    background-position: right 4% bottom 8%, center, center;
    opacity: 0.95;
  }

  /* C2: no sprig layer — keep two-layer wash sizes/positions only */
  body.pwl-lesson-prototype.pwl-c2 .pwl-journal-panel::before {
    background-size: auto, auto;
    background-position: center, center;
  }

  body.pwl-lesson-prototype .pwl-journal-panel--opening {
    padding-top: clamp(1.7rem, 5.5vw, 2.25rem);
    padding-bottom: clamp(1.55rem, 5vw, 2.05rem);
  }

  body.pwl-lesson-prototype .pwl-section-divider {
    margin: clamp(2.1rem, 5.7vw, 2.85rem) auto;
    width: min(8.5rem, 48%);
  }

  body.pwl-lesson-prototype.pwl-c2 .pwl-section-divider {
    margin: clamp(0.93rem, 2.49vw, 1.25rem) auto;
  }

  body.pwl-lesson-prototype .pwl-journal-panel p {
    margin-bottom: 1.3rem;
  }

  body.pwl-lesson-prototype .gh-anchor-statement[data-pwl-lesson-anchor-statement] {
    margin-bottom: clamp(2rem, 5.5vw, 2.75rem);
  }

  body.pwl-lesson-prototype .gh-heirloom-anchor[data-pwl-heirloom-placement="after-navigation"] {
    margin-top: clamp(2rem, 5.5vw, 2.75rem);
  }
}