/* ============================================================================
   WABISABI — STYLESHEET
   ----------------------------------------------------------------------------
   Organised top to bottom:
     1. Fonts          2. Design tokens     3. Base and typography
     4. Layout         5. Header and nav    6. Hero
     7. Sections       8. Rooms             9. Gallery
    10. Unawatuna     11. Booking          12. Forms
    13. Footer        14. Responsive       15. Motion and print

   To change colours or spacing site-wide, edit the tokens in section 2 only.
   ========================================================================== */


/* 1. FONTS — served from this site, nothing loaded from elsewhere
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-full.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Karla';
  src: url('../fonts/karla-latin.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}


/* 2. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* Colour — limewash plaster, wet sand, jungle and unglazed clay.
     Change these six values and the whole site changes with them. */
  --ink:        #20201d;   /* text, and the darkest surfaces */
  --ink-soft:   #3a3831;
  --stone:      #6c6459;   /* secondary text */
  --lime:       #e4dccc;   /* the main page background */
  --lime-pale:  #ece6da;   /* lighter panels */
  --sand:       #d5c9b4;   /* deeper panels and edges */
  --moss:       #4f5a46;   /* the interactive colour: links, buttons */
  --moss-deep:  #3c4536;
  --clay:       #8e5b36;   /* used very sparingly, for emphasis only */

  --line:       rgba(32, 32, 29, 0.16);
  --line-soft:  rgba(32, 32, 29, 0.08);

  /* Type */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body:    'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Type scale, fluid between small and large screens */
  --t-hero:  clamp(3.4rem, 13vw, 11rem);
  --t-xxl:   clamp(2.4rem, 5.4vw, 4.4rem);
  --t-xl:    clamp(1.9rem, 3.4vw, 2.9rem);
  --t-lg:    clamp(1.35rem, 2.1vw, 1.7rem);
  --t-md:    1.0625rem;
  --t-sm:    0.9375rem;
  --t-xs:    0.8125rem;

  /* Spacing */
  --gap:      1.5rem;
  --pad-x:    clamp(1.25rem, 5vw, 4.5rem);
  --section:  clamp(4.5rem, 11vw, 9rem);
  --measure:  62ch;         /* comfortable reading width */
  --maxw:     78rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* 3. BASE AND TYPOGRAPHY
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--lime);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-md);
  line-height: 1.72;
  font-variation-settings: 'wght' 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  /* SOFT rounds the corners of the letters and WONK swaps in the slanted
     alternates — together they give the type a hand-made edge. */
  font-variation-settings: 'wght' 340, 'SOFT' 70, 'WONK' 1, 'opsz' 144;
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); font-variation-settings: 'wght' 400, 'SOFT' 60, 'WONK' 1, 'opsz' 48; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; font-family: var(--body); font-variation-settings: 'wght' 600; letter-spacing: 0; line-height: 1.4; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--moss-deep); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--clay); }

img, video { max-width: 100%; height: auto; display: block; }

/* A visible focus ring for people navigating by keyboard. */
:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
  border-radius: 2px;
}

.skipLink {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--lime);
  padding: 0.75rem 1.25rem; font-size: var(--t-sm);
}
.skipLink:focus { left: 0; }

.previewNotice {
  margin: 0;
  max-width: none;   /* overrides the reading width set on p */
  background: var(--ink);
  color: rgba(228, 220, 204, 0.82);
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
  text-align: center;
  padding: 0.55rem var(--pad-x);
}


/* 4. LAYOUT
   ------------------------------------------------------------------------- */
.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--section); }

/* Sections are separated by a shift in the plaster tone, not by a rule. */
.section--sand      { background: var(--sand); }
.section--pale      { background: var(--lime-pale); }
.section--ink       { background: var(--ink); color: var(--lime); }
.section--ink h2,
.section--ink h3    { color: var(--lime); }
.section--ink a     { color: var(--lime); }
.section--ink .lede { color: rgba(228, 220, 204, 0.76); }

.section--tight { padding-block: clamp(3rem, 7vw, 5rem); }

/* The intro paragraph of a section: larger, quieter. */
.lede {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--ink-soft);
  font-variation-settings: 'wght' 350;
  max-width: 40ch;
}

.note {
  font-size: var(--t-sm);
  color: var(--stone);
}

/* An asymmetric two-column block: text sits off the centre line. */
.split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split__text  { grid-column: 1 / 6; }
.split__media { grid-column: 7 / 13; }
.split--flip .split__text  { grid-column: 8 / 13; }
.split--flip .split__media { grid-column: 1 / 7; }

/* Images sit in a plain frame with a faint edge, never a rounded card. */
.frame { position: relative; }
.frame img { width: 100%; }
.frame::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  pointer-events: none;
}
.frame__caption {
  margin-top: 0.7rem;
  font-size: var(--t-xs);
  color: var(--stone);
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--body);
  font-size: var(--t-sm);
  font-variation-settings: 'wght' 600;
  letter-spacing: 0.015em;
  line-height: 1;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--moss);
  text-decoration: none;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  cursor: pointer;
}
.btn--solid   { background: var(--moss); color: var(--lime-pale); }
.btn--solid:hover   { background: var(--moss-deep); border-color: var(--moss-deep); color: var(--lime-pale); }
.btn--outline { background: transparent; color: var(--moss-deep); }
.btn--outline:hover { background: var(--moss); color: var(--lime-pale); }

.is-onDark .btn--solid   { background: var(--lime-pale); border-color: var(--lime-pale); color: var(--ink); }
.is-onDark .btn--solid:hover { background: #fff; border-color: #fff; }
.is-onDark .btn--outline { color: var(--lime-pale); border-color: rgba(228, 220, 204, 0.55); }
.is-onDark .btn--outline:hover { background: rgba(228, 220, 204, 0.14); color: var(--lime-pale); }

/* A quiet text link that reads as an action. */
.textLink {
  font-size: var(--t-sm);
  font-variation-settings: 'wght' 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}


/* 5. HEADER AND NAVIGATION
   ------------------------------------------------------------------------- */
.siteHeader {
  position: relative;
  z-index: 50;
  background: var(--lime);
  border-bottom: 1px solid var(--line-soft);
}

/* On the home page the header sits over the film until you scroll. */
.siteHeader--overlay {
  position: absolute;
  inset-inline: 0;
  background: transparent;
  border-bottom-color: transparent;
  color: var(--lime-pale);
}
.siteHeader--overlay .siteNav__link,
.siteHeader--overlay .logo,
.siteHeader--overlay .navToggle { color: var(--lime-pale); }
.siteHeader--overlay .siteNav__cta { color: var(--lime-pale); border-color: rgba(228, 220, 204, 0.6); }
.siteHeader--overlay .siteNav__cta:hover { background: var(--lime-pale); color: var(--ink); }

/* Once scrolled, it becomes a solid bar that stays with you. */
.siteHeader.is-stuck {
  position: fixed;
  top: 0;
  background: rgba(228, 220, 204, 0.94);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom-color: var(--line-soft);
  color: var(--ink);
  animation: dropIn 0.35s var(--ease);
}
.siteHeader.is-stuck .siteNav__link,
.siteHeader.is-stuck .logo,
.siteHeader.is-stuck .navToggle { color: var(--ink); }
.siteHeader.is-stuck .siteNav__cta { color: var(--moss-deep); border-color: var(--moss); }
.siteHeader.is-stuck .siteNav__cta:hover { background: var(--moss); color: var(--lime-pale); }

@keyframes dropIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.siteHeader__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 1.15rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  text-decoration: none;
}
.logo__mark { width: 30px; height: 30px; flex: none; }
.logo__word {
  font-family: var(--display);
  font-size: 1.45rem;
  font-variation-settings: 'wght' 400, 'SOFT' 80, 'WONK' 1, 'opsz' 40;
  letter-spacing: 0.055em;
  line-height: 1;
}
.logo__word--footer { font-size: 2rem; display: block; margin-bottom: 0.6rem; }

.navToggle {
  display: none;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 0;
  padding: 0.4rem 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-sm);
  font-variation-settings: 'wght' 600;
  cursor: pointer;
}
.navToggle__bars { display: inline-flex; flex-direction: column; gap: 5px; width: 20px; }
.navToggle__bars i { display: block; height: 1px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.navToggle[aria-expanded="true"] .navToggle__bars i:first-child { transform: translateY(3px) rotate(45deg); }
.navToggle[aria-expanded="true"] .navToggle__bars i:last-child  { transform: translateY(-3px) rotate(-45deg); }

.siteNav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.1rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.siteNav__link {
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease);
}
.siteNav__link:hover,
.siteNav__link.is-current { border-bottom-color: currentColor; }

.siteNav__cta {
  display: inline-block;
  font-size: var(--t-sm);
  font-variation-settings: 'wght' 600;
  text-decoration: none;
  color: var(--moss-deep);
  border: 1px solid var(--moss);
  padding: 0.6rem 1.15rem;
  line-height: 1;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.siteNav__cta:hover { background: var(--moss); color: var(--lime-pale); }


/* 6. HERO — the one loud moment on the site
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(94svh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  color: var(--lime-pale);
}

.hero__media { position: absolute; inset: 0; }
.hero__media video,
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Darkened towards the bottom so the wordmark stays readable on any footage. */
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
              rgba(32,32,29,0.42) 0%,
              rgba(32,32,29,0.10) 32%,
              rgba(32,32,29,0.58) 78%,
              rgba(32,32,29,0.78) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad-x) clamp(3rem, 8vw, 5.5rem);
}

.hero__word {
  font-family: var(--display);
  font-size: var(--t-hero);
  font-variation-settings: 'wght' 300, 'SOFT' 90, 'WONK' 1, 'opsz' 144;
  letter-spacing: -0.012em;
  line-height: 0.9;
  margin: 0 0 0.35em;
  color: var(--lime-pale);
}

.hero__line {
  font-size: var(--t-lg);
  line-height: 1.4;
  max-width: 26ch;
  color: rgba(236, 230, 218, 0.9);
  margin: 0 0 2rem;
  font-variation-settings: 'wght' 350;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* One orchestrated reveal on load — nothing else on the site animates in. */
.hero__word, .hero__line, .hero__actions {
  animation: riseIn 1.1s var(--ease) both;
}
.hero__line    { animation-delay: 0.16s; }
.hero__actions { animation-delay: 0.3s; }
@keyframes riseIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero__scroll {
  position: absolute;
  right: var(--pad-x);
  bottom: clamp(3rem, 8vw, 5.5rem);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: rgba(236, 230, 218, 0.6);
  text-decoration: none;
  writing-mode: vertical-rl;
}
.hero__scroll:hover { color: var(--lime-pale); }


/* 7. SECTIONS
   ------------------------------------------------------------------------- */
/* Opening statement under the hero. */
.statement {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.statement__title { grid-column: 1 / 6; }
.statement__body  { grid-column: 7 / 12; }
.statement__body p { max-width: 46ch; }

/* Meaning-of-the-name panel. */
.meaning__word {
  font-family: var(--display);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-variation-settings: 'wght' 300, 'SOFT' 90, 'WONK' 1, 'opsz' 144;
  line-height: 1;
  margin: 0 0 1.2rem;
}
.meaning__gloss { color: var(--stone); font-size: var(--t-sm); }

/* Plain list of what the house has. Two or three columns, no icons. */
.amenities {
  columns: 3;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 60rem;
}
.amenities li {
  break-inside: avoid;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
}

/* Small facts set as pairs. */
.facts { display: grid; gap: 0.1rem; margin: 0; }
.facts div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm);
}
.facts dt { color: var(--stone); margin: 0; }
.facts dd { margin: 0; text-align: right; }

/* Section heading with a following line of context. */
.sectionHead { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); max-width: 46rem; }


/* 8. ROOMS — alternating full-width rows, not a deck of identical cards
   ------------------------------------------------------------------------- */
.roomRow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line-soft);
}
.roomRow:first-of-type { border-top: 0; }
.roomRow__media { grid-column: 1 / 8; }
.roomRow__text  { grid-column: 8 / 13; }
.roomRow:nth-child(even) .roomRow__media { grid-column: 6 / 13; order: 2; }
.roomRow:nth-child(even) .roomRow__text  { grid-column: 1 / 6; order: 1; }

.roomRow__name { margin-bottom: 0.35rem; }
.roomRow__meta {
  font-size: var(--t-xs);
  color: var(--stone);
  margin: 0 0 1rem;
}
.roomRow__rate {
  font-family: var(--display);
  font-size: 1.15rem;
  font-variation-settings: 'wght' 400, 'SOFT' 60, 'WONK' 0, 'opsz' 24;
  color: var(--clay);
  margin-bottom: 1.2rem;
}
.roomRow__features {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  font-size: var(--t-sm);
  color: var(--stone);
}
.roomRow__features li { padding: 0.35rem 0; border-bottom: 1px solid var(--line-soft); }


/* 9. GALLERY
   ------------------------------------------------------------------------- */
.galleryGrid {
  columns: 3;
  column-gap: 1rem;
}
.galleryGrid figure { margin: 0 0 1rem; break-inside: avoid; }
.galleryGrid button {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
}
.galleryGrid img { width: 100%; transition: opacity 0.3s var(--ease); }
.galleryGrid button:hover img { opacity: 0.86; }
.galleryGrid figcaption {
  font-size: var(--t-xs);
  color: var(--stone);
  padding-top: 0.45rem;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(24, 24, 21, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[open], .lightbox.is-open { display: flex; }
.lightbox img { max-height: 84svh; width: auto; }
.lightbox__caption {
  position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 0; right: 0;
  text-align: center; color: rgba(236,230,218,0.75); font-size: var(--t-sm);
}
.lightbox__close, .lightbox__nav {
  position: absolute; background: none; border: 0; cursor: pointer;
  color: var(--lime-pale); font-family: var(--body); font-size: var(--t-sm);
  font-variation-settings: 'wght' 600; padding: 0.8rem 1rem;
}
.lightbox__close { top: 0.5rem; right: 0.75rem; }
.lightbox__nav--prev { left: 0.25rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 0.25rem; top: 50%; transform: translateY(-50%); }


/* 10. UNAWATUNA
   ------------------------------------------------------------------------- */
.placeList { display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.placeRow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.placeRow__media { grid-column: 1 / 7; }
.placeRow__text  { grid-column: 7 / 12; }
.placeRow:nth-child(even) .placeRow__media { grid-column: 7 / 13; order: 2; }
.placeRow:nth-child(even) .placeRow__text  { grid-column: 2 / 7; order: 1; }
.placeRow__meta { font-size: var(--t-xs); color: var(--stone); margin-bottom: 0.7rem; }


/* 11. BOOKING
   ------------------------------------------------------------------------- */
.bookingLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.bookingLinks__note {
  font-size: var(--t-sm);
  color: var(--stone);
  max-width: 46ch;
}
.is-onDark + .bookingLinks__note,
.section--ink .bookingLinks__note { color: rgba(228, 220, 204, 0.62); }

.partnerNote {
  border-top: 1px solid var(--line-soft);
  padding-top: 1.4rem;
  margin-top: 2.4rem;
  font-size: var(--t-sm);
  color: var(--stone);
}

/* The closing invitation, over a photograph. */
.closing {
  position: relative;
  min-height: 62svh;
  display: flex;
  align-items: center;
  background: var(--ink);
  color: var(--lime-pale);
  overflow: hidden;
}
.closing__media { position: absolute; inset: 0; }
.closing__media img { width: 100%; height: 100%; object-fit: cover; }
.closing__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(32,32,29,0.86) 0%, rgba(32,32,29,0.52) 62%, rgba(32,32,29,0.34) 100%);
}
.closing__inner {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--pad-x);
  width: 100%;
}
.closing h2 { color: var(--lime-pale); max-width: 16ch; }
.closing p  { color: rgba(236, 230, 218, 0.8); max-width: 42ch; }


/* 12. FORMS
   ------------------------------------------------------------------------- */
.formGrid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.formGrid__intro { grid-column: 1 / 5; }
.formGrid__form  { grid-column: 6 / 13; }

.field { margin-bottom: 1.35rem; }
.field label {
  display: block;
  font-size: var(--t-sm);
  font-variation-settings: 'wght' 600;
  margin-bottom: 0.4rem;
}
.field .hint { font-size: var(--t-xs); color: var(--stone); font-variation-settings: 'wght' 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: var(--t-md);
  color: var(--ink);
  background: var(--lime-pale);
  border: 1px solid var(--line);
  padding: 0.85rem 1rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--moss); background: #fff; }
.field textarea { min-height: 9rem; resize: vertical; }

.fieldPair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Honeypot — a field only an automated spam bot would fill in. Hidden from
   people and from screen readers. Do not remove. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formMessage {
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  font-size: var(--t-sm);
  border: 1px solid var(--line);
  background: var(--lime-pale);
}
.formMessage--error { border-color: var(--clay); color: var(--clay); }
.formMessage--ok    { border-color: var(--moss); color: var(--moss-deep); }

.errorList { margin: 0.5rem 0 0; padding-left: 1.1rem; }


/* 13. FOOTER
   ------------------------------------------------------------------------- */
.siteFooter {
  background: var(--ink);
  color: rgba(228, 220, 204, 0.8);
  font-size: var(--t-sm);
}
.siteFooter__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--pad-x) 3rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.siteFooter a { color: rgba(228, 220, 204, 0.86); text-decoration: none; border-bottom: 1px solid rgba(228,220,204,0.28); }
.siteFooter a:hover { color: #fff; border-bottom-color: #fff; }
.siteFooter__brand .logo__word { color: var(--lime-pale); }
.siteFooter__line { max-width: 32ch; margin-bottom: 0.6rem; }
.siteFooter__line--quiet { color: rgba(228, 220, 204, 0.55); }
.siteFooter__heading {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-variation-settings: 'wght' 700;
  letter-spacing: 0.02em;
  color: rgba(228, 220, 204, 0.5);
  margin: 0 0 0.9rem;
}
.siteFooter__address { font-style: normal; line-height: 1.9; }
.siteFooter__list { list-style: none; margin: 0; padding: 0; line-height: 2.05; }
.siteFooter__list--social { margin-top: 0.8rem; }
.siteFooter__base {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 1.4rem var(--pad-x) 2.5rem;
  border-top: 1px solid rgba(228, 220, 204, 0.14);
  font-size: var(--t-xs);
  color: rgba(228, 220, 204, 0.5);
}
.siteFooter__base p { margin: 0; max-width: none; }


/* 14. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .amenities   { columns: 2; }
  .galleryGrid { columns: 2; }
  .siteFooter__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .navToggle { display: inline-flex; }

  .siteNav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--lime);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 1rem var(--pad-x) 1.75rem;
  }
  .siteNav.is-open { display: block; }
  .siteNav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .siteNav__link {
    display: block;
    color: var(--ink);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1.0625rem;
  }
  .siteNav__link.is-current { border-bottom-color: var(--line-soft); color: var(--moss-deep); }
  .siteNav__ctaItem { margin-top: 1.1rem; }
  .siteNav__cta { display: block; text-align: center; color: var(--moss-deep); border-color: var(--moss); padding: 0.95rem 1rem; }

  /* Stack every twelve-column block. */
  .split__text, .split__media,
  .split--flip .split__text, .split--flip .split__media,
  .statement__title, .statement__body,
  .roomRow__media, .roomRow__text,
  .roomRow:nth-child(even) .roomRow__media,
  .roomRow:nth-child(even) .roomRow__text,
  .placeRow__media, .placeRow__text,
  .placeRow:nth-child(even) .placeRow__media,
  .placeRow:nth-child(even) .placeRow__text,
  .formGrid__intro, .formGrid__form { grid-column: 1 / -1; order: 0; }

  .roomRow:nth-child(even) .roomRow__media,
  .placeRow:nth-child(even) .placeRow__media { order: -1; }

  .hero { min-height: 88svh; }
  .hero__scroll { display: none; }
}

@media (max-width: 560px) {
  .amenities   { columns: 1; }
  .galleryGrid { columns: 1; }
  .fieldPair   { grid-template-columns: 1fr; }
  .siteFooter__inner { grid-template-columns: 1fr; }
  .bookingLinks .btn { width: 100%; text-align: center; }
}


/* 15. MOTION AND PRINT
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .siteHeader, .siteNav, .hero__media, .previewNotice, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  a::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}