/* Homepage-specific composition — layered on top of css/style.css.
   Reusable primitives (buttons, tags, route-strip, hero-media) live in
   style.css; this file is the arrangement particular to index.html. */

/* --- Home-page-only reading style ------------------------------------------
   Font family/line-height are now the site-wide values (style.css) - Zilla
   Slab/Karla rolled out everywhere, not just here. This one stylistic choice
   remains home-specific: justified text reads as dense/editorial, and
   left-aligned suits the more open, product-like feel of the home page. */
body.home p,
body.home dd {
  text-align: left;
  hyphens: none;
}

/* --- Intro overlay --------------------------------------------------------
   One-time typewriter intro, gated by js/intro.js (sessionStorage + a
   prefers-reduced-motion check happen there, not here). This file only
   owns what it looks like while it's showing and how it fades. */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: #000000;
  opacity: 1;
  transition: opacity 700ms ease;
}
.intro-overlay--hidden {
  opacity: 0;
  pointer-events: none;
}

.intro-overlay__text {
  margin: 0;
  max-width: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.1rem, 0.85rem + 2vw, 2.1rem);
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--white);
}

.intro-overlay__cursor {
  display: inline-block;
  width: 0.55em;
  margin-left: 0.1em;
  border-bottom: 3px solid var(--white);
  vertical-align: -0.05em;
  animation: intro-blink 1s step-end infinite;
}
@keyframes intro-blink {
  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-overlay,
  .intro-overlay__cursor {
    animation: none;
    transition: none;
  }
}

/* --- Hero -------------------------------------------------------------
   Full-bleed video/photo with a bold two-line text overlay, centered in
   the frame. Position and size are all CSS custom properties (set below)
   so they're a one-line change once compared against a reference layout
   — nothing here needs restructuring to move or resize the overlay.
   ---
   Both headline lines now sit directly on the footage with no
   background box — legibility comes from the scrim gradient plus a
   text-shadow on the headline itself, so it holds up against lighter
   frames without needing a solid fill behind either line. */
:root {
  /* A viewport-relative unit on purpose, not a percentage of the hero's
     own height: the hero is ~1.75x a screen tall, so "% of hero height"
     would push the text most of the way down a two-screen-tall section
     — invisible without heavy scrolling. Anchoring to vh instead keeps
     it positioned within the first screen, just below true center. */
  --hero-overlay-top: 56vh;
  --hero-overlay-max-width: 900px;
  --hero-headline-size: clamp(2.5rem, 1.4rem + 6.5vw, 5.75rem);
}

.hero {
  position: relative;
  min-height: 125vh; /* ~22% shorter than the previous 160vh */
  overflow: hidden;
  border-bottom: 4px solid var(--white);
  background: var(--moss);
}

.hero__media-wrap {
  position: absolute;
  inset: 0;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(66, 88, 6, 0.15) 0%, rgba(66, 88, 6, 0.35) 45%, rgba(66, 88, 6, 0.7) 100%);
  pointer-events: none;
}

.hero__overlay {
  position: absolute;
  z-index: 2;
  top: var(--hero-overlay-top);
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: var(--hero-overlay-max-width);
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xl);
}

.hero__headline {
  margin: 0;
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: var(--hero-headline-size);
  line-height: 1.05;
  text-shadow: 0 2px 16px rgba(20, 20, 0, 0.5), 0 1px 4px rgba(20, 20, 0, 0.4);
}
.hero__headline-line {
  display: block;
}
.hero__headline-line--white {
  color: var(--white);
}
.hero__headline-line--sand {
  color: var(--sand);
  margin-top: 0.1em;
}

/* --- Hero CTA -------------------------------------------------------------
   Same formatting logic as the headline (Zilla Slab, bold, sized with a
   viewport-scaling clamp) but inverted: green text on a solid white
   backing, rather than a light color sitting directly on the footage —
   this one needs to read as a distinct, clickable panel, not more
   headline. */
:root {
  --hero-cta-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.75rem);
}
.hero__cta {
  display: inline-block;
  padding: 0.3em 0.9em;
  background: var(--white);
  color: var(--moss);
  border: none;
  font-family: var(--font-hero);
  font-weight: 700;
  font-size: var(--hero-cta-size);
  line-height: 1.05;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: none;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.hero__cta:hover,
.hero__cta:focus-visible {
  background: var(--sand);
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  :root {
    --hero-cta-size: clamp(1.25rem, 1.1rem + 2vw, 1.75rem);
  }
}

.hero noscript {
  position: absolute;
  inset: 0;
}
.hero__noscript-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .hero {
    min-height: 80vh; /* ~20% shorter than the previous 100vh cap */
  }
}
@media (max-width: 480px) {
  :root {
    --hero-headline-size: clamp(2rem, 1.5rem + 6vw, 2.75rem);
  }
  .hero__overlay {
    gap: var(--space-lg);
  }
}

/* --- Brand story --------------------------------------------------------
   A quiet aside, not a pull-quote: modest size, ruled left edge, narrow
   measure, tucked between the hero and the activities list. */
/* --- Find my booking (right under the hero) ------------------------------
   A short cream band: heading, one line of help, contact line, and a solid
   moss button (the site's .btn is white-on-moss, made for dark surfaces). */
.find-booking {
  background: #e8d8b2;
  color: var(--moss);
  padding-block: var(--space-lg);
}
.find-booking__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
}
.find-booking__text {
  flex: 1 1 32rem;
  max-width: 60ch;
}
.find-booking h2 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2xs);
}
.find-booking p {
  font-family: var(--font-body);
  margin: 0;
  line-height: var(--leading-normal);
}
.find-booking__small {
  margin-top: var(--space-2xs) !important;
  font-size: var(--text-sm);
}
.find-booking__small a {
  color: var(--moss);
  font-weight: 700;
}
.find-booking__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  background: var(--moss);
  color: var(--sand);
  border: 2px solid var(--moss);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.find-booking__btn:hover {
  background: transparent;
  color: var(--moss);
}

.brand-story {
  padding-block: var(--space-xl);
}
.brand-story__note {
  max-width: 44ch;
  border-left: 3px solid var(--moss);
  padding-left: var(--space-md);
  margin-bottom: var(--space-sm);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--moss);
}
.brand-story__link {
  margin-left: calc(var(--space-md) + 3px);
}

/* --- Waypoints (activities) ----------------------------------------------
   A stack of signpost arms, not a card grid: each row keeps its jagged
   arrow silhouette from the earlier flat-color version, now filled with
   a full-bleed photo instead of a solid fill. A directional scrim keeps
   the overlaid text legible against whatever the photo is doing — darkest
   behind the text, fading out toward the photo's clear side. Odd rows
   point right, even rows point left — the same asymmetric zig-zag as
   before, just with a photo doing the work now. */
.waypoints {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.waypoint {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  min-height: 320px;
  background: var(--moss);
  padding: var(--space-lg) var(--space-xl);
}

.waypoint__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.waypoint__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(20, 25, 0, 0.82) 0%, rgba(20, 25, 0, 0.5) 40%, rgba(20, 25, 0, 0.1) 75%);
  pointer-events: none;
}
.waypoint--left .waypoint__scrim {
  background: linear-gradient(to left, rgba(20, 25, 0, 0.82) 0%, rgba(20, 25, 0, 0.5) 40%, rgba(20, 25, 0, 0.1) 75%);
}

.waypoint--right {
  clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 50%, calc(100% - 32px) 100%, 0 100%);
  padding-right: calc(var(--space-xl) + 32px);
}
.waypoint--left {
  flex-direction: row-reverse;
  clip-path: polygon(32px 0, 100% 0, 100% 100%, 32px 100%, 0 50%);
  padding-left: calc(var(--space-xl) + 32px);
}

.waypoint__body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
}
.waypoint__body h3 {
  color: var(--white);
  margin-bottom: 0;
  text-shadow: 0 1px 8px rgba(20, 20, 0, 0.45);
}

.waypoint__meta {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 200px;
}

@media (max-width: 760px) {
  .waypoint,
  .waypoint--right,
  .waypoint--left {
    flex-direction: column;
    align-items: flex-start;
    clip-path: none;
    padding: var(--space-lg);
    gap: var(--space-md);
    min-height: 280px;
    justify-content: flex-end;
  }
  .waypoint__scrim,
  .waypoint--left .waypoint__scrim {
    background: linear-gradient(180deg, rgba(20, 25, 0, 0) 35%, rgba(20, 25, 0, 0.82) 100%);
  }
  .waypoint__meta {
    min-width: 0;
  }
}

/* --- Teasers (conservation / plan your visit) ----------------------------- */
/* The teaser's heading/paragraph/link column is narrower than the page
   wrap on purpose (readable measure) — .wrap already centers itself via
   margin-inline: auto, so narrowing just the max-width here centers the
   whole column instead of leaving it flush against the left edge with
   empty space on the right. */
.teaser .wrap {
  max-width: var(--content-width-prose);
}
.teaser h2 {
  margin-bottom: var(--space-sm);
}
.teaser p {
  margin-bottom: var(--space-md);
}
.teaser h3 {
  margin-top: var(--space-md);
  margin-bottom: var(--space-xs);
}
/* Route-distance list in the rewritten Getting Here teaser - same
   dash-marker look as activity.css's .detail-list (Requirements/What's
   Included on the activity pages), duplicated here in miniature rather than
   loading all of activity.css just for this one list on a page that
   otherwise has nothing to do with activity detail pages. */
.teaser .route-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.teaser .route-list li {
  padding-left: var(--space-md);
  position: relative;
}
.teaser .route-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 2px;
  background: var(--moss);
}

/* --- More Info (utility nav above the footer) --------------------------- */
/* Deliberately a plain link row, not the .waypoint/.teaser card treatment
   used everywhere else on this page - this section is wayfinding to
   existing content, not another marketing moment competing for attention. */
.more-info .wrap {
  max-width: var(--content-width-prose);
}
.more-info h2 {
  margin-bottom: var(--space-sm);
}
.more-info__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  padding: 0;
  margin: 0;
  list-style: none;
}