/* ============================================================
   Agroturisme Son Pons — "Oli Nou" (the new oil / the gold of the land)
   Concept: a real working agroturismo in es Pla, read through its harvest —
   olive, first-press oil, and the gold afternoon light on the land.
   Signature motif: the olive sprig + a band of harvest-gold light meeting
   the land (the "pressing line"), and a crop-calendar numeral system.
   Palette: warm harvest gold, muted earth-olive, sun-bleached oat/ivory.
   Deliberately WARM and agricultural — gold leads, olive is a grey-green
   EARTH tone (never a cold forest green). No sea, no blue.
   Type: Instrument Serif (high-contrast editorial display) + Inter.
   ============================================================ */

:root{
  /* ---- palette (warm, agricultural) ---- */
  --gold:      #c08a2d;   /* harvest gold — the signature accent */
  --gold-deep: #9a6a1c;   /* pressed-oil amber, for ink-on-gold */
  --gold-soft: #e3b768;   /* low sun on stubble */
  --olive:     #6f6f44;   /* muted earth-olive (grey-green, not forest) */
  --olive-deep:#4f5034;   /* shadowed olive grove */
  --bark:      #3a3324;   /* warm dark — text, the turned earth */
  --bark-soft: #6a6047;   /* secondary text */
  --oat:       #f4ecdb;   /* sun-bleached ivory / paper */
  --oat-2:     #ece0c8;   /* warmer oat panel */
  --oat-3:     #e3d4b6;   /* dried-grass band */
  --cream:     #fbf6ec;   /* lightest highlight */

  --paper: var(--oat);
  --line:  color-mix(in srgb, var(--bark) 18%, transparent);
  --line-gold: color-mix(in srgb, var(--gold) 50%, transparent);

  /* ---- type ---- */
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- rhythm ---- */
  --pad: clamp(20px, 5.5vw, 90px);
  --maxw: 1200px;
  --r: 2px;            /* elegant, near-sharp edge per lane */
  --r-lg: 4px;

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

/* ============================================================
   Reset / base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
#estate,#land,#stay,#harvest,#book{ scroll-margin-top:82px; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--bark);
  background:var(--paper);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;            /* belt-and-braces vs. 390px overflow */
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 1em; }
::selection{ background:color-mix(in srgb,var(--gold) 32%,transparent); }
:focus-visible{ outline:2.5px solid var(--gold-deep); outline-offset:3px; border-radius:2px; }

/* display headings: high-contrast serif; never shatter a word vertically */
.hero__title,.estate__title,.land__title,.stay__title,.harvest__title,.book__title{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.02;
  letter-spacing:.004em;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--bark); color:var(--cream); padding:12px 18px; border-radius:0 0 var(--r) 0;
  font-size:.85rem;
}
.skip:focus{ left:0; }

/* ============================================================
   The OLIVE SPRIG — signature mark.
   A reusable inline SVG (light-DOM only; never <use> across a shadow
   boundary). Two leaves + one fruit on a hairline branch. currentColor.
   ============================================================ */
.sprig{ display:inline-block; vertical-align:middle; }
.sprig path,.sprig line{ vector-effect:non-scaling-stroke; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --bh:48px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--bh); padding:0 24px;
  font-family:var(--sans); font-weight:600; font-size:.92rem; letter-spacing:.02em;
  text-decoration:none; border-radius:var(--r); cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  white-space:nowrap;
}
.btn--lg{ --bh:54px; padding:0 32px; font-size:1rem; }
.btn--xl{ --bh:58px; padding:0 38px; font-size:1.04rem; }
.btn--solid{ background:var(--gold-deep); color:var(--cream); }
.btn--solid:hover{ background:var(--bark); transform:translateY(-2px); }
.btn--line{ border-color:currentColor; color:var(--bark); background:transparent; }
.btn--line:hover{ background:color-mix(in srgb,var(--gold) 14%,transparent); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line); color:var(--bark); background:transparent; }
.btn--ghost:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }

/* ============================================================
   Kicker + crop-calendar numerals (signature numeral system).
   Months of the harvest read as a small ledger label.
   ============================================================ */
.kicker{
  display:flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:600;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 1.2em;
}
.kicker--light{ color:var(--gold-soft); }
.kicker__no{
  font-family:var(--serif); font-size:1.5rem; letter-spacing:.01em;
  line-height:1; color:currentColor;
  border-bottom:1.5px solid currentColor; padding-bottom:2px;
}

/* ============================================================
   HEADER
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:14px;
  padding:14px var(--pad);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-solid{
  background:color-mix(in srgb,var(--cream) 90%,transparent);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom-color:var(--line);
}
.nav__brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--bark); margin-right:auto; min-height:44px; padding:4px 2px; }
.nav__mark{ display:inline-flex; color:var(--gold-deep); flex:none; }
.nav__brand-text{ display:flex; flex-direction:column; line-height:1; }
.nav__name{ font-family:var(--serif); font-size:1.5rem; color:var(--bark); letter-spacing:.01em; }
.nav__sub{ font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-deep); margin-top:3px; }

.nav__links{ display:none; gap:30px; }
.nav__links a{
  text-decoration:none; color:var(--bark-soft); font-weight:500; font-size:.9rem;
  position:relative; padding:4px 0; transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1.5px; width:0; background:var(--gold-deep);
  transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--bark); }
.nav__links a:hover::after{ width:100%; }

.nav__right{ display:flex; align-items:center; gap:12px; }
.lang{ display:inline-flex; align-items:center; gap:3px; }
.lang__btn{
  border:0; background:transparent; cursor:pointer; padding:10px 6px; min-height:44px; min-width:34px;
  font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.04em;
  color:var(--bark-soft); transition:color .3s var(--ease);
}
.lang__btn.is-active{ color:var(--gold-deep); }
.lang__btn:hover{ color:var(--bark); }
.lang__sep{ color:var(--line); }

.nav__book{ display:none; }

/* ============================================================
   HERO — a composed harvest scene, frame-filling.
   The 2 saved photos are 3rd-party ad banners (unusable), so the hero is
   built as a DRAWN scene rather than left as type on an empty field: a
   layered harvest-gold light (sky → rising gold field → low sun) holding
   the lower frame, an OVERSIZED olive bough (the brand glyph at full
   scale) drawn across the upper/right dead space with ripe gold fruit, and
   the signature pressing line falling from one heavy olive into a gold
   oil-drop. The headline locks low-left into the bough. 100svh, no gap.
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(108px,16vh,150px) var(--pad) clamp(26px,3.4vh,40px);
  overflow:hidden;
  isolation:isolate;
  background:var(--oat);
}

/* ---- layered harvest-gold light ---- */
/* warm sky wash, top → mid */
.hero__sky{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(182deg,
    var(--cream) 0%, var(--oat) 30%, var(--oat-2) 56%, var(--oat-3) 78%, color-mix(in srgb,var(--gold-soft) 60%,var(--oat-3)) 100%);
}
/* the gold field rising from the land — real, sunlit, with a soft horizon */
.hero__field{
  position:absolute; left:0; right:0; bottom:0; z-index:0; pointer-events:none;
  height:62%;
  background:
    /* furrow lines raking toward the low sun, only in the field */
    repeating-linear-gradient(96deg,
      transparent 0 46px,
      color-mix(in srgb,var(--gold-deep) 9%,transparent) 46px 47px,
      transparent 47px 94px),
    /* the field body: stubble-gold deepening to pressed amber at the base */
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb,var(--gold-soft) 46%,var(--oat-3)) 22%,
      color-mix(in srgb,var(--gold) 60%,var(--oat-3)) 64%,
      color-mix(in srgb,var(--gold) 78%,var(--gold-deep)) 100%);
  -webkit-mask-image:linear-gradient(to top, #000 70%, transparent 100%);
          mask-image:linear-gradient(to top, #000 70%, transparent 100%);
}
/* the low sun pooling at the horizon line, lower-right — the glow that breathes */
.hero__sun{
  position:absolute; right:-6%; bottom:24%; z-index:1; pointer-events:none;
  width:min(78vw,860px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--cream) 86%,var(--gold-soft)) 0%,
    color-mix(in srgb,var(--gold-soft) 80%,transparent) 26%,
    color-mix(in srgb,var(--gold) 30%,transparent) 50%,
    transparent 70%);
  animation:sunbreathe 11s ease-in-out infinite;
}
@keyframes sunbreathe{ 0%,100%{ opacity:.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.05); } }

/* ---- the oversized olive bough: the wow ----
   MOBILE-FIRST: the bough hangs from the TOP of the frame, filling the
   dead headroom above the headline (a large branch dropping into view),
   wide enough to read as a composed scene and masked so it dissolves into
   the gold field before it reaches the type. Upsized to a half-frame
   composition on desktop (see ≥980px). */
.hero__bough{
  position:absolute; top:0; right:-6%; left:auto; z-index:2; pointer-events:none;
  width:min(88%, 470px); height:min(38svh, 340px);
  color:var(--olive-deep);
  /* keep the bough in its OWN clean upper-right zone above the headline:
     ease the very top so the header band (logo + EN/ES) reads clean over it,
     and dissolve the bough into the field before it reaches the eyebrow /
     headline so no leaf or fruit ever sits on a letterform */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 18%, #000 60%, transparent 86%), linear-gradient(to left, #000 74%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to bottom, transparent 0, #000 18%, #000 60%, transparent 86%), linear-gradient(to left, #000 74%, transparent 100%);
          mask-composite:intersect;
}
.hero__bough .bough{ display:block; width:100%; height:100%; }
.bough__branch,.bough__twig{ opacity:.92; }
.bough__leaves path{ fill:var(--olive); opacity:.9; }
/* alternate leaves to a paler underside for depth */
.bough__leaves path:nth-of-type(even){ fill:color-mix(in srgb,var(--olive) 64%,var(--cream)); opacity:.85; }
.bough__fruit circle{ fill:var(--gold); opacity:.95; }
.bough__fruit circle:nth-of-type(3n){ fill:var(--gold-deep); }
/* the pressing line + oil-drop signature — the one closing gesture, made to
   read against the gold field: heavier keystone fruit, a confident press
   line, and a glinting oil-drop. */
.bough__keystone{ fill:var(--gold-deep); }
.bough__pressline{ color:var(--gold-deep); opacity:.9; }
.bough__drop{ fill:var(--gold-deep);
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold-soft) 80%,transparent));
  animation:dropglow 5.5s var(--ease) infinite;
  transform-box:fill-box; transform-origin:50% 0; }
@keyframes dropglow{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }

.hero__inner{ position:relative; z-index:4; max-width:min(62ch,820px); }
.hero__eyebrow{
  font-weight:600; font-size:.78rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 1.1em;
  display:inline-flex; align-items:center; gap:.8em;
}
.hero__eyebrow::before{ content:""; width:38px; height:1.5px; background:var(--gold); display:inline-block; flex:none; }

.hero__title{
  color:var(--bark);
  font-size:clamp(3rem, 12vw, 8.6rem);
  margin:0 0 .3em;
  text-shadow:0 1px 0 color-mix(in srgb,var(--cream) 60%,transparent);
}
.hero__line{ display:block; }
.hero__line--accent{ color:var(--gold-deep); font-style:italic; }

/* the harvest-gold band — the signature pressing line under the headline.
   a thin rule of gold meeting the land, with the olive sprig riding it. */
.hero__band{
  position:relative; z-index:4;
  display:flex; align-items:center; gap:18px;
  margin:0 0 1.7em;
  max-width:560px;
}
.hero__band::after{
  content:""; flex:1 1 auto; height:2px;
  background:linear-gradient(to right, var(--gold) 0%, var(--gold-soft) 60%, transparent 100%);
}
.hero__sprig{ flex:none; color:var(--gold-deep); }
.hero__season{
  flex:none; font-family:var(--sans); font-weight:600;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep);
}

.hero__sub{
  position:relative; z-index:4;
  color:var(--bark-soft);
  font-size:clamp(1.04rem,2.3vw,1.28rem); line-height:1.55; max-width:46ch;
  margin:0 0 2em;
}
.hero__sub b{ color:var(--bark); font-weight:600; }
.hero__cta{ position:relative; z-index:4; display:flex; flex-wrap:wrap; gap:14px; }

/* top-right harvest seal: rating, sitting over the bough as a small mark.
   Hidden on phones (would crowd the eyebrow); shown ≥980px. */
.hero__stamp{
  position:absolute; top:clamp(96px,13vh,132px); right:var(--pad); z-index:4;
  display:none; text-align:right;
}
.hero__stamp-val{ font-family:var(--serif); font-size:2.6rem; color:var(--gold-deep); line-height:.9;
  text-shadow:0 1px 10px color-mix(in srgb,var(--cream) 90%,transparent), 0 0 2px color-mix(in srgb,var(--cream) 90%,transparent); }
.hero__stamp-txt{ font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--bark);
  text-shadow:0 1px 8px color-mix(in srgb,var(--cream) 92%,transparent); margin-top:6px; }

/* hero foot — the gold ground-rule ("the land line"): coordinates left,
   scroll cue right, a hairline of harvest gold spanning between. Sits on
   the field and echoes the pressing-line motif. */
.hero__foot{
  position:relative; z-index:4;
  display:flex; align-items:center; gap:16px;
  margin-top:clamp(28px,5vh,52px);
  padding-top:16px;
}
.hero__foot::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1.5px;
  background:linear-gradient(to right, var(--gold-deep) 0%, color-mix(in srgb,var(--gold-deep) 35%,transparent) 55%, transparent 100%);
}
.hero__coord{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--bark-soft); margin-right:auto;
}
.hero__scroll{
  display:inline-flex; align-items:center; gap:.6em; text-decoration:none;
  color:var(--gold-deep); font-family:var(--sans); font-weight:600;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  min-height:44px;
}
.hero__scroll svg{ color:var(--gold-deep); }
.hero__scroll .scroll-dot,.hero__scroll path{ animation:nudge 2.4s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }

@media (prefers-reduced-motion: reduce){
  .hero__sun,.bough__drop,.hero__scroll path{ animation:none; }
}

/* ============================================================
   ESTATE — the agroturismo, warm oat, asymmetric editorial
   ============================================================ */
.estate{ padding:clamp(72px,12vw,150px) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.estate__grid{ display:grid; gap:clamp(34px,6vw,76px); align-items:start; }
.estate__title{ font-size:clamp(2.1rem,6vw,3.7rem); color:var(--bark); margin:0 0 .55em; max-width:16ch; }
.estate__title em{ color:var(--gold-deep); font-style:italic; }
.estate__lede{ color:var(--bark); font-size:clamp(1.06rem,2vw,1.22rem); max-width:42ch; margin:0 0 1em; }
.estate__copy p{ color:var(--bark-soft); max-width:52ch; }

/* the measures ledger (crop-calendar style key/value) */
.measures{ margin:0; border-top:1.5px solid var(--line); }
.measure{
  display:grid; grid-template-columns:1fr; gap:.15em;
  padding:1em 0; border-bottom:1px solid var(--line);
}
.measure__k{
  font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-deep);
}
.measure__v{ color:var(--bark); font-size:1rem; }
.measure__v b{ font-family:var(--serif); font-size:1.3rem; color:var(--gold-deep); margin-right:.15em; }

/* ============================================================
   LAND & HARVEST — the concept beat. Deep olive band, gold thread.
   ============================================================ */
.land{
  position:relative; isolation:isolate;
  background:
    radial-gradient(120% 80% at 85% 0%, color-mix(in srgb,var(--olive) 38%,#000 4%), transparent 60%),
    var(--olive-deep);
  color:var(--cream);
  padding:clamp(72px,12vw,150px) var(--pad);
  overflow:hidden;
}
.land__inner{ max-width:var(--maxw); margin-inline:auto; position:relative; z-index:2; }
.land__head{ max-width:60ch; margin:0 0 clamp(40px,7vw,72px); }
.land__title{ font-size:clamp(2.1rem,6vw,3.9rem); color:var(--cream); margin:0 0 .5em; max-width:18ch; }
.land__title em{ color:var(--gold-soft); font-style:italic; }
.land__lede{ color:color-mix(in srgb,var(--cream) 86%,transparent); font-size:clamp(1.04rem,2vw,1.2rem); max-width:50ch; }

/* the harvest year — three turning seasons toward the press */
.year{ display:grid; gap:clamp(24px,4vw,40px); }
.season{
  position:relative;
  padding:1.6em 0 1.7em;
  border-top:1.5px solid color-mix(in srgb,var(--gold) 42%,transparent);
}
.season__no{
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  color:var(--gold-soft); letter-spacing:.04em;
}
.season__when{
  display:block; font-family:var(--sans); font-weight:700; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb,var(--cream) 56%,transparent);
  margin:.6em 0 .5em;
}
.season__name{ font-family:var(--serif); font-size:clamp(1.5rem,3.4vw,2.1rem); color:var(--cream); margin:0 0 .35em; line-height:1.06; }
.season__txt{ color:color-mix(in srgb,var(--cream) 82%,transparent); font-size:.98rem; max-width:46ch; margin:0; }

/* the pressing line — gold rule with the oil drop, closing the section */
.press{
  display:flex; align-items:center; gap:16px; margin-top:clamp(40px,6vw,64px);
}
.press__line{ flex:1 1 auto; height:2px; background:linear-gradient(to right, transparent, var(--gold) 30%, var(--gold-soft)); }
.press__txt{
  flex:none; font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,2.6vw,1.6rem);
  color:var(--gold-soft);
}
.press__drop{ flex:none; color:var(--gold-soft); }

/* ============================================================
   STAY — the houses / what's let, warm cards on cream
   ============================================================ */
.stay{ padding:clamp(72px,12vw,150px) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.stay__head{ max-width:62ch; margin:0 0 clamp(36px,6vw,60px); }
.stay__title{ font-size:clamp(2.1rem,6vw,3.7rem); color:var(--bark); margin:0 0 .5em; max-width:20ch; }
.stay__title em{ color:var(--gold-deep); font-style:italic; }
.stay__lede{ color:var(--bark-soft); font-size:clamp(1.02rem,1.9vw,1.16rem); max-width:54ch; }

.stay__grid{ display:grid; gap:clamp(20px,3vw,30px); }
.house{
  position:relative;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  padding:clamp(26px,3.4vw,40px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.house:hover{ transform:translateY(-4px); box-shadow:0 30px 56px -34px color-mix(in srgb,var(--bark) 60%,transparent); border-color:var(--line-gold); }
/* a hairline gold seam down the left — the oil thread, ties to the motif */
.house::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom, var(--gold) 0%, var(--gold-soft) 70%, transparent);
}
.house__no{
  font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--gold-deep);
  letter-spacing:.03em;
}
.house__name{ font-family:var(--serif); font-size:clamp(1.6rem,3.2vw,2.2rem); color:var(--bark); margin:.15em 0 .4em; line-height:1.04; }
.house__txt{ color:var(--bark-soft); font-size:.98rem; margin:0 0 1.3em; max-width:48ch; }
.house__meta{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5em .7em; }
.house__meta li{
  font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.04em;
  color:var(--olive-deep); background:color-mix(in srgb,var(--olive) 16%,transparent);
  padding:.4em .8em; border-radius:100px;
}

.stay__note{
  margin:clamp(34px,5vw,52px) 0 0; padding-top:1.6em; border-top:1.5px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6em 1.2em;
  color:var(--bark-soft); font-size:.98rem;
}
.stay__note .link-gold{
  display:inline-flex; align-items:center; min-height:44px;
  font-weight:600; color:var(--gold-deep); text-decoration:none;
  border-bottom:1.5px solid var(--line-gold); transition:border-color .3s;
}
.stay__note .link-gold:hover{ border-color:var(--gold-deep); }

/* ============================================================
   HARVEST — the big editorial "gold moment", full-bleed type field
   (no usable photo → a built golden field-of-light with the sprig).
   ============================================================ */
.harvest{
  position:relative; isolation:isolate;
  padding:clamp(96px,18vw,210px) var(--pad);
  color:var(--bark);
  overflow:hidden;
  background:
    radial-gradient(100% 120% at 50% 120%, color-mix(in srgb,var(--gold) 70%,transparent) 0%, color-mix(in srgb,var(--gold-soft) 50%,transparent) 36%, transparent 70%),
    linear-gradient(180deg, var(--oat-2) 0%, var(--gold-soft) 100%);
  text-align:center;
}
.harvest::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.4;
  background:repeating-linear-gradient(96deg,
    transparent 0 46px,
    color-mix(in srgb,var(--gold-deep) 12%,transparent) 46px 47px,
    transparent 47px 94px);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 100%, #000, transparent 75%);
          mask-image:radial-gradient(120% 100% at 50% 100%, #000, transparent 75%);
}
.harvest__inner{ max-width:880px; margin-inline:auto; position:relative; z-index:2; }
.harvest__sprig{ color:var(--gold-deep); margin-bottom:18px; }
.harvest__title{ font-size:clamp(2.4rem,8vw,5.2rem); color:var(--bark); margin:0 0 .35em; }
.harvest__title em{ color:var(--gold-deep); font-style:italic; }
.harvest__txt{ color:color-mix(in srgb,var(--bark) 86%,transparent); font-size:clamp(1.08rem,2.2vw,1.32rem); max-width:42ch; margin:0 auto; }
.harvest__sig{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,3vw,1.9rem);
  color:var(--gold-deep); margin:1.4em 0 0;
}

/* ============================================================
   BOOK — direct enquiry, deep bark with gold keystone
   ============================================================ */
.book{
  position:relative; isolation:isolate;
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb,var(--bark) 86%,var(--olive-deep)) 0%, var(--bark) 60%),
    var(--bark);
  color:var(--cream);
  padding:clamp(80px,14vw,160px) var(--pad);
  text-align:center;
}
.book__inner{ max-width:780px; margin-inline:auto; position:relative; z-index:2; }
.book__sprig{ color:var(--gold-soft); margin-bottom:14px; }
.book__kick{ justify-content:center; color:var(--gold-soft); }
.book__title{ font-size:clamp(2.3rem,7vw,4.2rem); color:var(--cream); margin:0 0 .45em; }
.book__title em{ color:var(--gold-soft); font-style:italic; }
.book__txt{ color:color-mix(in srgb,var(--cream) 88%,transparent); font-size:clamp(1.04rem,2vw,1.18rem); max-width:50ch; margin:0 auto 2.2em; }
.book__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.book .btn--solid{ background:var(--gold); color:var(--bark); }
.book .btn--solid:hover{ background:var(--gold-soft); color:var(--bark); transform:translateY(-2px); }
.book .btn--line{ border-color:color-mix(in srgb,var(--cream) 50%,transparent); color:var(--cream); }
.book .btn--line:hover{ background:color-mix(in srgb,#fff 12%,transparent); border-color:var(--cream); }
.book__contact{
  margin:2.4em 0 0; display:flex; flex-wrap:wrap; gap:.6em 1.6em; justify-content:center; align-items:center;
}
.book__contact a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--serif); font-size:1.2rem; color:var(--cream);
  text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--gold-soft) 60%,transparent);
}
.book__contact a:hover{ border-color:var(--gold-soft); }
.book__rating{ display:inline-flex; align-items:center; gap:.5em; color:color-mix(in srgb,var(--cream) 80%,transparent); font-size:.94rem; }
.book__rating .star{ color:var(--gold-soft); }
.book__rating b{ color:var(--cream); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:#2c2719; color:color-mix(in srgb,var(--cream) 76%,transparent); padding:clamp(52px,9vw,90px) var(--pad) 30px; }
.foot__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; gap:38px; }
.foot__mark{ display:inline-flex; color:var(--gold-soft); margin-bottom:10px; }
.foot__name{ font-family:var(--serif); font-size:1.8rem; color:var(--cream); margin:0 0 .2em; }
.foot__place{ font-size:.84rem; color:color-mix(in srgb,var(--cream) 56%,transparent); margin:0; letter-spacing:.05em; }
.foot__h{ font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 1em; }
.foot__col p{ font-size:.92rem; margin:0 0 .6em; }
.foot__col a:not(.btn){ display:inline-flex; align-items:center; min-height:44px; color:color-mix(in srgb,var(--cream) 84%,transparent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s; }
.foot__col a:hover{ border-color:currentColor; }
.foot__book{ margin-top:.5em; color:var(--cream); border-color:color-mix(in srgb,var(--cream) 32%,transparent); }
.foot__book:hover{ border-color:var(--gold-soft); color:var(--gold-soft); }

.foot__base{
  max-width:var(--maxw); margin:clamp(40px,6vw,64px) auto 0; padding-top:24px;
  border-top:1px solid color-mix(in srgb,var(--cream) 14%,transparent);
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center;
}
.foot__rights{ margin:0; font-size:.8rem; color:color-mix(in srgb,var(--cream) 54%,transparent); }
.foot__sign{ margin:0; font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--gold-soft); }

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__sun,.bough__drop,.hero__scroll .scroll-dot,.hero__scroll path{ animation:none; }
}

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (min-width:700px){
  .estate__grid{ grid-template-columns:1.15fr .85fr; }
  .year{ grid-template-columns:repeat(3,1fr); }
  .season{ padding-right:1em; }
  .stay__grid{ grid-template-columns:repeat(2,1fr); }
  .measure{ grid-template-columns:.42fr 1fr; gap:1.4em; align-items:baseline; }
}

/* desktop */
@media (min-width:980px){
  .nav__links{ display:flex; }
  .nav__book{ display:inline-flex; }
  .hero__stamp{ display:block; }
  .stay__grid{ grid-template-columns:repeat(3,1fr); }

  /* the bough becomes the large right-half composition, full height, arcing
     across the dead right space; headline column holds the left third. */
  .hero__bough{
    top:0; bottom:0; left:auto; right:0;
    width:min(60%, 820px); height:auto;
    -webkit-mask-image:linear-gradient(to bottom, #000 80%, transparent 99%), linear-gradient(to left, #000 78%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 80%, transparent 99%), linear-gradient(to left, #000 78%, transparent 100%);
  }
  .hero__inner{ max-width:min(54ch,720px); }
}

/* tablet bridge: a mid-size bough sweeping the upper-right corner */
@media (min-width:700px) and (max-width:979.98px){
  .hero__bough{
    left:auto; right:0; top:0; bottom:auto;
    width:min(58%,560px); height:min(60svh,560px);
    -webkit-mask-image:linear-gradient(to bottom, #000 66%, transparent 98%), linear-gradient(to left, #000 70%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 66%, transparent 98%), linear-gradient(to left, #000 70%, transparent 100%);
  }
}

/* large */
@media (min-width:1240px){
  body{ font-size:18px; }
}