/* ═════════════════════════════════════════════════════════
   SUN SEA & LOVE — Stylesheet
   ═════════════════════════════════════════════════════════ */

:root {
  --cream:        #FFFFFF;
  --cream-2:      #F3F3F1;
  --cream-soft:   #F9F9F7;
  --navy:         #1F2D44;
  --navy-deep:    #16223A;
  --navy-ink:     #0F1A2E;
  --sand:         #C9B796;
  --sand-2:       #B8A582;
  --rule:         rgba(31,45,68,.18);
  --rule-soft:    rgba(31,45,68,.08);
  --muted:        #5B6677;

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", system-ui, -apple-system, sans-serif;

  --maxw: 1380px;

  /* NORD-style rounded corners */
  --r-img:   22px;   /* large media: hero crops, maps, feature photos */
  --r-card:  18px;   /* cards, panels, blocks */
  --r-sm:    12px;   /* smaller media, inputs */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
/* match weight & size of italic to the regular display face */
.serif em { font-family: var(--serif); font-style: italic; font-weight: 400; }
em { font-style: italic; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--navy);
  margin: 0 0 18px;
  opacity: .8;
}
.eyebrow--light { color: var(--cream); }

.h-display {
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.04;
  margin: 0 0 22px;
  letter-spacing: -0.015em;
  font-weight: 400;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all .25s ease;
  white-space: nowrap;
}
.btn--solid {
  background: var(--navy);
  color: var(--cream);
}
.btn--solid:hover { background: var(--navy-ink); transform: translateY(-1px); }
.btn--line {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn--line:hover { background: var(--navy); color: var(--cream); }
.btn--ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(255,255,255,.55);
}
.btn--ghost:hover { background: rgba(255,255,255,.1); }
.btn--block { width: 100%; justify-content: center; padding: 16px; }

/* ─── NAVIGATION ────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 16px 0;
  transition: background .35s ease, padding .35s ease, color .35s ease, box-shadow .35s ease;
  color: var(--navy);
  background: rgba(255,255,255,.0);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 36px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}
.nav__brand-mark {
  width: 30px; height: 36px;
  display: grid; place-items: center;
}
.nav__brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.nav__brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.nav__brand-name {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.nav__brand-sub {
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: .7;
  margin-top: 4px;
}
.nav__links {
  margin-left: auto;
  display: flex;
  gap: 28px;
  font-size: 13px;
  font-weight: 500;
}
.nav__links a {
  position: relative;
  opacity: .8;
  transition: opacity .2s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav__cta {
  padding: 10px 18px;
  font-size: 11px;
}

.nav.is-stuck {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  padding: 10px 0;
  box-shadow: 0 1px 0 var(--rule-soft);
}

/* ─── Language switcher ───────────────────────────── */
.lang { position: relative; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: inherit;
  transition: all .2s;
}
.lang__btn:hover { background: rgba(31,45,68,.06); }
.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--cream);
  color: var(--navy);
  list-style: none;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  min-width: 150px;
  box-shadow: 0 20px 40px -20px rgba(15,26,46,.25);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: all .2s ease;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__menu li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s;
}
.lang__menu li span:first-child {
  font-weight: 700;
  font-size: 10px;
  background: var(--navy);
  color: var(--cream);
  padding: 3px 6px;
  border-radius: 3px;
  letter-spacing: 0.08em;
}
.lang__menu li:hover { background: var(--cream-2); }

.nav__burger { display: none; background: none; border: 0; flex-direction: column; gap: 5px; padding: 6px; color: inherit; }
.nav__burger span { width: 22px; height: 1.5px; background: currentColor; transition: .3s; }

@keyframes pulse {
  0%   { transform: scale(0.6); opacity: .6 }
  100% { transform: scale(1.6); opacity: 0 }
}

@keyframes scrollLine {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ─── CINEMA BAND ───────────────────────────────── */
.cinema {
  position: relative;
  height: 78vh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  margin: clamp(28px, 4.5vw, 64px) clamp(16px, 3vw, 40px) 0;
  border-radius: var(--r-img);
}
.cinema__img {
  position: absolute; inset: 0;
}
.cinema__img img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12);
}
.cinema__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(15,26,46,.25) 0%, rgba(15,26,46,0) 30%, rgba(15,26,46,.55) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 80px 56px;
  color: #fff;
}
.cinema__overlay .eyebrow { color: rgba(255,255,255,.85); margin-bottom: 12px; }
.cinema__quote {
  font-size: clamp(28px, 3.4vw, 52px);
  max-width: 880px;
  line-height: 1.18;
  margin: 0;
  color: #fff;
  font-weight: 400;
}

/* ─── SECTION HEADS ─────────────────────────────────── */
.section__head { max-width: 880px; margin: 0 0 60px; }
.section__head--center { text-align: center; margin: 0 auto 60px; }
.section__lede { font-size: 17px; color: var(--muted); max-width: 580px; margin: 0 auto; }

/* ─── INTRO ─────────────────────────────────────────── */
.intro {
  padding: 140px 56px 100px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: center;
}
.intro__copy p { color: var(--muted); font-size: 17px; max-width: 480px; margin: 0 0 20px; }
.intro__signals {
  list-style: none;
  padding: 32px 0 0;
  margin: 32px 0 0;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
}
.intro__signals li {
  font-size: 13px;
  letter-spacing: 0.06em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--navy);
}
.intro__signals span:first-child {
  font-family: var(--serif);
  font-size: 36px;
  line-height: 1;
}

.intro__art {
  position: relative;
  height: 660px;
}
.intro__photo {
  position: absolute;
  margin: 0;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(15,26,46,.35);
}
.intro__photo img { width: 100%; height: 100%; object-fit: cover; }
.intro__photo--a { width: 88%; height: 56%; top: 0; right: 0; }
.intro__photo--b { width: 62%; height: 58%; bottom: 0; left: 0; z-index: 2; }
.intro__cap {
  position: absolute;
  left: 14px; bottom: 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  color: var(--navy);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 2px;
}
.intro__cap--tr {
  left: auto; right: 14px;
  bottom: auto; top: 14px;
}
.intro__cap-num {
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sand-2);
}

/* ─── STRIP ─────────────────────────────────────────── */
.strip {
  background: var(--navy);
  color: var(--cream);
  padding: 38px 56px;
}
.strip__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--maxw);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
}
.strip__list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  position: relative;
  padding-left: 28px;
}
.strip__list li .serif {
  position: absolute;
  left: 0; top: -4px;
  font-size: 16px;
  opacity: .55;
}
.strip__list strong { font-weight: 600; font-size: 14px; letter-spacing: 0.02em; }
.strip__sub { font-size: 12px; opacity: .7; }

/* ─── GALLERY ──────────────────────────────────────── */
.gallery {
  padding: 130px 56px 70px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(140px, 14.5vw, 205px);
  gap: 16px;
}
.g {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-img);
  background: var(--cream-2);
  cursor: zoom-in;
}
.g img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease;
}
.g:hover img { transform: scale(1.05); }
.g figcaption {
  position: absolute;
  left: 16px; bottom: 14px;
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: all .3s ease;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.g::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15,26,46,.45) 100%);
  opacity: 0; transition: opacity .3s;
}
.g:hover::after, .g:hover figcaption { opacity: 1; transform: translateY(0); }

/* Bento collage — bands of 6 columns that tile perfectly (no gaps).
   Images are cropped to fill via object-fit: cover. */
.g--1  { grid-column: span 4; grid-row: span 2; }   /* band 1: 4 + 2 */
.g--2  { grid-column: span 2; grid-row: span 2; }
.g--3  { grid-column: span 2; grid-row: span 2; }   /* band 2: 2 + 2 + 2 */
.g--4  { grid-column: span 2; grid-row: span 2; }
.g--5  { grid-column: span 2; grid-row: span 2; }
.g--6  { grid-column: span 3; grid-row: span 2; }   /* band 3: 3 + 3 */
.g--7  { grid-column: span 3; grid-row: span 2; }
.g--8  { grid-column: span 2; grid-row: span 2; }   /* band 4: 2 + 4 */
.g--9  { grid-column: span 4; grid-row: span 2; }
.g--10 { grid-column: span 2; grid-row: span 2; }   /* band 5: 2 + 2 + 2 */
.g--11 { grid-column: span 2; grid-row: span 2; }
.g--12 { grid-column: span 2; grid-row: span 2; }
.g--13 { grid-column: span 3; grid-row: span 2; }    /* band 6: 3 + 3 */
.g--14 { grid-column: span 3; grid-row: span 2; }
.g--15 { grid-column: span 2; grid-row: span 2; }    /* band 7: 2 + 4 */
.g--16 { grid-column: span 4; grid-row: span 2; }

/* "View more" — start with the first 3 bands (7 photos); reveal the rest */
.gallery.is-collapsed .gallery__grid .g:nth-child(n+8) { display: none; }
.gallery__more-wrap { text-align: center; margin-top: 34px; }
.gallery__more {
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  border: 1.5px solid var(--navy);
  border-radius: 999px;
  padding: 13px 30px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.gallery__more:hover { background: var(--navy); color: #fff; }

/* phones: a 6-col bento turns to tiny squares → swipeable carousel,
   one photo at a time with a sliver of the next peeking. */
@media (max-width: 720px) {
  .gallery__grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    grid-auto-rows: auto;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    margin: 0 -28px;
    padding: 0 28px 6px;
    scroll-padding: 0 28px;
  }
  .gallery__grid::-webkit-scrollbar { display: none; }
  .gallery__grid .g {
    grid-column: auto !important;
    grid-row: auto !important;
    flex: 0 0 86%;
    scroll-snap-align: center;
    aspect-ratio: 4 / 3;
    height: auto;
    box-shadow: 0 30px 60px -30px rgba(15,26,46,.3);
    /* hold position — no reveal/parallax transform that looked scattered */
    opacity: 1 !important;
    transform: none !important;
  }
  .gallery__grid .g img { height: 100%; }
  .g figcaption { opacity: 1; transform: none; }
  .g::after { opacity: 1; }
}

/* ─── ROOMS ─────────────────────────────────────────── */
.rooms {
  padding: 80px 56px 120px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.rooms__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 130px; }
.room { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; }
.room--reverse .room__media { order: 2; }
.room--reverse .room__body { order: 1; }
.room__num {
  display: block;
  font-size: 64px;
  color: var(--sand);
  font-style: italic;
  line-height: 1;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}
.room__media {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 40px 60px -30px rgba(15,26,46,.3);
}
.room__media img { width: 100%; height: 100%; object-fit: cover; }
/* Two photos overlapping in a corner (big bedroom + bathroom inset) —
   same editorial look as the intro, so both photos read large. */
.room__media--pair {
  position: relative;
  height: 580px;
  aspect-ratio: auto;
  overflow: visible;
  box-shadow: none;
  border-radius: 0;
}
.room__media--pair .room__pic {
  position: absolute;   /* beat motion.js's .m-holder { position: relative } */
  margin: 0;
  border-radius: var(--r-img);   /* rounded like the rest of the site */
  overflow: hidden;
  box-shadow: 0 30px 60px -25px rgba(15,26,46,.35);
}
.room__pic img { width: 100%; height: 100%; object-fit: cover; }
.room__pic--main  { width: 88%; height: 54%; top: 0; left: 0; }
.room__pic--inset { width: 52%; height: 60%; bottom: 0; right: 0; z-index: 2; }
.room--reverse .room__pic--main  { left: auto; right: 0; }
.room--reverse .room__pic--inset { right: auto; left: 0; }
/* twin-room bed shot is square — keep the lower part (the beds) in frame */
.room--reverse .room__pic--main img { object-position: center 85%; }

.room__body h3 {
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.08;
  margin: 0 0 18px;
  font-weight: 400;
}
.room__body p { color: var(--muted); font-size: 16px; margin: 0 0 20px; max-width: 480px; }
.room__bullets {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  border-top: 1px solid var(--rule);
}
.room__bullets li {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.room__bullets li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--sand-2);
  border-radius: 50%;
  flex: 0 0 auto;
}

/* ─── NIGHT BAND ────────────────────────────────────── */
/* Accessibility ribbon */
.acc {
  background: var(--cream-soft);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  padding: 80px 56px;
}
.acc__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.acc__icon {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  color: var(--navy);
  margin-bottom: 14px;
}
.acc__icon svg { width: 38px; height: 38px; }
.acc .eyebrow { margin: 0; }
.acc__head {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  margin: 0 0 6px;
  font-weight: 400;
}
.acc__line {
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
  color: var(--muted);
  max-width: 620px;
}
.acc__line strong { color: var(--navy); font-weight: 600; }

.night {
  position: relative;
  padding: 160px 56px;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.night__bg { position: absolute; inset: 0; z-index: -2; }
.night__bg img { width: 100%; height: 100%; object-fit: cover; }
.night__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(15,26,46,.5) 0%, rgba(15,26,46,.85) 100%);
}
.night__content { max-width: 760px; margin: 0 auto; text-align: center; }
.night__content p {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,.86);
  max-width: 600px;
  margin: 0 auto;
}
.night__stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 60px;
  flex-wrap: wrap;
}
.night__stats > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.night__stats .serif { font-size: 56px; line-height: 1; }
.night__stats span:last-child {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: .75;
}

/* Night slideshow */
.night__slides {
  position: absolute; inset: 0; z-index: -2;
}
.night__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.night__slide.is-active { opacity: 1; }

.night__nav {
  position: absolute;
  bottom: 40px;
  right: 56px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  color: var(--cream);
}
.night__btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  color: var(--cream);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .25s ease;
}
.night__btn:hover {
  background: var(--cream);
  color: var(--navy);
  border-color: var(--cream);
}
.night__btn svg { width: 16px; height: 16px; }
.night__count {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.night__count .serif {
  font-style: italic;
  font-size: 20px;
}
.night__count-sep { opacity: .45; }
.night__count-total { opacity: .55; }

/* ─── EXPERIENCES ─────────────────────────────────── */
.exp {
  padding: 140px 56px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.exp__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.card {
  background: var(--cream-soft);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s ease, box-shadow .4s ease;
  border: 1px solid var(--rule-soft);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -30px rgba(15,26,46,.3);
}
.card__media { aspect-ratio: 5/4; overflow: hidden; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s ease;
}
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: 32px; }
.card__body h3 {
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 14px;
  font-weight: 400;
}
.card__body p { color: var(--muted); font-size: 15px; margin: 0; }
.card__tags {
  list-style: none;
  padding: 24px 0 0;
  margin: 24px 0 0;
  border-top: 1px solid var(--rule);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.card__tags li {
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--navy);
}

/* ─── AMENITIES ───────────────────────────────────── */
.amen {
  background: var(--cream-2);
  padding: 140px 56px;
}
.amen__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
}
.amen__head h2 { margin-bottom: 22px; }
.amen__head p { color: var(--muted); font-size: 16px; max-width: 380px; }
.amen__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 64px;
}
.amen__cols h4 {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.amen__cols ul { list-style: none; padding: 0; margin: 0; }
.amen__cols li {
  font-size: 14px;
  padding: 7px 0;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
}
.amen__cols li::before { content: "—"; color: var(--sand-2); }

/* ─── CONCIERGE ───────────────────────────────────── */
.concierge {
  padding: 140px 56px 40px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.conc__note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 50px 0 0;
  padding: 22px 26px;
  background: var(--cream-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  max-width: 760px;
}
.conc__note-mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cream);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  flex: 0 0 auto;
  line-height: 1;
  padding-bottom: 2px;
}
.conc__note p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}
.conc__note strong { color: var(--navy); font-weight: 600; }
.conc__grid {
  list-style: none;
  padding: 0;
  margin: 70px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.conc__item {
  background: var(--cream);
  padding: 44px 36px;
  position: relative;
  transition: background .3s ease;
}
.conc__item:hover { background: var(--cream-soft); }
.conc__mark {
  display: inline-block;
  font-size: 28px;
  font-style: italic;
  color: var(--sand-2);
  margin-bottom: 14px;
  line-height: 1;
}
.conc__item h4 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.conc__item p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}


/* ─── LOCATION ────────────────────────────────────── */
.loc {
  padding: 40px 56px 140px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.loc__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: center;
}
.loc__copy > p { color: var(--muted); font-size: 16px; max-width: 460px; }
.loc__list {
  list-style: none;
  padding: 32px 0 0;
  margin: 32px 0 0;
  border-top: 1px solid var(--rule);
}
.loc__list li {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.loc__dist {
  font-size: 28px;
  min-width: 110px;
  color: var(--navy);
}
.loc__list strong { display: block; font-size: 15px; margin-bottom: 4px; }
.loc__sub { color: var(--muted); font-size: 13px; }
.loc__coord {
  margin-top: 32px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.loc__coord span { font-weight: 600; }

.loc__map {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--cream-2);
  box-shadow: 0 30px 60px -30px rgba(15,26,46,.3);
}
.loc__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.15) contrast(1.02);
}
.loc__open {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--cream);
  color: var(--navy);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 10px 30px -10px rgba(15,26,46,.4);
  transition: transform .2s;
}
.loc__open:hover { transform: translateY(-2px); }

/* ─── BOOKING ─────────────────────────────────────── */
.book {
  background: var(--navy);
  color: var(--cream);
  padding: 140px 56px;
}
.book__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 100px;
  align-items: start;
}
.book__copy p {
  font-size: 16px;
  color: rgba(255,255,255,.78);
  max-width: 460px;
}
.book__rate {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 36px 0 0;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.book__rate-from {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 6px;
}
.book__rate-num {
  font-size: 56px;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.book__rate-cur { font-size: 28px; margin-left: 4px; opacity: .75; }
.book__rate-lbl {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: .65;
  margin-top: 6px;
}
.book__rate-divider {
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,.18);
}
.book__rate-rule {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  opacity: .78;
}
.book__perks {
  list-style: none;
  padding: 28px 0 0;
  margin: 0;
}
.book__perks li {
  font-size: 14px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.book__perks li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--sand);
  border-radius: 50%;
}
.book__legal {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-top: 24px;
  line-height: 1.6;
}

.book__form {
  background: var(--cream);
  color: var(--navy);
  padding: 40px;
  border-radius: 6px;
  position: relative;
}
.book__form-eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--navy);
}
.field > span em {
  text-transform: none; letter-spacing: 0;
  color: var(--muted); font-weight: 400; font-style: normal;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--navy);
  transition: border-color .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none; border-color: var(--navy);
}
.field textarea { resize: vertical; min-height: 80px; }

.book__estimate {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  margin: 4px 0 18px;
  background: var(--cream-2);
  border-radius: var(--r-sm);
  font-size: 13px;
}
.book__estimate-rows { display: flex; flex-direction: column; gap: 6px; }
.ber { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--navy); }
.ber span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ber--disc { color: #2E9E6B; font-weight: 600; }   /* discount in green */
.ber--muted { color: var(--muted); font-size: 12.5px; }
.ber--warn { color: #B45309; font-weight: 600; font-size: 13px; }   /* below-minimum notice */
.book__estimate-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 10px; border-top: 1px solid var(--rule);
}
.book__estimate-total > span:first-child {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; opacity: .7;
}
.book__estimate-amount {
  font-family: var(--serif);
  font-size: 30px;
  letter-spacing: -0.01em;
}
.book__estimate-sub { font-size: 12.5px; color: var(--muted); }

/* anti-spam honeypot — kept out of view and out of the tab order */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ── Map placeholder (shown until the visitor accepts loading Google) ── */
.loc__map-ph {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 24px;
  background: var(--cream-2);
  color: var(--navy);
}
.loc__map-ph[hidden] { display: none; }
.loc__map-ph p { margin: 0; font-size: 14px; max-width: 320px; color: var(--muted); line-height: 1.5; }
.loc__map-btn {
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: #fff; background: var(--navy); border: none; border-radius: 999px;
  padding: 11px 26px; cursor: pointer; transition: opacity .15s ease;
}
.loc__map-btn:hover { opacity: .88; }

/* ── Cookie / third-party consent banner ── */
.cc {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 18px; z-index: 1000;
  width: min(680px, calc(100% - 32px));
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--navy); color: #ECE7DA;
  border-radius: 14px; padding: 16px 20px;
  box-shadow: 0 20px 50px -16px rgba(15,26,46,.55);
}
.cc[hidden] { display: none; }
.cc__text { margin: 0; font-size: 13px; line-height: 1.5; flex: 1 1 320px; }
.cc__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc__link { color: #C9CFDA; font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
.cc__btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 999px; padding: 9px 18px;
  background: transparent; color: #ECE7DA; border: 1px solid rgba(255,255,255,.3);
  transition: background .15s ease, color .15s ease;
}
.cc__btn:hover { background: rgba(255,255,255,.1); }
.cc__btn--solid { background: var(--sand, #d8c9a8); color: var(--navy); border-color: transparent; }
.cc__btn--solid:hover { opacity: .9; background: var(--sand, #d8c9a8); }
@media (max-width: 560px){ .cc { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; } .cc__text { flex: 0 0 auto; } .cc__actions { justify-content: center; } }

/* ── Two selectable rates (standard vs non-refundable) ── */
.book__rates { display: flex; flex-direction: column; gap: 8px; }
.book__rates:empty { display: none; }
.rate {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  background: var(--cream);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.rate:hover { border-color: var(--navy); }
.rate.is-sel { border-color: var(--navy); background: #fff; box-shadow: 0 1px 0 var(--navy) inset, 0 0 0 1px var(--navy) inset; }
.rate input { accent-color: var(--navy); width: 16px; height: 16px; flex: none; margin: 0; }
.rate__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rate__name { font-weight: 600; font-size: 14px; color: var(--navy); }
.rate__tag { font-size: 11.5px; color: var(--muted); }
.rate__price { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; flex: none; }
.rate__amt { font-family: var(--serif); font-size: 19px; color: var(--navy); font-variant-numeric: tabular-nums; }
.rate__tot { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; opacity: .6; }
.rate--best .rate__amt { color: #2E9E6B; }

/* ── Optional extras (e.g. weekly cleaning, >6-night stays) ── */
.book__extras[hidden] { display: none; }
.book__extras { margin: 2px 0 0; }
.extra {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  background: var(--cream);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.extra:hover { border-color: var(--navy); }
.extra:has(input:checked) { border-color: var(--navy); background: #fff; }
.extra input { accent-color: var(--navy); width: 16px; height: 16px; flex: none; margin: 0; }
.extra__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.extra__name { font-weight: 600; font-size: 14px; color: var(--navy); }
.extra__sub { font-size: 11.5px; color: var(--muted); }
.extra__price { font-family: var(--serif); font-size: 16px; color: var(--navy); font-variant-numeric: tabular-nums; flex: none; }

.book__sent {
  font-size: 13px;
  text-align: center;
  margin: 14px 0 0;
  color: var(--navy);
  opacity: 0;
  transform: translateY(6px);
  transition: all .35s ease;
}
.book__sent.is-shown { opacity: 1; transform: none; }

/* ─── FOOTER ──────────────────────────────────────── */
.ft {
  background: var(--navy-deep);
  color: var(--cream);
  padding: 100px 56px 36px;
}
.ft__grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 60px;
}
.ft__logo {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 0.95;
  margin-bottom: 14px;
  color: var(--cream);
}
.ft__brand p { font-size: 13px; opacity: .7; }
.ft h5 {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 20px;
  opacity: .9;
}
.ft ul { list-style: none; padding: 0; margin: 0; }
.ft li { font-size: 14px; padding: 4px 0; opacity: .75; }
.ft a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.ft__legal { display: inline-flex; gap: 7px; }
.ft__legal a { text-decoration: underline; text-underline-offset: 3px; }
.ft__base {
  max-width: var(--maxw);
  margin: 70px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  opacity: .55;
}

/* ─── LIGHTBOX ────────────────────────────────────── */
.lb {
  position: fixed; inset: 0;
  background: rgba(15,26,46,.94);
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 60px;
  animation: lbIn .25s ease;
}
.lb[hidden] { display: none; }
@keyframes lbIn { from { opacity: 0 } to { opacity: 1 } }
.lb__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
}
.lb__close, .lb__prev, .lb__next {
  position: absolute;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  transition: all .2s;
}
.lb__close:hover, .lb__prev:hover, .lb__next:hover { background: rgba(255,255,255,.2); }
.lb__close { top: 24px; right: 24px; }
.lb__prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 24px; top: 50%; transform: translateY(-50%); }

/* Phones: bigger image, arrows at the bottom (not over the photo) */
@media (max-width: 720px) {
  .lb { padding: 10px; }
  .lb__img { max-width: 96vw; max-height: 72vh; border-radius: 12px; }
  .lb__close { top: 14px; right: 14px; width: 44px; height: 44px; }
  .lb__prev, .lb__next {
    top: auto; bottom: 18px; transform: none;
    width: 54px; height: 54px; font-size: 26px;
    background: rgba(255,255,255,.16);
  }
  .lb__prev { left: calc(50% - 66px); }
  .lb__next { right: calc(50% - 66px); }
}

/* ─── REVEAL ANIMATION ────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s ease;
  transition-delay: .05s;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1080px) {
  .nav__inner { padding: 0 22px; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--cream);
    padding: 12px 22px 22px;
    border-top: 1px solid var(--rule-soft);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 16px;
    color: var(--navy);   /* dropdown is light → force dark text (was white over the dark cover) */
    opacity: 1;
  }
  .nav__links a:last-child { border-bottom: 0; }
  /* keep the dark text even while the nav sits over the dark cover */
  .nav:not(.is-stuck) .nav__links a { color: var(--navy); }

  .nav__burger { display: flex; }
  .nav__cta { display: none; }

  .cinema { height: 60vh; min-height: 480px; }
  .cinema__overlay { padding: 40px 28px; }

  .intro { padding: 80px 28px; }
  .intro__grid { grid-template-columns: 1fr; gap: 60px; }
  .intro__art { height: 520px; }

  .strip { padding: 36px 28px; }
  .strip__list { grid-template-columns: repeat(2, 1fr); gap: 28px; }

  .gallery { padding: 80px 28px; }
  /* tablet: keep the bento but a touch shorter */
  .gallery__grid { grid-auto-rows: clamp(120px, 21vw, 180px); }

  .rooms { padding: 80px 28px; }
  .rooms__list { gap: 80px; }
  .room { grid-template-columns: 1fr; gap: 32px; }
  .room--reverse .room__media { order: 0; }
  .room--reverse .room__body { order: 1; }
  .room__num { font-size: 56px; margin-bottom: 14px; }
  /* on mobile, keep the overlap: bedroom big and dominant, bathroom a
     small inset in the corner (people sleep in the beds, not the bath) */
  .room__media--pair { height: 380px; }
  .room__pic--main  { width: 94%; height: 70%; }
  .room__pic--inset { width: 46%; height: 40%; }

  .acc { padding: 56px 28px; }
  .acc__icon { width: 70px; height: 70px; }
  .acc__icon svg { width: 32px; height: 32px; }

  .night { padding: 100px 28px 110px; }
  .night__nav { bottom: 24px; right: 28px; padding: 8px 12px; gap: 12px; }
  .night__btn { width: 34px; height: 34px; }

  .exp { padding: 80px 28px; }
  .exp__cards { grid-template-columns: 1fr; }

  .amen { padding: 80px 28px; }
  .amen__grid { grid-template-columns: 1fr; gap: 40px; }

  .concierge { padding: 80px 28px; }
  .conc__grid { grid-template-columns: repeat(2, 1fr); }


  .loc { padding: 80px 28px; }
  .loc__grid { grid-template-columns: 1fr; gap: 50px; }

  .book { padding: 80px 28px; }
  .book__grid { grid-template-columns: 1fr; gap: 50px; }
  .book__form { padding: 28px; }

  .ft { padding: 70px 28px 28px; }
  .ft__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .ft__base { flex-direction: column; gap: 8px; text-align: center; }
}

@media (max-width: 560px) {
  .amen__cols { grid-template-columns: 1fr; }
  .conc__grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .ft__grid { grid-template-columns: 1fr; gap: 32px; }
  .book__rate { flex-wrap: wrap; }
  .book__rate-divider { display: none; }
  .book__estimate { flex-direction: column; align-items: flex-start; }
  .book__estimate-sub { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════ */
.theme-toggle {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
  position: relative;
}
.theme-toggle:hover { background: rgba(31,45,68,.06); }
.theme-toggle__icon {
  width: 17px; height: 17px;
  position: absolute;
  transition: opacity .3s ease, transform .4s ease;
}
.theme-toggle__moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
.theme-toggle__sun  { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle__sun  { opacity: 0; transform: rotate(40deg) scale(.6); }
html[data-theme="dark"] .theme-toggle__moon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.08); }

/* ═══════════════════════════════════════════════════════
   DARK THEME
   Re-maps the semantic tokens, then patches the handful of
   places where a token's role (surface vs. ink) conflicts.
   ═══════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --cream:        #0E1623;   /* page surface (was light) */
  --cream-2:      #141F31;   /* alt section surface       */
  --cream-soft:   #18243A;   /* elevated card surface     */
  --navy:         #ECE7DA;   /* primary ink (was dark)    */
  --navy-deep:    #0A111C;   /* deepest surface (footer)  */
  --navy-ink:     #DAD3C3;   /* primary-button hover      */
  --sand:         #D8C7A0;
  --sand-2:       #C7B58E;
  --muted:        #9BA6B6;
  --rule:         rgba(255,255,255,.16);
  --rule-soft:    rgba(255,255,255,.08);
  background: #0E1623;
}
html[data-theme="dark"] body { background: #0E1623; }

/* Nav stuck bar */
html[data-theme="dark"] .nav.is-stuck {
  background: rgba(14,22,35,.9);
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
}
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .lang__btn { border-color: rgba(255,255,255,.2); }

/* eyebrow--light sits on permanently-dark photo bands → keep light */
html[data-theme="dark"] .eyebrow--light { color: #ECE7DA; }

/* Strip: in light mode it's a navy band; in dark make it an elevated surface */
html[data-theme="dark"] .strip {
  background: #141F31;
  color: #ECE7DA;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

/* Booking band */
html[data-theme="dark"] .book {
  background: #101A29;
  color: #ECE7DA;
}
html[data-theme="dark"] .book__form {
  background: #18243A;
  border: 1px solid rgba(255,255,255,.08);
}
html[data-theme="dark"] .book__copy p { color: rgba(236,231,218,.78); }

/* Footer text back to light (footer surface stays dark via --navy-deep) */
html[data-theme="dark"] .ft { color: #ECE7DA; }
html[data-theme="dark"] .ft__logo { color: #ECE7DA; }

/* Cards / panels get a hairline so they read against the dark page */
html[data-theme="dark"] .card,
html[data-theme="dark"] .conc__item { border: 1px solid rgba(255,255,255,.07); }
html[data-theme="dark"] .conc__grid { background: rgba(255,255,255,.08); }

/* Primary solid button → warm cream on dark */
html[data-theme="dark"] .btn--solid { color: #0E1623; }
html[data-theme="dark"] .btn--solid:hover { color: #0E1623; }

/* Night nav pill + hover already light; keep */
html[data-theme="dark"] .night__btn:hover { color: #0E1623; }

/* Photo caption chips stay light over imagery (good in both themes) */
html[data-theme="dark"] .intro__cap { background: rgba(20,30,48,.9); color: #ECE7DA; }

/* Map keeps its own colors; soften its frame */
html[data-theme="dark"] .loc__map iframe { filter: grayscale(.3) contrast(.95) brightness(.9); }

/* Smooth the whole repaint */
html, body { transition: background-color .4s ease, color .4s ease; }

/* ═══════════════════════════════════════════════════════
   MOTION LAYER — scroll progress, staggered reveals, parallax,
   image fade-in, button micro-interactions, brand signature.
   All animate transform/opacity only. Honors reduced-motion.
   ═══════════════════════════════════════════════════════ */

/* Scroll progress bar */
.scrollbar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 80;
  background: linear-gradient(90deg, var(--sand-2), var(--sand));
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}
html[data-theme="dark"] .scrollbar {
  background: linear-gradient(90deg, var(--sand-2), #EBD9AE);
  box-shadow: 0 0 12px rgba(216,199,160,.5);
}

/* Staggered rise-in (applied by motion.js) */
.m-rise {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22,.61,.25,1),
              transform .7s cubic-bezier(.22,.61,.25,1);
  will-change: transform, opacity;
}
.m-rise.in { opacity: 1; transform: none; }

/* Image reveal (skeleton → fade/scale in) */
.m-img {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .8s ease, transform 1.2s cubic-bezier(.22,.61,.25,1);
}
.m-img.loaded { opacity: 1; transform: none; }
/* shimmer placeholder on the figure/holder behind a loading image */
.m-holder { position: relative; overflow: hidden; }
.m-holder.is-loading::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
    rgba(0,0,0,.015) 30%, rgba(0,0,0,.05) 50%, rgba(0,0,0,.015) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
html[data-theme="dark"] .m-holder.is-loading::before {
  background: linear-gradient(100deg,
    rgba(255,255,255,.02) 30%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.02) 70%);
  background-size: 200% 100%;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Parallax headroom — give targeted images room to travel */
.cinema__img img,
.intro__photo img { will-change: transform; }
.night__slide { will-change: transform, opacity; }

/* Button micro-interactions */
.btn { position: relative; overflow: hidden; }
.btn svg { transition: transform .25s cubic-bezier(.22,.61,.25,1); }
.btn:hover svg { transform: translateX(3px); }
.btn--solid::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(255,255,255,.14);
  transform: translateX(-101%);
  transition: transform .5s cubic-bezier(.22,.61,.25,1);
}
.btn--solid:hover::after { transform: translateX(101%); }

/* Brand signature wordmark in footer */
.ft__wordmark {
  max-width: var(--maxw);
  margin: 80px auto 0;
  padding: 48px 0 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--serif);
  line-height: .82;
  text-align: center;
  overflow: hidden;
  user-select: none;
}
.ft__wordmark-line {
  display: block;
  font-size: clamp(64px, 15vw, 240px);
  letter-spacing: -0.03em;
  color: var(--cream);
  opacity: .12;
}
.ft__wordmark-line--2 {
  font-style: italic;
  opacity: .2;
}

/* ═══════════════════════════════════════════════════════
   MOTION+ — intro, hero entrance, nav hide, wordmark, buttons
   ═══════════════════════════════════════════════════════ */

/* ── Intro screen ── */
.intro-screen {
  position: fixed; inset: 0;
  z-index: 400;
  background:
    radial-gradient(circle at 84% 14%, rgba(201,183,150,.16) 0%, transparent 54%),
    var(--cream);
  display: grid;
  place-items: center;
  will-change: transform;
}
.intro-screen.is-done {
  transform: translateY(-101%);
  transition: transform .85s cubic-bezier(.76,0,.24,1);
}
.intro-screen__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 24px;
  text-align: center;
}
.intro-screen__eyebrow {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy);
  opacity: 0;
  transform: translateY(8px);
}
.intro-screen.is-active .intro-screen__eyebrow {
  opacity: .6; transform: none;
  transition: opacity .7s ease .15s, transform .7s ease .15s;
}
.intro-screen__wm {
  margin: 0;
  font-family: var(--serif);
  line-height: .9;
  color: var(--navy);
  font-size: clamp(46px, 9vw, 132px);
  letter-spacing: -0.025em;
}
.intro-screen__wmline { display: block; overflow: hidden; }
.intro-screen__wmline > span { display: block; transform: translateY(112%); }
.intro-screen.is-active .intro-screen__wmline > span {
  transform: translateY(0);
  transition: transform .95s cubic-bezier(.76,0,.24,1) .08s;
}
.intro-screen.is-active .intro-screen__wmline--2 > span { transition-delay: .2s; }
.intro-screen__wmline--2 { font-style: italic; }
.intro-screen__bar {
  display: block;
  width: min(260px, 56vw);
  height: 1px;
  background: rgba(31,45,68,.16);
  overflow: hidden;
  margin-top: 8px;
}
.intro-screen__barfill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
}
.intro-screen.is-active .intro-screen__barfill {
  transform: scaleX(1);
  transition: transform 1.3s cubic-bezier(.4,0,.1,1) .25s;
}

/* ── Hero entrance choreography ──
   The cover content is ALWAYS visible (opacity 1). The entrance is a
   pure CSS animation that auto-plays on load — no JS / is-ready / rAF
   dependency (those freeze in suspended tabs) — and it only ever
   TRANSLATES, never fades to 0, so any frozen frame still shows content. */
.h-anim { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .h-anim {
    animation: hRise .8s cubic-bezier(.2,.7,.2,1) both;
    animation-delay: var(--d, 0ms);
  }
}
@keyframes hRise {
  from { transform: translateY(20px); }
  to   { transform: translateY(0); }
}

/* ── Nav auto-hide ── */
.nav {
  transition: background .35s ease, padding .35s ease, color .35s ease,
              box-shadow .35s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.nav.is-hidden { transform: translateY(-100%); }

/* ── Oversized wordmark reveal ── */
html.js-motion .ft__wordmark-line { transform: translateY(116%); opacity: 0; }
.ft__wordmark-line {
  transition: transform 1.05s cubic-bezier(.76,0,.24,1), opacity 1.05s ease;
}
html.js-motion .ft__wordmark.is-in .ft__wordmark-line { transform: none; opacity: .12; }
html.js-motion .ft__wordmark.is-in .ft__wordmark-line--2 { opacity: .2; transition-delay: .12s; }

/* ── Button microinteractions ── */
.btn {
  transition: background .25s ease, color .25s ease, border-color .25s ease,
              transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.btn--solid:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(15,26,46,.5); }
.btn--line:hover, .btn--ghost:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }

/* ── NORD-style image curtain reveal ──
   clip-path lives on the INNER media (plain inset, no round/var —
   round+var stalls the transition). Rounded corners come from the
   frame's own border-radius + overflow:hidden, so they're preserved. */
html.js-motion .reveal-img { overflow: hidden; }
html.js-motion .reveal-img > img,
html.js-motion .reveal-img > iframe {
  clip-path: inset(0 0 100% 0);
}
html.js-motion .reveal-img.is-in > img,
html.js-motion .reveal-img.is-in > iframe {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s cubic-bezier(.76,0,.24,1);
}
html.js-motion .reveal-img > img {
  transform: scale(1.12);
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1);
}
html.js-motion .reveal-img.is-in > img { transform: scale(1); }

/* ═══════════════════════════════════════════════════════
   NORD ROUNDING — large radii on media & cards
   ═══════════════════════════════════════════════════════ */
.cinema__img { border-radius: var(--r-img); overflow: hidden; }
.intro__photo { border-radius: var(--r-img); overflow: hidden; }
.g,
.room__media,
.room__media--split img,
.loc__map { border-radius: var(--r-img); }
.card,
.book { border-radius: var(--r-card); }
.intro__cap { border-radius: var(--r-sm); }
.field input, .field select, .book__field input, .book__field select,
.admin__field input { border-radius: var(--r-sm); }
.avc { border-radius: var(--r-card); }
.avc__day, .avc__day.is-range { border-radius: 8px; }

/* Reduced-motion: strip all of it */
@media (prefers-reduced-motion: reduce) {
  .m-rise, .m-img, .h-anim, .ft__wordmark-line, .reveal-img,
  .reveal-img > img, .reveal-img > iframe {
    opacity: 1 !important; transform: none !important; transition: none !important;
    clip-path: none !important;
  }
  .intro-screen { display: none !important; }
  .m-holder.is-loading::before { display: none !important; }
  .scrollbar { display: none; }
  .hero__bg img, .cinema__img img { animation: none !important; }
  .btn--solid::after { display: none; }
}

/* ═════════════════════════════════════════════════════════
   AVAILABILITY CALENDAR  (lives at the top of the booking form)
   ═════════════════════════════════════════════════════════ */
.avc {
  margin: 0 0 22px;
  padding: 18px 18px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--cream-soft);
}
.avc__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.avc__title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--navy);
  margin-right: auto;
}
.avc__nav {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--navy);
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background .15s, border-color .15s;
}
.avc__nav:hover:not(:disabled) { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.avc__nav:disabled { opacity: .3; cursor: default; }
.avc__sync {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 14px;
}
.avc__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.avc__dot--live { background: #2E9E6B; box-shadow: 0 0 0 3px rgba(46,158,107,.16); }
.avc__dot--off  { background: var(--sand-2); }
.avc__dot.is-pulsing { animation: avcPulse 1.1s ease-in-out infinite; }
@keyframes avcPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.avc__months {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 22px;
}
.avc__mlabel {
  font-family: var(--serif);
  font-size: 17px;
  text-transform: capitalize;
  margin-bottom: 8px;
  color: var(--navy);
}
.avc__wd, .avc__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.avc__wd {
  margin-bottom: 4px;
}
.avc__wd span {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  padding: 2px 0;
}
.avc__grid { gap: 2px; }
.avc__day {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  color: var(--navy);
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  transition: background .12s, color .12s;
}
.avc__day--pad { cursor: default; }
/* hover must NOT override a selected day (start/end/range) */
.avc__day[data-d]:not(.is-end):not(.is-range):hover { background: var(--cream-2); }
.avc__day.is-past {
  color: color-mix(in srgb, var(--muted) 45%, transparent);
  cursor: default;
}
.avc__day.is-blocked {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
  cursor: not-allowed;
  position: relative;
}
.avc__day.is-blocked::after {
  content: "";
  position: absolute;
  width: 64%; height: 1px;
  background: var(--sand-2);
  transform: rotate(-18deg);
}
.avc__day.is-range {
  background: color-mix(in srgb, var(--navy) 22%, white);  /* blue band, not gray */
  border-radius: 0;
  color: var(--navy);
}
.avc__day.is-end {
  background: var(--navy);
  color: var(--cream);
  font-weight: 600;
  border-radius: 8px;
}
.avc__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}
.avc__legend {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--muted);
}
.avc__sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.avc__sw--free   { background: var(--navy); }
.avc__sw--booked {
  background: var(--cream-2);
  border: 1px solid var(--rule);
  position: relative;
}
.avc__sw--booked::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 1px; background: var(--sand-2); transform: rotate(-18deg);
}

/* dark form variant */
html[data-theme="dark"] .book__form .avc {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
html[data-theme="dark"] .book__form .avc__title,
html[data-theme="dark"] .book__form .avc__mlabel,
html[data-theme="dark"] .book__form .avc__day { color: #ECE7DA; }
html[data-theme="dark"] .book__form .avc__nav { color: #ECE7DA; border-color: rgba(255,255,255,.18); }
html[data-theme="dark"] .book__form .avc__nav:hover:not(:disabled) { background: var(--sand); color: var(--navy-ink); border-color: var(--sand); }
html[data-theme="dark"] .book__form .avc__day[data-d]:not(.is-end):not(.is-range):hover { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .book__form .avc__day.is-range { background: rgba(216,201,168,.28); color: #ECE7DA; }
html[data-theme="dark"] .book__form .avc__day.is-end { background: var(--sand); color: var(--navy-ink); }
html[data-theme="dark"] .book__form .avc__sw--free { background: var(--sand); }
html[data-theme="dark"] .book__form .avc__sw--booked { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }

/* ═════════════════════════════════════════════════════════
   OWNER PANEL  (#admin / Shift+Alt+A)
   ═════════════════════════════════════════════════════════ */
.admin {
  position: fixed; inset: 0;
  z-index: 200;
  display: none;
}
.admin.is-open { display: block; }
.admin__backdrop {
  position: absolute; inset: 0;
  background: rgba(10,16,28,.55);
  backdrop-filter: blur(4px);
}
.admin__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--navy-deep);
  color: #E9E4D7;
  padding: 30px 30px 36px;
  overflow-y: auto;
  box-shadow: -30px 0 70px -30px rgba(0,0,0,.6);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.1,1);
  font-family: var(--sans);
}
.admin.is-open .admin__panel { transform: translateX(0); }
.admin__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.admin__eyebrow {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--sand); margin: 0 0 6px; font-weight: 600;
}
.admin__title { font-size: 28px; margin: 0; color: #fff; }
.admin__x {
  background: transparent; border: 1px solid rgba(255,255,255,.2);
  color: #E9E4D7; width: 34px; height: 34px; border-radius: 50%;
  font-size: 20px; line-height: 1; flex: 0 0 auto;
  transition: background .15s;
}
.admin__x:hover { background: rgba(255,255,255,.1); }
.admin__section {
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.admin__section:first-of-type { border-top: none; padding-top: 8px; }
.admin__legend {
  display: flex; align-items: center; gap: 9px;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sand); margin: 0 0 16px; font-weight: 600;
}
.admin__legend::before {
  content: ""; width: 16px; height: 2px; border-radius: 2px;
  background: var(--sand); opacity: .7; flex: none;
}
/* 2-col rows: bottom-align inputs so labels of different heights don't
   knock the boxes out of line */
.admin__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: end; margin-bottom: 14px; }
.admin__row .admin__field { margin-bottom: 0; }
.admin__field { display: block; margin-bottom: 14px; }
.admin__field > span {
  display: block; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: #B9C0CD; margin-bottom: 7px; font-weight: 500;
}
.admin__field > span em { text-transform: none; letter-spacing: 0; color: #7E8798; font-style: normal; }
.admin__field input {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px;
  color: #fff;
  font: inherit;
  font-size: 14px;
  padding: 11px 13px;
  transition: border-color .15s, background .15s;
}
.admin__field input:focus { outline: none; border-color: var(--sand); background: rgba(255,255,255,.08); }
.admin__field input::placeholder { color: #6C7585; }
.admin__hint {
  font-size: 12px; line-height: 1.6; color: #9AA2B1; margin: 9px 0 2px;
}
/* visit stats */
.admin__stat-nums { display: flex; gap: 22px; flex-wrap: wrap; margin: 2px 0 12px; }
.admin__stat-nums > div { display: flex; flex-direction: column; }
.admin__stat-nums b { font-size: 26px; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.admin__stat-nums span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8A93A2; margin-top: 3px; }
.admin__bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; }
.admin__bar { flex: 1; display: flex; align-items: flex-end; height: 100%; background: rgba(255,255,255,.05); border-radius: 3px; overflow: hidden; }
.admin__bar-fill { width: 100%; background: var(--sand); border-radius: 3px; min-height: 2px; }
.admin__hint b { color: #D7DCE4; font-weight: 600; }
.admin__actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 22px 0 0;
}
.admin__btn {
  flex: 1 1 auto;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: transparent;
  color: #E9E4D7;
  font-size: 12px;
  letter-spacing: .04em;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.admin__btn:hover { background: rgba(255,255,255,.08); }
.admin__btn--solid { background: var(--sand); border-color: var(--sand); color: var(--navy-ink); }
.admin__btn--solid:hover { background: #d4c4a3; }
.admin__btn--ghost { flex: 0 0 auto; }
.admin__note {
  font-size: 12px; line-height: 1.6; color: #9AA2B1;
  margin: 18px 0 0;
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border-radius: 6px;
}
.admin__note b { color: #D7DCE4; }
.admin__note.is-flash {
  background: rgba(46,158,107,.14);
  color: #BFE6D2;
}
@media (max-width: 560px) {
  .admin__panel { padding: 24px 20px 30px; }
  .admin__row { grid-template-columns: 1fr; }
}

/* owner access gate */
.admin--gate .admin__gate {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -46%);
  width: min(380px, calc(100% - 40px));
  background: var(--navy-deep);
  color: #E9E4D7;
  padding: 32px 30px 28px;
  border-radius: 10px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
  opacity: 0;
  transition: transform .3s cubic-bezier(.4,0,.1,1), opacity .3s;
}
.admin--gate.is-open .admin__gate { transform: translate(-50%, -50%); opacity: 1; }
.admin__gate .admin__title { margin: 0 0 12px; }
.admin__gtext { font-size: 13px; line-height: 1.6; color: #9AA2B1; margin: 0 0 18px; }
.admin__ginput {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  color: #fff;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  transition: border-color .15s, background .15s;
}
.admin__ginput:focus { outline: none; border-color: var(--sand); background: rgba(255,255,255,.08); }
.admin__ginput::placeholder { color: #6C7585; }
.admin__gerror { font-size: 12px; color: #E59B9B; margin: 8px 0 0; }
.admin__gactions { display: flex; gap: 10px; margin-top: 18px; }
.admin__gactions .admin__btn { flex: 1 1 auto; }

/* ═══════════════════════════════════════════════════════
   NORD EDITORIAL WASH — bigger display type, more air,
   refined eyebrows. Visual polish only; structure intact.
   ═══════════════════════════════════════════════════════ */

/* Larger, tighter editorial headlines */
.h-display {
  font-size: clamp(40px, 5.6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.032em;
  margin: 0 0 26px;
  text-wrap: balance;
}
.h-display em { letter-spacing: -0.028em; }

/* Refined eyebrow — label with a drawn rule, NORD-style */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  font-weight: 600;
  color: var(--sand-2);
  margin-bottom: 22px;
}
.section__head--center .eyebrow { justify-content: center; }
.eyebrow--light { color: var(--sand); }

/* Generous vertical rhythm between major sections */
.intro,
.gallery,
.rooms,
.exp,
.amen,
.concierge,
.loc,
.book {
  padding-block: clamp(104px, 12vw, 184px);
}
.night { padding-block: clamp(128px, 14vw, 200px); }

/* tighten two transitions that read as too empty (must come AFTER the
   padding-block rule above, which otherwise sets every gap the same) */
.gallery   { padding-bottom: clamp(40px, 4.5vw, 70px); }
.rooms     { padding-top:    clamp(40px, 4.5vw, 70px); }
.concierge { padding-bottom: clamp(28px, 3vw, 48px); }
.loc       { padding-top:    clamp(28px, 3vw, 48px); }

/* More breathing room around section heads + larger lede */
.section__head { margin-bottom: clamp(56px, 6vw, 84px); max-width: 920px; }
.section__head--center { margin-bottom: clamp(56px, 6vw, 84px); }
.section__lede { font-size: 18.5px; line-height: 1.6; max-width: 620px; }

/* Slightly airier body copy */
body { line-height: 1.6; font-size: 17px; }

/* Footer / intro wordmark: upright ampersand to match the logo title */
.ft__wordmark-line--2 .amp,
.intro-screen__wmline--2 .amp { font-style: normal; }

/* ── Readability bump — larger small text & mini-titles ── */
.eyebrow { font-size: 13px; }
.section__lede { font-size: 19px; }
.loc__sub { font-size: 14.5px; }
.loc__list li > span > strong { font-size: 16px; }
.ft li { font-size: 15px; }
.room__bullets li { font-size: 15px; }
.amen__cols li { font-size: 15px; }
.card__tags li { font-size: 12.5px; }
.g figcaption { font-size: 12px; }
.conc__item h4 { font-size: 26px; }
.card__body h3 { font-size: 28px; }

/* ═══════════════════════════════════════════════════════
   COVER — full-bleed editorial portada (LEON HOME style)
   ═══════════════════════════════════════════════════════ */
.cover {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  color: var(--cream);
  background: #0A101C;
}
.cover__media { position: absolute; inset: 0; z-index: -2; }
.cover__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 48%;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .cover__media img { animation: coverKen 12s ease-out both; }
}
@keyframes coverKen {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
/* legibility scrim */
.cover::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,16,28,.50) 0%, rgba(10,16,28,0) 22%,
                    rgba(10,16,28,0) 42%, rgba(10,16,28,.62) 80%, rgba(10,16,28,.80) 100%),
    linear-gradient(72deg, rgba(10,16,28,.55) 0%, rgba(10,16,28,.10) 48%, rgba(10,16,28,0) 70%);
}

.cover__inner {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 138px clamp(24px, 5vw, 64px) clamp(36px, 4vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.cover__loc {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 30px;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,.86);
}
.cover__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sand);
  position: relative;
  flex: 0 0 auto;
}
.cover__dot::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--sand);
  opacity: .5;
  animation: pulse 2.4s ease-in-out infinite;
}

/* the oversized wordmark */
.cover__wm {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-size: clamp(58px, 11.5vw, 188px);
  margin: 0 0 30px;
  color: #fff;
  text-shadow: 0 2px 40px rgba(0,0,0,.28);
}
.cover__wm-line { display: block; }
.cover__wm-line > span { display: block; }
.cover__wm-line--2 {
  font-style: italic;
  padding-left: 0.06em;
  color: #fff;
}
.cover__amp { font-style: normal; color: #fff; margin-right: .04em; }

/* line reveal — translate-only, auto-play, never invisible */
.cover__wm-line > span { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .cover__wm-line > span {
    animation: hRiseWm 1s cubic-bezier(.76,0,.24,1) both;
  }
  html.js-motion .cover__wm-line--2 > span { animation-delay: .14s; }
}
@keyframes hRiseWm {
  from { transform: translateY(36px); }
  to   { transform: translateY(0); }
}

.cover__lede {
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.58;
  max-width: 500px;
  margin: 0 0 38px;
  color: rgba(255,255,255,.84);
}

.cover__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cover__btn {
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
}
.cover__btn--solid {
  background: #fff;
  color: #14202F;
  border: 1px solid #fff;
}
.cover__btn--solid:hover {
  background: var(--sand);
  border-color: var(--sand);
  color: #14202F;
}
.cover__btn--ghost {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  backdrop-filter: blur(6px);
}
.cover__btn--ghost:hover { background: rgba(255,255,255,.18); }

.cover__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-top: clamp(44px, 5.5vw, 76px);
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.20);
}
.cover__price {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.cover__price-label {
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.cover__rate {
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1;
  color: #fff;
  display: inline-flex;
  align-items: baseline;
}
.cover__cur { font-size: .58em; margin-left: 2px; opacity: .85; }
.cover__price-sub {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.cover__scroll {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.cover__scrollline {
  display: inline-block;
  width: 60px; height: 1px;
  background: rgba(255,255,255,.4);
  overflow: hidden;
  position: relative;
}
.cover__scrollline::before {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  transform: translateX(-100%);
  animation: scrollLine 2.6s ease-in-out infinite;
}

/* ── Nav while over the dark cover (not yet scrolled) ── */
.nav:not(.is-stuck) { color: #fff; }
.nav:not(.is-stuck) .nav__brand-sub { opacity: .85; }
.nav:not(.is-stuck) .nav__brand-mark img { filter: brightness(0) invert(1); }
.nav:not(.is-stuck) .lang__btn {
  border-color: rgba(255,255,255,.45);
  color: #fff;
}
.nav:not(.is-stuck) .lang__btn:hover { background: rgba(255,255,255,.12); }
.nav:not(.is-stuck) .nav__cta {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  backdrop-filter: blur(6px);
}
.nav:not(.is-stuck) .nav__cta:hover { background: rgba(255,255,255,.22); }

/* ── Cover responsive ── */
@media (max-width: 760px) {
  .cover__inner { padding: 120px 24px 40px; }
  .cover__wm { font-size: clamp(54px, 16vw, 96px); }
  .cover__foot { flex-wrap: wrap; gap: 18px; }
}
@media (max-height: 720px) and (min-width: 761px) {
  .cover__inner { padding-top: 104px; }
  .cover__wm { font-size: clamp(52px, 8.5vw, 120px); margin-bottom: 22px; }
  .cover__loc { margin-bottom: 20px; }
  .cover__lede { margin-bottom: 26px; }
}

/* ═══════════════════════════════════════════════════════
   POLISH PASS — medium visual reinforcement (2026-06-15)
   Texture, focus states, numeric typography, depth & micro
   details. Identity preserved; structure & JS untouched.
   Applied site-wide via late, low-specificity overrides.
   ═══════════════════════════════════════════════════════ */

/* Kill the blue tap flash on touch + crisper text on dark */
* { -webkit-tap-highlight-color: transparent; }

/* ── 1 · Film grain — breaks digital flatness on every surface.
   Static, GPU-cheap, pointer-events none. Reads on light & dark
   thanks to soft-light blending of fractal noise. ── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="dark"] body::after { opacity: .07; }
@media (prefers-reduced-motion: reduce) { body::after { opacity: .035; } }

/* ── 2 · Visible focus for keyboard users (a11y) ── */
:focus-visible {
  outline: 2px solid var(--sand-2);
  outline-offset: 3px;
  border-radius: 3px;
}
.btn:focus-visible,
.cover__btn:focus-visible,
.nav__cta:focus-visible { outline-offset: 4px; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sand-2) 38%, transparent);
}

/* ── 3 · Branded text selection ── */
::selection { background: var(--sand); color: #14202F; }

/* ── 4 · Tabular figures so every number aligns & doesn't jitter ── */
.cover__rate, .book__rate-num, .book__estimate-amount,
.night__stats .serif,
.loc__dist, .intro__signals span:first-child,
.room__num, .avc__day, .avc__mlabel {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── 5 · Tidy widows/orphans in running copy ── */
p, .section__lede, .cover__lede, .acc__line, .conc__item p,
.card__body p, .room__body p { text-wrap: pretty; }

/* ── 6 · Anchor jumps clear the fixed nav ── */
[id] { scroll-margin-top: 92px; }

/* ── 7 · Subtle resting depth on experience cards (flat → layered).
   Concierge grid keeps its intentional hairline look. ── */
.card {
  box-shadow: 0 1px 2px rgba(15,26,46,.04),
              0 16px 38px -30px rgba(15,26,46,.22);
}
.card:hover {
  box-shadow: 0 1px 2px rgba(15,26,46,.05),
              0 34px 64px -32px rgba(15,26,46,.34);
}
html[data-theme="dark"] .card {
  box-shadow: 0 18px 44px -32px rgba(0,0,0,.6);
}
html[data-theme="dark"] .card:hover {
  box-shadow: 0 34px 70px -34px rgba(0,0,0,.7);
}

/* ═══════════════════════════════════════════════════════
   ADMIN · seasonal pricing table (owner panel)
   ═══════════════════════════════════════════════════════ */
.admin__panel { color-scheme: dark; }  /* dark native date/number pickers */

.admin__bulk {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 8px;
  margin-bottom: 16px;
}
.admin__bulk input,
.admin__bulk select {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  padding: 9px 11px;
}
.admin__bulk select { cursor: pointer; }
.admin__bulk input:focus,
.admin__bulk select:focus { outline: none; border-color: var(--sand); background: rgba(255,255,255,.08); }
.admin__bulk .admin__btn { padding: 9px 14px; white-space: nowrap; }

/* The panel is narrow (~440px) and native date inputs are wide, so each
   season is a 2-row card: name (+delete) on top, dates + price below. */
.admin__seasons-head { display: none; }
.admin__season {
  display: grid;
  grid-template-columns: 1fr 1fr 84px;
  grid-template-areas:
    "name  name  del"
    "start end   rate"
    "min   min   min";
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.se_name  { grid-area: name; }
.se_start { grid-area: start; }
.se_end   { grid-area: end; }
.se_rate  { grid-area: rate; }
.se_min   { grid-area: min; }
.se_del   { grid-area: del; justify-self: end; }
.admin__season input {
  width: 100%;
  min-width: 0;            /* let native date inputs shrink to their grid cell (no overflow/overlap) */
  box-sizing: border-box;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  padding: 9px 10px;
}
.admin__season input:focus { outline: none; border-color: var(--sand); background: rgba(255,255,255,.08); }
.admin__season .se_name { font-weight: 600; }
.se_del {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: transparent;
  color: #E9E4D7;
  font-size: 17px; line-height: 1;
  display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.se_del:hover { background: rgba(229,107,107,.18); border-color: rgba(229,107,107,.5); }
.admin__btn--add { width: 100%; margin-top: 4px; border-style: dashed; }

@media (max-width: 560px) {
  .admin__bulk { grid-template-columns: 1fr; }
}

/* iCal import feeds (unlimited) */
.admin__feeds-head {
  display: grid;
  grid-template-columns: 1fr 1.8fr 30px;
  gap: 8px;
  margin-bottom: 6px;
  padding: 0 2px;
}
.admin__feeds-head span {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #8B93A3; font-weight: 600;
}
.admin__feed {
  display: grid;
  grid-template-columns: 1fr 1.8fr 30px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.admin__feed input {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  padding: 9px 10px;
}
.admin__feed input:focus { outline: none; border-color: var(--sand); background: rgba(255,255,255,.08); }

/* Manual blocked-dates rows */
.admin__blocks-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 30px;
  gap: 8px;
  margin-bottom: 6px;
  padding: 0 2px;
}
.admin__blocks-head span {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #8B93A3; font-weight: 600;
}
.admin__block {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr 30px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.admin__block input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  padding: 9px 10px;
}
.admin__block input:focus { outline: none; border-color: var(--sand); background: rgba(255,255,255,.08); }

/* Own-iCal export row */
.admin__export-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.admin__export-row input {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 6px;
  color: #fff; font: inherit; font-size: 12.5px; padding: 9px 10px;
}
.admin__export-row .admin__btn { white-space: nowrap; }
.admin__export-row input:disabled,
.admin__export-row .admin__btn:disabled { opacity: .5; }

@media (max-width: 560px) {
  .admin__feeds-head { display: none; }
  .admin__feed { grid-template-columns: 1fr 30px; }
  .admin__feed .fd_url { grid-column: 1 / -1; }
  .admin__blocks-head { display: none; }
  .admin__block { grid-template-columns: 1fr 1fr 30px; }
  .admin__block .bl_note { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════
   COVER · search pill + booking modal (Airbnb-style)
   ═══════════════════════════════════════════════════════ */
.bk {
  display: flex;
  align-items: stretch;
  gap: 4px;
  width: min(960px, 100%);   /* stretches side to side */
  background: #fff;
  color: #1F2D44;
  border-radius: 999px;
  padding: 8px 8px 8px 12px;
  box-shadow: 0 26px 70px -26px rgba(0,0,0,.6);
  margin: 16px auto 4px;     /* centered horizontally */
}
.bk__seg { flex: 1 1 auto; }   /* segments share the width */
.bk__seg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 16px 38px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  text-align: left;
  transition: background .2s ease;
}
.bk__seg:hover { background: rgba(31,45,68,.05); }
.bk__seg-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8A93A2;
}
.bk__seg-val { font-size: 20px; font-weight: 600; color: #1F2D44; white-space: nowrap; }
.bk__div { width: 1px; background: rgba(31,45,68,.14); margin: 16px 0; flex: 0 0 auto; }
.bk__go {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-left: 6px;
  padding: 0 38px;
  border: 0;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .2s ease, transform .15s ease;
}
.bk__go:hover { background: var(--navy-ink); }
.bk__go:active { transform: scale(.97); }
.bk__go svg { flex: 0 0 auto; width: 22px; height: 22px; }

@media (max-width: 680px) {
  .bk {
    flex-wrap: wrap;
    border-radius: 18px;
    width: 100%;
    padding: 8px;
  }
  .bk__seg { flex: 1 1 42%; padding: 12px 16px; }
  .bk__div { display: none; }
  .bk__go { flex: 1 1 100%; justify-content: center; margin: 6px 0 0; padding: 14px; }
}

/* ── Modal ── */
.bk-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 20px; }
.bk-modal[hidden] { display: none; }
.bk-modal__backdrop { position: absolute; inset: 0; background: rgba(10,16,28,.55); backdrop-filter: blur(4px); }
.bk-modal__panel {
  position: relative;
  width: min(820px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  color: #1F2D44;
  border-radius: 18px;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.6);
  color-scheme: light;
  animation: bkIn .25s cubic-bezier(.22,.61,.25,1);
}
@keyframes bkIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
.bk-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid rgba(31,45,68,.1);
  position: sticky; top: 0; background: #fff; z-index: 1;
}
.bk-modal__title { font-family: var(--serif); font-size: 24px; font-weight: 400; margin: 0; color: #1F2D44; }
.bk-modal__x {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(31,45,68,.2);
  background: transparent; color: #1F2D44; font-size: 22px; line-height: 1;
  display: grid; place-items: center; transition: background .15s;
}
.bk-modal__x:hover { background: rgba(31,45,68,.06); }
.bk-modal__body { padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.bk-block { border: 1px solid rgba(31,45,68,.12); border-radius: 14px; padding: 18px 20px; }
.bk-block__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  color: #8A93A2; margin-bottom: 12px;
}
.bk-block__val { letter-spacing: 0; text-transform: none; font-size: 14px; font-weight: 600; color: #1F2D44; }
.bk-link {
  background: none; border: 0; color: #1F2D44; font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; margin-top: 6px;
}
.bk-step { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.bk-step + .bk-step { border-top: 1px solid rgba(31,45,68,.08); }
.bk-step__label { font-size: 16px; font-weight: 600; }
.bk-step__ctrl { display: inline-flex; align-items: center; gap: 16px; }
.bk-step__ctrl button {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(31,45,68,.25);
  background: #fff; color: #1F2D44; font-size: 20px; line-height: 1; display: grid; place-items: center;
  transition: border-color .15s, background .15s;
}
.bk-step__ctrl button:hover { border-color: var(--navy); }
.bk-step__n { min-width: 20px; text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-modal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 24px 22px; position: sticky; bottom: 0; background: #fff; border-top: 1px solid rgba(31,45,68,.1);
}
.bk-search {
  border: 0; border-radius: 999px; background: var(--navy); color: #fff;
  font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  padding: 14px 34px; transition: background .2s ease, transform .15s ease;
}
.bk-search:hover { background: var(--navy-ink); }
.bk-search:active { transform: scale(.98); }

/* keep the reused .avc calendar readable on the always-light modal */
.bk-modal .avc { background: transparent; border: 0; padding: 0; margin: 0; }
.bk-modal .avc__title, .bk-modal .avc__mlabel, .bk-modal .avc__day { color: #1F2D44; }
.bk-modal .avc__day[data-d]:not(.is-end):not(.is-range):hover { background: rgba(31,45,68,.07); }
.bk-modal .avc__day.is-range { background: rgba(31,45,68,.18); color: #1F2D44; }
.bk-modal .avc__day.is-end { background: var(--navy); color: #fff; }
.bk-modal .avc__nav { color: #1F2D44; border-color: rgba(31,45,68,.2); }
.bk-modal .avc__nav:hover:not(:disabled) { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (max-width: 560px) { .bk-modal .avc__months { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════
   READABILITY BUMP v2 — larger small text on nav + cover
   (the design read fine in the small preview but felt tiny
   on a full desktop screen)
   ═══════════════════════════════════════════════════════ */
.nav__links { font-size: 15px; gap: 30px; }
/* "Reservar estancia" inside the menu — only shown in the mobile dropdown */
.nav__links-book { display: none; }
@media (max-width: 1080px) {
  .nav__links-book { display: block; font-weight: 700; }
}
.nav__brand-name { font-size: 19px; }
.nav__brand-sub { font-size: 10.5px; letter-spacing: 0.26em; }
.nav__cta { font-size: 12.5px; padding: 12px 22px; }
.lang__btn { font-size: 12.5px; }

.cover__loc { font-size: 14px; letter-spacing: 0.24em; }
.cover__lede { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.6; max-width: 540px; }
.cover__price-label { font-size: 12px; }
.cover__price-sub { font-size: 12px; }
.cover__rate { font-size: clamp(34px, 3.2vw, 50px); }
.cover__scroll { font-size: 12px; }

@media (max-width: 680px) {
  .cover__lede { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════
   READABILITY BUMP v3 — nudge small text up ~1–2px sitewide
   so everything reads comfortably on a full desktop screen.
   ═══════════════════════════════════════════════════════ */
body { font-size: 18px; }

/* running copy */
.section__lede { font-size: 20px; }
.intro__copy p,
.room__body p,
.loc__copy > p,
.amen__head p,
.book__copy p,
.night__content p,
.acc__line { font-size: 18px; line-height: 1.62; }
.card__body p { font-size: 16px; }
.conc__item p { font-size: 15.5px; }
.cinema__quote { line-height: 1.2; }

/* eyebrows / small labels */
.eyebrow { font-size: 14px; }
.amen__cols h4,
.ft h5 { font-size: 12.5px; }
.field > span { font-size: 12px; }

/* lists & data */
.strip__list li { font-size: 14px; }
.strip__list strong { font-size: 15.5px; }
.strip__sub { font-size: 13px; }
.intro__signals li { font-size: 14.5px; }
.room__bullets li { font-size: 15.5px; }
.amen__cols li { font-size: 15.5px; }
.loc__list li > span > strong { font-size: 16.5px; }
.loc__sub { font-size: 15px; }
.card__tags li { font-size: 13px; }
.ft li { font-size: 15.5px; }
.book__perks li { font-size: 15px; }
.book__legal { font-size: 13px; }

/* tiny uppercase metrics → a touch larger */
.night__stats span:last-child,
.reviews__meta span:last-child,
.book__rate-lbl,
.g figcaption { font-size: 12px; }

/* keep it sensible on phones (don't over-inflate) */
@media (max-width: 560px) {
  body { font-size: 17px; }
  .section__lede { font-size: 18px; }
  .intro__copy p, .room__body p, .loc__copy > p,
  .amen__head p, .book__copy p, .night__content p, .acc__line { font-size: 17px; }
}

/* ── Booking: WhatsApp button + payment note ── */
.btn--wa {
  margin-top: 10px;
  background: #25D366;
  color: #07351c;
  border: 0;
}
.btn--wa:hover { background: #1ebe5b; color: #07351c; }
.btn--wa::after { display: none; }   /* skip the solid-button shimmer */
.book__paynote {
  margin: 12px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: var(--muted);
  line-height: 1.5;
}
.book__consent {
  margin: 6px 0 0;
  font-size: 11.5px;
  text-align: center;
  color: var(--muted);
  line-height: 1.5;
}
.book__consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── Fix: native date/inputs overflowing their cell on mobile ──
   Grid/flex items default to min-width:auto and won't shrink below the
   input's intrinsic width, so date fields spilled past the white panel. */
.field { min-width: 0; }
.field-row { min-width: 0; }
.field input, .field select, .field textarea {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* iOS/Safari paints native date inputs with their own intrinsic width that
   can spill past the field box. Strip the native appearance on phones so they
   behave like the other inputs and stay inside the panel. */
@media (max-width: 720px) {
  .field input[type="date"],
  .field input[type="text"],
  .field input[type="email"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}

/* Intro captions on phones: keep the overlapping photo layout, but shrink the
   caption chip so it sits neatly inside the (smaller) photos. */
@media (max-width: 620px) {
  .intro__cap {
    font-size: 9.5px;
    letter-spacing: 0.1em;
    padding: 6px 10px;
    max-width: calc(100% - 20px);
    line-height: 1.25;
  }
}