/* ==========================================================================
   The Stampede Ranch — Website Re-Design
   Concept 01 · Cinematic Ranch Luxury
   Digital Marketing Collective · 2026
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette — from Figma variable collection "Stampede Ranch Palette" */
  --rust:          #a6522c;
  --rust-deep:     #7a3b1f;
  --rust-text:     #8f4523;   /* accessible rust for small text on cream/cream-deep (AA at 11px) */
  --sage:          #78876e;
  --sage-deep:     #454f3b;
  --forest-deep:   #142600;   /* used only by the pull-quote section background */
  --gold:          #c9a227;
  --gold-light:    #e4c976;
  --charcoal:      #211d18;
  --charcoal-deep: #151210;
  --cream:         #f4efe4;
  --cream-deep:    #e7dfcd;
  --white:         #ffffff;

  /* Semantic */
  --bg:            var(--cream);
  --bg-dark:       var(--charcoal-deep);
  --ink:           var(--charcoal);
  --ink-soft:      #4d453c;
  --ink-invert:    var(--cream);
  --rule:          rgba(33, 29, 24, .14);
  --rule-invert:   rgba(244, 239, 228, .18);

  /* Type */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-eyebrow: .6875rem;   /* 11px */
  --fs-micro:   .75rem;     /* 12px */
  --fs-small:   .875rem;
  --fs-body:    1.0625rem;
  --fs-lead:    1.25rem;
  --fs-h3:      clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
  --fs-h2:      clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --fs-h1:      clamp(2.75rem, 1.2rem + 6.4vw, 7.5rem);

  --tracking-wide: .18em;
  --tracking-xwide: .28em;

  /* Layout */
  --rail:        96px;
  --gutter:      clamp(1.25rem, 4vw, 5rem);
  --maxw:        1280px;
  --section-y:   clamp(4.5rem, 9vw, 9rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--charcoal-deep); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--charcoal-deep);
  padding: .75rem 1.25rem; font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Type helpers
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--rust-text);
  margin: 0 0 1.25rem;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--sage { color: var(--sage-deep); }

.display { font-size: var(--fs-h1); text-transform: uppercase; letter-spacing: -.015em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
}
.lead-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.0625rem, .9rem + .6vw, 1.375rem);
  line-height: 1.5;
}

.measure   { max-width: 62ch; }
.measure-s { max-width: 48ch; }
.center    { text-align: center; margin-inline: auto; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.75rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--gold   { background: var(--gold); color: var(--charcoal-deep); }
.btn--gold:hover { background: var(--gold-light); }

.btn--ghost  { background: transparent; color: var(--cream); border-color: rgba(244,239,228,.5); }
.btn--ghost:hover { background: rgba(244,239,228,.1); border-color: var(--cream); }

.btn--ink    { background: var(--charcoal); color: var(--cream); }
.btn--ink:hover { background: var(--rust-deep); }

.btn--outline-ink { background: transparent; color: var(--charcoal); border-color: rgba(33,29,24,.35); }
.btn--outline-ink:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  text-decoration: none; color: var(--rust-text);
  padding-bottom: .35rem;
  border-bottom: 1px solid currentColor;
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow:hover { gap: .9rem; color: var(--rust-deep); }
.link-arrow--light { color: var(--gold-light); }
.link-arrow--light:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   5. Side navigation rail
   -------------------------------------------------------------------------- */
.rail {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--rail);
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between;
  padding: 1.75rem 0;
  background: var(--charcoal-deep);
  border-right: 1px solid rgba(244,239,228,.08);
}

.rail__mark {
  display: block;
  text-decoration: none;
  line-height: 0;
  transition: opacity .25s var(--ease);
}
.rail__mark:hover { opacity: .75; }
.rail__mark img { width: 60px; height: auto; }

.rail__toggle {
  width: 44px; height: 44px;
  display: grid; place-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.rail__toggle span {
  display: block; width: 20px; height: 2px; background: var(--cream);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.rail__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rail__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rail__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Expanded overlay menu */
.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--charcoal-deep);
  padding: clamp(4rem, 12vh, 8rem) var(--gutter) 3rem calc(var(--rail) + var(--gutter));
  display: grid; align-content: center; gap: 3rem;
  grid-template-columns: 1.2fr .8fr;
  opacity: 0; visibility: hidden;
  /* visibility flips instantly on open (so links are focusable straight away)
     and only after the fade on close */
  transition: opacity .4s var(--ease), visibility 0s linear .4s;
}
.menu[data-open="true"] {
  opacity: 1; visibility: visible;
  transition: opacity .4s var(--ease), visibility 0s linear 0s;
}

.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { overflow: hidden; }
.menu__list a {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.75rem);
  text-transform: uppercase;
  color: var(--cream);
  text-decoration: none;
  padding: .28em 0;
  border-bottom: 1px solid rgba(244,239,228,.1);
  transition: color .3s var(--ease), padding-left .35s var(--ease);
}
.menu__list a:hover { color: var(--gold-light); padding-left: .5rem; }

.menu__aside { color: rgba(244,239,228,.72); font-size: var(--fs-small); align-self: end; }
.menu__aside h3 {
  font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--tracking-xwide); text-transform: uppercase;
  color: var(--gold); margin-bottom: .9rem;
}

/* Mobile top bar */
.topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  align-items: center; justify-content: space-between;
  padding: .85rem 1.15rem;
  background: rgba(21,18,16,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(244,239,228,.1);
}

/* --------------------------------------------------------------------------
   6. Page shell
   -------------------------------------------------------------------------- */
.shell { margin-left: var(--rail); }
.wrap  { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--dark  { background: var(--charcoal-deep); color: var(--cream); }
.section--ink   { background: var(--charcoal); color: var(--cream); }
.section--sage  { background: var(--forest-deep); color: var(--cream); }
.section--cream { background: var(--cream-deep); }
.section--flush { padding-block: 0; }

/* Approved wallpaper treatment (#e7decd base), reused wherever a light
   .section--cream appears on a page that opts in via body.page-wallpaper.
   Not applied globally to .section--cream itself, so pages/sections that
   intentionally keep a plain cream fill (or aren't part of this rollout)
   are unaffected. Solid --cream-deep stays as background-color underneath
   so the fill is correct the instant the tile loads, and is what's used if
   either image fails. Tile size is fixed (not %) so the pattern reads at a
   consistent physical scale regardless of section height. */
body.page-wallpaper .section--cream {
  background-color: var(--cream-deep);
  /* Two background layers: a flat #e7decd wash on top (via linear-gradient,
     since CSS has no plain "solid color image" primitive) at 75% opacity,
     then the damask pattern underneath. Each background-* property below
     lists one value per layer, in the same order as background-image. */
  background-repeat: no-repeat, repeat;
  background-size: cover, 420px 420px;
  background-image:
    linear-gradient(rgba(231, 222, 205, .75), rgba(231, 222, 205, .75)),
    url("../img/pattern-damask-cream.jpg");
  background-image:
    linear-gradient(rgba(231, 222, 205, .75), rgba(231, 222, 205, .75)),
    image-set(
      url("../img/pattern-damask-cream.webp") type("image/webp"),
      url("../img/pattern-damask-cream.jpg") type("image/jpeg")
    );
}

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: var(--fs-h2); }
/* h2 has no bottom margin globally, so a lead directly beneath it was touching */
.section-head > h2 + p { margin-top: 1.15rem; }
.section--dark .eyebrow, .section--ink .eyebrow, .section--sage .eyebrow { color: var(--gold); }
.section--dark .lead, .section--ink .lead, .section--sage .lead { color: rgba(244,239,228,.78); }

/* --------------------------------------------------------------------------
   6b. Stories From the Ranch -- film triptych
   "Stampede Film Frame": a distinct sibling to the Ranch Experience
   photography frame (.card__frame), sharing the same DNA (rust-deep
   linework, delicate weight, cream parchment gap, historic-ranch
   character) but with its own geometry so film content reads as visibly
   its own treatment rather than a reuse:
     - angular bracket corners (#frame-corner-film: straight lines with a
       small stepped tick) instead of the curved scrollwork used on photos
     - a simple line-and-diamond center accent (#rule-ornament, already
       established elsewhere for the history timeline and quote
       attribution) instead of the ornate photo-frame flourish
     - an asymmetric double-line: a slightly heavier outer rule and a
       lighter, lower-opacity inner rule, rather than two matched lines
   -------------------------------------------------------------------------- */
.stories-section { padding-block: clamp(6rem, 10vw, 8.5rem); }
.stories-section .section-head { margin-bottom: clamp(3.5rem, 7vw, 5.5rem); }

.film-triptych {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  width: 86%; margin: 0 auto;
}
.film-plate { margin: 0; }
.film-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  padding: 10px;
  background: var(--cream);
  border: 1.5px solid var(--rust-deep);
  box-sizing: border-box;
}
.film-frame::before {
  content: "";
  position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(122, 59, 31, .45); /* rust-deep at reduced opacity: lighter inner rule */
}
.film-frame video {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
  object-fit: cover; background: var(--charcoal-deep);
}
.film-corner {
  position: absolute; z-index: 2;
  width: 22px; height: 22px;
  color: var(--rust-deep);
  pointer-events: none;
}
.film-corner--tl { top: -1px; left: -1px; }
.film-corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.film-corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.film-corner--br { bottom: -1px; right: -1px; transform: scale(-1, -1); }
.film-accent {
  position: absolute; z-index: 2; left: 50%;
  width: 34px; height: 18px;
  color: var(--rust-deep);
  pointer-events: none;
}
.film-accent--top { top: -1px; transform: translate(-50%, -50%); }
.film-accent--bottom { bottom: -1px; transform: translate(-50%, 50%) scaleY(-1); }
.film-plate__play {
  position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(21,18,16,.45); border: 1px solid rgba(201,162,39,.55);
  color: var(--cream); cursor: pointer;
  backdrop-filter: blur(2px);
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), opacity .3s var(--ease);
}
.film-plate__play svg { width: 13px; height: 13px; margin-left: 2px; }
.film-plate__play:hover { background: rgba(21,18,16,.65); border-color: var(--gold); transform: translate(-50%, -50%) scale(1.08); }
.film-plate__play:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.film-plate__play.is-hidden { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .film-plate__play { transition: none; }
  .film-plate__play:hover { transform: translate(-50%, -50%); }
}

@media (max-width: 860px) {
  /* Mobile: stack vertically rather than a horizontal-scroll carousel, so
     each video reads at a full, legible size instead of a narrow sliver. */
  .film-triptych {
    display: grid; grid-template-columns: 1fr;
    width: 100%; gap: 1.75rem; max-width: 26rem;
  }
}
@media (max-width: 560px) {
  .film-frame { padding: 8px; }
  .film-frame::before { inset: 4px; }
  .film-corner { width: 17px; height: 17px; }
  .film-accent { width: 26px; height: 14px; }
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 0 var(--gutter) clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
  background: var(--charcoal-deep);
}
.hero--short { min-height: 72svh; }

.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Mobile art direction for the new hero tour video only (scoped to this one
   class so index-hero-b.html's separate hero2 video, and every other page's
   hero--short image, are unaffected). At a narrow portrait viewport,
   object-fit:cover on 16:9 footage keeps only the center ~26% of the frame's
   width -- checked against 7 frames spanning the clip (gate, drive/bridge,
   cabin, lodge, wide valley shot): dead-center crops the opening gate frame
   so the "Stampede Ranch" sign is cut down to two letters, while a modest
   left shift keeps that sign fully in frame and still reads well on every
   other sampled frame (the valley shot at ~90s loses the distant windmill/
   bridge at this position but keeps the lit lodge building, still a strong
   frame). Desktop is left at the default center: its wider aspect crops far
   less of the frame regardless of position, so there's nothing to fix there. */
@media (max-width: 860px) {
  .hero__media video.hero__video--tour { object-position: 35% 50%; }
}
/* The scrim earns its keep only where type sits: a pool across the bottom-left
   text block, and as little as possible over the landscape.
   These stops are the result of measuring WCAG contrast for every hero text
   element against the lightest backdrop pixel behind it, sampled across three
   frames of the moving footage at 1440x900 and 390x844. Measured 2026-08-26:
   eyebrow 4.92:1, H1 6.04:1, subhead 11.98:1, opening 9.53:1, scroll 15.12:1,
   reel note 6.03:1 (small text needs 4.5:1; the H1 is large text, needs 3:1).
   The eyebrow is the binding constraint — the .52 stop at 68% exists solely to
   hold it, so re-measure rather than eyeball if you loosen anything here.
   2026-09-18: swapped in a new, much longer (107s) hero video with brighter,
   hazier sky in several stretches. Re-measured contrast programmatically
   across 30 frames spanning the full clip (not just the opening frame, since
   this footage's light/dark balance shifts a lot more over its length than
   the old ~19s loop's did). The eyebrow dipped to 4.41-4.42:1 (just under the
   4.5:1 floor) at two of those sample points, where sky/field now falls right
   in the 60% stop's .40 "window" left open for the old footage. Raised that
   one stop from .40 to .44 -- the minimal bump that clears 4.5:1 at every
   sampled frame (worst case after the fix: 4.63:1) without darkening the rest
   of the gradient. Every other stop is unchanged from the 2026-08-26 tuning. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(21,18,16,.84) 0%, rgba(21,18,16,.58) 38%, rgba(21,18,16,.44) 60%, rgba(21,18,16,.52) 68%, rgba(21,18,16,.10) 78%, rgba(21,18,16,.03) 90%, rgba(21,18,16,.20) 100%),
    linear-gradient(to right, rgba(21,18,16,.52) 0%, rgba(21,18,16,.26) 35%, rgba(21,18,16,.04) 62%, rgba(21,18,16,0) 100%),
    radial-gradient(ellipse 46% 22% at 86% 0%, rgba(21,18,16,.62) 0%, rgba(21,18,16,0) 100%);
}
/* Mobile needs its own, slightly stronger pass: at the 35%-shifted mobile
   focal point (see .hero__video--tour above), the same 24-27s bright-sky
   stretch samples an even lighter pixel than it does at desktop's centered
   position. Scoped to .hero--tour only, so no other page's .hero__scrim is
   touched. Re-measured programmatically the same way: with these two stops
   raised, only that one ~3s window remains under 4.5:1 (worst case ~3.4:1,
   up from 3.01:1 unfixed). Getting that specific window the rest of the way
   to 4.5:1 would need pushing these stops hard enough to read as heavily
   darkening the footage there, which the brief for this video explicitly
   rules out -- so this is the deliberate stopping point, not an oversight.
   If that residual dip matters in practice, the real fix is upstream: trim
   or re-grade that few seconds of source footage, not more scrim. */
@media (max-width: 860px) {
  .hero--tour .hero__scrim {
    background:
      linear-gradient(to top, rgba(21,18,16,.84) 0%, rgba(21,18,16,.58) 38%, rgba(21,18,16,.48) 60%, rgba(21,18,16,.58) 68%, rgba(21,18,16,.10) 78%, rgba(21,18,16,.03) 90%, rgba(21,18,16,.20) 100%),
      linear-gradient(to right, rgba(21,18,16,.52) 0%, rgba(21,18,16,.26) 35%, rgba(21,18,16,.04) 62%, rgba(21,18,16,0) 100%),
      radial-gradient(ellipse 46% 22% at 86% 0%, rgba(21,18,16,.62) 0%, rgba(21,18,16,0) 100%);
  }
}

.hero__inner { position: relative; z-index: 2; width: 100%; max-width: 62rem; }
/* gold-light, not gold: 11px type over moving footage needs the extra luminance */
.hero__inner .eyebrow { color: var(--gold-light); }
.hero h1 { color: var(--white); margin-bottom: .5rem; }
.hero__sub { color: rgba(255,255,255,.9); margin: 1.25rem 0 2rem; max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero__note {
  position: absolute; top: 1.25rem; right: var(--gutter); z-index: 2;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55); text-align: right; max-width: 22rem;
}

.hero__scroll {
  position: absolute; left: var(--gutter); bottom: 1.25rem; z-index: 2;
  display: flex; align-items: center; gap: .6rem;
  font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.hero__scroll i {
  display: block; width: 42px; height: 1px; background: rgba(255,255,255,.4);
  position: relative; overflow: hidden;
}
.hero__scroll i::after {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  animation: sweep 2.6s var(--ease) infinite;
}
@keyframes sweep { 0% { transform: translateX(-100%); } 60%,100% { transform: translateX(100%); } }

.video-toggle {
  position: absolute; right: var(--gutter); bottom: 1.25rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(21,18,16,.5); border: 1px solid rgba(244,239,228,.35);
  color: var(--cream); padding: .5rem .85rem; cursor: pointer;
  font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.video-toggle:hover { background: rgba(21,18,16,.75); }

/* --------------------------------------------------------------------------
   8. Story teaser
   -------------------------------------------------------------------------- */
.story { text-align: center; }
.story h2 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }
.story p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   9. Card grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--charcoal);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease), filter .8s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }
.card__tag {
  position: absolute; left: 0; bottom: 0;
  background: var(--charcoal-deep); color: var(--gold);
  font-size: 10px; font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: .45rem .8rem;
}
.card__body { padding-top: 1.35rem; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { font-size: var(--fs-h3); margin-bottom: .55rem; }
.card__body p { font-size: var(--fs-small); color: var(--ink-soft); }
.section--dark .card__body p, .section--ink .card__body p { color: rgba(244,239,228,.7); }
.card__more {
  margin-top: 1rem; font-size: 10px; font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--rust-text);
}
.section--dark .card__more, .section--ink .card__more { color: var(--gold); }

/* Decorative Western frame — homepage only (Ranch Experience cards, plus the
   Event Venue / Lodge / Mercantile feature photos). Was originally scoped
   under .grid--framed; generalized to plain .card__frame so the identical
   component can wrap any qualifying image without duplicating these rules.
   Every declaration below is byte-for-byte the same as the original —
   only the selector prefix changed, so the Ranch Experience cards render
   identically to before. Still page-scoped: this class doesn't exist
   anywhere in venues/weddings/history/contact, so they're untouched.
   .card__frame wraps the media (picture/img) directly; the frame itself has
   no overflow:hidden so the corner scrolls and cap flourishes can sit
   slightly outside its border without being clipped. */
.card__frame {
  position: relative;
  padding: 14px;
  background: var(--cream);
  border: 1px solid var(--rust-deep);
  box-sizing: border-box;
}
.card__frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--rust-deep);
  pointer-events: none;
}
.frame-corner {
  position: absolute;
  width: 30px; height: 30px;
  color: var(--rust-deep);
  pointer-events: none;
}
.frame-corner--tl { top: -1px; left: -1px; }
.frame-corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.frame-corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.frame-corner--br { bottom: -1px; right: -1px; transform: scale(-1, -1); }
.frame-flourish {
  position: absolute;
  left: 50%;
  width: 68px; height: 22px;
  color: var(--rust-deep);
  pointer-events: none;
}
.frame-flourish--top { top: 0; transform: translate(-50%, -50%); }
.frame-flourish--bottom { bottom: 0; transform: translate(-50%, 50%) scaleY(-1); }

/* Feature-photo variant: same ornament, used on standalone split-section
   images (not inside a card grid). Wraps the picture directly inside the
   existing .split__media, so .split__media img's own sizing/aspect-ratio
   rules still apply unchanged — the frame only adds the padded mat + border
   around it, it doesn't resize or crop the photo. */
.split__media .card__frame { display: block; }

/* --------------------------------------------------------------------------
   10. Timeline
   -------------------------------------------------------------------------- */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.timeline__item { padding-right: 2rem; }
.timeline__rule { display: flex; align-items: center; margin-bottom: 1.5rem; }
.timeline__rule b { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); flex: none; }
.timeline__rule i { flex: 1; height: 1px; background: rgba(244,239,228,.25); }
.timeline__year {
  font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: var(--tracking-wide); color: var(--gold); margin-bottom: .8rem;
}
.timeline__item h3 { font-size: 1.375rem; margin-bottom: .7rem; }
.timeline__item p { font-size: var(--fs-small); color: rgba(244,239,228,.7); }

/* Homepage "135+ Years in the Alberta Foothills" heritage treatment.
   Everything in this block is scoped to .heritage-timeline specifically
   (added only to that one <section>) so the plain .timeline/.timeline__item/
   .section--dark/.btn--gold rules above stay exactly as they were for every
   other page and section that reuses those same base classes. */

/* Extremely subtle aged-paper/leather mottle. Procedurally generated (not a
   photo), mean-centered on --charcoal-deep so it reads as "the same dark
   color with a little more character" rather than a visible pattern. Large,
   non-tiling-obvious tile size and organic (non-repeating-looking) noise, so
   it doesn't register as a "motif". */
.heritage-timeline {
  background-color: var(--charcoal-deep);
  /* Repeating leather-texture tile (NOT cover/stretch) so the grain reads
     at the same physical scale regardless of section height -- a tall
     section just repeats more copies of the same tile, it never enlarges
     one copy to fill the box. background-size uses a fixed width with
     auto height so the tile's own aspect ratio is preserved exactly (no
     distortion). Asset was prepared as a seamless tile (offset + feathered
     seam blend) so the repeat has no visible hard edge.
     Texture asset was desaturated and tinted toward --charcoal-deep so its
     grain reads as muted/neutral rather than warm rust, matching the
     rail's near-black tone. A flat #151210 wash (same value as
     --charcoal-deep) sits on top at 50%, tying the two even closer.
     Scoped to .heritage-timeline, so this doesn't touch the wallpaper or
     forest-green backgrounds. */
  background-repeat: no-repeat, repeat;
  background-size: cover, 640px auto;
  background-position: center top, top left;
  background-image:
    linear-gradient(rgba(21, 18, 16, .5), rgba(21, 18, 16, .5)),
    url("../img/texture-heritage-dark-tile.jpg");
  background-image:
    linear-gradient(rgba(21, 18, 16, .5), rgba(21, 18, 16, .5)),
    image-set(
      url("../img/texture-heritage-dark-tile.webp") type("image/webp"),
      url("../img/texture-heritage-dark-tile.jpg") type("image/jpeg")
    );
}

/* Headline ornament: reuses the exact same #frame-flourish artwork as the
   photo frames, just recolored to antique gold (photo frames use rust-deep,
   which reads correctly on cream but not on this dark background) and sized
   down slightly. */
.heritage-divider {
  display: block;
  width: 52px; height: 17px;
  margin: 1.1rem auto 0;
  color: var(--gold);
  opacity: .85;
}

/* Per-era rule: small tick-lozenge ornament ahead of the existing gold dot
   + line. The dot gets a thin antique-gold ring (a quiet "engraved medallion"
   read) instead of a plain filled circle. */
.heritage-timeline .timeline__rule { gap: .55rem; }
.heritage-timeline .rule-ornament {
  width: 20px; height: 11px;
  color: rgba(201, 162, 39, .55);
  flex: none;
}
.heritage-timeline .timeline__rule b {
  position: relative;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .22);
}
.heritage-timeline .timeline__rule i { background: rgba(201, 162, 39, .2); }

/* Very quiet era separators: a hairline between columns on desktop/tablet.
   Swaps to a top hairline once the grid stacks to one column on mobile,
   rather than forcing a vertical rule that would make no sense stacked. */
.heritage-timeline .timeline__item:not(:last-child) {
  border-right: 1px solid rgba(201, 162, 39, .14);
}

/* Heritage CTA: thin antique-gold outline instead of a solid gold fill, with
   a small ornament tick on each side of the label. Same .btn base (sizing,
   uppercase, letter-spacing, hover-lift, focus ring) as every other button
   on the site -- only the fill/border/color are new, and only for this one
   button; .btn--gold elsewhere is untouched. */
.btn--heritage {
  background: transparent;
  color: var(--gold);
  border-color: rgba(201, 162, 39, .6);
}
.btn--heritage:hover {
  background: rgba(201, 162, 39, .1);
  border-color: var(--gold);
}
.btn--heritage .rule-ornament { width: 18px; height: 10px; color: currentColor; opacity: .8; }

/* --------------------------------------------------------------------------
   11. Aerial strip / galleries
   -------------------------------------------------------------------------- */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); }
.strip figure { position: relative; margin: 0; aspect-ratio: 8 / 7; overflow: hidden; }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.strip figure:hover img { transform: scale(1.06); }
.strip figcaption {
  position: absolute; left: 1.25rem; bottom: 1.25rem;
  color: var(--cream); font-size: 10px; font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,.75);
}

/* Asymmetric ranch-life spread: one dominant photo + two smaller stacked
   supporting photos. Full-bleed (used inside .section--flush), distinct
   from the existing 3-image .strip. */
.photo-spread--asym {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  height: clamp(380px, 42vw, 620px);
}
.photo-spread--asym .photo-spread__main { grid-column: 1; grid-row: 1 / 3; }
.photo-spread--asym .photo-spread__sub-a { grid-column: 2; grid-row: 1; }
.photo-spread--asym .photo-spread__sub-b { grid-column: 2; grid-row: 2; }
.photo-spread--asym img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Two-image cinematic spread: unequal 55/45 pairing. Full-bleed. */
.photo-spread--duo {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 6px;
  height: clamp(340px, 36vw, 520px);
}
.photo-spread--duo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 860px) {
  .photo-spread--asym {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    height: auto;
    gap: 4px;
  }
  .photo-spread--asym .photo-spread__main { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 3 / 2; }
  .photo-spread--asym .photo-spread__sub-a { grid-column: 1; grid-row: 2; aspect-ratio: 1 / 1; }
  .photo-spread--asym .photo-spread__sub-b { grid-column: 2; grid-row: 2; aspect-ratio: 1 / 1; }

  .photo-spread--duo {
    grid-template-columns: 1fr;
    height: auto;
    gap: 4px;
  }
  .photo-spread--duo img { aspect-ratio: 3 / 2; }
}

/* Single cinematic property photograph: one exceptional photo given
   substantial horizontal scale, used as a quiet visual pause between
   sections. Full-bleed (used inside .section--flush). */
.photo-cinematic { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; }
.photo-cinematic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Optional overlay caption for a photo-cinematic section: a single line of
   display type set into a naturally dark region of the photograph itself,
   right-aligned, with a heavy text-shadow standing in for a scrim so no
   veil is needed over the rest of the image. */
.photo-cinematic__caption {
  position: absolute; z-index: 2;
  top: 50%; right: clamp(1.5rem, 6vw, 5rem);
  transform: translateY(-50%);
  max-width: 26rem; text-align: right;
}
.photo-cinematic__caption h2 {
  margin: 0; color: var(--cream);
  font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.18;
  text-shadow: 0 2px 24px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.7);
}
@media (max-width: 860px) {
  .photo-cinematic__caption { top: auto; bottom: 1.5rem; right: 1.25rem; transform: none; max-width: 78%; }
  .photo-cinematic__caption h2 { font-size: clamp(1.15rem, 5vw, 1.5rem); }
}
/* For portrait-sourced photography (e.g. an interior shot taller than it is
   wide): 21/9 would crop away most of the frame's vertical content. 16/9
   keeps roughly the same proportion of the source visible as the old
   .photo-spread--asym main slot did, so a portrait photo used here still
   reads as a complete, generous single image rather than a narrow sliver. */
.photo-cinematic--tall { aspect-ratio: 16 / 9; }
@media (max-width: 860px) {
  .photo-cinematic { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------------------------
   12. Pull quote
   -------------------------------------------------------------------------- */
.quote { text-align: center; }
.quote blockquote {
  margin: 0 auto; max-width: 24ch;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  line-height: 1.22; color: var(--cream);
}
.quote cite {
  display: block; margin-top: 1.75rem; font-style: normal;
  font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-xwide);
  text-transform: uppercase; color: var(--gold);
}

/* Homepage Guy Weadick quote -- Western heritage treatment. A dedicated
   class (not a reuse of .section--sage), so history.html's plain version of
   this same quote is completely unaffected. Every ornament reuses the
   existing #frame-corner / #frame-flourish / #rule-ornament symbols already
   defined in the shared sprite -- no new artwork anywhere in this block. */
/* Narrow transition band between a photo strip and the dark Full Ranch
   Rental section that follows it -- same charcoal tone as that section
   (.section--ink), so the two read as one continuous dark passage rather
   than two different darks bumping into each other. A pair of hairline
   rust rules with a small diamond "brand iron" mark at dead center:
   understated engraving, not an icon or a rule-library component. */
.ranch-divider {
  height: 50px;
  display: flex; align-items: center; justify-content: center;
  background: var(--charcoal);
}
.ranch-divider__mark { width: min(78%, 60rem); height: 20px; overflow: visible; }
.ranch-divider__mark line { stroke: var(--rust); stroke-width: 1; opacity: .75; }
.ranch-divider__ornament rect { fill: none; stroke: var(--rust); stroke-width: 1; opacity: .9; }

.heritage-quote {
  position: relative;
  /* Client-supplied dark forest-green texture, used directly as the
     background. Cover + no-repeat + center avoids any stretch/seam at any
     viewport size; background-color is a same-tone fallback only (shows
     briefly before the image loads, or if it ever fails to load).
     A flat #050D00 wash sits on top at 50% -- darkens/deepens the texture
     toward near-black-green without hiding it. */
  background-color: #0d1904;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  background-image:
    linear-gradient(rgba(5, 13, 0, .5), rgba(5, 13, 0, .5)),
    url("../img/texture-heritage-quote.jpg");
  background-image:
    linear-gradient(rgba(5, 13, 0, .5), rgba(5, 13, 0, .5)),
    image-set(
      url("../img/texture-heritage-quote.webp") type("image/webp"),
      url("../img/texture-heritage-quote.jpg") type("image/jpeg")
    );
}

/* Ornamental inset frame: sits with generous breathing room inside the
   section (padding, not a tight box around the quote) -- a thin gold rule
   plus a fainter inset second line, echoing the same double-line idea as
   the photo-frame ::before treatment used elsewhere on the site. */
.heritage-quote__frame {
  position: relative;
  padding: clamp(3rem, 3rem + 4vw, 5.5rem) clamp(1.75rem, 2rem + 3vw, 4.5rem);
  border: 1px solid rgba(201, 162, 39, .55);
}
.heritage-quote__frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(201, 162, 39, .18);
  pointer-events: none;
}
.hq-corner {
  position: absolute;
  width: 42px; height: 42px;
  color: var(--gold);
  opacity: .9;
  pointer-events: none;
}
.hq-corner--tl { top: -1px; left: -1px; }
.hq-corner--tr { top: -1px; right: -1px; transform: scaleX(-1); }
.hq-corner--bl { bottom: -1px; left: -1px; transform: scaleY(-1); }
.hq-corner--br { bottom: -1px; right: -1px; transform: scale(-1, -1); }
.hq-cap {
  position: absolute;
  left: 50%;
  width: 84px; height: 27px;
  color: var(--gold);
  pointer-events: none;
}
.hq-cap--top { top: -1px; transform: translate(-50%, -50%); }
.hq-cap--bottom { bottom: -1px; transform: translate(-50%, 50%) scaleY(-1); }

/* The two interior ornaments (above the quote / below the attribution)
   were removed per request -- corners, top/bottom border caps, and the
   attribution's flanking ticks all stay. Spacing that the removed
   ornaments used to occupy is preserved here directly on the blockquote/
   cite, so the vertical composition inside the frame is unchanged. */
.heritage-quote blockquote { margin-top: 3.5rem; }
.heritage-quote .heritage-quote__cite { margin-bottom: 3.75rem; }

/* Attribution gets a small flanking tick either side, replacing the plain
   centered line -- still the same font-size/letter-spacing/color as
   .quote cite (inherited), just laid out as icon / text / icon. */
.heritage-quote .heritage-quote__cite {
  display: flex; align-items: center; justify-content: center;
  gap: .85rem;
}
.heritage-quote .heritage-quote__cite span { min-width: 0; }
.hq-tick { width: 22px; height: 12px; color: currentColor; opacity: .8; flex: none; }

/* Forces a line break only on wider viewports (used for two Weddings page
   headlines); on narrower screens the <br> is hidden so the heading just
   wraps naturally based on available width instead of forcing the same
   break point on a much narrower column. */
@media (max-width: 860px) {
  .br-desktop { display: none; }
}

@media (max-width: 860px) {
  .heritage-quote__frame { padding: 3rem 1.75rem; }
  .hq-corner { width: 32px; height: 32px; }
  .hq-cap { width: 64px; height: 21px; }
  .heritage-quote blockquote { margin-top: 2.75rem; }
  .heritage-quote .heritage-quote__cite { margin-bottom: 3rem; }
}

@media (max-width: 560px) {
  .heritage-quote__frame { padding: 2.5rem 1.25rem; }
  .heritage-quote__frame::before { inset: 7px; }
  .hq-corner { width: 24px; height: 24px; }
  .hq-cap { width: 48px; height: 16px; }
  .heritage-quote blockquote { margin-top: 2.25rem; }
  .heritage-quote .heritage-quote__cite { margin-bottom: 2.5rem; gap: .5rem; }
  .hq-tick { width: 16px; height: 9px; }
}

/* --------------------------------------------------------------------------
   13. Split / feature rows
   -------------------------------------------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
}
.split__media img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.split--flip .split__media { order: 2; }
.split h2 { font-size: var(--fs-h2); margin-bottom: 1.25rem; }

.facts { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .85rem; }
/* Inside a card, push the facts block to a consistent bottom position across
   cards in the same row (card__body is a flex column filling the height the
   CSS grid already stretches .card to). On mobile the grid collapses to a
   single column, so there's no cross-card stretch to release from -- each
   stacked card just sizes to its own content, as intended. */
.card__body .facts { margin-top: auto; }
.card__body .card__more { margin-top: auto; padding-top: 1rem; }
.facts li {
  display: grid; grid-template-columns: 8rem 1fr; gap: 1rem;
  padding-bottom: .85rem; border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.section--dark .facts li, .section--ink .facts li { border-color: var(--rule-invert); }
.facts b {
  font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--rust-text); padding-top: .28em;
}
.section--dark .facts b, .section--ink .facts b { color: var(--gold); }

/* --------------------------------------------------------------------------
   14. Stats band
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; text-align: center; }
.stats div span {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); line-height: 1; color: var(--gold);
}
.stats div small {
  display: block; margin-top: .75rem; font-size: 10px; font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: rgba(244,239,228,.72);
}

/* Heritage treatment for the stats strip: a tiny ornament (reusing the
   same #rule-ornament symbol as the history timeline and the Guy Weadick
   attribution) between each number and its label, plus a restrained
   vertical separator -- short rule + tiny flourish + short rule -- between
   columns. Kept deliberately smaller/quieter than the history/quote
   treatments per instruction. Desktop only: at the 860px breakpoint the
   grid reflows to 2 columns and the vertical separators are hidden (a
   horizontal top-rule takes over for row separation instead). */
.stats--heritage { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; }
.stats__ornament {
  display: block; margin: .6rem auto 0;
  width: 20px; height: 11px;
  color: rgba(201, 162, 39, .6);
}
.stats__sep { display: flex; flex-direction: column; align-items: center; gap: .4rem; height: 2.5rem; }
.stats__sep::before, .stats__sep::after {
  content: ""; width: 1px; flex: 1; background: rgba(201, 162, 39, .22);
}
.stats__sep-ornament { width: 11px; height: 20px; color: rgba(201, 162, 39, .5); flex: none; }

@media (max-width: 860px) {
  .stats--heritage { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
  .stats__sep { display: none; }
  /* Horizontal rule above the second row stands in for the hidden vertical
     separators, so the two rows still read as connected rather than as
     four disconnected boxes. */
  .stats--heritage > div:nth-child(5), .stats--heritage > div:nth-child(7) {
    padding-top: 1.75rem;
    border-top: 1px solid rgba(201, 162, 39, .18);
  }
}

/* --------------------------------------------------------------------------
   15. Booking CTA band
   -------------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--charcoal-deep); }
.cta-band__bg { position: absolute; inset: 0; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.cta-band .wrap { position: relative; z-index: 2; text-align: center; }
.cta-band h2 { font-size: var(--fs-h2); color: var(--cream); margin-bottom: 1.25rem; }
.cta-band p { color: rgba(244,239,228,.8); margin-inline: auto; }
.cta-band .hero__actions { justify-content: center; margin-top: 2.25rem; }

/* --------------------------------------------------------------------------
   16. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: grid; gap: .5rem; min-width: 0; }
.field label {
  font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--ink-soft);
}
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--fs-small);
  padding: .9rem 1rem;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink);
  border-radius: 0;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--rust); box-shadow: 0 0 0 3px rgba(166,82,44,.14);
}
.field textarea { min-height: 9rem; resize: vertical; }
.form__note { font-size: var(--fs-micro); color: var(--ink-soft); }
.form-status {
  padding: 1rem 1.25rem; background: var(--sage-deep); color: var(--cream);
  font-size: var(--fs-small);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--charcoal-deep); color: rgba(244,239,228,.72); }
.footer__grid {
  display: grid; grid-template-columns: 1.3fr .9fr .9fr 1.1fr;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem;
}
.footer h2 {
  font-size: 1.5rem; text-transform: uppercase; color: var(--cream);
  margin-bottom: 1rem; letter-spacing: .02em;
}
.footer h3 {
  font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--tracking-xwide); text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.25rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.footer a { color: rgba(244,239,228,.78); text-decoration: none; font-size: var(--fs-small); }
.footer a:hover { color: var(--gold-light); }
.footer__social { display: flex; gap: 1.5rem; margin-top: 1.5rem; }
.footer__social a {
  font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.footer__signup { display: flex; border: 1px solid rgba(244,239,228,.25); }
.footer__signup input {
  flex: 1; min-width: 0; background: none; border: 0; color: var(--cream);
  padding: .85rem 1rem; font: inherit; font-size: var(--fs-small);
}
.footer__signup input::placeholder { color: rgba(244,239,228,.45); }
.footer__signup input:focus { outline: none; }
.footer__signup button {
  background: var(--gold); border: 0; color: var(--charcoal-deep);
  padding: 0 1.35rem; cursor: pointer;
  font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.footer__signup button:hover { background: var(--gold-light); }
.footer__base {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid rgba(244,239,228,.14);
  padding-block: 1.75rem 2.25rem;
  font-size: var(--fs-micro); color: rgba(244,239,228,.55);
}

/* --------------------------------------------------------------------------
   18. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__scroll i::after { animation: none; }
}

/* --------------------------------------------------------------------------
   19. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 2.75rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --rail: 0px; }
  .rail { display: none; }
  .topbar { display: flex; }
  .shell { margin-left: 0; padding-top: 60px; }
  .menu { padding-left: var(--gutter); grid-template-columns: 1fr; align-content: start;
          padding-top: 6rem; gap: 2rem; overflow-y: auto; }
  .hero { min-height: 88svh; padding-bottom: 3rem; }
  /* On narrow screens the text block starts higher in the frame, so the pool has
     to reach further up. Measured at 390x844. */
  .hero__scrim {
    background:
      linear-gradient(to top,
        rgba(21,18,16,.92) 0%, rgba(21,18,16,.86) 52%, rgba(21,18,16,.70) 74%,
        rgba(21,18,16,.20) 86%, rgba(21,18,16,.10) 100%),
      linear-gradient(to right, rgba(21,18,16,.40) 0%, rgba(21,18,16,.20) 60%, rgba(21,18,16,.08) 100%);
  }
  .hero__note { display: none; }
  .split, .split--flip .split__media { grid-template-columns: 1fr; order: 0; }
  .strip { grid-template-columns: 1fr; }
  .strip figure { aspect-ratio: 16 / 10; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
  .form__row { grid-template-columns: 1fr; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid--4 { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .timeline__item { padding-right: 0; }
  .heritage-timeline .timeline__item:not(:last-child) { border-right: none; }
  .heritage-timeline .timeline__item:not(:first-child) {
    border-top: 1px solid rgba(201, 162, 39, .14);
    padding-top: 1.75rem;
    margin-top: .25rem;
  }
  .footer__grid { grid-template-columns: 1fr; }
  .facts li { grid-template-columns: 1fr; gap: .25rem; }
  .hero__actions .btn { width: 100%; }
}

/* Topbar brand lockup */
.topbar__mark {
  display: flex; align-items: center; gap: .55rem;
  text-decoration: none; line-height: 0;
}
.topbar__mark .brand-mark { height: 32px; width: auto; }
.topbar__mark .brand-word { height: 26px; width: auto; }
.topbar .rail__toggle span { background: var(--cream); }

/* ------------------------------------------------------------------
   21. Brand logo placements
   ------------------------------------------------------------------ */
.menu__logo { display: block; width: clamp(120px, 14vw, 168px); height: auto; margin-bottom: 1.75rem; }

.footer__logo { display: block; width: 172px; height: auto; margin-bottom: 1.35rem; }

/* Rust bronc mark used as a section-opening brand device on light backgrounds */
.brand-device {
  display: block; margin: 0 auto 1.75rem;
  width: auto; height: 120px;
}
@media (max-width: 560px) {
  .brand-device { height: 88px; }
  .topbar__mark .brand-mark { height: 28px; }
  .topbar__mark .brand-word { height: 22px; }
}

/* Print */
@media print {
  .rail, .topbar, .menu, .sheet, .hero__media, .video-toggle { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   Upcoming Events: homepage feature + dedicated events page
   -------------------------------------------------------------------------- */
/* Homepage feature: a compact editorial announcement directly below the
   hero, reusing the existing .split / .split__media / .card__frame system
   for layout and framing. A thin rust hairline top and bottom reads as an
   announcement band, distinct from the regular content sections, without
   introducing a new full chapter that competes with the hero. */
.event-feature {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid rgba(166,82,44,.25);
  border-bottom: 1px solid rgba(166,82,44,.25);
}
.event-feature__meta {
  font-family: var(--font-body); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  font-size: .8125rem; color: var(--rust-text);
  margin-top: .5rem; margin-bottom: 1.5rem; line-height: 1.7;
}
.section--ink .event-feature__meta,
.section--dark .event-feature__meta { color: rgba(244,239,228,.65); }

/* Events page: hero uses the standard .hero--short pattern already in use
   on venues/weddings/history/contact, no new hero CSS needed. The
   featured-event presentation below reuses .section--ink for the dark
   ranch-forest/chocolate tone plus .split for the two-column layout, and
   adds only what's specific to an event: the date/location meta line
   above and a simple reusable card below for when a second event is
   eventually added. */
.event-card {
  display: grid; gap: .35rem;
  padding: 1.75rem 2rem; border: 1px solid rgba(166,82,44,.3);
  background: rgba(244,239,228,.03);
}
.event-card__eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: .75rem;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--gold);
}
.event-card h3 { font-size: var(--fs-h3, 1.5rem); margin: 0; }
.event-card__meta { color: rgba(244,239,228,.65); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   20. History — scroll-driven era chapters
   -------------------------------------------------------------------------- */
/* era-list: hosts the single continuous center line behind all four eras.
   Purely a visual spine -- height comes from normal document flow (the era
   articles stacked inside it), so it needs no JS and no fixed height. */
.era-list { position: relative; }
.era-list::before {
  content: ''; position: absolute; z-index: 0;
  top: 0; bottom: 0; left: 50%; width: 1px;
  transform: translateX(-.5px);
  background: linear-gradient(
    to bottom,
    rgba(166,82,44,0) 0%,
    rgba(166,82,44,.4) 6%,
    rgba(166,82,44,.4) 94%,
    rgba(166,82,44,0) 100%
  );
}

.era { position: relative; }

/* Small engraved-medallion marker where each year meets the spine -- same
   "thin ring around a dot" language as the homepage heritage-timeline's
   gold ornament, in rust/copper instead of gold so it reads as this page's
   own mark rather than a duplicate. Static per era (not scroll-linked): it
   marks the era's place on the spine, while era__year keeps doing its own
   sticky thing independently, exactly as before. */
.era__marker {
  position: absolute; z-index: 2;
  left: 50%; top: clamp(2.5rem, 12vh, 7.5rem);
  width: 9px; height: 9px; margin-top: -4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 4px rgba(166,82,44,.2), 0 0 0 5px rgba(21,18,16,.8);
}

.era__inner {
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(6rem,13vw,9rem) clamp(6rem,13vw,9rem) minmax(0,1fr);
  column-gap: clamp(1.25rem, 3vw, 3rem);
  padding-block: clamp(4rem, 9vw, 8rem);
}
/* Alternating sides -- left/right assignment is CSS-only (grid-column),
   so DOM order (and so reading order / a11y / the existing data-reveal
   fade timing per .era) is completely untouched.
   grid-row:1 on all three items is required, not decorative: without it,
   auto-placement's sparse-packing cursor advances past row 1 once year+
   body are placed (since they're earlier in DOM order and use columns
   the image doesn't), so era__media would land in an auto-generated
   row 2 below the text instead of sharing the text's own row -- which is
   exactly what caused the image to drift toward the bottom of the section
   instead of sitting level with its story. */
.era__year, .era__body, .era__media { grid-row: 1; }
.era:nth-child(odd)  .era__year { grid-column: 2; text-align: right; }
.era:nth-child(odd)  .era__body { grid-column: 1; }
.era:nth-child(even) .era__year { grid-column: 3; }
.era:nth-child(even) .era__body { grid-column: 4; }
/* The historical photo for each era sits on the OPPOSITE side of the
   spine from that era's year + written content, spanning the two grid
   columns of its half (so it reads as a substantial photograph, not a
   thumbnail, filling essentially the same width as the text column
   across the line). era__media is a direct grid child of era__inner now
   (a sibling of era__body, not nested inside it) purely so it can be
   placed independently -- the image, its alt text, and its decorative
   frame are all unchanged. align-self:center vertically centers it
   against the era's own row height (year + heading + body copy
   together), so image and story move as one paired unit -- never
   drifting into the row above or below. */
.era:nth-child(odd)  .era__media { grid-column: 3 / 5; justify-self: start; }
.era:nth-child(even) .era__media { grid-column: 1 / 3; justify-self: end; }
.era__media {
  align-self: center;
  width: 100%;
  margin: 0;
}
/* Unrelated to image alignment -- kept from the original timeline design:
   a touch of per-era spacing variance so the four rows don't read as
   identical repeating components. */
.era:nth-child(2) .era__inner { padding-block: clamp(4.5rem, 10vw, 8.75rem); }
.era:nth-child(3) .era__marker { top: clamp(2.75rem, 13vh, 8rem); }
.era:nth-child(4) .era__inner { padding-block: clamp(3.5rem, 8vw, 7.25rem); }

.era__year {
  position: sticky; top: clamp(2rem, 12vh, 7rem); align-self: start;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  line-height: 1; color: var(--gold);
}
.era__year small {
  display: block; margin-top: .85rem;
  font-family: var(--font-body); font-size: 10px; font-weight: 600;
  letter-spacing: var(--tracking-xwide); text-transform: uppercase;
  color: rgba(244,239,228,.55);
}
.era__body h3 { font-size: var(--fs-h2); margin-bottom: 1.5rem; }
.era__body p { color: rgba(244,239,228,.82); max-width: 62ch; }
.era__media img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
/* Guy Weadick era photo is an archival portrait, not a landscape shot --
   overriding just this one image's aspect ratio rather than cropping it
   into the standard 16:9 and losing the hat or boots. */
.era__media--portrait img { aspect-ratio: 8/13; }
.era__media figcaption {
  margin-top: .85rem; font-size: var(--fs-micro);
  color: rgba(244,239,228,.5); letter-spacing: .04em;
}
.era__placeholder {
  display: grid; place-content: center; text-align: center;
  aspect-ratio: 16/9; border: 1px dashed rgba(244,239,228,.28);
  color: rgba(244,239,228,.5); padding: 2rem;
  font-size: var(--fs-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase;
}

@media (max-width: 860px) {
  /* Single column, spine moved to the left edge, everything reads to its
     right -- not a squeezed version of the desktop alternating layout. */
  .era-list::before { left: 1.35rem; }
  .era__marker { left: 1.35rem; top: clamp(1.75rem, 9vw, 2.75rem); }
  .era__inner {
    grid-template-columns: 1fr;
    padding-inline-start: clamp(2.5rem, 9vw, 3.25rem);
  }
  /* The desktop fix above forces era__year/era__body/era__media onto the
     same grid-row (row 1) so the image can sit level with the text across
     the spine. At this single-column mobile layout that's exactly wrong:
     it stacked year, title and image directly on top of each other
     (year showing through the title). era__body becomes display:contents
     so its own children (h3, p) become direct grid items we can place
     individually; giving every piece its own `order` (rather than an
     explicit grid-row number) lets normal auto-placement stack them one
     per row in the sequence the design calls for -- year, title, image,
     body copy -- regardless of DOM order or how many paragraphs an era
     has, with no risk of two items landing in the same cell again. */
  .era:nth-child(odd)  .era__year,
  .era:nth-child(even) .era__year {
    grid-column: 1; grid-row: auto; order: 1;
    text-align: left; position: static;
  }
  .era__body { display: contents; }
  .era__body h3 { grid-column: 1; grid-row: auto; order: 2; margin-top: 1.5rem; }
  .era:nth-child(odd)  .era__media,
  .era:nth-child(even) .era__media {
    grid-column: 1; grid-row: auto; order: 3;
    justify-self: stretch; align-self: auto;
    width: 100%; margin-top: 1.75rem; margin-bottom: 0;
  }
  .era__body p { grid-column: 1; grid-row: auto; order: 4; margin-top: 1.5rem; }
  .era:nth-child(2) .era__inner,
  .era:nth-child(4) .era__inner { padding-block: clamp(4rem, 9vw, 8rem); }
}


/* Contact page bits */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,3vw,2.5rem); }
.info-grid h3 {
  font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--tracking-xwide); text-transform: uppercase;
  color: var(--rust-text); margin-bottom: .9rem;
}
.info-grid p { font-size: var(--fs-small); }

.faq { display: grid; gap: 0; max-width: 52rem; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 1.35rem 0;
}
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--rust-text); font-family: var(--font-body); font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin-top: 1rem; font-size: var(--fs-small); color: var(--ink-soft); max-width: 60ch; }

@media (max-width: 860px) { .info-grid { grid-template-columns: 1fr; } }

/* Mobile: keep the hero foot uncluttered */
@media (max-width: 860px) {
  .hero__scroll { display: none; }
  .video-toggle { bottom: auto; top: 1rem; right: 1rem; }
}

/* --------------------------------------------------------------------------
   22. Hero opening announcement
   -------------------------------------------------------------------------- */
.hero__opening {
  margin: 0 0 2rem;
  display: flex; align-items: center; gap: .9rem;
}
.hero__opening::before {
  content: ""; width: 46px; height: 1px; background: var(--gold); flex: none;
}
/* Set in the display face rather than the site's uppercase micro-type, so the
   announcement reads as a statement and doesn't rhyme with the scroll cue. */
.hero__opening span {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, .95rem + .4vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--gold-light);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .hero__opening { margin-bottom: 1.75rem; }
  .hero__opening::before { width: 30px; }
}

/* --------------------------------------------------------------------------
   19. Legal pages, consent checkbox, terms sheet
   -------------------------------------------------------------------------- */
.legal-head h1 { font-size: var(--fs-h2); margin: .5rem 0 1.25rem; max-width: 24ch; }
.legal-head .lead { color: rgba(244,239,228,.8); max-width: 60ch; }

.legal { max-width: 68ch; }
.legal__intro { font-size: var(--fs-lead); line-height: 1.6; }
.legal h2 {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--rust-text);
  margin: 2.75rem 0 .85rem;
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 1rem; }
.legal__meta {
  margin-top: 2.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-micro); color: var(--ink-soft);
}

/* Consent checkbox */
.check { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
.check input[type="checkbox"] {
  width: 1.15rem; height: 1.15rem; margin: .15rem 0 0;
  accent-color: var(--rust);
}
.check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--rust); outline-offset: 2px;
}
.check label {
  font-size: var(--fs-small); line-height: 1.6; color: var(--ink);
  letter-spacing: normal; text-transform: none; font-weight: 400;
}
.check a { color: var(--rust-text); text-underline-offset: 3px; }

/* Terms sheet (modal) */
.sheet {
  position: fixed; inset: 0; z-index: 70;
  /* minmax(0,1fr) pins the row to the viewport; without it the track sizes to
     the panel's full content height and centring pushes the footer off-screen */
  display: grid; grid-template-rows: minmax(0, 1fr); place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(21,18,16,.74);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.sheet[data-open="true"] {
  opacity: 1; visibility: visible;
  transition: opacity .3s var(--ease), visibility 0s linear 0s;
}
.sheet__panel {
  width: min(60rem, 100%);
  max-height: min(84svh, 100%);
  display: flex; flex-direction: column;
  background: var(--white); color: var(--ink);
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.sheet__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--rule);
}
.sheet__head h2 { font-size: var(--fs-h3); margin: 0; }
.sheet__close {
  flex: none; width: 2.75rem; height: 2.75rem;
  display: grid; place-content: center;
  font: inherit; font-size: 1.5rem; line-height: 1;
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule); cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.sheet__close:hover { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
/* flex-1 + min-height:0 is what lets the body scroll instead of pushing
   the footer out of the panel */
.sheet__body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
}
.sheet__head, .sheet__foot { flex: none; }
.sheet__foot {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--rule);
  background: var(--cream-deep);
}
.sheet__foot a { font-size: var(--fs-small); color: var(--rust-text); }

@media (max-width: 560px) {
  .sheet { padding: 0; }
  .sheet__panel { max-height: 100svh; height: 100svh; }
  .sheet__foot { justify-content: stretch; }
  .sheet__foot .btn { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   20. Status flags & wide fact lists
   NOTE FOR LEGAL REVIEW: the booking-disclosure copy carried in .form__note
   on venues.html / weddings.html / contact.html, and the notices on
   terms.html, are website disclosure copy pending review by the ranch's
   legal counsel. They do not replace the rental agreement.
   -------------------------------------------------------------------------- */
.note-flag {
  display: inline-block; text-align: left;
  margin-top: 1.25rem;
  padding: .7rem 1rem;
  font-size: var(--fs-micro); line-height: 1.55;
  color: var(--ink-soft);
  background: rgba(201,162,39,.12);
  border: 1px solid rgba(201,162,39,.42);
}
.section--ink .note-flag, .section--dark .note-flag {
  color: rgba(244,239,228,.82);
  background: rgba(201,162,39,.16);
  border-color: rgba(201,162,39,.5);
}

/* Grand Opening / Accepting Bookings status badges, used on the Event
   Venue and Lodge sections (homepage and venues.html) so it's clear the
   physical venues open in 2027 while inquiries/bookings are open now. */
.venue-status { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 1.1rem; }
.venue-status__badge {
  display: inline-flex; align-items: center;
  padding: .4rem .85rem;
  font-size: 10px; font-weight: 600; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; white-space: nowrap;
  border: 1px solid currentColor;
}
.venue-status__badge--opening { color: var(--rust-text); background: rgba(166,82,44,.06); }
.venue-status__badge--booking { color: var(--sage-deep); background: rgba(69,79,59,.06); }
.section--ink .venue-status__badge--opening, .section--dark .venue-status__badge--opening {
  color: var(--gold-light); background: rgba(201,162,39,.12);
}
.section--ink .venue-status__badge--booking, .section--dark .venue-status__badge--booking {
  color: var(--cream); background: rgba(244,239,228,.1);
}

.facts--wide { max-width: 72ch; gap: 1.25rem; }
.facts--wide li { grid-template-columns: 13rem 1fr; }
.facts--wide em { font-style: normal; color: var(--rust-text); }
.section--ink .facts--wide em, .section--dark .facts--wide em { color: var(--gold-light); }
@media (max-width: 640px) {
  .facts li, .facts--wide li { grid-template-columns: 1fr; gap: .35rem; }
}

/* Coming-soon card panel — used where no official photography exists yet, so a
   real facility is never implied by a stand-in photograph. */
.card__media--soon { background: var(--cream-deep); }
.card__placeholder {
  width: 100%; height: 100%;
  display: grid; place-content: center; justify-items: center; gap: 1rem;
  border: 1px solid rgba(33,29,24,.12);
}
.card__placeholder img { width: 56px; height: auto; opacity: .45; }

/* --------------------------------------------------------------------------
   21. Immersive section — one continuous composition: the photograph runs
   full-bleed and dissolves into the section's own colour, with the content
   floating over the settled right-hand side. No panel behind the type; the
   gradient does the work. Stops are measured, not eyeballed — see the figures
   recorded beside .immersive__veil.
   -------------------------------------------------------------------------- */
/* --veil-rgb is the section's own background colour, so the photograph
   dissolves into whatever tone the section already uses:
   --charcoal-deep on .section--dark, --charcoal on .section--ink. */
.section--immersive {
  position: relative; overflow: hidden;
  --veil-rgb: 21,18,16;
  /* focal point of the photograph, per section and per breakpoint */
  --focus: 40% 50%;
  --focus-sm: 42% 40%;
}
.section--ink.section--immersive { --veil-rgb: 33,29,24; }
/* 2026-09-09: swapped to a new photo (a symmetric street/driveway view
   between cabins) that doesn't need the previous asset's off-center
   compensation. Desktop's box is still wide enough relative to the image
   that object-fit:cover shows the full width regardless of --focus (see
   prior note), so 50/50 is just the sensible default. --focus-sm is
   re-centered too, pending a check of the mobile crop specifically. */
#full-ranch { --focus: 50% 50%; --focus-sm: 50% 50%; }
.section--immersive > .wrap { position: relative; z-index: 2; }

.immersive__media { position: absolute; inset: 0; z-index: 0; }
.immersive__media picture { display: block; width: 100%; height: 100%; }
.immersive__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--focus);
}

/* transparent -> semi -> solid --charcoal-deep (#151210 = rgb(var(--veil-rgb))).
   Every stop here was set by measurement, not by eye: the worst-case backdrop
   pixel behind each text element was sampled from a render of this section with
   the content hidden, and contrast computed against the composited foreground
   (the lead and the note are translucent, so they are blended onto the sampled
   pixel first). Measured 2026-08-26 at 1440x900 / 820x1180 / 390x844:
     eyebrow 7.12:1, headline 14.12:1, intro 8.82:1, row labels 6.55:1,
     row text 16.13:1, rendering note 9.67:1, inquiry link 10.30:1
   Small text needs 4.5:1; the headline is large text and needs 3:1.
   The gold row labels are the binding constraint — they sit at the left edge of
   the content column, so the .66 stop at 44% exists to hold them. Re-measure
   rather than eyeball if these stops move. */
.immersive__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right,
      rgba(var(--veil-rgb),0)    0%,
      rgba(var(--veil-rgb),.05) 20%,
      rgba(var(--veil-rgb),.24) 33%,
      rgba(var(--veil-rgb),.66) 44%,
      rgba(var(--veil-rgb),.90) 51%,
      rgba(var(--veil-rgb),.98) 58%,
      rgb(var(--veil-rgb))      65%,
      rgb(var(--veil-rgb))     100%),
    /* a whisper top and bottom so the full-bleed frame sits into the page
       instead of butting hard against the cream sections either side */
    linear-gradient(to bottom,
      rgba(var(--veil-rgb),.55) 0%, rgba(var(--veil-rgb),.10) 22%,
      rgba(var(--veil-rgb),.10) 78%, rgba(var(--veil-rgb),.55) 100%);
}

/* Same geometry as the .split it replaces, so content width and vertical
   position are unchanged: two equal columns, content in the second. */
.immersive__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: clamp(2rem, 5vw, 5rem);
}
.immersive__content { grid-column: 2; }
.immersive__content h2 { font-size: var(--fs-h2); margin-bottom: 1.25rem; }

@media (max-width: 860px) {
  /* Keep the full-bleed treatment rather than reverting to a stacked image.
     The frame shifts to the hall's centre and the veil turns vertical, so the
     venue reads at the top and the type sits on settled colour below. */
  .immersive__inner { grid-template-columns: 1fr; }
  .immersive__content { grid-column: 1; }
  /* A wide photograph inside a tall section: `cover` matches the height, so a
     full-section media box would only ever reveal the image's top slice in the
     visible band. Constraining the box to the band lets the whole frame — and
     the lodge — read. Below it the section's own colour continues, and the veil
     is already solid there, so the join is invisible. */
  .immersive__media { bottom: auto; height: 22rem; }
  .immersive__media img { object-position: var(--focus-sm); }
  /* Extra head-room opens a genuine window onto the hall above the type, so the
     venue stays recognisable instead of being dimmed into the background. */
  .section--immersive { padding-top: calc(var(--section-y) + 13rem); }
  /* Anchored in px, not %, so the fade lands at the top of the content no matter
     how tall the content runs at a given width. */
  .immersive__veil {
    background:
      linear-gradient(to bottom,
        rgba(var(--veil-rgb),.10)   0,
        rgba(var(--veil-rgb),.22) 150px,
        rgba(var(--veil-rgb),.72) 250px,
        rgb(var(--veil-rgb))      320px,
        rgb(var(--veil-rgb))      100%);
  }
}