/* ============================================================
   Finca S'Hort de sa Begura — "What the garden keeps"
   Concept: the walled orchard ("s'hort") read as a planted plan.
   A drawn garden plan — terracotta boundary wall, rows of fruit
   trees in shade-green, a central path, the old well — is the
   whole identity. ZERO photos by design: the missing image becomes
   editorial strength. Literary, typographic, quiet, rooted.

   Palette: warm terracotta (the wall, the soil) + deep shade-green
   (cypress / the orchard in shade). Warm paper is GROUND only;
   terracotta + green dominate. Distinct from every sibling — and
   especially from ses-fontanelles (survey/contour/forest-green):
   this is a GARDEN PLAN, not a survey; terracotta-led, not green-only.
   ============================================================ */

:root{
  /* ---- palette ---- */
  --terra:      #b8543a;   /* terracotta — the wall, the soil (signature) */
  --terra-deep: #8f3c28;   /* shadowed terracotta / pressed earth */
  --terra-soft: #cd7a5f;   /* sun on the wall */
  --clay:       #6e3320;   /* deepest earth, for ink on terracotta */

  --shade:      #2f4434;   /* deep shade-green — cypress, orchard in shade (2nd dominant) */
  --shade-deep: #21322767; /* (kept as a helper below) */
  --shade-2:    #243528;   /* near-black green, the deepest beds */
  --leaf:       #50705a;   /* a planted canopy / lighter foliage */
  --leaf-soft:  #7a957f;   /* foliage on the pale ground */

  --paper:      #f4ece0;   /* warm lime-washed ground (NOT cream-dominant) */
  --paper-2:    #ece1d1;   /* a shaded patch of ground */
  --ink:        #2a2018;   /* warm near-black text */
  --ink-soft:   #6a5849;   /* secondary warm brown */

  --line:       color-mix(in srgb, var(--ink) 15%, transparent);
  --line-warm:  color-mix(in srgb, var(--terra) 34%, transparent);
  --line-green: color-mix(in srgb, var(--shade) 30%, transparent);

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

  /* ---- rhythm ---- */
  --pad: clamp(20px, 5.5vw, 92px);
  --maxw: 1200px;
  --r: 3px;            /* soft edge per lane — gentle, not sharp */
  --r-lg: 9px;

  --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; } }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.64;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;                 /* belt-and-braces vs 390 overflow */
}
img{ display:block; max-width:100%; height:auto; }
svg{ display:block; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:500; }
p{ margin:0 0 1em; }
:focus-visible{ outline:2.5px solid var(--terra); outline-offset:3px; border-radius:2px; }

/* anchored sections clear the fixed bar when jumped to */
#finca,#hort,#stay,#east,#book{ scroll-margin-top:80px; }

/* display headings: NEVER shatter a word into one-letter-per-line */
.hero__title,.sec-title,.book__title{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.008em;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}

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

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --bh:48px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--bh); padding:0 22px;
  font-family:var(--sans); font-weight:600; font-size:.93rem; letter-spacing:.012em;
  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 30px; font-size:1rem; }
.btn--solid{ background:var(--terra); color:#fff; }
.btn--solid:hover{ background:var(--terra-deep); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--terra); color:var(--terra); }
.btn--block{ width:100%; }

/* ============================================================
   Kicker / eyebrow — a planted-row tick precedes it
   ============================================================ */
.kicker{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:600;
  font-size:.73rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terra-deep); margin:0 0 1.1em;
}
.kicker::before{
  content:""; width:26px; height:0; flex:none;
  border-top:1.5px solid currentColor;
  /* a tiny "planted row" — three dots over the rule */
}
.kicker--light{ color:color-mix(in srgb,var(--paper) 84%,var(--terra)); }
.kicker--green{ color:var(--leaf); }

/* ============================================================
   HEADER
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:14px;
  padding:13px var(--pad);
  padding-top:max(13px, env(safe-area-inset-top));
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* over the (light paper) hero the bar inks dark immediately for legibility */
.nav__brand{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  color:var(--ink); margin-right:auto; min-height:44px; padding:4px 2px;
}
.nav__mark{ display:inline-flex; color:var(--terra); flex:none; }
.nav__name{
  font-family:var(--serif); font-size:1.32rem; font-weight:600;
  color:var(--ink); letter-spacing:.004em; line-height:1;
}
.nav__name small{
  display:block; font-family:var(--sans); font-weight:600;
  font-size:.56rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:3px;
}
.nav.is-solid{
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:saturate(135%) blur(10px);
  -webkit-backdrop-filter:saturate(135%) blur(10px);
  border-bottom-color:var(--line);
}

.nav__links{ display:none; gap:28px; }
.nav__links a{
  text-decoration:none; color:var(--ink-soft); font-weight:500; font-size:.92rem;
  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(--terra); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

.nav__right{ display:flex; align-items:center; gap:10px; }
.lang{ display:inline-flex; align-items:center; gap:2px; }
.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:.82rem; letter-spacing:.04em;
  color:var(--ink-soft); transition:color .3s var(--ease);
}
.lang__btn.is-active{ color:var(--terra); }
.lang__btn:hover{ color:var(--ink); }
.lang__sep{ color:var(--line); }

.nav__book{ display:none; border-color:var(--line); color:var(--ink); background:transparent; }
.nav__book:hover{ border-color:var(--terra); color:var(--terra); }

/* ============================================================
   HERO — full-viewport concept-led statement, NO photo.
   A drawn aerial GARDEN PLAN of the walled orchard fills the frame;
   the Spectral headline sits inside the enclosure.
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh; min-height:100dvh;
  display:grid;
  isolation:isolate;
  background:
    radial-gradient(125% 90% at 50% 6%, var(--paper) 0%, var(--paper-2) 70%, #e6dac8 100%);
  overflow:hidden;
}

/* the garden-plan drawing — absolutely covers the hero, behind type.
   Kept faint, like a drawing on the paper, so type reads over it. */
.hort-plan{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-2;
  color:var(--terra);                 /* wall colour via currentColor */
}
.hort-plan .wall{ stroke:var(--terra); }
.hort-plan .wall-soft{ stroke:var(--line-warm); }
.hort-plan .row-line{ stroke:var(--line-green); }
.hort-plan .path-line{ stroke:color-mix(in srgb,var(--terra) 42%,transparent); }
.hort-plan .tree-fill{ fill:color-mix(in srgb,var(--leaf) 15%,transparent); stroke:color-mix(in srgb,var(--leaf) 64%,transparent); }
.hort-plan .tree-dot{ fill:color-mix(in srgb,var(--shade) 80%,transparent); }
.hort-plan .well-ring{ fill:none; stroke:var(--terra-deep); }
.hort-plan .well-core{ fill:var(--terra-deep); }
.hort-plan .label{
  fill:color-mix(in srgb,var(--ink-soft) 80%,transparent); font-family:var(--sans); font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
}

/* soft drift on the planted canopies */
.hort-plan .canopies{ transform-box:fill-box; transform-origin:center; }
@keyframes leafDrift{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
.hort-plan .canopies{ animation:leafDrift 12s ease-in-out infinite; }

/* paper veil — a warm wash that keeps the headline column on clean ground.
   Desktop: pooled bottom-left so the plan stays open on the right.
   Mobile: nearly the full frame, so every line reads cleanly (the plan
   becomes a faint ghost behind the type — the full drawing reads on desktop). */
.hero__veil{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(to top,
      var(--paper) 0%,
      color-mix(in srgb,var(--paper) 97%,transparent) 46%,
      color-mix(in srgb,var(--paper) 88%,transparent) 66%,
      color-mix(in srgb,var(--paper) 64%,transparent) 82%,
      color-mix(in srgb,var(--paper) 30%,transparent) 94%);
}
/* on small screens the slice zooms the plan large — dim it to a ghost */
@media (max-width:979px){
  .hort-plan .tree-fill{ fill:color-mix(in srgb,var(--leaf) 9%,transparent); stroke:color-mix(in srgb,var(--leaf) 34%,transparent); }
  .hort-plan .tree-dot{ fill:color-mix(in srgb,var(--shade) 40%,transparent); }
  .hort-plan .label{ fill:color-mix(in srgb,var(--ink-soft) 42%,transparent); }
}

/* hero content column, seated in the lower-left of the enclosure */
.hero__inner{
  align-self:end;
  max-width:min(640px, 92vw);
  padding:0 var(--pad) clamp(54px, 11vh, 112px);
  padding-bottom:max(clamp(54px,11vh,112px), calc(env(safe-area-inset-bottom) + 40px));
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.7em;
  font-weight:600; font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--terra-deep); margin:0 0 1.1em;
  max-width:100%;
}
.hero__eyebrow span{ }
.hero__eyebrow::before{
  content:""; width:30px; height:1.5px; background:var(--terra); flex:none;
}
.hero__title{
  color:var(--ink);
  font-size:clamp(2.9rem, 9.6vw, 6.6rem);
  margin:0 0 .42em;
  max-width:13ch;
}
.hero__title .em{
  font-style:italic; font-weight:500;
  color:var(--terra-deep);
}
.hero__title .leaf{ color:var(--shade); font-style:italic; }
.hero__sub{
  color:var(--ink-soft);
  font-size:clamp(1.02rem, 2.2vw, 1.22rem); line-height:1.58;
  max-width:46ch; margin:0 0 1.7em;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* a quiet readout, the garden's own facts — sits under the CTA */
.hero__note{
  margin:1.9em 0 0; padding-top:1.2em;
  border-top:1px solid var(--line-warm);
  display:flex; flex-wrap:wrap; gap:1.4em 2.2em;
}
.hero__note div{ display:flex; flex-direction:column; gap:.15em; }
.hero__note dt{
  font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--terra-deep);
}
.hero__note dd{
  margin:0; font-family:var(--serif); font-size:1.02rem; color:var(--ink);
  font-style:italic;
}

.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(22px,5vh,40px);
  display:none; align-items:center; gap:.7em;
  text-decoration:none; color:var(--ink-soft);
  font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  writing-mode:vertical-rl; padding:8px;
}
.hero__scroll::after{
  content:""; width:1.5px; height:44px; background:var(--terra);
  display:block; margin-top:.6em;
}
.hero__scroll:hover{ color:var(--terra); }

/* ============================================================
   Section scaffold
   ============================================================ */
.band{ padding:clamp(64px,11vw,150px) var(--pad); }
.wrap{ max-width:var(--maxw); margin-inline:auto; }
.sec-head{ max-width:var(--maxw); margin:0 auto clamp(34px,6vw,64px); }
.sec-title{ font-size:clamp(1.9rem,5.4vw,3.2rem); margin:0 0 .5em; max-width:20ch; }
.sec-intro{ color:var(--ink-soft); max-width:54ch; margin:0; font-size:1.04rem; }

/* a hairline "planted row" rule used as a section divider */
.rowrule{ max-width:var(--maxw); margin:0 auto; height:auto; }
.rowrule svg{ width:100%; height:34px; }
.rowrule .rr-line{ stroke:var(--line-warm); }
.rowrule .rr-tree{ fill:var(--leaf); }

/* ============================================================
   THE FINCA — story, two columns, a small inline plan vignette
   ============================================================ */
.finca{ background:var(--paper); }
.finca__grid{ display:grid; gap:clamp(34px,6vw,76px); align-items:start; }
.finca__title{ color:var(--ink); }
.finca__title .em{ color:var(--terra-deep); font-style:italic; }
.finca__copy p{ color:var(--ink-soft); max-width:54ch; }

.ledger{ list-style:none; margin:1.8em 0 0; padding:0; border-top:1px solid var(--line); }
.ledger li{
  display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:1em;
  padding:.85em 0; border-bottom:1px solid var(--line);
}
.ledger__k{
  font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--terra-deep);
  white-space:nowrap; padding-top:.2em;
}
.ledger__v{ color:var(--ink); font-size:.98rem; }

/* the inline plan card — a framed fragment of the garden drawing */
.plan-card{
  position:relative; border-radius:var(--r-lg);
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border:1px solid var(--line-warm);
  overflow:hidden;
}
.plan-card svg{ width:100%; height:auto; display:block; }
.plan-card__cap{
  margin:0; padding:14px 18px 16px;
  font-family:var(--serif); font-style:italic; font-size:.92rem; color:var(--ink-soft);
  border-top:1px solid var(--line-warm);
}
.plan-card .wall{ stroke:var(--terra); }
.plan-card .row-line{ stroke:var(--line-green); }
.plan-card .tree-fill{ fill:color-mix(in srgb,var(--leaf) 22%,transparent); stroke:var(--leaf); }
.plan-card .tree-dot{ fill:var(--shade); }
.plan-card .path-line{ stroke:color-mix(in srgb,var(--terra) 46%,transparent); }
.plan-card .well-ring{ fill:none; stroke:var(--terra-deep); }
.plan-card .well-core{ fill:var(--terra-deep); }

/* ============================================================
   THE ORCHARD & GARDEN — the deep shade-green band (2nd dominant)
   The "what the garden keeps" inventory, set as planted rows.
   ============================================================ */
.hort{
  background:
    radial-gradient(120% 80% at 82% 0%, color-mix(in srgb,var(--leaf) 26%,var(--shade)) 0%, transparent 58%),
    var(--shade);
  color:var(--paper);
}
.hort__head{ max-width:var(--maxw); margin:0 auto clamp(36px,6vw,64px); }
.hort__title{ color:var(--paper); }
.hort__title .em{ color:color-mix(in srgb,var(--terra-soft) 92%,#fff); font-style:italic; }
.hort__intro{ color:color-mix(in srgb,var(--paper) 82%,transparent); max-width:52ch; margin:0; }

/* planted rows: each "keep" is a row with a tree glyph + reading */
.rows{ max-width:var(--maxw); margin-inline:auto; list-style:none; padding:0;
  border-top:1px solid color-mix(in srgb,var(--paper) 22%,transparent); }
.row{
  display:grid; grid-template-columns:auto 1fr; gap:1.1em 1.4em; align-items:start;
  padding:clamp(20px,3vw,30px) 0;
  border-bottom:1px solid color-mix(in srgb,var(--paper) 22%,transparent);
}
.row__glyph{ width:46px; height:46px; flex:none; color:color-mix(in srgb,var(--terra-soft) 90%,#fff); }
.row__glyph svg{ width:100%; height:100%; }
.row__glyph .g-ring{ fill:none; stroke:currentColor; }
.row__glyph .g-fill{ fill:color-mix(in srgb,currentColor 18%,transparent); stroke:currentColor; }
.row__glyph .g-dot{ fill:currentColor; }
.row__body{ }
.row__name{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,3vw,1.7rem);
  color:var(--paper); margin:0 0 .2em; line-height:1.12;
}
.row__name .es{ font-style:italic; color:color-mix(in srgb,var(--terra-soft) 92%,#fff); }
.row__txt{ color:color-mix(in srgb,var(--paper) 80%,transparent); margin:0; max-width:56ch; font-size:.98rem; }

/* ============================================================
   THE STAY — the apartments, terracotta-warm, plotted in the garden
   ============================================================ */
.stay{ background:var(--paper); }
.stay__head{ max-width:var(--maxw); margin:0 auto clamp(36px,6vw,60px); }
.stay__title{ color:var(--ink); }
.stay__title .em{ color:var(--terra-deep); font-style:italic; }
.stay__intro{ color:var(--ink-soft); max-width:54ch; margin:0; }

.plots{ max-width:var(--maxw); margin-inline:auto; display:grid; gap:clamp(16px,2.4vw,24px); }
.plot{
  position:relative;
  background:linear-gradient(180deg, #fbf6ee 0%, var(--paper) 100%);
  border:1px solid var(--line-warm); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,30px);
  display:flex; flex-direction:column; gap:.55em;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  overflow:hidden;
}
.plot:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 50px -32px color-mix(in srgb,var(--terra) 60%,transparent);
  border-color:var(--terra);
}
/* a planted-tree glyph sits in the corner of each plot */
.plot__glyph{
  position:absolute; top:14px; right:14px; width:40px; height:40px;
  color:var(--leaf-soft); opacity:.85;
}
.plot__glyph svg{ width:100%; height:100%; }
.plot__glyph .g-ring{ fill:none; stroke:currentColor; }
.plot__glyph .g-fill{ fill:color-mix(in srgb,currentColor 16%,transparent); stroke:currentColor; }
.plot__glyph .g-dot{ fill:var(--shade); }
.plot__tag{
  font-family:var(--sans); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--terra-deep);
}
.plot__name{ font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem,3vw,1.75rem);
  color:var(--ink); margin:0; line-height:1.1; max-width:11ch; }
.plot__desc{ color:var(--ink-soft); margin:.2em 0 0; font-size:.97rem; max-width:46ch; }
.plot__meta{
  margin:.6em 0 0; padding-top:.8em; border-top:1px solid var(--line);
  font-family:var(--sans); font-size:.84rem; color:var(--ink-soft); letter-spacing:.01em;
}

/* ============================================================
   THE RURAL EAST — setting, deep-earth band, a distance legend
   ============================================================ */
.east{
  background:
    radial-gradient(130% 90% at 16% 0%, var(--terra-deep) 0%, transparent 56%),
    var(--clay);
  color:var(--paper);
}
.east__grid{ display:grid; gap:clamp(34px,6vw,72px); align-items:start; }
.east__title{ color:var(--paper); }
.east__title .em{ color:color-mix(in srgb,var(--terra-soft) 95%,#fff); font-style:italic; }
.east__copy p{ color:color-mix(in srgb,var(--paper) 84%,transparent); max-width:52ch; }

.legend{ list-style:none; margin:0; padding:0;
  border-top:1px solid color-mix(in srgb,var(--paper) 24%,transparent); }
.legend__row{
  display:grid; grid-template-columns:auto 1fr; gap:1.2em; align-items:baseline;
  padding:.95em 0; border-bottom:1px solid color-mix(in srgb,var(--paper) 24%,transparent);
}
.legend__dist{
  font-family:var(--serif); font-style:italic; font-size:1.06rem;
  color:color-mix(in srgb,var(--terra-soft) 96%,#fff); white-space:nowrap; min-width:5.6em;
}
.legend__name{ display:block; color:var(--paper); font-size:1rem; font-weight:500; }
.legend__note{ display:block; color:color-mix(in srgb,var(--paper) 72%,transparent); font-size:.9rem; margin-top:.15em; }

/* ============================================================
   BOOK — the keystone CTA, the walled-garden gate
   ============================================================ */
.book{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(125% 95% at 50% -10%, var(--terra) 0%, var(--terra-deep) 56%, var(--clay) 100%);
  color:var(--paper);
  padding:clamp(70px,13vw,156px) var(--pad);
  text-align:center;
}
/* a faint planted-row field behind the CTA */
.book__field{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; opacity:.5; }
.book__field .bf-row{ stroke:color-mix(in srgb,var(--paper) 30%,transparent); }
.book__field .bf-tree{ fill:none; stroke:color-mix(in srgb,var(--paper) 44%,transparent); }
.book__field .bf-dot{ fill:color-mix(in srgb,var(--paper) 50%,transparent); }

.book__inner{ max-width:760px; margin-inline:auto; }
.book__title{ color:var(--paper); font-size:clamp(2rem,6vw,3.5rem); margin:0 0 .5em; }
.book__title .em{ font-style:italic; color:color-mix(in srgb,var(--paper) 92%,var(--terra-soft)); }
.book__txt{ color:color-mix(in srgb,var(--paper) 90%,transparent); max-width:52ch; margin:0 auto 2em; }
.book__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.book .btn--solid{ background:var(--paper); color:var(--terra-deep); }
.book .btn--solid:hover{ background:#fff; transform:translateY(-2px); }
.book .btn--ghost{ border-color:color-mix(in srgb,var(--paper) 55%,transparent); color:var(--paper); }
.book .btn--ghost:hover{ border-color:var(--paper); background:color-mix(in srgb,#fff 12%,transparent); color:var(--paper); }
.book__addr{ margin:2em 0 0; }
.book__addr a{
  font-family:var(--serif); font-style:italic; font-size:1.12rem; color:var(--paper);
  text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--paper) 50%,transparent);
  padding-bottom:2px;
}
.book__addr a:hover{ border-color:var(--paper); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--shade-2); color:color-mix(in srgb,var(--paper) 80%,transparent);
  padding:clamp(48px,8vw,84px) var(--pad) calc(28px + env(safe-area-inset-bottom)); }
.foot__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; gap:36px; }
.foot__mark{ display:inline-flex; color:var(--terra-soft); margin-bottom:8px; }
.foot__name{ font-family:var(--serif); font-size:1.55rem; font-weight:600; color:var(--paper); margin:0 0 .2em; }
.foot__tag{ font-size:.9rem; color:color-mix(in srgb,var(--paper) 64%,transparent); margin:0; max-width:34ch; }
.foot__h{ font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--terra-soft); margin:0 0 1em; }
.foot__col p{ font-size:.9rem; margin:0 0 .6em; }
.foot__col a:not(.btn){ display:inline-block; padding:7px 0; color:color-mix(in srgb,var(--paper) 86%,transparent);
  text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s; min-height:40px; }
.foot__col a:not(.btn):hover{ border-color:currentColor; }
.foot__plain{ font-size:.84rem !important; color:color-mix(in srgb,var(--paper) 56%,transparent); letter-spacing:.03em; }
.foot__book{ margin-top:.4em; color:var(--paper); border-color:color-mix(in srgb,var(--paper) 32%,transparent); }
.foot__book:hover{ border-color:var(--terra-soft); color:var(--terra-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(--paper) 14%,transparent);
  display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:center;
}
.foot__copy{ margin:0; font-size:.8rem; color:color-mix(in srgb,var(--paper) 56%,transparent); }
.foot__sign{ margin:0; font-family:var(--serif); font-style:italic; font-size:1rem; color:var(--terra-soft); }
.foot__sign span{ color:var(--paper); }

/* ============================================================
   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; }
  .hort-plan .canopies{ animation:none; }
  .plot:hover{ transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:680px){
  .finca__grid{ grid-template-columns:1.08fr .92fr; }
  .east__grid{ grid-template-columns:.92fr 1.08fr; }
  .plots{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:980px){
  .nav__links{ display:flex; }
  .nav__book{ display:inline-flex; }
  .hero__scroll{ display:inline-flex; }
  .plots{ grid-template-columns:repeat(3,1fr); }
  .plot--wide{ grid-column:span 1; }

  /* desktop veil: pool the wash to the lower-LEFT so the orchard plan
     stays open and legible on the right, behind nothing. */
  .hero__veil{
    background:
      radial-gradient(120% 116% at 12% 100%,
        var(--paper) 0%,
        color-mix(in srgb,var(--paper) 90%,transparent) 30%,
        color-mix(in srgb,var(--paper) 60%,transparent) 48%,
        color-mix(in srgb,var(--paper) 22%,transparent) 62%,
        transparent 74%),
      linear-gradient(to top,
        color-mix(in srgb,var(--paper) 70%,transparent) 0%,
        transparent 30%);
  }
  .hero__inner{ max-width:min(620px, 56vw); }
}
@media (min-width:1240px){
  body{ font-size:18px; }
}