/* ============================================================
   HUDSPETH FARMS — St. Joe, Arkansas
   "Front end feels 1975 Hudspeth Farms. Backend works like 2026."
   Design language pulled from the farm: land, family, cattle,
   work, genetics, generations, Arkansas.
   ============================================================ */

/* ---------- FONTS ----------
   Display = Libre Caslon Display (heritage American editorial / livestock catalog).
   Body/UI = Inter. The script logo supplies the personality; type stays disciplined. */
/* Fonts load via a <link> in each page <head> (non-render-blocking) — no @import. */

/* ---- Accessibility: skip link + visible keyboard focus ---- */
.skip {
  position: fixed; top: -60px; left: 1rem; z-index: 200;
  background: #26311f; color: #f6efe2; padding: .7rem 1.1rem; border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif; font-size: .9rem; text-decoration: none;
  transition: top .2s ease;
}
.skip:focus { top: 1rem; }
:focus-visible {
  outline: 2px solid #a5372a; outline-offset: 3px; border-radius: 2px;
}
.on-dark :focus-visible, .gathering :focus-visible, .band :focus-visible,
.subfoot :focus-visible, .hero :focus-visible { outline-color: #e8dfcd; }

/* ---------- COLOR SYSTEM ----------
   Straight off their real roadside sign: deep pasture GREEN + red on CREAM.
   The luxury is the photography, not gold foil. Lots of white breathing room.
   (--wheat* kept as aliases now pointing to green so existing rules recolor.) */
:root {
  --green:         #3c5232;   /* pasture green — PRIMARY accent (their sign logo green) */
  --green-soft:    #6f8a5c;
  --green-deep:    #26311f;   /* dark section background */
  --sky:           #7ea3b6;   /* Arkansas sky blue — subtle */
  --red:           #a5372a;   /* their sign's breed-name red — micro accent */
  /* aliases so prior --wheat rules recolor to green without per-rule edits */
  --wheat:         var(--green);
  --wheat-soft:    var(--green-soft);
  --wheat-deep:    #33482a;
  --cardinal:      #a5372a;   /* = sign red */
  --cardinal-soft: #b8493a;
  --cream:         #f6efe2;   /* Charolais cream / paper — breathing room */
  --cream-deep:    #e8dfcd;
  --soil:          #4a3728;   /* soil brown — minimal, earthy text only */
  --bark:          #5c4632;
  --forest:        #2e3a2b;   /* pasture shadow green */
  --sage:          #6f7a5a;
  --charcoal:      #20241c;
  --ink:           #24281f;

  /* Day-of-the-farm sky — these three get cross-faded by scroll progress.
     --sky-a top, --sky-b horizon, --sky-c ground haze. Set live by JS. */
  --sky-a: #cdd6de;
  --sky-b: #e9e2d0;
  --sky-c: #d8cdb4;
  --sun:   #fbf3dd;
  --sun-x: 78%;
  --sun-y: 30%;

  --measure: 40rem;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --font-display: 'Zilla Slab', 'Libre Caslon Display', Georgia, serif;  /* Western/Clarendon slab — matches the logo */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-label: 'Inter', system-ui, sans-serif;
  --font-script: 'Pinyon Script', 'Libre Caslon Display', cursive; /* The Gathering — event only */
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* ============================================================
   THE SKY — one fixed layer behind everything.
   As you scroll the whole site, this warms morning -> golden -> dusk.
   "You spend a day at Hudspeth Farms by reaching the bottom."
   ============================================================ */
.sky {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(120vmax 90vmax at var(--sun-x) var(--sun-y),
        var(--sun) 0%, transparent 42%),
    linear-gradient(to bottom, var(--sky-a) 0%, var(--sky-b) 58%, var(--sky-c) 100%);
  transition: background .9s linear;
}
/* SUNLIGHT — real light falling across the land, not just the sky.
   A warm wash that tracks the sun's position (--sun-x/--sun-y) and rises
   from nothing at dawn to golden-hour warmth, composited over the actual
   photographs with soft-light. Digital Physicality: light changes. */
.sunlight {
  position: fixed; inset: 0; z-index: 30; pointer-events: none;
  mix-blend-mode: soft-light; opacity: var(--light, 0);
  background: radial-gradient(85vmax 85vmax at var(--sun-x) var(--sun-y),
      rgba(255,206,128,.95) 0%, rgba(255,158,84,.35) 52%, rgba(120,80,40,0) 82%);
  transition: opacity 1.1s linear;
}

/* almost-imperceptible morning fog that lifts over the first screens */
.fog {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(244,236,221,.0) 40%, rgba(244,236,221,.55) 100%);
  opacity: var(--fog, .7);
  transition: opacity 1.2s var(--ease-soft);
}

/* ============================================================
   TYPOGRAPHY — painted on the side of the barn 40 years ago,
   not a Brooklyn farm-to-table menu.
   ============================================================ */
.eyebrow {
  font-family: var(--font-label);
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-size: clamp(.66rem, 1.4vw, .76rem);
  color: var(--wheat-deep);
}
.eyebrow .dot { color: var(--wheat); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.01em; color: var(--charcoal); }
.display {
  font-size: clamp(2.8rem, 8vw, 7rem);
  font-weight: 600;
  line-height: 1.0;
}
.headline { font-size: clamp(2rem, 5.2vw, 4.2rem); font-weight: 600; }
.subhead  { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 500; }
.lede {
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  line-height: 1.7;
  max-width: var(--measure);
  color: var(--soil);
  font-weight: 400;
}
.quiet { color: var(--bark); }

/* a hairline gold underline that appears under active nav / key words */
.mark { position: relative; white-space: nowrap; }
.mark::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -.06em; height: 2px;
  background: var(--wheat);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease);
}
.reveal.in .mark::after { transform: scaleX(1); }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
main { position: relative; z-index: 1; }
section { position: relative; }
.pad { padding-inline: var(--gutter); }
.wrap { max-width: 78rem; margin-inline: auto; }
.stage { min-height: 100svh; display: grid; align-content: center; }

/* full-bleed photo slots — an animal or a landscape gets the whole viewport.
   NEVER cover a beautiful animal with UI. */
.plate {
  position: relative;
  height: 100svh;
  display: grid;
  place-items: end start;
  overflow: hidden;
}
.plate__media { position: absolute; inset: 0; z-index: -1; }
.plate__caption {
  font-family: var(--font-display);
  color: var(--cream);
  padding: var(--gutter);
  font-size: clamp(.8rem, 1.8vw, 1rem);
  letter-spacing: .04em;
  text-shadow: 0 1px 20px rgba(0,0,0,.5);
}

/* ============================================================
   PLACEHOLDER LANDSCAPES — procedural pasture.
   These are DESIGN PLACEHOLDERS. Every one is a real photo/video slot.
   Swap .scene__photo background-image with the family's photography.
   Search PHOTO- in HTML for the slot's shot-list id.
   ============================================================ */
.scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: transparent; }
.scene__photo {                       /* <- drop real image here */
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
/* layered hills give real depth for the parallax planes */
.hill { position: absolute; left: -5%; right: -5%; bottom: 0; will-change: transform; }
.hill--far  { bottom: 34%; }
.hill--mid  { bottom: 18%; }
.hill--near { bottom: 0; }
.grass {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background:
    linear-gradient(to top, var(--forest) 0%, rgba(46,58,43,0) 100%);
}
/* foreground blades that sway on the wind */
.blades {
  position: absolute; left: 0; right: 0; bottom: -2px; height: 22vh; z-index: 2;
  will-change: transform;
}
.blades path { fill: var(--forest); }
@keyframes sway { 0%,100% { transform: translateX(0) } 50% { transform: translateX(1.2%) } }

/* BREATHING — the land at rest inhales. Applied ONLY to the two "just look"
   moments (hero + Stand Here), never the parallax plates. The experience breathes. */
@keyframes breathe { 0%,100% { transform: scale(1.02) } 50% { transform: scale(1.055) } }
.hero video.scene__photo,
.vista .scene__photo { animation: breathe 19s ease-in-out infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .hero video.scene__photo, .vista .scene__photo { animation: none; }
  .sunlight { transition: none; }
}

.fencepost {
  position: absolute; bottom: 0; width: 10px; border-radius: 3px 3px 0 0;
  background: linear-gradient(var(--bark), var(--soil));
  box-shadow: 0 0 30px rgba(0,0,0,.15);
  z-index: 3; will-change: transform;
}

/* ============================================================
   NAV — sticky, gets a barnwood bar only after you leave the hero
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: .95rem var(--gutter);
  transition: background .5s var(--ease), box-shadow .5s var(--ease), transform .4s var(--ease), color .5s var(--ease);
  color: var(--cream);
}
.nav.solid {
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(58,42,30,.14);
  color: var(--ink);
}
.nav.hide { transform: translateY(-110%); }
.nav__brand { display: flex; align-items: center; gap: .65rem; }
.nav__brand img { height: 40px; width: auto; border-radius: 4px; }
.nav__word {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .12em;
  font-size: 1.15rem; line-height: 1; text-transform: uppercase;
}
.nav__word small { display: block; font-family: var(--font-label); font-weight: 600; font-size: .55rem; letter-spacing: .28em; color: currentColor; opacity: .7; margin-top: .25rem; }
.nav__links { display: flex; gap: 1.9rem; align-items: center; }
.nav__links a {
  font-family: var(--font-label); font-weight: 600; font-size: .76rem;
  letter-spacing: .14em; text-transform: uppercase;
  position: relative; padding: .2rem 0; color: currentColor;
}
.nav__links a::after {         /* the tiny gold line under active nav */
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: var(--wheat); transform: scaleX(0); transform-origin: center;
  transition: transform .35s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav__cta {
  font-family: var(--font-label); font-weight: 600; font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent); padding: .6rem 1.1rem; border-radius: 1px;
  transition: border-color .4s var(--ease), color .4s var(--ease);
}
.nav__cta:hover { border-color: var(--wheat); color: var(--wheat-deep); }
/* hamburger — visible at the top of every page (before the inline bar appears) */
.nav__toggle { display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1; z-index: 60; position: relative; color: currentColor; padding: .5rem; margin: -.5rem; min-width: 44px; min-height: 44px; }
body.scrolled .nav__toggle, body.subpage .nav__toggle { display: none; }  /* desktop: hide once inline nav shows */
body.menu-open .nav__toggle { color: var(--cream); }

/* ============================================================
   HERO — the living pasture
   ============================================================ */
.hero { height: 100svh; display: grid; align-items: end; overflow: hidden; }
.hero__inner { position: relative; z-index: 4; padding-bottom: clamp(4rem, 12vh, 9rem); }
.hero__place {
  font-family: var(--font-label); font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; font-size: clamp(.66rem, 1.5vw, .8rem);
  color: var(--cream-deep); margin-bottom: 1.4rem; text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.hero__place .dot { color: var(--wheat-soft); }
.hero h1 { color: var(--cream); max-width: 15ch; text-shadow: 0 2px 40px rgba(0,0,0,.45); }
.hero__sub { margin-top: 1.4rem; max-width: 40ch; color: var(--cream-deep); font-size: clamp(1.05rem,2.2vw,1.4rem); font-family: var(--font-display); text-shadow: 0 1px 20px rgba(0,0,0,.5); }
.hero__cta {
  margin-top: 2.2rem; display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-label); font-weight: 600; font-size: .78rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cream);
  padding-bottom: .5rem; border-bottom: 1px solid var(--wheat-soft);
}
.hero__cta .arrow { transition: transform .5s var(--ease); color: var(--wheat-soft); }
.hero__cta:hover .arrow { transform: translateY(4px); }
.hero__scrollhint {
  position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%);
  z-index: 4; color: var(--cream-deep); font-family: var(--font-label);
  letter-spacing: .22em; font-size: .64rem; text-transform: uppercase;
  animation: bob 2.6s var(--ease-soft) infinite; text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); opacity:.55 } 50% { transform: translate(-50%,6px); opacity:1 } }

/* audio opt-in pill */
.audio-toggle {
  position: fixed; right: var(--gutter); bottom: 1.4rem; z-index: 45;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-label); font-size: .8rem; letter-spacing: .04em;
  padding: .45rem .8rem; border-radius: 40px;
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  border: 1px solid rgba(58,42,30,.25); backdrop-filter: blur(6px);
  transition: opacity .4s var(--ease);
}
.audio-toggle .wave { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.audio-toggle .wave i { width: 2px; background: var(--cardinal); height: 4px; border-radius: 2px; }
.audio-toggle.on .wave i { animation: eq 1s ease-in-out infinite; }
.audio-toggle.on .wave i:nth-child(2){ animation-delay:.15s }
.audio-toggle.on .wave i:nth-child(3){ animation-delay:.3s }
@keyframes eq { 0%,100%{height:4px} 50%{height:12px} }

/* ============================================================
   REVEAL SYSTEM — everything enters on the same breeze.
   Grass moves left->right, so content drifts in from the left.
   ============================================================ */
.reveal { opacity: 0; transform: translate3d(-24px, 8px, 0); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; }
.reveal.d2 { transition-delay: .24s; }
.reveal.d3 { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 0; transform: none; transition: opacity .6s ease; }
  .reveal.in { opacity: 1; }
  .blades, .hero__scrollhint { animation: none !important; }
}

/* ============================================================
   SECTION: STOP AND LOOK — full-bleed animal plates, no UI
   ============================================================ */
.look .plate + .plate { margin-top: 0; }

/* ============================================================
   SECTION: THE HERD — cattle that don't know they're buttons
   ============================================================ */
.herd__intro { padding-block: clamp(5rem, 12vh, 9rem); }
.breeds { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 1.4rem; }
.breeds span { font-family: var(--font-label); font-weight: 600; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--soil); }
.breeds span + span::before { content: "•"; color: var(--wheat); margin-right: 1.4rem; margin-left: -.9rem; }

.pasture {
  position: relative; height: 100svh; overflow: hidden;
  background: linear-gradient(to bottom, var(--sky-b), var(--forest));
}
.pasture__scene { position: absolute; inset: 0; z-index: 0; }
.animal {
  position: absolute; z-index: 2; transform: translate(-50%,-50%);
  width: clamp(46px, 6vw, 82px); aspect-ratio: 3/2;
  border: 0; border-radius: 4px; background: transparent;
  transition: filter .5s var(--ease);
}
.animal__hit { position: absolute; inset: -14px; border-radius: 50%; }
.animal__silhouette { width: 100%; height: 100%; fill: var(--soil); opacity: .92; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); transition: transform .5s var(--ease); }
.animal:hover .animal__silhouette { transform: translateY(-3px) scale(1.04); }
.animal__tag {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 6px);
  white-space: nowrap; text-align: center;
  opacity: 0; transition: opacity .4s var(--ease), transform .4s var(--ease);
  pointer-events: none;
}
.animal:hover .animal__tag, .animal:focus-visible .animal__tag { opacity: 1; transform: translate(-50%, -4px); }
.animal__tag b { display:block; font-family: var(--font-display); color: var(--cream); font-size: 1rem; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.animal__tag span { font-size: .75rem; color: var(--cream); opacity: .85; letter-spacing:.06em; }
.pasture.settled .animal:not(:hover) { filter: brightness(.72) saturate(.8); }
.pasture__hint {
  position: absolute; left: 50%; top: 1.4rem; transform: translateX(-50%); z-index: 3;
  color: var(--cream); font-family: var(--font-label); letter-spacing: .18em;
  text-transform: uppercase; font-size: .72rem; opacity: .8; text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* ---------- animal profile drawer ---------- */
.profile {
  position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: 1.1fr .9fr;
  background: var(--cream); transform: translateY(100%); transition: transform .7s var(--ease);
  pointer-events: none;
}
.profile.open { transform: none; pointer-events: auto; }
.profile__photo { position: relative; background: var(--forest) center/cover; }
.profile__photo .scene { z-index: 0; }
.profile__id {
  position: absolute; left: var(--gutter); bottom: var(--gutter); color: var(--cream);
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
}
.profile__id h2 { font-size: clamp(2rem,5vw,3.6rem); }
.profile__id p { font-family: var(--font-display); letter-spacing: .05em; }
.profile__data { padding: clamp(2rem,5vw,4rem); overflow: auto; align-self: center; }
.profile__close {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem;
  background: color-mix(in srgb, var(--cream) 85%, transparent); backdrop-filter: blur(6px);
}
.spec { border-top: 1px solid rgba(58,42,30,.18); }
.spec dl { display: grid; grid-template-columns: 8rem 1fr; }
.spec dt, .spec dd { overflow-wrap: anywhere; }
@media (max-width: 520px){ .spec dl { grid-template-columns: 6rem 1fr; } }
.spec dt, .spec dd { padding: .7rem 0; }
.spec dt { font-family: var(--font-display); color: var(--bark); font-weight: 600; letter-spacing: .04em; }
.spec dd { color: var(--ink); }
.spec div { display: contents; }
.spec div + div dt, .spec div + div dd { border-top: 1px solid rgba(58,42,30,.1); }
.avail {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem;
  font-family: var(--font-display); font-weight: 600; color: var(--cardinal);
}
.avail::before { content:""; width:8px; height:8px; border-radius:50%; background: var(--cardinal); }

/* ============================================================
   SECTION: THE WORK
   ============================================================ */
.work { background: var(--green-deep); color: var(--cream); }
.work .eyebrow { color: var(--cream-deep); }
.work .lede { color: var(--cream); opacity: .9; }
.work__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin-top: 3rem; }
.work__grid figure { aspect-ratio: 4/5; overflow: hidden; position: relative; background: var(--bark); }
.work__grid figcaption {
  position: absolute; left: .7rem; bottom: .6rem; font-family: var(--font-label);
  font-size: .72rem; letter-spacing: .05em; color: var(--cream); opacity: .85;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

/* ============================================================
   SECTION: TIME — then / now scroll transform
   ============================================================ */
.time { height: 220svh; position: relative; }
.time__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.time__then, .time__now { position: absolute; inset: 0; }
.time__now { clip-path: inset(0 0 0 var(--wipe, 100%)); }   /* wipes open as you scroll */
.time__label {
  position: absolute; z-index: 3; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem,2.4vw,1.6rem); letter-spacing: .1em; color: var(--cream);
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.time__label--then { left: var(--gutter); top: 30%; }
.time__label--now  { right: var(--gutter); bottom: 30%; text-align: right; }
.time__line {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--cardinal);
  left: var(--wipe, 100%); z-index: 4; box-shadow: 0 0 24px rgba(143,29,29,.7);
}
.time__caption {
  position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 5;
  font-family: var(--font-display); font-size: clamp(1.4rem,4vw,2.6rem); color: var(--cream);
  text-shadow: 0 2px 30px rgba(0,0,0,.7); text-align: center;
}

/* ============================================================
   SECTION: THE FAMILY — overlapping generations on a fence line
   ============================================================ */
.family { padding-block: clamp(5rem,14vh,10rem); background: var(--cream-deep); }
.timeline {
  position: relative; margin-top: 4rem; padding-top: 3rem;
}
.timeline::before {                 /* the fence rail that carries their history */
  content: ""; position: absolute; top: 3rem; left: 0; right: 0; height: 4px;
  background: repeating-linear-gradient(90deg, var(--bark) 0 60px, transparent 60px 66px);
  opacity: .5;
}
.gens { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.gen { text-align: center; }
.gen figure {
  aspect-ratio: 3/4; background: var(--bark); position: relative; overflow: hidden;
  box-shadow: 0 10px 30px rgba(58,42,30,.25); transform: rotate(var(--tilt,0deg));
  border: 6px solid #fff; border-bottom-width: 26px;   /* looks like a physical print */
}
.gen figcaption { font-family: var(--font-display); font-weight: 600; margin-top: .7rem; color: var(--soil); }
/* old photographs "develop" into view */
.develop .scene { filter: sepia(.5) contrast(.9) brightness(1.05); opacity: .5; transition: filter 1.1s var(--ease), opacity 1.1s var(--ease); }
.develop.in .scene { filter: sepia(0) contrast(1) brightness(1); opacity: 1; }

/* ============================================================
   SECTION: STAND HERE — the flex. UI disappears.
   ============================================================ */
.standhere { padding-block: clamp(6rem,16vh,12rem); text-align: center; }
.standhere__btn {
  margin-top: 2rem; display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--charcoal);
  border-bottom: 2px solid var(--cardinal); padding-bottom: .3rem;
}
.standhere__btn .arrow { transition: transform .5s var(--ease); }
.standhere__btn:hover .arrow { transform: translateX(6px); }

.vista {
  position: fixed; inset: 0; z-index: 100; background: var(--forest);
  opacity: 0; pointer-events: none; transition: opacity 1.2s var(--ease);
}
.vista.open { opacity: 1; pointer-events: auto; }
.vista .scene { z-index: 0; }
.vista__x {
  position: absolute; top: 1.4rem; right: 1.4rem; z-index: 3; color: var(--cream);
  width: 46px; height: 46px; border: 1px solid rgba(244,236,221,.5); border-radius: 50%;
  font-size: 1.4rem; opacity: .7; transition: opacity .4s; backdrop-filter: blur(4px);
}
.vista__x:hover { opacity: 1; }
.vista__note {
  position: absolute; left: 50%; bottom: 2.4rem; transform: translateX(-50%); z-index: 3;
  color: var(--cream); font-family: var(--font-display); letter-spacing: .2em;
  text-transform: uppercase; font-size: .72rem; opacity: 0; transition: opacity 2s ease 1.2s;
}
.vista.open .vista__note { opacity: .7; }

/* ============================================================
   SECTION: THE GATHERING — the farm gets busy
   ============================================================ */
.gathering { background: var(--green-deep); color: var(--cream); padding-block: clamp(5rem,14vh,10rem); overflow: hidden; }
.gathering .eyebrow { color: var(--cardinal-soft); }
.gathering__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.gathering__date {
  font-family: var(--font-label); font-weight: 700; color: var(--cream);
  font-size: clamp(1rem,2.4vw,1.4rem); letter-spacing: .04em; margin-top: .7rem;
}
.gathering__date b { color: var(--cardinal-soft); }
.reel { display: flex; gap: 1rem; margin-top: 3rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x; scroll-snap-type: x mandatory; padding-bottom: 1rem; }
.reel::-webkit-scrollbar { height: 6px; }
.reel::-webkit-scrollbar-thumb { background: var(--bark); border-radius: 3px; }
.reel figure {
  flex: 0 0 clamp(220px, 30vw, 360px); aspect-ratio: 4/5; scroll-snap-align: start;
  position: relative; overflow: hidden; background: var(--soil);
}
.reel figcaption { position: absolute; left: .8rem; bottom: .7rem; font-family: var(--font-label); font-size: .78rem; opacity: .85; }

/* ---- The Gathering: its own visual universe (deep forest green + thin gold + script) ---- */
.gathering {
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(201,162,94,.06), transparent 60%),
    var(--green-deep);
  border-top: 1px solid rgba(201,162,94,.25);
}
.gathering__top {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,6vw,5rem); align-items: center;
}
.gathering__script {
  font-family: var(--font-script); font-weight: 400; color: var(--cream);
  font-size: clamp(4rem,11vw,7.5rem); line-height: .9; margin-top: .3rem;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.gathering__catalog { position: relative; justify-self: center; max-width: 380px; }
.gathering__catalog img {
  display: block; width: 100%; height: auto; border-radius: 3px;
  transform: rotate(-2.2deg);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(201,162,94,.28), 0 0 0 8px rgba(246,239,226,.04);
  transition: transform .6s var(--ease);
}
.gathering__catalog:hover img { transform: rotate(0deg) scale(1.015); }
.gathering__catalog figcaption {
  margin-top: 1.4rem; text-align: center; font-family: var(--font-label);
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-deep);
}
.gathering__catalog figcaption i { font-family: var(--font-script); font-size: 1.25rem; text-transform: none; letter-spacing: 0; color: var(--cream); vertical-align: -2px; }
@media (max-width: 820px){
  .gathering__top { grid-template-columns: 1fr; }
  .gathering__catalog { order: -1; max-width: 300px; margin-bottom: 1rem; }
}

/* ---- From the Hudspeth Archives — documented proof (real records) ---- */
.archives { background: var(--cream); text-align: center; padding-block: clamp(4.5rem,12vh,9rem); }
.archives__lede { max-width: 52ch; margin-left: auto; margin-right: auto; }
.archives__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,4vw,3rem); margin-top: clamp(2.5rem,6vw,4rem); }
.proof { padding: 0 clamp(.5rem,2vw,1.5rem); border-left: 1px solid rgba(60,82,50,.16); }
.proof:first-child { border-left: 0; }
.proof__num {
  font-family: var(--font-display); color: var(--green);
  font-size: clamp(2.2rem,5vw,3.4rem); line-height: 1; letter-spacing: -.01em;
}
.proof h3 { font-family: var(--font-display); font-size: clamp(1.05rem,2vw,1.3rem); color: var(--ink); margin-top: 1rem; }
.proof p { color: var(--soil); font-size: .96rem; line-height: 1.6; margin-top: .7rem; max-width: 34ch; margin-inline: auto; }
.archives__source { margin-top: clamp(2.5rem,6vw,3.5rem); font-family: var(--font-label); font-weight: 600; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wheat-deep); }
.archives__source i { font-family: var(--font-script); font-size: 1.35rem; text-transform: none; letter-spacing: 0; color: var(--green); vertical-align: -3px; }
@media (max-width: 720px){
  .archives__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .proof { border-left: 0; border-top: 1px solid rgba(60,82,50,.14); padding-top: 2rem; }
  .proof:first-child { border-top: 0; padding-top: 0; }
}
/* archived-catalog cover card (links the real PDF) */
.catalog-cover { display: inline-block; margin-top: 1.4rem; text-decoration: none; }
.catalog-cover img {
  display: block; width: clamp(180px, 40vw, 240px); height: auto; border-radius: 3px;
  transform: rotate(-1.8deg);
  box-shadow: 0 22px 44px -18px rgba(0,0,0,.5), 0 0 0 1px rgba(60,82,50,.2);
  transition: transform .5s var(--ease);
}
.catalog-cover:hover img { transform: rotate(0deg) scale(1.02); }
.catalog-cover span { display: block; margin-top: 1rem; font-family: var(--font-label); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.catalogs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 1.4rem; margin-top: 3rem; }
.catalog {
  aspect-ratio: 3/4; background: var(--bark); position: relative; overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.4); transition: transform .4s var(--ease);
  transform: rotate(var(--tilt,0deg));
}
.catalog:hover { transform: translateY(-8px) rotate(0deg); }
.catalog__spine { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 1rem; }
.catalog__spine b { font-family: var(--font-display); color: var(--cream); font-size: 1.1rem; }
.catalog__spine span { color: var(--cream-deep); font-size: .78rem; letter-spacing: .1em; }

/* ============================================================
   SECTION: GOLDEN HOUR + philosophy
   ============================================================ */
.golden { position: relative; height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.golden .scene { z-index: -1; }
.golden__words { color: var(--cream); text-shadow: 0 2px 40px rgba(0,0,0,.6); max-width: 22ch; }
.golden__words h2 { font-size: clamp(1.8rem,5vw,3.4rem); line-height: 1.05; }
.golden__note { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; opacity: .7; margin-top: 1.4rem; }

/* ============================================================
   THE GATHERING / CONTACT + LIVING FOOTER
   ============================================================ */
.home {
  position: relative; background: var(--green-deep); color: var(--cream);
  padding: clamp(3.5rem,9vh,7rem) var(--gutter) 2.4rem; overflow: hidden;
}
.home__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.home__billboard { border-radius: 4px; overflow: hidden; box-shadow: 0 26px 55px -18px rgba(0,0,0,.65); align-self: stretch; }
.home__billboard img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.home .eyebrow { color: var(--green-soft); }
.home__invite { max-width: 36rem; }
.home__invite h2 { font-size: clamp(2.2rem,4.6vw,3.4rem); color: var(--cream); }
.home__place { font-family: var(--font-display); font-size: clamp(1.1rem,2vw,1.4rem); margin-top: .6rem; color: var(--cream-deep); }
.home .contact-real { grid-template-columns: 1fr 1fr; margin-top: 1.8rem; color: var(--cream); }
.home .contact-real b { color: var(--cream); }
.home .contact-real a { color: var(--cream-deep); border-bottom: 1px solid rgba(244,236,221,.22); }
.home .contact-real a:hover { color: #fff; }
.home__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
@media (max-width: 860px){
  .home__grid { grid-template-columns: 1fr; }
  .home .contact-real { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){ .home .contact-real { grid-template-columns: 1fr; } }
.btn {
  font-family: var(--font-label); font-weight: 600; font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .85rem 1.6rem; border-radius: 1px; border: 1px solid color-mix(in srgb, var(--cream) 55%, transparent);
  color: var(--cream); display: inline-flex; align-items: center; gap: .5rem;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.btn:hover { background: var(--cream); color: var(--soil); border-color: var(--cream); }
.btn--red { background: var(--wheat); border-color: var(--wheat); color: var(--charcoal); }
.btn--red:hover { background: var(--wheat-soft); border-color: var(--wheat-soft); color: var(--charcoal); }
.home__foot {
  margin-top: 4rem; display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; font-size: .82rem; opacity: .8;
  border-top: 1px solid rgba(244,236,221,.25); padding-top: 1.4rem;
}
.home__foot a:hover { color: #fff; }

/* contact slot — clearly marked TODO for real info */
.contact-slot {
  margin-top: 1rem; font-size: .78rem; padding: .5rem .8rem; border: 1px dashed rgba(244,236,221,.4);
  border-radius: 3px; display: inline-block; opacity: .75;
}

/* ============================================================
   PHYSICAL PRINTS — photographs as real objects on a surface.
   White border, soft shadow, a little tilt. Digital Physicality:
   a photo isn't a div, it's a print you could pick up.
   ============================================================ */
.print {
  position: relative; background: #fff; padding: 10px 10px 10px;
  border-radius: 2px; box-shadow: 0 22px 45px -12px rgba(28,20,12,.5), 0 4px 12px rgba(28,20,12,.2);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.print img, .print .print__img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px;
}
.print--photo { padding-bottom: 10px; }
.print:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 30px 60px -12px rgba(28,20,12,.55); }
/* stacked prints behind (the pile look) */
.print-stack { position: relative; }
.print-stack::before, .print-stack::after {
  content: ""; position: absolute; inset: 0; background: #f3ece0; border-radius: 2px;
  box-shadow: 0 14px 30px -10px rgba(28,20,12,.4); z-index: -1;
}
.print-stack::before { transform: rotate(3deg) translate(10px, 6px); }
.print-stack::after  { transform: rotate(-4deg) translate(-8px, 10px); background: #ede4d4; }
.print--sepia .print__img { filter: sepia(.55) contrast(.92) brightness(1.02); }

/* gold arrow-link (VIEW PROFILE → · OUR STORY → · COME ON IN) */
.link-gold {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-label); font-weight: 700; font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--wheat-deep);
}
.link-gold .arrow { transition: transform .4s var(--ease); }
.link-gold:hover .arrow { transform: translateX(5px); }
.on-dark .link-gold { color: var(--cream-deep); }

/* ============================================================
   FEATURED ANIMAL CARD — the herd's hero (comp: HF 2101)
   ============================================================ */
.featured { position: relative; }
.featured__print { position: relative; }
.featured__print .print { --tilt: 1.5deg; }
.featured__panel {
  position: absolute; right: -3%; left: auto; top: auto; bottom: -11%; z-index: 4;   /* OUTSIDE the photo, bottom-right — never over the animal */
  background: color-mix(in srgb, var(--charcoal) 85%, transparent);
  backdrop-filter: blur(3px); color: var(--cream);
  padding: 1rem 1.3rem; max-width: 54%;
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.6);
}
.featured__panel h3 { color: var(--cream); font-size: clamp(1.3rem,2.4vw,1.9rem); font-weight: 600; }
.featured__meta {
  display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: .55rem 0 1rem;
  font-family: var(--font-label); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cream-deep);
}
.featured__meta b { color: var(--wheat-soft); font-weight: 700; margin-right: .3rem; }
.featured__meta span { position: relative; }
.featured__meta span + span::before { content: "·"; color: var(--wheat); margin-right: .8rem; }

/* ============================================================
   LEGACY — "Built on Generations. Driven Every Day."
   Dark band, copy left, a cluster of physical prints right.
   ============================================================ */
.legacy { background: var(--green-deep); color: var(--cream); overflow: hidden;
  padding-block: clamp(4.5rem, 12vh, 9rem);
  background-image: linear-gradient(to bottom, rgba(20,15,10,.15), rgba(20,15,10,.4)); }
.legacy .eyebrow { color: var(--wheat-soft); }
.legacy h2 { color: var(--cream); }
.legacy p { color: var(--cream-deep); }
.legacy__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.legacy__copy { max-width: 40ch; }
.legacy__cluster { position: relative; min-height: 42vh; }
.legacy__cluster .print { position: absolute; }
.legacy__cluster .p1 { --tilt: -3deg; width: 54%; left: 0; top: 6%; z-index: 3; }
.legacy__cluster .p2 { --tilt: 4deg; width: 46%; right: 2%; top: 0; z-index: 2; }
.legacy__cluster .p3 { --tilt: -5deg; width: 50%; right: 6%; bottom: 0; z-index: 1; }
.legacy__cluster .print figcaption {
  font-family: var(--font-label); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bark); text-align: center; padding-top: 8px;
}
.legacy__note-print {
  display: grid; place-items: center; text-align: center; background: #fff; color: var(--soil);
  aspect-ratio: 4/5; padding: 1rem;
}
.legacy__note-print b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.legacy__note-print span { font-size: .72rem; color: var(--bark); margin-top: .3rem; }

/* ============================================================
   BAND — "Want to see why?" full-bleed dusk invitation
   ============================================================ */
.band { position: relative; min-height: 62svh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.band .scene { z-index: -1; }
.band__inner { color: var(--cream); z-index: 2; padding: var(--gutter); }
.band__inner h2 { color: var(--cream); font-size: clamp(2rem,5vw,3.4rem); text-shadow: 0 2px 40px rgba(0,0,0,.5); }

/* ============================================================
   SCROLL PROGRESS — an almost-invisible strand of fence wire
   ============================================================ */
.wire { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.wire__fill { height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--bark), var(--cardinal)); transition: width .1s linear; opacity: .8; }

/* ============================================================
   LOADER — traces the fence line
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 200; background: var(--cream);
  display: grid; place-items: center; transition: opacity .8s var(--ease), visibility .8s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader svg { width: min(60vw, 420px); }
.loader path { fill: none; stroke: var(--soil); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2s var(--ease) forwards; }
.loader .word { font-family: var(--font-display); letter-spacing: .3em; color: var(--bark);
  text-align: center; margin-top: 1.4rem; font-size: .78rem; text-transform: uppercase;
  opacity: 0; animation: fadein .8s ease .9s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .loader path { animation: none; stroke-dashoffset: 0; }
  .loader .word { animation: none; opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* full-screen menu overlay — works at ALL widths, opened by the top hamburger */
/* dimmed backdrop behind the side drawer */
body.menu-open::before {
  content: ""; position: fixed; inset: 0; z-index: 56;
  background: rgba(18,24,14,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
/* menu = right-side drawer, not a full-width overlay */
body.menu-open .nav__links {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto;
  width: min(320px, 80vw);
  display: flex !important; flex-direction: column;
  justify-content: center; align-items: flex-start; gap: 1.2rem;
  padding: 5rem clamp(1.6rem, 6vw, 2.2rem) 2.5rem;
  background: var(--green-deep);
  box-shadow: -24px 0 70px -12px rgba(0,0,0,.5);
  z-index: 58;
  opacity: 1 !important; pointer-events: auto !important; transform: none;
}
body.menu-open .nav__links a {
  color: var(--cream); font-family: var(--font-display);
  font-size: clamp(1.35rem, 4vw, 1.9rem); letter-spacing: .01em; text-transform: none; font-weight: 400;
  display: block; width: 100%; padding: .5rem 0;
}
body.menu-open .nav__links a::after { display: none; }
/* nav.solid's backdrop-filter creates a containing block that traps the fixed
   overlay inside the nav bar — neutralize it while the menu is open so the
   overlay fills the whole viewport. */
body.menu-open .nav {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: transparent !important; box-shadow: none !important;
  /* .nav is a fixed z-50 stacking context; the blur backdrop is z-56 at the
     root, so it painted OVER the drawer (blurry + untappable). Lift the whole
     nav — drawer (z-58) and toggle (z-60) ride with it — above the backdrop. */
  z-index: 60 !important;
}

@media (max-width: 820px) {
  /* mobile: no inline nav row — the hamburger drives everything */
  body:not(.menu-open) .nav__links { display: none; }
  body.scrolled .nav__toggle, body.subpage .nav__toggle { display: inline-flex; }
  .nav__cta { display: none; }
  .profile { grid-template-columns: 1fr; grid-template-rows: 42svh 1fr; }
  .work__grid { grid-template-columns: repeat(2,1fr); }
  .gens { grid-template-columns: repeat(3,1fr); }
  .time__label--now { bottom: 22%; }
}
@media (max-width: 520px) {
  .gens { grid-template-columns: repeat(2,1fr); }
}

/* ============================================================
   SUB-PAGES — Females / Sires / Sale
   ============================================================ */
body.subpage { background: var(--cream); }
.catalog-page { padding-top: 4.5rem; }
.catalog-hero { padding-block: clamp(3rem, 8vh, 6rem) 2rem; }
.catalog-hero .lede { margin-top: 1rem; }

.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.filter {
  font-family: var(--font-label); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .55rem 1rem; min-height: 40px; display: inline-flex; align-items: center; border-radius: 2px; border: 1.5px solid rgba(58,42,30,.35);
  color: var(--soil); transition: all .3s var(--ease); cursor: pointer;
}
.filter:hover { border-color: var(--cardinal); }
.filter.is-on { background: var(--soil); color: var(--cream); border-color: var(--soil); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.6rem; padding-bottom: 5rem; }
.card {
  background: #fff; border-radius: 3px; overflow: hidden;
  box-shadow: 0 8px 26px rgba(58,42,30,.12); transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(58,42,30,.22); }
.card.hide { display: none; }
.card__media { position: relative; display: block; aspect-ratio: 3/2; overflow: hidden; background: var(--forest); width: 100%; padding: 0; margin: 0; border: 0; border-radius: inherit; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__breed {
  position: absolute; left: .7rem; top: .7rem; font-family: var(--font-label);
  font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cream); background: color-mix(in srgb, var(--soil) 78%, transparent);
  padding: .25rem .6rem; border-radius: 2px; backdrop-filter: blur(4px);
}
.card__note {
  position: absolute; right: .7rem; top: .7rem; font-family: var(--font-display);
  font-weight: 600; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--cream); background: var(--cardinal); padding: .25rem .55rem; border-radius: 2px;
}
.card__body { padding: 1rem 1.1rem 1.3rem; }
.card__body h3 { font-size: 1.15rem; line-height: 1.15; color: var(--charcoal); }
.card__reg { display: inline-block; font-family: var(--font-body); font-weight: 400; font-size: .8rem; color: var(--bark); letter-spacing: .02em; }
.ped { margin-top: .8rem; display: grid; gap: .35rem; font-size: .86rem; }
.ped div { display: grid; grid-template-columns: 3.2rem 1fr; gap: .5rem; }
.ped dt { font-family: var(--font-display); font-weight: 600; color: var(--cardinal); font-size: .78rem; letter-spacing: .04em; padding-top: .05rem; }
.ped dd { color: var(--soil); }

/* gallery lightbox — big preview + side arrows + thumbnail rail, always-visible X */
.lightbox {
  position: fixed; inset: 0; z-index: 120; background: rgba(16,14,12,.95);
  display: grid; grid-template-rows: 1fr auto;
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
.lightbox.open { opacity: 1; pointer-events: auto; }

/* stage (the figure holds the big image + caption) */
.lightbox__stage {
  grid-row: 1; position: relative; margin: 0; min-height: 0;
  display: grid; place-items: center;
  padding: clamp(3.6rem,7vh,5rem) clamp(3.5rem,9vw,6rem) 1.6rem;
}
.lightbox__stage img {
  max-width: min(94vw, 1400px); max-height: 74vh; width: auto; height: auto;
  object-fit: contain; border-radius: 2px; box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.lightbox__cap {
  position: absolute; left: 0; right: 0; bottom: .1rem; text-align: center;
  color: var(--cream); font-family: var(--font-display); letter-spacing: .04em; font-size: 1rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}

/* X — pinned to the viewport, above everything, on every screen */
.lightbox__x {
  position: fixed; top: max(.9rem, env(safe-area-inset-top)); right: max(.9rem, env(safe-area-inset-right));
  z-index: 4; width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--cream); font-size: 2rem; line-height: 1; border-radius: 50%;
  background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: .95; transition: background .25s var(--ease), opacity .25s var(--ease); cursor: pointer;
}
.lightbox__x:hover { opacity: 1; background: rgba(0,0,0,.72); }

/* side arrows */
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 52px; height: 52px; display: grid; place-items: center;
  color: var(--cream); font-size: 2.3rem; line-height: 1; border-radius: 50%;
  background: rgba(0,0,0,.42); opacity: .9; cursor: pointer;
  transition: background .25s var(--ease), opacity .25s var(--ease);
}
.lightbox__nav:hover { background: rgba(0,0,0,.68); opacity: 1; }
.lightbox__prev { left: clamp(.5rem, 2.5vw, 1.6rem); }
.lightbox__next { right: clamp(.5rem, 2.5vw, 1.6rem); }
.lightbox.is-single .lightbox__nav, .lightbox.is-single .lightbox__rail { display: none; }

/* thumbnail rail beneath */
.lightbox__rail {
  grid-row: 2; display: flex; gap: .5rem; overflow-x: auto; scroll-behavior: smooth;
  padding: .7rem clamp(1rem,4vw,2rem) max(1rem, env(safe-area-inset-bottom));
  justify-content: safe center; -webkit-overflow-scrolling: touch;
}
.lightbox__rail::-webkit-scrollbar { height: 6px; }
.lightbox__rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); border-radius: 3px; }
.lightbox__thumb {
  flex: 0 0 auto; width: 70px; height: 52px; padding: 0; border: 0; border-radius: 3px; overflow: hidden;
  background: var(--forest); cursor: pointer; opacity: .5;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: opacity .25s var(--ease), outline-color .25s var(--ease);
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__thumb:hover { opacity: .85; }
.lightbox__thumb.is-active { opacity: 1; outline-color: var(--wheat); }

@media (max-width: 640px){
  .lightbox__stage { padding: 3.4rem 1rem 1.2rem; }
  .lightbox__stage img { max-height: 62vh; }
  .lightbox__nav { width: 44px; height: 44px; font-size: 2rem; background: rgba(0,0,0,.52); }
  .lightbox__thumb { width: 60px; height: 46px; }
}

/* sub-page footer + real contact */
.subfoot { background: var(--green-deep); color: var(--cream); padding: clamp(4rem,10vh,7rem) var(--gutter); }
.subfoot .eyebrow { color: var(--cream-deep); }
.subfoot h2 { color: var(--cream); }
.contact-real { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; margin-top: 2.2rem; max-width: 60rem; }
.contact-real b { font-family: var(--font-display); color: var(--cream); }
.contact-real a { color: var(--cream-deep); border-bottom: 1px solid rgba(244,236,221,.3); }
.contact-real a:hover { color: #fff; }

.sale-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; padding-bottom: 5rem; }
.sale-block p { margin-top: 1rem; max-width: 42ch; }
.sale-block .home__actions { margin-top: 1.6rem; }
.btn--dark { border-color: var(--soil); color: var(--soil); }
.btn--dark:hover { background: var(--soil); color: var(--cream); }
.subpage .catalogs { margin-top: 1.6rem; }
.subpage .catalog__spine b, .subpage .catalog__spine span { color: var(--cream); }

@media (max-width: 760px) {
  .contact-real { grid-template-columns: 1fr; }
  .sale-cols { grid-template-columns: 1fr; gap: 2rem; }
}

html.flat .reveal { opacity: 1 !important; transform: none !important; }

/* their real roadside sign, pinned like a snapshot in the dusk footer */
.home__sign {
  position: absolute; right: var(--gutter); top: 12%; z-index: 3;
  width: min(34%, 30rem); --tilt: -2.5deg; padding: 12px 12px 12px;
}
.home__sign img { aspect-ratio: 3/2; object-fit: cover; }
.home__sign figcaption {
  font-family: var(--font-label); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--bark); text-align: center; padding-top: 8px;
}
@media (max-width: 900px) { .home__sign { position: relative; right: auto; top: auto; width: min(80%, 22rem); margin-top: 2rem; } }

/* ============================================================
   REGISTERED CATTLE — what they actually produce (their own words)
   ============================================================ */
.registered { padding-block: clamp(3.5rem,9vh,6.5rem); background: var(--cream); }
.registered__cols { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.5rem,4vw,3.2rem); margin-top: 2.8rem; }
.reg-col { border-top: 2px solid var(--green); padding-top: 1.1rem; }
.reg-col h3 { font-family: var(--font-label); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; font-size: .82rem; color: var(--green-deep); }
.reg-col p { margin-top: .6rem; color: var(--soil); font-size: clamp(1.05rem,1.6vw,1.25rem); font-family: var(--font-display); line-height: 1.35; }
@media (max-width: 760px){ .registered__cols { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ============================================================
   AROUND THE FARM — photography, just to appreciate it
   ============================================================ */
.mosaic { padding-block: clamp(3rem,8vh,6rem); background: var(--cream); }
.mosaic__grid { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 21vh; gap: 8px; margin-top: 2.2rem; }
.mosaic figure { position: relative; overflow: hidden; background: var(--forest); border-radius: 2px; }
.mosaic figure .scene__photo { position: absolute; inset: 0; transition: transform 1s var(--ease); }
.mosaic figure:hover .scene__photo { transform: scale(1.06); }
.mosaic .tall { grid-row: span 2; }
.mosaic .wide { grid-column: span 2; }
.mosaic figcaption {
  position: absolute; inset: 0; display: grid; align-content: end; padding: .9rem;
  color: var(--cream); background: linear-gradient(to top, rgba(20,25,18,.6), transparent 55%);
  opacity: 0; transition: opacity .4s var(--ease);
  font-family: var(--font-label); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
}
.mosaic figure:hover figcaption { opacity: 1; }
@media (max-width: 760px){ .mosaic__grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 26vh; } .mosaic .wide { grid-column: span 2; } }

/* ============================================================
   THE CENTURY MOMENT — verified 100+ years, stated plainly
   ============================================================ */
.century { padding-block: clamp(5rem,15vh,11rem); text-align: center; background: var(--cream); }
.century__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(4.5rem,15vw,12rem); line-height: .82; color: var(--green); }
.century__num-sub {
  display: block; font-family: var(--font-label); font-weight: 700;
  font-size: clamp(.72rem,1.5vw,.95rem); letter-spacing: .42em; text-transform: uppercase;
  color: var(--wheat-deep); margin-top: 1.4rem; padding-left: .42em; line-height: 1;
}
.century h2 { font-size: clamp(1.9rem,4.8vw,3.6rem); margin-top: .5rem; }
.century p { max-width: 46ch; margin: 1.5rem auto 0; color: var(--soil); font-size: clamp(1.02rem,1.7vw,1.2rem); line-height: 1.7; }
.century__tag { margin-top: 2.2rem; font-family: var(--font-label); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: .78rem; color: var(--green-deep); }
.century__tag b { color: var(--red); }

/* screenshot/debug only: cap svh sections so full-page capture doesn't explode */

html.flat .profile, html.flat .vista, html.flat .loader { display: none !important; }

/* fix: figures with a solid bg must isolate so the .scene (z-index:-1) paints
   ABOVE the figure's own background, not behind it */
.mosaic figure, .reel figure, .work__grid figure, .plate { isolation: isolate; }




/* ============================================================
   LOGO BANNER — full-width on load, docks into the top-left on scroll.
   The logo already says "Hudspeth Farms", so no repeated wordmark.
   ============================================================ */
.brandbanner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55; line-height: 0;
  display: flex; justify-content: center;      /* centered like a banner on wide screens */
  transition: justify-content .1s;
  pointer-events: none;
}
/* scenic logo: native width ~1000px. On desktop cap at 40vw (never past ~40% /
   never upscale past quality); on narrow screens it keeps full width. */
.brandbanner img {
  width: min(40vw, 1000px); height: auto; display: block; pointer-events: auto;
  box-shadow: 0 2px 24px rgba(20,20,12,.2);
  transition: width .8s var(--ease), box-shadow .6s var(--ease), border-radius .6s var(--ease);
}
@media (max-width: 900px){ .brandbanner img { width: 100vw; } }   /* narrow → full width */

/* docked: flush into the top-left corner, filling it more */
body.scrolled .brandbanner,
body.subpage .brandbanner { justify-content: flex-start; }
body.scrolled .brandbanner img,
body.subpage .brandbanner img {
  width: clamp(210px, 21vw, 290px);
  border-bottom-right-radius: 4px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(20,25,15,.32);
}
@media (max-width: 900px){
  body.scrolled .brandbanner img, body.subpage .brandbanner img { width: 168px; }
}

/* nav links are visible from the start (mock shows the full header on load) */
.nav__toggle { z-index: 60; position: relative; }

html.flat .hero, html.flat .plate, html.flat .pasture, html.flat .band { height:560px !important; min-height:560px !important; }
html.flat .mosaic__grid { grid-auto-rows:150px !important; }

/* contact page columns (light bg) */
.contact-cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; margin-top: 1.8rem; font-size: .95rem; color: var(--soil); }
.contact-cols b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); display: inline-block; margin-bottom: .25rem; }
.contact-cols a { color: var(--green-deep); border-bottom: 1px solid rgba(60,82,50,.3); }
.contact-cols a:hover { color: var(--green); }
@media (max-width: 760px){ .contact-cols { grid-template-columns: 1fr; } }

/* ============================================================
   COMMERCE LAYER — merchandising on top of the experience
   ============================================================ */

/* nav: CATTLE FOR SALE is the strongest item */
.nav__sale { color: var(--red) !important; font-weight: 700 !important; }
.nav__sale::after { background: var(--red) !important; }
body.menu-open .nav__sale { color: #e8a99b !important; }

/* hero commercial subline + persistent private-treaty utility */
.hero__sub {
  font-family: var(--font-body) !important; font-style: normal !important;
  font-size: clamp(1rem,1.5vw,1.18rem) !important; line-height: 1.55 !important;
  max-width: 46ch; color: var(--cream) !important; opacity: .96;
}
.hero__actions { margin-top: 2rem; display: flex; gap: .7rem; flex-wrap: wrap; }
.btn--ghost { border-color: rgba(246,239,226,.5); }
.btn--ghost:hover { background: rgba(246,239,226,.12); color: var(--cream); border-color: var(--cream); }
.hero__util {
  margin-top: 1.4rem; display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-label); font-weight: 600; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cream-deep);
}
.hero__util span { color: var(--green-soft); transition: transform .4s var(--ease); }
.hero__util:hover span { transform: translateX(5px); }

/* CATTLE AVAILABLE NOW — the rail */
.availnow { padding-block: clamp(3.5rem,9vh,6rem); background: var(--cream); }
.availnow__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.cattle-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 260px);
  gap: 1.2rem; margin-top: 2.2rem; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; touch-action: pan-x;
  scroll-snap-type: x mandatory; padding-bottom: 1rem;
}
.cattle-rail::-webkit-scrollbar { height: 6px; }
.cattle-rail::-webkit-scrollbar-thumb { background: var(--green-soft); border-radius: 3px; }
.cattle-card {
  scroll-snap-align: start; background: #fff; border-radius: 3px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(38,49,31,.12); transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  display: flex; flex-direction: column;
}
.cattle-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(38,49,31,.2); }
/* 3:2 matches the registry photos — cattle heads sit on the sides, so the crop stays vertical and never cuts a head */
.cattle-card__photo { aspect-ratio: 3/2; background: var(--forest) center/cover; }
.cattle-card__body { padding: .9rem 1rem 1.1rem; }
.cattle-card__body h3 { font-size: 1.15rem; line-height: 1.1; color: var(--charcoal); }
.cattle-card__meta { font-family: var(--font-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soil); margin-top: .35rem; }
.cattle-card__meta b { color: var(--green-deep); }
.cattle-card__reg { font-size: .82rem; color: var(--bark); margin-top: .1rem; }
.cattle-card .link-gold { margin-top: .8rem; font-size: .68rem; }
.availnow__talk { margin-top: 1.6rem; font-size: 1.05rem; color: var(--soil); }
.availnow__talk a { color: var(--green-deep); font-weight: 600; border-bottom: 1px solid rgba(60,82,50,.35); }
.availnow__talk a:hover { color: var(--green); }

/* WHAT WE RAISE — the program */
.whatweraise { padding-block: clamp(3.5rem,9vh,6rem); background: var(--cream-deep); }
.raise-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,3vw,2rem); margin-top: 2.4rem; }
.raise-card { background: #fff; border-radius: 3px; padding: 1.6rem 1.5rem 1.4rem; border-top: 3px solid var(--green); box-shadow: 0 6px 20px rgba(38,49,31,.08); }
.raise-card h3 { font-size: clamp(1.5rem,2.6vw,2rem); color: var(--charcoal); }
.raise-card p { margin-top: .5rem; color: var(--soil); font-size: .96rem; }
.raise-links { display: flex; gap: 1.1rem; margin-top: 1.1rem; }
.raise-links a { font-family: var(--font-label); font-weight: 600; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--green-deep); border-bottom: 1px solid rgba(60,82,50,.3); padding-bottom: 2px; }
.raise-links a:hover { color: var(--red); border-color: var(--red); }
.raise-strip { margin-top: 2rem; text-align: center; font-family: var(--font-label); font-size: .82rem; letter-spacing: .06em; color: var(--soil); }
.raise-strip b { color: var(--green-deep); }
@media (max-width: 760px){ .raise-grid { grid-template-columns: 1fr; } }

/* THE GATHERING — hard-sell buttons */
.gathering__sell { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }
.gathering .gathering__date b { color: var(--green-soft); }

/* MOBILE STICKY CTA — commerce without ecommerce */
.mobilecta { display: none; }
@media (max-width: 820px){
  .mobilecta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 57; display: grid; grid-template-columns: 1fr 1fr;
    box-shadow: 0 -6px 20px rgba(0,0,0,.22);
  }
  .mobilecta a {
    text-align: center; padding: 1rem .5rem calc(1rem + env(safe-area-inset-bottom));
    font-family: var(--font-label); font-weight: 700;
    font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  }
  .mobilecta__cattle { background: var(--red); color: var(--cream); }
  .mobilecta__call { background: var(--green-deep); color: var(--cream); border-left: 1px solid rgba(246,239,226,.14); }
  .audio-toggle { display: none; }           /* free the bottom-right for the sticky bar */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }  /* clear the sticky bar + iOS home indicator */
}

/* ============================================================
   HERO MOCK — dark cinematic + gold, HF monogram locked top-left
   ============================================================ */
:root { --gold: #c9a25e; --gold-soft: #ddbe86; --gold-deep: #9c7838; }

/* corner logo lockup */
.brand { display: flex; align-items: center; gap: .7rem; }
.brand__mark { width: 38px; height: 36px; flex: none; }
.brand__mark rect { fill: var(--gold); transition: fill .5s var(--ease); }
.brand__word { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: .05em; text-transform: uppercase; line-height: .95; color: var(--gold); transition: color .5s var(--ease); }
.brand__word small { display: block; font-family: var(--font-label); font-weight: 600; font-size: .52rem; letter-spacing: .26em; opacity: .8; margin-top: .38rem; color: var(--cream); }
.nav.solid .brand__word { color: var(--green-deep); }
.nav.solid .brand__word small { color: var(--bark); }
.nav.solid .brand__mark rect { fill: var(--green); }
.nav__right { display: flex; align-items: center; gap: 1.6rem; }

/* desktop shows full nav; hamburger only on mobile */
.nav__toggle { display: none; }
@media (max-width: 960px){
  .nav__right .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  body.menu-open .nav__links { display: flex; }
  .brand__word { font-size: 1.2rem; }
}

/* hero */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13,15,10,.9) 0%, rgba(13,15,10,.62) 34%, rgba(13,15,10,.15) 58%, transparent 78%),
    linear-gradient(to top, rgba(11,13,8,.8) 0%, rgba(11,13,8,.18) 30%, transparent 55%),
    linear-gradient(to bottom, rgba(11,13,8,.55) 0%, transparent 20%);
}
.hero__grid { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding-top: 6rem; padding-bottom: 2rem; }
.hero__content { max-width: 640px; }
.hero__eyebrow { font-family: var(--font-label); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; font-size: clamp(.68rem,1.4vw,.78rem); color: var(--gold); }
.hero__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .012em; color: var(--cream); font-size: clamp(3rem,7vw,6rem); line-height: .98; margin-top: 1rem; text-shadow: 0 2px 40px rgba(0,0,0,.5); }
.hero__rule { display: block; width: 82px; height: 2px; background: var(--gold); margin: 1.5rem 0; opacity: .85; }
.hero__breeds { font-family: var(--font-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: clamp(.8rem,1.5vw,.92rem); color: var(--cream); }
.hero__breeds i { color: var(--gold); font-style: normal; margin: 0 .45rem; }
.hero__body { margin-top: 1.1rem; color: var(--cream); opacity: .92; max-width: 46ch; font-size: clamp(.98rem,1.4vw,1.1rem); line-height: 1.6; }
.hero__actions { margin-top: 1.9rem; display: flex; gap: .8rem; flex-wrap: wrap; }
.btn--gold { background: var(--gold); border-color: var(--gold); color: #211a0d; }
.btn--gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: #211a0d; }

.hero__features { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; max-width: 940px; }
.feat { display: flex; gap: .7rem; align-items: flex-start; border-left: 1px solid rgba(201,162,94,.32); padding-left: 1rem; }
.feat:first-child { border-left: 0; padding-left: 0; }
.feat svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; margin-top: 2px; }
.feat b { display: block; font-family: var(--font-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .66rem; color: var(--gold); }
.feat span { display: block; color: var(--cream); opacity: .84; font-size: .8rem; line-height: 1.35; margin-top: .28rem; }

.hero__bar { position: relative; z-index: 2; text-align: center; padding: 1rem 1.5rem 1.15rem; border-top: 1px solid rgba(201,162,94,.3); background: linear-gradient(to top, rgba(9,11,7,.9), rgba(9,11,7,.35)); }
.hero__bar-main { font-family: var(--font-label); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; font-size: clamp(.72rem,1.5vw,.86rem); color: var(--gold); }
.hero__bar-main i { font-style: normal; color: var(--gold-soft); margin: 0 .55rem; }
.hero__bar-sub { display: block; font-family: var(--font-label); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; font-size: clamp(.6rem,1.2vw,.7rem); color: var(--cream); opacity: .8; margin-top: .4rem; }

@media (max-width: 960px){ .hero__features { grid-template-columns: repeat(2,1fr); gap: 1.1rem 1.4rem; } .feat:nth-child(3){ border-left:0; padding-left:0 } }
@media (max-width: 520px){ .hero__features { margin-top: 2rem; } .feat span { font-size: .74rem; } }

/* ensure the corner logo is high-contrast on light (solid) headers */
.nav.solid .brand__word { color: var(--green-deep) !important; }
.nav.solid .brand__word small { color: var(--bark) !important; }
.nav.solid .brand__mark rect { fill: var(--green) !important; }

/* ============================================================
   HERO refinements — bigger editorial type, mobile art direction
   ============================================================ */
.hero__content { min-width: 0; max-width: clamp(340px, 52vw, 760px); }  /* left column; animal reads on the right */
.hero__title { font-size: clamp(2.5rem, 5vw, 4.9rem); line-height: .97; }  /* uppercase runs wider — size for a clean 2-line break in the right column */
.hero__media { object-position: 36% 42%; }   /* bull left-of-centre, face in the left third, sky open up top */
/* darken the left hard so type always sits on shadow; animal stays clear on the right */
.hero__scrim {
  background:
    linear-gradient(90deg, rgba(11,13,8,.93) 0%, rgba(11,13,8,.78) 30%, rgba(11,13,8,.34) 52%, rgba(11,13,8,.05) 72%, transparent 88%),
    linear-gradient(to top, rgba(9,11,7,.85) 0%, rgba(9,11,7,.15) 32%, transparent 55%),
    linear-gradient(to bottom, rgba(9,11,7,.5) 0%, transparent 18%);
}

@media (max-width: 760px){
  /* mobile: animal up top, headline + actions below on dark */
  .hero__media { object-position: 60% 26%; }
  .hero__scrim {
    background: linear-gradient(to bottom, rgba(11,13,8,.15) 0%, rgba(11,13,8,.3) 40%, rgba(11,13,8,.9) 60%, #0e1109 100%);
  }
  .hero__grid { align-items: flex-end; padding-top: 46svh; padding-bottom: 1.4rem; }
  .hero__content { max-width: 100%; }
  .hero__title { font-size: clamp(2.6rem, 12vw, 3.8rem); margin-top: .6rem; }
  .hero__body { font-size: .95rem; }
  .hero__features { display: none; }        /* keep the mobile hero clean (point 25) */
  .hero__rule { margin: 1.1rem 0; }
}

/* hard mobile overflow guards for the hero */
@media (max-width: 760px){
  html, body { overflow-x: hidden; }
  .hero__grid { padding-inline: 1.25rem; }
  .hero__content { width: 100%; max-width: 100%; }
  .hero__eyebrow, .hero__breeds, .hero__body, .hero__title { max-width: 100%; overflow-wrap: anywhere; }
  .hero__breeds { letter-spacing: .08em; }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 46%; justify-content: center; }
}

/* stop any section from widening the page on mobile (rails scroll internally) */
@media (max-width: 760px){
  html, body { overflow-x: hidden; max-width: 100%; }
  main > section, .availnow, .hero { max-width: 100vw; overflow-x: clip; }
  .availnow .wrap { max-width: 100%; }
  .cattle-rail { width: 100%; }
}

/* ============================================================
   INDIVIDUAL ANIMAL PAGES  /cattle/<slug>.html
   ============================================================ */
.animal-page { padding-top: 5.5rem; padding-bottom: 4rem; }
.crumb { font-family: var(--font-label); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bark); margin-bottom: 2rem; }
.crumb a { color: var(--green-deep); } .crumb a:hover { color: var(--red); }
.crumb span { color: var(--sage); margin: 0 .3rem; }

.animal-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
.animal-photo { position: relative; background: var(--cream-deep); border-radius: 3px; overflow: hidden; box-shadow: 0 16px 40px -14px rgba(38,49,31,.35); display: grid; place-items: center; }
.animal-photo img { width: 100%; height: auto; display: block; }
.animal-photo img[data-full] { cursor: pointer; }
.animal-photo__hint {
  position: absolute; right: .8rem; bottom: .8rem; z-index: 2; pointer-events: none;
  font-family: var(--font-label); font-weight: 600; font-size: .62rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cream); background: color-mix(in srgb, var(--green-deep) 78%, transparent);
  padding: .32rem .6rem; border-radius: 2px; opacity: .85; transition: opacity .3s var(--ease);
}
.animal-photo:hover .animal-photo__hint { opacity: 1; }
.animal-photo figcaption { position: absolute; left: .8rem; top: .8rem; font-family: var(--font-label); font-weight: 600; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); background: color-mix(in srgb, var(--green-deep) 82%, transparent); padding: .3rem .7rem; border-radius: 2px; }
.animal-info { padding-top: .5rem; }
.animal-reg { font-family: var(--font-label); letter-spacing: .04em; color: var(--bark); margin-top: .4rem; }
.animal-info .spec { margin-top: 1.6rem; }
.animal-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.8rem; }
.animal-page .btn { color: var(--cream); }
.animal-page .btn--dark { border-color: var(--soil); color: var(--soil); }
.animal-page .btn--dark:hover { background: var(--soil); color: var(--cream); }
.animal-page .btn--line { border-color: var(--green); color: var(--green-deep); }
.animal-page .btn--line:hover { background: var(--green); color: var(--cream); }

.ped-tree { margin-top: clamp(3rem,7vh,5rem); border-top: 1px solid rgba(60,82,50,.2); padding-top: 2.4rem; }
.ped-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1.2rem; margin-top: 1.4rem; align-items: center; }
.ped-node { background: #fff; border-left: 3px solid var(--green); border-radius: 2px; padding: 1rem 1.2rem; box-shadow: 0 6px 18px rgba(38,49,31,.08); }
.ped-node small { font-family: var(--font-label); font-weight: 600; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: .3rem; }
.ped-node b { font-family: var(--font-display); font-size: 1.15rem; color: var(--charcoal); }
.ped-self { border-left-color: var(--gold); }
.ped-self span { display: block; font-size: .82rem; color: var(--bark); margin-top: .2rem; }
.ped-col { display: grid; gap: 1rem; }

.animal-cta { margin-top: clamp(3rem,8vh,5.5rem); background: var(--green-deep); color: var(--cream); border-radius: 4px; padding: clamp(2rem,5vw,3.5rem); }
.animal-cta h2 { color: var(--cream); }
.animal-cta .lede { color: var(--cream-deep); margin-top: .6rem; }
.animal-cta .btn--dark { border-color: var(--cream); color: var(--cream); }
.animal-cta .btn--dark:hover { background: var(--cream); color: var(--green-deep); }
.animal-cta .btn--line { border-color: rgba(246,239,226,.5); color: var(--cream); }

@media (max-width: 820px){
  .animal-hero { grid-template-columns: 1fr; }
  .ped-grid { grid-template-columns: 1fr; }
}

/* Find Cattle — self-sort selector */
.find-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.4rem; }
.find-opt { display: flex; align-items: center; gap: 1rem; background: #fff; border-radius: 3px; padding: 1.5rem 1.8rem; box-shadow: 0 8px 24px rgba(38,49,31,.1); border-left: 3px solid var(--green); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.find-opt:hover { transform: translateY(-4px); box-shadow: 0 20px 42px rgba(38,49,31,.18); border-left-color: var(--red); }
.find-opt b { font-family: var(--font-display); font-size: clamp(1.8rem,3vw,2.6rem); color: var(--charcoal); line-height: 1; }
.find-opt span { flex: 1; color: var(--soil); font-size: .95rem; }
.find-opt i.arrow { font-style: normal; color: var(--green-deep); font-size: 1.4rem; }
.find-breeds { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.6rem; }
.find-breeds a { font-family: var(--font-label); font-weight: 600; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green-deep); border: 1px solid rgba(60,82,50,.35); border-radius: 40px; padding: .5rem 1.1rem; transition: all .3s var(--ease); }
.find-breeds a:hover { background: var(--green); color: var(--cream); border-color: var(--green); }
.find-breeds__also { font-family: var(--font-label); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bark); margin-left: .5rem; }
@media (max-width: 620px){ .find-split { grid-template-columns: 1fr; } }

/* ============================================================
   CREST HEADER + hero to the new crest mock
   ============================================================ */
.brand__crest { width: 58px; height: auto; flex: none; display: block; }
.brand__word { color: var(--green-deep) !important; }   /* dark green always */
.brand__word small { color: var(--bark) !important; }
.nav { color: var(--ink); }                              /* dark header text (reads on light sky + cream) */
.nav .nav__sale { color: var(--red) !important; }
@media (max-width: 960px){ .brand__crest { width: 46px; } }

/* scrim: keep the top light so the dark header reads on the sky;
   shadow the lower-left for the cream headline; base the bottom bar */
.hero__scrim {
  background:
    radial-gradient(140% 108% at 20% 74%, rgba(14,18,10,.92) 0%, rgba(14,18,10,.55) 36%, rgba(14,18,10,.12) 60%, transparent 76%),
    linear-gradient(to bottom, rgba(246,239,226,.30) 0%, transparent 14%),
    linear-gradient(to top, rgba(11,14,8,.45) 0%, transparent 24%);
}
.hero__eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,.35); }

/* feature row = full-width dark-green bar at the bottom of the hero */
.hero__features-bar { position: relative; z-index: 2; background: var(--green-deep); padding: 1.05rem var(--gutter); border-top: 1px solid rgba(201,162,94,.22); }

/* catalog ledger line — no icons, just registered-record typesetting */
.hero__ledger { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem; max-width: 78rem; margin: 0 auto; }
.ledger-col { text-align: center; border-left: 1px solid rgba(201,162,94,.26); padding: .1rem 1rem; }
.ledger-col:first-child { border-left: 0; }
.ledger-col b {
  display: block; font-family: var(--font-label); font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; font-size: .72rem;
  color: var(--green-soft);
}
.ledger-col span {
  display: block; margin-top: .34rem; font-family: var(--font-display);
  font-size: clamp(.92rem,1.5vw,1.08rem); color: var(--cream); letter-spacing: .01em;
}
@media (max-width: 720px){
  .hero__ledger { grid-template-columns: 1fr; gap: .85rem; }
  .ledger-col { border-left: 0; border-top: 1px solid rgba(201,162,94,.16); padding-top: .8rem; }
  .ledger-col:first-child { border-top: 0; padding-top: .1rem; }
}

/* ============================================================
   HERO — stack content ABOVE the cow (not covering her)
   ============================================================ */
/* header + content sit on a top-weighted shadow → cream reads; cow stays clear below */
.nav { color: var(--cream); }
.nav.solid { color: var(--ink); }
.brand__word { color: var(--cream) !important; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.brand__word small { color: var(--cream-deep) !important; }
.nav.solid .brand__word { color: var(--green-deep) !important; text-shadow: none; }
.nav.solid .brand__word small { color: var(--bark) !important; }

.hero__grid { align-items: flex-start; padding-top: clamp(5rem, 10vh, 7rem); padding-bottom: 1rem; }
.hero__content { max-width: min(680px, 62vw); }
.hero__media { object-position: center 88%; }   /* bias the animal low in the frame */
.hero__scrim {
  background:
    linear-gradient(to bottom, rgba(12,15,9,.78) 0%, rgba(12,15,9,.55) 26%, rgba(12,15,9,.16) 48%, transparent 66%),
    linear-gradient(to top, rgba(9,11,7,.4) 0%, transparent 20%);
}
.hero__title { text-shadow: 0 2px 30px rgba(0,0,0,.5); }

/* ============================================================
   HEADER — centered logo lockup at start → docks left on scroll,
   nav menu appears; hamburger present from the start
   ============================================================ */
.nav { color: var(--ink); }
.brand {
  position: absolute; top: 50%; left: var(--gutter); transform: translateY(-50%);
  display: flex; flex-direction: row; align-items: center; gap: .7rem; text-align: left;
}
.brand__crest { width: 74px; height: auto; transition: width .5s var(--ease); }
.brand__word { color: var(--green-deep) !important; text-align: center; }
.brand__word small { display: block; text-align: center; }
.nav__right { position: absolute; top: 1.5rem; right: var(--gutter); display: flex; align-items: center; gap: 1.5rem; }
.nav__links, .nav__cta { display: none; }         /* hidden at start */
.nav__toggle { display: inline-flex; }            /* hamburger from the start */

/* docked state: scrolled OR any sub-page */
body.scrolled .brand, body.subpage .brand {
  top: 50%; left: var(--gutter); transform: translateY(-50%);
  flex-direction: row; align-items: center; gap: .7rem; text-align: left;
}
body.scrolled .brand__crest, body.subpage .brand__crest { width: 46px; }
body.scrolled .brand__word, body.subpage .brand__word,
body.scrolled .brand__word small, body.subpage .brand__word small { text-align: left; }
body.scrolled .nav__links, body.subpage .nav__links { display: flex; }
body.scrolled .nav__cta, body.subpage .nav__cta { display: inline-flex; }
body.scrolled .nav__toggle { display: none; }     /* desktop: nav shows → hide hamburger */
@media (max-width: 960px){
  body.scrolled .nav__links, body.subpage .nav__links,
  body.scrolled .nav__cta, body.subpage .nav__cta { display: none; }
  body.scrolled .nav__toggle, body.subpage .nav__toggle { display: inline-flex; }
  body.menu-open .nav__links { display: flex; }
}

/* ============================================================
   HERO — centered content, sits above the animal
   ============================================================ */
.hero__grid { align-items: flex-start; justify-content: center; text-align: center;
  padding-top: clamp(9rem, 17vh, 13rem); padding-bottom: 1rem; }
.hero__content { max-width: 840px; margin: 0 auto; text-align: center; }
.hero__eyebrow, .hero__breeds { text-align: center; }
.hero__rule { margin: 1.4rem auto; }
.hero__body { margin-left: auto; margin-right: auto; }
.hero__actions { justify-content: center; }
.hero__media { object-position: center 92%; }     /* animal as low in frame as the photo allows */
.hero__scrim {
  background: linear-gradient(to bottom,
    transparent 0%, transparent 13%,
    rgba(12,15,9,.32) 19%, rgba(12,15,9,.66) 34%, rgba(12,15,9,.55) 52%,
    rgba(12,15,9,.24) 66%, transparent 82%);
}

/* hero header/logo legibility refinements */
.brand__crest { width: 90px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
body.scrolled .brand__crest, body.subpage .brand__crest { width: 48px; filter: none; }
.brand__word { font-size: 1.4rem; letter-spacing: .06em; }
body.scrolled .brand__word, body.subpage .brand__word { font-size: 1.4rem; }
.brand__word, .brand__word small { color: var(--cream) !important; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
body.subpage .brand__word, body.scrolled .brand__word { color: var(--green-deep) !important; text-shadow: none; }
body.subpage .brand__word small, body.scrolled .brand__word small { color: var(--bark) !important; }
.nav { color: var(--cream); }
.nav.solid, body.subpage .nav { color: var(--ink); }
.nav__toggle { font-size: 1.7rem; }

.hero__grid { padding-top: clamp(11rem, 22vh, 16rem); }
.hero__media { object-position: center 30%; }
.hero__scrim {
  background: linear-gradient(to bottom,
    rgba(12,15,9,.34) 0%, rgba(12,15,9,.14) 12%,
    rgba(12,15,9,.4) 30%, rgba(12,15,9,.66) 46%, rgba(12,15,9,.5) 62%,
    rgba(12,15,9,.2) 76%, transparent 90%);
}

/* ============================================================
   HERO — work around 64R: copy on the OPEN side (desktop),
   under the animal (mobile). Animal stands left; sky is open.
   ============================================================ */
@media (min-width: 761px){
  .hero__grid { justify-content: flex-end; align-items: center; text-align: right;
    padding-top: 5rem; padding-bottom: 1rem; }
  .hero__content { text-align: right; margin: 0; max-width: 600px; margin-right: clamp(1rem, 5vw, 5rem); }
  .hero__eyebrow, .hero__breeds { text-align: right; }
  .hero__actions { justify-content: flex-end; }
  .hero__scrim {
    /* shade hugs the right-side text only — fades into the bright photo, no middle-of-page blob */
    background:
      radial-gradient(52% 66% at 74% 50%, rgba(6,10,4,.76) 0%, rgba(6,10,4,.56) 34%, rgba(6,10,4,.3) 60%, rgba(6,10,4,.1) 78%, transparent 90%);
  }
}
@media (max-width: 760px){
  /* animal up top, copy stacked UNDER it on dark */
  .hero__grid { align-items: flex-end; justify-content: center; text-align: center;
    padding-top: 44svh; padding-bottom: 1.3rem; }
  .hero__content { text-align: center; max-width: 100%; }
  .hero__eyebrow, .hero__breeds { text-align: center; }
  .hero__rule { margin: 1rem auto; }
  .hero__actions { justify-content: center; }
  .hero__media { object-position: 20% 42%; }   /* portrait: KEEP THE HEAD IN FRAME — anchor on the face/front, never crop the head */
  .hero__scrim {
    background: linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(12,15,9,.82) 60%, #0e1109 100%);
  }
}

/* fix: docked nav must collapse to the hamburger until there's real room (was overlapping the logo) */
@media (max-width: 1180px){
  body.scrolled .nav__links, body.subpage .nav__links,
  body.scrolled .nav__cta, body.subpage .nav__cta { display: none; }
  body.scrolled .nav__toggle, body.subpage .nav__toggle { display: inline-flex; }
  body.menu-open .nav__links { display: flex; }
}

/* TOP LOGO — bigger + an embossed radial backing so it reads as a branded seal */
.brand { z-index: 2; }
.brand__crest { width: 132px; filter: drop-shadow(0 3px 12px rgba(0,0,0,.5)); }
.brand__word { font-size: 1.75rem; }
.brand::before {
  content: ""; position: absolute; inset: -50px -120px -34px; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 62% at 50% 40%, rgba(9,12,7,.62) 0%, rgba(9,12,7,.34) 46%, transparent 74%);
}
body.scrolled .brand::before, body.subpage .brand::before { display: none; }
body.scrolled .brand__crest, body.subpage .brand__crest { width: 48px; filter: none; }
body.scrolled .brand__word, body.subpage .brand__word { font-size: 1.4rem; }

/* LOGO — soft WHITE cloud behind the lockup so the crest pops (not a dark shadow) */
.brand::before {
  content: ""; position: absolute; inset: -58px -140px -44px; z-index: -1; pointer-events: none;
  background: radial-gradient(56% 60% at 50% 42%,
      rgba(250,248,242,.94) 0%, rgba(250,248,242,.62) 34%, rgba(250,248,242,.22) 58%, transparent 76%);
  filter: blur(3px);
}
body.scrolled .brand::before, body.subpage .brand::before { display: none; }
/* wordmark reads dark-green on the white cloud (and on cream sub-pages) */
.brand__word, .brand__word small { color: var(--green-deep) !important; text-shadow: none; }
.brand__word small { color: var(--bark) !important; }
.brand__crest { filter: drop-shadow(0 2px 6px rgba(38,49,31,.35)); }
body.scrolled .brand__crest, body.subpage .brand__crest { filter: none; }

/* LOGO — a soft ROW OF CLOUDS behind the whole lockup (crest + wordmark + location) */
.brand::before {
  content: ""; position: absolute; inset: -54px -150px -22px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44px 34px at 16% 40%, rgba(252,250,245,.92), transparent 72%),
    radial-gradient(62px 48px at 34% 32%, rgba(252,250,245,.96), transparent 73%),
    radial-gradient(82px 60px at 52% 36%, rgba(252,250,245,.97), transparent 73%),
    radial-gradient(60px 48px at 70% 33%, rgba(252,250,245,.95), transparent 73%),
    radial-gradient(46px 36px at 86% 42%, rgba(252,250,245,.9), transparent 72%),
    radial-gradient(150px 62px at 50% 60%, rgba(252,250,245,.94), transparent 76%),
    radial-gradient(180px 58px at 50% 82%, rgba(252,250,245,.9), transparent 80%);
  filter: blur(7px);
}
body.scrolled .brand::before, body.subpage .brand::before { display: none; }

/* soften the cloud into a cohesive bank (was reading as separate puffs) */
.brand::before {
  inset: -48px -138px -18px;
  background:
    radial-gradient(96px 66px at 28% 42%, rgba(252,250,245,.94), transparent 75%),
    radial-gradient(120px 80px at 50% 37%, rgba(252,250,245,.98), transparent 76%),
    radial-gradient(96px 66px at 73% 42%, rgba(252,250,245,.94), transparent 75%),
    radial-gradient(210px 92px at 50% 62%, rgba(252,250,245,.97), transparent 80%),
    radial-gradient(220px 70px at 50% 86%, rgba(252,250,245,.9), transparent 84%);
  filter: blur(11px);
}

/* real photographic cloud behind the branding (replaces the CSS glow) */
.brand::before { display: none !important; }
.hero__cloud {
  position: absolute; top: 108px; left: 50%; transform: translate(-50%, -50%);
  width: clamp(520px, 60vw, 1060px); height: auto; z-index: 1;
  opacity: .92; pointer-events: none; filter: blur(.5px);
}
@media (max-width: 760px){ .hero__cloud { top: 92px; width: 680px; } }

/* docked/solid nav bar must be tall enough to reach the bottom of the docked logo */
/* docked nav height set below (92px) to contain the oval crest */

/* ============================================================
   HERO — soft white header zone (fade-to-white) behind the branding
   so the green logo + location read clearly; nav text goes dark
   ============================================================ */
.hero__cloud { display: none; }
.hero__topfade {
  position: absolute; top: 0; left: 0; right: 0; height: 50%; z-index: 1; pointer-events: none;
  /* a soft wash of morning light — keeps the dark-green wordmark + nav legible without
     the old heavy cream slab; luminous, warm, fades fast so there is no hard horizon line */
  background: linear-gradient(to bottom,
    rgba(247,240,227,.55) 0%, rgba(247,240,227,.52) 26%, rgba(247,240,227,.4) 46%, rgba(247,240,227,.22) 64%, rgba(247,240,227,.08) 84%, transparent 100%);
}
/* dark header text on the white zone (and it still works on cream sub-pages) */
.nav { color: var(--ink); }
.brand__word, .brand__word small { text-shadow: none; }
.brand__word { color: var(--green-deep) !important; }
.brand__word small { color: var(--bark) !important; }
.brand__crest { filter: none; }
@media (max-width: 760px){ .hero__topfade { height: 40%; } }

/* hero feature bar: full page width + slimmer so it covers less grass */
.hero__features-bar { padding-top: .8rem; padding-bottom: .9rem; }
.hero__features { max-width: none; margin: 0; gap: 1.4rem; }
.feat svg { width: 22px; height: 22px; }
.feat span { font-size: .78rem; line-height: 1.3; }

/* sale page — full-width photo band + gallery */
.sale-band { position: relative; height: clamp(280px, 44vh, 500px); overflow: hidden; isolation: isolate; margin-block: clamp(1rem,3vh,2.4rem); }
.sale-band .scene__photo { background-size: cover; background-position: center 40%; }
.sale-band__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(14,17,10,.55), transparent 55%); }
.sale-band .plate__caption { position: absolute; left: 0; bottom: .4rem; z-index: 2; }
.reel figcaption { color: var(--cream) !important; text-shadow: 0 1px 8px rgba(0,0,0,.65); }

/* full-bleed plate caption → a branded stamp (readable on any photo) */
.plate__caption {
  display: inline-block; margin: var(--gutter); padding: .55rem 1.05rem;
  font-family: var(--font-label); font-size: clamp(.64rem,1.3vw,.74rem);
  letter-spacing: .16em; text-transform: uppercase; color: var(--cream);
  background: color-mix(in srgb, var(--green-deep) 74%, transparent);
  border: 1px solid rgba(203,168,106,.6); border-radius: 2px;
  backdrop-filter: blur(4px); box-shadow: 0 3px 16px rgba(0,0,0,.32);
  text-shadow: none;
}

/* NEW oval logo — consistent size; appears in the nav corner only once the nav docks
   (hero uses the wordmark), and docks straight into the corner — no grow/shrink or slide */
.brand__logo { width: 92px; height: auto; display: block; }
@media (max-width: 760px){ .brand__logo { width: 74px; } }
/* not shown over the hero — only when the nav docks on scroll (or on sub-pages) */
body:not(.scrolled):not(.subpage) .brand__logo { display: none; }
/* docked bar sized to hold the corner emblem comfortably (never clips) */
body.scrolled .nav, body.subpage .nav { min-height: 80px; }

/* ============================================================
   CINEMATIC ENTRANCE — scroll into the farm, bloom into light.
   Captured-scroll overlay: your scroll scrubs the film, then it
   fades into daylight and eases into the site. Once per session.
   Progressive enhancement: no-JS / reduced-motion never see it.
   ============================================================ */
.intro { display: none; }
.intro-active { overflow: hidden; }
.intro-active body { overflow: hidden; }
.intro-active .intro {
  display: block; position: fixed; inset: 0; z-index: 300;
  background: #0c120d; overflow: hidden; touch-action: none;
  will-change: opacity;
}
.intro__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 1;                 /* visible from the very start */
  animation: introZoom 26s ease-out forwards;
}
@keyframes introZoom { from { transform: scale(1.05); } to { transform: scale(1.16); } }

.intro__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 92% at 50% 42%, transparent 40%, rgba(9,14,10,.55) 100%);
}
/* pre-dawn darkness that lifts as you scroll — JS drives the opacity */
.intro__dark {
  position: absolute; inset: 0; pointer-events: none;
  background: #050906; opacity: .72;
}
/* full-frame sunrise colour wash — JS fades the whole page through the arc
   (pre-dawn indigo → amber → gold → morning). Two blended layers: a soft-light
   grade for the scene + a lighter overlay so the warm colour reads page-wide. */
.intro__sky {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: soft-light; opacity: 1;
  background: linear-gradient(180deg, #0a1730 0%, #152238 100%);
}
/* the daylight bloom the film eases into */
.intro__light {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(130% 110% at 50% 44%, #fdf6e6 0%, #f3e7c9 46%, rgba(246,239,226,.55) 100%);
}
.intro__cue {
  position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%);
  text-align: center; color: #f6efe2; z-index: 2; width: max-content; max-width: 90vw;
}
.intro__cue .k {
  font-family: var(--font-label); font-weight: 600; font-size: .72rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gold-soft);
}
.intro__cue .s {
  margin-top: .7rem; font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem); letter-spacing: .02em;
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.intro__cue .sub {
  margin-top: .45rem; font: 500 10px/1.4 'Inter', system-ui, sans-serif;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(246,239,226,.72);
}
.intro__scroller {
  width: 1px; height: 40px; margin: 1.1rem auto 0;
  background: linear-gradient(#e8c98a, transparent);
  animation: introPulse 1.8s ease-in-out infinite;
}
@keyframes introPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
/* reduced-motion + already-entered are gated in the <head> boot script — the
   overlay simply never activates, so no override rule is needed here. */

/* "Re-enter the farm" — quiet replay link beneath the hero CTAs */
.hero__replay {
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 0; cursor: pointer; padding: .2rem 0;
  font-family: 'Inter', system-ui, sans-serif; font-size: .74rem;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(246,239,226,.66);
  transition: color .3s ease;
}
.hero__replay:hover { color: #e8c98a; }

/* intro logo — centred in the middle of the frame; "scroll to enter" sits at the foot */
.intro__logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(210px, 34vw, 360px); height: auto; z-index: 2;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.5));
}

/* hero wordmark lockup — the centered crown at the top of the hero (replaces the badge over the hero) */
.hero__crown {
  position: absolute; left: 0; right: 0; top: clamp(1rem, 2.4vh, 1.6rem);
  z-index: 3; display: flex; justify-content: center; pointer-events: none;
  padding-inline: var(--gutter);
}
.hero__wordmark {
  width: min(500px, 58vw); height: auto;   /* centered header — much bigger */
  filter: drop-shadow(0 1px 3px rgba(60,45,25,.28));
}
.hero__media { filter: brightness(1.18) contrast(1.13) saturate(1.1); }   /* brighter overall, whiter Charolais, less washed out */
@media (max-width: 760px){
  .hero__crown { top: clamp(.8rem, 2vh, 1.4rem); }
  .hero__wordmark { width: min(320px, 74vw); }
}

/* --- Golden-sunset hero layout: centered content over the sky --- */
.hero__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: .85rem; }
.hero__eyebrow::before, .hero__eyebrow::after {
  content: ""; height: 1px; width: clamp(20px, 3.4vw, 46px); background: var(--gold); opacity: .6;
}
/* headline — the old elegant serif, title case, cream (reverted to the good version) */
.hero__title { font-family: 'Libre Caslon Display', Georgia, 'Times New Roman', serif; font-weight: 400; text-transform: none; font-variant: normal; letter-spacing: 0; line-height: 1.0; color: var(--cream); font-size: clamp(2.7rem, 5.8vw, 5.3rem); text-shadow: 0 1px 6px rgba(0,0,0,.3); }
@media (max-width: 760px){ .hero__title { font-size: clamp(2.2rem, 10vw, 3.4rem); } }
.hero__breeds { margin-top: 1.1rem; font-size: clamp(.72rem,1.3vw,.84rem); opacity: .95; }
.btn--gold-ghost { background: transparent; border-color: var(--gold); color: var(--gold-soft); }
.btn--gold-ghost:hover { background: var(--gold); border-color: var(--gold); color: #211a0d; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none;
}
.hero__scroll span {
  font-family: var(--font-label); font-weight: 600; font-size: .6rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--cream); opacity: .82; text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
.hero__scroll::after { content: ""; width: 1px; height: 32px; background: linear-gradient(var(--gold-soft), transparent); }
@media (max-width: 760px){ .hero__scroll { display: none; } }

/* secondary hero action — a refined text link, not a second button */
.hero__meet {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-label); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft);
  padding-bottom: 3px; border-bottom: 1px solid rgba(221,190,134,.45);
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.hero__meet:hover { color: var(--cream); border-color: var(--cream); }
.hero__meet .arrow { transition: transform .4s var(--ease); }
.hero__meet:hover .arrow { transform: translateX(5px); }
@media (max-width: 760px){ .hero__meet { display: none; } }   /* mobile: one prominent CTA */

/* ranch ledger — the old hero bar, reborn as an archival record below the clean photo edge */
.ranch-ledger {
  background: var(--cream);
  border-top: 1px solid rgba(156,120,56,.32);
  border-bottom: 1px solid rgba(156,120,56,.22);
  padding: clamp(1.1rem,2.6vw,1.7rem) var(--gutter);
}
.ranch-ledger__row {
  max-width: 78rem; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,3vw,2.6rem);
}
.ranch-ledger__col { text-align: center; position: relative; }
.ranch-ledger__col + .ranch-ledger__col::before {
  content: ""; position: absolute; left: calc(-1 * clamp(.5rem,1.5vw,1.3rem)); top: 50%;
  transform: translateY(-50%); height: 58%; width: 1px; background: rgba(156,120,56,.28);
}
.ranch-ledger__col b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1rem,1.5vw,1.2rem); letter-spacing: .01em; color: var(--green-deep);
}
.ranch-ledger__col span {
  display: block; margin-top: .34rem; font-family: var(--font-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; font-size: .64rem; color: var(--soil);
}
@media (max-width: 620px){
  .ranch-ledger__row { grid-template-columns: 1fr; gap: 0; }
  .ranch-ledger__col + .ranch-ledger__col::before { display: none; }
  .ranch-ledger__col { padding: .8rem 0; border-top: 1px solid rgba(156,120,56,.18); }
  .ranch-ledger__col:first-child { border-top: 0; padding-top: 0; }
}

/* ============================================================
   PASS 1 — CRAFT LAYER (additive; honors reduced-motion)
   Premium scroll, cattle-card craft, button weight, stat rolls.
   ============================================================ */
:root { --settle: cubic-bezier(.16,1,.3,1); }

/* Lenis smooth scroll (LOQAL standard) */
.lenis,.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* tabular/lining numerals on all registration + record figures (invisible luxury) */
.cattle-card__reg, .proof__num, .featured__meta span, .spec dd, .ped dd { font-variant-numeric: tabular-nums lining-nums; }

/* --- Cattle cards: the animals carry the weight; make them feel premium --- */
.cattle-card { position: relative; transition: transform .55s var(--settle), box-shadow .55s var(--ease); }
.cattle-card::before {        /* gold edge resolves on approach — a brand keyline */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 4;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.cattle-card:hover::before, .cattle-card:focus-within::before { transform: scaleX(1); }
.cattle-card__photo { position: relative; overflow: hidden; transition: transform .7s var(--settle); will-change: transform; }
.cattle-card:hover .cattle-card__photo { transform: scale(1.055); }   /* the coat leans toward you */
.cattle-card__photo::after {  /* soft specular drifting with the cursor (felt, not seen) */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(180px 180px at var(--mx,50%) var(--my,28%), rgba(255,255,255,.16), transparent 62%);
  mix-blend-mode: screen; opacity: 0; transition: opacity .45s var(--ease);
}
.cattle-card:hover .cattle-card__photo::after { opacity: 1; }
.cattle-card .link-gold .arrow { transition: transform .4s var(--ease); display: inline-block; }
.cattle-card:hover .link-gold .arrow { transform: translateX(4px); }

/* --- Buttons: weight on press, like throwing a gate latch --- */
.btn { transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .3s var(--ease); }
.btn:active { transform: translateY(1.6px) scale(.985); }

/* --- Archive record numbers roll into place (real value always in markup) --- */
.archives__grid.in .proof__num { animation: rollIn .7s var(--settle) both; }
.archives__grid.in .proof:nth-child(2) .proof__num { animation-delay: .1s; }
.archives__grid.in .proof:nth-child(3) .proof__num { animation-delay: .2s; }
@keyframes rollIn { from { opacity: 0; transform: translateY(.45em); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }

@media (prefers-reduced-motion: reduce) {
  .cattle-card__photo, .cattle-card::before { transition: none; }
  .cattle-card:hover .cattle-card__photo { transform: none; }
  .archives__grid.in .proof__num { animation: none; }
}

/* THE HERD — framed photo (replaces the full-bleed interactive pasture) */
.herd-frame { max-width: min(1040px, 92vw); margin: clamp(1.5rem,5vw,3.5rem) auto; background:#fff; padding:12px; border-radius:3px; box-shadow: 0 24px 50px -16px rgba(28,20,12,.5), 0 4px 14px rgba(28,20,12,.18); }
.herd-frame img { display:block; width:100%; height:auto; border-radius:1px; }
.herd-frame figcaption { margin-top:.7rem; text-align:center; font-family: var(--font-label); letter-spacing:.14em; text-transform:uppercase; font-size:.68rem; color: var(--soil); }

/* SOLD — kept on site, clearly marked */
.cattle-card.is-sold .cattle-card__photo, .featured.is-sold .print__img { position: relative; }
.cattle-card.is-sold .cattle-card__photo::after, .featured.is-sold .print__img::after {
  content: "Sold"; position: absolute; inset: 0; z-index: 2; opacity: 1; mix-blend-mode: normal; display: grid; place-items: center; border-radius: inherit;
  background: rgba(16,20,12,.52); font-family: var(--font-label); font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; font-size: clamp(1rem,2.2vw,1.5rem); color: var(--cream); text-shadow: 0 2px 12px rgba(0,0,0,.7);
}

/* SOLD ribbon — animal detail pages (photo stays visible) */
.animal-photo.is-sold { position: relative; }
.animal-photo .sold-ribbon {
  position: absolute; top: .8rem; right: .8rem; z-index: 4;
  font-family: var(--font-label); font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  font-size: .74rem; color: var(--cream); background: var(--cardinal);
  padding: .34rem .8rem; border-radius: 2px; box-shadow: 0 4px 14px rgba(0,0,0,.4);
}

/* gallery/reel captions — dark gradient so labels read on light photos */
.reel figure::after { content:""; position:absolute; left:0; right:0; bottom:0; height:50%; z-index:1; pointer-events:none; background: linear-gradient(to top, rgba(8,12,6,.85) 0%, rgba(8,12,6,.4) 44%, transparent 100%); }
.reel figcaption { z-index: 2; }

/* ============ DESIGNED NAV DRAWER (menu-open) — header, numbered nav, heritage footer, scrim ============ */
.nav__drawer-head, .nav__drawer-foot { display: none; }
.nav__scrim { position: fixed; inset: 0; background: rgba(8,12,6,.55); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
body.menu-open .nav__scrim { opacity: 1; pointer-events: auto; }
body.menu-open .brand { opacity: 0; pointer-events: none; }
body.menu-open .nav__right {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(360px, 87vw);
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: clamp(1.9rem,5vw,2.3rem); background: var(--green-deep);
  border-left: 1px solid rgba(201,162,94,.22); box-shadow: -26px 0 80px -14px rgba(0,0,0,.6);
  z-index: 61; overflow-y: auto;
}
body.menu-open .nav__drawer-head { display: flex; flex-direction: column; gap: .18rem; padding: .2rem 0 1.1rem; margin-bottom: .3rem; border-bottom: 1px solid rgba(201,162,94,.22); }
body.menu-open .nav__drawer-head b { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; letter-spacing: .05em; text-transform: uppercase; color: var(--cream); }
body.menu-open .nav__drawer-head span { font-family: var(--font-label); font-weight: 600; font-size: .58rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-soft); }
body.menu-open .nav__links { position: static; display: flex !important; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; width: 100%; background: none; box-shadow: none; padding: .4rem 0 0; counter-reset: navi; opacity: 1 !important; pointer-events: auto !important; transform: none; }
body.menu-open .nav__links a { display: flex; align-items: center; gap: .95rem; width: 100%; padding: 1.05rem .15rem; margin: 0; border-bottom: 1px solid rgba(246,239,226,.1); font-family: var(--font-display); font-weight: 400; text-transform: none; font-size: clamp(1.2rem,4.2vw,1.55rem); letter-spacing: .01em; color: var(--cream); transition: padding-left .25s var(--ease), color .25s var(--ease); }
body.menu-open .nav__links a::before { counter-increment: navi; content: "0" counter(navi); display: inline-block; font-family: var(--font-label); font-weight: 600; font-size: .62rem; letter-spacing: .14em; color: var(--gold-soft); min-width: 1.4rem; transition: color .25s var(--ease); }
body.menu-open .nav__links a::after { display: none; }
body.menu-open .nav__links a:hover { padding-left: .5rem; color: #fff; }
body.menu-open .nav__links a:hover::before { color: var(--gold); }
body.menu-open .nav__links a:hover::after { }
body.menu-open .nav__drawer-foot { display: flex; flex-direction: column; gap: .3rem; margin-top: auto; padding-top: 1.3rem; border-top: 1px solid rgba(201,162,94,.22); }
body.menu-open .nav__drawer-foot b { font-family: var(--font-display); font-weight: 400; font-size: 1rem; color: var(--cream); letter-spacing: .01em; }
body.menu-open .nav__drawer-foot span { font-family: var(--font-label); font-size: .72rem; line-height: 1.5; color: var(--cream-deep); }
body.menu-open .nav__drawer-foot em { font-family: var(--font-label); font-weight: 600; font-size: .54rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); font-style: normal; margin-top: .3rem; }
body.menu-open .nav__toggle { position: absolute; top: 1.4rem; right: 1.4rem; z-index: 62; color: var(--cream); font-size: 1.6rem; }

/* Low Power Mode: ambient motion off, videos already swapped to stills by JS */
html.low-power .scene__photo, html.low-power .hero__media,
html.low-power .fog, html.low-power .sunlight, html.low-power .sky,
html.low-power .wire__fill { animation: none !important; }