/* ==========================================================================
   HavenRidge Retreat — home page
   Implemented from the Claude Design prototype (project/Home.dc.html).
   Values are carried over 1:1 from the prototype's inline styles.
   ========================================================================== */

:root {
  /* Greens */
  --forest-darkest: #1C2821;
  --forest: #2C4034;
  --forest-text: #4A5A4E;
  --sage: #5A6A5D;
  --sage-dim: #6A7A6D;

  /* Creams */
  --cream: #F4F1E8;
  --cream-2: #EDE8DA;
  --cream-3: #E8DFC8;

  /* Metals */
  --gold: #8E7A4F;
  --sand: #B9A87A;
  /* Lifted from #C9B37E so the attribution still clears AA against the
     quote photograph now that its scrim is lighter. */
  --sand-quote: #D9C89A;
  --copper: #C08A56;
  --copper-deep: #B0703C;

  /* Rules */
  --line-on-light: rgba(44, 64, 52, 0.14);
  --line-on-light-strong: rgba(44, 64, 52, 0.2);
  --line-on-dark: rgba(244, 241, 232, 0.14);
  --line-card: rgba(244, 241, 232, 0.18);
  --line-card-soft: rgba(244, 241, 232, 0.16);

  /* Type */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Placeholder hatching for photo slots */
  --hatch-dark: repeating-linear-gradient(135deg, #2E3E32 0 11px, #26362B 11px 22px);
  --hatch-light: repeating-linear-gradient(135deg, #E4DDCA 0 11px, #DBD3BD 11px 22px);

  /* Photography grade. Pulls the vivid summer greens back a little and warms
     them toward the cream palette so photographs sit with the brand rather
     than against it. Dial here — it applies to every photo on the site. */
  --photo-filter: saturate(0.88) sepia(0.10) contrast(1.03) brightness(0.99);

  /* Layout */
  --shell: 1280px;
  --gutter: 28px;
  --section-pad: clamp(80px, 9vw, 140px);
  --header-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--forest);
  font-family: var(--sans);
  overflow-x: hidden;
}

a { color: var(--forest); text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--forest); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

@keyframes hrRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Shared containers ------------------------------------------------------- */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
}
.shell--narrow { max-width: 1180px; }

.section {
  padding: var(--section-pad) var(--gutter);
}
.section--darkest { background: var(--forest-darkest); }
.section--forest  { background: var(--forest); }
.section--cream-2 { background: var(--cream-2); }

/* Anchor targets clear the fixed header */
[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

/* Shared type ------------------------------------------------------------- */

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--sand { color: var(--sand); }

.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.9vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 18px 0 0;
}
.h2--cream { color: var(--cream); }

.h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  margin: 0;
}
.h3--cream { color: var(--cream); }
.h3--sm { font-size: 1.4rem; }
.h3--xs { font-size: 1.35rem; margin: 0 0 10px; }

.prose {
  font-size: 1.02rem;
  line-height: 1.78;
  font-weight: 300;
  color: var(--forest-text);
  margin: 24px 0 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.prose + .prose { margin-top: 18px; }
/* Jost is loaded at 300/400/500 only, so emphasis uses 500 rather than
   letting the browser synthesise a bold. */
.prose strong { font-weight: 500; }
.prose--cream strong { color: var(--cream); }
.prose--cream { color: rgba(244, 241, 232, 0.74); margin-top: 20px; }
.prose--sm { font-size: 1rem; line-height: 1.75; margin-top: 14px; max-width: 52ch; }
.prose--tight { margin-top: 18px; }
.prose--wide { max-width: 58ch; margin-top: 20px; }

.section__intro { max-width: 640px; }
.section__intro--narrow { max-width: 620px; }
.section__intro--tight { max-width: 600px; }

.link-underline {
  display: inline-block;
  margin-top: 26px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--forest);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 6px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.link-underline:hover { color: var(--gold); }
.link-underline--cream {
  color: var(--cream);
  border-bottom-color: var(--sand);
}
.link-underline--cream:hover { color: var(--cream); border-bottom-color: var(--cream); }
.link-underline--sm { margin-top: 14px; font-size: 11px; letter-spacing: 0.16em; }
/* On its own line, so a button that follows drops beneath it. */
.link-underline--block { display: block; width: fit-content; }
/* Two underlined links side by side; they stack at phone width. */
.link-row { display: flex; flex-wrap: wrap; gap: 0 36px; }

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 17px 30px;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn--sm {
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 12px 16px;
}
.btn--cream { color: var(--forest-darkest); background: var(--cream-3); }
.btn--cream:hover { background: var(--cream); color: var(--forest-darkest); }

.btn--outline-cream {
  color: var(--cream);
  border: 1px solid rgba(244, 241, 232, 0.5);
}
.btn--outline-cream:hover {
  background: rgba(244, 241, 232, 0.12);
  border-color: var(--cream);
  color: var(--cream);
}

.btn--forest { color: var(--cream); background: var(--forest); }
.btn--forest:hover { background: var(--forest-darkest); color: var(--cream); }

/* Header ------------------------------------------------------------------ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(28, 40, 33, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-on-dark);
}

.site-header__bar {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 13px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* The house mark with the wordmark and tagline typed beside it, laid out
   like the owners' horizontal lockup (project/uploads/1-1.png): the text
   block sits in the lower half of the mark, its last baseline almost flush
   with the house's bottom edge, and the tagline runs about the width of
   the name. Type is larger than the lockup's, deliberately — its wordmark
   would be ~12px and tagline ~5px at this header height. Shown at every
   width. */
.brand {
  display: flex;
  align-items: flex-end;
  gap: 11px;
  color: var(--cream);
  flex-shrink: 0;
}
.brand__mark { height: 60px; width: auto; }
.brand__words { display: flex; flex-direction: column; gap: 7px; padding-bottom: 2px; }
.brand__name {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
}
.brand__sub {
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 232, 0.62);
  line-height: 1;
  white-space: nowrap;
}
.brand__sep { margin: 0 0.15em; opacity: 0.7; }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav__link {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 241, 232, 0.78);
  transition: color 0.2s ease;
}
.nav__link:hover { color: var(--cream); }
.nav__link--toggle { display: inline-flex; align-items: center; gap: 7px; }
.nav__caret { font-size: 7px; opacity: 0.65; }

.nav__group {
  position: relative;
  /* Bridges the gap to the dropdown so the hover doesn't break between them. */
  padding-bottom: 16px;
  margin-bottom: -16px;
}
.nav__menu {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: 220px;
  background: var(--forest-darkest);
  border: 1px solid var(--line-card);
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  z-index: 20;
}
.nav__menu[hidden] { display: none; }
.nav__menu-link {
  padding: 11px 20px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 232, 0.78);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav__menu-link:hover {
  color: var(--cream);
  background: rgba(244, 241, 232, 0.06);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Book now ----------------------------------------------------------------
   Every "Book now" is a small menu offering Airbnb or VRBO — the owners want
   the visitor to choose the site. It opens on click, not hover, because the
   header button stays visible on phones. The panel borrows the Experience
   dropdown's look so the two read as one system. */

.book {
  position: relative;
  display: inline-block;
}
.book__toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  font-family: var(--sans);
  cursor: pointer;
}
.book__caret {
  font-size: 7px;
  opacity: 0.65;
  transition: transform 0.2s ease;
}
.book__toggle[aria-expanded="true"] .book__caret { transform: rotate(180deg); }
.book__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: var(--forest-darkest);
  border: 1px solid var(--line-card);
  display: flex;
  flex-direction: column;
  padding: 6px 0;
  z-index: 20;
}
.book__menu[hidden] { display: none; }
/* In the header the button sits against the right edge, so the panel hangs
   from its right corner rather than running off-screen. */
.site-header__actions .book__menu { left: auto; right: 0; }.book__link {
  padding: 11px 20px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(244, 241, 232, 0.78);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.book__link:hover {
  color: var(--cream);
  background: rgba(244, 241, 232, 0.06);
}

.burger {
  display: none;
  background: transparent;
  border: 1px solid rgba(244, 241, 232, 0.32);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1;
  padding: 11px 13px;
  cursor: pointer;
}

.mobile-menu {
  border-top: 1px solid var(--line-on-dark);
  padding: 8px var(--gutter) 26px;
  display: flex;
  flex-direction: column;
  background: rgba(28, 40, 33, 0.98);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__link {
  padding: 14px 0;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 241, 232, 0.82);
  border-bottom: 1px solid rgba(244, 241, 232, 0.12);
}
.mobile-menu__link:last-child { border-bottom: none; }
.mobile-menu__link--sub {
  padding-left: 18px;
  color: rgba(244, 241, 232, 0.62);
}

/* The prototype swapped nav for the burger at 1024px. */
@media (max-width: 1023px) {
  .nav { display: none; }
  .burger { display: block; }
}
/* A phone cannot hold the mark, the wordmark, a Book now button and the
   burger in one row (at 360px they need ~420px), so below 640px Book now
   leaves the bar and sits at the top of the phone menu as a full-width
   button. Its Airbnb/VRBO panel opens in flow, pushing the links down,
   rather than floating over them. Every Book now on the page body stays. */
.mobile-menu__book { display: none; }
@media (max-width: 640px) {
  .site-header__actions .book { display: none; }
  .mobile-menu__book {
    display: block;
    padding: 14px 0 10px;
    border-bottom: 1px solid rgba(244, 241, 232, 0.12);
  }
  .mobile-menu__book .book__toggle { width: 100%; justify-content: center; padding: 14px 16px; }
  .mobile-menu__book .book__menu {
    position: static;
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .mobile-menu__book .book__link { padding: 12px 0; font-size: 12px; letter-spacing: 0.16em; }
}

/* Hero -------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  /* No overflow: hidden here — .hero__media clips the video itself, and the
     Book your stay menu needs to hang below the hero's bottom edge. */
  background: var(--forest-darkest);
}
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform; /* main.js moves it for the parallax */
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 29, 23, 0.62) 0%,
    rgba(20, 29, 23, 0.28) 38%,
    rgba(20, 29, 23, 0.86) 100%);
}
.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 150px var(--gutter) 68px;
}
.hero__content {
  animation: hrRise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.eyebrow-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.eyebrow-rule__text {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--cream-3);
}

.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 7.4vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0;
  max-width: 16ch;
}
.hero__lede {
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.65;
  font-weight: 300;
  color: rgba(244, 241, 232, 0.84);
  max-width: 46ch;
  margin: 28px 0 0;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* Stat band --------------------------------------------------------------- */

.stat-band {
  background: var(--forest-darkest);
  border-top: 1px solid var(--line-on-dark);
  border-bottom: 1px solid var(--line-on-dark);
  padding: 26px var(--gutter);
}
/* Grid, not a wrapping flex. space-between on wrapped flex lines spreads
   whatever lands on the last row across the full width, so at 900px the fifth
   stat floated alone in the middle of the band and at 390px the rows came out
   1/1/2/1. Grid tracks stay aligned however many rows it takes. */
.stat-band__inner {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: space-between;
  gap: 18px 40px;
}
@media (max-width: 1023px) {
  .stat-band__inner {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 16px clamp(28px, 5vw, 56px);
  }
}
@media (max-width: 700px) {
  /* Two columns cannot hold "20 min to Pembina River" beside anything at
     phone width, so one column, left-aligned. */
  .stat-band__inner { grid-template-columns: 1fr; gap: 13px; }
}
.stat {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--cream);
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
}
.stat__lead { color: var(--copper); }
.stat__rest { color: rgba(244, 241, 232, 0.86); }

/* Welcome ----------------------------------------------------------------- */

.welcome__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
}
.welcome__aside { padding-top: 34px; }

.feature-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 11px 32px;
}
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 0.94rem;
  font-weight: 300;
  color: var(--sage);
}
.feature-list--stacked {
  margin-top: 28px;
  max-width: 44ch;
}
.feature-list__item {
  border-bottom: 1px solid var(--line-on-light);
  padding-bottom: 11px;
}
.feature-list__item--last { border-bottom: none; padding-bottom: 0; }
/* The same list on a dark ground. */
.feature-list--dark { color: rgba(244, 241, 232, 0.74); }
.feature-list--dark .feature-list__item { border-bottom-color: var(--line-card); }

/* Photo slots ------------------------------------------------------------- */

.photo-slot {
  position: relative;
  width: 100%;
  background: var(--hatch-dark);
  display: flex;
  align-items: flex-end;
  padding: 20px;
}
.photo-slot--light { background: var(--hatch-light); }
.photo-slot--bordered { border: 1px solid var(--line-card); }

/* Aspect + padding, one modifier per usage in the design */
.photo-slot--tall  { min-height: 440px; }
.photo-slot--1x1   { aspect-ratio: 1 / 1;   padding: 18px; }
.photo-slot--4x3   { aspect-ratio: 4 / 3;   padding: 14px; }
.photo-slot--3x4   { aspect-ratio: 3 / 4;   padding: 22px; }
.photo-slot--3x2   { aspect-ratio: 3 / 2;   padding: 22px; }
.photo-slot--4x5   { aspect-ratio: 4 / 5;   padding: 22px; }
/* 3:2 because that is what the photographs are — 26 of the 29 uploaded are
   3:2 and the rest are close. The design's 4:5 portrait tile cropped every
   one of them down the middle. */
.photo-slot--tile  { aspect-ratio: 3 / 2;   padding: 16px; }
.photo-slot--wide  { aspect-ratio: 21 / 9;  padding: 22px; }
.photo-slot--map   { aspect-ratio: 4 / 3;   padding: 18px; }

.photo-slot--numbered { justify-content: space-between; gap: 10px; }
.photo-slot--arch {
  border-radius: 50% 50% 0 0 / 26% 26% 0 0;
  justify-content: center;
  padding: 22px;
}
/* Shallower than the wedding arch: these photographs have little headroom
   above their subject, so a deep curve crops straight into it. */
.photo-slot--arch-deep { border-radius: 50% 50% 0 0 / 16% 16% 0 0; }
.photo-slot--arch-tall { border-radius: 50% 50% 0 0 / 34% 34% 0 0; }

.photo-slot__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 232, 0.72);
  padding: 6px 10px;
}
.photo-slot__label--xs { font-size: 9.5px; padding: 0; }
.photo-slot__label--lg { font-size: 10.5px; padding: 7px 12px; }
.photo-slot__label--chip {
  color: #7C7461;
  background: rgba(244, 241, 232, 0.82);
}
.photo-slot__label--xs.photo-slot__label--chip { padding: 6px 9px; }
.photo-slot__label--tile { padding: 6px 10px; }
.photo-slot__number {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: rgba(244, 241, 232, 0.5);
  line-height: 1;
}
.photo-slot__number--dark { color: rgba(44, 64, 52, 0.4); }

/* A real photo goes INSIDE its slot, so it inherits the slot's crop, arch
   shape and size. Add .photo-slot--has-photo to the slot and drop the
   placeholder label; keep any overlaid number. */
.photo-slot__img,
.photo-slot__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: var(--photo-filter);
}
/* --photo-filter unifies the photography, but it cannot rescue a clip that
   was shot flat. The main lodge drone pass is one: rendered in its slot it
   measures 0.21 saturation against 0.45 for the neighbouring aerial, and
   reads washed out beside it. This lifts that one source back into the set.
   It has to sit after the rule above — same specificity, so order decides.
   Do not reach for it by default; most footage needs only the base token. */
.photo-slot__img--lift,
.photo-slot__video--lift {
  filter: var(--photo-filter) saturate(1.4) contrast(1.1) brightness(0.92);
}
/* Numbered slots keep 01-04 over the image, so they need a footing to stay
   legible against whatever the photograph is doing down there. */
.photo-slot--numbered.photo-slot--has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(20, 29, 23, 0) 55%, rgba(20, 29, 23, 0.55) 100%);
  pointer-events: none;
}
.photo-slot--has-photo > .photo-slot__number,
.photo-slot--has-photo > .photo-slot__label { position: relative; z-index: 1; }

/* Stay -------------------------------------------------------------------- */

.card--dark { border: 1px solid var(--line-card); }

.stay__feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: clamp(44px, 5vw, 72px);
}
.stay__lodge { padding: clamp(30px, 3.4vw, 48px); }
.stay__link { margin-top: 32px; }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 28px;
  margin-top: 32px;
}
.spec-grid__heading {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 500;
  margin: 0 0 12px;
}
.spec-grid__list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(244, 241, 232, 0.7);
}

.stay__rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.stay__rooms .card--dark { padding: clamp(28px, 3vw, 38px); }
.card__blurb {
  font-size: 0.92rem;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(244, 241, 232, 0.7);
  margin: 10px 0 18px;
}
.card__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 300;
  color: rgba(244, 241, 232, 0.7);
}

/* Experience -------------------------------------------------------------- */

.land-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}
.land-card {
  border: 1px solid var(--line-card-soft);
  display: flex;
  flex-direction: column;
}
.land-card__body { padding: 26px 26px 30px; }
.land-card__blurb {
  font-size: 0.9rem;
  line-height: 1.65;
  font-weight: 300;
  color: rgba(244, 241, 232, 0.7);
  margin: 0;
}

.seasons__intro { margin-top: clamp(60px, 7vw, 100px); }
.seasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(30px, 4vw, 52px);
  margin-top: clamp(36px, 4vw, 56px);
}
.season__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--cream);
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sand);
}
.season__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  font-size: 0.92rem;
  font-weight: 300;
  color: rgba(244, 241, 232, 0.74);
}
.seasons__link { margin-top: 26px; }

/* Split sections (weddings, hunting) -------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 80px);
}
.split--centered { align-items: center; }
.split--tight { gap: clamp(36px, 5vw, 72px); }

.weddings__lede { margin-top: 22px; }
.weddings__cta { margin-top: 30px; }
.hunting__cta { margin-top: 30px; }

/* Pricing ----------------------------------------------------------------- */

.rates {
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line-on-light-strong);
}
.rate-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 20px;
  align-items: baseline;
  border-bottom: 1px solid var(--line-on-light);
  padding: 22px 0;
}
.rate-row__label {
  grid-column: span 2;
  min-width: 0;
}
.rate-row__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0;
}
.rate-row__meta {
  font-size: 0.86rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--sage-dim);
  margin: 6px 0 0;
  max-width: 44ch;
}
.rate-row__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  min-width: 0;
}
.rate-row__season {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--sage);
}
.rate-row__amount {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--copper-deep);
}
.rates__note {
  font-size: 0.86rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--sage-dim);
  margin: 24px 0 0;
  max-width: 74ch;
}

/* Explore the area -------------------------------------------------------- */

/* The twelve place cards sit behind a native <details> so the home page
   is a screen shorter on arrival. No script: the summary is the control,
   and its label swaps between "View" and "Hide" purely in CSS. */
.explore-toggle { margin-top: 30px; }
.explore-toggle__summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}
.explore-toggle__summary::-webkit-details-marker { display: none; }
.explore-toggle__caret {
  font-size: 7px;
  opacity: 0.65;
  transition: transform 0.2s ease;
}
.explore-toggle__open { display: none; }
.explore-toggle[open] .explore-toggle__closed { display: none; }
.explore-toggle[open] .explore-toggle__open { display: inline; }
.explore-toggle[open] .explore-toggle__caret { transform: rotate(180deg); }

.explore {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4vw, 56px);
  margin-top: clamp(36px, 4vw, 56px);
}
.explore__label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.explore__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.place {
  background: var(--cream);
  border: 1px solid rgba(44, 64, 52, 0.16);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.place__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.28rem;
  margin: 0;
}
.place__blurb {
  font-size: 0.9rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--sage);
  margin: 0;
}
.place__dist {
  margin-top: 8px;
  align-self: flex-start;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-deep);
  border: 1px solid rgba(176, 112, 60, 0.55);
  padding: 7px 12px;
}

/* Quote ------------------------------------------------------------------- */

.quote {
  position: relative;
  overflow: hidden;
  padding: clamp(90px, 10vw, 150px) var(--gutter);
  background: var(--forest-darkest);
}
.quote__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The band is roughly 3:1, so a 16:9 clip loses nearly half its height.
     Biasing the crop downward keeps the lodge and forest and drops most of
     the bright cloud, which is what forces the scrim up. */
  object-position: center 62%;
  filter: var(--photo-filter);
  pointer-events: none;
}
.quote__scrim {
  position: absolute;
  inset: 0;
  /* Started at 0.86 -> 0.92, which left the backdrop barely readable, and came
     down to 0.66 -> 0.76 against the dusk photograph this used to carry. The
     daylight aerial that replaced it is far brighter, and at 0.66 the 11px
     gold attribution measures 3.98:1 — under AA. 0.72 puts it at 4.64:1. The
     cite is the floor here, not the keyword row; it is the smallest text and
     the least contrasty colour. Re-measure before lightening this again. */
  background: linear-gradient(180deg, rgba(28, 40, 33, 0.72), rgba(28, 40, 33, 0.8));
}
.quote__inner {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
}
.quote__text {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.42;
  color: var(--cream);
  margin: 0;
  text-wrap: pretty;
}
.quote__cite {
  display: block;
  margin-top: 26px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sand-quote);
}
.quote__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid rgba(244, 241, 232, 0.2);
  font-size: 0.95rem;
  font-weight: 300;
  color: #DDD8C6;
}
/* A wrapping row reads as a ragged pile once the screen is narrow, so the
   six phrases become two tidy columns, then one on a phone. */
@media (max-width: 700px) {
  .quote__keywords { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
}
@media (max-width: 480px) {
  .quote__keywords { grid-template-columns: 1fr; gap: 12px; }
}

/* Closing CTA ------------------------------------------------------------- */

.cta {
  background: var(--cream-2);
  padding: clamp(70px, 8vw, 110px) var(--gutter);
  text-align: center;
}
.cta__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.12;
  color: var(--forest);
  margin: 0 auto;
  max-width: 24ch;
}
.cta__body {
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--forest-text);
  margin: 20px auto 0;
  max-width: 48ch;
}
.cta__btn { margin-top: 34px; padding: 17px 32px; }
/* The closing banners carry a Book now menu with the enquiry path kept as
   a quiet line beneath it, so booking a stay and talking to the owners
   never read as the same action. */
.cta__book { margin-top: 34px; }
.cta__book .book__toggle { padding: 17px 32px; }
.cta__note {
  font-size: 0.88rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--sage);
  margin: 20px auto 0;
  max-width: 44ch;
}
.cta__note a {
  color: var(--forest);
  border-bottom: 1px solid var(--line-on-light-strong);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cta__note a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.cta--forest .cta__note, .cta--video .cta__note { color: rgba(244, 241, 232, 0.66); }
.cta--forest .cta__note a, .cta--video .cta__note a { color: var(--cream); border-bottom-color: rgba(244, 241, 232, 0.35); }
.cta--forest .cta__note a:hover, .cta--video .cta__note a:hover { color: var(--cream); border-bottom-color: var(--cream); }
/* The video banner clips its overflow (for the footage), so its menu opens
   upward rather than being cut off at the section's edge. */
.cta--video .book__menu { top: auto; bottom: calc(100% + 6px); }

/* Footer ------------------------------------------------------------------ */

.site-footer {
  background: var(--forest-darkest);
  padding: clamp(60px, 7vw, 90px) var(--gutter) 22px;
  border-top: 1px solid var(--line-on-dark);
}
/* Three columns — brand, Explore, Contact. Explore is the one place the
   desktop gets a link to Our story (it is only in the phone menu), and the
   two link columns fill what used to be an empty middle between the brand
   and a contact block stranded at the right edge. */
.site-footer__grid {
  display: grid;
  /* Brand and a short description at the left; four headed columns (About,
     Explore, Policies, Contact) at their natural width across the right. */
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  column-gap: clamp(32px, 4.5vw, 64px);
  row-gap: 36px;
  align-items: start;
}
.site-footer__brand { max-width: 360px; }
.site-footer__social {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}
.site-footer__social a {
  display: inline-flex;
  color: rgba(244, 241, 232, 0.72);
  transition: color 0.2s ease;
}
.site-footer__social a:hover { color: var(--cream); }
.site-footer__social svg { width: 20px; height: 20px; fill: currentColor; }
@media (max-width: 1023px) {
  .site-footer__grid { grid-template-columns: auto auto auto auto; justify-content: start; column-gap: clamp(32px, 6vw, 72px); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .site-footer__grid { grid-template-columns: auto auto; column-gap: clamp(40px, 12vw, 96px); }
}
/* The reversed logo sits straight on the dark ground — no cream card. The
   house logo carries the "Weddings | Retreats | Wilderness" tagline, whose
   caps are 3% of the image width, so it is set wider than the old arch was
   (190px) to keep that line above ~7px. */
.site-footer__logo { display: inline-block; }
.site-footer__logo img { width: 240px; height: auto; }
.site-footer__heading {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 500;
  margin: 0 0 16px;
}
.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 300;
  color: rgba(244, 241, 232, 0.72);
}
.site-footer__list a {
  color: rgba(244, 241, 232, 0.72);
  transition: color 0.2s ease;
}
.site-footer__list a:hover { color: var(--cream); }
.site-footer__address { line-height: 1.6; }
.site-footer__bottom a {
  color: inherit;
  border-bottom: 1px solid rgba(244, 241, 232, 0.3);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-footer__bottom a:hover { color: var(--cream); border-bottom-color: var(--cream); }
.site-footer__bottom {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--line-on-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(244, 241, 232, 0.45);
}

@media (max-width: 640px) {
  /* Brand over Contact, on a tighter rhythm. Two blocks side by side would
     leave the contact lines about 155px wide, which wraps an email address. */
  .site-footer { padding-top: 44px; }
  /* About and Explore are short, so they share a row; Policies and Contact
     carry longer lines ("Booking & cancellation", the postal code) and each
     take the full width so nothing breaks mid-phrase. */
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .site-footer__brand,
  .site-footer__grid > :nth-child(4),
  .site-footer__grid > :nth-child(5) { grid-column: 1 / -1; }
  .site-footer__address { white-space: nowrap; }
  .site-footer__logo img { width: 200px; }
  .site-footer__heading { margin-bottom: 12px; }
  .site-footer__list { gap: 8px; font-size: 0.88rem; }
  .site-footer__bottom { margin-top: 24px; padding-top: 16px; }
}

/* In a split section the copy comes first in the markup — correct on a
   desktop, where the two sit side by side, and correct for screen readers,
   which get the heading before the picture. Once the grid stacks, though, it
   drops the photograph below the call-to-action button, where it reads as
   belonging to whatever section comes next. So reorder visually while leaving
   the document order alone.

   732px is not a round number, it is where these splits actually collapse:
   auto-fit with a 320px minimum and the --tight gap needs
   w - 2*28 >= 640 + clamp(36, 5vw, 72), i.e. w >= ~733. Verified 732 is one
   column and 736 is two. Going wider than this would flip the desktop layout
   and put the picture on the left.

   Only direct children match, so Contact's map stays nested where it is, and
   Stay's figure is already first. */
@media (max-width: 732px) {
  .split > .photo-slot { order: -1; }
}

/* ==========================================================================
   Sub-page patterns
   ========================================================================== */

/* Section rhythm ---------------------------------------------------------- */

.section--sub       { padding: clamp(70px, 8vw, 120px) var(--gutter); }
.section--sub-close { padding: 0 var(--gutter) clamp(70px, 8vw, 120px); }
.section--gallery   { padding: clamp(60px, 7vw, 100px) var(--gutter) clamp(70px, 8vw, 120px); }

.shell--1080 { max-width: 1080px; }
.shell--1000 { max-width: 1000px; }

.h2--plain { letter-spacing: normal; }

/* Page hero --------------------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--forest-darkest);
  padding: clamp(170px, 15vw, 210px) var(--gutter) clamp(60px, 7vw, 90px);
}
.page-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.page-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(20, 29, 23, 0.72) 0%,
    rgba(20, 29, 23, 0.55) 55%,
    rgba(20, 29, 23, 0.86) 100%);
}
.page-hero__scrim--long {
  background: linear-gradient(180deg,
    rgba(20, 29, 23, 0.72) 0%,
    rgba(20, 29, 23, 0.58) 60%,
    rgba(20, 29, 23, 0.86) 100%);
}
/* For heroes whose footage is bright where the text sits. The eyebrow lands
   about 42% down, and the stock gradient has thinned to ~0.59 by then, which
   is not enough for 11px gold over a sunlit backdrop. Pair this with
   .page-hero__eyebrow--bright; neither half is sufficient alone. */
.page-hero__scrim--deep {
  background: linear-gradient(180deg,
    rgba(20, 29, 23, 0.76) 0%,
    rgba(20, 29, 23, 0.64) 60%,
    rgba(20, 29, 23, 0.88) 100%);
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
}
.page-hero__eyebrow {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sand);
}
/* --sand is a mid-tone gold; over sunlit footage it sits too close to the
   backdrop's own luminance to read. The lighter gold already defined for the
   quote section solves the same problem here. */
.page-hero__eyebrow--bright { color: var(--sand-quote); }
.page-hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 20px 0 0;
  max-width: 18ch;
}
.page-hero__lede {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.7;
  font-weight: 300;
  color: rgba(244, 241, 232, 0.8);
  max-width: 52ch;
  margin: 26px 0 0;
}

/* Light spec lists (Stay, Contact) ---------------------------------------- */

.spec-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--sage);
}
.spec-list span {
  border-bottom: 1px solid var(--line-on-light);
  padding-bottom: 11px;
}
.spec-list span:last-child { border-bottom: none; padding-bottom: 0; }
.spec-grid--wide { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.spec-grid__heading--dark { color: var(--forest); }

.feature-list--directions { margin-top: 26px; max-width: 40ch; }

/* Light bordered info cards (Stay, Pricing) -------------------------------- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: clamp(36px, 4vw, 56px);
}
.info-grid--tight { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.info-card {
  border: 1px solid rgba(44, 64, 52, 0.16);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.info-card__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.28rem;
  margin: 0;
}
.info-card__body {
  font-size: 0.9rem;
  line-height: 1.65;
  font-weight: 300;
  color: var(--sage);
  margin: 0;
}
/* The same card on a dark ground. */
.info-card--dark { border-color: var(--line-card); }
.info-card--dark .info-card__title { color: var(--cream); }
.info-card--dark .info-card__body { color: rgba(244, 241, 232, 0.7); }

/* Experience: nearby cards ------------------------------------------------ */

.place--plain { background: none; justify-content: flex-start; }
.place--plain .place__name { font-weight: 400; }
.place--plain .place__blurb { font-size: 0.88rem; line-height: 1.65; color: var(--sage-dim); }
.place__dist--gold {
  margin-top: 6px;
  letter-spacing: 0.2em;
  color: var(--gold);
  border-color: rgba(142, 122, 79, 0.5);
  padding: 6px 11px;
}

/* Stay: accommodation tiles ----------------------------------------------- */

.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(56px, 6vw, 90px);
}
.room__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 22px 0 0;
}
.room__body {
  font-size: 0.95rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--sage);
  margin: 10px 0 18px;
}
/* Cards are columns so the gallery link can sit on the floor of each one,
   aligned across the row however long the copy above it runs. */
.rooms > div { display: flex; flex-direction: column; }
.room__link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* Weddings: packages and weekend timeline --------------------------------- */

.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 28px);
  margin-top: clamp(36px, 4vw, 56px);
}
.package {
  background: var(--cream);
  border: 1px solid rgba(44, 64, 52, 0.16);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.package__scale {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.package__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  margin: 0;
}
.package__blurb {
  font-size: 0.94rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--sage);
  margin: 0;
}
.package__includes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--sage);
  margin-top: 4px;
}
.package__includes span {
  border-bottom: 1px dotted rgba(44, 64, 52, 0.2);
  padding-bottom: 8px;
}
.package__price {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--forest);
  margin-top: 6px;
}
.packages__note {
  font-size: 0.86rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--sage-dim);
  margin: 26px 0 0;
  max-width: 70ch;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(36px, 4vw, 56px);
}
.timeline__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gold);
}
.timeline__body {
  font-size: 0.94rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--sage);
  margin: 16px 0 0;
}

/* Pricing: rate groups ---------------------------------------------------- */

.rate-groups { border-top: 1px solid var(--line-on-light-strong); }
.rate-group {
  padding: 30px 0;
  border-bottom: 1px solid var(--line-on-light);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  align-items: start;
}
.rate-group__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 0;
}
.rate-group__note {
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--sage-dim);
  margin: 8px 0 0;
  max-width: 34ch;
}
.rate-group__rows { display: flex; flex-direction: column; gap: 10px; }
.rate-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  border-bottom: 1px dotted rgba(44, 64, 52, 0.2);
  padding-bottom: 9px;
}
.rate-line__label { font-size: 0.92rem; font-weight: 300; color: var(--sage); }
.rate-line__price {
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--forest);
  white-space: nowrap;
}
.info-card__body a,
.rate-groups__note a,
.policy .prose a {
  color: var(--forest);
  border-bottom: 1px solid var(--line-on-light-strong);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.info-card__body a:hover,
.rate-groups__note a:hover,
.policy .prose a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.rate-groups__note {
  font-size: 0.88rem;
  line-height: 1.7;
  font-weight: 300;
  color: var(--sage-dim);
  margin: 26px 0 0;
  max-width: 70ch;
}

/* Gallery ----------------------------------------------------------------- */

.gallery {
  display: flex;
  flex-direction: column;
  gap: clamp(50px, 6vw, 80px);
}
.gallery__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid var(--line-on-light-strong);
  padding-bottom: 16px;
}
.gallery__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: 0;
}
.gallery__count {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Three across on a desktop rather than five or six. Wider tiles are the
   point: at 210px a landscape photograph is a postage stamp, and the whole
   reason for the page is to look at them. */
.gallery__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

/* Our Story --------------------------------------------------------------- */

.story {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.story--later { margin-top: clamp(40px, 5vw, 64px); }
.story__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  margin: 0;
}
.story__subheading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--forest);
  margin: 22px 0 0;
}
.story__body {
  font-size: 1rem;
  line-height: 1.8;
  font-weight: 300;
  color: var(--forest-text);
  margin: 16px 0 0;
  text-wrap: pretty;
}
/* The owners' vision copy marks its emphasis in bold; Jost is loaded at
   300/400/500, so 500 rather than a synthesised bold. */
.story__body strong { font-weight: 500; color: var(--forest); }
.story__closing {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--forest);
  margin: 28px 0 0;
}
.story__signature {
  display: block;
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.story__photo { margin-top: clamp(40px, 5vw, 64px); }

.film__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 38px;
}
.film__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.12;
  color: var(--cream);
  margin: 16px 0 0;
  max-width: 24ch;
}
.film__note {
  font-size: 0.96rem;
  line-height: 1.7;
  font-weight: 300;
  color: rgba(244, 241, 232, 0.68);
  max-width: 38ch;
  margin: 0;
}
.film__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #101711;
  border: 1px solid var(--line-card-soft);
}
.film__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Contact form ------------------------------------------------------------ */

.form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}
.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
.field {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(44, 64, 52, 0.3);
  padding: 13px 0;
  color: var(--forest);
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  border-radius: 0;
}
.field:focus {
  outline: none;
  border-bottom-color: var(--gold);
}
.field::placeholder { color: var(--sage); opacity: 1; }
textarea.field { resize: vertical; }
.form__submit {
  margin-top: 10px;
  align-self: flex-start;
  font-family: var(--sans);
  border: 0;
  cursor: pointer;
}
.form__status {
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--sage);
  margin: 0;
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
  font-size: 0.96rem;
  font-weight: 300;
  color: var(--forest-text);
}
.contact__details a {
  align-self: flex-start; /* the column stretches children; keep the underline to the text */
  color: var(--forest);
  border-bottom: 1px solid var(--line-on-light-strong);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact__details a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.contact__map { margin-top: 30px; }

/* Sub-page closing CTA sits on forest green ------------------------------- */

.cta--forest { background: var(--forest); }
.cta--forest .cta__title { color: var(--cream); }
.cta--forest .cta__body { color: rgba(244, 241, 232, 0.74); }

/* ...and on the Pricing page it sits on footage of the pond instead. The
   scrim alpha and the body colour below are a measured pair, not a guess:
   against the brightest pixels of this clip, 0.74-opacity body copy would
   need a scrim of 0.74+ to clear AA, which buries the video. Lifting the
   body to 0.90 lets the scrim drop to 0.66-0.74 and still measure 4.8:1
   (body) and 5.5:1 (heading). Lighten one without the other and the body
   copy fails contrast. */
.cta--video {
  position: relative;
  overflow: hidden;
  background: var(--forest);
}
.cta--video .cta__body { color: rgba(244, 241, 232, 0.9); }
.cta__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The band is far wider than it is tall, so a 16:9 clip crops hard
     vertically. Centred, that cuts the lodge roof in half; biasing the
     crop upward keeps the roofline and still leaves the pond dominant. */
  object-position: center 28%;
  filter: var(--photo-filter);
  pointer-events: none;
}
.cta__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 40, 33, 0.66) 0%,
    rgba(28, 40, 33, 0.74) 100%);
}
.cta__inner {
  position: relative;
  z-index: 2;
}

/* Sub-page one-offs ------------------------------------------------------- */

.h2--md {
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: normal;
  margin: 12px 0 0;
}
.prose--md   { margin-top: 16px; }
.prose--lead { margin-top: 20px; }

.split--start { align-items: start; }
.split--form {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 5vw, 72px);
}
.split--stay { gap: clamp(28px, 4vw, 56px); }
.stay__aside { padding-top: 8px; }
/* The lodge photograph and its gallery link, stacked — .room__link supplies
   the flex-start alignment, the gap supplies the breathing room. */
.stay__figure { display: flex; flex-direction: column; gap: 18px; }

.land-card--light { border-color: rgba(44, 64, 52, 0.16); }
.land-card--light .land-card__blurb { color: var(--sage); }

.seasons--wide { margin-top: clamp(40px, 5vw, 64px); }

/* Buttons that sit 32px below their block rather than 30px */
.cta-32 { margin-top: 32px; }

/* Booking & cancellation policy page --------------------------------------
   Thirteen numbered sections of the owners' terms. The numbering is theirs
   and is how the sections are referred to, so it is kept. Refund tiers reuse
   .rate-line so they read like the Pricing page. */

.policy { max-width: 720px; }
.policy__section { margin-top: clamp(36px, 4vw, 52px); }
.policy__section:first-child { margin-top: 0; }
.policy__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.policy__num {
  color: var(--gold);
  margin-right: 12px;
  font-variant-numeric: tabular-nums;
}
.policy .prose { max-width: 64ch; margin-top: 14px; }
.policy .prose + .prose { margin-top: 12px; }
.policy__list {
  margin: 10px 0 0;
  padding-left: 22px;
  max-width: 64ch;
  font-size: 1.02rem;
  line-height: 1.78;
  font-weight: 300;
  color: var(--forest-text);
}
.policy__list li + li { margin-top: 4px; }
.policy__list strong, .policy__lead strong { font-weight: 500; color: var(--forest); }
.policy__lead { font-weight: 400; }
.policy__tiers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 520px;
  margin-top: 18px;
}