/* ==========================================================================
   Ushas Homestay — ushashomestay.com
   Palette taken from the logo and the house: cream and near-black from the
   wordmark, crimson and gold as accents, teak and laterite from the doors and
   the paving. Deliberately no green. The logo has none, and the photographs
   supply all the foliage the page needs.
   ========================================================================== */

:root {
  --paper:        #FBF7F0;
  --paper-2:      #F3EBDF;
  --paper-3:      #EAE0D0;
  --ink:          #231A13;
  --ink-soft:     #4A3D32;
  --muted:        #78685A;
  --rule:         #DFD2BE;
  --teak:         #8A4F2B;
  --teak-deep:    #6B3A1E;
  --crimson:      #A91427;   /* from the wordmark. 6.98:1 on paper, 7.46:1 under white */
  --crimson-deep: #7B0E1C;   /* hover and pressed. 10.9:1 under white */
  --laterite:     #B4643C;   /* the paving. Decorative washes only, too low contrast for text */
  --gold:         #A8802F;   /* on paper */
  --gold-light:   #D9A441;   /* on dark surfaces: 5.2:1 on the booking cards */

  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
               0 2px 8px color-mix(in srgb, var(--ink) 6%, transparent);
  --shadow-md: 0 4px 12px color-mix(in srgb, var(--ink) 10%, transparent),
               0 12px 32px color-mix(in srgb, var(--ink) 8%, transparent);
  --shadow-lg: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent),
               0 24px 64px color-mix(in srgb, var(--ink) 12%, transparent);

  --shell: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 4px;
  --radius-lg: 8px;
  --header-h: 76px;

  --serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --sans:  'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 350;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  font-variation-settings: 'opsz' 96, 'SOFT' 0;
}
h1 { font-size: clamp(2.05rem, 8vw, 5rem); }
h2 { font-size: clamp(1.6rem, 5vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h1 em { font-style: italic; font-weight: 300; }

p { margin: 0 0 1.1em; }
a { color: var(--teak-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--crimson); }

:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Layout helpers ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell-narrow { max-width: 820px; }

.section { padding: clamp(3rem, 9vw, 7.5rem) 0; }
.section-tint { background: var(--paper-2); }

.section-head { max-width: 62ch; margin-bottom: clamp(1.8rem, 5vw, 4rem); }
.section-lede { color: var(--muted); font-size: 1.08rem; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 1rem;
}
.eyebrow-light {
  color: var(--paper);
  text-shadow: 0 1px 10px color-mix(in srgb, var(--ink) 80%, transparent);
}

.lede { font-size: 1.2rem; color: var(--ink-soft); }
.fineprint { font-size: 0.92rem; color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.78rem 1.5rem;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 0.95rem 1.9rem; font-size: 1rem; }

.btn-primary { background: var(--crimson); color: #fff; border-color: var(--crimson); }
.btn-primary:hover { background: var(--crimson-deep); border-color: var(--crimson-deep); color: #fff; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--teak); color: var(--teak-deep); background: color-mix(in srgb, var(--teak) 5%, transparent); }

.hero .btn-ghost {
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 55%, transparent);
  backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.hero .btn-ghost:hover { background: color-mix(in srgb, var(--paper) 16%, transparent); border-color: var(--paper); color: var(--paper); }

.ext { font-size: 0.85em; opacity: 0.8; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--rule);
  box-shadow: var(--shadow-sm);
}
/* Over the hero the header sits on whatever the photograph happens to be — here,
   bright sky and sunlit leaves. This scrim keeps the wordmark and links readable
   without darkening the photograph itself. */
.site-header:not(.is-solid)::before {
  content: '';
  position: absolute; inset: 0 0 -28px 0; z-index: -1;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--ink) 62%, transparent) 0%,
    color-mix(in srgb, var(--ink) 34%, transparent) 55%,
    transparent 100%);
  pointer-events: none;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

.brand { display: flex; align-items: center; text-decoration: none; color: inherit; }
.brand-logo { height: 46px; width: auto; display: block; }
/* Swap the two artworks rather than filtering one: the wordmark is ink plus
   crimson, and a brightness/invert filter would flatten it to a white blob. */
.brand-logo-dark { display: none; }
.site-header.is-solid .brand-logo-dark { display: block; }
.site-header.is-solid .brand-logo-light { display: none; }
.site-header:not(.is-solid) .nav > a { color: var(--paper); }

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.8rem); }
/* Scoped away from .nav-cta: a bare `.nav > a` rule outranks `.btn` on
   specificity and would strip the button's own padding. */
.nav > a:not(.nav-cta) {
  font-size: 0.92rem; font-weight: 400;
  color: var(--ink-soft); text-decoration: none;
  position: relative; padding: 0.25rem 0;
  transition: color 0.2s ease;
}
.nav > a { text-decoration: none; }
.nav > a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s ease;
}
.nav > a:not(.nav-cta):hover::after,
.nav > a.is-current:not(.nav-cta)::after { transform: scaleX(1); }
.nav-cta { color: #fff !important; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px; padding: 0 8px;
}
.nav-toggle span {
  display: block; height: 1.5px; width: 100%;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.2s ease;
}
.site-header:not(.is-solid) .nav-toggle span { background: var(--paper); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(100svh, 880px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(4rem, 10vh, 8rem);
  padding-top: var(--header-h);
  overflow: hidden;
  color: var(--paper);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--ink) 92%, transparent) 0%,
      color-mix(in srgb, var(--ink) 78%, transparent) 30%,
      color-mix(in srgb, var(--ink) 55%, transparent) 55%,
      color-mix(in srgb, var(--ink) 18%, transparent) 82%,
      color-mix(in srgb, var(--ink) 34%, transparent) 100%);
}
.hero-body { position: relative; max-width: 100%; }
.hero h1 { color: var(--paper); margin-bottom: 1rem; text-shadow: 0 2px 24px color-mix(in srgb, var(--ink) 35%, transparent); }
.hero-lede {
  max-width: 52ch; font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: var(--paper);
  text-shadow: 0 1px 12px color-mix(in srgb, var(--ink) 75%, transparent);
  margin-bottom: 2rem;
}
/* Kerala Tourism classification, stated up front. The same fact appears in
   full under Recognitions; this is the short version for someone deciding
   whether to keep reading. */
.accolade {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1.2rem; padding: 0.42rem 0.9rem 0.42rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--gold-light) 60%, transparent);
  border-radius: 100px;
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(10px);
}
.accolade-mark {
  font-family: var(--serif); font-size: 0.86rem; line-height: 1;
  letter-spacing: 0.03em; color: var(--ink);
  background: var(--gold-light);
  padding: 0.3rem 0.62rem; border-radius: 100px;
}
.accolade-text {
  font-size: 0.79rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper);
}
@media (max-width: 460px) {
  .accolade { gap: 0.45rem; padding-right: 0.7rem; }
  .accolade-text { font-size: 0.68rem; letter-spacing: 0.06em; }
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-bottom: 1.8rem; }
.hero-note {
  font-size: 0.9rem; margin: 0;
  color: var(--paper);
  text-shadow: 0 1px 10px color-mix(in srgb, var(--ink) 80%, transparent);
  display: flex; align-items: center; gap: 0.5rem;
}
.stars { color: var(--gold); letter-spacing: 0.08em; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0;
  width: 26px; height: 42px; border: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
  border-radius: 14px; display: grid; place-items: start center; padding-top: 7px;
}
.hero-scroll span { width: 3px; height: 7px; border-radius: 2px; background: var(--paper); animation: scrollHint 1.9s ease-in-out infinite; }
@keyframes scrollHint { 0%,100% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 80% { opacity: 0; transform: translateY(12px); } }

/* ---------- Split sections ---------- */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr 1fr; align-items: center;
}
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }
.split-media figcaption { font-size: 0.88rem; color: var(--muted); margin-top: 0.8rem; font-style: italic; }
.split-media { margin: 0; }

.tick-list { list-style: none; padding: 0; margin: 1.8rem 0 0; }
.tick-list li { position: relative; padding-left: 1.7rem; margin-bottom: 0.55rem; color: var(--ink-soft); }
.tick-list li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--crimson);
}

/* ---------- Rooms ---------- */
.room {
  display: grid; grid-template-columns: 1.08fr 1fr;
  gap: clamp(2rem, 4.5vw, 4rem); align-items: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--rule);
}
.room:first-of-type { border-top: 0; padding-top: 0; }
.room-reverse .room-gallery { order: 2; }

.room-stage { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--paper-3); aspect-ratio: 4 / 3; }
.room-stage img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; }
.room-stage img.is-swapping { opacity: 0; }

/* One row whatever the count: the rooms have four and six photos respectively. */
.room-thumbs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0.6rem; margin-top: 0.7rem;
}
.thumb {
  aspect-ratio: 4 / 3; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius); overflow: hidden; background: none;
  opacity: 0.55; transition: opacity 0.2s ease, outline-color 0.2s ease;
  outline: 2px solid transparent; outline-offset: 2px;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { opacity: 0.85; }
.thumb.is-active { opacity: 1; outline-color: var(--crimson); }

.room-body h3 { margin-bottom: 0.35rem; }
.room-facts {
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.1rem;
}
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; margin: 1.4rem 0 1.8rem; }
.chips li {
  font-size: 0.82rem; color: var(--ink-soft);
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--rule); border-radius: 100px;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
}

/* ---------- Gallery ---------- */
/* 8 photos: one tile spans two columns, so a 3-column grid fills exactly 3 rows. */
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1.4vw, 1rem);
}
.tile { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; cursor: zoom-in; background: var(--paper-3); }
.tile img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1); }
.tile-wide { grid-column: span 2; }
.tile:hover img { transform: scale(1.04); }
.tile figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 1.8rem 1rem 0.8rem;
  font-size: 0.85rem; color: #fff;
  background: linear-gradient(to top, color-mix(in srgb, var(--ink) 78%, transparent), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tile:hover figcaption, .tile:focus-within figcaption { opacity: 1; transform: translateY(0); }

/* ---------- Amenities ---------- */
.amenity-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 3.5rem); }
.amenity-col h3 { padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.1rem; }
.amenity-col ul { list-style: none; padding: 0; margin: 0; }
.amenity-col li { padding: 0.36rem 0 0.36rem 1.4rem; position: relative; color: var(--ink-soft); font-size: 0.97rem; }
.amenity-col li::before {
  content: ''; position: absolute; left: 0; top: 0.95em;
  width: 7px; height: 2px; background: var(--crimson);
}

/* ---------- Places ---------- */
.place-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.place {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.place:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--teak) 35%, var(--rule)); }
.place-img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--paper-3);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.place:hover .place-img { transform: scale(1.03); }
.place-body { padding: 1.4rem 1.5rem 1.6rem; }
.place-dist {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--crimson); margin-bottom: 0.6rem;
}
.place h3 { font-size: 1.22rem; margin-bottom: 0.4rem; }
.place p { font-size: 0.95rem; color: var(--muted); margin: 0; }

/* ---------- Photo credits ---------- */
.credits { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); }
.credits summary {
  cursor: pointer; list-style: none;
  padding: 1.1rem 1.6rem 1.1rem 0; position: relative;
  font-size: 0.88rem; font-weight: 500; color: var(--muted);
  letter-spacing: 0.02em;
}
.credits summary::-webkit-details-marker { display: none; }
.credits summary:hover { color: var(--teak-deep); }
.credits summary::after {
  content: '+'; position: absolute; right: 0.2rem; top: 50%; translate: 0 -50%;
  font-size: 1.15rem; color: var(--crimson);
  transition: transform 0.28s ease;
}
.credits[open] summary::after { transform: rotate(45deg); }
.credits p, .credits li { font-size: 0.84rem; color: var(--muted); }
.credits ul { margin: 0 0 1.4rem; padding-left: 1.1rem; }
.credits li { margin-bottom: 0.35rem; }
.credits strong { color: var(--ink-soft); font-weight: 500; }

/* ---------- Video ---------- */
.film-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid var(--rule);
  background: var(--ink); line-height: 0;
}
.film-frame video { width: 100%; height: auto; display: block; }

/* ---------- Accreditations ---------- */
.accred-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }
.accred {
  border-top: 2px solid var(--crimson); padding-top: 1.2rem;
  display: flex; flex-direction: column;
}
.accred-mark {
  align-self: flex-start;
  font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0.04em;
  color: var(--paper); background: var(--crimson);
  padding: 0.25rem 0.7rem; border-radius: 2px; margin-bottom: 0.9rem;
}
.accred h3 { font-size: 1.15rem; margin-bottom: 0.45rem; }
.accred p { font-size: 0.93rem; color: var(--muted); margin: 0; }

/* ---------- Getting here ---------- */
.split-map { align-items: start; }
.address { font-style: normal; font-size: 1.08rem; color: var(--ink-soft); margin-bottom: 1.4rem; line-height: 1.75; }
.travel { margin: 2.2rem 0 1.4rem; }
.travel > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.travel dt { font-weight: 500; color: var(--ink); flex: 1 1 auto; min-width: 11ch; }
.travel dd { margin: 0; color: var(--muted); font-size: 0.94rem; text-align: right; flex: 0 1 auto; white-space: nowrap; }

.map-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid var(--rule);
  aspect-ratio: 4 / 3.4; background: var(--paper-3);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.9); }

/* ---------- Book band ---------- */
.book {
  background: var(--teak-deep);
  color: var(--paper);
  padding: clamp(4rem, 9vw, 7rem) 0;
  position: relative; overflow: hidden;
}
.book::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 42%),
                    radial-gradient(circle at 85% 88%, color-mix(in srgb, var(--laterite) 20%, transparent), transparent 46%);
  pointer-events: none;
}
.book-inner { position: relative; max-width: 900px; }
.book h2 { color: var(--paper); }
.book-lede { color: color-mix(in srgb, var(--paper) 78%, transparent); font-size: 1.1rem; max-width: 58ch; margin-bottom: 2.4rem; }
.book-note { font-size: 0.92rem; color: color-mix(in srgb, var(--paper) 66%, transparent); margin-top: 1.8rem; margin-bottom: 0; }

.book-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.book-card {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 0.8rem; text-decoration: none;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--ink) 35%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);
  color: var(--paper);
  transition: background-color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.book-card:hover {
  background: color-mix(in srgb, var(--ink) 20%, transparent);
  border-color: color-mix(in srgb, var(--paper) 42%, transparent);
  transform: translateY(-2px); color: var(--paper);
}
.book-card img { width: 104px; height: 84px; object-fit: cover; border-radius: var(--radius); flex: none; }
.book-card-body { display: flex; flex-direction: column; gap: 0.15rem; }
.book-card-name { font-family: var(--serif); font-size: 1.3rem; }
.book-card-meta { font-size: 0.83rem; color: color-mix(in srgb, var(--paper) 72%, transparent); }
.book-card-cta { font-size: 0.86rem; font-weight: 500; color: var(--gold-light); margin-top: 0.3rem; }

/* ---------- Rules ---------- */
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.6vw, 2.2rem); }
.rule { padding-top: 1.1rem; border-top: 2px solid var(--rule); }
.rule h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.rule p { font-size: 0.94rem; color: var(--muted); margin: 0; }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--ink); transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teak-deep); }
.faq summary::after {
  content: '+'; position: absolute; right: 0.3rem; top: 50%; translate: 0 -50%;
  font-size: 1.5rem; font-weight: 300; color: var(--crimson);
  transition: transform 0.28s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 2.5rem 1.4rem 0; color: var(--muted); }
.faq-body p { margin: 0; }
.faq details[open] .faq-body { animation: fadeIn 0.35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: color-mix(in srgb, var(--paper) 74%, transparent); padding: clamp(3rem, 6vw, 5rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(1.8rem, 4vw, 3rem); }
.footer-logo { width: 168px; height: auto; display: block; margin-bottom: 1rem; }
.footer-tag { font-size: 0.92rem; max-width: 34ch; }
.footer-col h3 {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem;
}
.footer-col address { font-style: normal; font-size: 0.93rem; line-height: 1.7; margin-bottom: 0.8rem; }
.footer-col p { font-size: 0.93rem; margin-bottom: 0.5rem; }
.site-footer a { color: color-mix(in srgb, var(--paper) 88%, transparent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); }
.site-footer a:hover { color: var(--paper); border-bottom-color: var(--gold); }
.site-footer .fineprint { color: color-mix(in srgb, var(--paper) 52%, transparent); }

.footer-base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--paper) 15%, transparent);
  font-size: 0.85rem;
}
.footer-base p { margin: 0; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 1rem; padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.25s ease;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 84svh; margin-inline: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox-caption {
  grid-column: 1 / -1; text-align: center; margin: 0;
  color: color-mix(in srgb, var(--paper) 80%, transparent); font-size: 0.9rem;
}
.lightbox-close {
  position: absolute; top: clamp(0.8rem, 2vw, 1.6rem); right: clamp(0.8rem, 2vw, 1.6rem);
  width: 44px; height: 44px; font-size: 2rem; line-height: 1;
  background: none; border: 0; color: var(--paper); cursor: pointer; opacity: 0.75;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-nav {
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  color: var(--paper); font-size: 1.9rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background-color 0.2s ease;
}
.lightbox-nav:hover { background: color-mix(in srgb, var(--paper) 24%, transparent); }
body.no-scroll { overflow: hidden; }

/* ---------- Reveal on scroll ----------
   Only hidden when JavaScript is running (the .js class is set in <head>), so the
   page is fully readable if the script fails or is blocked. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Overflow containment

   Grid and flex children default to `min-width: auto`, which refuses to shrink
   below their content's intrinsic width. The Sapphire room's six-thumbnail strip
   is 6x72px + gaps = 480px, so it dragged the whole page out to 496px inside a
   375px viewport — and a phone's answer to that is to zoom the page out until it
   fits, which is why the site looked shrunken rather than responsive.

   `min-width: 0` lets these boxes be narrower than their contents, so the strip
   scrolls inside its own container instead of widening the document.
   ========================================================================== */
.room > *,
.split > *,
.book-cards > *,
.place-grid > *,
.amenity-cols > *,
.rules-grid > *,
.accred-grid > *,
.footer-grid > *,
.grid-gallery > * { min-width: 0; }

.room-gallery, .room-body, .room-stage, .room-thumbs { min-width: 0; }
.book-card, .book-card-body { min-width: 0; }
.book-card-name, .book-card-meta, .place h3, .room-body h3 { overflow-wrap: anywhere; }

/* Long unbroken strings (file names in the credits, a URL someone pastes in) are
   the other classic way to widen a page. */
.credits li, .travel dt, .travel dd, .address { overflow-wrap: anywhere; }

/* Belt and braces: even if something new overflows later, clip it rather than
   letting it rescale the whole page. `clip` (not `hidden`) keeps position:sticky
   and smooth scrolling working. */
html { overflow-x: clip; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .amenity-cols, .place-grid, .rules-grid, .accred-grid { grid-template-columns: 1fr 1fr; }
  .grid-gallery { grid-template-columns: repeat(2, 1fr); }
  .tile-wide { grid-column: span 1; }
}

@media (max-width: 860px) {
  :root { --header-h: 66px; }

  .brand-logo { height: 38px; }

  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 1rem var(--gutter) 2rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow-md);
    transform: translateY(-120%);
    transition: transform 0.35s cubic-bezier(0.3, 0.8, 0.3, 1);
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); }
  .nav > a:not(.nav-cta) { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft) !important; }
  .nav > a:not(.nav-cta):last-of-type { border-bottom: 0; }
  .nav-cta { margin-top: 1rem; justify-content: center; color: #fff !important; }
  .nav-toggle { display: flex; }

  .split, .room, .book-cards { grid-template-columns: 1fr; }
  .room-reverse .room-gallery { order: 0; }
  .room { gap: 1.8rem; }
  .split-map .split-media { order: -1; }

  .hero { min-height: 88svh; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 400px) {
  :root { --gutter: 1rem; }
  .room-body h3, .place h3 { font-size: 1.15rem; }
  .chips li { font-size: 0.78rem; padding: 0.28rem 0.6rem; }
  .hero-actions .btn { width: 100%; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .amenity-cols, .place-grid, .rules-grid, .grid-gallery, .accred-grid { grid-template-columns: 1fr; }
  .tile-wide { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .travel > div { flex-direction: column; gap: 0.2rem; }
  .travel dd { text-align: left; white-space: normal; }
  .book-card { flex-direction: column; align-items: flex-start; }
  .book-card img { width: 100%; height: 150px; }
  .lightbox { grid-template-columns: 1fr; }
  .lightbox-nav { position: absolute; bottom: 1.5rem; }
  .lightbox-prev { left: 20%; }
  .lightbox-next { right: 20%; }

  /* Six thumbs squeezed into 390px would be ~50px wide — too small to tap.
     Give them a real size and let the strip scroll sideways instead. */
  .room-thumbs {
    display: flex; overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.3rem;
  }
  .thumb { flex: 0 0 72px; scroll-snap-align: start; }
}

/* ---------- Motion / print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .hero-scroll, .nav-toggle, .lightbox, .map-frame { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; color: #000; }
  a::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}