/* ============================================================
   Finca Gallicant — "The hand-kept finca"
   A small house near Santanyí, set down as if hand-written and
   hand-stamped onto warm clay paper.
   CONCEPT: handmade, hand-kept — characterful, not slick.
   SIGNATURE MOTIF: the inked G monogram (a pressed hand-stamp) +
   hand-drawn rules + a maker's stamped paper card.
   TYPE: Bricolage Grotesque (warm, slightly irregular grotesque) + Inter.
   PALETTE: warm rustic ochre — terracotta, sun-baked clay, almond,
   warm off-white. Distinct from can-pina (rosa/sage serif) & sant-blai.
   ============================================================ */

:root{
  /* ---- palette: warm rustic ochre ---- */
  --terra:    #c46a3b;   /* terracotta — the signature accent (roof tile) */
  --terra-deep:#a8542c;
  --clay:     #b8763f;   /* sun-baked clay / ochre */
  --ochre:    #d8a24a;   /* warm ochre highlight */
  --umber:    #6b3d24;   /* dark roasted umber — ink for the stamp/text on light */
  --umber-soft:#8a6249;
  --almond:   #e7d3b3;   /* almond shell / dry grass */
  --paper:    #f6efe2;   /* warm off-white paper */
  --paper-2:  #efe4d0;   /* a shade deeper, panels */
  --paper-warm:#f1e4cd;  /* warm clay paper for the hero */
  --ink:      #3a271b;   /* warm near-black for body text */
  --ink-soft: #6f5644;

  --bg: var(--paper);
  --line: color-mix(in srgb, var(--umber) 22%, transparent);
  --line-soft: color-mix(in srgb, var(--umber) 13%, transparent);

  /* ---- type ---- */
  --disp: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- rhythm ---- */
  --pad: clamp(20px, 5.5vw, 92px);
  --maxw: 1160px;
  --r: 3px;     /* nearly-square, honest edges (not glossy-round) */

  --ease: cubic-bezier(.21,.6,.35,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; } }
#house,#land,#rooms,#table,#book{ scroll-margin-top:80px; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-size:17px;
  line-height:1.62;
  -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:700; }
p{ margin:0 0 1em; }
:focus-visible{ outline:2.5px solid var(--terra); outline-offset:3px; border-radius:2px; }

/* the ink stroke that draws every monogram / rule */
.ink{ stroke:currentColor; }

/* display headings — Bricolage, hand-set; never shatter a word */
.hero__title,.house__title,.land__title,.rooms__title,.table__title,.book__title,
.card-stamp__title{
  font-family:var(--disp);
  font-weight:700;
  line-height:1.03;
  letter-spacing:-.018em;
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--umber); color:var(--paper); padding:12px 18px; border-radius:0 0 var(--r) 0;
  font-size:.85rem; font-weight:600;
}
.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:.005em;
  text-decoration:none; border-radius:var(--r); cursor:pointer;
  border:1.5px solid transparent; white-space:nowrap;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--lg{ --bh:54px; padding:0 32px; font-size:1rem; }
.btn--solid{ background:var(--terra); color:var(--paper); box-shadow:0 10px 24px -14px color-mix(in srgb,var(--terra-deep) 90%,#000); }
.btn--solid:hover{ background:var(--terra-deep); transform:translateY(-2px); }
.btn--line{ border-color:color-mix(in srgb,var(--umber) 38%,transparent); color:var(--ink); background:transparent; }
.btn--line:hover{ border-color:var(--terra); color: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-deep); }

/* ============================================================
   Kicker + ledger numerals (Bricolage numerals — hand-set)
   ============================================================ */
.kicker{
  display:flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:600;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--terra-deep); margin:0 0 1.15em;
}
.kicker--light{ color:color-mix(in srgb,var(--paper) 88%,var(--ochre)); }
.kicker__no{
  font-family:var(--disp); font-weight:700; font-size:1.25rem; letter-spacing:0;
  line-height:1; color:currentColor;
  border-bottom:2.5px solid currentColor; padding-bottom:2px;
  font-feature-settings:"ss01" 1;
}

/* hand-drawn rules (signature) */
.rule{ display:block; color:var(--terra); }
.rule--hero{ width:min(420px,76%); margin:.2em 0 1.5em; }
.rule--hero svg{ width:100%; height:auto; }
.rule--book{ width:min(320px,70%); margin:0 auto 1.8em; color:color-mix(in srgb,var(--paper) 72%,var(--ochre)); }
.rule--book svg{ width:100%; height:auto; }

/* ============================================================
   HEADER
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:14px;
  padding:13px var(--pad);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-solid{
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:saturate(135%) blur(10px);
  -webkit-backdrop-filter:saturate(135%) blur(10px);
  border-bottom-color:var(--line-soft);
}
.nav__brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--umber); margin-right:auto; min-height:44px; padding:4px 2px; }
.nav__stamp{ display:inline-flex; color:var(--terra); transform:rotate(-4deg); }
.nav__name{ font-family:var(--disp); font-weight:800; font-size:1.34rem; color:var(--umber); letter-spacing:-.01em; }

.nav__links{ display:none; gap:30px; }
.nav__links a{
  text-decoration:none; color:var(--ink-soft); font-weight:500; font-size:.92rem;
  position:relative; display:inline-flex; align-items:center; min-height:44px; padding:11px 0; transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:9px; height:2px; 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:12px; }
.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:600; font-size:.82rem; letter-spacing:.04em;
  color:var(--ink-soft); transition:color .3s var(--ease);
}
.lang__btn.is-active{ color:var(--terra-deep); }
.lang__btn:hover{ color:var(--ink); }
.lang__sep{ color:var(--line); }

.nav__book{ display:none; }

/* ============================================================
   HERO — a giant hand-pressed maker's seal, the type locked into it
   The inked-G is no longer a corner watermark: it is the centrepiece,
   an oversized stamp that holds the whole 100svh frame, with the
   headline overlapping it so type + motif read as one image.
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(104px,15vh,150px) var(--pad) clamp(80px,13vh,120px);
  overflow:hidden;
  isolation:isolate;
  background:
    /* warm light pooling from upper-left so the seal sits in a glow */
    radial-gradient(125% 105% at 12% 12%, color-mix(in srgb,var(--paper-warm) 97%,#fff) 0%, var(--paper-warm) 40%, var(--paper-2) 100%);
}
/* subtle hand-made paper grain (cheap, no asset) */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(color-mix(in srgb,var(--umber) 7%,transparent) 0.6px, transparent 0.7px);
  background-size:4px 4px;
  opacity:.5;
  mix-blend-mode:multiply;
}
/* a terracotta wash bleeding from the right, anchoring the seal's side */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(80% 90% at 88% 52%, color-mix(in srgb,var(--ochre) 22%,transparent) 0%, transparent 60%),
    linear-gradient(108deg, transparent 46%, color-mix(in srgb,var(--clay) 12%,transparent) 100%);
}

/* THE SEAL — the dominant graphic. A big inked stamp pressed into the clay,
   bleeding off the right edge on purpose; clipped by the hero so it never
   adds horizontal scroll. Sized off the smaller axis so it stays a stamp,
   not a stretched blob, at every viewport. */
.hero__seal{
  position:absolute; z-index:0;
  top:50%; right:clamp(-200px,-15vw,-70px);
  transform:translateY(-50%) rotate(-5deg);
  color:var(--terra);
  pointer-events:none;
  line-height:0;
  /* a soft pressed-ink halo so the stamp feels embedded in the paper */
  filter:drop-shadow(0 26px 40px color-mix(in srgb,var(--terra-deep) 22%,transparent));
}
.hero__seal .seal{
  display:block;
  width:clamp(440px, 64vmin, 820px); height:auto;
}
/* the seal's parts — pressed-ink opacities, the G most present */
.seal__ring{ opacity:.78; }
.seal__ring--in{ opacity:.5; }
.seal__legend{
  font-family:var(--disp); font-weight:700;
  font-size:21px; letter-spacing:.34em;
  fill:currentColor; opacity:.82;
}
.seal__legend--sm{ font-size:15.5px; letter-spacing:.26em; opacity:.62; }
.seal__g{ opacity:.95; }
.seal__sprig{ opacity:.7; }

/* faint outline echo of the same stamp, low-left, so the field never reads
   empty and the composition has a second beat (kept very quiet) */
.hero__seal::after{
  content:""; position:absolute; left:0; bottom:0;
}

.hero__inner{
  max-width:680px; position:relative; z-index:1;
}

.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.7em; flex-wrap:wrap;
  font-family:var(--sans); font-weight:600; font-size:.8rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--terra-deep); margin:0 0 1.1em;
}
.hero__est{ position:relative; }
.hero__dot{ width:5px; height:5px; border-radius:50%; background:color-mix(in srgb,var(--umber) 40%,transparent); display:inline-block; }
.hero__eyebrow > span:last-child{ color:var(--umber-soft); }

.hero__title{
  color:var(--umber);
  font-size:clamp(3rem, 12.5vw, 7.6rem);
  margin:0 0 .12em;
  font-weight:700;
  /* a faint paper-coloured backing so the type stays legible where it
     overlaps the inked ring (handmade lockup, not a floating label) */
  text-shadow:0 1px 0 color-mix(in srgb,var(--paper-warm) 78%,transparent);
}
.hero__line{ display:block; }
.hero__line--ink{ color:var(--terra); }

.hero__sub{
  color:var(--ink-soft);
  font-size:clamp(1.04rem,2.3vw,1.24rem); line-height:1.55; max-width:42ch;
  margin:0 0 1.9em;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

.hero__note{
  position:absolute; left:var(--pad); bottom:clamp(20px,5vh,40px); z-index:2;
  margin:0; max-width:min(62vw,42ch);
  font-family:var(--sans); font-size:.74rem; letter-spacing:.02em;
  color:var(--umber-soft);
}
.hero__note-k{ font-family:var(--disp); font-weight:700; font-style:italic; color:var(--terra-deep); margin-right:.2em; }

.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(20px,5vh,40px); z-index:2;
  display:none; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color:var(--umber-soft);
}
.hero__scroll-txt{ font-family:var(--disp); font-weight:600; font-size:.82rem; writing-mode:vertical-rl; letter-spacing:.06em; }
.hero__scroll-mark{ display:inline-flex; color:var(--terra); animation:nudge 2.4s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* ============================================================
   HOUSE — paper, copy left, the stamped maker's card right
   ============================================================ */
.house{ padding:clamp(70px,11vw,150px) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.house__grid{ display:grid; gap:clamp(38px,6vw,72px); align-items:start; }
.house__title{ font-size:clamp(1.95rem,5.6vw,3.2rem); color:var(--umber); margin:0 0 .65em; max-width:15ch; }
.house__copy p{ color:var(--ink-soft); max-width:54ch; }

.ledger{ list-style:none; margin:2em 0 0; padding:0; border-top:2px solid var(--line); }
.ledger li{
  display:flex; align-items:baseline; gap:1em;
  padding:.9em 0; border-bottom:1px solid var(--line-soft);
}
.ledger__no{
  font-family:var(--disp); font-weight:700; font-size:1.05rem; color:var(--terra);
  min-width:1.9em; text-align:right; flex:none; letter-spacing:.02em;
}
.ledger__txt{ color:var(--ink); font-size:.97rem; }

/* THE MAKER'S CARD — the signature stamped paper object */
.card-stamp{ position:relative; }
.card-stamp__paper{
  position:relative;
  background:
    radial-gradient(color-mix(in srgb,var(--umber) 6%,transparent) 0.6px, transparent 0.7px) 0 0/4px 4px,
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  padding:clamp(26px,4vw,40px);
  box-shadow:0 26px 50px -34px color-mix(in srgb,var(--umber) 70%,transparent);
  transform:rotate(-1.2deg);   /* hand-placed, not square */
}
/* a torn-deckle accent strip down the left */
.card-stamp__paper::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px;
  background:var(--terra); border-radius:4px;
}
.card-stamp__mark{
  display:inline-flex; color:var(--terra);
  transform:rotate(5deg); margin:0 0 .4em;
  opacity:.92;
}
.card-stamp__title{ font-size:1.5rem; color:var(--umber); margin:0 0 .45em; }
.card-stamp__txt{ color:var(--ink-soft); font-size:.97rem; margin:0 0 1em; }
.card-stamp__sign{ font-family:var(--disp); font-weight:600; font-style:italic; font-size:1.02rem; color:var(--terra-deep); margin:0; }

/* ============================================================
   LAND — warm ochre band, the distances drawn as a hand ledger
   ============================================================ */
.land{
  background:
    radial-gradient(130% 100% at 86% 8%, color-mix(in srgb,var(--clay) 70%,#000 4%), transparent 62%),
    linear-gradient(165deg, var(--terra) 0%, var(--terra-deep) 60%, var(--umber) 130%);
  color:var(--paper);
  padding:clamp(70px,12vw,150px) var(--pad);
  position:relative; isolation:isolate; overflow:hidden;
}
.land::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 0.6px, transparent 0.7px);
  background-size:5px 5px; opacity:.6;
}
.land__inner{ max-width:760px; margin-inline:auto; }
.land__title{ font-size:clamp(1.95rem,5.8vw,3.3rem); color:var(--paper); margin:0 0 .55em; max-width:18ch; }
.land__lede{ color:color-mix(in srgb,var(--paper) 90%,transparent); max-width:56ch; margin:0 0 1.6em; }

.dist{ list-style:none; margin:0 0 1.6em; padding:0; border-top:2px solid color-mix(in srgb,var(--paper) 40%,transparent); }
.dist__row{
  display:flex; align-items:baseline; gap:.8em;
  padding:.95em 0; border-bottom:1px solid color-mix(in srgb,var(--paper) 22%,transparent);
}
.dist__place{ color:var(--paper); font-size:1rem; flex:none; }
.dist__rule{ flex:1; height:0; border-bottom:1.5px dotted color-mix(in srgb,var(--paper) 45%,transparent); transform:translateY(-4px); }
.dist__val{
  font-family:var(--disp); font-weight:700; font-size:1.12rem;
  color:var(--ochre); white-space:nowrap; flex:none; letter-spacing:.01em;
}
.land__foot{ color:color-mix(in srgb,var(--paper) 82%,transparent); max-width:52ch; margin:0; font-size:.97rem; }

/* ============================================================
   ROOMS — paper, three hand-set entries (no photos: editorial)
   ============================================================ */
.rooms{ padding:clamp(70px,11vw,150px) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.rooms__head{ max-width:var(--maxw); margin:0 0 clamp(34px,6vw,58px); }
.rooms__title{ font-size:clamp(1.95rem,5.6vw,3.2rem); color:var(--umber); margin:0 0 .55em; max-width:20ch; }
.rooms__lede{ color:var(--ink-soft); max-width:56ch; margin:0; }

.rooms__grid{ display:grid; gap:clamp(18px,2.4vw,26px); }
.room{
  position:relative;
  background:var(--paper);
  border:1.5px solid var(--line-soft);
  border-radius:var(--r);
  padding:clamp(24px,3vw,32px) clamp(22px,3vw,30px) clamp(26px,3vw,34px);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.room:hover{ transform:translateY(-4px); box-shadow:0 24px 44px -32px color-mix(in srgb,var(--umber) 70%,transparent); border-color:var(--line); }
.room__no{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.1em; height:2.1em; margin:0 0 .6em;
  font-family:var(--disp); font-weight:700; font-size:1.1rem; color:var(--paper);
  background:var(--terra); border-radius:50%;
  transform:rotate(-4deg);
}
.room__title{ font-family:var(--disp); font-weight:700; font-size:1.42rem; color:var(--umber); margin:0 0 .4em; letter-spacing:-.01em; }
.room__txt{ color:var(--ink-soft); font-size:.96rem; margin:0 0 1em; }
.room__meta{
  font-family:var(--sans); font-weight:600; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--terra-deep); margin:0;
  padding-top:.9em; border-top:1px solid var(--line-soft);
}
.rooms__note{ margin:clamp(26px,4vw,40px) 0 0; color:var(--umber-soft); font-size:.95rem; font-style:italic; }

/* ============================================================
   TABLE — the single big photo moment + copy
   ============================================================ */
.table{ background:var(--paper-2); padding:clamp(70px,11vw,150px) var(--pad); }
.table__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; gap:clamp(34px,6vw,68px); align-items:center; }
.table__fig{ margin:0; }
.table__frame{
  position:relative; border-radius:var(--r); overflow:hidden;
  background:var(--almond);
  box-shadow:0 30px 60px -36px color-mix(in srgb,var(--umber) 80%,transparent);
  transform:rotate(-1deg);   /* a print laid down by hand */
}
.table__frame::after{
  /* a thin inked keyline inset, like a pasted print */
  content:""; position:absolute; inset:9px; border:1.5px solid color-mix(in srgb,var(--paper) 60%,transparent);
  border-radius:2px; pointer-events:none;
}
.table__frame img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; filter:saturate(1.04) contrast(1.02); }
.table__cap{ margin:1.1em 2px 0; font-size:.85rem; color:var(--umber-soft); font-style:italic; max-width:42ch; }

.table__title{ font-size:clamp(1.95rem,5.6vw,3.1rem); color:var(--umber); margin:0 0 .65em; max-width:16ch; }
.table__copy p{ color:var(--ink-soft); max-width:50ch; }
.table__sig{ font-family:var(--disp); font-weight:600; font-style:italic; font-size:1.28rem; color:var(--terra-deep); margin:1em 0 0 !important; }

/* ============================================================
   BOOK — the keystone, terracotta wall, stamped
   ============================================================ */
.book{
  background:
    radial-gradient(140% 110% at 50% -16%, var(--clay) 0%, var(--terra) 38%, var(--terra-deep) 78%, var(--umber) 130%);
  color:var(--paper);
  padding:clamp(76px,13vw,160px) var(--pad);
  text-align:center;
  position:relative; isolation:isolate; overflow:hidden;
}
.book::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 0.6px, transparent 0.7px);
  background-size:5px 5px; opacity:.5;
}
.book__inner{ max-width:720px; margin-inline:auto; }
.book__stamp{ display:inline-flex; color:color-mix(in srgb,var(--paper) 86%,var(--ochre)); transform:rotate(-5deg); margin-bottom:6px; }
.book__kick{ justify-content:center; }
.book__title{ font-size:clamp(2.1rem,6.2vw,3.5rem); color:var(--paper); margin:0 0 .5em; }
.book__txt{ color:color-mix(in srgb,var(--paper) 92%,transparent); max-width:52ch; margin:0 auto 1.6em; }
.book__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.book .btn--solid{ background:var(--paper); color:var(--terra-deep); box-shadow:0 14px 30px -16px rgba(40,20,12,.7); }
.book .btn--solid:hover{ background:#fff; color:var(--terra-deep); }
.book__addr{ margin:1.8em 0 0; }
.book__addr a{
  display:inline-flex; align-items:center; min-height:44px;
  font-family:var(--disp); font-weight:600; font-size:1.08rem; color:var(--paper);
  text-decoration:none; border-bottom:1.5px solid color-mix(in srgb,var(--paper) 50%,transparent);
  word-break:break-word;
}
.book__addr a:hover{ border-color:var(--paper); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--umber); color:color-mix(in srgb,var(--paper) 80%,transparent); padding:clamp(50px,8vw,84px) var(--pad) 30px; }
.foot__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; gap:36px; }
.foot__mark{ display:inline-flex; color:var(--ochre); margin-bottom:8px; transform:rotate(-4deg); }
.foot__name{ font-family:var(--disp); font-weight:800; font-size:1.55rem; color:var(--paper); margin:0 0 .2em; letter-spacing:-.01em; }
.foot__place{ font-size:.85rem; color:color-mix(in srgb,var(--paper) 58%,transparent); margin:0; letter-spacing:.03em; }
.foot__h{ font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ochre); margin:0 0 1em; }
.foot__col p{ font-size:.92rem; margin:0 0 .7em; color:color-mix(in srgb,var(--paper) 78%,transparent); }
.foot__col a:not(.btn){ display:inline-flex; align-items:center; min-height:44px; padding:6px 0; color:color-mix(in srgb,var(--paper) 88%,transparent); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s; word-break:break-word; }
.foot__col a:not(.btn):hover{ border-color:currentColor; }
.foot__book{ margin-top:.5em; color:var(--paper); border-color:color-mix(in srgb,var(--paper) 32%,transparent); }
.foot__book:hover{ border-color:var(--ochre); color:var(--ochre); }

.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__rights{ margin:0; font-size:.8rem; color:color-mix(in srgb,var(--paper) 56%,transparent); }
.foot__sign{ margin:0; font-family:var(--disp); font-weight:600; font-style:italic; font-size:1rem; color:var(--ochre); }

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

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (min-width:720px){
  .house__grid{ grid-template-columns:1.15fr .85fr; }
  .rooms__grid{ grid-template-columns:repeat(3,1fr); }
  .table__grid{ grid-template-columns:1.05fr .95fr; }
}

/* desktop */
@media (min-width:960px){
  .nav__links{ display:flex; }
  .nav__book{ display:inline-flex; }
  .hero__scroll{ display:flex; }
  /* type centred and locked INTO the seal — the seal owns the right and its
     ring tucks behind the headline's right edge so they read as one stamp.
     The title sits above the seal (z-index) with a paper text-shadow so it
     stays legible across the ink. */
  .hero{ justify-content:center; }
  .hero__seal{ right:clamp(-130px,-4vw,-20px); }
  .hero__seal .seal{ width:clamp(600px, 58vw, 900px); }
  .hero__inner{ max-width:680px; }
  .hero__title{ position:relative; }
  /* let the last line run a touch wider, into the ring */
  .hero__sub, .hero__cta{ max-width:40ch; }
}

/* large */
@media (min-width:1200px){
  body{ font-size:18px; }
  .hero__seal{ right:max(-90px, calc((100vw - var(--maxw))/2 - 110px)); }
  .hero__seal .seal{ width:min(900px, 60vw); }
}

/* ---- HERO seal on small screens: a bold pressed mark, high-right ----
   On phones the type stacks in one column, so the seal is anchored to the
   TOP-RIGHT and bleeds off the top + right corner (clipped by overflow:hidden
   → zero horizontal scroll). It frames the headline's upper-right as a large
   stamp, while the lower hero (sub + CTAs) stays on clean clay for legibility.
   The G is the dominant note; rings/legend are dialled back so they read as
   texture behind the type, not competing copy. */
@media (max-width:719px){
  .hero{ justify-content:flex-start; }
  .hero__seal{
    top:auto; bottom:auto;
    top:clamp(34px,8vh,90px);               /* high — clears the body + CTAs */
    right:clamp(-230px,-52vw,-150px);       /* bleeds further off the corner */
    transform:rotate(-5deg);
    opacity:.9;
  }
  .hero__seal .seal{ width:clamp(440px, 116vw, 580px); }
  /* dial the supporting marks back so the type stays the read on a phone */
  .seal__ring{ opacity:.5; }
  .seal__ring--in{ opacity:.32; }
  .seal__legend{ opacity:.5; }
  .seal__legend--sm{ opacity:.34; }
  .seal__sprig{ opacity:.42; }
  .seal__g{ opacity:.86; }
  .hero__title{ font-size:clamp(2.9rem, 15vw, 4.6rem); }
  .hero__sub{ font-size:1.04rem; }
}
@media (max-width:400px){
  .hero__seal{ top:clamp(36px,8vh,80px); right:-46vw; }
  .hero__seal .seal{ width:122vw; }         /* fills + bleeds; clipped, no scroll */
}