/* Fonts are served from this site, not from Google: under German privacy law
   (LG München I, 3 O 17493/20) loading Google Fonts passes the visitor's IP to
   Google without consent. Files: Fontsource builds, SIL Open Font License. */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/cormorant-garamond-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/jost-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/jost-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/jost-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/jost-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/noto-sans-thai-thai-400-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Noto Sans Thai'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/noto-sans-thai-thai-500-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Noto Serif Thai'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/noto-serif-thai-thai-400-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: 'Noto Serif Thai'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/noto-serif-thai-thai-500-normal.woff2') format('woff2'); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }


/* ==== Design tokens ============================================= */
.site {
  --paper:  #faf7f1;
  --sand:   #ede2d1;
  --ink:    #342f29;
  --muted:  #766b5e;
  --line:   #d6c9b6;
  --button: #cbb18b;
  --light:  #fffaf3;

  /* both measured in site.js once the header has laid out */
  --reservation-height: 112px;
  --opening-height: 250px;

  width: 100%;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
  font: 14px/1.75 'Jost', Arial, sans-serif;
}
html { background: #faf7f1; scroll-behavior: auto }
body { margin: 0 }

/* ==== Base / reset ============================================== */
.site * { box-sizing: border-box }
.site [hidden] { display: none!important }
.site button { font: inherit; color: inherit; border: 0; background: none }
.site input { font: inherit; color: inherit }
.site select { font: inherit; color: inherit }
.site a { color: inherit; text-underline-offset: 5px; overflow-wrap: anywhere }
/* width/height attributes are on every <img> for layout stability; height:auto
   lets aspect-ratio and the fixed-height rules below take over again */
.site img { max-width: 100%; height: auto; display: block }

/* ==== Typography ================================================ */
.site h1 {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-weight: 400;
  line-height: 1.15;
  font-size: 43px;
  margin: 0 0 24px;
}
.site h2 {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-weight: 400;
  line-height: 1.15;
  font-size: 38px;
  margin: 0 0 24px;
}
.site h3 {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-weight: 400;
  line-height: 1.15;
  font-size: 28px;
  margin: 20px 0 12px;
}
.site p { margin: 0 0 19px }
.site .eyebrow {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

/* ==== Masthead & brand ========================================== */
.site .masthead {
  display: grid;
  grid-template-columns: 1fr 430px 1fr;
  align-items: center;
  gap: 24px;
  padding: 6px 36px 0;
  justify-content: space-between;
  position: relative;
  z-index: 5;
  background: transparent;
  color: #fffaf3;
}
.site .brand {
  display: block;
  align-items: center;
  gap: 10px;
  width: 430px;
  min-width: 0;
  background: transparent;
  border-radius: 0;
  padding: 0 12px;
}
.site .brand img { width: 40px; height: 40px; object-fit: contain }
.site .brand span {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: 26px;
  letter-spacing: .055em;
}
.site .language { font-size: 11px; letter-spacing: .08em }
.site .language a { text-decoration: none; opacity: .72 }
.site .language a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px }
.site .language [aria-current] { font-weight: 500 }
.site .language .lang-soon { opacity: .35; cursor: default }
.site .reviews { justify-self: end; display: flex; align-items: center; gap: 8px; font-size: 11px }
.site .reviews svg { width: 20px }
/* the wordmark keeps its own 3.46:1 proportions - contain, never crop */
.site .brand .original-brand {
  display: block;
  width: 100%;
  height: auto;
  /* the wordmark is dark on transparent and sits over the hero frame */
  filter: drop-shadow(0 0 3px rgba(255,250,243,.85)) drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
/* strapline lives inside the wordmark artwork, so the text node stays off */
.site .brand-tagline { display: none }
.site .masthead-location {
  justify-self: end;
  color: #fffaf3;
  font-size: 11px;
  letter-spacing: .06em;
}
/* over the hero the rating rides on the video itself; once the bar pins to the
   top it lands on paper and the colours flip back (see .is-pinned below) */
.site .property-strip.review-band {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 28px;
  padding: 2px 36px;
  background: none;
  color: var(--light);
  border-bottom: 0;
  text-shadow: 0 1px 5px rgba(0,0,0,.6);
}
.site .review-brand { font-size: 12px; font-weight: 500; color: inherit }
.site .review-rating { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap }
.site .review-stars {
  color: #f2bd5c;                 /* lifted for the video behind it */
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.site .review-score {
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  opacity: 1;
}
.site .review-count {
  justify-self: end;
  color: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ==== Primary navigation ======================================== */
.site nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 28px;
  border-top: 0;
  border-bottom: 1px solid #fffaf34d;
  padding: 0 20px;
  position: relative;
  z-index: 5;
  color: #fffaf3;
  background: transparent;
}
.site nav a { padding: 5px 0; font-size: 12px; text-decoration: none; text-shadow: 0 1px 6px #0008 }
.site nav a[aria-current=page] { box-shadow: inset 0 -2px #fffaf3 }
.site .mobile-nav { display: none }

/* ==== Reservation bar =========================================== */
/* over the hero this detaches into a card with air around it; pinned to the top
   it spreads back into a full-width bar */
.site .booking {
  display: grid;
  grid-template-columns: 1fr 1fr .8fr auto;
  gap: 24px;
  align-items: center;
  position: static;
  top: 0;
  z-index: 20;
  width: calc(100% - 72px);
  margin: 6px 36px 0;
  padding: 10px 24px;
  background: rgba(250,247,241,.94);
  color: var(--ink);
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
  transition: width .25s ease, margin .25s ease, box-shadow .25s ease;
}
.site .booking label {
  display: grid;
  gap: 0;
  min-width: 0;
  padding-right: 16px;
  border-right: 1px solid var(--line);
}
.site .booking label span { font-size: 10px; text-transform: uppercase; letter-spacing: .14em }
.site .booking input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 14px;
  min-height: 30px;
}
.site .booking select {
  width: 100%;
  min-width: 0;
  border: 0;
  background: none;
  font-size: 14px;
  min-height: 30px;
}
.site .booking .enquire {
  background: var(--ink);
  color: var(--paper);
  padding: 11px 22px;
  font-size: 12px;
  letter-spacing: .025em;
}
.site .booking-toggle { display: none }
.site .booking-status { margin: 0; padding: 14px 30px; background: var(--sand); font-size: 12px }
.site .sticky-reservation {
  position: sticky;
  top: 0;
  z-index: 30;
  background: transparent;
  box-shadow: 0 4px 12px #342f2910;
}
.site .property-strip {
  min-height: 37px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 5px 36px;
  border-bottom: 1px solid var(--line);
  background: rgba(250,247,241,.92);
}
.site .property-name {
  font-family: 'Cormorant Garamond',Georgia,serif;
  font-size: 21px;
  line-height: 1.2;
}
.site .property-links { display: flex; align-items: center; gap: 22px; font-size: 11px }
.site .property-links button { padding: 3px 0 }
.site .sticky-reservation.is-pinned .property-strip { background: var(--paper) }
.site .sticky-reservation.is-pinned .review-stars { color: #98713e; text-shadow: none }
.site .sticky-reservation.is-pinned .property-strip.review-band {
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid #cfbda2;
  text-shadow: none;
}
.site .sticky-reservation.is-pinned .booking {
  width: 100%;
  margin: 0;
  padding: 10px 36px;
  background: var(--sand);
  box-shadow: none;
}
.site .booking-status:not([hidden]) {
  position: fixed;
  z-index: 40;
  bottom: 16px;
  left: 16px;
  right: 16px;
  max-width: 640px;
  margin: auto;
  border: 1px solid var(--line);
  box-shadow: 0 4px 24px #342f2926;
}

/* ==== Hero ====================================================== */
.site .hero {
  position: relative;
  margin: 0;
  aspect-ratio: auto;
  background: var(--sand);
  width: 100%;
  height: 100svh;
  min-height: calc(var(--opening-height) + 180px);
}
.site .hero video { width: 100%; height: 100%; object-fit: cover; display: block }
.site .hero>img { width: 100%; height: 100%; object-fit: cover; display: block }
.site .hero-caption {
  position: absolute;
  left: 36px;
  bottom: 32px;
  color: #fffaf3;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  background: #342f2966;
  padding: 7px 11px;
  z-index: 2;
}
.site .video-toggle {
  position: absolute;
  right: 36px;
  bottom: 32px;
  background: var(--paper);
  color: var(--ink);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 17px;
  z-index: 2;
}
.site .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,rgba(18,27,22,.6),transparent 42%,transparent 68%,rgba(18,27,22,.24));
}

/* ==== Page sections ============================================= */
.site .introduction { padding: 64px 55px 32px; text-align: center; max-width: 820px; margin: auto }
.site .introduction p { color: var(--muted); line-height: 1.9 }
.site .chapter { padding: 48px 48px 56px }
.site .chapter-head { max-width: 710px; margin: 0 auto 34px; text-align: center }
.site .chapter-head p { color: var(--muted) }
.site .rule { height: 1px; background: var(--line); width: 42%; margin: 28px auto }
.site .activities { background: #f1eadd }
.site .activity-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
.site .activity-photos img { width: 100%; aspect-ratio: 4/3; object-fit: cover }
.site .activity-photos img:last-child { grid-column: 1/-1; aspect-ratio: 2.1 }
.site .activity-copy { max-width: 720px; margin: 35px auto 0; text-align: center }
.site .location {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 60px;
  align-items: center;
  padding: 70px 60px;
}
.site .location img { width: 100%; max-height: 520px; object-fit: contain }
.site .location p { color: var(--muted) }
.site .page-body { padding: 22px 55px 60px }
.site .original-copy { max-width: 760px; margin: 0 auto; color: var(--muted) }
.site .original-copy h1 { color: var(--ink) }
.site .original-copy h2 { color: var(--ink) }
.site .original-copy h3 { color: var(--ink) }
.site [data-content="bungalows"]>.page-body {
  max-width: none;
  margin: auto;
  padding: 48px 0 100px;
  width: 100%;
}
.site .film-chapter>.chapter-head { padding-left: 32px; padding-right: 32px }

/* ==== Photo carousel ============================================ */
.site .garden-photos {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 24px;
  align-items: start;
  padding-top: 10px;
}
.site .garden-photos img { width: 100%; height: 365px; object-fit: cover }
.site .garden-photos img:nth-child(2) { margin-top: 65px; height: 310px }
.site .garden-photos img:nth-child(3) { margin-top: 22px }
.site .garden-drone { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 34px }
.site .garden-drone img { width: 100%; aspect-ratio: 16/9; height: auto; object-fit: cover; display: block }
.site .room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 30px }
.site .room-card { min-width: 0 }
.site .room-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover }
.site .room-card h3 { margin: 14px 0 16px }
.site .gallery-viewport {
  position: relative;
  height: clamp(440px,68svh,820px);
  overflow: hidden;
  background: var(--sand);
  touch-action: pan-y;
}
.site .gallery-viewport img { width: 100%; height: 100%; object-fit: cover; display: block }
.site .gallery-viewport img[hidden] { display: none }
.site .gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 28px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  cursor: pointer;
  box-shadow: 0 2px 12px #0001;
}
.site .gallery-prev { left: 18px }
.site .gallery-next { right: 18px }
.site .gallery-expand {
  position: absolute;
  right: 18px;
  top: 18px;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  padding: 11px 16px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: .04em;
}
.site .gallery-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.site .gallery-footer .gallery-count { font-variant-numeric: tabular-nums; color: var(--ink) }
.site .gallery-dots { display: flex; gap: 8px; align-items: center }
.site .gallery-dot {
  padding: 10px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 38px;
}
.site .gallery-dot::after { content: ''; display: block; height: 2px; background: var(--line) }
.site .gallery-dot[aria-current="true"]::after { background: var(--ink) }
.site .film-chapter { padding-left: 0; padding-right: 0 }
.site .film-carousel { display: block; width: 100%; max-width: none; margin: 0; position: relative }
.site .room-detail>.room-gallery.film-carousel { width: 100%; max-width: none }
.site .film-viewport { width: 100%; overflow: hidden; touch-action: pan-y; cursor: grab }
.site .film-viewport:active { cursor: grabbing }
.site .film-track {
  --film-height: max(360px,calc(100svh - var(--reservation-height,150px) - 120px));
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: max-content;
  padding: 18px 0;
  will-change: transform;
}
.site .film-slide {
  --photo-ratio: 1.5;
  flex: 0 0 auto;
  width: min(calc(var(--film-height) * var(--photo-ratio)),76vw);
  transform: scaleY(.94);
  transition: transform 780ms cubic-bezier(.22,.68,.1,1);
  transform-origin: center calc(var(--film-height)/2);
  text-align: center;
}
.site .film-slide.is-active { transform: scaleY(1) }
.site .film-slide img {
  display: block;
  width: 100%;
  height: var(--film-height);
  object-fit: cover;
  margin: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.site .film-slide img:nth-child(n) {
  display: block;
  width: 100%;
  height: var(--film-height);
  object-fit: cover;
  margin: 0;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.site .film-slide .room-card {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: center;
  border: 0;
  background: transparent;
}
.site .film-slide .room-card h3 { font-size: clamp(26px,2.5vw,38px); margin: 14px 12px 16px }
.site .film-slide .room-card .text-link { margin: 0 }
.site .film-controls {
  display: grid;
  grid-template-columns: auto minmax(90px,240px) auto;
  align-items: center;
  justify-content: center;
  column-gap: 26px;
  row-gap: 6px;
  padding: 24px 24px 0;
}
.site .film-controls button {
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  min-height: 44px;
  padding: 8px 6px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.site .film-progress { height: 1px; background: var(--line); position: relative }
.site .film-progress span {
  height: 3px;
  position: absolute;
  top: -1px;
  left: 0;
  background: var(--ink);
  transition: transform 780ms cubic-bezier(.22,.68,.1,1);
}
.site .film-count {
  grid-column: 2;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.site .film-carousel>.gallery-footer { display: none }
.site .film-carousel>.gallery-viewport { display: none }
.site .film-carousel>.gallery-expand { right: calc(12vw + 16px); top: 34px; z-index: 2 }
.site .film-controls button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }

/* ==== Room detail & prices ====================================== */
.site .text-link {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .13em;
  padding: 9px 0 6px;
  border-bottom: 1px solid var(--ink);
  display: inline-flex;
  gap: 22px;
  align-items: center;
  text-decoration: none;
}
.site .room-detail {
  padding: 60px 0 90px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--reservation-height,150px) + 24px);
}
.site .room-detail>h2 {
  text-align: center;
  margin-bottom: 30px;
  font-size: clamp(34px,4vw,58px);
  font-weight: 400;
  margin: 0 0 34px;
  width: calc(100% - 96px);
  max-width: 1464px;
  margin-left: auto;
  margin-right: auto;
}
.site .room-gallery {
  display: block;
  grid-template-columns: 1.35fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
  position: relative;
  margin: 0;
}
.site .room-gallery img { width: 100%; height: 320px; object-fit: cover }
.site .room-description {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.95;
}
.site table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 20px 0 30px;
  font-size: 12px;
  line-height: 1.7;
}
.site td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.site tr:nth-child(odd) { background: #f1eadd }
.site .feature-photo { width: 100%; height: 430px; object-fit: cover; margin: 36px 0 }
.site .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; margin: 35px 0 }
.site .photo-grid img { width: 100%; height: 340px; object-fit: cover }
.site .room-info-layout {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(30px,5vw,90px);
  align-items: start;
  padding: 44px 0 60px;
}
.site .room-description hr { display: none }
.site .room-description p:first-child { margin-top: 0 }
.site .room-price-wrap {
  min-width: 0;
  overflow-x: auto;
  background: #f1e9de;
  padding: 18px 22px 8px;
  border-top: 1px solid var(--line);
}
.site .room-price-wrap table {
  margin: 0 0 14px;
  table-layout: auto;
  font-size: 13px;
  line-height: 1.75;
  min-width: 380px;
}
.site .room-price-wrap td {
  padding: 12px 8px;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.site .room-price-wrap tr:first-child td { border-bottom: 0; padding-top: 0 }
.site .room-price-wrap h3 { font-size: 30px; margin: 0 0 8px }
.site .room-detail button:focus-visible { outline: 3px solid #ae8451; outline-offset: 4px }
.site .room-detail>.room-gallery {
  width: calc(100% - 96px);
  max-width: 1464px;
  margin-left: auto;
  margin-right: auto;
}
.site .room-detail>.room-info-layout {
  width: calc(100% - 96px);
  max-width: 1464px;
  margin-left: auto;
  margin-right: auto;
}
.site .room-detail>.tour {
  width: 100%;
  max-width: none;
  height: calc(100svh - var(--reservation-height,150px));
  min-height: 520px;
  margin: 0;
  padding: 56px 32px;
  scroll-margin-top: var(--reservation-height,150px);
}

/* ==== 360 tour ================================================== */
.site .tour {
  position: relative;
  margin: 0;
  background: var(--sand);
  height: clamp(430px,66svh,760px);
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 30px;
}
.site .tour>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: none;
  position: absolute;
  inset: 0;
  z-index: -2;
}
.site .tour-launch {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 15px 25px;
  background: var(--paper);
  font-size: 13px;
  white-space: nowrap;
}
.site .tour-status {
  position: absolute;
  inset: auto 20px 18px;
  background: var(--paper);
  padding: 12px 18px;
  text-align: center;
  font-size: 12px;
  margin: 0;
}
.site .tour::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: transparent;
}
.site .tour-card {
  background: var(--paper);
  text-align: center;
  width: min(620px,100%);
  padding: 64px 48px;
  box-shadow: none;
}
.site .tour-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
  margin: 0 0 12px;
  margin-bottom: 20px;
}
.site .tour-card h3 {
  font-size: clamp(36px,3.4vw,56px);
  font-weight: 400;
  line-height: 1.18;
  margin: 0 0 25px;
  margin-bottom: 34px;
}
.site .native-tour-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap }
.site .native-tour-launch {
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--ink);
  cursor: pointer;
  min-height: 46px;
}
.site .native-tour-launch:hover { background: #51483e }
.site .native-tour-status {
  font-size: 12px;
  line-height: 1.6;
  margin: 20px 0 0;
  color: var(--muted);
}
.site .native-tour-status[hidden] { display: none }

/* ==== Lightbox dialogs ========================================== */
.lv-media-dialog {
  --paper: #faf7f1;
  --ink: #342f29;
  width: calc(100vw - 40px);
  max-width: 1700px;
  height: calc(100dvh - 40px);
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 0;
  background: #201f1b;
  color: var(--paper);
  overflow: hidden;
  font: 14px Arial,sans-serif;
}
.lv-media-dialog::backdrop { background: #171714e6 }
.lv-dialog-header {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #ffffff20;
  gap: 20px;
}
.lv-dialog-header p { margin: 0; font-size: 14px }
.lv-dialog-close {
  color: inherit;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}
.lv-photo-stage {
  position: relative;
  height: calc(100% - 104px);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}
.lv-photo-stage img { display: block; width: 100%; height: 100%; object-fit: contain }
.lv-photo-step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 52px;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 28px;
  cursor: pointer;
}
.lv-photo-step[data-step="-1"] { left: 14px }
.lv-photo-step[data-step="1"] { right: 14px }
.lv-photo-caption {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 20px;
  font-size: 12px;
}
#lv-native-tour-dialog, #tour-dialog {
  background: var(--paper);
  color: var(--ink);
  width: calc(100vw - 24px);
  max-width: none;
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
}
#lv-native-tour-dialog iframe, #tour-dialog iframe {
  display: block;
  width: 100%;
  height: calc(100% - 54px);
  border: 0;
  background: #201f1b;
}
.lv-media-dialog button:focus-visible { outline: 3px solid #ae8451; outline-offset: 4px }
.lv-media-dialog[hidden] { display: none }

/* ==== Footer ==================================================== */
.site .footer {
  padding: 40px 48px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: end;
}
.site .footer h3 { margin: 0 0 15px }
.site .footer p { font-size: 12px; color: var(--muted); margin: 0 }

/* ==== Misc ====================================================== */
.site button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }
.site a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }
.site input:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }
.site select:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }
.site main { margin-top: calc(0px - var(--opening-height)) }

/* ==== max-width:1000px ========================================== */
@media (max-width: 1000px) {
  .site .room-info-layout { grid-template-columns: 1fr; gap: 24px }
  .site .room-description { max-width: 820px }
  .site .room-price-wrap table { min-width: 100% }
}

/* ==== max-width:760px =========================================== */
@media (max-width: 760px) {
  .site .masthead { padding: 8px 20px 3px; gap: 12px; grid-template-columns: 1fr 340px 1fr }
  .site .brand span { font-size: 23px }
  .site nav { gap: 0 16px }
  .site .booking { width: calc(100% - 40px); margin: 8px 20px 0; padding: 12px 18px; gap: 12px }
  .site .sticky-reservation.is-pinned .booking { width: 100%; margin: 0; padding: 10px 20px }
  .site .chapter { padding: 40px 25px }
  .site .garden-photos { gap: 15px }
  .site .garden-photos img { height: 290px }
  .site .garden-photos img:nth-child(2) { height: 255px }
  .site .location { padding: 45px 30px; gap: 30px }
  .site .page-body { padding: 20px 28px 40px }
  .site .masthead .language { display: block }
  .site .brand { width: 340px }
  .site .masthead-location { font-size: 10px; text-align: right }
  .site .property-strip { padding: 5px 20px }
  .site .property-links { gap: 15px }
  .site .booking .enquire { padding: 11px 14px }
  .site .property-strip.review-band { padding: 5px 20px; gap: 10px }
}

/* ==== max-width:600px =========================================== */
@media (max-width: 600px) {
  .site [data-content="bungalows"]>.page-body { padding: 18px 0 55px }
  .site .room-detail { padding: 34px 0 54px }
  .site .room-detail>h2 { font-size: 35px; margin-bottom: 22px; width: calc(100% - 32px) }
  .site .gallery-viewport { height: clamp(300px,52svh,480px) }
  .site .gallery-arrow { width: 36px; height: 44px }
  .site .gallery-prev { left: 10px }
  .site .gallery-next { right: 10px }
  .site .gallery-expand { top: 10px; right: 10px; padding: 9px 12px }
  .site .room-info-layout { padding: 26px 0 34px }
  .site .room-price-wrap { padding: 14px 8px 5px }
  .site .room-price-wrap table { min-width: 360px }
  .site .room-price-wrap td { font-size: 12px; padding: 10px 6px }
  .site .tour { height: clamp(390px,62svh,580px); padding: 20px }
  .site .tour-card { padding: 40px 24px }
  .site .tour-card h3 { font-size: 36px; margin-bottom: 28px }
  .lv-media-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 }
  .lv-dialog-header { padding: 0 12px }
  .lv-photo-step { width: 34px; height: 46px }
  .lv-photo-step[data-step="-1"] { left: 4px }
  .lv-photo-step[data-step="1"] { right: 4px }
  .lv-photo-caption { gap: 10px; font-size: 11px }
  .site .room-detail>.room-gallery { width: calc(100% - 32px) }
  .site .room-detail>.room-info-layout { width: calc(100% - 32px) }
  .site .room-detail>.tour {
    height: calc(100svh - var(--reservation-height,100px));
    min-height: 420px;
    padding: 36px 20px;
  }
  #lv-native-tour-dialog, #tour-dialog { width: 100vw; height: 100dvh; max-height: 100dvh }
  .site .film-track {
    --film-height: max(340px,calc(100svh - var(--reservation-height,100px) - 110px));
    gap: 8px;
    padding: 12px 0;
  }
  .site .film-slide { width: min(calc(var(--film-height) * var(--photo-ratio)),82vw) }
  .site .film-chapter>.chapter-head { padding-left: 20px; padding-right: 20px }
  .site .film-controls {
    column-gap: 16px;
    grid-template-columns: auto minmax(80px,150px) auto;
    padding-top: 8px;
  }
  .site .film-carousel>.gallery-expand { right: calc(9vw + 10px); top: 24px }
}

/* ==== max-width:540px =========================================== */
@media (max-width: 540px) {
  .site .masthead {
    grid-template-columns: 1fr auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px 8px;
    justify-content: center;
  }
  .site .language { display: block; order: -1; align-self: flex-end; font-size: 12px; letter-spacing: .1em }
  .site .brand span { font-size: 20px }
  .site .brand img { width: 30px; height: 30px }
  .site .reviews { font-size: 11px; gap: 4px; align-self: center }
  .site .reviews svg { width: 16px }
  .site nav { display: none }
  .site .mobile-nav {
    display: block;
    width: calc(100% - 32px);
    margin: 0 16px 14px;
    background: rgba(250,247,241,.94);
    border: 1px solid var(--line);
    padding: 8px 10px;
    font-size: 16px;
    margin-bottom: 8px;
    position: relative;
    z-index: 5;
    margin-top: 0;
  }
  .site .booking { grid-template-columns: 1fr 1fr; width: calc(100% - 24px); margin: 8px 12px 0; padding: 6px 14px; gap: 0 }
  .site .sticky-reservation.is-pinned .booking { width: 100%; margin: 0; padding: 6px 16px }
  .site .booking-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    grid-column: 1/-1;
    min-height: 44px;
    font-size: 16px;
  }
  .site .booking:not(.expanded) label { display: none }
  .site .booking:not(.expanded) .enquire { display: none }
  .site .booking.expanded { gap: 15px; padding-bottom: 16px }
  .site .booking input { font-size: 16px }
  .site .booking select { font-size: 16px }
  .site .booking label { border: 0; padding: 0 }
  .site .hero { margin: 0; aspect-ratio: 4/3 }
  .site .hero-caption { left: 20px; bottom: 24px; max-width: 70%; font-size: 9px }
  .site .introduction { padding: 40px 25px 15px }
  .site h1 { font-size: 34px }
  .site h2 { font-size: 33px }
  .site h3 { font-size: 27px }
  .site .chapter { padding: 35px 20px 40px }
  .site .garden-photos { grid-template-columns: 1fr; gap: 24px }
  .site .garden-photos img { height: 390px; margin: 0 }
  .site .garden-photos img:nth-child(2) { height: 390px; margin: 0 }
  .site .garden-photos img:nth-child(3) { height: 390px; margin: 0 }
  .site .garden-drone { grid-template-columns: 1fr; gap: 24px }
  .site .room-grid { grid-template-columns: 1fr; gap: 35px }
  .site .activity-photos { grid-template-columns: 1fr }
  .site .activity-photos img:last-child { aspect-ratio: 4/3 }
  .site .location { grid-template-columns: 1fr; padding: 45px 25px }
  .site .location img { max-height: 520px }
  .site .room-gallery { grid-template-columns: 1fr }
  .site .room-gallery img { height: 260px }
  .site .page-body { padding: 12px 20px 35px }
  .site td { padding: 10px 4px; font-size: 11px }
  .site .photo-grid { grid-template-columns: 1fr }
  .site .feature-photo { height: 290px }
  .site .footer { display: block; padding: 30px 25px }
  .site .footer>div+div { margin-top: 24px }
  .site .brand { width: min(320px,100%) }
  .site .masthead .language a, .site .masthead .language [aria-current] { display: inline-block; padding: 6px 4px }
  .site .masthead-location { display: none }
  .site .property-strip { display: none }
  .site .booking .enquire { min-height: 44px }
  .site .video-toggle { right: 20px; bottom: 24px }
  .site .property-strip.review-band {
    padding: 7px 16px;
    gap: 6px 12px;
    grid-template-columns: 1fr auto;
  }
  .site .review-rating { grid-column: 1/-1; grid-row: 2; justify-self: center }
  .site .review-count { grid-column: 2; grid-row: 1; font-size: 11px }
}

/* ==== prefers-reduced-motion:reduce ============================= */
@media (prefers-reduced-motion:reduce) {
  .site .film-track { transition: none!important }
  .site .film-slide { transition: none!important }
  .site .film-progress span { transition: none!important }
}

/* ==== Thai ====================================================== */
/* Jost and Cormorant carry no Thai glyphs; pair them with Noto so Latin
   brand names keep the house faces and Thai sits beside them cleanly */
html:lang(th) .site { font-family: 'Jost', 'Noto Sans Thai', Arial, sans-serif; line-height: 1.85 }
html:lang(th) .site h1, html:lang(th) .site h2, html:lang(th) .site h3 {
  font-family: 'Cormorant Garamond', 'Noto Serif Thai', Georgia, serif;
  line-height: 1.35;
}
/* tracking pulls Thai vowel and tone marks away from their consonants */
html:lang(th) .site .booking label span,
html:lang(th) .site .eyebrow,
html:lang(th) .site .tour-kicker { letter-spacing: 0; text-transform: none }

/* ==== Aerial property map (Location page) ======================= */
.site .aerial-map { margin: 10px 0 50px }
.site .aerial-map svg { display: block; width: 100%; height: auto }
.site .aerial-map a:hover rect { fill: #98713e }
.site .aerial-map-hint, .site .aerial-map-link { display: none }
@media (max-width: 680px) {
  .site .aerial-map-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch }
  .site .aerial-map svg { width: 1000px; max-width: none }
  .site .aerial-map-hint { display: block; margin: 0; padding: 12px 16px; font-size: 13px; background: #faf7f1; color: #766b5e }
  .site .aerial-map-link { display: block; text-align: center; background: #342f29; color: #faf7f1; padding: 16px; text-decoration: none }
}

/* ==== Home garden: one large grid, every photo the same shape ==== */
.site .garden-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 10px 40px 0; max-width: 1800px; margin: 0 auto }
.site .garden-grid img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block }
.site .garden-grid img:first-child { grid-column: 1 / -1; aspect-ratio: 21/9 }
@media (max-width: 680px) {
  .site .garden-grid { grid-template-columns: 1fr; gap: 12px; padding: 6px 16px 0 }
  .site .garden-grid img, .site .garden-grid img:first-child { aspect-ratio: 4/3 }
}

/* ==== Phone pass (≤540px) — added last so it wins ================= */
.site .location img.home-aerial { max-height: none; object-fit: cover; aspect-ratio: 16/10; height: auto }
@media (max-width: 540px) {
  /* 1. slim header: logo + languages in one row, small menu, one-line rating */
  .site .masthead { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 10px 14px 6px; gap: 4px 10px }
  .site .masthead .language { order: 2; align-self: center; font-size: 11px }
  .site .brand { order: 1; width: 190px }
  .site .brand-tagline { display: none }
  .site .mobile-nav { width: calc(100% - 28px); margin: 0 14px 6px; padding: 6px 10px; font-size: 15px }
  .site .property-strip.review-band { padding: 3px 14px; display: flex; justify-content: space-between; align-items: center; font-size: 11px }
  .site .review-rating { grid-row: auto; font-size: 12px }
  .site .review-rating .review-stars { font-size: 12px }
  .site .review-brand { display: none }
  .site .booking { margin: 4px 12px 0; padding: 2px 12px }
  .site .booking-toggle { min-height: 38px; font-size: 15px }
  .site .hero { aspect-ratio: 3/4 }

  /* 2 + 3. price tables become simple cards: season, dates, price */
  .site .room-price-wrap { padding: 14px 16px 6px; overflow: visible }
  .site .room-price-wrap table, .site .original-copy table { min-width: 0; width: 100% }
  .site .room-price-wrap table, .site .room-price-wrap tbody, .site .room-price-wrap td,
  .site .original-copy table, .site .original-copy tbody, .site .original-copy td { display: block }
  .site .room-price-wrap tr { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; padding: 12px 0; border-bottom: 1px solid var(--line) }
  .site .room-price-wrap tr:first-child { padding: 0 0 4px }
  .site .room-price-wrap td { padding: 0; border: 0; font-size: 14px; white-space: normal; word-break: normal; hyphens: none }
  .site .room-price-wrap td:empty, .site .original-copy td:empty { display: none }
  .site .room-price-wrap td:first-child, .site .room-price-wrap td:nth-child(2) { grid-column: 1 / -1 }
  .site .room-price-wrap td:nth-child(2) { color: var(--muted); font-size: 13px; margin-bottom: 4px }
  .site .room-price-wrap tr td:last-child:not(:first-child) { display: none }
  .site .room-price-wrap td strong { white-space: nowrap }
  .site .original-copy { padding: 0 2px }
  .site .original-copy h3 { font-size: 22px; margin: 26px 0 8px }
  .site .original-copy tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 10px 0; border-bottom: 1px solid var(--line) }
  .site .original-copy td { padding: 0; font-size: 14px }
  .site .original-copy td:first-child { color: var(--ink) }
  .site .original-copy td:last-child { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; color: var(--ink) }
  .site .original-copy td:nth-child(2):not(:last-child) { grid-column: 1; font-size: 12.5px }
  .site .original-copy td:nth-child(3):not(:last-child) { display: none }

  /* 4. shorter bungalow sections, 360 button straight after the photos */
  .site .room-detail { display: flex; flex-direction: column; padding: 28px 0 36px }
  .site .room-detail>h2 { order: 0 }
  .site .room-detail>.room-gallery { order: 1 }
  .site .room-detail>.tour { order: 2; height: auto; min-height: 0; padding: 0 16px; margin-top: 14px; background: none }
  .site .room-detail>.tour>img, .site .room-detail>.tour::before { display: none }
  .site .room-detail>.tour .tour-card { position: static; width: 100%; padding: 16px; box-shadow: none; border: 1px solid var(--line) }
  .site .room-detail>.tour .tour-card h3, .site .room-detail>.tour .tour-kicker { display: none }
  .site .room-detail>.tour .native-tour-launch { width: 100% }
  .site .room-detail>.room-info-layout { order: 3; padding: 22px 0 10px; gap: 22px }
  .site .film-track { --film-height: 62svh }

  /* 8. garden photos two per row */
  .site .garden-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 12px 0 }
  .site .garden-grid img { aspect-ratio: 1/1 }
  .site .garden-grid img:first-child { grid-column: 1 / -1; aspect-ratio: 4/3 }

  /* impressions photos two per row too */
  .site .photo-grid { grid-template-columns: 1fr 1fr; gap: 8px }
  .site .photo-grid img { height: auto; aspect-ratio: 1/1 }
}

@media (max-width: 540px) {
  .site [data-content="bungalows"] .page-body>.original-copy { padding: 0 18px }
  .site [data-content="bungalows"] .original-copy table tr:nth-child(odd) { background: transparent }
}

/* Tips page: three photos, the last one full width */
.site .tips-grid img:last-child { grid-column: 1 / -1; height: 440px }
@media (max-width: 540px) { .site .tips-grid img:last-child { height: auto; aspect-ratio: 16/10 } }
.site .tips-grid { margin-top: 0 }

/* Phone page menu — replaces the iPhone's dark picker */
.site select[hidden] { display: none !important }
@media (max-width: 540px) {
  .site .mobile-nav.mnav { padding: 0; z-index: 60 }
  .site .mnav-btn { display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; padding: 7px 12px; font: inherit; font-family: 'Jost', sans-serif;
    font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; letter-spacing: .01em }
  .site .mnav-btn svg { width: 12px; height: 8px; flex: none; transition: transform .25s }
  .site .mnav.open { border-color: #a8773a }
  .site .mnav.open .mnav-btn svg { transform: rotate(180deg) }
  .site .mnav-list { position: absolute; left: -1px; right: -1px; top: calc(100% + 4px);
    background: #fffaf3; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(52,47,41,.18) }
  .site .mnav-list[hidden] { display: none }
  .site .mnav-list a { display: flex; justify-content: space-between; align-items: center;
    padding: 13px 18px; font-family: 'Jost', sans-serif; font-size: 15px; letter-spacing: .02em;
    color: var(--ink); text-decoration: none; border-top: 1px solid var(--sand) }
  .site .mnav-list a:first-child { border-top: 0 }
  .site .mnav-list a.on { background: var(--sand) }
  .site .mnav-list a.on::after { content: ''; width: 18px; height: 1px; background: #a8773a }
  .site .mnav-list a:active { background: var(--sand) }
}
:lang(th) .site .mnav-btn, :lang(th) .site .mnav-list a { font-family: 'Noto Sans Thai', 'Jost', sans-serif }

/* Bungalow 4 is the owners' own unit: no tour photo behind the card yet */
.site #four .tour { background: var(--sand) }
.site #four .tour > img { visibility: hidden }

/* Tripadvisor logo in the rating band — white over the photo, black once pinned */
.site .review-brand { display: inline-flex !important; align-items: center; line-height: 0 }
.site .review-brand img { height: 40px; width: auto }
.site .review-brand .ta-b { display: none }
.site .sticky-reservation.is-pinned .review-brand .ta-w { display: none }
.site .sticky-reservation.is-pinned .review-brand .ta-b { display: block }
@media (max-width: 540px) { .site .review-brand img { height: 30px } }
/* Tripadvisor banner above the footer on the home page */
.site .ta-banner { max-width: 980px; margin: 40px auto 56px; padding: 0 24px }
.site .ta-banner a { display: block; border: 1px solid var(--line); background: #fff; padding: 18px 26px }
.site .ta-banner img { display: block; width: 100%; height: auto }
@media (max-width: 540px) { .site .ta-banner { margin: 24px auto 36px; padding: 0 14px } .site .ta-banner a { padding: 10px 12px } }
/* Location page contact box (replaces the old tourist map) */
.site .loc-contact { max-width: 560px; margin: 36px auto 10px; padding: 28px 30px; background: var(--light); border: 1px solid var(--line); text-align: center }
.site .loc-contact h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 28px; margin: 0 0 18px }
.site .loc-contact p { margin: 10px 0; display: flex; flex-direction: column; gap: 2px }
.site .loc-contact span { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted) }
.site .loc-contact a { font-size: 18px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); align-self: center; word-break: break-all }
/* Restaurant 360 card — tour not shot yet */
.site .restaurant-tour { background: var(--sand); margin: 30px 0 }
.site .restaurant-tour > img { visibility: hidden }
@media (max-width: 540px) { .site .restaurant-tour { height: 300px; margin: 20px 0 } }

/* the photo strip can be dragged with the mouse */
.site .film-viewport { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none }
.site .film-viewport.is-dragging { cursor: grabbing }
.site .film-viewport img { -webkit-user-drag: none; user-select: none }

/* enquiry box — WhatsApp or email, contact never shown on the page */
.enquiry-box { box-sizing: border-box; border: 1px solid var(--line, #d6c9b6); background: #fffaf3; color: #342f29; padding: 34px 30px 28px;
  width: min(420px, calc(100vw - 32px)); text-align: center; box-shadow: 0 24px 60px rgba(52,47,41,.25) }
.enquiry-box::backdrop { background: rgba(30,26,22,.45) }
.enquiry-box h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 30px; margin: 0 0 8px }
.enquiry-lead { font-family: 'Jost', sans-serif; font-size: 14px; color: #766b5e; margin: 0 0 14px }
.enquiry-sum { font-family: 'Jost', sans-serif; font-size: 15px; margin: 0 0 22px; padding: 10px; background: #ede2d1 }
.enquiry-btn { display: block; font-family: 'Jost', sans-serif; font-size: 15px; letter-spacing: .02em; padding: 14px 16px; margin: 10px 0 0;
  background: #342f29; color: #fffaf3; text-decoration: none }
.enquiry-btn-alt { background: transparent; color: #342f29; border: 1px solid #342f29 }
.enquiry-x { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 26px; line-height: 1; color: #342f29; cursor: pointer }
html:lang(th) .enquiry-btn, html:lang(th) .enquiry-lead, html:lang(th) .enquiry-sum { font-family: 'Noto Sans Thai', 'Jost', sans-serif }

/* availability — second button under "Explore in 360°", same window as the tours */
.site .availability-launch { display: inline-block; margin: 10px 0 0 10px; padding: 12px 22px; background: transparent;
  border: 1px solid var(--ink); color: var(--ink); font: inherit; font-size: 14px; letter-spacing: .02em; cursor: pointer }
.site .availability-launch:hover { background: var(--ink); color: var(--light) }
.lv-cal-foot { display: none }
#tour-dialog.is-cal .lv-cal-foot { display: flex; justify-content: center; padding: 12px; background: #fffaf3; border-top: 1px solid #d6c9b6 }
.lv-cal-ask { background: #342f29; color: #fffaf3; border: 0; padding: 13px 26px; font-family: 'Jost', sans-serif; font-size: 15px; cursor: pointer }
@media (max-width: 540px) {
  .site .availability-launch { display: block; width: 100%; margin: 10px 0 0 }
  .lv-cal-ask { width: 100% }
}
#tour-dialog.is-cal iframe { height: calc(100% - 54px - 70px); background: #fffaf3 }
#tour-dialog.is-cal .lv-cal-foot { height: 70px; box-sizing: border-box; align-items: center }

/* Impressions: first photo full width, then 2 per row (15 photos = 1 + 7 rows) */
.site .photo-grid.impr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.site .photo-grid.impr-grid img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; margin: 0 }
.site .photo-grid.impr-grid img:first-child { grid-column: 1 / -1; aspect-ratio: 21/9 }
@media (max-width: 540px) {
  .site .photo-grid.impr-grid { gap: 8px }
  .site .photo-grid.impr-grid img { aspect-ratio: 1/1 }
  .site .photo-grid.impr-grid img:first-child { aspect-ratio: 4/3 }
}

/* ---- QA pass (Peter review) ---- */
/* second heading on Bungalows/Restaurant is now an h2 — keep the old h1 look */
.site .original-copy h2.copy-title { font-size: 43px }
@media (max-width: 800px) { .site .original-copy h2.copy-title { font-size: 34px } }
/* contrast: muted text on sand reaches WCAG AA (4.5:1) */
.site .room-price-wrap td, .site .room-price-wrap td *, .site .activities .chapter-head p { color: #5d5448 }
/* bigger tap areas, same look */
.site .language a { display: inline-block; padding: 6px 4px; margin: -6px -4px }
.site .review-count { display: inline-block; padding: 6px 0 }
.site .footer a { display: inline-block; padding: 4px 0 }
.site .footer .legal-links { margin-top: 14px; font-size: 13px }
.site .footer .legal-links a { color: var(--muted) }
/* legal pages */
.site .legal-copy { max-width: 760px; margin: 0 auto; padding: 10px 24px 60px; line-height: 1.75 }
.site .legal-copy h2 { font-size: 28px; margin: 34px 0 10px }
.site .legal-copy p, .site .legal-copy li { color: var(--ink) }
.site .legal-copy .legal-note { font-size: 13px; color: var(--muted); margin-top: 40px }
.site .original-copy table td, .site .original-copy table td * { color: #5d5448 }

/* click-to-load Google map on the Location page */
.site .gmap { max-width: 1100px; margin: 30px auto 10px; padding: 0 24px; text-align: center }
.site .gmap-load { background: var(--ink); color: var(--light); border: 0; padding: 14px 26px; font: inherit; font-size: 15px; letter-spacing: .02em; cursor: pointer }
.site .gmap-load span { margin-right: 6px }
.site .gmap-note { font-size: 12px; color: var(--muted); margin-top: 10px }
.site .gmap.is-loaded { padding: 0 24px }
.site .gmap iframe { display: block; width: 100%; height: 460px; border: 1px solid var(--line) }
@media (max-width: 540px) { .site .gmap { padding: 0 14px } .site .gmap.is-loaded { padding: 0 14px } .site .gmap iframe { height: 360px } .site .gmap-load { width: 100% } }

.site .gmap-open { display: inline-block; margin-top: 16px; padding: 8px 0; color: var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; font-size: 15px }

/* garden: a lone last photo fills the row */
.site .garden-grid img:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 21/9 }
@media (max-width: 540px) { .site .garden-grid img:last-child:nth-child(even) { aspect-ratio: 4/3 } }

/* restaurant dish list + hours box */
.dish-list { margin: 14px 0 18px; padding-left: 20px }
.dish-list li { margin: 0 0 10px; line-height: 1.6 }
.dish-list strong { color: var(--ink) }
.rest-hours { margin-top: 28px; padding: 18px 22px; background: var(--sand); border-radius: 4px }
.rest-hours h3 { margin-top: 0 }
.rest-hours p:last-child { margin-bottom: 0 }
.rest-hours p { color: #4a4238 }
.site .original-copy .rest-hours h3 { margin-top: 0 }

/* restaurant: single wide photo */
.site .photo-grid.is-one { grid-template-columns: 1fr }
.site .photo-grid.is-one img { height: auto; aspect-ratio: 21/9 }
@media (max-width: 540px) { .site .photo-grid.is-one img { aspect-ratio: 4/3 } }

/* room gallery with only one photo (Bungalow 5) */
.site .room-gallery.single-photo { position: relative; width: min(calc((100svh - 270px) * 1.78), 76vw); margin: 0 auto }
.site .room-gallery.single-photo .gallery-viewport { height: auto; aspect-ratio: 16/9 }
.site .room-gallery.single-photo .gallery-viewport img { height: 100%; width: 100% }
.site .room-gallery.single-photo > .gallery-expand { right: 16px; top: 16px; z-index: 2 }
@media (max-width: 540px) { .site .room-gallery.single-photo { width: 100%; min-width: 0 } .site .room-gallery.single-photo .gallery-viewport { aspect-ratio: 4/3 } }

/* ---------- restaurant menu (Aom / Lake-View-Restaurant package) ---------- */
.site .lvr-panel { max-width: 1240px; margin: 0 auto 56px; padding: 8px 20px 0; text-align: center }
.site .lvr-eyebrow { font-family: 'Cormorant Garamond',Georgia,serif; font-size: 16px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); margin: 0 0 6px }
.site .lvr-title { font-family: 'Cormorant Garamond',Georgia,serif; font-weight: 500; font-size: clamp(40px,5.4vw,76px); line-height: 1.06; letter-spacing: -.02em; color: var(--ink); margin: 0 0 16px }
.site .lvr-lead { max-width: 600px; margin: 0 auto; font-size: 17px; line-height: 1.55; color: #4a4238 }
.site .lvr-featured { display: grid; grid-template-columns: 1fr 1.1fr 1.28fr 1.08fr 1fr; align-items: start; margin: 18px auto 30px }
.site .lvr-featured-dish { margin: 0; min-width: 0 }
.site .lvr-featured-dish:nth-child(2), .site .lvr-featured-dish:nth-child(4) { padding-top: 20px }
.site .lvr-featured-dish:nth-child(3) { padding-top: 12px }
.site .lvr-featured-dish:nth-child(5) { padding-top: 18px }
.site .lvr-featured-dish img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 15px 9px rgba(74,53,27,.2)) }
.site .lvr-featured-dish figcaption { font-family: 'Cormorant Garamond',Georgia,serif; font-size: 20px; line-height: 1.3; color: var(--ink); margin-top: 4px }
.site .lvr-featured-dish small { display: block; font-family: 'Jost',sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5d5448; margin: 6px 4px 0 }
.site .lvr-explore { display: inline-flex; align-items: center; gap: 14px; min-height: 46px; padding: 10px 32px; border: 1px solid #7b7164; border-radius: 40px; font-family: 'Cormorant Garamond',Georgia,serif; font-size: 19px; color: var(--ink); text-decoration: none }
.site .lvr-explore:hover { background: var(--sand) }
.site .lvr-footline { display: flex; align-items: center; gap: 24px; margin: 34px 4% 0; font-size: 13px; color: #5d5448 }
.site .lvr-footline::before, .site .lvr-footline::after { content: ""; flex: 1; height: 1px; background: var(--line) }
.site .lvr-footline span { max-width: 70% }
.site .lvr-kitchen { max-width: 1240px; margin: 64px auto 0; padding: 0 20px; text-align: center }
.site .lvr-kitchen h2 { font-family: 'Cormorant Garamond',Georgia,serif; font-weight: 500; font-size: clamp(32px,3.4vw,48px); color: var(--ink); margin: 0 0 26px }
.site .lvr-gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 40px 28px }
.site .lvr-gallery figure { margin: 0; min-width: 0 }
.site .lvr-gallery img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 10px rgba(59,44,27,.13)) }
.site .lvr-gallery figcaption { font-family: 'Cormorant Garamond',Georgia,serif; font-size: 22px; line-height: 1.3; color: var(--ink); margin-top: 10px }
.site .lvr-hours-wrap { margin-top: 56px }
.site .lvr-venue { max-width: 1240px; margin: 56px auto 0; padding: 0 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
.site .lvr-venue img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover }
.site .lvr-venue .lvr-venue-wide { grid-column: 1 / -1; aspect-ratio: 21/9 }
html[lang="th"] .site .lvr-title, html[lang="th"] .site .lvr-kitchen h2 { font-family: 'Noto Serif Thai',serif; line-height: 1.35; letter-spacing: 0 }
html[lang="th"] .site .lvr-featured-dish figcaption, html[lang="th"] .site .lvr-gallery figcaption, html[lang="th"] .site .lvr-eyebrow, html[lang="th"] .site .lvr-explore { font-family: 'Noto Serif Thai',serif; letter-spacing: 0 }
@media (max-width: 1000px) { .site .lvr-gallery { grid-template-columns: repeat(3,minmax(0,1fr)) } }
@media (max-width: 700px) {
  .site .lvr-featured { grid-template-columns: 1fr 1fr; gap: 22px 10px; max-width: 520px }
  .site .lvr-featured-dish:nth-child(n) { padding-top: 0 }
  .site .lvr-featured-dish:nth-child(3) { grid-column: 1 / -1; width: 70%; max-width: 290px; justify-self: center }
  .site .lvr-gallery { grid-template-columns: 1fr 1fr; gap: 26px 14px }
  .site .lvr-gallery figcaption { font-size: 18px }
  .site .lvr-venue { grid-template-columns: 1fr; gap: 14px }
  .site .lvr-venue .lvr-venue-wide { aspect-ratio: 4/3 }
  .site .lvr-footline { gap: 12px; margin: 26px 0 0 }
  .site .lvr-footline span { max-width: 80% }
}

/* home: link to the full garden page */
.site .garden-more { text-align: center; margin: 22px 0 0 }

/* ---------- review branch: booking room menu, unavailable unit, garden toggle, readability ---------- */
.site .booking { grid-template-columns: 1.15fr 1fr 1fr .8fr auto }
.site .booking select option:disabled { color: #8a8175 }
.site .unit-notice { max-width: 760px; margin: 4px auto 22px; padding: 12px 16px; background: var(--sand); border-left: 3px solid #a4552f; font-size: 15px; line-height: 1.5; color: #3b342c; text-align: left }
.site .unit-badge { display: inline-block; margin: 2px 0 8px; padding: 3px 10px; background: var(--sand); color: #3b342c; font-size: 13px; letter-spacing: .02em }
.site .availability-launch.is-off, .site .availability-launch:disabled { opacity: 1; cursor: not-allowed; background: transparent; color: #5d5448; border-style: dashed }
.site .impr-grid.is-collapsed img:nth-child(n+7) { display: none }
.site .garden-toggle { text-align: center; margin: 26px 0 8px }
.site .garden-toggle-btn { min-height: 48px; padding: 12px 30px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: inherit; font-size: 16px; letter-spacing: .02em; cursor: pointer }
.site .garden-toggle-btn:hover { background: var(--sand) }
.site .garden-toggle-btn:focus-visible { outline: 3px solid #a4552f; outline-offset: 3px }
@media (max-width: 760px) { .site .booking { grid-template-columns: 1.15fr 1fr 1fr .8fr auto } }
@media (max-width: 540px) {
  .site .booking { grid-template-columns: 1fr 1fr }
  .site .booking.expanded .enquire { grid-column: 1 / -1 }
}
/* readability: raise the smallest text and button labels, same look */
html .site.site .booking label span { font-size: 12px; letter-spacing: .12em }
html .site.site .eyebrow { font-size: 12px }
html .site.site .review-count { font-size: 13px }
html .site.site .text-link { font-size: 13px }
html .site.site .masthead .language a, html .site.site .masthead .language [aria-current] { font-size: 12px }
html .site.site .masthead-location { font-size: 12px }
html .site.site .hero-caption { font-size: 12px }
html .site.site .film-count, html .site.site .film-controls button { font-size: 14px }
html .site.site .lvr-featured-dish small { font-size: 12px }
html .site.site nav a { font-size: 13px }
html .site.site .footer p, html .site.site .footer a { font-size: 14px }
html .site.site .booking .enquire { font-size: 14px }
html .site.site .gallery-expand { font-size: 13px }
html .site.site .gmap-note { font-size: 13px }
html .site.site .native-tour-launch, html .site.site .availability-launch { font-size: 14px }
html .site.site .room-price-wrap td, html .site.site .original-copy table td { font-size: 14px }

/* ---------- phone: page menu in the sticky bar, above "Dates | guests" ---------- */
@media (max-width: 540px) {
  .site .sticky-reservation .mobile-nav.mnav.in-bar { width: calc(100% - 24px); margin: 6px 12px 0; padding: 0; z-index: 60; background: rgba(250,247,241,.96) }
  .site .sticky-reservation .mnav.in-bar .mnav-btn { min-height: 40px; padding: 0 12px; font-size: 15px }
  .site .sticky-reservation .mnav.in-bar .mnav-list { max-height: calc(100svh - 160px); overflow: auto }
  .site .sticky-reservation.is-pinned .mobile-nav.mnav.in-bar { width: 100%; margin: 0; border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid #cfbda2; background: var(--paper) }
  .site .sticky-reservation.is-pinned .mnav.in-bar .mnav-btn { padding: 0 16px }
  .site .sticky-reservation.is-pinned .mnav.in-bar .mnav-list { left: 0; right: 0 }
  .site .sticky-reservation.is-pinned .booking { padding-top: 2px; padding-bottom: 2px }
  .site .sticky-reservation.is-pinned .booking.expanded { padding-bottom: 16px }
}

/* ==== Bigger reading text ========================================
   Requested after Karl's review: the running copy was too small,
   especially on a phone. Headlines, menu, buttons, the booking bar
   and the footer are deliberately left at their old sizes — only
   the text people actually read is raised.
   Desktop 18px / phone 17px; tables 15px on both.
   The `html .site.site` prefix only raises specificity so these win
   over the earlier per-element sizes; it selects nothing extra.    */
html .site.site .original-copy p,
html .site.site .original-copy li,
html .site.site .legal-copy p,
html .site.site .legal-copy li,
html .site.site .introduction p,
html .site.site .chapter-head p,
html .site.site .activity-copy p,
html .site.site .location p,
html .site.site .lvr-panel p,
html .site.site .lvr-panel li,
html .site.site .lvr-lead,
html .site.site .rest-hours p,
html .site.site .unit-notice { font-size: 18px; line-height: 1.7 }

html .site.site .room-price-wrap td,
html .site.site .room-price-wrap td *,
html .site.site .original-copy table td,
html .site.site .original-copy table td * { font-size: 15px }

@media (max-width: 800px) {
  html .site.site .original-copy p,
  html .site.site .original-copy li,
  html .site.site .legal-copy p,
  html .site.site .legal-copy li,
        html .site.site .introduction p,
  html .site.site .chapter-head p,
  html .site.site .activity-copy p,
  html .site.site .location p,
  html .site.site .lvr-panel p,
  html .site.site .lvr-panel li,
  html .site.site .lvr-lead,
  html .site.site .rest-hours p,
  html .site.site .unit-notice { font-size: 17px; line-height: 1.7 }
}

@media (max-width: 540px) {
  /* the phone price cards: the second line is the date range, kept
     one step smaller than the season name and the price */
  html .site.site .room-price-wrap td:nth-child(2),
  html .site.site .original-copy td:nth-child(2):not(:last-child) { font-size: 13.5px }
}

/* ==== Reading size and alignment ================================
   Karl's feedback (his friend Tilo, 23 Sep): the body copy was too small and
   the centred lines were hard to follow. Copy now sits flush left and one step
   larger; the headline sizes stay as they were. */
.site { font-size: 17px }
.site .introduction, .site .introduction h1, .site .introduction p,
.site .chapter-head, .site .chapter-head h2, .site .chapter-head p,
.site .activities p, .site .original-copy, .site .room-description,
.site .page-body p, .site .page-body li { text-align: left }
.site .introduction p, .site .chapter-head p, .site .page-body p,
.site .original-copy, .site .room-description { font-size: 17px; line-height: 1.85 }

@media (max-width: 700px) {
  .site .room-price-wrap td, .site .original-copy td { font-size: 14px }
}

.site .price-note { margin: 10px 0 0; font-size: 12px; color: #5d5448 }  /* was var(--muted) #766b5e: 4.3 contrast, below the 4.5 minimum */

/* price tables: keep a price, a season name and the air-con note on one line
   so the floors and their prices stay on the same baseline (desktop only —
   on phones the table stacks into label/value rows) */
@media (min-width: 701px) {
  .site .room-price-wrap td:first-child,
  .site .room-price-wrap td:nth-child(4),
  .site .room-price-wrap td:last-child { white-space: nowrap }
}

/* WhatsApp link under the location line in the header */
.site .masthead-contact { justify-self: end; display: grid; justify-items: end; gap: 3px; text-align: right }
.site .masthead-contact .masthead-location { justify-self: end }
.site .masthead-whatsapp {
  color: #fffaf3;
  font-size: 11px;
  letter-spacing: .06em;
  text-decoration: none;
  border-bottom: 1px solid #fffaf355;
  padding-bottom: 1px;
  text-shadow: 0 1px 6px #0008;
}
.site .masthead-whatsapp:hover, .site .masthead-whatsapp:focus-visible { border-bottom-color: #fffaf3 }
@media (max-width: 540px) {
  .site .masthead-contact { display: block }
  .site .masthead-whatsapp { font-size: 11px }
  .site .masthead-whatsapp .wa-number { display: none }
}

/* Photos not shot yet: a quiet placeholder instead of an empty gallery */
.site .gallery-soon { display: flex; align-items: center; justify-content: center; min-height: 220px; border: 1px solid #0000001a;
  background: #00000008; color: var(--muted); border-radius: 2px }
.site .gallery-soon p { margin: 0; text-align: center; font-size: 13px; letter-spacing: .08em; text-transform: uppercase }

/* Tips page: photo and text side by side, alternating left and right */
.site .tips-rows { display: grid; gap: 72px }
.site .tips-row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center }
.site .tips-row .tips-figure { margin: 0 }
.site .tips-row img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover }
.site .tips-row.reverse .tips-figure { order: -1 }
.site .tips-row p { margin: 0 }
.site .tips-closing { margin-top: 72px }
@media (max-width: 760px) {
  .site .tips-rows { gap: 40px }
  .site .tips-row { grid-template-columns: 1fr; gap: 18px }
  .site .tips-row.reverse .tips-figure { order: 0 }
  .site .tips-row img { aspect-ratio: 3 / 2 }
  .site .tips-closing { margin-top: 40px }
}

.site .tips-text .original-copy { margin: 0 }
.site .tips-row + .photo-grid, .site .tips-rows + .photo-grid { margin-top: 56px }

/* Garden page: bigger, calmer intro next to the photo */
.site .garden-copy { max-width: 46ch }
.site .garden-copy h2 { margin: 0 0 22px; font-size: 30px; line-height: 1.25; text-align: left }
.site .garden-copy p { margin: 0 0 18px; font-size: 18px; line-height: 1.85; text-align: left }
.site .garden-copy p:last-child { margin-bottom: 0 }
@media (max-width: 760px) {
  .site .garden-copy { max-width: none }
  .site .garden-copy h2 { font-size: 24px; margin-bottom: 16px }
  .site .garden-copy p { font-size: 17px }
}

/* Location: the map is shown straight away (OpenStreetMap, no Google tracking) */
.site .osm-map { margin: 32px 0 0 }
.site .osm-map iframe { display: block; width: 100%; height: 460px; border: 1px solid #0000001f; background: #e8e6e0 }
.site .osm-links { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 12px }
.site .osm-credit, .site .osm-credit a { font-size: 12px; color: var(--muted); text-decoration: none }
.site .osm-credit a:hover { text-decoration: underline }
@media (max-width: 700px) { .site .osm-map iframe { height: 320px } }

/* ==== Homepage layout system ===================================== */
/* Scoped to the homepage only: [data-content="home"]. One container,
   one owner for the vertical rhythm, one type scale. */
.site [data-content="home"] {
  --home-max: 1200px;
  --home-pad: 40px;
  --home-gap: 24px;   /* 24 + 24 = 48px between sections */
}
.site [data-content="home"] > .introduction,
.site [data-content="home"] > .chapter,
.site [data-content="home"] > .location {
  max-width: var(--home-max);
  margin-inline: auto;
  padding: var(--home-gap) var(--home-pad);
  text-align: left;
}
.site [data-content="home"] > .chapter.activities {
  max-width: none;
  padding-inline: max(var(--home-pad), calc((100% - var(--home-max)) / 2 + var(--home-pad)));
}
.site [data-content="home"] .chapter-head { max-width: 640px; margin: 0 0 32px; text-align: left }
.site [data-content="home"] .home-intro { max-width: var(--home-max) }
.site [data-content="home"] .home-intro > * { max-width: 640px }
.site [data-content="home"] .rule { display: none }

/* type scale */
.site [data-content="home"] h1 { font-size: 48px; line-height: 1.15; margin: 0 0 16px }
.site [data-content="home"] h2 { font-size: 38px; line-height: 1.2; margin: 0 0 16px }
.site [data-content="home"] h3 { font-size: 26px; line-height: 1.3; margin: 0 0 16px }
.site [data-content="home"] p { font-size: 18px; line-height: 1.7; margin: 0 0 16px }
.site [data-content="home"] p:last-child { margin-bottom: 0 }
.site [data-content="home"] .eyebrow { font-size: 16px; margin: 0 0 12px }
.site [data-content="home"] .home-action { margin-top: 20px }
.site [data-content="home"] .home-action-2 { margin-top: 12px }
.site [data-content="home"] .text-link {
  display: inline-block; min-height: 44px; line-height: 44px; font-size: 16px;
}
.site [data-content="home"] a:focus-visible,
.site [data-content="home"] button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }

/* the film-carousel script adds padding to .chapter-head; the homepage keeps
   one left edge for every section heading instead */
.site [data-content="home"] .film-chapter > .chapter-head { padding-left: 0; padding-right: 0 }

/* garden facts */
.site [data-content="home"] .fact-row {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: 24px 0 0; padding: 0; color: var(--muted); font-size: 16px;
}
.site [data-content="home"] .fact-row li { position: relative }
.site [data-content="home"] .fact-row li + li::before {
  content: ""; position: absolute; left: -14px; top: .35em; bottom: .35em; width: 1px; background: var(--line);
}
.site [data-content="home"] .garden-grid,
.site [data-content="home"] .room-grid,
.site [data-content="home"] .act-rows { margin-top: 32px }
.site [data-content="home"] .garden-more { margin-top: 20px }

/* activities: image left, text right, same order in all rows */
.site [data-content="home"] .act-rows { display: grid; gap: 56px }
.site [data-content="home"] .act-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.site [data-content="home"] .act-figure { margin: 0 }
.site [data-content="home"] .act-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover }
.site [data-content="home"] .act-note { max-width: 640px }

/* location */
.site [data-content="home"] .location {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.site [data-content="home"] .loc-text { max-width: 640px }
.site [data-content="home"] .loc-address {
  font-style: normal; font-size: 18px; line-height: 1.7; color: var(--muted); margin-top: 16px;
}
.site [data-content="home"] .loc-figure { margin: 0 }
.site [data-content="home"] .home-aerial { width: 100%; height: auto; object-fit: contain }

/* Thai: no Latin letter-spacing, roomier lines */
.site[lang="th"] [data-content="home"] .eyebrow { letter-spacing: normal }
.site[lang="th"] [data-content="home"] p,
.site[lang="th"] [data-content="home"] .loc-address { line-height: 1.95 }

@media (max-width: 1023px) {
  .site [data-content="home"] { --home-pad: 28px; --home-gap: 20px }
}
@media (max-width: 767px) {
  .site [data-content="home"] { --home-pad: 20px; --home-gap: 16px }
  .site [data-content="home"] h1 { font-size: 34px; line-height: 1.2 }
  .site [data-content="home"] h2 { font-size: 30px; line-height: 1.25 }
  .site [data-content="home"] h3 { font-size: 24px; line-height: 1.3 }
  .site [data-content="home"] p { font-size: 18px; line-height: 1.65 }
  .site [data-content="home"] .home-intro > *,
  .site [data-content="home"] .chapter-head,
  .site [data-content="home"] .act-note,
  .site [data-content="home"] .loc-text { max-width: none }
  .site [data-content="home"] .chapter-head { margin-bottom: 24px }
  .site [data-content="home"] .garden-grid,
  .site [data-content="home"] .room-grid,
  .site [data-content="home"] .act-rows { margin-top: 24px }
  .site [data-content="home"] .act-rows { gap: 40px }
  .site [data-content="home"] .act-row { grid-template-columns: 1fr; gap: 20px }
  .site [data-content="home"] .location { grid-template-columns: 1fr; gap: 24px }
}
@media (prefers-reduced-motion: reduce) {
  .site [data-content="home"] * { animation-duration: .01ms !important; transition-duration: .01ms !important }
}

/* ==== Reading layout: homepage + bungalows page ==================== */
/* Bigger, darker body text on the two pages Karl reads most, and one
   owner for every vertical gap. Scoped: nothing else on the site moves. */
.site [data-content="home"],
.site [data-content="bungalows"] { --read: 22px; --read-lh: 1.6 }

.site [data-content="home"] .section-copy p,
.site [data-content="home"] .chapter-head p,
.site [data-content="home"] .act-text p,
.site [data-content="home"] .act-note p,
.site [data-content="home"] .loc-text p,
.site [data-content="home"] .loc-address,
.site [data-content="bungalows"] .room-description p,
.site [data-content="bungalows"] .about-bungalows p,
.site [data-content="bungalows"] .page-lede p {
  font-size: var(--read);
  line-height: var(--read-lh);
  color: #342f29;
  text-align: left;
  max-width: 65ch;
  margin: 0 0 16px;
}
.site [data-content="home"] .section-copy p:last-child,
.site [data-content="home"] .chapter-head p:last-child,
.site [data-content="home"] .act-text p:last-child,
.site [data-content="home"] .act-note p:last-child,
.site [data-content="bungalows"] .room-description p:last-child { margin-bottom: 0 }

/* headings keep their size; only the gaps below them change */
.site [data-content="home"] .chapter-head h2,
.site [data-content="home"] .home-intro h1 { margin-bottom: 14px }
.site [data-content="home"] .chapter-head { margin-bottom: 24px }
.site [data-content="home"] .garden-grid,
.site [data-content="home"] .room-grid,
.site [data-content="home"] .act-rows { margin-top: 24px }
.site [data-content="home"] .section-copy { margin-top: 32px }
.site [data-content="home"] .fact-row { margin-top: 20px; font-size: 18px }
.site [data-content="home"] .garden-more,
.site [data-content="home"] .section-link { margin-top: 24px }
.site [data-content="home"] .act-note { margin-top: 0 }

/* action links: comfortable to hit, same elegant look */
.site [data-content="home"] .text-link,
.site [data-content="bungalows"] .about-bungalows .text-link {
  font-size: 18px; min-height: 44px; display: inline-flex; align-items: center;
}

/* Bungalows page: tighter top, one column per room (photos, tour, text, prices) */
.site [data-content="bungalows"] > .introduction { padding-bottom: 0 }
.site [data-content="bungalows"] > .page-body { padding-top: 0 }
.site [data-content="bungalows"] .page-lede { margin-top: 32px }
.site [data-content="bungalows"] .introduction h1 { margin-bottom: 0 }
.site [data-content="bungalows"] .page-lede h2 { margin-top: 0 }
.site [data-content="bungalows"] .room-info-layout { display: block }
.site [data-content="bungalows"] .room-description { margin: 0 0 32px; max-width: none }
.site [data-content="bungalows"] .room-price-wrap { margin: 0 }
.site [data-content="bungalows"] .room-detail > .tour { margin: 24px 0 32px }
.site [data-content="bungalows"] .about-bungalows { margin: 48px 0; padding: 0 32px }
.site [data-content="bungalows"] .about-bungalows h2 { margin-bottom: 16px }

@media (max-width: 767px) {
  .site [data-content="home"],
  .site [data-content="bungalows"] { --read: 20px }
  .site [data-content="home"] .chapter-head { margin-bottom: 20px }
  .site [data-content="home"] .section-copy { margin-top: 24px }
  .site [data-content="home"] .fact-row { font-size: 17px }
  .site [data-content="bungalows"] > .page-body { padding-top: 0 }
  .site [data-content="bungalows"] .page-lede { margin-top: 24px }
  .site [data-content="bungalows"] .about-bungalows { margin: 32px 0; padding: 0 20px }
}

/* ==== Centred overview blocks ===================================== */
/* Welcome, garden overview and the general bungalow introduction sit on
   one centred axis. Room descriptions, amenities, prices and form fields
   stay left-aligned for reading. */
.site [data-content="home"] .home-intro,
.site [data-content="home"] .chapter-head,
.site [data-content="home"] .section-copy,
.site [data-content="bungalows"] .page-lede,
.site [data-content="bungalows"] .about-bungalows {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}
.site [data-content="home"] .home-intro > *,
.site [data-content="home"] .chapter-head > *,
.site [data-content="home"] .section-copy > *,
.site [data-content="bungalows"] .page-lede > *,
.site [data-content="bungalows"] .about-bungalows > * {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}
.site [data-content="home"] .home-intro h1,
.site [data-content="home"] .chapter-head h2,
.site [data-content="bungalows"] .about-bungalows h2 {
  font-size: 44px; line-height: 1.2; margin: 0 0 24px; text-wrap: balance;
}
.site [data-content="home"] .home-intro .eyebrow { margin: 0 0 12px }
.site [data-content="home"] .chapter-head p,
.site [data-content="home"] .section-copy p,
.site [data-content="bungalows"] .about-bungalows p {
  margin: 0 auto 16px; text-align: center;
}
.site [data-content="home"] .chapter-head p:last-child,
.site [data-content="home"] .section-copy p:last-child,
.site [data-content="bungalows"] .about-bungalows p:last-child { margin-bottom: 0 }
.site [data-content="home"] .fact-row { justify-content: center; margin-top: 24px }
.site [data-content="home"] .garden-more,
.site [data-content="home"] .section-link { margin-top: 24px; text-align: center }

/* text that sits next to a photograph stays in its own column */
.site [data-content="home"] .act-text > *,
.site [data-content="home"] .loc-text > * { max-width: 560px }

@media (max-width: 767px) {
  .site [data-content="home"] .home-intro h1,
  .site [data-content="home"] .chapter-head h2,
  .site [data-content="bungalows"] .about-bungalows h2 { font-size: 32px; margin-bottom: 20px }
  .site [data-content="home"] .home-intro,
  .site [data-content="home"] .chapter-head,
  .site [data-content="home"] .section-copy,
  .site [data-content="bungalows"] .page-lede,
  .site [data-content="bungalows"] .about-bungalows { max-width: none }
}

/* ==== Welcome: text left, photo right (centred on a phone) ========= */
.site [data-content="home"] .intro-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  max-width: 1200px; text-align: left;
}
.site [data-content="home"] .intro-split > * { max-width: none; margin-inline: 0; text-align: left }
.site [data-content="home"] .intro-text > * { max-width: 560px; margin-inline: 0; text-align: left }
.site [data-content="home"] .intro-figure { margin: 0 }
.site [data-content="home"] .intro-figure img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover }

@media (max-width: 767px) {
  /* one column, photo first, and the text centred like every other
     overview block on a phone */
  .site [data-content="home"] .intro-split { grid-template-columns: 1fr; gap: 20px; text-align: center }
  .site [data-content="home"] .intro-figure { order: -1 }
  .site [data-content="home"] .intro-split > *,
  .site [data-content="home"] .intro-text > * { max-width: none; margin-inline: auto; text-align: center }
}

/* long German compound headings must break instead of pushing the page wide */
.site h1, .site h2, .site h3 { overflow-wrap: break-word }
@media (max-width: 420px) { .site[lang="de"] h1, .site[lang="de"] h2 { hyphens: auto } }

/* ==== Desktop: the menu stays on screen while scrolling ============ */
/* On a phone the menu is a select inside the pinned bar, so this only
   applies from 1024px up, where the links are shown. */
@media (min-width: 1024px) {
  .site nav {
    position: sticky;
    top: 0;
    z-index: 31;
    transition: background-color .2s ease, color .2s ease, padding .2s ease;
  }
  /* once the page is scrolled the menu sits on paper, not on the video */
  .site.nav-pinned nav {
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 10px #342f2912;
    padding: 2px 20px;
  }
  .site.nav-pinned nav a { text-shadow: none }
  .site.nav-pinned nav a[aria-current=page] { box-shadow: inset 0 -2px var(--ink) }
  /* the booking bar pins directly under the menu */
  .site .sticky-reservation { top: var(--nav-height, 30px) }
}

/* ==== Menu text: same size as the booking bar ====================== */
/* Same font, just the reading size Karl asked for. */
@media (min-width: 1024px) {
  .site nav { gap: 0 34px }
  .site nav a { font-size: 15px; padding: 8px 0 }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .site nav a { font-size: 14px; padding: 7px 0 }
}

/* Tips page: a small gallery of local activity photos before the closing text */
.site .tips-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 72px }
.site .tips-extra img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover }
@media (max-width: 760px) { .site .tips-extra { gap: 14px; margin-top: 40px } }

/* ==== Restaurant page ============================================= */
/* One container, one rhythm, one type scale — scoped so no other page
   moves. The generic .page-body / .introduction rules are overridden
   here by scope, not by !important. */
.site [data-content="restaurant"] { --rest-max: 1200px; --rest-pad: 40px; --rest-gap: 64px }

.site [data-content="restaurant"] > .introduction,
.site [data-content="restaurant"] > .page-body {
  max-width: var(--rest-max);
  margin-inline: auto;
  padding-inline: var(--rest-pad);
}
.site [data-content="restaurant"] > .introduction { padding-block: var(--rest-gap) 0; text-align: center }
.site [data-content="restaurant"] > .page-body { padding-block: 0 var(--rest-gap) }
.site [data-content="restaurant"] .rest-lede { margin-top: 0 }
.site [data-content="restaurant"] .rest-body > section { margin-top: var(--rest-gap) }

.site [data-content="restaurant"] h1 { font-size: 48px; line-height: 1.15; margin: 0 0 20px; text-align: center }
.site [data-content="restaurant"] h2 { font-size: 36px; line-height: 1.2; margin: 0 0 20px; text-align: center }
.site [data-content="restaurant"] .rest-lede {
  font-size: 22px; line-height: 1.55; color: var(--ink);
  max-width: 34ch;            /* about 60 characters per line, centred */
  margin: 0 auto; text-align: center;
}
/* opening hours: the practical lines stay left-aligned and easy to scan */
.site [data-content="restaurant"] .rest-hours-block { max-width: 55ch; margin-inline: auto }
.site [data-content="restaurant"] .rest-hours-block p {
  font-size: 22px; line-height: 1.55; color: var(--ink); text-align: left; margin: 0 0 16px;
}
.site [data-content="restaurant"] .rest-hours-block p:nth-of-type(2) { font-weight: 500 }
.site [data-content="restaurant"] .rest-hours-block p:last-child { margin-bottom: 0 }

/* the food gallery */
.site [data-content="restaurant"] .dish-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 28px; margin-top: 24px;
}
.site [data-content="restaurant"] .dish-card { margin: 0; display: flex; flex-direction: column }
.site [data-content="restaurant"] .dish-card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;   /* plates are not cropped */
  background: transparent; display: block;
}
.site [data-content="restaurant"] .rest-gallery-block .dish-card figcaption {
  margin-top: 14px; padding: 0 8px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.site [data-content="restaurant"] .dish-name {
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; line-height: 1.25; color: var(--ink);
}
.site [data-content="restaurant"] .rest-gallery-block .dish-name {
  max-width: 26ch; margin: 0 auto; text-wrap: balance;
}
.site [data-content="restaurant"] .dish-note {
  font-size: 18px; line-height: 1.55; color: var(--ink); max-width: 38ch;
}
.site [data-content="restaurant"] .rest-gallery-block .dish-note {
  max-width: 34ch; margin: 0 auto;
}
.site [data-content="restaurant"] .rest-also {
  margin: 32px auto 0; max-width: 52ch; font-size: 22px; line-height: 1.55; color: var(--ink); text-align: center;
}
/* restaurant and lake photographs */
.site [data-content="restaurant"] .lvr-venue { margin: 0 }

@media (max-width: 1023px) {
  .site [data-content="restaurant"] { --rest-pad: 28px; --rest-gap: 52px }
  .site [data-content="restaurant"] .dish-grid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 767px) {
  .site [data-content="restaurant"] { --rest-pad: 20px; --rest-gap: 40px }
  .site [data-content="restaurant"] h1 { font-size: 34px }
  .site [data-content="restaurant"] h2 { font-size: 28px }
  .site [data-content="restaurant"] .rest-lede,
  .site [data-content="restaurant"] .rest-hours-block p,
  .site [data-content="restaurant"] .rest-also { font-size: 20px }
  .site [data-content="restaurant"] .rest-lede { max-width: none }
}
@media (max-width: 560px) {
  .site [data-content="restaurant"] .dish-grid { grid-template-columns: 1fr; gap: 28px }
}

/* anchors on this page clear the real sticky area (menu + rating + booking
   bar), measured in the browser, not a guessed number */
.site [data-content="restaurant"] [id],
.site [data-content="restaurant"] h1,
.site [data-content="restaurant"] h2 { scroll-margin-top: calc(var(--sticky-total, 150px) + 16px) }

/* ==== Homepage: welcome and location match the other sections ====== */
/* Same reading size, colour and centring as the garden, bungalow and
   activity blocks. Scoped to the homepage only. */
/* the shared 18px rule below is written as `html .site.site .introduction p`
   / `.location p`; these two homepage blocks are matched with the same shape
   so the page reads at Karl's size without touching the shared rule */
html .site.site [data-content="home"] .intro-text p,
html .site.site [data-content="home"] .loc-text p,
html .site.site [data-content="home"] .loc-address {
  font-size: var(--read, 22px);
  line-height: 1.6;
  color: #342f29;
}
/* welcome: heading and text centred inside its own column, photo alongside */
.site [data-content="home"] .intro-split { text-align: center }
.site [data-content="home"] .intro-text { display: grid; justify-items: center }
.site [data-content="home"] .intro-text > * {
  max-width: 560px; margin-inline: auto; text-align: center;
}
/* location: same centred composition; the address stays a neat left-aligned group */
.site [data-content="home"] .loc-text { display: grid; justify-items: center; text-align: center }
.site [data-content="home"] .loc-text > * { max-width: 560px; margin-inline: auto; text-align: center }
.site [data-content="home"] .loc-text h2 { text-align: center }
.site [data-content="home"] .loc-address { text-align: left; justify-self: center }

@media (max-width: 767px) {
  .site [data-content="home"] .intro-text > *,
  .site [data-content="home"] .loc-text > * { max-width: none }
}

/* ==== Alignment pass: titles, hours, activity rows, location, carousel ==== */

/* 1. section title + subtitle share one centred wrapper and one centre line.
      The subtitle used to keep an old 65ch box with no auto margin, which
      pushed its centre ~50px left of the heading. */
.site [data-content="home"] .chapter-head > *,
.site [data-content="restaurant"] .rest-hours-block > *,
.site [data-content="restaurant"] .rest-gallery-block > h2 {
  margin-inline: auto;
}
.site [data-content="home"] .chapter-head h2 { margin-bottom: 22px }
.site [data-content="home"] .chapter-head .section-sub { max-width: 58ch; margin-bottom: 0 }
.site [data-content="home"] .garden-grid,
.site [data-content="home"] .room-grid,
.site [data-content="home"] .act-rows { margin-top: 30px }

/* 2. restaurant opening hours: heading and all three lines on one centre */
.site [data-content="restaurant"] { --rest-gap: 48px }
.site [data-content="restaurant"] .rest-hours-block { max-width: 55ch }
.site [data-content="restaurant"] .rest-hours-block p {
  text-align: center; margin: 0 auto 14px; max-width: 46ch;
}
.site [data-content="restaurant"] .rest-hours-block p:last-child { margin-bottom: 0 }
.site [data-content="restaurant"] .rest-hours-block p:nth-of-type(2) { font-weight: 600 }

/* 3. activity rows: the whole text group sits on the photo's centre line */
.site [data-content="home"] .act-row { align-items: center }

/* 4. location: the two links form one neatly spaced group */
.site [data-content="home"] .loc-text .home-action { margin-top: 20px }
.site [data-content="home"] .loc-text .home-action + .home-action { margin-top: 8px }

/* 5. carousel: tighter under the photo, clear step to the final link */
.site [data-content="home"] .section-link { margin-top: 28px }

@media (max-width: 1023px) {
  .site [data-content="restaurant"] { --rest-gap: 44px }
}
@media (max-width: 767px) {
  .site [data-content="restaurant"] { --rest-gap: 40px }
  .site [data-content="home"] .garden-grid,
  .site [data-content="home"] .room-grid,
  .site [data-content="home"] .act-rows { margin-top: 24px }
  .site [data-content="home"] .act-row { gap: 22px }        /* photo -> text on a phone */
  .site [data-content="home"] .chapter-head h2 { margin-bottom: 20px }
}

/* ==== Garden page: title and the text column on one axis ============ */
.site [data-content="impressions"] > .introduction { padding-bottom: 0 }
.site [data-content="impressions"] > .introduction h1 { margin-bottom: 0 }
.site [data-content="impressions"] .tips-rows { margin-top: 40px }
.site [data-content="impressions"] .tips-row { align-items: center }
.site [data-content="impressions"] .garden-copy { max-width: 46ch; margin-inline: auto }
@media (max-width: 760px) {
  .site [data-content="impressions"] .tips-rows { margin-top: 24px }
  .site [data-content="impressions"] .garden-copy { max-width: none }
}

/* ==== Booking bar: keep each field label inside its own column ====
   `.booking label` sets min-width: 0, so a grid column could become
   narrower than its own label word and the text ran into the next
   field (seen in English between 541px and 679px). min-content stops
   the column shrinking below its label in any language. Between 541px
   and 760px the bar is at its tightest, so the gap, the divider
   padding and the label tracking are trimmed a little as well.      */
@media (min-width: 541px) {
  .site .booking label { min-width: min-content }
}
@media (min-width: 541px) and (max-width: 760px) {
  .site .booking { gap: 10px }
  .site .booking label { padding-right: 10px }
  html .site.site .booking label span { letter-spacing: .02em }
}

/* ==== Welcome, panoramic layout (26 Sep 2026) ====================== */
/* heading left, Karl's welcome text right, one wide garden photo (G23)
   below, and one "Our garden" link under the photo on the right.
   On a phone: heading, text, photo, link, one under the other. */
.site [data-content="home"] .intro-pano {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; row-gap: 0;
  align-items: start; max-width: 1200px; text-align: left;
}
.site [data-content="home"] .intro-pano .intro-text { display: block; justify-items: normal; grid-column: 1; grid-row: 1 }
.site [data-content="home"] .intro-pano .intro-body { grid-column: 2; grid-row: 1; padding-top: 6px }
.site [data-content="home"] .intro-pano .intro-text > *,
.site [data-content="home"] .intro-pano .intro-body > * { max-width: 560px; margin-inline: 0; text-align: left }
.site [data-content="home"] .intro-pano .intro-text h1 { margin-bottom: 0 }
html .site.site [data-content="home"] .intro-pano .intro-body p {
  font-size: var(--read, 22px); line-height: 1.6; color: #342f29; margin: 0;
}
.site [data-content="home"] .intro-pano .intro-figure {
  grid-column: 1 / -1; grid-row: 2; order: 0; margin: 40px 0 0; max-width: none;
}
.site [data-content="home"] .intro-pano .intro-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 60%;
}
.site [data-content="home"] .intro-pano .intro-more {
  grid-column: 1 / -1; grid-row: 3; max-width: none; margin: 16px 0 0; text-align: right;
}
@media (max-width: 767px) {
  .site [data-content="home"] .intro-pano { grid-template-columns: 1fr; text-align: center }
  .site [data-content="home"] .intro-pano .intro-text,
  .site [data-content="home"] .intro-pano .intro-body,
  .site [data-content="home"] .intro-pano .intro-figure,
  .site [data-content="home"] .intro-pano .intro-more { grid-column: 1; grid-row: auto }
  .site [data-content="home"] .intro-pano .intro-text > *,
  .site [data-content="home"] .intro-pano .intro-body > * { max-width: none; margin-inline: auto; text-align: center }
  .site [data-content="home"] .intro-pano .intro-text h1 { margin-bottom: 16px }
  .site [data-content="home"] .intro-pano .intro-body { padding-top: 0 }
  .site [data-content="home"] .intro-pano .intro-figure { margin-top: 28px }
  .site [data-content="home"] .intro-pano .intro-figure img { aspect-ratio: 3 / 2 }
  .site [data-content="home"] .intro-pano .intro-more { margin-top: 8px }
}

/* ==== 360° tour panel, compact (26 Sep 2026) ======================= */
/* Bungalows page only. Photo and section height stay as they were; only
   the cream panel over the photo changes: ~390px wide, small label,
   bungalow name at 36px, two equal buttons side by side. On a phone the
   photo stays behind the panel and the buttons stack. */
html .site.site [data-content="bungalows"] .room-detail > .tour .tour-card {
  position: static; box-sizing: border-box; width: max-content; min-width: 390px;
  max-width: calc(100% - 32px); padding: 26px 30px; border: 0; box-shadow: none;
  background: var(--paper); text-align: center;
}
html .site.site [data-content="bungalows"] .room-detail > .tour .tour-kicker {
  display: block; font-size: 12px; letter-spacing: .2em; margin: 0 0 8px; color: #5d5448; text-align: center;
}
html:lang(th) .site.site [data-content="bungalows"] .room-detail > .tour .tour-kicker { letter-spacing: 0 }
html .site.site [data-content="bungalows"] .room-detail > .tour .tour-card h3 {
  display: block; font-size: 36px; line-height: 1.15; margin: 0 0 18px; text-align: center;
}
html .site.site [data-content="bungalows"] .room-detail > .tour .native-tour-buttons {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px;
}
html .site.site [data-content="bungalows"] .room-detail > .tour .native-tour-launch,
html .site.site [data-content="bungalows"] .room-detail > .tour .availability-launch {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  box-sizing: border-box; width: auto; height: 44px; min-height: 44px; margin: 0; padding: 0 18px;
  font-size: 15px; line-height: 1; letter-spacing: .01em; white-space: nowrap;
}
html .site.site [data-content="bungalows"] .room-detail > .tour .native-tour-launch {
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
}
html .site.site [data-content="bungalows"] .room-detail > .tour .availability-launch {
  background: var(--paper); color: var(--ink); border: 1px solid rgba(52,47,41,.32);
}
html .site.site [data-content="bungalows"] .room-detail > .tour .availability-launch:hover:not(:disabled) {
  background: var(--ink); color: var(--paper);
}
html .site.site [data-content="bungalows"] .room-detail > .tour .availability-launch:disabled { border-style: dashed; color: #5d5448 }
html .site.site [data-content="bungalows"] .room-detail > .tour .native-tour-status { margin: 12px 0 0 }

@media (max-width: 540px) {
  html .site.site [data-content="bungalows"] .room-detail > .tour {
    height: clamp(380px, 58svh, 480px); min-height: 0; padding: 20px 16px; background: var(--sand);
  }
  html .site.site [data-content="bungalows"] .room-detail > .tour > img { display: block }
  html .site.site [data-content="bungalows"] .room-detail > .tour::before { display: block }
  html .site.site [data-content="bungalows"] .room-detail > .tour .tour-card {
    width: 100%; min-width: 0; max-width: 360px; padding: 22px 20px;
  }
  html .site.site [data-content="bungalows"] .room-detail > .tour .tour-card h3 { font-size: 30px; margin-bottom: 16px }
  html .site.site [data-content="bungalows"] .room-detail > .tour .native-tour-buttons { flex-direction: column }
  html .site.site [data-content="bungalows"] .room-detail > .tour .native-tour-launch,
  html .site.site [data-content="bungalows"] .room-detail > .tour .availability-launch { width: 100%; white-space: normal }
}

/* ==== Bungalows page: compare cards (26 Sep 2026) ================== */
/* Centred heading block, then one card per unit: photo, name, guests,
   features, starting price, season, link to the unit's section.
   Three columns on a computer, two on a tablet, one on a phone. */
html .site.site [data-content="bungalows"] > .introduction h1 { text-align: center; margin-inline: auto }
html .site.site [data-content="bungalows"] > .introduction { padding-bottom: 20px }
html .site.site [data-content="bungalows"] .compare { max-width: 1200px; margin: 8px auto 64px; padding: 0 32px; box-sizing: border-box }
html .site.site [data-content="bungalows"] .compare-head { max-width: 760px; margin: 0 auto 36px; text-align: center }
html .site.site [data-content="bungalows"] .compare-head h2 { font-size: 40px; line-height: 1.2; margin: 0 0 12px; text-align: center }
html .site.site [data-content="bungalows"] .compare-head p { font-size: 18px; line-height: 1.6; color: #5d5448; margin: 0; text-align: center }
html .site.site [data-content="bungalows"] .compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px }
html .site.site [data-content="bungalows"] .compare-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); margin: 0 }
html .site.site [data-content="bungalows"] .compare-card > img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover }
html .site.site [data-content="bungalows"] .compare-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 28px 30px 30px; text-align: left }
html .site.site [data-content="bungalows"] .compare-body h3 { font-size: 34px; line-height: 1.15; font-weight: 400; margin: 0 0 18px; text-align: left }
html .site.site [data-content="bungalows"] .compare-body p { text-align: left }
html .site.site [data-content="bungalows"] .compare-guests,
html .site.site [data-content="bungalows"] .compare-feat { font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0 }
html .site.site [data-content="bungalows"] .compare-body .compare-guests { margin: 0 0 6px }
html .site.site [data-content="bungalows"] .compare-price { font-size: 24px; line-height: 1.3; color: var(--ink); margin: 22px 0 0 }
html .site.site [data-content="bungalows"] .compare-season { font-size: 14px; line-height: 1.5; color: #5d5448; margin: 6px 0 0 }
html .site.site [data-content="bungalows"] .compare-body .compare-more { margin: auto 0 0; padding-top: 26px }
html .site.site [data-content="bungalows"] .compare-more .text-link { font-size: 13px; margin: 0 }
@media (max-width: 1023px) {
  html .site.site [data-content="bungalows"] .compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
}
@media (max-width: 600px) {
  html .site.site [data-content="bungalows"] .compare { padding: 0 16px; margin-bottom: 44px }
  html .site.site [data-content="bungalows"] .compare-head { margin-bottom: 24px }
  html .site.site [data-content="bungalows"] .compare-head h2 { font-size: 32px }
  html .site.site [data-content="bungalows"] .compare-head p { font-size: 17px }
  html .site.site [data-content="bungalows"] .compare-grid { grid-template-columns: 1fr; gap: 20px }
  html .site.site [data-content="bungalows"] .compare-body { padding: 22px 20px 24px }
  html .site.site [data-content="bungalows"] .compare-body h3 { font-size: 30px; margin-bottom: 14px }
  html .site.site [data-content="bungalows"] .compare-body .compare-more { padding-top: 20px }
}

/* ==== Homepage welcome: one centred block, photo below (26 Sep 2026) ==== */
/* Label, heading and Karl's welcome text centred in one narrow column
   (~570px, text ~500px, justified with a left last line), then the wide
   garden photo (G23) at the same size and crop as before. */
html .site.site [data-content="home"] .intro-center { display: block; max-width: 1200px; margin-inline: auto; text-align: center }
html .site.site [data-content="home"] .intro-center .intro-text { display: block; max-width: 570px; margin: 0 auto; text-align: center }
html .site.site [data-content="home"] .intro-center .intro-text > * { max-width: none; margin-inline: auto }
html .site.site [data-content="home"] .intro-center .eyebrow { font-size: 14px; letter-spacing: .22em; color: #5d5448; margin: 0 auto 14px; text-align: center }
html .site.site [data-content="home"] .intro-center h1 { font-size: 46px; line-height: 1.18; margin: 0 auto 22px; text-align: center; text-wrap: balance }
html .site.site [data-content="home"] .intro-center .intro-text p.intro-lead {
  max-width: 500px; margin: 0 auto; font-size: 19px; line-height: 1.75; color: #342f29;
  text-align: justify; text-align-last: left; hyphens: auto;
}
html .site.site [data-content="home"] .intro-center .intro-figure { margin: 40px 0 0; max-width: none }
html .site.site [data-content="home"] .intro-center .intro-figure img {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 60%;
}
@media (max-width: 767px) {
  html .site.site [data-content="home"] .intro-center .intro-text { max-width: none }
  html .site.site [data-content="home"] .intro-center .eyebrow { font-size: 13px; margin-bottom: 12px }
  html .site.site [data-content="home"] .intro-center h1 { font-size: 32px; margin-bottom: 18px }
  html .site.site [data-content="home"] .intro-center .intro-text p.intro-lead { max-width: none; font-size: 18px; line-height: 1.7; text-align: left; text-align-last: auto }
  html .site.site [data-content="home"] .intro-center .intro-figure { margin-top: 28px }
  html .site.site [data-content="home"] .intro-center .intro-figure img { aspect-ratio: 3 / 2 }
}

/* ==== Homepage welcome, wide centred paragraph (26 Sep 2026, v2) ====== */
/* Equal gap above the label (after the hero) and below the paragraph
   (before the photo); label, heading, paragraph and photo share one
   centre line; the paragraph is nearly as wide as the photo and every
   line is centred. */
html .site.site [data-content="home"] .intro-center { --intro-gap: 64px; padding-top: var(--intro-gap); margin-top: 0 }
html .site.site [data-content="home"] .intro-center .intro-text { max-width: 1040px }
html .site.site [data-content="home"] .intro-center .eyebrow { margin-top: 0 }
html .site.site [data-content="home"] .intro-center .intro-text h1 { max-width: 640px; margin-bottom: 28px }
@media (max-width: 767px) { html .site.site [data-content="home"] .intro-center .intro-text h1 { max-width: none; margin-bottom: 18px } }
html .site.site [data-content="home"] .intro-center .intro-text p.intro-lead {
  max-width: 1040px; text-align: center; text-align-last: center; hyphens: manual;
}
html .site.site [data-content="home"] .intro-center .intro-figure { margin-top: calc(var(--intro-gap) - 2px) }
@media (max-width: 767px) {
  html .site.site [data-content="home"] .intro-center { --intro-gap: 36px }
  html .site.site [data-content="home"] .intro-center .intro-figure { margin-top: calc(var(--intro-gap) - 3px) }
  html .site.site [data-content="home"] .intro-center .intro-text p.intro-lead { max-width: none; text-align: center; text-align-last: center }
}

/* ==== Our Garden page: title beside the photo (26 Sep 2026) ========== */
/* "Our Garden" and the subtitle sit together at the top of the text
   column, centred; Karl's two paragraphs below, a little larger and
   justified (last line left). The whole group is vertically centred
   beside the unchanged 4:3 photo. Phone: text above photo. */
html .site.site [data-content="impressions"] .tips-rows { margin-top: 64px }
html .site.site [data-content="impressions"] .tips-row { grid-template-columns: 1fr 1fr; gap: 44px; align-items: center }
html .site.site [data-content="impressions"] .garden-copy { max-width: 520px; margin-inline: auto }
html .site.site [data-content="impressions"] .garden-copy h1 {
  font-size: 48px; line-height: 1.12; font-weight: 500; margin: 0 0 8px; text-align: center;
}
html .site.site [data-content="impressions"] .garden-copy h2 {
  font-size: 30px; line-height: 1.25; margin: 0 0 30px; text-align: center;
}
html .site.site [data-content="impressions"] .garden-copy p {
  font-size: 20px; line-height: 1.75; margin: 0 0 24px; text-align: justify; text-align-last: left; hyphens: auto;
}
html .site.site [data-content="impressions"] .garden-copy p:last-child { margin-bottom: 0 }
@media (max-width: 760px) {
  html .site.site [data-content="impressions"] .tips-rows { margin-top: 36px }
  html .site.site [data-content="impressions"] .tips-row { grid-template-columns: 1fr; gap: 28px }
  html .site.site [data-content="impressions"] .garden-copy { max-width: none }
  html .site.site [data-content="impressions"] .garden-copy h1 { font-size: 38px }
  html .site.site [data-content="impressions"] .garden-copy h2 { font-size: 24px; margin-bottom: 22px }
  html .site.site [data-content="impressions"] .garden-copy p { font-size: 18px; margin-bottom: 18px; text-align: left; text-align-last: auto }
}

/* ==== Bungalows page: "Book now" under each price table (26 Sep 2026) == */
html .site.site [data-content="bungalows"] .room-book { margin: 32px 0 8px; text-align: center }
html .site.site [data-content="bungalows"] .room-book-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 240px; min-height: 52px; padding: 0 36px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); font: inherit; font-size: 17px; letter-spacing: .02em; cursor: pointer;
}
html .site.site [data-content="bungalows"] .room-book-btn:hover { background: #51483e }
html .site.site [data-content="bungalows"] .room-book-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.enquiry-note { font-family: 'Jost', sans-serif; font-size: 13px; line-height: 1.5; color: #5d5448; margin: 14px 0 0 }
html:lang(th) .enquiry-note { font-family: 'Noto Sans Thai', 'Jost', sans-serif }
@media (max-width: 540px) {
  html .site.site [data-content="bungalows"] .room-book { margin: 24px 16px 4px }
  html .site.site [data-content="bungalows"] .room-book-btn { width: 100%; min-width: 0 }
}

/* ==== Bungalow 4: show the drone photo behind the 360° panel (26 Sep 2026) ==== */
html .site.site #four .tour { background: var(--sand) }
html .site.site #four .tour > img { visibility: visible }

/* ==== "Book now": same gap above (to the price box) and below (to the line) ==== */
html .site.site [data-content="bungalows"] .room-detail { padding-bottom: 72px }
html .site.site [data-content="bungalows"] .room-detail > .room-info-layout { padding-bottom: 0 }
html .site.site [data-content="bungalows"] .room-book { margin: 72px 0 0 }
@media (max-width: 760px) {
  html .site.site [data-content="bungalows"] .room-detail { padding-bottom: 40px }
  html .site.site [data-content="bungalows"] .room-book { margin: 40px 16px 0 }
}

/* Home: garden photos same width as intro photo above */
html .site.site [data-content="home"] .garden-grid { padding-left: 0; padding-right: 0 }

/* Home: Meet your hosts */
html .site.site [data-content="home"] .hosts .loc-text .hosts-sign { margin-top: 18px; font-style: normal; text-align: center; justify-self: center }
html .site.site .hosts .hosts-sign em { font-family: inherit; font-size: 1.15em }
html .site.site .hosts .home-hosts { width: 100%; height: auto; display: block }

/* Legal pages: draft notice */
html .site.site .legal-copy .legal-draft { background: #f6e7c8; border-left: 4px solid #b07a2a; padding: 12px 16px; margin: 0 0 28px }

/* Booking guidance can be dismissed without choosing dates. */
.site .booking-status:not([hidden]) { padding-right: 58px; }
.site .booking-status-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font: 26px/1 sans-serif; cursor: pointer; }
.site .booking-status-close:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }

/* Activity titles on the home page stand out clearly from the body text. */
.site [data-content="home"] .act-text h3 { font-size: 34px; font-weight: 500; line-height: 1.2; margin: 0 0 16px; color: var(--ink, #2a241e) }
@media (max-width: 767px) {
  .site [data-content="home"] .act-text h3 { font-size: 31px; line-height: 1.2; margin-bottom: 14px }
}

/* Restaurant photo on phones: the wide photo is cropped to a tall frame, so
   frame the building (right of centre) instead of the pole and wires. */
@media (max-width: 767px) {
  .site .hero > img[src*="rest-v3-01"] { object-position: 72% 50% }
}

/* Tips hero on phones: frame the guest facing the camera at the bow. */
@media (max-width: 767px) {
  .site .hero > img[src*="tips-hero"] { object-position: 78% 50% }
}

/* Full-photo landscape viewer: use the available screen without cropping.
   Only the photo dialog changes; tour dialogs and portrait layouts stay intact. */
@media (orientation: landscape) and (max-width: 1366px) {
  #photo-dialog {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
  }
  #photo-dialog .lv-photo-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    box-sizing: border-box;
  }
  #photo-dialog .lv-photo-stage img { object-fit: contain }
  #photo-dialog .lv-dialog-header {
    position: absolute;
    top: env(safe-area-inset-top, 0px);
    left: env(safe-area-inset-left, 0px);
    right: env(safe-area-inset-right, 0px);
    height: 44px;
    padding: 4px 8px;
    box-sizing: content-box;
    border: 0;
    z-index: 2;
    pointer-events: none;
  }
  #photo-dialog .lv-dialog-header p,
  #photo-dialog .lv-dialog-close,
  #photo-dialog .lv-photo-caption span {
    background: #201f1bcc;
    border-radius: 8px;
    color: #faf7f1;
  }
  #photo-dialog .lv-dialog-header p { padding: 6px 10px; font-size: 13px }
  #photo-dialog .lv-dialog-close {
    pointer-events: auto;
    min-width: 70px;
    min-height: 44px;
    padding: 8px 12px;
  }
  #photo-dialog .lv-photo-step {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #201f1bcc;
    color: #faf7f1;
  }
  #photo-dialog .lv-photo-step[data-step="-1"] { left: max(8px, env(safe-area-inset-left, 0px)) }
  #photo-dialog .lv-photo-step[data-step="1"] { right: max(8px, env(safe-area-inset-right, 0px)) }
  #photo-dialog .lv-photo-caption {
    position: absolute;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    height: auto;
    padding: 0;
    z-index: 2;
    pointer-events: none;
  }
  #photo-dialog .lv-photo-caption span { padding: 5px 10px }
}

/* ==== 30 Sep: Tripadvisor logo keeps its shape ======================
   On a 320px phone the long German "117 Gästebewertungen" squeezed the
   logo to 7px wide. The logo no longer shrinks; the rating text does. */
html .site.site .review-brand { flex: 0 0 auto }
html .site.site .review-brand img { flex: none; object-fit: contain }
html .site.site .review-band .review-count { min-width: 0 }
@media (max-width: 359px) {
  html .site.site .property-strip.review-band { gap: 6px; padding-left: 10px; padding-right: 10px }
  html .site.site .review-brand img { height: 26px }
  html .site.site .review-band .review-count { font-size: 12px; letter-spacing: 0 }
}

/* ==== 30 Sep: phones held sideways (short screens) ==================
   The pinned bar covered up to 42% of the screen. It now works like the
   upright phone: "Dates | guests +" opens the fields, the rating row is
   left behind, and once pinned the page menu and the dates button share
   one slim row. Tablets and computers are not affected. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
  html .site.site .booking-toggle {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; grid-column: 1 / -1; min-height: 40px; font-size: 15px
  }
  html .site.site .booking:not(.expanded) label,
  html .site.site .booking:not(.expanded) .enquire { display: none }
  html .site.site .booking { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px }
  html .site.site .booking.expanded { row-gap: 8px; padding-bottom: 12px }
  html .site.site .booking.expanded .enquire { grid-column: 1 / -1 }

  html .site.site .sticky-reservation.is-pinned { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--paper) }
  html .site.site .sticky-reservation.is-pinned .property-strip { display: none }
  html .site.site .sticky-reservation.is-pinned .mobile-nav.mnav.in-bar {
    display: block; position: relative; flex: 1 1 40%; width: auto; margin: 0; padding: 0;
    border: 0; border-right: 1px solid #cfbda2; border-bottom: 1px solid #cfbda2;
    background: var(--paper); z-index: 60
  }
  html .site.site .sticky-reservation.is-pinned .booking {
    flex: 1 1 55%; width: auto; margin: 0; padding: 2px 16px;
    border-bottom: 1px solid #cfbda2
  }
  html .site.site .sticky-reservation.is-pinned .booking.expanded { flex-basis: 100%; padding-bottom: 12px }
  html .site.site .sticky-reservation.is-pinned .mnav-btn {
    display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%;
    min-height: 40px; background: none; border: 0; padding: 0 16px; font: inherit;
    font-family: 'Jost', sans-serif; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer
  }
  html .site.site .sticky-reservation.is-pinned .mnav-btn svg { width: 12px; height: 8px; flex: none; transition: transform .25s }
  html .site.site .sticky-reservation.is-pinned .mnav.open .mnav-btn svg { transform: rotate(180deg) }
  html .site.site .sticky-reservation.is-pinned .mnav-list {
    position: absolute; left: 0; right: -1px; top: 100%; min-width: 240px;
    max-height: calc(100svh - 60px); overflow: auto;
    background: #fffaf3; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(52,47,41,.18)
  }
  html .site.site .sticky-reservation.is-pinned .mnav-list[hidden] { display: none }
  html .site.site .sticky-reservation.is-pinned .mnav-list a {
    display: flex; justify-content: space-between; align-items: center; padding: 11px 18px;
    font-family: 'Jost', sans-serif; font-size: 15px; color: var(--ink); text-decoration: none;
    border-top: 1px solid var(--sand)
  }
  html .site.site .sticky-reservation.is-pinned .mnav-list a:first-child { border-top: 0 }
  html .site.site .sticky-reservation.is-pinned .mnav-list a.on { background: var(--sand) }
  :lang(th) .site .sticky-reservation.is-pinned .mnav-btn,
  :lang(th) .site .sticky-reservation.is-pinned .mnav-list a { font-family: 'Noto Sans Thai', 'Jost', sans-serif }
}

/* ==== Tips & Links page: title beside the photo, like Our Garden (30 Sep 2026) ==== */
html .site.site [data-content="tips"] .tips-rows { margin-top: 64px }
html .site.site [data-content="tips"] .garden-copy { max-width: 520px; margin-inline: auto }
html .site.site [data-content="tips"] .garden-copy h1 {
  font-size: 48px; line-height: 1.12; font-weight: 500; margin: 0 0 30px; text-align: center;
}
html .site.site [data-content="tips"] .garden-copy p {
  font-size: 20px; line-height: 1.75; margin: 0; text-align: justify; text-align-last: left; hyphens: auto;
}
@media (max-width: 760px) {
  html .site.site [data-content="tips"] .tips-rows { margin-top: 36px }
  html .site.site [data-content="tips"] .garden-copy { max-width: none }
  html .site.site [data-content="tips"] .garden-copy h1 { font-size: 38px; margin-bottom: 22px }
  html .site.site [data-content="tips"] .garden-copy p { font-size: 18px; text-align: left; text-align-last: auto }
}

/* ==== 30 Sep: header WhatsApp link — readable, easy to tap, number on one line ==== */
html .site.site .masthead-whatsapp {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px;
  font-size: 13px; padding: 2px 0; white-space: nowrap
}
html .site.site .masthead-whatsapp .wa-number { white-space: nowrap }
html .site.site .masthead .language { white-space: nowrap }
@media (max-width: 540px) {
  html .site.site .masthead-whatsapp { font-size: 13px; min-height: 32px }
}

/* ==== 30 Sep: keyboard focus ring visible on the video header ==== */
html .site.site .masthead a:focus-visible,
html .site.site nav a:focus-visible,
html .site.site .hero button:focus-visible,
html .site.site .sticky-reservation:not(.is-pinned) .review-band a:focus-visible {
  outline: 2px solid #fffaf3; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(20,18,16,.6)
}
html .site.site.nav-pinned nav a:focus-visible { outline-color: var(--ink); box-shadow: none }

/* ==== 30 Sep: season dates in the phone price cards reach 4.5:1 contrast ==== */
@media (max-width: 540px) {
  html .site.site .room-price-wrap td:nth-child(2),
  html .site.site .original-copy td:nth-child(2):not(:last-child) { color: #5d5448 }
}
/* medium screens: the header column is narrow, so only "WhatsApp" is shown
   there (the full number is in the footer and on the contact page) */
@media (min-width: 541px) and (max-width: 1100px) {
  html .site.site .masthead-whatsapp .wa-number { display: none }
}