/* =====================================================================
   Agroturismo Finca Sant Blai — Campos, Mallorca
   A warm, earth-toned editorial built from the finca's own mares stone.
   Fraunces over lime-wash; the "course line" seam as every divider;
   photos full-bleed under shallow finca arches; slow, settled motion.
   ===================================================================== */

/* ---------- Identity tokens ---------- */
:root{
  /* palette */
  --bg:      #F4EBDD;   /* lime-wash cream */
  --ink:     #3A2A1E;   /* dark earth / carved serif */
  --accent:  #B5613A;   /* terracotta */
  --accent2: #7C7A4E;   /* olive */
  --muted:   #C9A86A;   /* mares sand */

  /* tonal layers derived from the warm base (depth = layering, never shadow) */
  --bg-deep:  #EFE3D0;  /* one tone down from bg */
  --bg-sand:  #E7D6BB;  /* sand wash for cards / lifts */
  --bg-dark:  #2B1F16;  /* near-black earth for the booking panel + footer */
  --line:     rgba(58,42,30,.16);  /* hairline ink */
  --ink-soft: #6A5443;  /* muted body ink */

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

  /* motion — slow and settled */
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: 820ms;

  /* structure */
  --arch: 104px;        /* shallow segmental curve depth */
  --radius: 12px;       /* gentle hand-built corner */
  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 64px);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.72;
  font-weight:400;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:500; }
p{ margin:0 0 1.1em; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--muted); color:var(--ink); }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:760px; }
.section{ padding-block:clamp(64px,10vw,128px); }

.display{ font-family:var(--display); font-optical-sizing:auto; }

/* ===========================================================
   THE SEAM MOTIF — the course line
   1.5px terracotta rule, staggered courses, uneven mortar joints,
   one olive sprig + seed-dot. "Drawn" left-to-right on reveal.
   =========================================================== */
.seam{
  width:min(340px,72%); margin:22px 0 30px;
  /* per-placement palette — these custom props inherit into the <use> shadow,
     so the seam can be recoloured anywhere (descendant class rules can't reach it) */
  --seam-stroke:var(--accent);
  --seam-joint:var(--muted);
  --seam-stem:var(--accent2);
  --seam-leaf:var(--accent2);
  --seam-dot:var(--accent);
  --seam-w:1.5;
}
.seam--wide{ width:min(560px,86%); margin-inline:auto; }
.seam__svg{ width:100%; height:34px; display:block; overflow:visible; }

.seam-line,.seam-joint,.seam-stem,.seam-leaf{ fill:none; }
.seam-line{  stroke:var(--seam-stroke); stroke-width:var(--seam-w); }
.seam-joint{ stroke:var(--seam-joint);  stroke-width:var(--seam-w); stroke-linecap:round; }
.seam-stem{  stroke:var(--seam-stem); stroke-width:1.4; stroke-linecap:round; }
.seam-leaf{  fill:var(--seam-leaf); }
.seam-sprig circle{ fill:var(--seam-dot); }

/* draw-on animation: dash the strokes, retract offset on reveal */
.seam-line{  stroke-dasharray:240; stroke-dashoffset:240;
  transition:stroke-dashoffset 1100ms var(--ease); }
.seam-joint{ opacity:0; transition:opacity 500ms var(--ease) 600ms; }
.seam-sprig{ opacity:0; transform:scale(.6); transform-origin:300px 18px;
  transition:opacity 600ms var(--ease) 760ms, transform 600ms var(--ease) 760ms; }

.is-in .seam-line{  stroke-dashoffset:0; }
.is-in .seam-joint{ opacity:1; }
.is-in .seam-sprig{ opacity:1; transform:scale(1); }

/* light variant for dark panels — set via inherited vars so it reaches the <use> shadow */
.seam--light{
  --seam-stroke:#E4C079;        /* warm gold reads cleanly on the dark earth panels */
  --seam-joint:rgba(228,192,121,.7);
  --seam-stem:#A9B073;
  --seam-leaf:#A9B073;
  --seam-dot:#E4C079;
}

/* ===========================================================
   ARCH — the structural tell.
   A shallow flattened arch resolves the TOP of hero & photo panels,
   like a finca doorway / vaulted window reveal. Pure CSS mask.
   =========================================================== */
.arch{
  -webkit-mask:
    radial-gradient(120% var(--arch) at 50% var(--arch), #000 99%, transparent 100%) top/100% var(--arch) no-repeat,
    linear-gradient(#000,#000) bottom/100% calc(100% - var(--arch) + 1px) no-repeat;
          mask:
    radial-gradient(120% var(--arch) at 50% var(--arch), #000 99%, transparent 100%) top/100% var(--arch) no-repeat,
    linear-gradient(#000,#000) bottom/100% calc(100% - var(--arch) + 1px) no-repeat;
}

/* ===========================================================
   TYPE PRIMITIVES
   =========================================================== */
.kicker{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:.74rem;
  font-weight:600;
  color:var(--accent);
  margin:0 0 1.1em;
}
.eyebrow{
  font-family:var(--display);
  font-style:italic;
  font-size:1.04rem;
  color:var(--accent);
  margin:0 0 .35em;
  letter-spacing:.01em;
}
.eyebrow--light{ color:var(--muted); }

.section__title{
  font-size:clamp(2rem,5.4vw,3.4rem);
  line-height:1.04;
  letter-spacing:-.012em;
  color:var(--ink);
  font-weight:500;
}

/* ===========================================================
   BUTTONS — softly rounded; secondary = thin sand border, no fill
   hover warms rather than moves
   =========================================================== */
.btn{
  --bd:var(--ink);
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--body); font-weight:500; font-size:.95rem;
  letter-spacing:.01em;
  padding:.82em 1.5em;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  transition:background var(--slow) var(--ease), color 300ms var(--ease),
             border-color 300ms var(--ease);
  white-space:nowrap;
}
.btn--solid{ background:var(--accent); color:#FBF4E8; }
.btn--solid:hover{ background:#9d4f2c; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--muted); }
.btn--ghost:hover{ color:var(--accent); border-color:var(--accent); background:rgba(181,97,58,.05); }
.btn--lg{ padding:1.04em 1.9em; font-size:1.02rem; }

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background var(--slow) var(--ease), border-color var(--slow) var(--ease);
  border-bottom:1px solid transparent;
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:18px var(--gut);
  display:flex; align-items:center; gap:24px;
}
.nav.is-stuck{
  background:rgba(244,235,221,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}

/* over the full-bleed hero (before stuck): light text on the photo */
.nav.is-over-hero:not(.is-stuck) .nav__brand,
.nav.is-over-hero:not(.is-stuck) .nav__name{ color:#F4EBDD; }
.nav.is-over-hero:not(.is-stuck) .nav__mark{ color:var(--muted); }
.nav.is-over-hero:not(.is-stuck) .nav__links a{ color:#F1E6D4; }
.nav.is-over-hero:not(.is-stuck) .nav__links a:not(.nav__cta):hover{ color:#fff; }
.nav.is-over-hero:not(.is-stuck) .nav__cta{ border-color:rgba(244,235,221,.55); color:#F4EBDD; }
.nav.is-over-hero:not(.is-stuck) .nav__cta:hover{ border-color:#fff; color:#fff; background:rgba(248,239,223,.12); }
.nav.is-over-hero:not(.is-stuck) .lang__btn{ color:rgba(241,230,212,.78); }
.nav.is-over-hero:not(.is-stuck) .lang__btn:hover,
.nav.is-over-hero:not(.is-stuck) .lang__btn.is-active{ color:#F4EBDD; }
.nav.is-over-hero:not(.is-stuck) .lang__sep{ color:rgba(244,235,221,.4); }
.nav.is-over-hero:not(.is-stuck) .nav__burger span{ background:#F4EBDD; }
/* a soft top scrim under the bar so light text always holds, even over a bright photo top */
.nav.is-over-hero:not(.is-stuck)::before{
  content:""; position:absolute; inset:0 0 auto 0; height:120px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(24,15,8,.42), transparent);
}
.nav__brand{ display:flex; align-items:center; gap:9px; margin-right:auto; color:var(--ink); }
.nav__mark{ color:var(--accent); display:flex; }
.nav__name{
  font-family:var(--display); font-weight:600; font-size:1.16rem;
  letter-spacing:.005em;
}
.nav__links{ display:flex; align-items:center; gap:30px; }
.nav__links a{
  position:relative; font-size:.92rem; color:var(--ink); font-weight:500;
  transition:color 300ms var(--ease);
}
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1.5px;
  background:var(--accent); transition:right 360ms var(--ease);
}
.nav__links a:not(.nav__cta):hover{ color:var(--accent); }
.nav__links a:not(.nav__cta):hover::after{ right:0; }
.nav__cta{
  padding:.5em 1.05em; border:1px solid var(--muted); border-radius:8px;
  transition:color 300ms var(--ease), border-color 300ms var(--ease), background 300ms var(--ease);
}
.nav__cta:hover{ color:var(--accent); border-color:var(--accent); background:rgba(181,97,58,.05); }

.lang{ display:flex; align-items:center; gap:6px; }
.lang__btn{
  background:none; border:0; cursor:pointer; font-family:var(--body);
  font-size:.82rem; font-weight:600; letter-spacing:.08em; color:var(--ink-soft);
  padding:2px 2px; transition:color 280ms var(--ease);
}
.lang__btn:hover{ color:var(--accent); }
.lang__btn.is-active{ color:var(--accent); }
.lang__sep{ color:var(--line); }

.nav__burger{ display:none; }

/* ===========================================================
   HERO — full-viewport, full-bleed cinematic photo + carved headline
   The stone-interior fills the screen edge to edge; a warm dark
   gradient anchored bottom-left lets the Fraunces headline read;
   the signature "course line" seam is ruled across underneath it.
   =========================================================== */
.hero{
  position:relative;
  height:100svh;
  min-height:600px;
  overflow:hidden;
  background:var(--bg-dark);
  isolation:isolate;
}

/* full-bleed photo layer */
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__img{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 56%;
  transform:scale(1.06);
  animation:heroZoom 18s var(--ease) forwards;
  will-change:transform;
}

/* warm dark→transparent gradient, weighted to the lower-left where the copy sits */
.hero__grad{
  position:absolute; inset:0;
  background:
    /* foot: deep warm earth so headline + seam resolve crisply */
    linear-gradient(to top,
      rgba(28,18,11,.86) 0%,
      rgba(33,22,14,.66) 22%,
      rgba(38,26,17,.30) 46%,
      rgba(43,31,22,.06) 66%,
      transparent 82%),
    /* left bias to seat the copy column */
    linear-gradient(to right,
      rgba(28,18,11,.62) 0%,
      rgba(33,22,14,.24) 38%,
      transparent 66%),
    /* a touch of top shade so the nav reads over stone */
    linear-gradient(to bottom, rgba(28,18,11,.42), transparent 22%);
}
/* subtle film grain for a cinematic, un-stock finish */
.hero__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* copy frame: a full-height flex column, copy anchored to the lower third */
.hero__frame{
  position:relative; z-index:2;
  height:100%;
  max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--gut);
  padding-bottom:clamp(40px,7vh,84px);
  padding-top:calc(72px + env(safe-area-inset-top));
  display:flex; flex-direction:column; justify-content:flex-end;
}
/* copy column sized for a confident 2–3 line Fraunces headline */
.hero__copy{ max-width:min(94vw,640px); }

.kicker--hero{
  color:var(--muted);
  text-shadow:0 1px 14px rgba(20,12,6,.5);
  margin-bottom:.85em;
}

.hero__title{
  font-size:clamp(2.9rem,7vw,5.4rem);
  line-height:.98;
  letter-spacing:-.022em;
  font-weight:500;
  max-width:14ch;
  color:#F8EFDF;
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(18,10,5,.5);
}

/* the course-line seam, ruled wide across the hero — the wow device.
   Inlined SVG (real light-DOM paths) so it paints reliably over the photo:
   bright gold rule, sand joints, olive sprig; drawn left-to-right on reveal. */
.hero__seam{ width:min(460px,90%); margin:clamp(16px,2.2vh,26px) 0 clamp(18px,2.4vh,26px); }
.hero__seam-svg{
  width:100%; height:40px; display:block; overflow:visible;
  filter:drop-shadow(0 1px 12px rgba(18,10,5,.75));
}
.hero__seam-svg .hs-line,.hero__seam-svg .hs-joint,
.hero__seam-svg .hs-stem,.hero__seam-svg .hs-leaf{ fill:none; }
.hero__seam-svg .hs-line{  stroke:#F1D08C; stroke-width:2; }
.hero__seam-svg .hs-joint{ stroke:rgba(241,208,140,.92); stroke-width:2; stroke-linecap:round; }
.hero__seam-svg .hs-stem{  stroke:#C2CA84; stroke-width:1.6; stroke-linecap:round; }
.hero__seam-svg .hs-leaf{  fill:#C2CA84; }
.hero__seam-svg .hs-sprig circle{ fill:#F1D08C; }

/* draw-on: dash the rule, drop joints, pop the sprig — on .reveal.is-in */
.hero__seam-svg .hs-line{ stroke-dasharray:240; stroke-dashoffset:240;
  transition:stroke-dashoffset 1200ms var(--ease) 120ms; }
.hero__seam-svg .hs-joint{ opacity:0; transition:opacity 500ms var(--ease) 720ms; }
.hero__seam-svg .hs-sprig{ opacity:0; transform:scale(.6); transform-origin:300px 18px;
  transition:opacity 600ms var(--ease) 880ms, transform 600ms var(--ease) 880ms; }
.hero__seam.is-in .hs-line{ stroke-dashoffset:0; }
.hero__seam.is-in .hs-joint{ opacity:1; }
.hero__seam.is-in .hs-sprig{ opacity:1; transform:scale(1); }

.hero__sub{
  max-width:42ch;
  font-size:clamp(1.04rem,1.55vw,1.18rem);
  line-height:1.58;
  color:#EADCC7;
  text-shadow:0 1px 16px rgba(18,10,5,.6);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:1.8em; }

/* light outline button for dark photographic backgrounds */
.btn--line{
  background:rgba(248,239,223,.06); color:#F4EBDD;
  border-color:rgba(244,235,221,.5);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.btn--line:hover{ color:#FBF4E8; border-color:#F4EBDD; background:rgba(248,239,223,.14); }

/* scroll cue pinned bottom-right of the frame */
.hero__scroll{
  position:absolute; z-index:2;
  right:var(--gut); bottom:clamp(40px,7vh,84px);
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-style:italic; font-size:.95rem;
  color:var(--muted);
  text-shadow:0 1px 12px rgba(18,10,5,.5);
}
.hero__scroll svg{ color:var(--muted); animation:nudge 2.6s var(--ease) infinite; }
.hero__scroll:hover{ color:#F4EBDD; }
.hero__scroll:hover svg{ color:#F4EBDD; }

/* ===========================================================
   STORY
   =========================================================== */
.story{ background:var(--bg); }
.story__lede p{
  font-family:var(--display);
  font-size:clamp(1.3rem,2.8vw,1.74rem);
  line-height:1.42; font-weight:400; color:var(--ink);
  letter-spacing:-.005em;
  margin-bottom:1.1em;
}
.story__body{ max-width:62ch; color:var(--ink-soft); margin-top:.4em; }
.story__body p{ margin-bottom:1em; }

.marks{
  display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,64px);
  margin-top:clamp(34px,5vw,52px);
  padding-top:30px; border-top:1px solid var(--line);
}
.marks li{ display:flex; flex-direction:column; gap:4px; }
.marks__n{ font-size:clamp(1.7rem,4vw,2.4rem); color:var(--accent); line-height:1; font-weight:500; }
.marks__l{ font-size:.86rem; color:var(--ink-soft); letter-spacing:.02em; max-width:18ch; }

/* ===========================================================
   ROOMS
   =========================================================== */
.rooms{ background:var(--bg-deep); }
.rooms__head{ max-width:760px; }
.rooms__lead{ max-width:60ch; color:var(--ink-soft); margin-bottom:clamp(34px,5vw,54px); }
.rooms__grid{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(18px,3vw,30px);
  align-items:end;
}

/* photo frame */
.frame{ margin:0; }
.frame__img{
  width:100%;
  aspect-ratio:3 / 2;
  background-size:cover; background-position:center;
  border-radius:var(--radius);
  background-color:var(--bg-sand);
}
.frame--tall .frame__img{ aspect-ratio:4 / 5; }
.frame--wide .frame__img{ aspect-ratio:3 / 2; }
.frame--tall.arch .frame__img{ border-radius:0 0 var(--radius) var(--radius); }
.frame__cap{
  font-family:var(--display); font-style:italic;
  font-size:.92rem; color:var(--ink-soft);
  margin-top:.7em; padding-left:14px;
  border-left:1.5px solid var(--muted);
  line-height:1.4;
}

/* Ken Burns drift for in-frame photos */
.kb{ transform:scale(1); transition:transform 16s var(--ease); will-change:transform; }
.is-in .kb{ transform:scale(1.045); }

/* ===========================================================
   THE LAND — full-bleed arched band + two-column intro + pair
   =========================================================== */
.land{ background:var(--bg); }
.band{ margin:0; position:relative; overflow:hidden; }
.band__img{
  height:clamp(300px,46vw,540px);
  background-size:cover; background-position:center 58%;
}
.land__panel{ background:var(--bg); }
.land__cols{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(24px,5vw,72px);
  align-items:start;
  margin-bottom:clamp(40px,6vw,68px);
}
.land__intro .seam{ margin-bottom:0; }
.land__text{ color:var(--ink-soft); font-size:1.06rem; }
.land__text p{ margin:0; }
.land__pair{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,3vw,30px);
}

/* ===========================================================
   CAMPOS & THE SEA
   =========================================================== */
.campos{ background:var(--bg-deep); }
.campos__grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(30px,6vw,80px); align-items:center;
}
.campos__text{ color:var(--ink-soft); }
.campos__text .section__title{ color:var(--ink); }
.campos__text > p{ max-width:50ch; }
.reach{
  display:flex; flex-wrap:wrap; gap:clamp(22px,4vw,46px);
  margin-top:30px; padding-top:26px; border-top:1px solid var(--line);
}
.reach li{ display:flex; flex-direction:column; gap:2px; font-size:.86rem; color:var(--ink-soft); }
.reach__t{ font-size:1.7rem; color:var(--accent); line-height:1; }

/* ===========================================================
   STAY / BOOKING — the one dark, warm panel (earth, not corporate)
   =========================================================== */
.stay{ background:var(--bg-deep); }
.stay__inner{
  background:var(--bg-dark);
  color:#EFE3CF;
  border-radius:var(--radius);
  margin-inline:var(--gut);
  position:relative;
  overflow:hidden;
}
/* faint lime-wash texture using layered warm radials, no image */
.stay__inner::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(60% 80% at 12% 0%, rgba(181,97,58,.18), transparent 60%),
    radial-gradient(50% 70% at 92% 100%, rgba(124,122,78,.16), transparent 60%);
}
.stay__inner > .wrap{ position:relative; z-index:1; padding-block:clamp(48px,8vw,92px); text-align:center; }
.stay .seam{ margin-inline:auto; }
.stay__title{
  font-size:clamp(2rem,5.2vw,3.3rem); line-height:1.06; color:#F6ECDA;
  letter-spacing:-.012em; font-weight:500; text-wrap:balance;
}
.stay__lede{
  max-width:56ch; margin:0 auto 1.6em; color:#D8C6AC;
  font-size:1.08rem; line-height:1.66;
}
.stay__actions{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.stay__alt{
  font-family:var(--display); font-style:italic;
  font-size:1rem; color:var(--muted);
  border-bottom:1px solid rgba(201,168,106,.4);
  padding:6px 2px; line-height:1.3;
  transition:color 300ms var(--ease), border-color 300ms var(--ease);
}
.stay__alt:hover{ color:#F6ECDA; border-bottom-color:var(--muted); }
.stay__note{
  margin:.4em 0 0; font-family:var(--display); font-style:italic;
  font-size:.92rem; color:var(--muted); letter-spacing:.01em;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.foot{ background:var(--bg-dark); color:#D8C6AC; padding-top:clamp(40px,6vw,60px); }
.foot .seam--wide{ margin-bottom:clamp(40px,6vw,60px); }
.foot__inner{
  display:grid; grid-template-columns:1.2fr 1.4fr; gap:clamp(30px,6vw,72px);
  padding-bottom:clamp(34px,5vw,52px);
}
.foot__name{ font-size:clamp(1.5rem,3.4vw,2rem); color:#F4EBDD; font-weight:500; line-height:1.1; display:block; }
.foot__tag{ font-family:var(--display); font-style:italic; color:var(--muted); margin-top:.6em; max-width:30ch; }
.foot__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.foot__h{
  font-family:var(--body); text-transform:uppercase; letter-spacing:.2em;
  font-size:.7rem; font-weight:600; color:var(--muted); margin-bottom:.9em;
}
.foot__col p{ font-size:.92rem; line-height:1.6; margin:0; color:#CDBA9E; }
.foot__col a{ transition:color 300ms var(--ease); }
.foot__col a:hover{ color:var(--accent); }
.foot__base{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding-block:22px; border-top:1px solid rgba(201,168,106,.2);
  font-size:.8rem; color:#9c8b76;
}
.foot__made{ font-family:var(--display); font-style:italic; color:var(--muted); }

/* ===========================================================
   SCROLL REVEAL — text rises 16px and fades
   =========================================================== */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
/* stagger children of the same group a touch */
.rooms__grid .reveal:nth-child(2),
.land__pair .reveal:nth-child(2){ transition-delay:120ms; }

/* ===========================================================
   KEYFRAMES
   =========================================================== */
@keyframes kenburns{ from{ transform:scale(1.0);} to{ transform:scale(1.04);} }
@keyframes heroZoom{ from{ transform:scale(1.06);} to{ transform:scale(1.0);} }
@keyframes nudge{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1020px){
  .rooms__grid{ grid-template-columns:1fr 1fr; }
  .land__cols{ grid-template-columns:1fr; gap:18px; }
  .land__intro .seam{ margin-bottom:8px; }
}

@media (max-width:820px){
  :root{ --arch:74px; }
  body{ font-size:16.5px; }

  /* nav → burger */
  .nav__links{
    position:fixed; inset:64px 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:4px;
    background:rgba(244,235,221,.97);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    padding:14px var(--gut) 26px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity 360ms var(--ease), transform 360ms var(--ease);
  }
  .nav__links a{ padding:14px 0; min-height:44px; display:flex; align-items:center; font-size:1.06rem; width:100%; border-bottom:1px solid var(--line); }
  .nav__links a:last-child{ border-bottom:0; }
  .nav__cta{ display:inline-flex; margin-top:10px; min-height:44px; }
  /* larger hit area for language toggle */
  .lang__btn{ padding:10px 8px; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .nav.is-open .nav__links{ opacity:1; transform:none; pointer-events:auto; }
  .nav__burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:34px; height:34px; background:none; border:0; cursor:pointer; padding:0;
  }
  .nav__burger span{ height:1.5px; width:22px; background:var(--ink); transition:transform 360ms var(--ease), opacity 240ms var(--ease); }
  .nav.is-open .nav__burger span:first-child{ transform:translateY(3.5px) rotate(45deg); }
  .nav.is-open .nav__burger span:last-child{ transform:translateY(-3px) rotate(-45deg); }

  /* hero: copy column on tablet so the headline breathes without clipping */
  .hero__copy{ max-width:min(92vw,560px); }
  .rooms__grid{ grid-template-columns:1fr; gap:26px; }
  .frame--tall .frame__img{ aspect-ratio:3 / 2; }
  .land__pair{ grid-template-columns:1fr; gap:26px; }
  .campos__grid{ grid-template-columns:1fr; gap:30px; }
  .campos .frame--tall .frame__img{ aspect-ratio:3 / 2; }
}

@media (max-width:560px){
  /* ---- root cause fix: keep every line of text inside the phone width ----
     Cap the readable measure and pin text to the left gutter so headings and
     paragraphs always wrap well within the viewport (no right-edge clipping).
     --measure is a safe content width that fits a 390px screen with a gutter. */
  :root{ --arch:60px; --gut:20px; --measure:350px; }

  .hero__copy,
  .wrap, .wrap--narrow,
  .rooms__head, .rooms__lead,
  .land__text, .campos__text,
  .story__lede, .story__body,
  .stay__inner > .wrap{
    text-align:left;
  }

  /* headings + body never exceed the visible measure, regardless of layout width */
  .hero__title,
  .hero__sub,
  .section__title,
  .stay__title,
  .story__lede,
  .story__body,
  .rooms__lead,
  .land__text,
  .campos__text,
  .stay__lede,
  .eyebrow, .kicker,
  p{
    max-width:var(--measure);
  }
  /* hero headline: bold and confident on the phone, still inside the crop */
  .hero__title{ font-size:clamp(2.6rem,13.5vw,3.5rem); line-height:.98; max-width:11ch; }
  .hero__sub{ max-width:var(--measure); font-size:1.04rem; }

  /* override higher-specificity ch-based caps from the base rules */
  .campos__text > p, .story__body, .rooms__lead, .land__text{ max-width:var(--measure); }

  /* photo captions wrap within the measure (were clipping at the right edge) */
  .frame__cap{ max-width:var(--measure); }

  /* lists / inline groups wrap within the measure too */
  .marks, .reach{ max-width:var(--measure); gap:24px; }

  /* footer base: stack left so the made-line never spills past the edge */
  .foot__base{ justify-content:flex-start; gap:4px; max-width:var(--measure); }
  .foot__made{ width:100%; }

  /* centred panels become left-anchored so their text stays inside the crop */
  .stay .seam, .stay__actions, .stay__alt, .stay__note{ margin-left:0; margin-right:auto; }
  .stay__actions{ align-items:flex-start; }
  .stay__lede{ margin-left:0; }

  .foot__inner{ grid-template-columns:1fr; gap:26px; }
  .foot__cols{ grid-template-columns:1fr 1fr; gap:22px; max-width:var(--measure); }
  .foot__base{ font-size:.76rem; }
  .foot__tag, .foot__name{ max-width:var(--measure); }

  /* hero on phones: comfortable frame, copy seated low, no scroll-cue collision */
  .hero{ min-height:560px; }
  .hero__frame{ padding-bottom:clamp(34px,6vh,56px); }
  .hero__img{ background-position:center 52%; }     /* keep the warm focal glow in frame */
  .hero__seam{ width:min(300px,86%); }
  .hero__scroll{ display:none; }                    /* buttons carry the next-step; keep base clean */

  /* buttons: stack full-measure so the second never spills past the edge */
  .hero__actions{ flex-direction:column; align-items:stretch; max-width:var(--measure); }
  .hero__actions .btn{ width:100%; justify-content:center; min-height:48px; }
  .btn{ white-space:normal; }            /* allow long labels to wrap, never clip */
  .btn--lg{ width:100%; max-width:var(--measure); justify-content:center; min-height:50px; }

  .stay__inner{ margin-inline:max(14px,calc(var(--gut) - 8px)); }
}

/* extra-narrow phones: tighten the measure a touch more */
@media (max-width:400px){
  :root{ --measure:330px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero__img{ transform:none; }
  .seam-line{ stroke-dashoffset:0; } .seam-joint,.seam-sprig{ opacity:1; transform:none; }
  .hs-line{ stroke-dashoffset:0; } .hs-joint,.hs-sprig{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}