/* ==========================================================================
   Petitto Barn & Farms — design system
   Palette sampled from the logo: espresso ink #322113, barn red #6A1A0A
   ========================================================================== */

:root{
  /* ink + paper */
  --ink:#2A1A10;
  --ink-2:#4A3527;
  --ink-3:#6E5A4A;
  --cream:#F7F2E8;
  --cream-2:#EFE7D8;
  --sand:#E4D9C3;

  /* brand */
  --barn:#6E1E0C;
  --barn-lit:#9C3A22;
  --terra:#D68A6A;

  /* landscape */
  --moss:#3E5233;
  --moss-lit:#6E8A57;
  --gold:#D9963A;
  --pond:#24343A;

  /* seasons (driven by JS) */
  --season:#6E8A57;
  --season-deep:#3E5233;

  --radius:4px;
  --radius-lg:10px;
  --shadow-sm:0 1px 2px rgba(42,26,16,.06), 0 4px 14px -6px rgba(42,26,16,.14);
  --shadow:0 2px 4px rgba(42,26,16,.05), 0 18px 40px -18px rgba(42,26,16,.28);
  --shadow-lg:0 30px 70px -28px rgba(42,26,16,.45);

  --serif:"Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gut:clamp(1.25rem, 4vw, 2.5rem);
  --maxw:1280px;
  --nav-h:76px;

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

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

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* paper grain — the "handmade" warmth, barely there */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.012em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.9rem,1.6rem + 5.6vw,6.4rem)}
h2{font-size:clamp(2.1rem,1.35rem + 3.1vw,4rem)}
h3{font-size:clamp(1.45rem,1.15rem + 1.1vw,2.1rem)}
p{margin:0 0 1.15em; text-wrap:pretty}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--sans);
  font-size:.6875rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--barn-lit);
  display:flex; align-items:center; gap:.85em;
  margin:0 0 1.1rem;
}
.eyebrow::before{content:""; width:2rem; height:1px; background:currentColor; opacity:.5; flex:none}
.eyebrow.is-centred{justify-content:center}
.eyebrow.is-centred::after{content:""; width:2rem; height:1px; background:currentColor; opacity:.5; flex:none}

.lede{
  font-size:clamp(1.12rem,1.02rem + .5vw,1.4rem);
  line-height:1.55; color:var(--ink-2); font-weight:340;
}
.script{font-family:var(--serif); font-style:italic; font-weight:300}

/* ---------- layout ---------- */
.wrap{width:min(100% - var(--gut)*2, var(--maxw)); margin-inline:auto}
.wrap-narrow{width:min(100% - var(--gut)*2, 820px); margin-inline:auto}
.section{padding:clamp(4.5rem,3rem + 8vw,9rem) 0; position:relative}
.section-tight{padding:clamp(3rem,2rem + 5vw,5.5rem) 0}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center .eyebrow::after{content:""; width:2rem; height:1px; background:currentColor; opacity:.5; flex:none}

.dark{background:var(--ink); color:var(--cream)}
.dark h1,.dark h2,.dark h3{color:var(--cream)}
.dark .lede{color:#D9CDBC}
.dark .eyebrow{color:var(--terra)}
.tint{background:var(--cream-2)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--barn); --fg:var(--cream); --bd:var(--barn);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 1.9em; min-height:48px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  border-radius:var(--radius);
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s, color .3s, border-color .3s;
}
.btn::after{
  content:""; position:absolute; inset:0; background:#fff; opacity:0;
  transition:opacity .3s;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(110,30,12,.6)}
.btn:hover::after{opacity:.09}
.btn:active{transform:translateY(0)}
.btn-ghost{--bg:transparent; --fg:var(--ink); --bd:rgba(42,26,16,.28)}
.btn-ghost:hover{--bd:var(--ink); box-shadow:0 12px 26px -14px rgba(42,26,16,.5)}
.dark .btn-ghost{--fg:var(--cream); --bd:rgba(247,242,232,.34)}
.dark .btn-ghost:hover{--bd:var(--cream)}
.btn-light{--bg:var(--cream); --fg:var(--ink); --bd:var(--cream)}

.link-u{
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--barn-lit); padding-bottom:.35em;
  border-bottom:1px solid currentColor;
  transition:gap .3s var(--ease-out), color .25s;
}
.link-u:hover{gap:.95em}
.dark .link-u{color:var(--terra)}
.link-u .arw{transition:transform .3s var(--ease-out)}
.link-u:hover .arw{transform:translateX(3px)}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--barn-lit); outline-offset:3px; border-radius:2px}
.dark :focus-visible{outline-color:var(--terra)}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:.9rem 1.4rem; text-decoration:none;
}
.skip:focus{left:.5rem; top:.5rem}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(20,12,7,.62), rgba(20,12,7,0));
  transition:opacity .45s var(--ease);
}
.nav.is-stuck{background:rgba(247,242,232,.93); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); box-shadow:0 1px 0 rgba(42,26,16,.1), 0 10px 30px -22px rgba(42,26,16,.5); height:64px}
.nav.is-stuck::before{opacity:0}
.nav .wrap{display:flex; align-items:center; gap:2rem; width:min(100% - var(--gut)*1.4, 1440px)}

.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; margin-right:auto}
.brand img{height:46px; width:auto; transition:height .45s var(--ease)}
.nav.is-stuck .brand img{height:40px}
.brand-txt{display:flex; flex-direction:column; line-height:1}
.brand-txt b{font-family:var(--serif); font-size:1.32rem; font-weight:500; letter-spacing:.005em; color:var(--cream); transition:color .45s}
.brand-txt span{font-size:.5625rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(247,242,232,.7); margin-top:.34em; transition:color .45s}
.nav.is-stuck .brand-txt b{color:var(--ink)}
.nav.is-stuck .brand-txt span{color:var(--ink-3)}

.nav-links{display:flex; align-items:center; gap:2.1rem; list-style:none; margin:0; padding:0}
.nav-links a{
  text-decoration:none; font-size:.75rem; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(247,242,232,.9); position:relative; padding:.4rem 0; transition:color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease-out);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1); transform-origin:left}
.nav.is-stuck .nav-links a{color:var(--ink-2)}
.nav.is-stuck .nav-links a[aria-current="page"]{color:var(--barn)}
.nav-cta{flex:none}
.nav .btn{padding:.72em 1.35em; min-height:42px; font-size:.7rem}
.nav:not(.is-stuck) .btn{--bg:transparent; --fg:var(--cream); --bd:rgba(247,242,232,.45)}
.nav:not(.is-stuck) .btn:hover{--bg:var(--cream); --fg:var(--ink); --bd:var(--cream)}

.burger{display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; padding:0; position:relative}
.burger span{position:absolute; left:11px; right:11px; height:1.5px; background:var(--cream); transition:transform .4s var(--ease-out), opacity .25s, background .45s}
.burger span:nth-child(1){top:16px} .burger span:nth-child(2){top:21.5px} .burger span:nth-child(3){top:27px}
.nav.is-stuck .burger span{background:var(--ink)}
body.menu-open .burger span{background:var(--cream)}
body.menu-open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:960px){
  .burger{display:block; order:3}
  .nav-cta{display:none}
  .nav-links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; gap:0;
    background:var(--ink);
    clip-path:circle(0% at calc(100% - 34px) 38px);
    transition:clip-path .7s var(--ease-out);
  }
  body.menu-open .nav-links{clip-path:circle(150% at calc(100% - 34px) 38px)}
  .nav-links li{opacity:0; transform:translateY(14px); transition:opacity .4s, transform .5s var(--ease-out)}
  body.menu-open .nav-links li{opacity:1; transform:none}
  body.menu-open .nav-links li:nth-child(1){transition-delay:.14s}
  body.menu-open .nav-links li:nth-child(2){transition-delay:.2s}
  body.menu-open .nav-links li:nth-child(3){transition-delay:.26s}
  body.menu-open .nav-links li:nth-child(4){transition-delay:.32s}
  body.menu-open .nav-links li:nth-child(5){transition-delay:.38s}
  body.menu-open .nav-links li:nth-child(6){transition-delay:.44s}
  .nav-links a{
    font-family:var(--serif); font-size:2.1rem; font-weight:300; letter-spacing:.01em;
    text-transform:none; color:var(--cream)!important; padding:.55rem var(--gut); display:block;
  }
  .nav-links a::after{display:none}
  body.menu-open{overflow:hidden}
}

/* ==========================================================================
   HERO / SEASON ENGINE
   ========================================================================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink)}
.hero-stage{position:absolute; inset:0; z-index:0}
.hero-stage .frame{
  position:absolute; inset:0; opacity:0; transform:scale(1.08);
  transition:opacity 1.5s var(--ease), transform 7.6s linear; /* matches HOLD in seasons.js */
  will-change:opacity,transform;
}
.hero-stage .frame.is-live{opacity:1; transform:scale(1.005)}
.hero-stage img{width:100%; height:100%; object-fit:cover}

/* per-season colour grade */
.hero-grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:var(--grade, transparent); mix-blend-mode:soft-light; opacity:.85;
  transition:background 1.5s var(--ease);
}
.hero-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, rgba(18,11,6,.92) 0%, rgba(18,11,6,.55) 32%, rgba(18,11,6,.14) 58%, rgba(18,11,6,.4) 82%, rgba(18,11,6,.66) 100%);
}
.hero-inner{position:relative; z-index:5; width:100%; padding-bottom:clamp(2.5rem,2rem + 5vw,5rem); padding-top:calc(var(--nav-h) + 2rem)}
.hero h1{color:var(--cream); text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero h1 em{font-style:italic; font-weight:300; color:#F3E4CF}
.hero-lede{max-width:34ch; color:rgba(247,242,232,.9); margin-top:1.5rem; font-size:clamp(1.05rem,.98rem + .4vw,1.28rem); line-height:1.55}
.hero-actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem}
.hero-top{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap}

/* season selector */
.season-picker{display:flex; gap:.35rem; padding:.35rem; border-radius:100px;
  background:rgba(20,13,8,.42); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(247,242,232,.16); flex:none}
.season-btn{
  border:0; background:none; cursor:pointer; border-radius:100px;
  padding:.62em 1.15em; color:rgba(247,242,232,.72);
  font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  display:flex; align-items:center; gap:.5em; position:relative; transition:color .35s;
}
.season-btn svg{width:15px; height:15px; opacity:.8}
.season-btn:hover{color:var(--cream)}
.season-btn[aria-selected="true"]{color:var(--ink)}
.season-btn[aria-selected="true"]::before{
  content:""; position:absolute; inset:0; border-radius:100px; background:var(--cream); z-index:-1;
}
.season-btn span{position:relative}

/* the rotating "event in the space" card */
.season-card{
  position:relative; z-index:5;
  background:rgba(247,242,232,.07); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(247,242,232,.18); border-radius:var(--radius-lg);
  padding:1.5rem 1.7rem; max-width:340px; color:var(--cream);
}
.season-card .sc-season{font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--terra); font-weight:600}
.season-card h3{font-size:1.65rem; margin:.5rem 0 .55rem; color:var(--cream)}
.season-card p{font-size:.925rem; line-height:1.55; color:rgba(247,242,232,.8); margin:0}
.season-card dl{display:flex; gap:1.6rem; margin:1.1rem 0 0; padding-top:1rem; border-top:1px solid rgba(247,242,232,.16)}
.season-card dt{font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(247,242,232,.55); margin-bottom:.3em}
.season-card dd{margin:0; font-family:var(--serif); font-size:1.3rem; line-height:1}
.sc-fade{animation:scIn .8s var(--ease-out) both}
@keyframes scIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.hero-foot{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-top:2.5rem}
.scroll-cue{display:flex; align-items:center; gap:.8rem; color:rgba(247,242,232,.62); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase}
.scroll-cue i{display:block; width:1px; height:44px; background:linear-gradient(rgba(247,242,232,.7), transparent); position:relative; overflow:hidden}
.scroll-cue i::after{content:""; position:absolute; top:-44px; left:0; width:1px; height:44px; background:var(--terra); animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{top:-44px}55%,100%{top:44px}}

@media (max-width:860px){
  .season-card{max-width:none}
  .hero-top{flex-direction:column; align-items:flex-start}
  .season-picker{width:100%; overflow-x:auto; justify-content:flex-start}
  .season-btn{white-space:nowrap}
}

/* particles (petals / fireflies / leaves / embers) */
.particles{position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden}
.particles i{position:absolute; display:block; border-radius:50%; opacity:0; will-change:transform,opacity}
@media (prefers-reduced-motion:reduce){.particles{display:none}}

/* ==========================================================================
   CRITTERS — the property is alive
   ========================================================================== */
.critters{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.hero .critters{z-index:4}
.section > .wrap,.section > .wrap-narrow{position:relative; z-index:1}
.critter{position:absolute; opacity:0; will-change:transform; color:rgba(42,26,16,.5)}
.critter svg{width:100%; height:auto; display:block; fill:currentColor}
.critter.on-dark{color:rgba(247,242,232,.5)}
.critter.in-water{color:rgba(36,52,58,.42)}
@media (prefers-reduced-motion:reduce){.critters{display:none}}

/* ==========================================================================
   REVEALS
   ========================================================================== */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .95s var(--ease-out), transform 1.05s var(--ease-out)}
[data-reveal].is-in{opacity:1; transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="right"]{transform:translateX(-34px)}
[data-reveal].is-in[data-reveal="right"]{transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important; transform:none!important; transition:none}
}

/* ==========================================================================
   EDITORIAL BLOCKS
   ========================================================================== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,1rem + 5vw,6rem); align-items:center}
.split.is-wide-l{grid-template-columns:1.15fr .85fr}
.split.is-wide-r{grid-template-columns:.85fr 1.15fr}
@media (max-width:900px){.split,.split.is-wide-l,.split.is-wide-r{grid-template-columns:1fr; gap:2.5rem}}
.split .media{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow)}
.split .media img,.split .media video{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.split .media.tall img,.split .media.tall video{aspect-ratio:3/4}
.media-note{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  background:rgba(20,13,8,.62); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:var(--cream); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.55em 1em; border-radius:100px; border:1px solid rgba(247,242,232,.18);
}

/* stat row */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(42,26,16,.14); border-block:1px solid rgba(42,26,16,.14)}
.dark .stats{background:rgba(247,242,232,.16); border-color:rgba(247,242,232,.16)}
.stats div{background:var(--cream); padding:clamp(1.5rem,1rem + 2vw,2.4rem) 1.2rem; text-align:center}
.dark .stats div{background:var(--ink)}
.tint .stats div{background:var(--cream-2)}
.stats b{display:block; font-family:var(--serif); font-weight:400; font-size:clamp(2rem,1.4rem + 2vw,3.1rem); line-height:1; color:var(--barn)}
.dark .stats b{color:var(--terra)}
.stats span{display:block; margin-top:.7rem; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.dark .stats span{color:rgba(247,242,232,.6)}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,1fr)}}

/* feature cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:clamp(1rem,.5rem + 1.6vw,1.9rem)}
.card{
  background:var(--cream); border:1px solid rgba(42,26,16,.1); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(42,26,16,.2)}
.card .ph{position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--sand)}
.card .ph img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out)}
.card:hover .ph img{transform:scale(1.06)}
.card .bd{padding:1.5rem 1.6rem 1.7rem; flex:1; display:flex; flex-direction:column; gap:.7rem}
.card h3{font-size:1.5rem}
.card p{font-size:.94rem; color:var(--ink-2); margin:0}
.card .link-u{margin-top:auto; align-self:flex-start; padding-top:.4rem}
.dark .card{background:#332115; border-color:rgba(247,242,232,.14)}
.dark .card p{color:#C9BBA9}

/* pull quote */
.quote{max-width:24ch; font-family:var(--serif); font-size:clamp(1.9rem,1.2rem + 3vw,3.5rem); line-height:1.14; font-weight:300; font-style:italic}
.quote-mark{font-size:3em; line-height:0; color:var(--terra); vertical-align:-.35em; margin-right:.06em}

/* ==========================================================================
   PROPERTY MAP
   ========================================================================== */
.estate{display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(1.5rem,1rem + 2.5vw,3rem); align-items:start}
@media (max-width:980px){.estate{grid-template-columns:1fr}}
.estate-plan{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(165deg,#40563A,#2C412E 55%,#22331F);
  aspect-ratio:16/11; box-shadow:var(--shadow-lg); border:1px solid rgba(247,242,232,.1);
}
.estate-plan svg{position:absolute; inset:0; width:100%; height:100%}
.hot{cursor:pointer; pointer-events:all}
.hot .ring{fill:rgba(247,242,232,.1); stroke:rgba(247,242,232,.55); stroke-width:.55; transition:all .4s var(--ease-out)}
.hot .dot{fill:var(--cream); transition:all .4s var(--ease-out)}
.hot .pulse{fill:none; stroke:var(--terra); stroke-width:.5; opacity:0; transform-origin:center}
.hot:hover .ring,.hot.is-on .ring{fill:var(--barn); stroke:var(--terra); r:3.4}
.hot:hover .dot,.hot.is-on .dot{fill:var(--cream)}
.hot text{
  fill:rgba(247,242,232,.88); font-family:var(--sans); font-size:2.15px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; pointer-events:none;
  transition:fill .3s, opacity .3s; opacity:.75;
}
.hot:hover text,.hot.is-on text{fill:var(--cream); opacity:1}
.hot.is-on .pulse{opacity:.9; animation:hotpulse 2.2s var(--ease-out) infinite}
@keyframes hotpulse{0%{r:3; opacity:.75}100%{r:9; opacity:0}}
@media (prefers-reduced-motion:reduce){.hot .pulse{animation:none!important; opacity:0!important}}

.estate-legend{display:flex; flex-direction:column; gap:.4rem}
.estate-detail{
  border:1px solid rgba(42,26,16,.13); border-radius:var(--radius-lg); overflow:hidden; background:var(--cream);
  box-shadow:var(--shadow-sm);
}
.dark .estate-detail{background:#332115; border-color:rgba(247,242,232,.14)}
.estate-detail .ph{aspect-ratio:4/3; overflow:hidden; background:var(--sand)}
.estate-detail .ph img{width:100%; height:100%; object-fit:cover}
.estate-detail .bd{padding:1.4rem 1.5rem 1.6rem}
.estate-detail .num{font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--barn-lit); font-weight:600}
.estate-detail h3{margin:.5rem 0 .6rem; font-size:1.55rem}
.estate-detail p{font-size:.93rem; color:var(--ink-2); margin:0}
.dark .estate-detail p{color:#C9BBA9}
.estate-chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.5rem}
.chip{
  border:1px solid rgba(42,26,16,.18); background:transparent; border-radius:100px; cursor:pointer;
  padding:.5em 1em; font-size:.7rem; font-weight:500; letter-spacing:.06em; color:var(--ink-2);
  transition:all .3s var(--ease-out);
}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.is-on{background:var(--barn); border-color:var(--barn); color:var(--cream)}
.dark .chip{border-color:rgba(247,242,232,.24); color:#C9BBA9}
.dark .chip:hover{border-color:var(--cream); color:var(--cream)}

/* ==========================================================================
   ANIMAL ROSTER
   ========================================================================== */
.roster{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(247,242,232,.14); border:1px solid rgba(247,242,232,.14); border-radius:var(--radius-lg); overflow:hidden}
.roster button{
  background:var(--ink); border:0; cursor:pointer; padding:1.7rem 1rem 1.5rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  transition:background .4s var(--ease-out);
}
.roster button:hover,.roster button.is-on{background:#3A2617}
.roster .ic{width:56px; height:44px; display:grid; place-items:center; color:rgba(247,242,232,.55); transition:color .4s, transform .5s var(--ease-out)}
.roster .ic svg{width:100%; height:auto; fill:currentColor}
.roster button:hover .ic,.roster button.is-on .ic{color:var(--terra); transform:translateY(-3px) scale(1.06)}
.roster b{font-family:var(--serif); font-size:1.18rem; font-weight:400; color:var(--cream)}
.roster small{font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(247,242,232,.62)}
@media (max-width:760px){.roster{grid-template-columns:repeat(2,1fr)}}
.roster-note{
  margin-top:1.6rem; min-height:3.4em; font-size:1.02rem; color:#D9CDBC;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.roster-note em{font-family:var(--serif); font-style:italic; font-size:1.25em; color:var(--cream)}

/* ==========================================================================
   AVAILABILITY CALENDAR
   ========================================================================== */
.cal-shell{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(1.5rem,1rem + 3vw,3.5rem); align-items:start}
@media (max-width:980px){.cal-shell{grid-template-columns:1fr}}
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.6rem}
.cal-nav{display:flex; gap:.5rem}
.cal-nav button{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(42,26,16,.2); background:none; cursor:pointer;
  display:grid; place-items:center; transition:all .3s var(--ease-out);
}
.cal-nav button:hover:not(:disabled){background:var(--ink); color:var(--cream); border-color:var(--ink)}
.cal-nav button:disabled{opacity:.3; cursor:not-allowed}
.cal-months{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,.6rem + 2vw,2.6rem)}
@media (max-width:640px){.cal-months{grid-template-columns:1fr}}
.cal-month h4{font-family:var(--serif); font-size:1.35rem; font-weight:500; text-align:center; margin:0 0 1rem}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal-grid .dow{
  text-align:center; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:.6rem; font-weight:600;
}
.cal-day{
  aspect-ratio:1; display:grid; place-items:center; border-radius:var(--radius);
  font-size:.85rem; font-variant-numeric:tabular-nums; position:relative;
  border:1px solid transparent; background:none; cursor:pointer;
  transition:all .25s var(--ease-out);
}
.cal-day.is-blank{visibility:hidden; cursor:default}
.cal-day.is-free{color:var(--ink); border-color:rgba(42,26,16,.12)}
.cal-day.is-free:hover{background:var(--barn); border-color:var(--barn); color:var(--cream); transform:scale(1.07)}
.cal-day.is-taken{color:var(--ink-3); background:repeating-linear-gradient(-45deg,transparent,transparent 3px,rgba(42,26,16,.13) 3px,rgba(42,26,16,.13) 4px); cursor:not-allowed}
.cal-day.is-past{color:rgba(42,26,16,.22); cursor:not-allowed}
.cal-day.is-today{font-weight:700; box-shadow:inset 0 0 0 1.5px var(--barn)}
.cal-day.is-sel{background:var(--barn); border-color:var(--barn); color:var(--cream); font-weight:600}
.cal-key{display:flex; flex-wrap:wrap; gap:1.3rem; margin-top:1.8rem; font-size:.72rem; color:var(--ink-2)}
.cal-key i{width:15px; height:15px; border-radius:3px; display:inline-block; vertical-align:-3px; margin-right:.5em}
.cal-key .k-free{border:1px solid rgba(42,26,16,.25)}
.cal-key .k-taken{background:repeating-linear-gradient(-45deg,transparent,transparent 3px,rgba(42,26,16,.2) 3px,rgba(42,26,16,.2) 4px); border:1px solid rgba(42,26,16,.15)}
.cal-key .k-sel{background:var(--barn)}
.cal-status{font-size:.76rem; color:var(--ink-3); margin-top:1.2rem; display:flex; align-items:center; gap:.5em}
.cal-status .pip{width:7px; height:7px; border-radius:50%; background:var(--moss-lit); flex:none}
.cal-status.is-stale .pip{background:var(--gold)}
.cal-status.is-err .pip{background:var(--barn-lit)}

.cal-side{background:var(--cream-2); border:1px solid rgba(42,26,16,.11); border-radius:var(--radius-lg); padding:clamp(1.5rem,1rem + 2vw,2.2rem)}
.cal-side h3{font-size:1.6rem; margin-bottom:.7rem}
.cal-pick{
  margin:1.3rem 0; padding:1.05rem 1.2rem; border-radius:var(--radius); background:var(--cream);
  border:1px dashed rgba(42,26,16,.25); font-size:.9rem; color:var(--ink-2);
}
.cal-pick b{display:block; font-family:var(--serif); font-size:1.5rem; color:var(--ink); margin-top:.2rem; font-weight:500}

/* ==========================================================================
   GALLERY + LIGHTBOX
   ========================================================================== */
.gal{columns:3; column-gap:clamp(.6rem,.3rem + 1vw,1.1rem)}
@media (max-width:900px){.gal{columns:2}}
@media (max-width:520px){.gal{columns:1}}
.gal figure{break-inside:avoid; margin:0 0 clamp(.6rem,.3rem + 1vw,1.1rem); position:relative; border-radius:var(--radius); overflow:hidden; cursor:zoom-in; background:var(--sand)}
.gal img{width:100%; height:auto; transition:transform 1s var(--ease-out), filter .5s}
.gal figure:hover img{transform:scale(1.045)}
.gal figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem 1rem .9rem; color:var(--cream);
  background:linear-gradient(transparent,rgba(20,13,8,.8)); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:all .45s var(--ease-out);
}
.gal figure:hover figcaption{opacity:1; transform:none}

.lb{position:fixed; inset:0; z-index:300; display:none; place-items:center; background:rgba(16,10,6,.96); padding:clamp(1rem,3vw,3rem)}
.lb.is-open{display:grid}
.lb img{max-width:100%; max-height:82vh; object-fit:contain; border-radius:var(--radius); animation:lbIn .5s var(--ease-out)}
@keyframes lbIn{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:none}}
.lb-cap{color:rgba(247,242,232,.75); text-align:center; margin-top:1.2rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase}
.lb-btn{
  position:absolute; width:52px; height:52px; border-radius:50%; border:1px solid rgba(247,242,232,.28);
  background:rgba(247,242,232,.06); color:var(--cream); cursor:pointer; display:grid; place-items:center;
  transition:all .3s var(--ease-out); backdrop-filter:blur(8px);
}
.lb-btn:hover{background:var(--cream); color:var(--ink); border-color:var(--cream)}
.lb-x{top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem)}
.lb-p{left:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%)}
.lb-n{right:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%)}
.lb-p:hover,.lb-n:hover{transform:translateY(-50%) scale(1.06)}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form{display:grid; gap:1.15rem}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:1.15rem}
@media (max-width:640px){.f-row{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:.5rem}
.field label{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink-2)}
.field label .req{color:var(--barn-lit)}
.field input,.field select,.field textarea{
  font:inherit; font-size:.95rem; color:var(--ink); background:var(--cream);
  border:1px solid rgba(42,26,16,.2); border-radius:var(--radius); padding:.85rem 1rem; width:100%;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.tint .field input,.tint .field select,.tint .field textarea{background:#FBF8F1}
.field textarea{min-height:130px; resize:vertical; line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--barn); box-shadow:0 0 0 3px rgba(110,30,12,.11);
}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A6555' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem}
.f-note{font-size:.78rem; color:var(--ink-3); line-height:1.5}
.f-ok{
  padding:1rem 1.2rem; border-radius:var(--radius); background:rgba(62,82,51,.1);
  border:1px solid rgba(62,82,51,.3); color:var(--moss); font-size:.9rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--ink); color:#C9BBA9; padding:clamp(3.5rem,2.5rem + 5vw,6rem) 0 2.5rem; position:relative; overflow:hidden}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(1.8rem,1rem + 3vw,3.5rem)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot img.mark{width:180px; margin-bottom:1.3rem}
.foot h4{font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--terra); font-family:var(--sans); font-weight:600; margin-bottom:1.1rem}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.foot a{text-decoration:none; color:#C9BBA9; font-size:.93rem; transition:color .3s}
.foot a:hover{color:var(--cream)}
.foot address{font-style:normal; font-size:.93rem; line-height:1.7}
.foot-bar{
  margin-top:clamp(2.5rem,2rem + 3vw,4rem); padding-top:1.7rem; border-top:1px solid rgba(247,242,232,.13);
  display:flex; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; font-size:.76rem; color:rgba(247,242,232,.62);
}
.foot-bar a{font-size:.76rem}

/* ==========================================================================
   MISC
   ========================================================================== */
.map-embed{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(42,26,16,.12); background:var(--sand)}
.map-embed iframe{width:100%; height:clamp(320px,44vh,520px); border:0; display:block}
.page-head{padding:calc(var(--nav-h) + clamp(3.5rem,2.5rem + 6vw,7rem)) 0 clamp(2.5rem,2rem + 3vw,4rem); position:relative; overflow:hidden}
.page-head.has-bg{background:var(--ink); color:var(--cream)}
.page-head.has-bg img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:1; filter:saturate(1.1) contrast(1.04)}
.page-head.has-bg::after{
  content:""; position:absolute; inset:0;
  background:
    /* darken only the column the copy sits in, so the rest of the frame keeps its light */
    linear-gradient(to right, rgba(14,9,5,.84) 0%, rgba(14,9,5,.52) 38%, rgba(14,9,5,.14) 68%, rgba(14,9,5,0) 88%),
    linear-gradient(to top, rgba(14,9,5,.72) 0%, rgba(14,9,5,.26) 46%, rgba(14,9,5,.14) 72%, rgba(14,9,5,.5) 100%);
}
@media (max-width:860px){
  /* no room for a side gradient on a phone — fall back to a vertical one */
  .page-head.has-bg::after{
    background:linear-gradient(to top, rgba(14,9,5,.86) 0%, rgba(14,9,5,.55) 48%, rgba(14,9,5,.32) 74%, rgba(14,9,5,.6) 100%);
  }
}
.page-head .wrap{position:relative; z-index:3}
.page-head h1{font-size:clamp(2.6rem,1.6rem + 4.4vw,5.2rem)}
.page-head.has-bg h1,.page-head.has-bg .lede{text-shadow:0 2px 26px rgba(12,7,4,.55)}
.page-head.has-bg .crumbs,.page-head.has-bg .eyebrow{text-shadow:0 1px 10px rgba(12,7,4,.9)}

.crumbs{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(247,242,232,.6); margin-bottom:1.4rem}
.crumbs a{text-decoration:none; color:inherit; border-bottom:1px solid transparent; transition:border-color .3s}
.crumbs a:hover{border-color:currentColor}

.tag{display:inline-flex; align-items:center; gap:.45em; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--barn-lit); border:1px solid currentColor; border-radius:100px; padding:.42em .95em}
.dark .tag{color:var(--terra)}

.list-check{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}
.list-check li{display:flex; gap:.85rem; align-items:flex-start; font-size:.96rem; color:var(--ink-2)}
.dark .list-check li{color:#C9BBA9}
.list-check svg{flex:none; width:17px; height:17px; margin-top:.32em; color:var(--barn-lit)}
.dark .list-check svg{color:var(--terra)}

.hr{height:1px; background:rgba(42,26,16,.14); border:0; margin:0}
.dark .hr{background:rgba(247,242,232,.15)}
.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* brand mark swap (cream over photo → full colour on the stuck bar) */
.brand-mark{position:relative; flex:none; width:46px; height:46px; transition:width .45s var(--ease), height .45s var(--ease)}
.nav.is-stuck .brand-mark{width:40px; height:40px}
.brand-mark img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .4s var(--ease)}
.brand-mark .on-light{opacity:0}
.nav.is-stuck .brand-mark .on-dark{opacity:0}
.nav.is-stuck .brand-mark .on-light{opacity:1}
body.menu-open .brand-mark .on-dark{opacity:1}
body.menu-open .brand-mark .on-light{opacity:0}
body.menu-open .nav.is-stuck .brand-txt b{color:var(--cream)}
body.menu-open .nav.is-stuck .brand-txt span{color:rgba(247,242,232,.7)}

/* lodging strip */
.abnb{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:center}
@media (max-width:860px){.abnb{grid-template-columns:1fr}}
.abnb .media{border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow)}
.abnb .media img{aspect-ratio:5/4; object-fit:cover; width:100%}

/* season legend under hero on small screens */
.hero-inner .season-card{margin-top:1.6rem}
@media (min-width:861px){
  .hero-body{display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(2rem,1rem + 4vw,5rem); align-items:end}
  .hero-inner .season-card{margin-top:0}
}

/* hero sits on photography — ghost buttons must read light */
.hero .btn-ghost,.page-head.has-bg .btn-ghost{--fg:var(--cream); --bd:rgba(247,242,232,.42)}
.hero .btn-ghost:hover,.page-head.has-bg .btn-ghost:hover{--bd:var(--cream); --bg:rgba(247,242,232,.1)}

/* ==========================================================================
   PHONE REFINEMENTS
   ========================================================================== */
@media (max-width:600px){
  .hero h1{font-size:clamp(2.5rem,1.5rem + 4.6vw,3.3rem)}
  .hero-lede{font-size:1.02rem; margin-top:1.1rem; max-width:none}
  .hero-actions{margin-top:1.7rem; gap:.7rem}
  .hero-actions .btn{flex:1 1 45%; padding-inline:1.1em}
  .hero-inner{padding-top:calc(var(--nav-h) + 1rem)}
  .hero-top{gap:1.1rem}
  .eyebrow{font-size:.62rem; letter-spacing:.2em}
  .eyebrow::before,.eyebrow::after{display:none}
  .eyebrow.is-centred{justify-content:center}

  .season-picker{padding:.28rem; gap:.2rem}
  .season-btn{padding:.6em .85em; font-size:.62rem; gap:.4em}
  .season-btn svg{width:13px; height:13px}
  .season-card{padding:1.2rem 1.3rem}
  .season-card h3{font-size:1.42rem}
  .season-card p{font-size:.885rem}
  .season-card dl{gap:1.2rem; margin-top:.95rem; padding-top:.85rem}
  .season-card dd{font-size:1.15rem}
  .hero-foot{margin-top:1.6rem}

  .stats div{padding:1.3rem .7rem}
  .cal-side{padding:1.3rem}
  .cal-day{font-size:.8rem}
  .foot img.mark{width:130px}
  .quote{max-width:none}
}

/* the estate plan needs breathing room on small screens */
@media (max-width:560px){
  .estate-plan{aspect-ratio:4/3.4}
  .chip{font-size:.66rem; padding:.45em .8em}
}

/* the primary CTA must survive the mobile menu */
.nav-cta-m{display:none}
@media (max-width:960px){
  .nav-cta-m{display:block; margin-top:1.4rem}
  .nav-links .nav-cta-m a{
    display:inline-block; font-family:var(--sans); font-size:.78rem; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--cream)!important;
    border:1px solid rgba(247,242,232,.45); border-radius:var(--radius);
    padding:.95em 2.1em; margin-inline:var(--gut);
  }
}

/* honour reduced-motion everywhere, including the hero ken-burns */
@media (prefers-reduced-motion:reduce){
  .hero-stage .frame{transition:opacity .35s linear; transform:none!important}
  .scroll-cue i::after{animation:none; opacity:0}
  .card:hover .ph img,.gal figure:hover img,.split .media img{transform:none}
  .btn:hover,.card:hover{transform:none}
  .lb img{animation:none}
  .sc-fade{animation:none}
  .nav-links{transition:none}
}

/* the real logo needs more room in the bar than a simplified mark did */
.brand-mark{width:58px; height:58px}
.nav.is-stuck .brand-mark{width:48px; height:48px}
.brand{gap:.85rem}
@media (max-width:600px){
  .brand-mark{width:50px; height:50px}
  .nav.is-stuck .brand-mark{width:44px; height:44px}
  .brand-txt b{font-size:1.18rem}
}

/* "coming to the farm" note */
.coming{
  max-width:62ch; margin:2.6rem auto 0; text-align:center;
  font-size:1.02rem; line-height:1.65; color:#D9CDBC;
}
.coming .tag{display:inline-flex; margin-right:.7rem; vertical-align:2px}
.coming strong{color:var(--cream); font-weight:500}

/* the infinity glyph sits short next to lining numerals */
.stats b.stat-inf{font-size:clamp(2.7rem,1.9rem + 2.7vw,4.2rem); line-height:.72}

/* form validation + send states */
.field input.is-bad,.field select.is-bad,.field textarea.is-bad{
  border-color:var(--barn); box-shadow:0 0 0 3px rgba(110,30,12,.1);
}
.f-ok.is-bad{background:rgba(110,30,12,.08); border-color:rgba(110,30,12,.35); color:var(--barn)}
.btn:disabled{opacity:.65; cursor:progress; transform:none}

/* night header — let the warm interior glow carry the frame instead of a flat scrim */
.page-head.is-night img.bg{
  opacity:.92;
  filter:saturate(1.22) contrast(1.1) brightness(1.03);
}
.page-head.is-night img.bg{object-position:58% 46%}
.page-head.is-night::after{
  background:
    /* keep the text column dark so the copy never fights the lit barn */
    linear-gradient(to right, rgba(8,6,4,.9) 0%, rgba(8,6,4,.58) 32%, rgba(8,6,4,.08) 58%, transparent 76%),
    /* warm bloom over the barn itself */
    radial-gradient(66% 54% at 64% 50%, rgba(255,168,74,.24), transparent 66%),
    linear-gradient(to top, rgba(8,6,4,.88) 0%, rgba(8,6,4,.4) 42%, rgba(8,6,4,.16) 66%, rgba(10,14,26,.5) 100%);
}
@media (max-width:860px){
  /* narrow crops lose the barn, so let the frame breathe and sit on it */
  .page-head.is-night img.bg{object-position:62% 42%}
  .page-head.is-night::after{
    background:
      radial-gradient(90% 46% at 60% 38%, rgba(255,168,74,.22), transparent 70%),
      linear-gradient(to top, rgba(8,6,4,.93) 0%, rgba(8,6,4,.7) 45%, rgba(8,6,4,.35) 75%, rgba(10,14,26,.55) 100%);
  }
}

/* the logo, given room to be the mark it is */
.crest{
  margin:clamp(2.5rem,2rem + 3vw,4.5rem) 0 0;
  padding:clamp(1.5rem,1rem + 2vw,2.5rem) 0 0;
  border-top:1px solid rgba(42,26,16,.12);
  text-align:center;
}
.crest img{
  width:min(100%,340px); height:auto; margin-inline:auto;
  transition:transform .8s var(--ease-out);
}
.crest:hover img{transform:scale(1.02)}
.crest figcaption{
  margin-top:1.1rem; font-size:.64rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-3);
}
@media (max-width:900px){
  .crest{border-top:0; padding-top:0}
  .crest img{width:min(78%,300px)}
}

/* ==========================================================================
   VIDEO MEDIA
   ========================================================================== */
.media video{width:100%; height:100%; object-fit:cover; display:block; background:var(--ink)}
.media.reel img,.media.reel video{aspect-ratio:4/5}
.abnb .media video{aspect-ratio:5/4}
.abnb .media.reel video{aspect-ratio:4/5}

/* sound toggle for the one clip that has any */
.vid-sound{
  position:absolute; right:1rem; bottom:1rem; z-index:3;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.6em 1em; border-radius:100px; cursor:pointer;
  background:rgba(20,13,8,.6); border:1px solid rgba(247,242,232,.28); color:var(--cream);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  transition:background .3s, border-color .3s, transform .3s var(--ease-out);
}
.vid-sound:hover{background:rgba(20,13,8,.82); border-color:var(--cream); transform:translateY(-2px)}
.vid-sound svg{width:14px; height:14px; flex:none}
.vid-sound .on{display:none}
.vid-sound[aria-pressed="true"] .on{display:block}
.vid-sound[aria-pressed="true"] .off{display:none}

/* Events header: the photograph runs completely clean — no wash, no tint over the
   barn at all — and the copy sits underneath it on paper, where it is simply legible.
   Overlaying cream type on a bright midday frame always costs one or the other. */
.page-head.is-stacked{
  padding:0; background:var(--cream); color:var(--ink);
  display:block; min-height:0;
}
.page-head.is-stacked .ph{
  height:clamp(320px,56vh,660px); overflow:hidden; background:var(--sand); position:relative;
}
/* just enough shade under the nav bar to keep the links readable — it stops well
   above the barn, so the photograph itself stays untouched */
.page-head.is-stacked .ph::after{
  content:""; position:absolute; inset:0 0 auto 0; height:clamp(96px,14vh,150px);
  background:linear-gradient(to bottom, rgba(12,10,8,.66), rgba(12,10,8,.28) 55%, rgba(12,10,8,0));
  pointer-events:none;
}
.page-head.is-stacked .ph img{
  width:100%; height:100%; object-fit:cover;
  object-position:center 80%;      /* the barn sits at 54-72% of the source frame */
}
.page-head.is-stacked .wrap{
  padding-block:clamp(2.5rem,2rem + 4vw,4.5rem);
}
.page-head.is-stacked .crumbs{color:var(--ink-3)}
.page-head.is-stacked .eyebrow{color:var(--barn-lit)}
.page-head.is-stacked h1{color:var(--ink)}
.page-head.is-stacked .lede{color:var(--ink-2)}
@media (max-width:860px){
  .page-head.is-stacked .ph{height:clamp(260px,42vh,420px)}
  .page-head.is-stacked .ph img{object-position:center center}
}

/* ceremony orientation pair */
.facing{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,.5rem + 2vw,2.2rem)}
@media (max-width:820px){.facing{grid-template-columns:1fr}}
.facing figure{margin:0}
.facing picture{display:block; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow)}
.facing img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.facing figcaption{padding:1.2rem .2rem 0}
.facing figcaption b{
  display:block; font-family:var(--serif); font-size:1.35rem; font-weight:500; color:var(--ink);
}
.facing figcaption span{
  display:block; margin-top:.5rem; font-size:.93rem; line-height:1.6; color:var(--ink-2);
}

/* two frames stacked in one split column */
.media-stack{display:grid; gap:clamp(.7rem,.4rem + 1vw,1.1rem)}
.media-stack .media{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow)}
.media-stack .media img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/10}
@media (max-width:900px){.media-stack .media img{aspect-ratio:4/3}}

/* ==========================================================================
   BOOK BY PHONE — call is the encouraged path everywhere
   ========================================================================== */
.book-alt{
  margin-top:1.3rem; font-size:.92rem; color:var(--ink-3);
}
.dark .book-alt{color:rgba(247,242,232,.65)}
.book-alt a{color:var(--barn-lit); text-decoration:none; border-bottom:1px solid rgba(156,58,34,.4)}
.book-alt a:hover{border-bottom-color:currentColor}
.dark .book-alt a{color:var(--terra); border-bottom-color:rgba(214,138,106,.45)}

/* the call/text pair */
.book-now{display:flex; flex-wrap:wrap; gap:.8rem}
.book-now.is-centred{justify-content:center}
.book-now .btn{gap:.65em}
.book-now svg{width:15px; height:15px; flex:none}

/* the nudge that sits above a form */
.book-first{
  border:1px solid rgba(42,26,16,.14); border-radius:var(--radius-lg);
  background:var(--cream-2); padding:clamp(1.2rem,1rem + 1.4vw,1.7rem);
  margin-bottom:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);
}
.book-first p{font-size:.96rem; color:var(--ink-2); margin:0 0 1rem}
.book-first p b{color:var(--ink); font-weight:600}

/* how a day works — sits under the date picker */
.day-shape{
  margin-top:1.3rem; padding-top:1.3rem; border-top:1px solid rgba(42,26,16,.13);
}
.day-shape h4{
  font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 .7rem;
}
.day-shape p{font-size:.9rem; line-height:1.6; color:var(--ink-2); margin:0}