/* Jirung Wellness v4 — "Kram & Kham" (indigo and gold)
   Indigo of mo hom cloth, gold of Lanna lai kham, on cream paper.
   Rules: research/V4-PROPOSAL.md. v3 stylesheet kept in tools/styles.v3.css. */

:root {
  /* Colour (OKLCH-checked; contrast on paper in brackets) */
  --paper: #FBF9F6;                 /* page */
  --paper-2: #F1ECE3;               /* photo slot while loading */
  --ink: #1B2440;                   /* text (14.6:1) */
  --ink-body: rgb(27 36 64 / 0.84); /* running text (8.6:1) */
  --kram: #2C3F6E;                  /* indigo: headings, numerals, interaction (9.8:1) */
  --kram-soft: #485474;             /* captions and metadata (7.1:1, readable for older eyes) */
  --kham: #A88A52;                  /* gold leaf: link rules, active marks (3.1:1) */
  --champagne: #C4B49F;             /* logo gold family */
  --rule: rgb(27 36 64 / 0.2);      /* hairlines */

  /* One modular scale for type and space: perfect fourth (1.333) from 18px */
  --s-2: 0.475rem;   /* 7.6: micro steps inside a group (label to value, line to line in a list) */
  --s-1: 0.633rem;   /* 10.1 */
  --s0: 0.844rem;   /* 13.5 */
  --s1: 1.125rem;   /* 18 */
  --s2: 1.5rem;     /* 24 */
  --s3: 2rem;       /* 32 */
  --s4: 2.667rem;   /* 42.7 */
  --s5: 3.556rem;   /* 56.9 */
  --s6: 4.741rem;   /* 75.9 */
  --s7: 6.32rem;    /* 101.1 */
  --s8: 8.427rem;   /* 134.8 */
  --s9: 11.237rem;  /* 179.8 */

  --serif: "Cormorant Garamond", "Trirong", "Times New Roman", serif;
  /* Type roles. Serif: titles and quotes only. Sans UI: subheadings, names, information, labels, nav, buttons
     (Thai in loopless IBM Plex Sans Thai). Sans: body text (Thai in looped IBM Plex Sans Thai Looped, the more
     readable form for paragraphs). Research: research/V6-TYPE-PROPOSAL.md */
  --sans: "Satoshi", "IBM Plex Sans Thai Looped", "Helvetica Neue", Arial, sans-serif;
  --sans-ui: "Satoshi", "IBM Plex Sans Thai", "Helvetica Neue", Arial, sans-serif;

  /* 9-unit canon grid (Van de Graaf / Tschichold): text sits inner-left, outer margin wider */
  --gutter: clamp(var(--s1), 4.5vw, var(--s6));
  --gap: clamp(var(--s1), 2.2vw, var(--s3));
  --max: 1440px;
  --section: clamp(var(--s7), 10vw, var(--s8));  /* between sections: 101 → 135px; groups inside stay tight */
  --header-h: var(--s6);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  color-scheme: light;
}
/* Thai page: Trirong sets both scripts in serif roles so mixed lines keep one x-height */
html:lang(th) { --serif: "Trirong", "Cormorant Garamond", serif; }
/* English page: Latin faces only, no Thai font is ever requested */
html:lang(en) { --serif: "Cormorant Garamond", "Times New Roman", serif; --sans: "Satoshi", "Helvetica Neue", Arial, sans-serif; --sans-ui: "Satoshi", "Helvetica Neue", Arial, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--s1)); }
/* Nothing may pan the page sideways. iPhones ignore overflow on <body> and let the page pan when any element
   sticks out past the screen, even by a fraction of a pixel (WebKit bug 185710, closed as WONTFIX), as the
   full-bleed class cards on Practices do. So the page's own wrappers clip sideways overflow; clip (not hidden)
   makes no scroll container, so the sticky header and position: sticky inside still work. */
html, body, main, .site-footer { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--s1);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
body:lang(th) { line-height: 1.65; }   /* Thai is a tall script: about 1.6 is the floor before marks crowd */

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
p, dl, dd { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; text-wrap: balance; color: var(--kram); }
p { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 1.5px solid var(--kram); outline-offset: 4px; }

/* ใ ไ โ after a letter whose top mark would touch their curl (build.py, thai_marks; tests/thai-marks.js) */
.tk { margin-inline-start: 0.1em; }
.tk--far { margin-inline-start: 0.15em; }   /* after ์ */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gutter); top: -4rem; z-index: 100; background: var(--paper); padding: var(--s0) 0; }
.skip:focus { top: var(--s0); }

/* ---------- Type roles (all sizes from the scale; Thai one step down for display) ---------- */

.display {
  font-family: var(--serif);
  font-size: clamp(var(--s4), 1.2rem + 5.6vw, var(--s7));
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.title {
  font-family: var(--serif);
  font-size: clamp(var(--s3), 1.4rem + 2.4vw, var(--s5));   /* 32px on a phone, as premium resort sites set section heads (22-36px); 57px on desktop */
  line-height: 1.08;
  letter-spacing: -0.012em;
}
.subtitle {
  font-family: var(--sans-ui);
  font-weight: 500;
  font-size: var(--s2);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink);
}
:lang(th) .display, .display:lang(th) { font-size: clamp(var(--s4), 1.6rem + 3.6vw, var(--s6)); line-height: 1.3; letter-spacing: 0; }
:lang(th) .title, .title:lang(th) { font-size: clamp(var(--s3), 1.5rem + 2.2vw, var(--s5)); line-height: 1.32; letter-spacing: 0; }   /* Thai titles read lighter than Latin at one size: one step up */
:lang(th) .subtitle, .subtitle:lang(th) { line-height: 1.5; letter-spacing: 0; }

.lede { font-size: clamp(var(--s1), 0.9rem + 0.6vw, var(--s2)); line-height: 1.45; color: var(--ink-body); max-width: 34em; }
.lede:lang(th), :lang(th) .lede { line-height: 1.6; }
.body { color: var(--ink-body); max-width: 31em; }   /* about 75 characters at most */

.caption {
  font-family: var(--sans-ui);
  font-size: var(--s0);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--kram-soft);
  font-variant-numeric: tabular-nums;
}
.caption:lang(th) { letter-spacing: 0.01em; text-transform: none; font-size: var(--s1); font-weight: 500; }

.week__time, .timeline time, .contact__value { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Lines ---------- */

.rule {
  border: 0;
  height: 1px;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto;
  background: var(--rule);
  transform: scaleY(0.5);
}
@media (min-resolution: 2dppx) { .rule { height: 0.5px; transform: none; } }

.hl { position: relative; }
.hl::before, .hl--end::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleY(0.5);
}
.hl::before { top: 0; transform-origin: top; }
.hl--end::after { bottom: 0; transform-origin: bottom; }

/* The wave from under the lotus logo, in gold leaf (tools/wave.py). Used once: the pause screen.
   main.js paints it on with GSAP along its own strokes (tools/wave_paths.py); without JS it simply shows. */
.wave { display: block; width: clamp(11rem, 19vw, 17rem); height: auto; aspect-ratio: 1575 / 400; overflow: visible; }

/* ---------- Text buttons ---------- */

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s0);
  min-height: 44px;
  padding: 0;
  font-family: var(--sans-ui);
  font-size: var(--s1);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  max-width: 100%;
}
.link:lang(th) { letter-spacing: 0.01em; text-transform: none; font-size: var(--s1); }
.link:focus-visible { outline-offset: 2px; }
.link--quiet { color: var(--ink-body); }

.actions { display: flex; flex-wrap: wrap; gap: 0.25rem var(--s3); }

/* ---------- Layout: 9-unit canon grid ---------- */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
/* Canon rhythm: less space above a block than below it (top : bottom = 2 : 3) */
.section { padding-top: calc(var(--section) * 0.4); padding-bottom: calc(var(--section) * 0.6); }
.grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gap); }

.media { background: var(--paper-2); overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; }

.head { display: grid; gap: var(--s0); margin-bottom: clamp(var(--s4), 4vw, var(--s5)); max-width: 40rem; }
.head--split { max-width: none; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.head--split > :first-child { grid-column: 1 / span 4; }
.head--split > :last-child { grid-column: 6 / -1; }
@media (max-width: 899px) {
  .head--split > :first-child, .head--split > :last-child { grid-column: 1 / -1; }
  .head--split > :last-child { margin-top: var(--s1); }
}

/* ---------- Header ---------- */

.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); }
.site-header::after {
  content: "";
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleY(0.5);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.site-header.is-scrolled::after { opacity: 1; }
.header__bar { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2); }
.brand { display: inline-flex; align-items: center; gap: var(--s0); justify-self: start; min-height: 44px; }
.brand img { width: 32px; height: 32px; }
.brand__name { font-family: "Cormorant Garamond", serif; font-size: var(--s2); font-weight: 400; line-height: 1; white-space: nowrap; color: var(--ink); }

.nav { display: flex; gap: clamp(var(--s1), 2.4vw, var(--s4)); }
.nav a {
  font-family: var(--sans-ui);
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--s0);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav a:lang(th) { font-size: var(--s1); letter-spacing: 0; text-transform: none; font-weight: 500; }

.header__end { justify-self: end; display: flex; align-items: center; gap: var(--s3); }

.lang { font-family: var(--sans-ui); display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--s1); }
.lang a, .lang span[aria-current] { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.lang a { color: var(--kram-soft); }
.lang [aria-current] { color: var(--ink); }
/* current language: a short gold underline */
.lang [aria-current]::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0.6rem;
  width: 1.1rem; height: 1px;
  transform: translateX(-50%);
  background: var(--kham);
}
.lang__sep { color: var(--rule); }
.lang :lang(en) { letter-spacing: 0.08em; font-size: var(--s0); font-weight: 500; }

.menu-btn {
  display: none;
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  min-width: 44px;
  justify-content: flex-end;
  font: 500 var(--s0)/1 "Satoshi", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.menu-btn:lang(th) { font: 500 var(--s1)/1 var(--sans-ui); letter-spacing: 0; text-transform: none; }

.mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: var(--paper); padding: var(--s3) var(--gutter) var(--s5); overflow-y: auto; }
.mobile-menu a { display: block; font-family: var(--serif); font-weight: 300; font-size: var(--s3); line-height: 1.3; padding: var(--s1) 0; color: var(--kram); }
.mobile-menu a:lang(th) { line-height: 1.5; }
/* Opening: the paper fades in, then each link rises 8px in turn, one whole line at a time (never per letter: Thai marks would come apart).
   Closing is quicker and all at once. Browsers without @starting-style, and reduced motion, open and close instantly. */
.mobile-menu { opacity: 1; transition: opacity 0.25s var(--ease), display 0.25s allow-discrete; }
.mobile-menu[hidden] { display: none; opacity: 0; transition-duration: 0.15s; }
.mobile-menu a { transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); transition-delay: calc(0.06s + var(--i, 0) * 0.04s); }
.mobile-menu[hidden] a { opacity: 0; transform: translateY(8px); transition-duration: 0.15s; transition-delay: 0s; }
@starting-style {
  .mobile-menu { opacity: 0; }
  .mobile-menu a { opacity: 0; transform: translateY(8px); }
}

@media (max-width: 1099px) {
  .nav, .header__end .button, .header__phone { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .header__bar { grid-template-columns: 1fr auto; }
}

/* ---------- 1. Hero ---------- */

.hero { padding-top: clamp(var(--s4), 6vw, var(--s7)); padding-bottom: calc(var(--section) * 0.6); }
.hero__copy { grid-column: 1 / span 7; display: grid; gap: var(--s3); align-content: end; }
.hero__copy .display .line { display: block; }

.hero__media { grid-column: 1 / -1; margin-top: clamp(var(--s4), 6vw, var(--s6)); aspect-ratio: 2.2 / 1; }
.hero__media img { object-position: 50% 58%; }

@media (max-width: 1199px) { .hero__copy { grid-column: 1 / -1; } }
@media (max-width: 899px) {
  .hero__media { aspect-ratio: 4 / 5; margin-top: var(--s4); }
  .hero__media img { object-position: 62% 50%; }
}

/* ---------- 2. The pause (Hara: emptiness invites meaning) ---------- */

.pause {
  min-height: calc(100svh - var(--header-h));
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s7) var(--gutter);
  text-align: center;
}
.pause__line { text-wrap: balance; font-family: var(--serif); font-weight: 300; font-size: clamp(var(--s4), 1.4rem + 3.6vw, var(--s6)); line-height: 1.4; color: var(--kram); }

/* ---------- Visits: three photographs, open captions, varied proportions ---------- */
.visits { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--s5) var(--gap); align-items: start; }
.visit { position: relative; display: grid; gap: var(--s-2); align-content: start; }
.visit:nth-child(1) { grid-column: 1 / span 3; }
.visit:nth-child(2) { grid-column: 4 / span 3; margin-top: var(--s6); }
.visit:nth-child(3) { grid-column: 7 / span 3; margin-top: var(--s3); }
.visit__media { aspect-ratio: 4 / 5; margin-bottom: var(--s1); }
.visit:nth-child(2) .visit__media { aspect-ratio: 3 / 4; }
.visit:nth-child(2) .visit__media img { object-position: 65% 50%; }
.visit:nth-child(3) .visit__media { aspect-ratio: 1 / 1; }
.visit .body { margin-top: 0; }
.visit .link { justify-self: start; margin-top: var(--s0); }
@media (max-width: 899px) {
  .visits { row-gap: var(--s6); }
  .visit:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
  .visit:nth-child(n) .visit__media { aspect-ratio: 4 / 3; }
}

/* ---------- 4. Practices: three framed photos with air around them ---------- */

.practices__grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(var(--s4), 6vw, var(--s7)); }
.practice { display: grid; gap: var(--s1); align-content: start; }
.practice:nth-child(1) { grid-column: 1 / span 4; }
.practice:nth-child(2) { grid-column: 6 / span 4; margin-top: clamp(0rem, 9vw, var(--s8)); }
.practice:nth-child(3) { grid-column: 3 / span 4; }
.practice .media { aspect-ratio: 4 / 5; }
.practice figcaption { display: grid; grid-template-columns: var(--s4) 1fr; row-gap: 0.25rem; }
.practice figcaption .caption { grid-row: span 2; padding-top: 0.5rem; }
.practice__teacher { font-size: var(--s0); color: var(--kram-soft); }
.practice__teacher:lang(th), :lang(th) .practice__teacher { font-size: var(--s1); }
.practices__more { margin-top: clamp(var(--s4), 6vw, var(--s6)); font-family: var(--serif); font-size: var(--s2); line-height: 1.5; color: var(--kram-soft); max-width: 34em; }
@media (max-width: 599px) {
  .practice:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
}

/* ---------- 5. This week ---------- */

.week__table { font-variant-numeric: tabular-nums; }
.week__table th { text-align: left; font-weight: 500; padding: 0 var(--s1) var(--s1) 0; }
.week__table td { padding: var(--s2) var(--s1) var(--s2) 0; vertical-align: baseline; }
.week__table tbody td { border-top: 0.5px solid var(--rule); }
.week__table tbody tr:last-child td { border-bottom: 0.5px solid var(--rule); }
.week__table td:last-child, .week__table th:last-child { text-align: right; padding-right: 0; }
.week__day { color: var(--ink-body); width: 16%; }
.week__time { font-family: var(--sans-ui); font-size: var(--s1); font-weight: 500; color: var(--kram); width: 12%; }
.week__class { font-family: var(--sans-ui); font-size: var(--s1); font-weight: 500; color: var(--ink); line-height: 1.4; }
.week__class:lang(th), :lang(th) .week__class { line-height: 1.5; }
.week__who, .week__len { color: var(--ink-body); }
.week__note { margin-top: var(--s3); color: var(--kram-soft); }
.week__mday { display: none; }

@media (max-width: 767px) {
  .week__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .week__table tbody tr {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto;
    grid-template-areas: "time class class" "time meta go";
    column-gap: var(--s1);
    row-gap: 0.25rem;
    padding: var(--s2) 0;
    border-top: 0.5px solid var(--rule);
  }
  .week__table tbody tr:last-child { border-bottom: 0.5px solid var(--rule); }
  .week__table td, .week__table tbody td, .week__table tbody tr:last-child td { padding: 0; width: auto; border: 0; }
  .week__time { grid-area: time; }
  .week__class { grid-area: class; }
  .week__day, .week__len { display: none; }
  .week__who { grid-area: meta; }
  .week__go { grid-area: go; align-self: center; }
  .week__who .week__mday { display: inline; }
}

/* ---------- 6. Wellness Day: the largest framed photo ---------- */

.day { padding-top: calc(var(--section) * 0.4); }
.day__media { aspect-ratio: 21 / 9; }
.day__media img { object-position: 50% 45%; }
@media (max-width: 899px) { .day__media { aspect-ratio: 4 / 3; } }
.day__body { padding-top: clamp(var(--s4), 6vw, var(--s7)); }
.day__intro { grid-column: 1 / span 4; display: grid; gap: var(--s2); align-content: start; }
.day__plan { grid-column: 6 / -1; }
.timeline li { display: grid; grid-template-columns: var(--s6) 1fr; gap: var(--s1); padding: var(--s1) 0; align-items: baseline; }
.timeline time { font-family: var(--sans-ui); font-size: var(--s1); font-weight: 500; color: var(--kram); }
.timeline span { color: var(--ink-body); }
@media (max-width: 899px) {
  .day__intro, .day__plan { grid-column: 1 / -1; }
  .day__plan { margin-top: var(--s4); }
}

/* ---------- The grounds film: the home page opens on it ---------- */
/* Edge to edge, filling the screen between the header and (on phones) the action bar, as the reference resorts do
   (research/video/placement). The words follow below the film, never over it. Its first frame sits underneath as a
   real image, so the screen paints at once; the video fades in over it once it plays. Controls sit on the film in
   translucent indigo, square like the button. */
.hero.hero--film { padding-top: 0; }   /* outranks the later .hero padding rules */
.film { position: relative; height: calc(100svh - var(--header-h)); min-height: 18rem; background: var(--paper-2); overflow: hidden; }
@media (max-width: 899px) { .film { height: calc(100svh - var(--header-h) - 56px - env(safe-area-inset-bottom)); } }
.film__still, .film__still img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film video { display: block; }
.film.is-enhanced video { opacity: 0; transition: opacity 0.6s var(--ease); }
.film.is-enhanced.has-frame video { opacity: 1; }
.hero--film .hero__copy { margin-top: clamp(var(--s4), 6vw, var(--s6)); }
.film__controls { position: absolute; left: var(--gutter); bottom: var(--s2); display: flex; gap: var(--s-2); }
.film__controls[hidden] { display: none; }
.film__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
  min-width: 44px; min-height: 44px; padding: 0 var(--s-1); border: 0; cursor: pointer;
  background: rgb(27 36 64 / 0.55); color: var(--paper);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--sans-ui); font-size: var(--s1); font-weight: 500; line-height: 1.2;
  transition: background-color 0.3s var(--ease);
}
.film__btn--sound { padding-inline: var(--s0); }
.film__btn:focus-visible { outline: 1.5px solid var(--paper); outline-offset: 3px; }
.film:not(.is-playing) [data-film-play] svg:last-child,
.film.is-playing [data-film-play] svg:first-child { display: none; }

/* ---------- 7. The place ---------- */

.place__media { grid-column: 1 / span 5; aspect-ratio: 4 / 5; position: relative; }
.place__text { grid-column: 7 / -1; display: grid; gap: var(--s1); align-content: start; }
.place__list li { padding: var(--s0) 0; font-family: var(--sans-ui); font-size: var(--s2); font-weight: 500; line-height: 1.35; color: var(--ink); }
.place__list:lang(th) li, :lang(th) .place__list li { line-height: 1.5; }
/* Home: one grounds photograph beside the unruled place links. */
.place__list li:has(> a) { padding: 0; }
.place__list a { display: block; padding: var(--s0) 0; }
.place__media img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s var(--ease); }
.place__media img.is-active { opacity: 1; }
@media (max-width: 899px) {
  .place__media, .place__text { grid-column: 1 / -1; }
  .place__text { margin-top: var(--s4); }
}

/* ---------- 8. Care ---------- */

.care__media { grid-column: 1 / span 4; aspect-ratio: 3 / 4; }
.care__text { grid-column: 6 / span 3; display: grid; gap: var(--s2); align-content: center; }
@media (max-width: 1199px) { .care__text { grid-column: 6 / -1; } }
@media (max-width: 899px) {
  .care__media { grid-column: 1 / span 8; }
  .care__text { grid-column: 1 / -1; margin-top: var(--s4); }
}

/* ---------- Mobile action bar ---------- */

.action-bar { display: none; }
@media (max-width: 899px) {
  .action-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    background: var(--kram);
    padding: 0 var(--gutter) env(safe-area-inset-bottom);
  }
  .action-bar a { font-family: var(--sans-ui); display: flex; align-items: center; justify-content: center; min-height: 56px; font-size: var(--s0); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kram); }
  .action-bar a:lang(th) { font-size: var(--s1); letter-spacing: 0; text-transform: none; }
  .action-bar a + a { position: relative; }
  .action-bar a + a::before { content: ""; position: absolute; left: 0; top: 30%; bottom: 30%; width: 1px; background: var(--rule); transform: scaleX(0.5); }
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* Small phones: wordmark one step down so it never meets the language switch */
@media (max-width: 599px) {
  .brand__name { font-size: var(--s1); }
  .header__bar { gap: var(--s0); }
  .header__end { gap: var(--s1); }
}

/* ---------- Care prices ---------- */

.rates { margin-top: var(--s0); }
.rates__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1); align-items: baseline; padding: var(--s0) 0; }
.rates__row dt { color: var(--ink-body); }
.rates__row dt { text-wrap: balance; }
.rates__row dd { font-family: var(--sans-ui); font-size: var(--s1); font-weight: 500; line-height: 1.5; color: var(--kram); text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 520px) {
  .rates__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .rates__row dd { text-align: left; }
}

/* ---------- About ---------- */

.about__lead { grid-column: 1 / span 5; display: grid; gap: var(--s4); align-content: start; }
.about__quote { margin: 0; display: grid; gap: var(--s1); }
.about__quote p { font-family: var(--serif); font-weight: 300; font-size: var(--s4); line-height: 1.25; color: var(--kram); }
:lang(th) .about__quote p { font-size: var(--s3); line-height: 1.5; }
.about__quote .caption { text-transform: none; letter-spacing: 0.02em; font-size: var(--s0); max-width: 30em; }
:lang(th) .about__quote .caption { font-size: var(--s1); }
.about__text { grid-column: 7 / -1; display: grid; gap: var(--s2); align-content: start; }
@media (max-width: 899px) {
  .about__lead, .about__text { grid-column: 1 / -1; }
  .about__text { margin-top: var(--s4); }
}

/* ---------- Sub-pages ---------- */

/* Page hero: same as the home hero, but the headline may wrap and the photo is a little shorter */
.hero--page .hero__copy { grid-column: 1 / span 6; }
.hero--page .hero__media { aspect-ratio: 21 / 9; }
.hero__price { font-family: var(--sans-ui); font-size: var(--s1); font-weight: 500; line-height: 1.4; color: var(--kram); font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 1199px) { .hero--page .hero__copy { grid-column: 1 / -1; } }
@media (max-width: 899px) { .hero--page .hero__media { aspect-ratio: 4 / 3; } }

.section-link { margin-top: clamp(var(--s4), 6vw, var(--s6)); }
.section-link--note { display: grid; gap: var(--s2); justify-items: start; }

/* Split: one photo beside one block of text, alternating sides down the page */
.splits { display: grid; row-gap: clamp(var(--s6), 10vw, var(--s9)); }
.split { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.split__media { grid-column: 1 / span 4; aspect-ratio: 4 / 5; }
.split__media--3-4 { aspect-ratio: 3 / 4; }
.split__media--3-2 { aspect-ratio: 3 / 2; }
.split__text { grid-column: 6 / -1; display: grid; gap: var(--s1); align-content: start; }
.split--flip .split__media { grid-column: 6 / -1; grid-row: 1; }
.split--flip .split__text { grid-column: 1 / span 4; grid-row: 1; }
@media (max-width: 899px) {
  .split .split__media, .split .split__text { grid-column: 1 / -1; grid-row: auto; }
  .split .split__text { margin-top: var(--s4); }
}

/* Pairs: open text groups with a sans name and body description. */
.pairs { margin-top: var(--s0); display: grid; gap: var(--s2); }
.pairs__row { display: grid; gap: var(--s-2); align-content: start; }
.pairs__row dt { font-family: var(--sans-ui); font-size: var(--s2); font-weight: 500; line-height: 1.35; color: var(--ink); }
:lang(th) .pairs__row dt { line-height: 1.5; }
.pairs__row dd { color: var(--ink-body); max-width: 34em; }
.pairs__go { display: block; margin-top: var(--s0); }
.pairs--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s6); }
@media (max-width: 899px) { .pairs--wide { grid-template-columns: 1fr; } }

/* Care */
.care__quote { grid-column: 1 / span 6; display: grid; gap: var(--s3); }
@media (max-width: 1199px) { .care__quote { grid-column: 1 / -1; } }
.care__sub { margin-top: var(--s3); }

/* Rate table: Lovely Stay prices by length and room */
.rate-table { width: 100%; font-variant-numeric: lining-nums tabular-nums; }
.rate-table th, .rate-table td { text-align: right; padding: var(--s1) 0 var(--s1) var(--s1); vertical-align: baseline; }
.rate-table thead th { font-weight: 500; padding-top: 0; }
.rate-table th:first-child { text-align: left; padding-left: 0; }
.rate-table tbody th, .rate-table tbody td { border-top: 0.5px solid var(--rule); }
.rate-table tbody tr:last-child > * { border-bottom: 0.5px solid var(--rule); }
.rate-table tbody th { font-family: var(--sans-ui); font-size: var(--s2); font-weight: 400; color: var(--kram); }
.rate-table td { font-family: var(--sans-ui); font-size: var(--s2); font-weight: 400; color: var(--kram); white-space: nowrap; }
@media (max-width: 520px) {
  .rate-table tbody th, .rate-table td { font-size: var(--s1); }
  .rate-table th, .rate-table td { padding-left: var(--s0); }
}
.day__plan > .actions, .split__text > .actions, .care__quote + .actions { margin-top: var(--s1); }
/* Counts and prices inside serif text use lining figures, like the schedule */
.place__list li, .pairs__row dt, .hero__price, .rate-table, .about__quote p { font-variant-numeric: lining-nums; }

/* ---------- Page transitions ---------- */
/* Moving between pages cross-fades the content while the header and the phone action bar stay still.
   Browsers without cross-document view transitions (Firefox today) simply load the next page. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.action-bar { view-transition-name: action-bar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; animation-timing-function: var(--ease); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Care: each package (Lovely Day, Lovely Stay) is a short block under the section title */
.package { display: grid; gap: var(--s0); padding-top: var(--s2); }
.package + .package { margin-top: var(--s1); }
.package .rate-table { margin-top: var(--s0); }

/* 404: the page list sits on the text column */
.notfound__list { grid-column: 1 / span 5; }
.notfound__list li:has(> a) { padding: 0; }
.notfound__list a { display: block; padding: var(--s0) 0; }
@media (max-width: 899px) { .notfound__list { grid-column: 1 / -1; } }

/* Current-language marker follows its text line box. */
@supports (top: 1lh) {
  .lang [aria-current]::after { bottom: auto; top: calc(50% + 0.5lh - 1px); }
}
/* Thai never below body size: the Thai tagline in the footer's legal line */
.footer__legal { align-items: baseline; }

/* A split heading whose right column runs long: align both columns to the top */
.head--top { align-items: start; }

/* ---------- The one solid action ---------- */
/* Research: weak click cues cost 22% more time to find (NN/g eye tracking, flat UI study); premium hotel sites
   (Aman, Soneva, Chiva-Som, Rosewood) give their main action one solid button and keep the rest as text links.
   Square corners and no shadow keep the action clear within the flat page. */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s2);   /* premium resort buttons on phones run 35-48px tall; 48 keeps a full thumb target */
  background: var(--kram); color: var(--paper);
  font-family: var(--sans-ui); font-size: var(--s1); font-weight: 500; line-height: 1.2; letter-spacing: 0;
  white-space: nowrap; transition: background-color 0.3s var(--ease);
}
.button:focus-visible { outline-offset: 3px; }
.button--small { min-height: 44px; padding: 0 var(--s2); }
/* Each offer's own action (a room, a care package): the same square button, outlined, so equal offers carry equal
   actions and the one solid button per section keeps its weight (after Aman's "Make an enquiry" and BelArosa). */
.button:lang(en) { font-size: 1rem; letter-spacing: 0.01em; }   /* Thai keeps 18px, its floor; Latin reads the same at 16px */
.button--line { min-height: 44px; padding: 0 var(--s1); background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px currentColor; }
.button--line:active { background: var(--paper-2); }
.actions { align-items: center; gap: var(--s1) var(--s3); }
.header__phone { font-family: var(--sans-ui); font-size: var(--s1); font-weight: 500; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
@media (max-width: 1279px) { .header__phone { display: none; } }

/* Phone bar: solid indigo, icon plus label */
@media (max-width: 899px) {
  .action-bar a { color: var(--paper); gap: var(--s0); font-size: var(--s1); letter-spacing: 0; text-transform: none; }
  .action-bar a + a::before { background: rgb(251 249 246 / 0.3); }
}

/* ---------- Home interlude ---------- */
/* Home: a quiet text interlude between the photographic sections. */

/* Place: short text sits on the middle of its (landscape) photo */
.split--center { align-items: center; }

/* Care: what is included reads as plain information; prices are not smaller than it */
.includes li { padding: var(--s-2) 0; color: var(--ink-body); }

/* Practices: the classes close the page as a fourth photo row (text left, photo right, continuing the
   alternation above). Each name is a button: hover, focus or tap shows that class's photo, which
   crossfades in the frame. The chosen name is ink with the gold rule the site's links use; the rest are
   soft indigo. Without JS the first photo shows and the names read as a plain list. */
.classes { display: grid; gap: var(--s-1); margin-top: var(--s1); }
.classes__name { all: unset; box-sizing: border-box; display: inline-block; min-height: 44px; padding: var(--s-2) 0; cursor: pointer;
  font-family: var(--sans-ui); font-size: var(--s2); font-weight: 500; line-height: 1.35; color: var(--kram-soft);
  text-decoration: underline 1px transparent; text-underline-offset: 0.3em; transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease); }
:lang(th) .classes__name { line-height: 1.5; }
.classes__name[aria-pressed="true"] { color: var(--ink); text-decoration-color: currentColor; }
.classes__name:focus-visible { outline: 2px solid var(--kham); outline-offset: 4px; }
.classes + .actions { margin-top: var(--s3); }
.classes__media { position: relative; }
.split--classes .classes__media img[data-class-photo] { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s var(--ease), transform 1.2s var(--ease-arrive); transition-delay: 0s; }
.split--classes .classes__media img.is-shown { opacity: 1; }
:is(.classes__media, .class-card__media) .photo--art-class { object-position: 72% 50%; }   /* the teacher and the paint rack */
:is(.classes__media, .class-card__media) .photo--yoga { object-position: 56% 50%; }      /* her whole reach, hands to knee */
:is(.classes__media, .class-card__media) .photo--flowers { object-position: 76% 50%; }   /* the hands and the bowl */
/* Phones: the classes become a swipe row (see Swipe rows below): each class's photo with its name under it.
   The list and the shared frame are desktop only. */
.class-cards { display: none; }
.class-card { display: grid; gap: var(--s0); align-content: start; }
.class-card__media { aspect-ratio: 4 / 5; }
.class-card__name { font-family: var(--sans-ui); font-size: var(--s1); font-weight: 500; line-height: 1.5; color: var(--ink); }
@media (max-width: 899px) {
  .split--classes .classes__media, .split--classes .classes { display: none; }
  .class-cards { display: block; margin-top: var(--s2); }
  .class-cards + .actions { margin-top: var(--s3); }
}
@media (prefers-reduced-motion: reduce) { .split--classes .classes__media img[data-class-photo], .classes__name { transition: none; } }
.package__kind { font-family: var(--sans-ui); font-weight: 500; color: var(--kram-soft); }

/* About: the quote, then the story in one readable column */
.about__story { grid-column: 1 / span 6; display: grid; gap: var(--s2); }
.about__story .about__quote { margin-bottom: var(--s3); }
@media (max-width: 1199px) { .about__story { grid-column: 1 / -1; } }
.about__quote .caption { font-size: var(--s1); }

/* The pause screen stays a pause on phones without reading as an empty page */
.pause { min-height: 40svh; }
@media (max-width: 599px) { .pause { min-height: 34svh; padding-block: var(--s5); } }

/* Thai: words and fixed phrases marked by the build never break across lines */
.nw { white-space: nowrap; }

/* ---------- Round 2 of the independent review ---------- */
/* Buttons and links never sit tight under the text above them */
.body + .actions, .lede + .actions, .week__note + .actions, .includes + .actions, .rates + .actions { margin-top: var(--s1); }
.package + .actions { margin-top: var(--s3); }
/* The English line under the Thai tagline is read, not decoration */
/* Footer note at body size */
.footer__brand .practice__teacher { font-size: var(--s1); }
/* Quotes stay a quote on phones, not a full screen */
@media (max-width: 599px) { .about__quote p { font-size: var(--s3); } :lang(th) .about__quote p { font-size: var(--s2); } }
/* Room names are titles in the zig-zag rows, like places */
.split__text h3.title { margin: 0; }

/* ---------- Round 3 of the independent review ---------- */
/* Every two-column section intro aligns to the top */
.head--split { align-items: start; }
/* Wide hero crops: keep heads in frame, or show more land */
.hero__media img.pos-top { object-position: 50% 12%; }
.hero__media img.pos-low { object-position: 50% 80%; }
/* Home story: the quote leads */
#story .about__quote p { font-size: clamp(var(--s4), 2rem + 1.4vw, var(--s5)); }

/* English names on Thai pages (room names) use the English serif, matching the English site */
:lang(th) .title:lang(en), :lang(th) .display:lang(en) { font-family: "Cormorant Garamond", serif; letter-spacing: -0.012em; }

/* Home: keep the garden and water visible in wide and compact crops. */
.hero:not(.hero--page) .hero__media img { object-position: 50% 50%; }
@media (max-width: 899px) { .hero:not(.hero--page) .hero__media { aspect-ratio: 4 / 3; } .hero:not(.hero--page) .hero__media img { object-position: 50% 50%; } }

/* Bring the setting into view sooner while preserving a clear, separate text area. */
.hero { padding-top: clamp(var(--s3), 4vw, var(--s5)); }
.hero__copy { gap: var(--s1); }
.hero__copy .lede + .actions { margin-top: var(--s0); }
.hero:not(.hero--page) .actions { gap: var(--s1); }
.hero__media { margin-top: clamp(var(--s3), 4vw, var(--s4)); }
.hero:not(.hero--page) .display { font-size: clamp(var(--s4), 1.2rem + 4.2vw, var(--s6)); }
:lang(th) .hero:not(.hero--page) .display { font-size: clamp(var(--s3), 1.2rem + 3.4vw, var(--s5)); }
.hero--page .display { font-size: clamp(var(--s4), 1.2rem + 4.2vw, var(--s6)); }
:lang(th) .hero--page .display { font-size: clamp(var(--s3), 1.2rem + 3.4vw, var(--s5)); }
@media (min-width: 1100px) {
  .hero__copy, .hero--page .hero__copy { grid-column: 1 / -1; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
  .hero:not(.hero--page) h1 { grid-column: 1 / span 5; grid-row: 1 / span 2; }
  .hero:not(.hero--page) .lede, .hero:not(.hero--page) .actions { grid-column: 6 / -1; }
  .hero:not(.hero--page) .actions { gap: var(--s1); }
  .hero--page .caption { grid-column: 1 / -1; }
  .hero--page h1 { grid-column: 1 / span 5; }
  .hero--page .lede { grid-column: 6 / -1; }
}
@media (max-width: 599px) {
  .hero { padding-top: var(--s3); }
  .hero__media { margin-top: var(--s3); }
}

/* Give people and places room within their landscape photographs. */
@media (min-width: 900px) {
  .hero--practices .hero__media, .hero--care .hero__media, .hero--place .hero__media { aspect-ratio: 2 / 1; }
}

/* A wider image occasionally interrupts the regular alternating rows. */
@media (min-width: 1100px) {
  .place-gallery .split:nth-child(odd) .split__media { grid-column: 1 / span 5; }
  .place-gallery .split:nth-child(odd) .split__text { grid-column: 7 / -1; }
  .room-gallery .split:nth-child(2) .split__media { grid-column: 5 / -1; }
  .room-gallery .split:nth-child(2) .split__text { grid-column: 1 / span 3; }
}

/* The short-stay rates have their own readable spread, after the day visit. */
.short-stay { margin-top: clamp(var(--s5), 7vw, var(--s7)); row-gap: var(--s3); }
.short-stay__intro { grid-column: 1 / span 4; display: grid; gap: var(--s0); align-content: start; }
.short-stay__intro .body { margin-top: var(--s1); }
.short-stay__rates { grid-column: 6 / -1; }
.short-stay__rates .week__note { margin-top: var(--s2); }
@media (max-width: 899px) {
  .short-stay__intro, .short-stay__rates { grid-column: 1 / -1; }
}

/* The founding words lead the story, with readable paragraphs beside them. */
.about__letter { grid-column: 1 / span 4; align-content: start; display: grid; gap: var(--s3); }
.about__portrait { aspect-ratio: 4 / 5; }   /* Dr. Boonyong, who wrote the letter, above his words */
@media (max-width: 899px) { .about__portrait { max-width: 22rem; } }
.about__narrative { grid-column: 6 / -1; display: grid; gap: var(--s1); align-content: start; }
@media (max-width: 899px) {
  .about__letter, .about__narrative { grid-column: 1 / -1; }
  .about__narrative { margin-top: var(--s4); }
}

/* One shared text-link underline. Never decorate nested Thai word-break spans:
   that would paint overlapping strokes and make only parts of a phrase heavier. */
:is(.nav a, .mobile-menu a, .place__list a, .facts__value a, .footer__col li a, .header__phone, .lang a, .link > span:first-child) {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 0.3em;
  text-decoration-skip-ink: none;
  transition: text-decoration-color 0.4s var(--ease);
}
:is(.nav a, .mobile-menu a, .place__list a, .facts__value a, .footer__col li a, .header__phone, .lang a):focus-visible {
  text-decoration-color: currentColor;
}
/* Text buttons (.link) keep their underline at rest: on a phone there is no hover to reveal it, and without it a
   lone "See the place" reads as a stray label (Aman underlines these permanently on phones). */
.link > span:first-child { text-decoration-color: currentColor; text-decoration-thickness: 1px; }
:lang(th) :is(.nav a, .mobile-menu a, .place__list a, .facts__value a, .footer__col li a, .header__phone, .lang a, .link > span:first-child) {
  text-underline-position: under;
  text-underline-offset: 0.2em;
}

/* ---------- Arrival: blocks settle into place as they scroll in ---------- */
/* Native scroll-driven animations (Safari 26+, Chrome 115+, after WebKit's guide): each block's fade and rise is
   tied to its own way into the screen, so however fast a phone is flicked nothing can be skipped or left hidden, and
   nothing waits on a script. Content is plainly visible wherever the feature or motion is not wanted. Ranges end
   before a block is fully on screen, so the last block on a page always completes. The hero and header never move. */
:root { --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes arrive { from { opacity: 0; transform: translateY(1.25rem); } }
/* The large photographs down a page are unveiled from the bottom edge up while the picture settles back into its
   frame (after Soneva's and Chiva-Som's clip reveals): the photo is never faded, only uncovered. */
@keyframes unveil { from { clip-path: inset(100% 0 0 0); transform: scale(1.06); } to { clip-path: inset(0 0 0 0); transform: scale(1); } }
@keyframes settle { from { transform: scale(1.05); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    :is(.section .head, .visit, .split__text, .place__text, .about__quote, .about__narrative, .care__quote, .package, .package-card, .why-card,
        .short-stay__intro, .short-stay__rates, .pairs, .contact__main, .class-card, .gallery li) {
      animation: arrive var(--ease-arrive) both;
      animation-timeline: view();
      animation-range: entry 5% entry 80%;
    }
    .visit:nth-child(2), .class-card:nth-child(2) { animation-range: entry 12% entry 88%; }
    .visit:nth-child(3), .class-card:nth-child(3) { animation-range: entry 20% entry 95%; }
    .split__media:not(.classes__media) { background: transparent; }
    .split__media:not(.classes__media) img { animation: unveil var(--ease-arrive) both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    :is(.place__media, .about__portrait, .contact__photo) img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}

/* ---------- Map in the site's palette ---------- */
/* Google's colours fight the cream and indigo page; the map rests in muted tones and shows its colour when used. */
.contact__map { filter: grayscale(1) sepia(0.12) contrast(0.94) brightness(1.02); transition: filter 0.6s var(--ease); }
.contact__map:focus-within { filter: none; }

/* ---------- Statement: one sentence that opens a section ---------- */
/* Where a section's intro carries the feeling and its title only names it, the intro is set large in the serif
   and the title steps down to a label above it (it stays the section's h2). Two sizes, not five. */
.statement { font-family: var(--serif); font-weight: 300; font-size: clamp(var(--s3), 1.1rem + 1.9vw, var(--s5)); line-height: 1.2; letter-spacing: -0.005em; color: var(--kram); max-width: 24em; text-wrap: pretty; }
.statement:lang(th), :lang(th) .statement { font-size: clamp(var(--s3), 1.1rem + 1.6vw, var(--s4)); line-height: 1.45; letter-spacing: 0; }
.statement--split { font-size: clamp(var(--s2), 1rem + 1.2vw, var(--s4)); }
:lang(th) .statement--split { font-size: clamp(var(--s2), 1rem + 1vw, var(--s3)); }
.head--statement { max-width: none; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s1); }
.head--statement > * { grid-column: 1 / span 7; }
@media (max-width: 899px) { .head--statement > * { grid-column: 1 / -1; } }
.split__text > .caption + .statement { margin-top: calc(var(--s-1) - var(--s1)); }   /* label sits s-1 above its statement */

/* ---------- Touch targets ---------- */
/* Contact values are links on their own line: give each the 44px tap height (Apple HIG; WCAG 2.2 minimum is 24px). */
.facts__value a { display: inline-flex; align-items: center; min-height: 44px; }


/* =====================================================================================================
   v8 (research/redesign/CRITIQUE-AND-BRIEF.md, approved 29 Oct 2026). Jirung's own colours: a white tinted toward
   its indigo (not cream), a light indigo band for contact, deep indigo for the motto and the footer. Left-aligned by
   default; the motto is the one centred moment. A menu button at every size; on the home page the header and the
   headline sit over the film. Structure measured on Six Senses and Aman; no colour or layout copied.
   ===================================================================================================== */
:root {
  --paper: oklch(0.985 0.004 266);          /* the page: white with a breath of Jirung's indigo */
  --paper-2: oklch(0.955 0.01 266);         /* photo slot while loading */
  --mist: oklch(0.955 0.014 266);           /* contact band (ink 14:1, kram-soft 6.3:1 on it) */
  --on-dark: oklch(0.985 0.004 266);
  --on-dark-soft: oklch(0.985 0.004 266 / 0.76);
  --bar-h: var(--s6);
  --header-h: var(--bar-h);
}

/* Bands: build.py tags them. Contact is mist on every page; the home motto is indigo. */
.band--mist { background: var(--mist); }
.band--mist.wrap { box-shadow: 0 0 0 100vmax var(--mist); clip-path: inset(0 -100vmax); }
.band--mist.section { padding-block: clamp(var(--s5), 7vw, var(--s7)); }
.band--indigo { background: var(--kram); }
.band--indigo .pause__line { color: var(--on-dark); }
:is(.band--indigo, .site-footer, .hero__stage) :focus-visible { outline-color: var(--on-dark); }

/* ---------- Header: menu and language left, logo centred, the one action right ---------- */
.site-header { background: var(--paper); transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
.header__bar { height: var(--bar-h); grid-template-columns: 1fr auto 1fr; gap: var(--s1); }
.header__start { justify-self: start; display: flex; align-items: center; gap: var(--s2); }
.brand { justify-self: center; gap: var(--s-1); }
.header__bar .brand img { width: 40px; height: 40px; }
.header__bar .brand__name { font-size: clamp(var(--s2), 1.1rem + 0.5vw, 1.75rem); color: inherit; }
.site-header { color: var(--ink); }
.header__end { justify-self: end; }
.menu-btn { display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--s-1); color: inherit; }
@media (max-width: 1099px) {
  .header__bar { grid-template-columns: 1fr auto 1fr; }
  .header__end .button { display: inline-flex; }
}
@media (max-width: 599px) {
  .header__end .button, .header__start .lang { display: none; }   /* phones: the action bar carries the actions, the menu the language */
  .header__bar .brand__name { font-size: var(--s2); }
  .header__bar .brand img { width: 32px; height: 32px; }
}

/* The header sits over the opening film or photograph until the page moves, then turns solid. */
.site-header { position: fixed; inset: 0 0 auto 0; }
.site-header:not(.is-scrolled) { background: transparent; color: var(--on-dark); }
.site-header:not(.is-scrolled) :is(.lang a, .lang [aria-current], .lang__sep) { color: var(--on-dark); }
.site-header:not(.is-scrolled)::before {
  content: ""; position: absolute; inset: 0 0 -3rem 0; z-index: -1; pointer-events: none;
  background: linear-gradient(oklch(0.2 0.03 266 / 0.45), transparent);
}
html.menu-open .site-header { background: var(--paper); color: var(--ink); }
html.menu-open .site-header::before { display: none; }
html.menu-open .site-header :is(.lang a, .lang [aria-current]) { color: var(--ink); }

/* ---------- Menu panel ---------- */
.mobile-menu { padding: 0; }
.menu__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s5); padding-block: clamp(var(--s4), 7vh, var(--s6)) var(--s6); }
.menu__nav { grid-column: 1 / span 7; display: grid; }
.mobile-menu .menu__nav a { font-size: clamp(var(--s3), 1.1rem + 2.2vw, var(--s5)); padding: var(--s-1) 0; }
.menu__side { grid-column: 9 / -1; display: grid; gap: var(--s4); align-content: start; padding-top: var(--s1); }
.mobile-menu .lang a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0; line-height: 1; font-family: var(--sans-ui); color: var(--kram-soft); transition: none; }
.lang__sep { color: var(--kram-soft); opacity: 0.5; }
@media (max-width: 899px) { .menu__nav, .menu__side { grid-column: 1 / -1; } }
@media (min-width: 600px) { .menu__side { display: none; } }   /* the header carries the language switch above phone width */

/* ---------- Home opening: the film, full screen, with the headline over its lower left ---------- */
.hero__stage { position: relative; }
[data-page="home"] .film { height: 100svh; }
@media (max-width: 899px) { [data-page="home"] .film { height: calc(100svh - 56px - env(safe-area-inset-bottom)); } }
.film::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, oklch(0.18 0.03 266 / 0.62), oklch(0.18 0.03 266 / 0) 58%); }
.film__controls { left: auto; right: var(--gutter); bottom: var(--s2); z-index: 2; }
.hero__title { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; padding-bottom: clamp(5.5rem, 12vh, var(--s8)); }
.hero__title .display { color: var(--on-dark); font-weight: 400; max-width: 13em; font-size: clamp(var(--s4), 1rem + 4.4vw, var(--s7)); }
:lang(th) .hero__title .display { font-size: clamp(var(--s3), 0.9rem + 3.6vw, var(--s6)); line-height: 1.3; }
.hero__title .display .line { display: block; }

.hero__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s5); padding-top: clamp(var(--s5), 7vw, var(--s7)); align-items: start; }
.hero__lede { grid-column: 1 / span 8; display: grid; gap: var(--s3); justify-items: start; }
.hero__lede .lede { font-size: clamp(var(--s2), 1rem + 0.9vw, var(--s3)); line-height: 1.5; color: var(--ink); max-width: 24em; }
:lang(th) .hero__lede .lede { line-height: 1.65; }
@media (max-width: 899px) { .hero__lede { grid-column: 1 / -1; } }

/* Inner pages open the same way: the photograph edge to edge, the label and title over its lower left. */
.hero.hero--page { padding-top: 0; padding-bottom: 0; }
.hero__photo { position: relative; margin: 0; height: clamp(26rem, 78svh, 60rem); overflow: hidden; background: var(--paper-2); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo img.pos-top { object-position: 50% 12%; }   /* faces near the top edge (build.py, HERO_POS) */
.hero__photo img.pos-low { object-position: 50% 80%; }
.hero__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, oklch(0.18 0.03 266 / 0.62), oklch(0.18 0.03 266 / 0) 58%); }
@media (max-width: 899px) { .hero__photo { height: clamp(24rem, 68svh, 40rem); } }
.hero--page .hero__title { display: grid; gap: var(--s0); padding-bottom: clamp(var(--s5), 9vh, var(--s7)); }
.hero--page .hero__title .caption { color: var(--on-dark-soft); }
.hero .hero__title .display { color: var(--on-dark); font-weight: 400; max-width: 13em; font-size: clamp(var(--s4), 1rem + 4.4vw, var(--s7)); }
:lang(th) .hero .hero__title .display { font-size: clamp(var(--s3), 0.9rem + 3.6vw, var(--s6)); line-height: 1.3; }
.hero--page .hero__intro { padding-bottom: calc(var(--section) * 0.6); }
.hero--page .hero__lede { gap: var(--s2); }

/* Facts: the contact rows from site.json, wherever they appear */
.facts { display: grid; gap: var(--s2); margin: 0; }
.facts__row { display: grid; gap: var(--s-2); align-content: start; }
.facts__value { font-family: var(--sans-ui); font-size: var(--s1); font-weight: 500; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; margin: 0; }
.facts__value a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
.facts__go { margin: var(--s-2) 0 0; }

/* ---------- Ways to visit: three equal choices, three equal frames; every text row shared so the links line up ---------- */
.visits { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto; row-gap: 0; column-gap: var(--gap); }
.visit:nth-child(n) { grid-column: auto; grid-row: span 5; display: grid; grid-template-rows: subgrid; row-gap: var(--s-2); margin-top: 0; }
.visit:nth-child(n) .visit__media { aspect-ratio: 4 / 5; margin-bottom: var(--s1); }
.visit .caption, .visit .subtitle, .visit .body { align-self: start; }
.visit .link { align-self: end; margin-top: var(--s-2); }
@media (max-width: 899px) {
  .visits { grid-template-columns: 1fr; grid-template-rows: none; row-gap: var(--s6); }
  .visit:nth-child(n) { grid-column: 1 / -1; grid-row: auto; grid-template-rows: none; }
  .visit:nth-child(n) .visit__media { aspect-ratio: 4 / 3; }
}

/* ---------- The place: text left, two photographs overlapping right ---------- */
.place { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.place .place__text { grid-column: 1 / span 4; grid-row: 1 / span 2; align-self: center; }
.place .place__media { grid-column: 6 / -1; grid-row: 1; aspect-ratio: 3 / 2; }
.place .place__media img { opacity: 1; }
.place .place__media--second { grid-column: 5 / span 4; grid-row: 2; aspect-ratio: 16 / 9; margin-top: calc(-1 * clamp(var(--s5), 7vw, var(--s7))); outline: clamp(6px, 0.7vw, 12px) solid var(--paper); z-index: 1; }
@media (max-width: 899px) {
  .place .place__media { grid-column: 1 / -1; grid-row: 1; margin-top: 0; }
  .place .place__media--second { grid-column: 4 / -1; grid-row: 2; margin-top: calc(-1 * var(--s5)); }
  .place .place__text { grid-column: 1 / -1; grid-row: 3; margin-top: var(--s4); }
}

/* ---------- Story: a full-width photograph of the land, the founder's letter over it ---------- */
.story { position: relative; display: grid; align-items: end; min-height: clamp(34rem, 82vh, 54rem); color: var(--on-dark); }
.story__media { position: absolute; inset: 0; margin: 0; background: var(--ink); }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.18 0.03 266 / 0.86), oklch(0.18 0.03 266 / 0.62) 55%, oklch(0.18 0.03 266 / 0.3)); }   /* deep enough under the column of text, wherever the pool falls */
.story__inner { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s4); align-items: end; padding-block: clamp(var(--s6), 9vw, var(--s8)); }
.story .caption { color: var(--on-dark-soft); }
.story__quote { margin: 0; display: grid; gap: var(--s2); }
.story__quote p { font-family: var(--serif); font-weight: 300; font-size: clamp(var(--s4), 1.2rem + 2.6vw, var(--s6)); line-height: 1.2; color: var(--on-dark); }
:lang(th) .story__quote p { font-weight: 400; font-size: clamp(var(--s3), 1rem + 2vw, var(--s5)); line-height: 1.45; }
.story__quote .caption { text-transform: none; letter-spacing: 0.02em; max-width: 30em; }
.story__text .body, .story .link { color: var(--on-dark); }
/* The quote, its credit, what came of the letter and the link read as one column at the left */
.story__inner { row-gap: var(--s3); }
.story__lead { grid-column: 1 / span 7; display: grid; gap: var(--s2); }
.story__text { grid-column: 1 / span 6; display: grid; gap: var(--s1); justify-items: start; }
@media (max-width: 899px) { .story__lead, .story__text { grid-column: 1 / -1; } }

/* Split heads share the page's second vertical line (column 9, where the third photo starts). */
.section .head--split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.section .head--split > :first-child { grid-column: 1 / span 6; }
.section .head--split > :last-child { grid-column: 9 / -1; }
@media (max-width: 899px) { .section .head--split > :first-child, .section .head--split > :last-child { grid-column: 1 / -1; } }

/* ---------- Contact (every page): the title and the action left, the map right; details live in the footer ---------- */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s5); align-items: center; }
.contact__main { grid-column: 1 / span 6; display: grid; gap: var(--s2); justify-items: start; }
.contact__main .actions { margin-top: var(--s0); }
.contact__map-wrap { grid-column: 8 / -1; display: grid; gap: var(--s1); justify-items: start; }
.contact__map { width: 100%; aspect-ratio: 3 / 2; }
.contact__map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 899px) { .contact__main, .contact__map-wrap { grid-column: 1 / -1; } }

/* ---------- Footer: deep indigo, left-aligned columns ---------- */
.site-footer { background: var(--ink); color: var(--on-dark); padding: 0; }
.footer__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s5); padding-block: clamp(var(--s6), 8vw, var(--s8)) var(--s5); }
.footer__brand { grid-column: 1 / span 4; display: grid; gap: var(--s1); align-content: start; justify-items: start; }
.footer__brand a { display: inline-flex; align-items: center; gap: var(--s0); min-height: 44px; }
.footer__brand img { width: 56px; height: 56px; }
.footer__brand .brand__name { color: var(--on-dark); font-size: var(--s3); }
.footer__part { color: var(--on-dark-soft); font-family: var(--sans-ui); }
.footer__col { display: grid; gap: var(--s1); align-content: start; }
.footer__col--pages { grid-column: 5 / span 2; }
.footer__col--contact { grid-column: 7 / span 4; }
.footer__col--follow { grid-column: 11 / span 2; }
.site-footer .caption { color: var(--champagne); }
.footer__col ul { display: grid; }
.footer__col li a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sans-ui); font-size: var(--s1); color: var(--on-dark); }
.facts--footer .facts__value, .facts--footer .facts__value a { color: var(--on-dark); font-weight: 400; }
.facts--footer .caption { color: var(--on-dark-soft); }
/* Footer: an icon in champagne stands in for each label (address, hours, phone, email), set on the first line of its value */
.facts--footer { gap: var(--s1); }
.facts--footer .facts__row { grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--s0); align-items: start; }
.facts__icon { margin: 0; padding-top: calc((1.55em - 20px) / 2); font-size: var(--s1); line-height: 0; color: var(--champagne); }
.facts__icon svg { display: block; }
.footer__legal { display: flex; justify-content: space-between; gap: var(--s1); flex-wrap: wrap; padding-block: var(--s2) var(--s3); color: var(--on-dark-soft); font-size: var(--s0); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.14); }
.footer__tagline { font-family: var(--sans-ui); font-size: var(--s1); }
.footer__col .social { display: flex; gap: 0; margin-left: -10px; }
.footer__col .social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--on-dark); transition: color 0.3s var(--ease); }
.footer__col .social a:focus-visible { color: var(--champagne); }
@media (max-width: 1099px) {
  .footer__brand { grid-column: 1 / -1; }
  .footer__col.footer__col--pages, .footer__col.footer__col--follow { grid-column: span 3; }
  .footer__col.footer__col--contact { grid-column: span 6; }
}
@media (max-width: 599px) {
  .footer__col.footer__col--pages { grid-column: 1 / span 6; }
  .footer__col.footer__col--follow { grid-column: 7 / -1; }
  .footer__col.footer__col--contact { grid-column: 1 / -1; grid-row: 3; }
}

/* ---------- Gallery (/gallery/): every photograph at its own proportion, in columns ---------- */
.gallery { columns: 3; column-gap: var(--gap); }
.gallery li { break-inside: avoid; margin-bottom: var(--gap); }
.gallery__item { display: block; overflow: hidden; cursor: zoom-in; }
.gallery__item img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease-arrive); }
.gallery__item:focus-visible { outline: 2px solid var(--kham); outline-offset: 4px; }
@media (max-width: 1099px) { .gallery { columns: 2; } }

/* The viewer: the photo as large as the screen allows, on ink, its description below */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--on-dark); }
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure { margin: 0; display: grid; gap: var(--s1); justify-items: center; padding: var(--s5) var(--s6); }
.lightbox__figure img { max-width: min(100%, 1600px); max-height: calc(100dvh - 9rem); width: auto; height: auto; object-fit: contain; }
.lightbox__caption { display: flex; gap: var(--s2); justify-content: space-between; width: 100%; max-width: 60rem; font-family: var(--sans-ui); font-size: var(--s1); line-height: 1.5; color: var(--on-dark-soft); }
.lightbox__count { flex: 0 0 auto; font-variant-numeric: lining-nums tabular-nums; }
.lightbox__btn { all: unset; position: absolute; display: grid; place-items: center; width: 56px; height: 56px; cursor: pointer; color: var(--on-dark); transition: color 0.3s var(--ease); }
.lightbox__btn:focus-visible { color: var(--champagne); }
.lightbox__btn:focus-visible { outline: 2px solid var(--kham); outline-offset: -4px; }
.lightbox__close { top: var(--s1); right: var(--s1); }
.lightbox__prev { left: var(--s1); top: 50%; translate: 0 -50%; }
.lightbox__next { right: var(--s1); top: 50%; translate: 0 -50%; rotate: 180deg; }
@media (max-width: 599px) {
  .lightbox__figure { padding: var(--s6) var(--s0) var(--s7); }
  .lightbox__figure img { max-height: calc(100dvh - 12rem); }
  .lightbox__caption { padding-inline: var(--s0); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: var(--s1); translate: none; }
}
@media (prefers-reduced-motion: reduce) { .gallery__item img, .lightbox__btn { transition: none; } }

/* ---------- Home: a photograph in every section ---------- */
/* Intro: the lede and its actions on the left, the lake on the right; on phones the photo follows the actions */
.hero__intro--photo { align-items: center; }
.hero__intro--photo .hero__lede { grid-column: 1 / span 5; }
.hero__intro-media { grid-column: 7 / -1; aspect-ratio: 3 / 2; }
@media (max-width: 899px) { .hero__intro--photo .hero__lede, .hero__intro-media { grid-column: 1 / -1; } }

/* Pause: the tagline and the gold wave over the mountains at dusk, deepened with kram so both stay legible */
.pause--photo { position: relative; isolation: isolate; overflow: hidden; min-height: 64svh; }
.pause--photo .pause__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.pause--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(oklch(0.33 0.07 266 / 0.62), oklch(0.27 0.06 266 / 0.78)); }
@media (max-width: 599px) { .pause--photo { min-height: 52svh; } }

/* Visit (home only): the entrance, wide across the band above the title and the map */
.contact__photo { grid-column: 1 / -1; aspect-ratio: 21 / 9; margin-bottom: var(--s1); }
.contact__photo img { object-position: 50% 78%; }   /* the sign and the road in, not the canopy */
@media (max-width: 599px) { .contact__photo { aspect-ratio: 4 / 3; } }
.lede__line { display: block; }   /* the home lede is set line by line, as written ("|" in the content) */

/* ---------- Photos answer the cursor (after Lanserhof 1.03, RAKxa 1.05) ---------- */
/* A photo that leads somewhere grows a little inside its frame, slowly. Each home card is one target: its link
   covers the whole card, so the photo, the words and the link all go to the same page. */
.visit .link::after { content: ""; position: absolute; inset: 0; }
.visit:focus-within .visit__media img, .gallery__item:focus-visible img { transform: scale(1.03); }

/* ---------- Statements ink in with the scroll (after Soneva's rich editorial) ---------- */
/* main.js splits a [data-ink] sentence into words; each starts faint and darkens in reading order as the sentence
   reaches the middle of the screen. Without JS, or with reduced motion, the sentence is simply there. */
.ink__w { transition: opacity 0.25s linear; }

/* ---------- Slow light over the tagline band (after Lanserhof's hero light) ---------- */
/* Two soft patches of warm light drift across the mountains on long, unequal loops, so the band is never quite still. */
.pause__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; }
.pause__light::before, .pause__light::after { content: ""; position: absolute; width: 62vmax; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, oklch(0.93 0.05 80 / 0.2), transparent); }
.pause__light::before { left: -12%; top: -30%; animation: pause-light-a 38s ease-in-out infinite alternate; }
.pause__light::after { right: -16%; bottom: -40%; background: radial-gradient(closest-side, oklch(0.9 0.04 266 / 0.18), transparent); animation: pause-light-b 47s ease-in-out infinite alternate; }
@keyframes pause-light-a { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18%, 14%) scale(1.25); } 100% { transform: translate(34%, -6%) scale(0.92); } }
@keyframes pause-light-b { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 50% { transform: translate(-16%, -12%) scale(1.3); opacity: 0.7; } 100% { transform: translate(-30%, 6%) scale(1.06); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pause__light::before, .pause__light::after { animation: none; }
  .visit .visit__media img, .gallery__item img { transition: none; }
}

/* ---------- Hover: mouse and trackpad only ---------- */
/* A touch screen keeps :hover on whatever was last tapped until something else takes it, so a tapped link would
   keep its gold underline (and a tapped card its enlarged photo). Every hover style lives here, behind
   (hover: hover); keyboard focus keeps its own :focus-visible rules above. */
@media (hover: hover) {
  .link--quiet:hover, .lang a:hover, .classes__name:hover { color: var(--ink); }
  .header__phone:hover { color: var(--kram); }
  .button:hover { background: var(--ink); }
  .film__btn:hover { background: rgb(27 36 64 / 0.8); }
  :is(.nav a, .mobile-menu a, .place__list a, .facts__value a, .footer__col li a, .header__phone, .lang a):hover { text-decoration-color: currentColor; }
  .link:hover { opacity: 0.68; }
  .contact__map:hover { filter: none; }
  .footer__col .social a:hover, .lightbox__btn:hover { color: var(--champagne); }
  .visit:hover .visit__media img, .gallery__item:hover img { transform: scale(1.03); transition: transform 1.2s var(--ease-arrive); transition-delay: 0s; }
}


/* ---------- Swipe rows (phones): Embla ---------- */
/* Embla (main.js) moves the track with transforms, so the row follows the finger with real momentum and settles on a
   card, and nothing can push the page sideways. Cards are 82% of the column, so the next one shows at the edge; the
   row is not clipped at the page margin, so cards slide on to the screen's edge, where <main> clips them. Without JS
   the row is a plain sideways scroller inside the margins. From 900px wide Embla stands down and each track keeps
   its own desktop layout. */
/* A grid column must never grow to fit the row of cards inside it. */
.split__text, .class-cards, .carousel { min-width: 0; }
.carousel__count { display: none; }
@media (max-width: 899px) {
  .carousel { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .carousel::-webkit-scrollbar { display: none; }
  .carousel.is-live { overflow: visible; scroll-snap-type: none; }
  .carousel:focus-visible { outline: 2px solid var(--kham); outline-offset: 6px; }
  .carousel__track, .carousel__track.visits { display: flex; touch-action: pan-y pinch-zoom; gap: 0; }
  .carousel__track > * { flex: 0 0 82%; min-width: 0; margin-right: var(--s1); scroll-snap-align: start; }
  .carousel__track > .visit:nth-child(n) { margin-top: 0; grid-row: auto; }
  .carousel__count { display: block; margin-top: var(--s2); font-family: var(--sans-ui); font-size: var(--s1); font-variant-numeric: tabular-nums; color: var(--kram-soft); }
}

/* ---------- Touch: taps answer at once ---------- */
/* No double-tap wait, no grey flash: each control answers with its own pressed state instead (Kobu, Soneva,
   Chiva-Som and Rosewood all drop the grey flash). */
html { -webkit-tap-highlight-color: transparent; }
:is(a, button, summary, label, [role="button"]) { touch-action: manipulation; }
.link, .nav a, .mobile-menu a, .place__list a, .footer__col li a, .lang a, .classes__name, .social a, .film__btn, .lightbox__btn, .gallery__item, .action-bar a { transition: opacity 0.2s var(--ease); }
:is(.link, .nav a, .mobile-menu a, .place__list a, .footer__col li a, .lang a, .classes__name, .social a, .film__btn, .lightbox__btn, .gallery__item, .action-bar a):active { opacity: 0.55; }
.button:active { background: var(--ink); }
.mobile-menu { overscroll-behavior: contain; }

/* ---------- Weighted scrolling (desktop): Lenis ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- Deep indigo band: one per page ---------- */
/* After BelArosa's dark panels: each inner page turns once to deep indigo (kram) for one chosen part, so the page
   alternates paper and indigo instead of reading as one long sheet. Home has its own (the tagline band and the
   story); Practices: the classes; Stay: while you stay; Senior care: the quote; The place: the restaurant at night;
   About: the founder's letter. Text is paper; running text and labels are paper at 76%. */
.band--deep { background: var(--kram); color: var(--on-dark); }
.band--deep.wrap { box-shadow: 0 0 0 100vmax var(--kram); clip-path: inset(0 -100vmax); }
.band--deep.section { padding-block: clamp(var(--s6), 9vw, var(--s8)); }
.band--deep + .contact { margin-top: 0; }
.band--deep :is(.title, .subtitle, .statement, .about__quote p, .pairs__row dt, .class-card__name, .classes__name[aria-pressed="true"], .link) { color: var(--on-dark); }
.band--deep :is(.body, .lede, .caption, .pairs__row dd, .classes__name, .carousel__count, .about__quote .caption) { color: var(--on-dark-soft); }
.band--deep .link--quiet { color: var(--on-dark-soft); }
.band--deep .button { background: var(--paper); color: var(--ink); }
.band--deep .button:active { background: var(--paper-2); }
.band--deep .media { background: oklch(1 0 0 / 0.06); }
.band--deep :focus-visible, .band--deep .carousel:focus-visible { outline-color: var(--on-dark); }
@media (hover: hover) {
  .band--deep .button:hover { background: var(--paper-2); }
  .band--deep .classes__name:hover { color: var(--on-dark); }
}

/* About: the founder's letter on the band, his portrait beside his words; the story follows on paper. */
.about__letter { align-items: center; gap: var(--s4) var(--gap); }
.about__letter .about__portrait { grid-column: 1 / span 3; }
.about__letter .about__quote { grid-column: 5 / -1; }
.about__narrative { grid-column: 2 / span 6; }
@media (max-width: 899px) {
  .about__letter .about__portrait, .about__letter .about__quote, .about__narrative { grid-column: 1 / -1; }
  .about__narrative { margin-top: 0; }
}

/* ---------- Offers: rooms and care packages ---------- */
/* Every offer reads photo first, then a small label, its name, its starting price, a few lines and its own button,
   as Aman, Rosewood and Kamalaya present rooms and programmes on phones. Two packages sit side by side on desktop. */
.packages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--gap); margin-top: clamp(var(--s5), 6vw, var(--s6)); align-items: start; }
.package-card { display: grid; gap: var(--s0); align-content: start; }
.package-card__media { aspect-ratio: 4 / 3; margin-bottom: var(--s1); }
.package-card .hero__price { margin-top: calc(-1 * var(--s-2)); }
.package-card .rate-table { margin-top: var(--s1); }
.package-card .actions, .split__text .actions { margin-top: var(--s1); }
@media (min-width: 1100px) { .packages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .packages { grid-template-columns: 1fr; } }

/* Named items with a few lines each (the practices in each path, while you stay, why Jirung) are a heading and a
   short paragraph separated by space, as Aman sets its treatments; hairlines are kept for one-line lists only
   (what long-term care includes, the rate rows). */
:is(.pairs--ruled, .split__text .pairs) { gap: var(--s3); margin-top: var(--s2); }
:is(.pairs--ruled, .split__text .pairs) .pairs__row dt { font-size: var(--s1); }

@media (hover: hover) {
  .button--line:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
}

/* ---------- Why Jirung: four reasons, each with its own photograph ---------- */
/* Like a resort's highlights (Aman, Rosewood): a row of photo cards, four across on desktop and a swipe row on
   phones, so each reason is seen, not only read. */
.carousel:has(.why-cards) { margin-top: var(--s3); }
@media (min-width: 900px) { .why-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); } }
.why-card { display: grid; gap: var(--s-1); align-content: start; }
.why-card__media { aspect-ratio: 4 / 5; margin-bottom: var(--s0); }
.why-card__name { font-family: var(--sans-ui); font-size: var(--s1); font-weight: 500; line-height: 1.5; color: var(--ink); }
@media (min-width: 900px) and (max-width: 1099px) { .why-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); } }