/* ==========================================================================
   Villa Baan Hen - "Sandstone, Lagoon and Mahogany"
   Baan Hen's own design system. Nothing shared with Villa Sawan (deep green +
   brass, Cormorant Garamond + Jost), Baan Banyan (Andaman teal + teak,
   Marcellus + Karla), Baan Paradise (navy + mosaic, Prata + Mulish) or
   Baan Santisuk (cinnabar + jade, Fraunces + Rubik).

   Every colour below was sampled from Baan Hen's own photographs with
   tools/sample_palette.py. Provenance is in the README.

   Rules obeyed here:
   - Not one CSS image reference anywhere in this file. Chrome resolves a
     relative image reference inside a custom property against the stylesheet,
     which is how an assets/assets double path once happened on Villa Sawan.
     Every image path on this site is inline in the markup and root absolute.
   - Modifiers are prefixed is- so a modifier can never collide with a
     component class. That collision is what silently broke Baan Santisuk's
     reversed bands.
   - No em dashes and no en dashes, here or anywhere.
   ========================================================================== */

:root {
  /* sampled from this villa's own frames */
  --lagoon: #17a3a1;        /* the aqua mosaic tile of the saltwater infinity pool */
  --lagoon-deep: #0e5f6d;   /* the deep water at the infinity edge */
  --lagoon-pale: #8fd4d5;   /* sunlit pool tile in the shallow end */
  --sandstone: #cfa98c;     /* the sandstone pool deck and terrace */
  --sandstone-lit: #e1bc97; /* the same terrace in full sun */
  --mahogany: #3a2417;      /* the rosewood ceiling of the pavilion */
  --mahogany-deep: #241310; /* teak shadow, bathroom slate */
  --ember: #a36349;         /* the coral bed runner and the sala roof timber */
  --shell: #f6efe6;         /* the ivory interior walls */
  --shell-warm: #ece0d2;    /* travertine in shade */
  --ink: #211615;

  --page: var(--shell);
  --body: #4a3a31;
  --rule: rgba(58, 36, 23, .16);

  --display: "Gilda Display", "Hoefler Text", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --gut: clamp(18px, 4.4vw, 46px);
  --sp: clamp(56px, 8vw, 116px);
  --hdr: 74px;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--lagoon-deep); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--mahogany);
  line-height: 1.14;
  letter-spacing: .004em;
  margin: 0 0 .55em;
}
h1 { font-size: clamp(2.15rem, 6.4vw, 4.1rem); }
h2 { font-size: clamp(1.72rem, 4.2vw, 2.72rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.06rem; font-family: var(--sans); font-weight: 600; letter-spacing: .01em; }
p { margin: 0 0 1.15em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 var(--gut); }
.sect { padding: var(--sp) 0; }
.sect.is-tight { padding: calc(var(--sp) * .58) 0; }
.sect.is-shell { background: var(--shell-warm); }
.sect.is-dark { background: var(--mahogany); }
.sect.is-dark, .sect.is-dark p, .sect.is-dark li { color: #efe2d5; }
.sect.is-dark h2, .sect.is-dark h3 { color: var(--shell); }

.kicker {
  font-family: var(--sans);
  font-size: .705rem;
  font-weight: 600;
  letter-spacing: .215em;
  text-transform: uppercase;
  color: var(--lagoon-deep);
  margin: 0 0 .95em;
}
.sect.is-dark .kicker { color: var(--lagoon-pale); }
.lede { font-size: 1.12rem; color: #5a4739; }
.sect.is-dark .lede { color: #e4d4c5; }

/* --------------------------------------------------------------------------
   The motif: the stepping stones that cross this villa's pool, and the
   cascade that runs off its far side. Four squares stepping down to the
   right; three bars of falling width. Sawan uses a horizon rule, Banyan a
   stacked slate tile, Paradise an eight square mosaic block, Santisuk a
   Thai gable notch.
   -------------------------------------------------------------------------- */
.stones { display: flex; align-items: flex-end; gap: 6px; margin: 0 0 1.6em; }
.stones i {
  display: block; width: 13px; height: 13px;
  background: var(--sandstone); border-radius: 1px;
}
.stones i:nth-child(1) { margin-bottom: 15px; }
.stones i:nth-child(2) { margin-bottom: 10px; }
.stones i:nth-child(3) { margin-bottom: 5px; }
.stones i:nth-child(4) { background: var(--lagoon); }
.stones.is-centred { justify-content: center; }

.cascade { display: block; margin: 0 0 1.5em; }
.cascade span { display: block; height: 3px; background: var(--lagoon); border-radius: 2px; }
.cascade span:nth-child(1) { width: 74px; }
.cascade span:nth-child(2) { width: 46px; margin-top: 5px; background: var(--sandstone); }
.cascade span:nth-child(3) { width: 24px; margin-top: 5px; background: var(--ember); }
.cascade.is-centred span { margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------------- buttons */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .795rem;
  font-weight: 600;
  letter-spacing: .155em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border: 1px solid var(--lagoon-deep);
  background: var(--lagoon-deep);
  color: #fff;
  border-radius: 2px;
  transition: background .22s, color .22s, border-color .22s;
  cursor: pointer;
}
.btn:hover { background: var(--lagoon); border-color: var(--lagoon); }
.btn.is-ghost { background: transparent; color: var(--mahogany); border-color: var(--sandstone); }
.btn.is-ghost:hover { background: var(--sandstone); border-color: var(--sandstone); color: var(--mahogany); }
.btn.is-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.62); }
.btn.is-light:hover { background: #fff; color: var(--mahogany); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------- header */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  height: var(--hdr);
  display: flex; align-items: center;
  background: transparent;
  transition: background .28s, box-shadow .28s;
}
.hdr.is-solid { background: var(--mahogany); box-shadow: 0 1px 0 rgba(255,255,255,.09); }
.hdr-in { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.brand { display: block; flex: 0 0 auto; }
.brand img { width: 150px; height: auto; }
.nav { display: none; }
.burger {
  flex: 0 0 auto; width: 42px; height: 42px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.burger span { display: block; height: 2px; width: 25px; background: #fff; transition: transform .2s, opacity .2s; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--hdr) 0 auto 0; z-index: 55;
  background: var(--mahogany);
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease;
}
.drawer.is-open { max-height: 80vh; overflow-y: auto; }
.drawer a {
  display: block; padding: 14px var(--gut);
  color: #f1e5d8; text-decoration: none;
  font-size: .95rem; letter-spacing: .05em;
  border-top: 1px solid rgba(255,255,255,.1);
}
.drawer a[aria-current="page"] { color: var(--lagoon-pale); }

@media (min-width: 1000px) {
  .nav { display: flex; align-items: center; gap: 22px; }
  .nav a {
    color: #fff; text-decoration: none;
    font-size: .775rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
    padding: 4px 0; border-bottom: 1px solid transparent;
  }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--lagoon-pale); }
  .burger { display: none; }
  .drawer { display: none; }
}

/* ----------------------------------------------------------------------- hero */
.hero { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero.is-short { min-height: 62svh; }
.hero-bed { position: absolute; inset: 0; }
.hero-bed img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1.5s ease;
}
.hero-bed img.is-on { opacity: 1; }
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36,19,16,.56) 0%, rgba(36,19,16,.13) 32%, rgba(36,19,16,.72) 100%);
}
.hero-in { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(34px, 7vw, 76px); padding-top: calc(var(--hdr) + 30px); }
.hero-plaque {
  background: rgba(58,36,23,.42);
  backdrop-filter: blur(3px);
  border-left: 3px solid var(--lagoon);
  padding: clamp(20px, 3.4vw, 34px) clamp(20px, 3.4vw, 38px);
  max-width: 640px;
}
.hero-plaque .kicker { color: var(--sandstone-lit); }
.hero-plaque h1 { color: #fff; margin-bottom: .4em; }
.hero-plaque p { color: #f0e3d6; margin-bottom: 1.4em; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0 0 1.5em; padding: 0; list-style: none; }
.hero-facts li {
  color: #fff; font-size: .78rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
}
.hero-facts li b { color: var(--lagoon-pale); font-weight: 700; }

/* the stepping stone rail beneath the hero: four frames stepping down right */
.rail { position: relative; z-index: 2; margin-top: clamp(16px, 2.6vw, 26px); }
.rail-set { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rail-set button {
  position: relative; padding: 0; border: 0; cursor: pointer; background: none;
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px;
  outline: 2px solid transparent; outline-offset: -2px;
  /* Only outline-color transitions. The stepped translateY below is static
     LAYOUT, not motion: when it was in the transition list it sat at its start
     value and the whole stepping stone rail rendered flat. Caught live by
     dumping the rules that actually matched the element. */
  transition: outline-color .2s;
}
.rail-set button img { width: 100%; height: 100%; object-fit: cover; }
.rail-set button[aria-pressed="true"] { outline-color: var(--lagoon-pale); }
@media (min-width: 700px) {
  .rail-set button:nth-child(2) { transform: translateY(11px); }
  .rail-set button:nth-child(3) { transform: translateY(22px); }
  .rail-set button:nth-child(4) { transform: translateY(33px); }
  .rail { margin-bottom: 33px; }
}

/* -------------------------------------------------------- the stone path band */
/* five frames stepping diagonally down the page, this villa's stepping stones */
.path { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.path figure { margin: 0; position: relative; overflow: hidden; border-radius: 2px; }
.path img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.path figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 26px 16px 12px;
  background: linear-gradient(180deg, rgba(36,19,16,0), rgba(36,19,16,.8));
  color: #fff; font-size: .77rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
}
@media (min-width: 860px) {
  .path { grid-template-columns: repeat(5, 1fr); }
  .path figure:nth-child(2) { transform: translateY(18px); }
  .path figure:nth-child(3) { transform: translateY(36px); }
  .path figure:nth-child(4) { transform: translateY(54px); }
  .path figure:nth-child(5) { transform: translateY(72px); }
  .path { margin-bottom: 72px; }
}

/* ------------------------------------------------------------ two column slab */
.slab { display: grid; gap: clamp(26px, 4.6vw, 62px); align-items: center; }
@media (min-width: 900px) { .slab { grid-template-columns: 1fr 1fr; } .slab.is-wide-text { grid-template-columns: 1.14fr 1fr; } }
.slab-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slab-pics img { border-radius: 2px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.slab-pics img:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }

/* ----------------------------------------------- stats as a falling cascade */
.tiers { position: relative; overflow: hidden; }
.tiers-bed { position: absolute; inset: 0; }
.tiers-bed img { width: 100%; height: 100%; object-fit: cover; }
.tiers-bed::after { content: ""; position: absolute; inset: 0; background: rgba(36,19,16,.66); }
.tiers-in { position: relative; z-index: 2; padding: var(--sp) 0; }
.tiers-set { display: grid; gap: 10px; max-width: 720px; }
.tiers-set div {
  background: rgba(23,163,161,.16);
  border-left: 3px solid var(--lagoon);
  padding: 15px 20px;
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.tiers-set div:nth-child(2) { border-left-color: var(--sandstone); background: rgba(207,169,140,.15); }
.tiers-set div:nth-child(3) { border-left-color: var(--ember); background: rgba(163,99,73,.17); }
.tiers-set div:nth-child(4) { border-left-color: var(--lagoon-pale); background: rgba(143,212,213,.13); }
.tiers-set b {
  font-family: var(--display); font-size: clamp(1.85rem, 4.6vw, 2.6rem);
  color: #fff; line-height: 1; font-weight: 400;
}
.tiers-set span { color: #eadbcc; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
@media (min-width: 700px) {
  .tiers-set div:nth-child(2) { margin-left: 6%; }
  .tiers-set div:nth-child(3) { margin-left: 12%; }
  .tiers-set div:nth-child(4) { margin-left: 18%; }
}

/* ------------------------------------------ inset frame band (feature band) */
/* photo full width with a bordered card inset over it. Padding maths only,
   never negative margins, so it cannot produce horizontal scroll. */
.band { position: relative; overflow: hidden; }
.band-bed { position: absolute; inset: 0; }
.band-bed img { width: 100%; height: 100%; object-fit: cover; }
.band-bed::after { content: ""; position: absolute; inset: 0; background: rgba(36,19,16,.38); }
.band-in { position: relative; z-index: 2; padding: clamp(46px, 7vw, 92px) 0; }
.band-card {
  background: var(--shell);
  border: 1px solid var(--sandstone);
  border-radius: 2px;
  padding: clamp(24px, 4vw, 44px);
  max-width: 540px;
  box-shadow: 0 22px 50px rgba(36,19,16,.26);
}
.band.is-flip .band-card { margin-left: auto; }
.band-card h2 { margin-bottom: .45em; }
.band-card p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- plain lists */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
@media (min-width: 760px) { .ticks.is-two { grid-template-columns: 1fr 1fr; gap: 11px 34px; } }
.ticks li { position: relative; padding-left: 25px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 9px; background: var(--lagoon); border-radius: 1px;
}
.sect.is-dark .ticks li::before { background: var(--lagoon-pale); }

/* -------------------------------------------------------------- fact cards */
.cards { display: grid; gap: 14px; }
@media (min-width: 760px) { .cards.is-three { grid-template-columns: repeat(3, 1fr); } .cards.is-two { grid-template-columns: 1fr 1fr; } }
.card {
  background: #fff; border: 1px solid var(--rule); border-radius: 2px;
  padding: 26px 24px;
}
.card h3 { font-size: 1.14rem; }
.card p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- gallery grid */
.grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.shot { margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; border-radius: 2px; display: block; }
.shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; transition: transform .5s ease; }
.shot:hover img { transform: scale(1.035); }

.lightbox {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(23,15,13,.94); padding: 20px;
  align-items: center; justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 86vh; width: auto; border-radius: 2px; }
.lightbox-x {
  position: absolute; top: 14px; right: 16px;
  background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
.lightbox-cap { position: absolute; inset: auto 0 14px 0; text-align: center; color: #e6d7c8; font-size: .85rem; padding: 0 20px; }

/* ---------------------------------------------------------------- quote wall */
/* every review visible at once, no carousel. Banyan uses a slider with dots,
   Paradise a scroll rail with arrows, Santisuk a plaque plus name chips. */
.wall { display: grid; gap: 14px; }
@media (min-width: 760px) { .wall { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .wall { grid-template-columns: repeat(3, 1fr); } }
.quote {
  background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--lagoon);
  border-radius: 2px; padding: 24px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.quote:nth-child(3n+2) { border-top-color: var(--sandstone); }
.quote:nth-child(3n+3) { border-top-color: var(--ember); }
.quote-h { font-family: var(--display); font-size: 1.08rem; color: var(--mahogany); }
.quote-b { font-size: .955rem; white-space: pre-line; margin: 0; flex: 1 1 auto; }
.quote-f { font-size: .765rem; letter-spacing: .1em; text-transform: uppercase; color: #7c6555; font-weight: 600; }
.quote-stars { color: var(--ember); letter-spacing: .12em; font-size: .8rem; }

/* ------------------------------------------------------------------- tables */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: .93rem; background: #fff; }
caption { text-align: left; font-family: var(--display); font-size: 1.2rem; color: var(--mahogany); padding: 0 0 .5em; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
thead th {
  background: var(--mahogany); color: var(--shell);
  font-size: .715rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 600;
}
tbody tr:nth-child(even) { background: var(--shell); }

/* ------------------------------------------------------------------- notices */
.note {
  border-left: 3px solid var(--ember);
  background: rgba(163,99,73,.09);
  padding: 15px 20px;
  font-size: .92rem;
  border-radius: 0 2px 2px 0;
}
.note p:last-child { margin-bottom: 0; }
.note b { color: var(--mahogany); }

/* ------------------------------------------------------ availability / iCal */
.ical {
  border: 1px dashed var(--sandstone);
  background: #fff;
  padding: clamp(22px, 3.4vw, 34px);
  border-radius: 2px;
}
.ical .stones { margin-bottom: 1.1em; }
.ical h3 { margin-bottom: .5em; }
.ical p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------- form */
.form { display: grid; gap: 15px; }
@media (min-width: 700px) { .form { grid-template-columns: 1fr 1fr; } .form .is-full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .745rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #7c6555; }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 12px 14px; border: 1px solid var(--sandstone); border-radius: 2px;
  background: #fff; width: 100%; max-width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--lagoon); outline-offset: -1px; }

/* ------------------------------------------------------------------- footer */
.ftr { background: var(--mahogany-deep); color: #d9c8b8; padding: var(--sp) 0 34px; }
.ftr a { color: #d9c8b8; text-decoration: none; }
.ftr a:hover { color: var(--lagoon-pale); }
.ftr h4 { color: var(--shell); font-size: .755rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1em; }
.ftr-grid { display: grid; gap: 34px; }
@media (min-width: 800px) { .ftr-grid { grid-template-columns: 1.3fr 1fr 1.2fr; gap: 46px; } }
.ftr-logo { width: 168px; margin-bottom: 20px; }
.ftr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .93rem; }
.ftr-base {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.13);
  font-size: .78rem; color: #a89383;
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
}

/* -------------------------------------------------------------------- misc */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--mahogany); color: #fff; padding: 12px 18px;
}
.skip:focus { left: 8px; top: 8px; }
.pagehead { padding: calc(var(--hdr) + clamp(46px, 7vw, 88px)) 0 clamp(30px, 4vw, 52px); background: var(--shell-warm); }
.pagehead h1 { margin-bottom: .3em; }
.pagehead p { max-width: 720px; margin-bottom: 0; }
.center { text-align: center; }
.center .stones, .center .cascade span { margin-left: auto; margin-right: auto; }
.is-flush { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  /* The stepped offsets on the rail and the stone path are deliberately NOT
     reset here. They are static layout, not animation, and flattening them
     would remove the design rather than the motion. */
}

/* ===== BEGIN shared villa calendar + viewer (tools/mockups/_shared) ===== */
/* Generated by tools/mockups/_shared/sync_shared.py. Do not hand edit:
   the next run overwrites everything between these two markers.
   The calendar takes THIS villa's own palette and nothing else. */
:root{
  --cal-bg:var(--shell-warm);
  --cal-line:var(--rule);
  --cal-ink:var(--ink);
  --cal-mute:var(--body);
  --cal-cell:#ffffff;
  --cal-booked:var(--mahogany);
  --cal-hold:rgba(163,99,73,.28);
  --cal-sel:var(--lagoon-deep);
  --cal-disp:var(--display);
  --cal-sans:var(--sans);
}
/* ------------------------------------------------------------------ calendar */
.cal-shell{
  background:var(--cal-bg);border:1px solid var(--cal-line);
  padding:clamp(16px,2.2vw,26px);color:var(--cal-ink);font-family:var(--cal-sans);
}
.cal-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.cal-title{font-family:var(--cal-disp);font-size:clamp(17px,2vw,20px);line-height:1.2}
.cal-nav{display:flex;gap:8px}
.cal-nav button{
  width:44px;height:44px;border:1px solid var(--cal-line);background:transparent;cursor:pointer;
  font-size:18px;color:var(--cal-ink);font-family:var(--cal-sans);transition:background .25s,color .25s;
}
.cal-nav button:hover{background:var(--cal-ink);color:var(--cal-bg)}
.cal-nav button:disabled{opacity:.3;cursor:default}
.cal-nav button:disabled:hover{background:transparent;color:var(--cal-ink)}

.cal-months{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.cal-month{min-width:0}
.cal-month h4{font-family:var(--cal-disp);font-weight:400;font-size:17.5px;margin:0 0 9px;letter-spacing:.04em}
.cal-dow,.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow span{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cal-mute);
  text-align:center;padding:6px 0;
}
.cal-days button{
  height:36px;min-width:0;background:var(--cal-cell);border:1px solid var(--cal-line);
  font-family:var(--cal-sans);font-size:12.5px;font-weight:400;color:var(--cal-ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,color .2s;
}
.cal-days .empty{border:0;background:transparent;cursor:default}
.cal-days button.past{color:var(--cal-mute);background:transparent;cursor:default;opacity:.55}
.cal-days button.unknown{background:transparent;border-style:dashed;color:var(--cal-mute);cursor:default}
.cal-days button.booked{
  background:var(--cal-booked);border-color:var(--cal-booked);color:#fff;cursor:default;
  text-decoration:line-through;text-decoration-color:rgba(255,255,255,.45);
}
.cal-days button.pending{
  background:repeating-linear-gradient(-45deg,var(--cal-cell),var(--cal-cell) 4px,var(--cal-hold) 4px,var(--cal-hold) 8px);
  cursor:default;
}
.cal-days button.avail:hover,.cal-days button.avail:focus-visible{border-color:var(--cal-sel)}
.cal-days button.sel{background:var(--cal-sel);border-color:var(--cal-sel);color:#fff}
.cal-days button.inrange{background:color-mix(in srgb,var(--cal-sel) 18%,var(--cal-cell));border-color:var(--cal-line)}

.cal-pick{
  display:none;margin-top:22px;padding:16px 18px;border:1px solid var(--cal-line);
  background:var(--cal-cell);gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.cal-pick.show{display:flex}
.cal-pick b{display:block;font-size:14.5px;font-weight:600}
.cal-pick .cal-pick-s{display:block;font-size:12.5px;color:var(--cal-mute);margin-top:3px}
.cal-pick-go{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:#fff;background:var(--cal-sel);padding:11px 18px;white-space:nowrap;
}
.cal-pick-go:hover{background:var(--cal-booked)}

.cal-legend{
  display:flex;gap:clamp(14px,2.4vw,26px);flex-wrap:wrap;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--cal-line);
}
.cal-legend span{
  display:flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cal-mute);
}
.cal-legend i{width:16px;height:16px;border:1px solid var(--cal-line);display:inline-block;flex:0 0 auto}
.cal-legend i.l-avail{background:var(--cal-cell)}
.cal-legend i.l-booked{background:var(--cal-booked);border-color:var(--cal-booked)}
.cal-legend i.l-pending{background:repeating-linear-gradient(-45deg,var(--cal-cell),var(--cal-cell) 3px,var(--cal-hold) 3px,var(--cal-hold) 6px)}
.cal-legend i.l-sel{background:var(--cal-sel);border-color:var(--cal-sel)}

.cal-note{font-size:12.5px;line-height:1.65;color:var(--cal-mute);margin:16px 0 0;letter-spacing:.02em}

@media (max-width:760px){
  .cal-months{grid-template-columns:1fr}
  .cal-month.m2{display:none}
  .cal-month{max-width:430px;margin:0 auto;width:100%}
  .cal-pick-go{width:100%;text-align:center}
}

/* -------------------------------------------------------------------- viewer */
html.vlb-lock{overflow:hidden}
.vlb{
  position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;
  background:rgba(10,10,10,.94);padding:clamp(12px,4vw,48px);
}
.vlb.is-open{display:flex}
.vlb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.vlb-fig img{
  max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;
  object-fit:contain;display:block;background:#111;
}
.vlb-fig figcaption{
  display:flex;gap:16px;align-items:baseline;justify-content:center;flex-wrap:wrap;
  color:rgba(255,255,255,.86);font-family:var(--cal-sans);font-size:13px;line-height:1.5;
  text-align:center;max-width:70ch;
}
.vlb-count{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.vlb button{
  position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);
  color:#fff;cursor:pointer;font-family:var(--cal-sans);line-height:1;
  transition:background .2s,border-color .2s;
}
.vlb button:hover,.vlb button:focus-visible{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.6)}
.vlb-x{top:clamp(10px,2.4vw,26px);right:clamp(10px,2.4vw,26px);width:46px;height:46px;font-size:17px}
.vlb-p,.vlb-n{top:50%;transform:translateY(-50%);width:52px;height:64px;font-size:30px}
.vlb-p{left:clamp(6px,1.6vw,22px)}
.vlb-n{right:clamp(6px,1.6vw,22px)}

@media (max-width:600px){
  .vlb-p,.vlb-n{width:44px;height:54px;font-size:25px;top:auto;bottom:14px;transform:none}
  .vlb-p{left:14px}
  .vlb-n{right:14px}
  .vlb-fig img{max-height:calc(100vh - 210px)}
}
@media (prefers-reduced-motion:reduce){
  .cal-days button,.cal-nav button,.vlb button{transition:none}
}
/* ===== END shared villa calendar + viewer ===== */

/* ===== BEGIN villa map (kris_feedback_24aug.py) ===== */
/* Kris, 24 Aug: "I don't see a Map imbedded in the villa anywhere? Can we do that?" */
.villa-map{margin-top:clamp(18px,2.6vw,30px);border:1px solid var(--cal-line);line-height:0}
.villa-map iframe{display:block;width:100%;border:0;filter:saturate(.92)}
/* ===== END villa map ===== */

/* ===== BEGIN Kris contact styling (kris_feedback_24aug.py) ===== */
/* Kris, 24 Aug: "Please add my name - Kris Clements - Reservation Manager- to
   the footer area and contact page." */
.foot-person{margin:0 0 10px;font-size:14px;line-height:1.5}
.foot-person span{opacity:.72;font-size:12.5px;letter-spacing:.06em}
.contact-person{margin:0 0 14px;line-height:1.5}
.contact-person b{display:block;font-size:15.5px}
.contact-person span{display:block;font-size:13px;opacity:.78}
.wa-link{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.wa-mark{
  width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  background:#25d366;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85);
}
/* ===== END Kris contact styling ===== */