/* Self-hosted fonts (SIL Open Font License), from @fontsource 5.1.0 */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/playfair-display-latin-700-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/playfair-display-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-400-italic.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-ext-400-italic.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/inter-latin-300-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/inter-latin-ext-300-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* The Water's Edge: "Evening at the Water's Edge" to the Aman standard (LUXURY_DESIGN_SYSTEM.md).
   Mobile-first. Deep navy, ivory and lamplight gold; Playfair Display over Inter; doubled space;
   photography edge to edge. Motion is opacity only, 0.8s on one curve, so it holds 60fps.
   No pure black or white anywhere: text and grounds are tinted. */

:root {
  --navy: #0a192f;
  --navy-2: #10243f;
  --teal: #0f3d3e;
  --ivory: #f8f5f0;
  --gold: #d4af37;
  --ink: #1d2733;          /* 13.9:1 on ivory */
  --muted: #5a6470;        /* 5.5:1 on ivory */
  --on-navy: rgba(248, 245, 240, 0.78);   /* 10:1 on navy, 7.3:1 on teal */
  --hairline: rgba(29, 39, 51, 0.16);
  --hairline-navy: rgba(248, 245, 240, 0.18);

  --serif: 'Playfair Display', 'Times New Roman', serif;
  --sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fade: 0.8s;

  --void: clamp(7rem, 16vw, 15rem);       /* section padding: the void */
  --void-deep: clamp(8rem, 20vw, 18rem);  /* the memoir */
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --measure: 34em;
  --nav-h: 4.5rem;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f8f5f0' stroke-width='1'/%3E%3C/svg%3E");
  --chevron-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231d2733' stroke-width='1'/%3E%3C/svg%3E");
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--ivory);
  color: var(--ink);
  font: 400 1rem/1.8 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
::selection { background: rgba(212, 175, 55, 0.28); color: var(--ink); }   /* lamplight, not browser blue */

.lx-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--navy); color: var(--ivory); padding: 0.75rem 1.25rem; text-decoration: none;
}
.lx-skip:focus { top: 1rem; }

/* ---------- Type ---------- */
.lx-eyebrow {
  display: block;
  font: 400 0.72rem/1.4 var(--sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2.5rem;
}
.lx-display {
  font: 400 clamp(2.75rem, 5.5vw, 5rem)/1.08 var(--serif);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.lx-title {
  font: 400 clamp(2.25rem, 4vw, 3.75rem)/1.1 var(--serif);
  letter-spacing: -0.01em;
}
.lx-display, .lx-title, .lx-memoir__title, .lx-fold__name, .lx-eyebrow { text-wrap: balance; }
.lx-italic { font-style: italic; }
.lx-body { max-width: var(--measure); font-size: 1rem; line-height: 1.8; color: var(--muted); }
.lx-body + .lx-body { margin-top: 1.4em; }
.lx-utility {
  font: 400 0.8125rem/1.7 var(--sans);
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* Text link with a gold hairline */
.lx-link {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font: 400 0.75rem/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase;
  text-decoration: none; color: inherit;
  padding-bottom: 0.7rem;
  background: linear-gradient(var(--gold), var(--gold)) left bottom / 100% 1px no-repeat;
}
.lx-link svg { width: 1.5rem; height: 0.6rem; flex: none; }

/* The one filled button: lamplight gold, navy text (8.4:1) */
.lx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 2.5rem;
  border: 1px solid var(--gold); border-radius: 0;
  background: var(--gold); color: var(--navy);
  font: 400 0.75rem/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--fade) var(--ease), color var(--fade) var(--ease);
}
.lx-btn:hover { background: transparent; color: var(--gold); }
.lx-btn--quiet { background: transparent; color: var(--gold); }
.lx-btn--quiet:hover { background: var(--gold); color: var(--navy); }
.lx-btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Reveal: fade only ---------- */
.js .reveal { opacity: 0; transition: opacity var(--fade) var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; }

/* ---------- Navigation ---------- */
.lx-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter);
  color: var(--ivory);
  transition: background-color var(--fade) var(--ease), color var(--fade) var(--ease);
}
.lx-nav::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--hairline);
  opacity: 0; transition: opacity var(--fade) var(--ease);
}
.lx-nav.is-solid { background: var(--ivory); color: var(--ink); }
.lx-nav.is-solid::after { opacity: 1; }
.lx-nav__menu, .lx-nav__reserve {
  display: inline-flex; align-items: center; gap: 0.8rem;
  background: none; border: 0; cursor: pointer; text-decoration: none; color: inherit;
  font: 400 0.72rem/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase;
  min-height: 2.75rem;
}
.lx-nav__menu svg { width: 1.4rem; height: 0.7rem; }
.lx-nav__reserve { justify-self: end; }
.lx-nav__reserve span { padding-bottom: 0.45rem; background: linear-gradient(var(--gold), var(--gold)) left bottom / 100% 1px no-repeat; }
.lx-nav__logo { display: block; line-height: 0; opacity: 0; pointer-events: none; transition: opacity var(--fade) var(--ease); }
.lx-nav__logo img { height: 2.1rem; width: auto; }
.lx-nav.is-solid .lx-nav__logo { opacity: 1; pointer-events: auto; }

/* ---------- Hero: full-bleed dusk, logo centred, booking bar anchored ---------- */
.lx-hero {
  position: relative;
  height: 100vh; height: 100svh; min-height: 40rem;
  background: var(--navy);
  color: var(--ivory);
  overflow: hidden;
}
.lx-hero__media { position: absolute; inset: 0; }
.lx-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s var(--ease); will-change: opacity; }  /* keep each photo on its own GPU layer: phones otherwise rebuild it at the start of every dissolve and drop ~100ms */
.lx-hero__slide.is-active { opacity: 1; }
.lx-hero__slide picture, .lx-hero__slide img { width: 100%; height: 100%; }
.lx-hero__slide img { object-fit: cover; object-position: var(--pos, 50% 50%); }
.lx-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* A dusk wash over the whole photo, a pool of shade behind the logo (the white lockup sits over
     a white building), depth at the top for the nav, and a light shade at the bottom under the glass bar. */
  background:
    radial-gradient(ellipse 34% 26% at 50% 44%, rgba(10, 25, 47, 0.55) 0%, rgba(10, 25, 47, 0.3) 55%, rgba(10, 25, 47, 0) 100%),
    linear-gradient(to bottom, rgba(10, 25, 47, 0.58) 0%, rgba(10, 25, 47, 0) 26%),
    linear-gradient(to top, rgba(10, 25, 47, 0.45) 0%, rgba(10, 25, 47, 0.12) 30%, rgba(10, 25, 47, 0) 50%),
    rgba(10, 25, 47, 0.22);
}
.lx-hero__logo {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%);
  width: min(25rem, 64vw);
  line-height: 0;
}
.lx-hero__logo img { width: 100%; height: auto; }
.lx-hero__logo .is-light { filter: drop-shadow(0 1px 2px rgba(10, 25, 47, 0.6)) drop-shadow(0 0 24px rgba(10, 25, 47, 0.45)); }

.lx-book {
  position: absolute; left: 50%; bottom: clamp(2rem, 6vh, 4rem);
  transform: translateX(-50%);
  width: min(62rem, calc(100% - 2 * var(--gutter)));
  display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: stretch;
  /* Frosted glass: the lamps and water glow through. The hero's bottom shade is kept light so the
     glass has light to blur; measured worst case over all three photos stays well above 4.5:1. */
  background: rgba(10, 25, 47, 0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(212, 175, 55, 0.55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lx-book { background: rgba(10, 25, 47, 0.74); }   /* no glass: keep the solid bar */
}
.lx-book__field {
  display: flex; flex-direction: column; justify-content: center; gap: 0.45rem;
  padding: 1.15rem 1.75rem;
  border-right: 1px solid var(--hairline-navy);
  cursor: pointer;
}
.lx-book__field span {
  font: 400 0.66rem/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(248, 245, 240, 0.82);
}
.lx-book__field input, .lx-book__field select {
  border: 0; background: transparent; color: var(--ivory);
  font: 400 0.92rem/1.4 var(--sans); letter-spacing: 0.02em;
  color-scheme: dark; outline: none; cursor: pointer; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.lx-book__field input::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; }
.lx-book__field select { padding-right: 1.25rem; background: var(--chevron) right center / 0.7rem auto no-repeat; }
.lx-book__field select option { color: var(--ink); background: var(--ivory); }
.lx-book__field:focus-within { background: rgba(248, 245, 240, 0.06); }
/* Inside the hero the button is quiet (ivory on the bar, a gold hairline under the word), so the
   logo stays the loudest thing on screen; the filled gold button is kept for the closing band. */
.lx-book .lx-btn { min-height: 100%; padding: 0 2.75rem; background: transparent; color: var(--ivory); border: 0; border-left: 1px solid var(--hairline-navy); }
.lx-book .lx-btn span { padding-bottom: 0.45rem; background: linear-gradient(var(--gold), var(--gold)) left bottom / 100% 1px no-repeat; }
.lx-book .lx-btn:hover { background: rgba(212, 175, 55, 0.14); color: var(--ivory); }

/* ---------- Sections ---------- */
.lx-section { padding: var(--void) var(--gutter); }
.lx-center { text-align: center; }
.lx-center .lx-body { margin-left: auto; margin-right: auto; }

/* Introduction: the breath */
.lx-nowrap { white-space: nowrap; }
/* On narrow screens the place line sits on two deliberate lines: "Samudra Beach" / "Kovalam · Kerala" */
@media (max-width: 30rem) { .lx-places .lx-sep { display: none; } .lx-places .lx-nowrap { display: block; } }
.lx-intro .lx-display { max-width: 11ch; margin: 0 auto 3.5rem; }
.lx-intro .lx-body { color: var(--ink); opacity: 0.86; }
.lx-rule { display: block; width: 4rem; height: 1px; margin: 4rem auto 0; background: var(--gold); border: 0; }

/* ---------- The Stay: asymmetric editorial grid ---------- */
.lx-stay__head { margin-bottom: clamp(3.5rem, 7vw, 6rem); }   /* left, like the rows below it */
.lx-room__lede { font: italic 400 clamp(1.15rem, 1.6vw, 1.4rem)/1.5 var(--serif); color: var(--ink); max-width: 22em; }
.lx-room__desc { max-width: 26em; margin-bottom: 2.5rem; color: var(--muted); }
.lx-amenities { margin-top: clamp(3rem, 6vw, 5rem); }   /* sits on the fold's last hairline, same inset */
.lx-amenities ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 2.75rem; }
.lx-amenities li { font: 400 0.72rem/1.8 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }

/* ---------- Evening passage: Wellness and Dining on navy ---------- */
.lx-evening { background: var(--navy); color: var(--ivory); }
.lx-evening .lx-eyebrow { color: var(--gold); }
.lx-evening .lx-body { color: var(--on-navy); }
.lx-wellness { display: grid; gap: 4rem; padding: var(--void) var(--gutter) clamp(5rem, 10vw, 9rem); max-width: 84rem; margin: 0 auto; }
.lx-wellness .lx-title { font-style: italic; max-width: 12ch; margin-bottom: 2.75rem; }
.lx-wellness .lx-link { margin-top: 3rem; }
.lx-inset { justify-self: center; width: min(19rem, 70vw); }
.lx-inset a { display: block; padding: 0.75rem; border: 1px solid rgba(212, 175, 55, 0.4); }
.lx-inset img { width: 100%; height: auto; }
.lx-inset figcaption { margin-top: 1.25rem; text-align: center; font: 400 0.68rem/1.6 var(--sans); letter-spacing: 0.3em; text-transform: uppercase; color: var(--on-navy); }

.lx-dining { padding-bottom: var(--void); }
.lx-dining__head { text-align: center; padding: 0 var(--gutter) clamp(4rem, 8vw, 7rem); }
.lx-dining__head::before { content: ''; display: block; width: 4rem; height: 1px; margin: 0 auto clamp(5rem, 10vw, 9rem); background: var(--gold); }
.lx-dining__photo img { width: 100%; height: auto; aspect-ratio: 1600 / 740; object-fit: cover; }
.lx-dining__copy { padding: clamp(4rem, 8vw, 7rem) var(--gutter) 0; text-align: center; }
.lx-dining__copy .lx-body { margin: 0 auto; }

/* ---------- The setting: an editorial spread ----------
   Phones: one column, plates edge to edge, a short gold rule above each caption.
   Wider: one 12-column grid. Column 8 stays empty and carries the gold spine; plate II takes
   columns 1–7, plates III and IV columns 9–12, their image edges locked to II's by a row subgrid. */
.lx-spread__head { padding: var(--void) var(--gutter) clamp(4rem, 9vw, 8rem); }
.lx-spread__title {
  font: 400 clamp(2.75rem, 12vw, 3.5rem)/1 var(--serif);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.lx-spine { display: none; }
.lx-bleed { display: block; }
.lx-bleed img { width: 100%; height: auto; max-height: 92vh; object-fit: cover; }
.lx-plate__label {
  font: 400 0.6875rem/1.7 var(--sans);   /* 11px */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.lx-spread { display: grid; padding: 3rem 0 var(--void); }
.lx-spread__note { display: grid; gap: 1.25rem; padding: 0 var(--gutter); margin-bottom: clamp(5rem, 14vw, 7rem); }
.lx-spread__note .lx-body { max-width: 30em; }
.lx-plate { margin: 0 0 clamp(4.5rem, 14vw, 6rem); }
.lx-plate__img { display: block; overflow: hidden; }
.lx-plate__img img { width: 100%; height: 100%; object-fit: cover; }
.lx-plate--ii .lx-plate__img img { aspect-ratio: 4 / 5; object-position: 50% 58%; }
.lx-plate--iii .lx-plate__img img, .lx-plate--iv .lx-plate__img img { aspect-ratio: 3 / 2; }
.lx-plate figcaption, .lx-spread__note > .lx-plate__label {
  padding-top: 1.25rem;
  background: linear-gradient(var(--gold), var(--gold)) left top / 2.5rem 1px no-repeat;
}
.lx-plate figcaption { margin: 2rem var(--gutter) 0; }

/* ---------- In memory: the memoir ---------- */
.lx-memoir { padding: var(--void-deep) var(--gutter); text-align: center; background: var(--ivory); }
.lx-memoir__portrait { width: min(19rem, 68vw); margin: 0 auto clamp(4rem, 8vw, 6rem); }
.lx-memoir__portrait img { width: 100%; height: auto; }
.lx-memoir__title { font: italic 400 clamp(2.4rem, 4.6vw, 4.2rem)/1.15 var(--serif); letter-spacing: -0.01em; max-width: 16ch; margin: 0 auto clamp(3.5rem, 6vw, 5rem); }
.lx-memoir__body { max-width: 32em; margin: 0 auto; text-align: left; hyphens: manual; font: italic 400 clamp(1.08rem, 1.35vw, 1.22rem)/1.95 var(--serif); color: var(--ink); }
.lx-memoir__body p + p { margin-top: 1.4em; }
.lx-memoir__body span { font: inherit; }
.lx-memoir .lx-rule { margin-top: clamp(4rem, 8vw, 6rem); }

/* ---------- Guest words ---------- */
.lx-words { background: var(--teal); color: var(--ivory); padding: var(--void) var(--gutter); }
.lx-words .lx-eyebrow { color: var(--gold); }
.lx-words__head { text-align: center; margin-bottom: clamp(4rem, 9vw, 8rem); }
.lx-words__list { display: grid; gap: 5rem; max-width: 72rem; margin: 0 auto; }
.review { display: flex; flex-direction: column; max-width: 30em; }
.review-text { order: 1; position: relative; font: italic 400 clamp(1.3rem, 1.9vw, 1.65rem)/1.55 var(--serif); color: var(--ivory); }
.review-text::before { content: '“'; position: absolute; right: 100%; padding-right: 0.12em; color: var(--gold); }
.review-stars { display: none; }
.review-head { order: 3; margin-top: 2rem; }
.review-avatar { display: none; }
.review-name { display: block; font: 400 0.75rem/1.6 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--ivory); }
.review-source { display: flex; align-items: center; gap: 0.5rem; font: 400 0.75rem/1.6 var(--sans); color: var(--on-navy); margin-top: 0.2rem; }
.review-g { width: 0.85rem; height: 0.85rem; }
.lx-words__more { text-align: center; margin-top: clamp(4rem, 8vw, 6rem); }

/* ---------- Closing band ---------- */
.lx-closing { position: relative; color: var(--ivory); background: var(--navy); text-align: center; overflow: hidden; }
.lx-closing__photo img { width: 100%; height: clamp(30rem, 80vh, 52rem); object-fit: cover; }
.lx-closing__veil { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 45% at 50% 50%, rgba(10, 25, 47, 0.82), rgba(10, 25, 47, 0.62)); }
.lx-closing__in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: var(--gutter); }
.lx-closing .lx-eyebrow { color: var(--gold); }
.lx-closing .lx-title { max-width: 14ch; margin-bottom: 2rem; }
.lx-closing .lx-body { color: var(--on-navy); margin-bottom: 3rem; }

/* ---------- Footer ---------- */
.lx-footer { background: var(--navy); color: var(--on-navy); padding: clamp(6rem, 12vw, 10rem) var(--gutter) 3rem; text-align: center; }
.lx-footer__logo { width: min(15rem, 60vw); margin: 0 auto 4.5rem; }
.lx-footer__cols { display: grid; gap: 3rem; max-width: 64rem; margin: 0 auto 5rem; }
.lx-footer h2 { font: 400 0.68rem/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; }
.lx-footer p, .lx-footer li { font-size: 0.9rem; line-height: 1.9; }
.lx-footer ul { list-style: none; }
.lx-footer a { text-decoration: none; transition: color var(--fade) var(--ease); }
.lx-footer a:hover { color: var(--ivory); }
.lx-footer__base { padding-top: 2.5rem; border-top: 1px solid var(--hairline-navy); font-size: 0.75rem; letter-spacing: 0.06em; }

/* ---------- Menu overlay (navy, fades in) ---------- */
.lx-menu, .lx-sheet { border: 0; color: inherit; }
.lx-menu[open], .lx-sheet[open] { animation: lx-fade var(--fade) var(--ease); }
.lx-menu::backdrop, .lx-sheet::backdrop { background: rgba(10, 25, 47, 0.6); }
@keyframes lx-fade { from { opacity: 0; } to { opacity: 1; } }

.lx-menu {
  width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0;
  background: var(--navy); color: var(--ivory);
  padding: calc(var(--nav-h) + 3rem) var(--gutter) 3rem;
  text-align: center;
}
.lx-menu nav { display: grid; gap: 0.25rem; margin: 0 auto 4rem; }
.lx-menu nav a { font: italic 400 clamp(2rem, 5vw, 3.25rem)/1.35 var(--serif); text-decoration: none; color: var(--ivory); }
.lx-menu nav a:hover { color: var(--gold); }
.lx-close {
  position: absolute; top: 1rem; right: var(--gutter);
  display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem;
  background: none; border: 0; cursor: pointer; color: inherit;
  font: 400 0.72rem/1 var(--sans); letter-spacing: 0.3em; text-transform: uppercase;
}
.lx-close svg { width: 0.9rem; height: 0.9rem; }

/* ---------- Booking request panel (same field names as /booknow) ---------- */
.lx-sheet {
  margin: 0 0 0 auto; width: min(36rem, 100%); max-width: 100%;
  height: 100%; max-height: 100%;
  background: var(--ivory); color: var(--ink);
  overflow-y: auto;
}
.lx-sheet__form, .lx-thanks { position: relative; padding: calc(var(--nav-h) + 1rem) clamp(1.5rem, 5vw, 3.5rem) 3rem; }
.lx-sheet .lx-title { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: 1.25rem; outline: none; }
.lx-sheet__lede { color: var(--muted); font-size: 0.9rem; margin-bottom: 3rem; max-width: 26em; }
.lx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.75rem; }
.lx-fields label { display: flex; flex-direction: column; gap: 0.6rem; font: 400 0.66rem/1 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.lx-fields .span2 { grid-column: 1 / -1; }
.lx-fields input, .lx-fields select, .lx-fields textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0;
  background: transparent; padding: 0.55rem 0;
  font: 400 1rem/1.4 var(--sans); letter-spacing: 0.01em; text-transform: none; color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.lx-fields select { padding-right: 1.25rem; background: var(--chevron-ink) right center / 0.7rem auto no-repeat; }
.lx-fields textarea { resize: vertical; min-height: 5.5rem; }
.lx-fields input:focus, .lx-fields select:focus, .lx-fields textarea:focus { outline: none; border-bottom-color: var(--gold); }
.lx-sheet__submit { width: 100%; margin-top: 3rem; }
.we-sheet-note { margin-top: 1.25rem; min-height: 1.6em; font-size: 0.9rem; text-align: center; color: var(--muted); }
.we-sheet-note.is-error { color: #a1291f; }
.we-sheet-note a { color: inherit; font-weight: 600; }
.lx-thanks { text-align: center; }
.lx-thanks .lx-title { margin: 1rem 0 2rem; }
.lx-thanks p { color: var(--muted); margin: 0 auto 1rem; max-width: 26em; }
.lx-thanks a { color: var(--ink); }
.lx-thanks .lx-btn { margin-top: 2.5rem; }

/* ---------- Phones and portrait screens: full-screen hero, like PC (the owner's choice) ----------
   The dusk photo fills the screen. Only the middle fifth of these wide photos fits a phone, so each
   slide has a phone focal point (--pos-m, set in home.php). The booking bar is the same frosted glass,
   folded into a 2×2 card: Arrival | Departure / Guests | Reserve. */
@media (max-aspect-ratio: 1/1) {
  .lx-nav__logo img { height: 2.2rem; }

  .lx-hero { min-height: 34rem; }
  .lx-hero__slide img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .lx-hero__scrim {
    background:
      radial-gradient(ellipse 62% 20% at 50% 40%, rgba(10, 25, 47, 0.55) 0%, rgba(10, 25, 47, 0.3) 55%, rgba(10, 25, 47, 0) 100%),
      linear-gradient(to bottom, rgba(10, 25, 47, 0.58) 0%, rgba(10, 25, 47, 0) 22%),
      linear-gradient(to top, rgba(10, 25, 47, 0.5) 0%, rgba(10, 25, 47, 0.15) 32%, rgba(10, 25, 47, 0) 50%),
      rgba(10, 25, 47, 0.22);
  }
  .lx-hero__logo { top: 40%; width: min(17rem, 70vw); }

  .lx-book {
    left: var(--gutter); right: var(--gutter); bottom: 1.25rem;
    transform: none; width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* minmax(0, …): date inputs must not widen their column past the card */
  }
  .lx-book__field { padding: 0.95rem 1rem; min-width: 0; }
  .lx-book__field input, .lx-book__field select { min-width: 0; }
  .lx-book__field:nth-child(2) { border-right: 0; }
  .lx-book__field:nth-child(3) { border-top: 1px solid var(--hairline-navy); }
  .lx-book .lx-btn { min-height: 0; padding: 0 1rem; border-top: 1px solid var(--hairline-navy); }
}

/* ---------- Wider screens: the editorial grid ---------- */
/* ---------- Folds: the rooms and the surroundings, set like a printed tariff card ----------
   Native <details name>: one open at a time, no JavaScript, keyboard-ready, and a closed row's
   photo is never fetched. A row is an engraved name over a hairline; touching it draws the hairline
   in gold from the left (transform only), and opening it keeps the thread drawn. The rate is set
   like a menu price. Inside, the photo settles as the text fades in. */
.lx-fold__item { position: relative; border-top: 1px solid var(--hairline); }
.lx-fold__item:last-child { border-bottom: 1px solid var(--hairline); }
.lx-fold__item::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left center;
  transition: transform calc(var(--fade) * 1.5) var(--ease);
}
.lx-fold__item:has(> .lx-fold__row:hover)::before,
.lx-fold__item:has(> .lx-fold__row:focus-visible)::before,
.lx-fold__item[open]::before { transform: scaleX(1); }

.lx-fold__row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1.5rem; row-gap: 0.6rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  list-style: none; cursor: pointer;
}
.lx-fold__row::-webkit-details-marker { display: none; }
/* Keyboard focus: the gold thread draws (above) and the name takes an ink underline, instead of a box */
.lx-fold__row:focus-visible { outline: none; }
.lx-fold__row:focus-visible .lx-fold__name { text-decoration: underline 1px; text-underline-offset: 0.2em; }
.lx-fold__row:has(.lx-fold__num) { grid-template-columns: 1.75rem 1fr auto; column-gap: 1rem; }
.lx-fold__num { font: italic 400 clamp(1rem, 1.4vw, 1.2rem)/1 var(--serif); color: var(--muted); }
.lx-fold__name {
  font: 400 clamp(1.4rem, 2.4vw, 2rem)/1.15 var(--serif); letter-spacing: -0.015em; font-kerning: normal;
  color: var(--ink); opacity: 0.78; transition: opacity var(--fade) var(--ease);
}
.lx-fold--rooms .lx-fold__name { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.08; }
.lx-fold__row:hover .lx-fold__name, .lx-fold__row:focus-visible .lx-fold__name, .lx-fold__item[open] .lx-fold__name { opacity: 1; }

/* The rate, set like a menu price: italic figure over a whispered caption */
.lx-fold__price { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.lx-fold__amount { font: italic 400 clamp(1.2rem, 1.8vw, 1.45rem)/1 var(--serif); font-variant-numeric: oldstyle-nums proportional-nums; color: var(--ink); }
.lx-fold__per { font: 400 0.625rem/1.6 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }

/* A hairline cross in lamplight gold; the upright folds away when the row opens */
.lx-fold__icon { grid-column: -2 / -1; grid-row: 1; position: relative; width: 1.25rem; height: 1.25rem; }
.lx-fold__icon::before, .lx-fold__icon::after { content: ''; position: absolute; background: var(--gold); }
.lx-fold__icon::before { left: 0; right: 0; top: 50%; height: 1px; }
.lx-fold__icon::after { top: 0; bottom: 0; left: 50%; width: 1px; transition: transform var(--fade) var(--ease); }
.lx-fold__item[open] .lx-fold__icon::after { transform: scaleY(0); }

.lx-fold__body { display: grid; gap: 2.25rem; padding: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(3rem, 6vw, 5rem); }
.lx-fold__item[open] .lx-fold__body { animation: lx-fold-in var(--fade) var(--ease) both; }
@keyframes lx-fold-in { from { opacity: 0; } to { opacity: 1; } }
.lx-fold__photo { display: block; overflow: hidden; cursor: zoom-in; }
.lx-fold__photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.lx-fold__text .lx-room__lede { text-wrap: pretty; }

/* The room's specification: label over value, between hairlines, instead of a run-on sentence */
.lx-spec { margin: 2.25rem 0 2.75rem; max-width: 28em; border-top: 1px solid var(--hairline); }
.lx-spec > div { display: grid; gap: 0.35rem; padding: 1rem 0; border-bottom: 1px solid var(--hairline); }
.lx-spec dt { font: 400 0.625rem/1.6 var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }
.lx-spec dd { font: 400 0.875rem/1.75 var(--sans); color: var(--ink); opacity: 0.86; }
.lx-spec__list { list-style: none; display: inline; }
.lx-spec__list li { display: inline; white-space: nowrap; }   /* lines break between items, never inside one */
.lx-spec__list li:not(:last-child)::after { content: '·'; content: '·' / ''; margin: 0 0.3em 0 0.55em; color: var(--gold); }

/* Settle, not zoom: the photo eases from 104% as its row opens, and leans in on hover */
@media (prefers-reduced-motion: no-preference) {
  .lx-fold__photo img { transition: transform calc(var(--fade) * 2) var(--ease); }
  .lx-fold__item[open] .lx-fold__photo img { animation: lx-settle calc(var(--fade) * 2) var(--ease) backwards; }
  .lx-fold__photo:hover img { transform: scale(1.025); }
  @keyframes lx-settle { from { transform: scale(1.04); } to { transform: scale(1); } }
}

/* ---------- Surroundings: a cinematic window on a navy "night gallery" band ----------
   One large photo at a time, changed by a slow dissolve (1.2s, opacity only) from a typographic
   index, a swipe or the arrow keys. The active place is marked by a gold segment on the index's
   hairline. A portrait photo is shown whole, as a plate on the navy, never cropped to 16:9.
   Without JavaScript: a swipeable strip with every caption listed. */
.lx-near { background: var(--navy); color: var(--ivory); padding: var(--void) var(--gutter); }
.lx-near .lx-eyebrow { color: var(--gold); }
.lx-near__head { text-align: center; margin-bottom: clamp(3rem, 6vw, 5rem); }
.lx-window { max-width: 80rem; margin: 0 auto; }

/* Fallback strip (no JavaScript) */
.lx-window__stage {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
}
.lx-window__slide { flex: 0 0 min(82vw, 30rem); scroll-snap-align: center; }
.lx-window__slide a { display: block; }
.lx-window__slide img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, 50% 50%); }
.lx-window__index { display: none; }
.lx-window__captions { display: grid; gap: 3.5rem; max-width: 32em; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center; }

/* Captions: flat, centred, Playfair */
.lx-window__name { margin-bottom: 0.75rem; font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.15 var(--serif); letter-spacing: -0.015em; color: var(--ivory); text-wrap: balance; }
.lx-window__line { font: italic 400 clamp(1.1rem, 1.5vw, 1.3rem)/1.5 var(--serif); color: var(--on-navy); text-wrap: pretty; }
.lx-window__credit { margin-top: 1.5rem; font: 400 0.6875rem/1.6 var(--sans); letter-spacing: 0.02em; color: var(--on-navy); opacity: 0.72; }
.lx-window__credit a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--hairline-navy); transition: text-decoration-color var(--fade) var(--ease); }
.lx-window__credit a:hover { text-decoration-color: var(--gold); }

/* Live: the window */
.lx-window.is-live .lx-window__stage {
  display: block; position: relative; overflow: hidden; margin: 0; padding: 0; aspect-ratio: 4 / 5;
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.lx-window.is-live .lx-window__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity calc(var(--fade) * 1.5) var(--ease), visibility 0s linear calc(var(--fade) * 1.5);
}
.lx-window.is-live .lx-window__slide.is-active { opacity: 1; visibility: visible; transition: opacity calc(var(--fade) * 1.5) var(--ease), visibility 0s; }
.lx-window.is-live .lx-window__slide a, .lx-window.is-live .lx-window__slide picture { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.lx-window.is-live .lx-window__slide img { width: 100%; height: 100%; aspect-ratio: auto; -webkit-user-drag: none; }
.lx-window.is-live .lx-window__slide[data-shape="tall"] img { object-fit: contain; }   /* the whole photo, as a plate on the navy */

/* The index: a hairline carrying the five places; a gold segment marks the one on view */
.lx-window.is-live .lx-window__index {
  list-style: none; display: grid; grid-template-columns: repeat(5, minmax(2.75rem, auto)); justify-content: space-between;
  margin-top: 1.75rem; border-top: 1px solid var(--hairline-navy);
}
.lx-window__go {
  position: relative; display: inline-flex; align-items: baseline; gap: 0.6rem; min-height: 2.75rem; padding: 1rem 0.25rem 0;
  background: transparent; border: 0; color: var(--ivory); opacity: 0.55; cursor: pointer;
  transition: opacity var(--fade) var(--ease);
}
.lx-window__go::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--gold);
  opacity: 0; transition: opacity var(--fade) var(--ease);
}
.lx-window__go:hover { opacity: 0.85; }
.lx-window__go.is-active { opacity: 1; }
.lx-window__go.is-active::before { opacity: 1; }
.lx-window__num { font: italic 400 1.05rem/1 var(--serif); font-variant-numeric: oldstyle-nums; }
.lx-window__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* phones: numerals only; the caption names the place */

.lx-window.is-live .lx-window__captions { gap: 0; }
.lx-window.is-live .lx-window__caption { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--fade) var(--ease), visibility 0s linear var(--fade); }
.lx-window.is-live .lx-window__caption.is-active { opacity: 1; visibility: visible; transition: opacity var(--fade) var(--ease) 0.25s, visibility 0s; }

@media (max-width: 47.99rem) {
  .lx-window.is-live .lx-window__stage { margin: 0 calc(-1 * var(--gutter)); }   /* the window runs edge to edge on phones */
}
@media (min-width: 48rem) {
  .lx-window__slide img { aspect-ratio: 3 / 2; }
  .lx-window.is-live .lx-window__stage { aspect-ratio: 16 / 9; }
  .lx-window.is-live .lx-window__index { display: flex; justify-content: center; gap: clamp(1.5rem, 3.5vw, 3.5rem); }
}
@media (min-width: 64rem) {   /* names join the numerals once all five fit on one line */
  .lx-window__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; font: 400 1.05rem/1.3 var(--serif); }
}

@media (max-width: 47.99rem) {
  .lx-fold__photo { margin: 0 calc(-1 * var(--gutter)); }   /* photos run edge to edge on phones */
}

@media (min-width: 48rem) {
  .lx-fold, .lx-amenities { max-width: 92rem; margin-left: auto; margin-right: auto; padding-left: 8.33%; }   /* aligned with the section heads */
  .lx-fold__row { grid-template-columns: 1fr auto auto; column-gap: clamp(2rem, 4vw, 4rem); }
  .lx-fold__row:has(.lx-fold__num) { grid-template-columns: 3rem 1fr auto; column-gap: 1.5rem; }
  .lx-fold__price { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right; }
  .lx-fold__body { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); align-items: end; }
  .lx-fold__photo { grid-column: 1 / 8; }
  .lx-fold__text { grid-column: 9 / 13; padding-bottom: 1%; }
}

@media (min-width: 48rem) {

  .lx-wellness { grid-template-columns: 7fr 5fr; align-items: center; column-gap: clamp(3rem, 8vw, 9rem); }

  /* The spread: one 12-column grid; column 8 is the void that carries the spine */
  .lx-spread__head, .lx-spread {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 3rem);
    max-width: 96rem; margin-left: auto; margin-right: auto;
    padding-left: var(--gutter); padding-right: var(--gutter);
  }
  .lx-spread__head { --head-pb: clamp(5rem, 9vw, 8rem); display: grid; padding-bottom: var(--head-pb); }
  .lx-spread__title { grid-column: 1 / 8; grid-row: 1; font-size: clamp(3.5rem, 7vw, 6rem); line-height: 0.98; }
  .lx-spine { display: block; grid-column: 8; justify-self: center; width: 1px; background: var(--gold); }
  .lx-spread__head .lx-spine { grid-row: 1; margin-bottom: calc(-1 * var(--head-pb)); }

  /* rows: note · breath · III image · III caption · void · IV image · captions of II and IV */
  .lx-spread { grid-template-rows: auto clamp(5rem, 10vw, 9rem) auto auto 1fr auto auto; padding-top: 3rem; }
  .lx-spread > .lx-spine { grid-row: 1 / -1; }
  .lx-spread__note { display: contents; }
  .lx-spread__note > .lx-plate__label { grid-column: 1 / 8; grid-row: 1; align-self: baseline; padding-top: 0; background: none; }
  .lx-spread__note > .lx-body { grid-column: 9 / 13; grid-row: 1; align-self: baseline; }
  .lx-plate { display: grid; grid-template-rows: subgrid; margin: 0; }
  .lx-plate figcaption { margin: 2.5rem 0 0; padding-top: 0; background: none; }
  .lx-plate--ii  { grid-column: 1 / 8;  grid-row: 3 / 8; }
  .lx-plate--ii  .lx-plate__img { grid-row: 1 / 5; }
  .lx-plate--ii  figcaption { grid-row: 5; }
  .lx-plate--iii { grid-column: 9 / 13; grid-row: 3 / 5; }
  .lx-plate--iv  { grid-column: 9 / 13; grid-row: 6 / 8; }

  .lx-words__list { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 8vw, 9rem); }
  .lx-words__list .review:nth-child(even) { margin-top: 9rem; }
  .lx-words__list .review:nth-child(3n) { grid-column: 1 / -1; justify-self: center; text-align: center; max-width: 34em; }
  .lx-words__list .review:nth-child(3n) .review-source { justify-content: center; }

  .lx-footer__cols { grid-template-columns: repeat(3, 1fr); text-align: left; }

  /* Section heads share the asymmetry of what follows; centring is kept for the intro, memoir and closing */
  .lx-stay__head { text-align: left; max-width: 92rem; margin-left: auto; margin-right: auto; padding-left: 8.33%; }
  .lx-words__head { text-align: left; max-width: 72rem; margin-left: auto; margin-right: auto; }
}

@media (max-width: 47.99rem) {
}

/* Reduced motion: the fades and the hero dissolve are opacity only (nothing slides, zooms or moves),
   so by the owner's decision they run for every visitor. Only smooth anchor scrolling, which does
   move the page, is limited to visitors with no motion preference (see html, above). */