/* October 19: authentic photography, complete faces and gentle, optional motion. */
.page-head-photo { padding-block: clamp(30px, 4.5vw, 64px); }
.page-head-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(28px, 5vw, 68px);
}
.page-head-copy { min-width: 0; }
.page-head-copy h1 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); }
.page-head-copy p:last-child { margin-bottom: 0; }
.page-head-media {
  min-width: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--sage-soft);
  box-shadow: var(--shadow);
}
.page-head-media picture, .page-head-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* The story image keeps its entire original frame. Copy never covers a face. */
.hero-story {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 22px clamp(30px, 5vw, 64px);
  padding: 24px max(var(--gutter), calc((100vw - var(--max)) / 2)) 44px;
  color: var(--text);
  background: var(--cream);
}
.hero-story::after { display: none; }
.hero-story .breadcrumbs {
  position: static;
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--muted);
}
.hero-story .breadcrumbs a { color: var(--muted); }
.hero-story .hero-content {
  grid-column: 1;
  grid-row: 2;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 20px 0;
  justify-content: center;
}
.hero-story .hero-content h1 { color: var(--charcoal); }
.hero-story .hero-content .lead { color: var(--text); }
.hero-story .hero-content h1, .hero-story .hero-content p { text-shadow: none; }
.hero-story .hero-media {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  width: 100%;
  height: auto;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
  transform: none !important;
  will-change: auto;
}
.hero-story .hero-media picture, .hero-story .hero-media img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transform: none !important;
  animation: none !important;
}

/* Match the five other Explore the Retreat thumbnails; keep all three faces. */
.retreat-activities-photo { display: block; width: 100%; height: 100%; }
.retreat-activities-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: none !important;
}
.subnav a { min-height: 44px; display: inline-flex; align-items: center; }

/* Progressive enhancement: content is always visible, even before observation. */
@media (prefers-reduced-motion: no-preference) {
  .tn-reveal.tn-visible {
    animation: tn-nature-arrive .65s cubic-bezier(.2, .65, .3, 1) var(--tn-delay, 0ms) both;
  }
  html.tn-ready .page-head-media {
    animation: tn-nature-arrive .8s cubic-bezier(.2, .65, .3, 1) both;
  }
  @keyframes tn-nature-arrive {
    from { opacity: .72; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: none; }
  }
}

@media (max-width: 759px) {
  .page-head-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .page-head-photo { padding-top: 28px; padding-bottom: 28px; }
  .page-head-media { border-radius: var(--radius); }
  .page-head-copy h1 { font-size: clamp(2.15rem, 8vw, 3rem); }
  .hero-story { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-bottom: 28px; }
  .hero-story .hero-media { grid-column: 1; grid-row: 2; aspect-ratio: auto; border-radius: var(--radius); }
  .hero-story .hero-content { grid-column: 1; grid-row: 3; padding: 0; }
}

@media (max-width: 1079px) {
  /* Keep the full navigation in normal flow when JavaScript is unavailable. */
  .no-js .header-inner { height: auto; min-height: var(--header-h); flex-wrap: wrap; padding-block: 12px; }
  .no-js .site-nav { flex: 0 0 100%; min-width: 0; width: 100%; padding: 0; }
  .no-js .site-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .no-js .site-nav a { display: flex; align-items: center; min-height: 44px; padding: 8px; }
  .no-js .header-actions { display: none; }
  .no-js .nav-cta { margin-top: 12px; }
  .no-js .nav-cta a { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-reveal, .tn-reveal.tn-visible, html.tn-ready .page-head-media {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}