/* =====================================================================
   FINCA SES FONTANELLES — "The Contour Line"
   The site as a topographic survey of a Tramuntana finca.
   Palette derived in the rugged-stone + forest-green direction.
   Display: Newsreader · Body: Inter · Edge: grounded.
   ===================================================================== */

:root{
  /* 5-colour palette — Tramuntana stone + forest green */
  --moss:   #4f5d3f;   /* deep forest green (primary)        */
  --pine:   #2c3326;   /* near-black olive (ink / dark bands) */
  --stone:  #b9ad97;   /* limestone / dry-stone warm grey    */
  --paper:  #f4f0e6;   /* sun-bleached lime-wash (page)       */
  --gold:   #b07d3f;   /* carob / dry-bracken accent (rare)  */

  /* derived */
  --paper-2:  #ece6d7;
  --ink:      var(--pine);
  --ink-soft: #5b5b4f;
  --moss-2:   #5f6e4c;

  --line-soft:  rgba(44,51,38,0.20);
  --line-hero:  rgba(244,240,230,0.16);
  --line-onmoss:rgba(244,240,230,0.22);

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

  --mono-feat: "tnum" 1, "lnum" 1;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  --r: 2px;                       /* grounded: almost no radius */
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset ---------- */
*,*::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(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;            /* belt-and-braces vs. horizontal scroll */
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--moss); color:var(--paper); }

/* ---------- display type guards (mobile-safe) ---------- */
.hero__title, .sec-title, .cta-band__title, .plot__name{
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}

/* =====================================================================
   SURVEY FRAME — fixed map margin with corner ticks (signature framing)
   ===================================================================== */
.survey-frame{
  position:fixed; inset:14px; z-index:30; pointer-events:none;
  border:1px solid var(--line-soft);
}
.frame-tick{ position:absolute; width:14px; height:14px; }
.frame-tick::before,.frame-tick::after{
  content:""; position:absolute; background:var(--gold);
}
.frame-tick::before{ width:14px; height:1.5px; top:0; }
.frame-tick::after{  width:1.5px; height:14px; left:0; }
.frame-tick--tl{ top:-1px; left:-1px; }
.frame-tick--tr{ top:-1px; right:-1px; }
.frame-tick--tr::before{ left:auto; right:0; }
.frame-tick--tr::after{ left:auto; right:0; }
.frame-tick--bl{ bottom:-1px; left:-1px; }
.frame-tick--bl::before{ top:auto; bottom:0; }
.frame-tick--br{ bottom:-1px; right:-1px; }
.frame-tick--br::before{ top:auto; bottom:0; left:auto; right:0; }
.frame-tick--br::after{ left:auto; right:0; }
@media (max-width:560px){ .survey-frame{ inset:8px; } }

/* =====================================================================
   HEADER
   ===================================================================== */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; gap:18px;
  padding:14px var(--gutter);
  background:rgba(244,240,230,0);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .3s var(--ease);
}
.site-head.is-stuck{
  background:rgba(244,240,230,0.92);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  box-shadow:0 1px 0 var(--line-soft);
  padding-top:10px; padding-bottom:10px;
}

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto; min-height:44px; }
.brand__mark{ color:var(--moss); flex:0 0 auto; }
.site-head.is-stuck .brand__mark{ color:var(--moss); }
.brand__type{ display:flex; flex-direction:column; line-height:1.05; }
.brand__name{
  font-family:var(--serif); font-weight:500; font-size:19px;
  letter-spacing:.01em; color:var(--ink);
}
.brand__sub{
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:3px;
}
/* hero is dark: header text light until stuck */
.site-head:not(.is-stuck) .brand__name,
.site-head:not(.is-stuck) .brand__sub,
.site-head:not(.is-stuck) .site-nav a{ color:var(--paper); }
.site-head:not(.is-stuck) .brand__mark{ color:var(--paper); }
.site-head:not(.is-stuck) .lang__btn{ color:rgba(244,240,230,.7); }
.site-head:not(.is-stuck) .lang__btn.is-active{ color:var(--paper); }
.site-head:not(.is-stuck) .lang__sep{ color:rgba(244,240,230,.45); }

.site-nav{ display:flex; gap:26px; }
.site-nav a{
  font-size:13px; letter-spacing:.02em; color:var(--ink-soft);
  position:relative; padding:4px 0;
  display:inline-flex; align-items:center; min-height:44px;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .3s var(--ease);
}
.site-nav a:hover::after{ width:100%; }

.head-actions{ display:flex; align-items:center; gap:16px; }
.lang{ display:flex; align-items:center; gap:6px; }
.lang__btn{
  font:inherit; font-size:12px; font-weight:600; letter-spacing:.08em;
  background:none; border:0; cursor:pointer; color:var(--ink-soft);
  padding:6px 8px; min-height:44px; min-width:40px;
  display:inline-flex; align-items:center; justify-content:center;
}
.lang__btn.is-active{ color:var(--ink); }
.lang__sep{ color:var(--line-soft); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{
  --bg:var(--moss); --fg:var(--paper);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5em; min-height:46px; padding:0 22px;
  font-family:var(--sans); font-size:14px; font-weight:600;
  letter-spacing:.02em; border-radius:var(--r);
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--solid{ background:var(--bg); color:var(--fg); }
.btn--solid:hover{ background:var(--pine); transform:translateY(-2px); }
.btn--ghost{
  background:transparent; color:var(--paper);
  border-color:var(--line-onmoss);
}
.btn--ghost:hover{ border-color:var(--gold); color:#fff; transform:translateY(-2px); }
.btn--head{
  min-height:44px; padding:0 16px; font-size:13px;
  background:var(--gold); color:var(--paper);
}
.site-head:not(.is-stuck) .btn--head{ background:var(--gold); color:var(--paper); }
.btn--head:hover{ background:var(--pine); transform:translateY(-1px); }
.btn--lg{ min-height:54px; padding:0 30px; font-size:15px; }
.btn--block{ display:flex; width:100%; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px var(--gutter) clamp(34px,7vh,72px);
  background:
    linear-gradient(160deg, var(--pine) 0%, #353d2c 46%, #2f3729 100%);
  color:var(--paper);
  overflow:hidden;
}
.hero__contours{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0;
}
.hero__contours .contour-set path{
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}
/* draw-on animation for the contour lines */
.contour-set path{
  stroke-dasharray:2400; stroke-dashoffset:2400;
  animation:draw 2.4s var(--ease) forwards;
}
.contour-set path:nth-child(1){ animation-delay:.05s; }
.contour-set path:nth-child(2){ animation-delay:.16s; }
.contour-set path:nth-child(3){ animation-delay:.27s; }
.contour-set path:nth-child(4){ animation-delay:.38s; }
.contour-set path:nth-child(5){ animation-delay:.49s; }
.contour-set path:nth-child(6){ animation-delay:.60s; }
.contour-set path:nth-child(7){ animation-delay:.71s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.hero__spring{ transform-origin:892px 300px; }
.hero__spring circle{ animation:springPulse 4.5s var(--ease) infinite; }
.hero__spring circle:nth-child(2){ animation-delay:.4s; }
.hero__spring circle:nth-child(3){ animation-delay:.8s; }
@keyframes springPulse{
  0%,100%{ opacity:.35; } 45%{ opacity:.9; }
}

/* legibility scrim behind text */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(28,33,24,0.92) 0%, rgba(28,33,24,0.55) 30%, rgba(28,33,24,0) 62%),
    linear-gradient(105deg, rgba(28,33,24,0.6) 0%, rgba(28,33,24,0) 55%);
}

.hero__inner{ position:relative; z-index:2; max-width:var(--wrap); width:100%; margin:0 auto; }
.hero__kicker{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--stone); margin-bottom:clamp(18px,3vh,30px);
  display:inline-flex; align-items:center; gap:10px;
}
.hero__kicker::before{
  content:""; width:34px; height:1px; background:var(--gold);
}
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.7rem, 9vw, 6.6rem);
  line-height:0.99; letter-spacing:-0.015em;
  text-wrap:balance;
}
.hero__line{ display:block; }
.hero__line--em{ font-style:italic; color:var(--stone); }
.hero__lede{
  margin-top:clamp(20px,3vh,30px); max-width:54ch;
  font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.55;
  color:rgba(244,240,230,0.86);
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px,4vh,38px); }

.hero__readout{
  display:flex; flex-wrap:wrap; gap:0;
  margin-top:clamp(30px,5vh,52px);
  border-top:1px solid var(--line-onmoss);
  padding-top:18px;
}
.hero__readout > div{
  padding-right:clamp(22px,4vw,52px); margin-right:clamp(22px,4vw,52px);
  border-right:1px solid var(--line-onmoss);
}
.hero__readout > div:last-child{ border-right:0; margin-right:0; padding-right:0; }
.hero__readout dt{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--stone); margin-bottom:5px;
}
.hero__readout dd{
  margin:0; font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.4rem);
  color:var(--paper); font-feature-settings:var(--mono-feat);
}
.hero__readout dd span{ font-family:var(--sans); font-size:.7em; color:var(--stone); }

.hero__scroll{
  position:absolute; right:var(--gutter); bottom:clamp(34px,7vh,72px); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--stone);
}
.hero__scroll-line{ width:1px; height:46px; background:linear-gradient(var(--gold),transparent); }
@media (max-width:760px){ .hero__scroll{ display:none; } }

/* =====================================================================
   BANDS / SECTIONS — shared
   ===================================================================== */
.band{
  position:relative;
  max-width:var(--wrap);
  margin:0 auto;
  padding:clamp(64px,10vh,128px) var(--gutter);
}
.sec-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,5.2vw,3.6rem); line-height:1.04;
  letter-spacing:-0.012em; text-wrap:balance;
}
.sec-title--light{ color:var(--paper); }
.sec-head{ max-width:760px; margin-bottom:clamp(36px,5vh,60px); }
.sec-intro{
  margin-top:18px; font-size:clamp(1rem,1.4vw,1.12rem);
  color:var(--ink-soft); max-width:56ch;
}
.sec-intro--light{ color:rgba(244,240,230,0.78); }

/* elevation tag — the numeral system, recurring */
.elev-tag{
  display:flex; align-items:baseline; gap:8px;
  font-family:var(--serif);
  margin-bottom:clamp(28px,4vh,46px);
  padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
  color:var(--moss);
}
.elev-tag__num{ font-size:clamp(2.4rem,6vw,3.4rem); line-height:.8; font-feature-settings:var(--mono-feat); letter-spacing:-.02em; }
.elev-tag__unit{ font-size:1.1rem; color:var(--gold); }
.elev-tag__name{
  margin-left:auto; font-family:var(--sans);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); align-self:flex-end; padding-bottom:4px;
}
.elev-tag--light{ color:var(--paper); border-color:var(--line-onmoss); }
.elev-tag--light .elev-tag__name{ color:var(--stone); }

/* ---------- STORY ---------- */
.story{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,56px); }
@media (min-width:880px){
  .story{ grid-template-columns:0.9fr 1.1fr; align-items:start; }
  .story__lead{ position:sticky; top:96px; }
}
.story__body p + p{ margin-top:18px; }
.story__body em{ font-family:var(--serif); font-style:italic; color:var(--moss); }
.story__facts{ margin-top:30px; border-top:1px solid var(--line-soft); }
.story__facts li{
  display:grid; grid-template-columns:120px 1fr; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--line-soft);
}
.story__facts-k{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); padding-top:3px;
}
.story__facts-v{ color:var(--ink); font-size:.97rem; }
@media (max-width:480px){
  .story__facts li{ grid-template-columns:1fr; gap:4px; }
}

/* ---------- DIVIDER ---------- */
.divider{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
.divider svg{ width:100%; height:78px; }
.divider path{ stroke-width:1; }

/* ---------- THE FINCA / PLOTS ---------- */
.band--finca{ }
.plots{ counter-reset:plot; border-top:1px solid var(--line-soft); }
.plot{
  display:grid; grid-template-columns:130px 1fr; gap:clamp(18px,3vw,44px);
  padding:clamp(26px,4vh,40px) 0;
  border-bottom:1px solid var(--line-soft);
  transition:padding-left .4s var(--ease);
}
.plot:hover{ padding-left:10px; }
.plot__rule{
  display:flex; align-items:baseline; gap:5px;
  font-family:var(--serif); color:var(--moss);
}
.plot__elev{ font-size:clamp(1.8rem,4vw,2.5rem); line-height:.85; font-feature-settings:var(--mono-feat); letter-spacing:-.02em; }
.plot__unit{ font-size:.9rem; color:var(--gold); }
.plot__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.06; color:var(--ink);
}
.plot__desc{ margin-top:10px; color:var(--ink-soft); max-width:54ch; }
.plot__meta{
  margin-top:14px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold);
}
@media (max-width:560px){
  .plot{ grid-template-columns:1fr; gap:12px; }
  .plot__rule{ }
}

/* ---------- THE SETTING / ANDRATX (dark band) ---------- */
.band--setting{
  max-width:none; margin:0;
  background:
    linear-gradient(180deg, var(--pine), #313a2a 120%);
  color:var(--paper);
  position:relative; overflow:hidden;
}
.band--setting::before{
  content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:
    radial-gradient(circle at 78% 18%, rgba(176,125,63,0.18), transparent 38%);
}
.setting{
  position:relative; z-index:1;
  max-width:var(--wrap); margin:0 auto; padding:clamp(64px,10vh,128px) var(--gutter);
}
.setting__head{ max-width:720px; margin-bottom:clamp(34px,5vh,56px); }
.legend{ border-top:1px solid var(--line-onmoss); }
.legend__row{
  display:grid; grid-template-columns:120px 1fr; gap:clamp(16px,3vw,40px);
  align-items:baseline;
  padding:clamp(18px,3vh,28px) 0;
  border-bottom:1px solid var(--line-onmoss);
}
.legend__dist{
  font-family:var(--serif); font-size:clamp(1.2rem,2.6vw,1.7rem);
  color:var(--stone); font-feature-settings:var(--mono-feat);
  letter-spacing:.01em;
}
.legend__name{
  display:block; font-family:var(--serif); font-size:clamp(1.15rem,2.2vw,1.5rem);
  color:var(--paper); margin-bottom:5px;
}
.legend__note{ display:block; color:rgba(244,240,230,0.66); font-size:.95rem; max-width:52ch; }
@media (max-width:520px){
  .legend__row{ grid-template-columns:1fr; gap:4px; }
  .legend__dist{ font-size:1.1rem; color:var(--gold); }
}

/* ---------- THE TABLE ---------- */
.table-block{ display:grid; grid-template-columns:1fr; gap:clamp(30px,5vw,64px); align-items:start; }
@media (min-width:900px){ .table-block{ grid-template-columns:1.15fr 0.85fr; } }
.table-block__text p + p{ margin-top:16px; color:var(--ink-soft); }
.table-block__text p:first-of-type{ margin-top:22px; }
.table-block__list{ border-top:1px solid var(--line-soft); }
.table-block__list li{
  display:grid; grid-template-columns:96px 1fr; gap:18px;
  padding:16px 0; border-bottom:1px solid var(--line-soft); align-items:baseline;
}
.tk{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.tv{ color:var(--ink); font-size:.97rem; }
@media (max-width:480px){
  .table-block__list li{ grid-template-columns:1fr; gap:3px; }
}

/* =====================================================================
   CTA BAND
   ===================================================================== */
.cta-band{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--moss) 0%, #3f4a31 60%, var(--pine) 100%);
  color:var(--paper);
  padding:clamp(72px,12vh,150px) var(--gutter);
}
.cta-band__contours{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.8; }
.cta-band__contours path{ stroke-width:1; vector-effect:non-scaling-stroke; }
.cta-band__spring circle{ animation:springPulse 4.5s var(--ease) infinite; }
.cta-band::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(28,33,24,0.35), rgba(28,33,24,0.1));
}
.cta-band__inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; text-align:center; }
.cta-band__kicker{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--stone);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
}
.cta-band__kicker::before,.cta-band__kicker::after{
  content:""; width:26px; height:1px; background:var(--gold);
}
.cta-band__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,5.6vw,3.7rem); line-height:1.03; letter-spacing:-.012em;
  text-wrap:balance;
}
.cta-band__lede{ margin:22px auto 0; max-width:52ch; color:rgba(244,240,230,0.82); font-size:1.05rem; }
.cta-band__actions{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:34px; }
.cta-band__addr{
  font-family:var(--serif); font-style:italic; font-size:1.1rem;
  color:var(--stone); border-bottom:1px solid transparent; transition:border-color .3s;
  display:inline-flex; align-items:center; min-height:44px;
}
.cta-band__addr:hover{ border-color:var(--gold); }

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-foot{ background:var(--pine); color:rgba(244,240,230,0.8); padding:clamp(48px,7vh,80px) var(--gutter) 30px; }
.foot__grid{
  max-width:var(--wrap); margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:38px;
}
@media (min-width:720px){ .foot__grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; } }
.foot__mark{ color:var(--moss-2); margin-bottom:14px; }
.foot__name{ font-family:var(--serif); font-size:1.3rem; color:var(--paper); }
.foot__tag{ margin-top:10px; font-size:.92rem; line-height:1.55; color:rgba(244,240,230,0.6); max-width:42ch; }
.foot__h{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); margin-bottom:14px; }
.foot__col a{ display:flex; align-items:center; min-height:44px; font-size:.95rem; padding:6px 0; color:rgba(244,240,230,0.8); transition:color .25s; }
.foot__col a:hover{ color:var(--gold); }
.foot__plain{ font-size:.9rem; color:rgba(244,240,230,0.55); margin-top:8px; }
.foot__col--cta .btn{ margin-top:2px; }

.foot__base{
  max-width:var(--wrap); margin:48px auto 0; padding-top:22px;
  border-top:1px solid var(--line-onmoss);
  display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center;
  font-size:12px; color:rgba(244,240,230,0.5);
}
.foot__readout{ font-family:var(--serif); letter-spacing:.04em; color:var(--stone); font-feature-settings:var(--mono-feat); }
.foot__copy{ }
.foot__sign{ margin-left:auto; letter-spacing:.04em; }
.foot__sign span{ color:var(--stone); }
@media (max-width:520px){ .foot__sign{ margin-left:0; width:100%; } }

/* =====================================================================
   SCROLL-IN REVEALS
   ===================================================================== */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .contour-set path{ animation:none; stroke-dashoffset:0; }
  .hero__spring circle,.cta-band__spring circle{ animation:none; }
}

/* =====================================================================
   RESPONSIVE — header collapse
   ===================================================================== */
@media (max-width:880px){
  .site-nav{ display:none; }
}
@media (max-width:420px){
  .brand__sub{ display:none; }
  .head-actions{ gap:10px; }
  .btn--head{ padding:0 13px; }
}