/* ============================================================
   Finca Sestelrica — "The finca, bay by bay"
   Concept: the stone house read as a measured architectural sequence —
   the regular rhythm of its bays, the limestone course, light across the wall.
   Signature motif: a fine VERTICAL BAY-REGISTER (an elevation tick-scale of the
   building's bays) + a thin sage springing-LINE that marks the light height.
   Palette: cool architectural stone — greys, marès limestone, a quiet sage-grey.
   Type: Lora (calm bracketed serif) over Inter. Edge: precise, gridded, restrained.
   ============================================================ */

:root{
  /* ---- palette: cool architectural stone (NOT warm-cream, NOT green) ---- */
  --ink:        #23262a;   /* cool near-black graphite — text */
  --ink-soft:   #565b61;   /* slate grey — secondary text */
  --ink-faint:  #878d94;   /* faint grey — meta, captions */
  --slate:      #3a4046;   /* deep cool slate — dark sections */
  --slate-deep: #2b3035;
  --stone:      #b9b2a6;   /* marès limestone — the warm-cool stone itself */
  --stone-soft: #cfc9bf;
  --marès:      #a7a094;   /* deeper limestone for lines on light */
  --sage:       #8b958c;   /* sage-grey — the single accent (cool, desaturated) */
  --sage-deep:  #6f7a72;
  --sage-line:  #9aa39a;
  --paper:      #f4f3f0;   /* cool off-white plaster — page ground */
  --paper-2:    #eceae5;   /* a half-tone panel */
  --paper-3:    #e4e1da;   /* deeper plaster band */
  --white:      #fbfbfa;

  --line:       color-mix(in srgb, var(--ink) 14%, transparent);
  --line-soft:  color-mix(in srgb, var(--ink) 9%, transparent);
  --line-light: color-mix(in srgb, #ffffff 28%, transparent);

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

  /* ---- rhythm / grid ---- */
  --pad:  clamp(20px, 5.4vw, 92px);
  --maxw: 1200px;
  --gut:  clamp(28px, 5vw, 76px);
  --r: 0px;          /* sharp, architectural — no rounding */
  --r-soft: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,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; } }
#finca,#stone,#rooms,#gallery,#setting,#book{ scroll-margin-top:78px; }

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

/* display headings: never shatter one-letter-per-line, wide measure */
.hero__title,.finca__title,.stone__title,.rooms__title,.gallery__title,.setting__title,.book__title{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.012em;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}

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

/* ============================================================
   The signature SCALE — a vertical bay-register / elevation tick-rule.
   A row of fine vertical ticks at a measured rhythm: the building's bays.
   Rendered as a repeating-linear-gradient so it is crisp & cheap.
   ============================================================ */
.scale{
  --tick: color-mix(in srgb, var(--ink) 34%, transparent);
  height:18px;
  background:
    repeating-linear-gradient(to right,
      var(--tick) 0, var(--tick) 1px,
      transparent 1px, transparent 26px);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.scale--tall{ height:30px; }
.scale--light{ --tick: color-mix(in srgb, #ffffff 46%, transparent); }
.scale--sage{ --tick: color-mix(in srgb, var(--sage) 70%, transparent); }
/* the longer "datum" tick every 4th bay: drawn as a second, sparser layer */
.scale--reg{
  background:
    repeating-linear-gradient(to right,
      var(--tick) 0, var(--tick) 1.5px,
      transparent 1.5px, transparent 104px),
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--ink) 18%, transparent) 0, color-mix(in srgb, var(--ink) 18%, transparent) 1px,
      transparent 1px, transparent 26px);
}
.scale--reg.scale--light{
  background:
    repeating-linear-gradient(to right,
      color-mix(in srgb,#fff 64%,transparent) 0, color-mix(in srgb,#fff 64%,transparent) 1.5px,
      transparent 1.5px, transparent 104px),
    repeating-linear-gradient(to right,
      color-mix(in srgb,#fff 34%,transparent) 0, color-mix(in srgb,#fff 34%,transparent) 1px,
      transparent 1px, transparent 26px);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --bh:50px;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:var(--bh); padding:0 26px;
  font-family:var(--sans); font-weight:600; font-size:.86rem;
  letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none; border-radius:var(--r); cursor:pointer;
  border:1.5px solid transparent; background:transparent;
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
  white-space:nowrap;
}
.btn--lg{ --bh:56px; padding:0 34px; font-size:.9rem; }
.btn--xl{ --bh:60px; padding:0 40px; font-size:.94rem; }
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--slate); transform:translateY(-2px); }
.btn--line{ border-color:var(--line); color:var(--ink); }
.btn--line:hover{ border-color:var(--ink); background:var(--ink); color:var(--paper); transform:translateY(-2px); }

/* ============================================================
   Kicker — bay label "B.01 · The finca" with a leading tick
   ============================================================ */
.kicker{
  display:flex; align-items:center; gap:.85em;
  font-family:var(--sans); font-weight:600;
  font-size:.72rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sage-deep); margin:0 0 1.3em;
}
.kicker__bay{
  font-family:var(--sans); font-weight:700; font-size:.72rem; letter-spacing:.12em;
  color:var(--ink); padding:3px 8px;
  border:1.4px solid var(--ink); border-radius:var(--r);
  line-height:1; flex:none;
}
.kicker--light{ color:color-mix(in srgb,var(--stone) 92%,#fff); }
.kicker--light .kicker__bay{ color:var(--paper); border-color:color-mix(in srgb,#fff 60%,transparent); }

/* ============================================================
   HEADER
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:14px;
  padding:15px var(--pad);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.nav.is-solid{
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  -webkit-backdrop-filter:saturate(130%) blur(12px);
          backdrop-filter:saturate(130%) blur(12px);
  border-bottom-color:var(--line);
  padding-top:11px; padding-bottom:11px;
}
.nav__brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--white); margin-right:auto; min-height:44px; padding:4px 2px; transition:color .4s var(--ease); }
.nav__mark{ display:inline-flex; color:var(--white); transition:color .4s var(--ease); }
.nav__name{
  font-family:var(--serif); font-size:1.28rem; font-weight:500; color:var(--white);
  letter-spacing:.005em; line-height:1; transition:color .4s var(--ease);
  text-shadow:0 1px 16px rgba(20,22,25,.45);
}
.nav__sub{
  display:block; font-family:var(--sans); font-size:.58rem; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase; margin-top:3px;
  color:color-mix(in srgb,var(--white) 78%,transparent);
  text-shadow:0 1px 12px rgba(20,22,25,.5);
}
.nav.is-solid .nav__brand{ color:var(--ink); }
.nav.is-solid .nav__mark{ color:var(--sage-deep); }
.nav.is-solid .nav__name{ color:var(--ink); text-shadow:none; }
.nav.is-solid .nav__sub{ color:var(--ink-soft); text-shadow:none; }

.nav__links{ display:none; gap:32px; }
.nav__links a{
  text-decoration:none; color:var(--white); font-weight:500; font-size:.83rem;
  letter-spacing:.04em; text-transform:uppercase; position:relative; padding:5px 0;
  transition:color .4s var(--ease); text-shadow:0 1px 14px rgba(20,22,25,.6);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:currentColor; transition:width .35s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav.is-solid .nav__links a{ color:var(--ink-soft); text-shadow:none; }
.nav.is-solid .nav__links a:hover{ color:var(--ink); }
.nav.is-solid .nav__links a::after{ background:var(--sage-deep); }

.nav__right{ display:flex; align-items:center; gap:14px; }
.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:.78rem; letter-spacing:.06em;
  color:color-mix(in srgb,var(--white) 66%,transparent); transition:color .3s var(--ease);
}
.lang__btn.is-active{ color:var(--white); }
.lang__btn:hover{ color:var(--white); }
.lang__sep{ color:color-mix(in srgb,var(--white) 42%,transparent); font-size:.78rem; }
.nav.is-solid .lang__btn{ color:var(--ink-faint); }
.nav.is-solid .lang__btn.is-active{ color:var(--ink); }
.nav.is-solid .lang__btn:hover{ color:var(--ink); }
.nav.is-solid .lang__sep{ color:var(--line); }

.nav__book{ display:none; border-color:color-mix(in srgb,var(--white) 52%,transparent); color:var(--white); }
.nav__book:hover{ border-color:var(--white); background:color-mix(in srgb,#fff 14%,transparent); color:var(--white); }
.nav.is-solid .nav__book{ border-color:var(--line); color:var(--ink); }
.nav.is-solid .nav__book:hover{ border-color:var(--ink); background:var(--ink); color:var(--paper); }

/* ============================================================
   HERO — full-bleed photo, cool scrim, big Lora type, the bay-scale wow
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(54px,11vh,104px);
  overflow:hidden; isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-3; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 62%;
  /* cool the warm golden-hour photo slightly toward stone-neutral */
  filter:saturate(.86) contrast(1.04) brightness(.99);
}
.hero__scrim{
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(to top,
      color-mix(in srgb,var(--slate-deep) 92%,#000 10%) 0%,
      color-mix(in srgb,var(--slate-deep) 70%,transparent) 20%,
      color-mix(in srgb,var(--slate-deep) 36%,transparent) 42%,
      transparent 66%),
    linear-gradient(to bottom, rgba(28,31,35,.42), rgba(28,31,35,.08) 16%, transparent 30%),
    linear-gradient(to right, rgba(28,31,35,.5), rgba(28,31,35,.14) 50%, transparent 74%);
}
/* a very fine cool-grey tint so the whole frame reads stone, not gold */
.hero__tint{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:color-mix(in srgb,var(--slate) 16%,transparent);
  mix-blend-mode:multiply;
}

.hero__inner{ max-width:680px; position:relative; }
.hero__eyebrow{
  font-family:var(--sans); font-weight:600; font-size:.74rem;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--white); margin:0 0 1.1em;
  display:inline-flex; align-items:center; gap:.85em;
  text-shadow:0 1px 3px rgba(22,24,28,.8), 0 2px 18px rgba(22,24,28,.6);
}
.hero__eyebrow::before{
  content:""; width:30px; height:1.5px; flex:none;
  background:color-mix(in srgb,var(--white) 82%,transparent);
}
.hero__title{
  color:var(--white);
  font-size:clamp(2.7rem, 9vw, 6rem);
  margin:0 0 .42em;
  text-shadow:0 2px 30px rgba(22,24,28,.6), 0 1px 4px rgba(22,24,28,.5);
}
.hero__line{ display:block; }
.hero__line--accent{ font-style:italic; color:var(--stone-soft); }
.hero__sub{
  color:color-mix(in srgb,var(--white) 94%,transparent);
  font-size:clamp(1rem,2.3vw,1.2rem); line-height:1.55; max-width:43ch;
  margin:0 0 2em;
  text-shadow:0 1px 3px rgba(22,24,28,.7), 0 2px 16px rgba(22,24,28,.5);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:13px; }
.hero__cta .btn--solid{ background:var(--white); color:var(--ink); box-shadow:0 14px 34px -16px rgba(20,22,25,.7); }
.hero__cta .btn--solid:hover{ background:#fff; transform:translateY(-2px); }
.hero__cta .btn--line{
  border-color:color-mix(in srgb,var(--white) 60%,transparent); color:var(--white);
  background:color-mix(in srgb,#1c1f23 26%,transparent);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.hero__cta .btn--line:hover{ border-color:var(--white); background:color-mix(in srgb,#1c1f23 42%,transparent); color:var(--white); }

/* the bay-register rides the foot of the hero — the signature moment */
.hero__register{
  position:absolute; left:var(--pad); right:var(--pad); bottom:22px; z-index:2;
  display:flex; align-items:flex-end; gap:16px;
}
.hero__register .scale{ flex:1 1 auto; }
.hero__datum{
  font-family:var(--sans); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in srgb,var(--white) 74%,transparent); white-space:nowrap; flex:none;
  text-shadow:0 1px 8px rgba(22,24,28,.7);
}
.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(54px,11vh,104px); z-index:2;
  display:none; flex-direction:column; align-items:center; gap:9px;
  text-decoration:none; color:color-mix(in srgb,var(--white) 84%,transparent);
  font-family:var(--sans); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  writing-mode:vertical-rl;
}
.hero__scroll svg{ width:18px; height:30px; writing-mode:horizontal-tb; }
.hero__scroll .scroll-line{ stroke:currentColor; stroke-width:1.4; fill:none; }
.hero__scroll .scroll-dot{ animation:fall 2.4s var(--ease) infinite; }
@keyframes fall{
  0%{ transform:translateY(0); opacity:0; }
  20%{ opacity:1; } 70%{ transform:translateY(14px); opacity:1; }
  100%{ transform:translateY(20px); opacity:0; }
}

/* ============================================================
   FINCA — the opening statement: copy + measured detail list
   ============================================================ */
.finca{ padding:clamp(70px,12vw,150px) var(--pad) clamp(54px,9vw,110px); max-width:var(--maxw); margin-inline:auto; }
.finca__lead{ max-width:64ch; }
.finca__title{
  font-size:clamp(2rem,5.4vw,3.4rem); color:var(--ink); margin:.1em 0 .55em; max-width:20ch;
}
.finca__title em{ font-style:italic; color:var(--sage-deep); }
.finca__intro{ color:var(--ink-soft); font-size:clamp(1.05rem,2vw,1.22rem); max-width:54ch; margin:0 0 1.1em; }
.finca__p{ color:var(--ink-soft); max-width:56ch; }

/* the measured ledger — a row of facts on a tick baseline */
.measures{
  margin:clamp(40px,6vw,70px) 0 0;
  display:grid; gap:0;
  border-top:1.5px solid var(--ink);
}
.measure{
  display:flex; align-items:baseline; gap:1.1em;
  padding:1.15em 0; border-bottom:1px solid var(--line);
}
.measure__k{
  font-family:var(--sans); font-weight:700; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage-deep); min-width:8.5em; flex:none;
}
.measure__v{ color:var(--ink); font-size:1.02rem; }
.measure__v b{ font-family:var(--serif); font-weight:500; font-style:italic; color:var(--ink); }

/* ============================================================
   STONE — architecture & light: full-bleed dark slate band, framed photo
   ============================================================ */
.stone{
  position:relative;
  background:var(--slate-deep); color:var(--paper);
  padding:clamp(72px,12vw,150px) 0;
  overflow:hidden;
}
.stone__rule{ position:absolute; left:0; right:0; height:18px; }
.stone__rule--top{ top:0; }
.stone__rule--bot{ bottom:0; }
.stone__grid{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad);
  display:grid; gap:var(--gut); align-items:center;
}
.stone__copy .kicker{ color:var(--sage-line); }
.stone__title{ font-size:clamp(1.9rem,5vw,3.1rem); color:var(--white); margin:0 0 .6em; max-width:17ch; }
.stone__title em{ font-style:italic; color:var(--stone); }
.stone__p{ color:color-mix(in srgb,var(--stone) 96%,#fff); max-width:50ch; }
.stone__p--soft{ color:color-mix(in srgb,var(--stone) 80%,transparent); }

/* the springing-LINE: a thin sage hairline with a tick, the "light height" */
.springline{
  display:flex; align-items:center; gap:1em; margin:1.9em 0 0;
  font-family:var(--sans); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sage-line);
}
.springline::before{ content:""; width:46px; height:1.5px; background:var(--sage-line); flex:none; }
.springline::after{ content:""; flex:1 1 auto; height:1px; background:color-mix(in srgb,var(--sage-line) 40%,transparent); }

.stone__figs{ display:grid; gap:14px; }
.stone__fig{ position:relative; margin:0; overflow:hidden; background:var(--slate); }
.stone__fig img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.stone__fig:hover img{ transform:scale(1.03); }
.stone__fig--tall{ aspect-ratio:4/5; }
.stone__fig--wide{ aspect-ratio:16/10; }
.stone__fig figcaption{
  position:absolute; left:0; bottom:0; right:0;
  padding:30px 16px 12px;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.04em;
  color:var(--white);
  background:linear-gradient(to top, rgba(22,24,28,.72), transparent);
}
.stone__fig figcaption .tag{ color:var(--sage-line); font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-right:.6em; }

/* ============================================================
   ROOMS — the bays, numbered. asymmetric two-column listing.
   ============================================================ */
.rooms{ padding:clamp(72px,12vw,150px) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.rooms__head{ max-width:60ch; margin:0 0 clamp(40px,6vw,68px); }
.rooms__title{ font-size:clamp(2rem,5.4vw,3.3rem); color:var(--ink); margin:.1em 0 .5em; max-width:18ch; }
.rooms__title em{ font-style:italic; color:var(--sage-deep); }
.rooms__lede{ color:var(--ink-soft); max-width:52ch; font-size:clamp(1.02rem,1.9vw,1.16rem); margin:0; }

.bays{ display:grid; gap:clamp(20px,3vw,30px); }
.bay{
  display:grid; grid-template-columns:1fr; gap:0;
  background:var(--white);
  border:1px solid var(--line);
}
.bay__media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--paper-3); }
.bay__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.bay:hover .bay__media img{ transform:scale(1.04); }
.bay__no{
  position:absolute; top:0; left:0;
  font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.14em;
  color:var(--paper); background:var(--ink);
  padding:7px 11px; line-height:1;
}
.bay__body{ padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; }
.bay__name{ font-family:var(--serif); font-size:1.5rem; font-weight:500; color:var(--ink); margin:0 0 .12em; }
.bay__name em{ font-style:italic; color:var(--sage-deep); }
.bay__txt{ color:var(--ink-soft); font-size:.97rem; margin:.5em 0 1.3em; }
.bay__meta{
  list-style:none; margin:auto 0 0; padding:1.1em 0 0; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.5em 1.4em;
}
.bay__meta li{
  font-family:var(--sans); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); display:inline-flex; align-items:center; gap:.55em;
}
.bay__meta li::before{ content:""; width:5px; height:5px; background:var(--sage); flex:none; }

.rooms__note{
  margin:clamp(34px,5vw,54px) 0 0; padding-top:1.4em; border-top:1.5px solid var(--ink);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.6em 1.4em;
}
.rooms__note p{ margin:0; color:var(--ink-soft); max-width:54ch; font-size:.96rem; }
.link-tick{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; padding:6px 0; min-height:44px;
}
.link-tick::after{ content:""; width:30px; height:1.5px; background:var(--ink); transition:width .35s var(--ease); }
.link-tick:hover::after{ width:46px; }

/* ============================================================
   GALLERY — a generous, gridded survey of the 16 photos
   ============================================================ */
.gallery{ background:var(--paper-2); padding:clamp(72px,12vw,150px) var(--pad); }
.gallery__head{ max-width:var(--maxw); margin:0 auto clamp(36px,5vw,60px); }
.gallery__title{ font-size:clamp(1.9rem,5vw,3.1rem); color:var(--ink); margin:.1em 0 .4em; max-width:20ch; }
.gallery__title em{ font-style:italic; color:var(--sage-deep); }
.gallery__lede{ color:var(--ink-soft); max-width:50ch; margin:0; }

.plates{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(10px,1.4vw,16px);
  grid-auto-flow:dense;
}
.plate{ position:relative; overflow:hidden; background:var(--paper-3); margin:0; }
.plate img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), filter .6s var(--ease); }
.plate:hover img{ transform:scale(1.045); }
.plate__tag{
  position:absolute; left:0; bottom:0;
  font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--white); background:color-mix(in srgb,var(--ink) 82%,transparent);
  padding:5px 9px; line-height:1;
  opacity:0; transform:translateY(4px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.plate:hover .plate__tag{ opacity:1; transform:none; }
/* spans — composed, not a uniform grid */
.plate--a{ grid-column:span 4; aspect-ratio:16/10; }
.plate--b{ grid-column:span 2; aspect-ratio:4/5; }
.plate--c{ grid-column:span 2; aspect-ratio:1/1; }
.plate--d{ grid-column:span 2; aspect-ratio:1/1; }
.plate--e{ grid-column:span 2; aspect-ratio:1/1; }
.plate--f{ grid-column:span 3; aspect-ratio:3/2; }
.plate--g{ grid-column:span 3; aspect-ratio:3/2; }

/* ============================================================
   SETTING — the land + the measured distances (cool plaster band)
   ============================================================ */
.setting{ position:relative; isolation:isolate; }
.setting__media{ position:absolute; inset:0; z-index:-2; }
.setting__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 58%; filter:saturate(.9) contrast(1.03); }
.setting__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, color-mix(in srgb,var(--slate-deep) 90%,#000 6%) 0%, color-mix(in srgb,var(--slate-deep) 60%,transparent) 46%, color-mix(in srgb,var(--slate-deep) 18%,transparent) 72%, transparent 92%);
}
.setting__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(80px,15vw,170px) var(--pad);
}
.setting__panel{ max-width:46ch; }
.setting__panel .kicker{ color:var(--sage-line); }
.setting__title{ font-size:clamp(1.9rem,5vw,3.1rem); color:var(--white); margin:0 0 .55em; }
.setting__title em{ font-style:italic; color:var(--stone); }
.setting__p{ color:color-mix(in srgb,var(--stone) 96%,#fff); }

.dist{ margin:2em 0 0; border-top:1px solid color-mix(in srgb,#fff 26%,transparent); max-width:34ch; }
.dist__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1em;
  padding:.78em 0; border-bottom:1px solid color-mix(in srgb,#fff 16%,transparent);
}
.dist dt{ color:color-mix(in srgb,var(--stone) 92%,#fff); font-size:.92rem; letter-spacing:.02em; }
.dist dd{
  margin:0; font-family:var(--serif); font-style:italic; font-size:1.06rem;
  color:var(--white); white-space:nowrap;
}

/* ============================================================
   BOOK — the keystone CTA. light, composed, the scale closes it.
   ============================================================ */
.book{ background:var(--paper); padding:clamp(76px,13vw,156px) var(--pad); }
.book__inner{ max-width:760px; margin-inline:auto; text-align:center; }
.book__scale{ width:min(320px,70%); margin:0 auto clamp(26px,4vw,40px); }
.book__kick{ justify-content:center; }
.book__title{ font-size:clamp(2.1rem,6vw,3.6rem); color:var(--ink); margin:0 0 .5em; }
.book__title em{ font-style:italic; color:var(--sage-deep); }
.book__txt{ color:var(--ink-soft); max-width:50ch; margin:0 auto 2.2em; font-size:clamp(1.02rem,1.9vw,1.14rem); }
.book__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.book__contact{
  margin:clamp(34px,5vw,52px) auto 0; padding-top:1.6em;
  border-top:1px solid var(--line); max-width:540px;
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:center; align-items:center;
}
.book__contact a{
  font-family:var(--sans); font-size:.92rem; letter-spacing:.02em; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--line); padding:6px 0; min-height:44px;
  display:inline-flex; align-items:center; transition:border-color .3s var(--ease);
}
.book__contact a:hover{ border-color:var(--ink); }
.book__rating{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-size:.86rem; color:var(--ink-soft);
}
.book__rating .star{ color:var(--sage-deep); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:color-mix(in srgb,var(--stone) 78%,transparent); padding:clamp(52px,8vw,88px) var(--pad) 32px; }
.foot__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; gap:38px; }
.foot__mark{ display:inline-flex; color:var(--sage-line); margin-bottom:12px; }
.foot__name{ font-family:var(--serif); font-size:1.55rem; font-weight:500; color:var(--paper); margin:0 0 .25em; }
.foot__place{ font-size:.82rem; letter-spacing:.04em; color:color-mix(in srgb,var(--stone) 58%,transparent); margin:0; }
.foot__h{ font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage-line); margin:0 0 1.1em; }
.foot__col p{ font-size:.9rem; margin:0 0 .5em; }
.foot__col a:not(.btn){ display:inline-flex; align-items:center; min-height:44px; padding:7px 0; color:color-mix(in srgb,var(--stone) 90%,#fff); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s; }
.foot__col a:hover{ border-color:currentColor; }
.foot__base{
  max-width:var(--maxw); margin:clamp(40px,6vw,62px) auto 0; padding-top:24px;
  border-top:1px solid color-mix(in srgb,#fff 12%,transparent);
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between; align-items:center;
}
.foot__rights{ margin:0; font-size:.78rem; color:color-mix(in srgb,var(--stone) 54%,transparent); }
.foot__sign{ margin:0; font-family:var(--serif); font-style:italic; font-size:.98rem; color:color-mix(in srgb,var(--stone) 82%,transparent); }

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__scroll .scroll-dot{ animation:none; }
  .stone__fig:hover img, .bay:hover .bay__media img, .plate:hover img{ transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:720px){
  .stone__grid{ grid-template-columns:1fr 1fr; }
  .stone__figs{ grid-template-columns:1fr 1fr; gap:14px; }
  .stone__fig--tall{ aspect-ratio:4/5; }
  .stone__fig--wide{ grid-column:span 2; aspect-ratio:16/9; }
  .bay{ grid-template-columns:1.15fr 1fr; }
  .bay--flip{ grid-template-columns:1fr 1.15fr; }
  .bay--flip .bay__media{ order:2; }
  .setting__panel{ max-width:44ch; }
}
@media (min-width:980px){
  .nav__links{ display:flex; }
  .nav__book{ display:inline-flex; }
  .hero__scroll{ display:flex; }
  .finca{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--gut); align-items:start; }
  .finca__lead{ grid-column:1; }
  .measures{
    grid-column:2; margin-top:clamp(40px,6vw,70px); align-self:start;
    position:sticky; top:96px;
  }
  .stone__grid{ grid-template-columns:1.02fr 1.05fr; gap:clamp(40px,5vw,80px); }
}
@media (min-width:1240px){
  body{ font-size:18px; }
}

/* very small phones — keep the gallery composed but never overflow */
@media (max-width:560px){
  .plates{ grid-template-columns:repeat(2,1fr); }
  .plate--a{ grid-column:span 2; aspect-ratio:16/11; }
  .plate--b{ grid-column:span 1; aspect-ratio:3/4; }
  .plate--c,.plate--d,.plate--e{ grid-column:span 1; aspect-ratio:1/1; }
  .plate--f,.plate--g{ grid-column:span 2; aspect-ratio:16/10; }
  .hero__datum{ display:none; }
  .hero__register{ gap:0; }
}