/* ==========================================================================
   Life at the house, option 2 (index-option2.php only) — layered parallax
   after "Parallax Scrolling" by Osmo. Back and front layers are the same
   photo: the front one is masked to the house and lawn, so the title sits
   between them. assets/js/parallax-layers.js moves each layer by its data-px.
   ========================================================================== */

.jh-px { --px-forest: #0d1f0e; position: relative; background: var(--px-forest); color: #f3ede1; }

.jh-px__visual {
  position: relative; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 560px;
}
.jh-px__layer { position: absolute; inset: 0; will-change: transform; }
.jh-px__layer img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
}
/* back: the house and trees, darkened so the white title reads over the brick */
.jh-px__layer--back img { filter: brightness(.62) saturate(1.05); }
/* front: the same photo, kept only from the lawn down, so the lawn passes over the title */
.jh-px__layer--front {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 44%, #000 52%);
          mask-image: linear-gradient(to bottom, transparent 0%, transparent 44%, #000 52%);
}
.jh-px__layer--front img { filter: brightness(.9); }

.jh-px__layer--title {
  display: flex; flex-direction: column; align-items: center;
  /* one line, sitting just above the lawn edge (~44%) so the lawn tucks under it */
  padding-top: 28vh;
  text-align: center; pointer-events: none;
}
.jh-px__eyebrow {
  margin: 0 0 8px !important;
  font-size: 13px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: #b5d29a; text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}
.jh-px .jh-px__title {
  margin: 0;
  font-family: var(--jh-serif, "Cormorant Garamond"), Georgia, serif; font-weight: 700;
  font-size: clamp(44px, 6.6vw, 116px); line-height: .95; letter-spacing: -0.03em; white-space: nowrap;
  color: #fff;
  text-shadow: 0 6px 40px rgba(0, 0, 0, .35);
}
.jh-px__title em { font-style: italic; font-weight: 500; }

.jh-px__fade {
  position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to bottom, transparent 0%, rgba(13, 31, 14, .55) 45%, var(--px-forest) 100%);
  pointer-events: none;
}

/* ---------- after the scene ---------- */
.jh-px__after {
  position: relative;
  width: min(1180px, 100% - 2 * var(--jh-gutter, 48px)); margin-inline: auto;
  padding: clamp(8px, 2vh, 24px) 0 clamp(80px, 12vh, 140px);
}
.jh-px .jh-px__lead {
  max-width: 34ch; margin: 0 auto clamp(40px, 7vh, 72px) !important; text-align: center;
  font-family: var(--jh-serif, "Cormorant Garamond"), Georgia, serif; font-style: italic; font-weight: 500;
  font-size: clamp(24px, 2.6vw, 36px); line-height: 1.25; color: #f3ede1;
}
.jh-px__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 28px);
}
.jh-px__card { margin: 0; padding: 0; }
.jh-px__card::before { display: none; }
.jh-px__card figure { margin: 0 0 14px; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 5; }
.jh-px__card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.jh-px__card:hover img { transform: scale(1.05); }
.jh-px__k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #b5d29a; }
.jh-px__card b { display: block; margin-top: 4px; font-family: var(--jh-serif, "Cormorant Garamond"), Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1.2; }

/* entrance (parallax-layers.js adds .is-armed, then .is-in) */
.jh-px.is-armed .jh-px__lead, .jh-px.is-armed .jh-px__card { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform 1s cubic-bezier(.22, 1, .36, 1); }
.jh-px.is-armed .jh-px__card { transition-delay: calc(var(--i) * 90ms + 120ms); }
.jh-px.is-armed .jh-px__after.is-in .jh-px__lead, .jh-px.is-armed .jh-px__after.is-in .jh-px__card { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .jh-px__grid { grid-template-columns: 1fr 1fr; }
  .jh-px__layer--title { padding-top: 22vh; }
  .jh-px .jh-px__title { white-space: normal; font-size: clamp(40px, 12vw, 72px); }
  .jh-px__title em { display: block; }
  .jh-px__layer img { object-position: 38% 40%; }
}
@media (max-width: 480px) {
  .jh-px__card b { font-size: 18px; }
}