/* =========================================================================
   Hotel Vrindavan Regency, Bikaner
   Design system. Warm editorial light. Cream ground, terracotta accent.

   PALETTE LOCK   ground = warm cream (from the hero plate)
                  accent = terracotta, ONE accent, whole site
   SHAPE LOCK     surfaces + media 22px | inputs 12px | interactive full pill
   THEME LOCK     light, every section. The only dark surfaces are photographs
                  carrying text on top of them, where a scrim is the point.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  color-scheme: light;

  /* Ground. Sampled from the hero plate so the page and the photograph meet
     without a seam. Never pure white. */
  --cream-50:  #FBF7F1;
  --cream-100: #F7F1E9;
  --cream-200: #F4EDE4;   /* the page */
  --cream-300: #EDE4D9;
  --cream-400: #E2D6C7;

  /* Raised surfaces sit lighter than the ground, not darker. */
  --paper: #FCFAF7;

  /* Single accent. Terracotta, sampled from the reference CTAs. */
  --terra:      #9E4C33;
  --terra-deep: #7E3A26;
  --terra-soft: #B8674A;
  --terra-light: #D98A64;   /* 6.3:1 on the bleed scrim, for accents over photos */
  --terra-wash: #F3E4DC;

  /* Text. Warm blacks, never neutral grey on a warm ground. */
  --ink:   #191512;   /* 15.3:1 on cream-200 */
  --body:  #5C544B;   /*  6.3:1 */
  --faint: #6E655C;   /*  4.8:1, so small print still clears AA */

  --line:       rgba(25, 21, 18, .10);
  --line-soft:  rgba(25, 21, 18, .06);
  --line-terra: rgba(158, 76, 51, .24);

  /* Double-bezel surfaces. An outer tray the plate sits in, then the plate. */
  --shell-bg:   rgba(25, 21, 18, .022);
  --shell-line: rgba(25, 21, 18, .055);
  --core-line:  rgba(25, 21, 18, .075);
  --inner-hi:   inset 0 1px 0 rgba(255, 255, 255, .9);
  --bezel: 7px;

  /* Shadows carry the ground's warmth. Never neutral black. */
  --sh-sm: 0 1px 2px rgba(90, 62, 45, .06);
  --sh-md: 0 16px 40px -20px rgba(90, 62, 45, .28);
  --sh-lg: 0 40px 88px -40px rgba(90, 62, 45, .38);
  --sh-terra: 0 20px 48px -22px rgba(158, 76, 51, .42);

  /* Shape lock. Trays softer than the plates they hold. */
  --r-xl: 26px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 12px;
  --r-pill: 999px;

  --pad-x: clamp(1.25rem, 5vw, 5.5rem);
  --sec-y: clamp(6rem, 12vw, 12rem);
  --maxw: 1440px;
  --nav-h: 84px;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);

  --font-display: "Fraunces", "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Z-scale, documented so nothing freelances a z-index. */
  --z-grain: 90;
  --z-progress: 95;
  --z-nav: 70;
  --z-drawer: 80;
  --z-sticky: 40;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  background: var(--cream-200);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -.022em;
  margin: 0;
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  text-wrap: balance;
}
/* WONK unlocks Fraunces's cocked alternates. Display sizes only, where the
   quirk reads as craft rather than as a rendering fault. */
h1, .d1, .d2 { font-variation-settings: "SOFT" 0, "WONK" 1; }

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--terra); color: #fff; }

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

/* ---------- 3. Paper grain. Multiply on a light ground, so it reads as
     tooth in the stock rather than as video noise. ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-terra) 18%, var(--line-terra) 82%, transparent);
  border: 0;
  margin: 0;
}

/* An editorial index marker. Used where a section has no eyebrow badge, so the
   page alternates between two openers instead of repeating one nine times. */
.sec-ix {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.6rem;
}
.sec-ix b { color: var(--terra); font-weight: 500; }
.sec-ix::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-terra), transparent);
}

/* ---------- 5. Typography scale ---------- */
.d1 { font-size: clamp(3rem, 1.5rem + 6.4vw, 7.25rem); font-weight: 400; letter-spacing: -.032em; }
.d2 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.5rem); font-weight: 400; letter-spacing: -.028em; }
.d3 { font-size: clamp(1.7rem, 1.25rem + 2.1vw, 2.85rem); font-weight: 400; letter-spacing: -.022em; }
.d4 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); font-weight: 500; letter-spacing: -.018em; }

/* Italic in the display face is the accent voice. Used on one phrase per page. */
.d1 em, .d2 em, .d3 em, h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--terra);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}
/* Upright accent, for where the colour alone should carry the emphasis. */
.accent { color: var(--terra); }

.lede {
  font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
  line-height: 1.6;
  color: var(--body);
  max-width: 56ch;
}

.body-muted { color: var(--body); max-width: 62ch; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .63rem;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .42rem .9rem .42rem .8rem;
  border: 1px solid var(--line-terra);
  border-radius: var(--r-pill);
  background: rgba(158, 76, 51, .05);
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--terra);
  box-shadow: 0 0 0 3px rgba(158, 76, 51, .14);
  flex-shrink: 0;
}

/* The kicker from the hero reference: a label with a rule running off it. */
.kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.5rem;
}
.kicker::after {
  content: "";
  width: clamp(2.5rem, 6vw, 4.5rem);
  height: 1px;
  background: var(--ink);
  opacity: .35;
}

.terra { color: var(--terra); }
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  white-space: nowrap;          /* CTA never wraps */
  padding: .95rem 1.9rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .005em;
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition: transform .5s var(--ease), background-color .5s var(--ease),
              border-color .5s var(--ease), color .5s var(--ease),
              box-shadow .5s var(--ease);
}
.btn i { font-size: 1.1em; }

/* white on terracotta: 5.9:1 */
.btn--accent {
  background: var(--terra);
  color: #fff;
  border-color: var(--terra);
  box-shadow: var(--sh-terra);
}
.btn--accent:hover {
  background: var(--terra-deep);
  border-color: var(--terra-deep);
  box-shadow: 0 26px 60px -24px rgba(158, 76, 51, .55);
  transform: translate3d(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 2px), 0);
}

/* ink on cream with a terracotta hairline: 15:1 */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-terra);
}
.btn--ghost:hover {
  border-color: var(--terra);
  color: var(--terra);
  background: rgba(158, 76, 51, .04);
  transform: translate3d(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 2px), 0);
}

/* for use over photography: solid scrim so contrast never depends on the image */
.btn--scrim {
  background: rgba(25, 21, 18, .55);
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn--scrim:hover { background: rgba(25, 21, 18, .78); border-color: #fff; }

.btn:active {
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0) scale(.975);
  transition-duration: .1s;
}

/* The trailing arrow never floats naked beside the label. It sits in its own
   well, flush with the button's inner padding, and carries the hover tension. */
.btn__ico {
  display: grid;
  place-items: center;
  width: 27px; height: 27px;
  margin-left: .15rem;
  margin-right: -.95rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  flex-shrink: 0;
  transition: transform .5s var(--ease), background-color .5s var(--ease);
}
.btn__ico i { font-size: .78rem; }
.btn:hover .btn__ico { transform: translate(2px, -2px) scale(1.07); }
.btn--ghost .btn__ico { background: rgba(158, 76, 51, .12); color: var(--terra); }
.btn--ghost:hover .btn__ico { background: var(--terra); color: #fff; }
/* A solid well, for the play-style secondary action in the hero. */
.btn__ico--solid { background: var(--terra); color: #fff; }

/* Text link with a terracotta underline that sweeps in from the left. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--terra), var(--terra));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .45s var(--ease), color .3s var(--ease);
}
.tlink:hover { background-size: 100% 1px; color: var(--terra); }
.tlink i { transition: transform .45s var(--ease); }
.tlink:hover i { transform: translateX(4px); }

/* ---------- 7. Navigation. A floating capsule, not a bar glued to the top. ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  padding-top: .85rem;
  padding-inline: var(--pad-x);
}
.nav__in {
  height: 66px;
  padding-inline: clamp(.9rem, 1.6vw, 1.5rem);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  transition: background-color .6s var(--ease), border-color .6s var(--ease),
              box-shadow .6s var(--ease), backdrop-filter .6s var(--ease);
}
.nav.is-stuck .nav__in {
  background: rgba(252, 250, 247, .78);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-color: var(--shell-line);
  box-shadow: var(--sh-md), var(--inner-hi);
}

/* Three-line lockup, as in the reference: the descriptor, the name, the city.
   The registered name is "Hotel Vrindavan Regency" -- the same string used in
   the <title> and the Hotel schema -- so the bar should not drop the first word. */
.brand { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.brand img { width: 42px; height: auto; }
.brand__txt { display: flex; flex-direction: column; line-height: 1.16; }
.brand__pre {
  font-family: var(--font-display);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--faint);
}
.brand__name {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__sub {
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--terra);
}

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__links a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--body);
  white-space: nowrap;
  transition: color .3s var(--ease);
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--terra);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); }

.nav__cta { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.nav__cta .btn { padding: .68rem 1.35rem; font-size: .875rem; }
.nav__cta .btn .btn__ico { width: 23px; height: 23px; margin-right: -.7rem; }

.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.burger:hover { border-color: var(--line-terra); background: rgba(158, 76, 51, .05); }

/* Two rules that rotate into an X rather than swapping glyphs. */
.burger__bars { position: relative; width: 18px; height: 12px; }
.burger__bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .5s var(--ease), width .5s var(--ease);
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { bottom: 0; width: 68%; }
.burger:hover .burger__bars span:nth-child(2) { width: 100%; }
[data-drawer-close] .burger__bars span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
[data-drawer-close] .burger__bars span:nth-child(2) { bottom: auto; top: 50%; width: 100%; transform: translateY(-50%) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: rgba(247, 241, 233, .96);
  backdrop-filter: blur(30px) saturate(140%);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  padding: 1.25rem var(--pad-x) 2.5rem;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .55s var(--ease), visibility .55s;
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.drawer__links { display: flex; flex-direction: column; gap: .25rem; margin-top: 2rem; }
.drawer__links a {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -.03em;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s var(--ease), transform .65s var(--ease), color .3s var(--ease);
}
.drawer__links a:hover { color: var(--terra); }
.drawer.is-open .drawer__links a { opacity: 1; transform: none; }
.drawer.is-open .drawer__links a:nth-child(1) { transition-delay: .10s; }
.drawer.is-open .drawer__links a:nth-child(2) { transition-delay: .16s; }
.drawer.is-open .drawer__links a:nth-child(3) { transition-delay: .22s; }
.drawer.is-open .drawer__links a:nth-child(4) { transition-delay: .28s; }
.drawer.is-open .drawer__links a:nth-child(5) { transition-delay: .34s; }
.drawer.is-open .drawer__links a:nth-child(6) { transition-delay: .40s; }
.drawer__foot {
  margin-top: auto;
  padding-top: 2.5rem;
  display: grid;
  gap: .9rem;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--ease) .46s, transform .65s var(--ease) .46s;
}
.drawer.is-open .drawer__foot { opacity: 1; transform: none; }

/* ---------- 8. Image treatment. On a light ground the photographs carry
     themselves; they need warmth, not a wash. ---------- */
.fig {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--cream-300);
  isolation: isolate;
}
.fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The hotel's own photography is mixed-temperature and shot on very
     different kit. A light sepia pulls every frame toward the cream palette
     so the set reads as one commission rather than four. */
  filter: saturate(.92) contrast(1.04) brightness(1.02) sepia(.14);
  transition: transform 1.3s var(--ease), filter .8s var(--ease);
}
/* legibility scrim, only where text sits on top */
.fig--scrim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(25, 18, 12, .9) 2%, rgba(25, 18, 12, .5) 38%, rgba(25, 18, 12, .08) 72%);
  pointer-events: none;
}
.fig--square { aspect-ratio: 1; }
.fig--wide { aspect-ratio: 16 / 10; }
.fig--tall { aspect-ratio: 3 / 4; }
.fig--portrait { aspect-ratio: 2 / 3; }

a:hover > .fig img,
.hoverable:hover .fig img { transform: scale(1.06); filter: saturate(1.04) contrast(1.04) brightness(1.05) sepia(.04); }

/* ---------- 9. Hero. A single photographic plate, copy set into its open
     cream half. The plate runs up under the transparent nav. ---------- */
.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--nav-h) * -1);
  padding-top: var(--nav-h);
  min-height: clamp(36rem, 88vh, 54rem);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__plate { position: absolute; inset: 0; z-index: -1; }
.hero__plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* The plate's cream runs out before the left gutter does on wide screens.
   This carries it the rest of the way so the copy never sits on a hard edge. */
.hero__plate::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 22%;
  background: linear-gradient(90deg, var(--cream-200) 12%, rgba(244, 237, 228, 0));
}

/* The nav floats over the plate with no chrome of its own. Past about 1600px
   the curve has moved left far enough that the right-hand links land on the
   curtain, where ink-on-photograph measures 2.8:1 and fails. This holds a soft
   cream fall-off across the top so the whole bar keeps a light ground at every
   width. It clears 5.9:1 through the 84px the nav occupies, then fades out
   before it reaches the headline. */
.hero__plate::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: clamp(140px, 21vh, 240px);
  background: linear-gradient(180deg,
              rgba(244, 237, 228, .97) 0%,
              rgba(244, 237, 228, .91) 42%,
              rgba(244, 237, 228, .58) 72%,
              rgba(244, 237, 228, 0) 100%);
  pointer-events: none;
}

.hero__grid { position: relative; width: 100%; }
.hero__copy { max-width: 34rem; }

/* Measured, not guessed: "across the road." sets 5.89x the font size in
   Fraunces at opsz 144, so 4.75rem clears a 34rem column with room to spare. */
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); font-weight: 400; line-height: 1.02; }
.hero h1 .accent { display: inline-block; }
.hero .lede { margin-top: 1.5rem; max-width: 30rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; }

/* ---------- 10. Booking bar. Docked into the foot of the hero. ---------- */
.bookbar { position: relative; z-index: var(--z-sticky); margin-top: clamp(-5rem, -6vw, -3rem); }
.bookbar__in {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 1rem;
  align-items: end;
}

.field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.field > label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--cream-100);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  padding: .78rem .9rem;
  font-family: var(--font-body);
  font-size: .93rem;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--faint); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--terra);
  background: var(--paper);
}
.field select { appearance: none; cursor: pointer; padding-right: 2.2rem; }
.field--select { position: relative; }
.field--select > i {
  position: absolute;
  right: .85rem; bottom: .95rem;
  pointer-events: none;
  color: var(--terra);
  font-size: .9rem;
}
.field__hint { font-size: .78rem; color: var(--faint); }
.field__err { font-size: .8rem; color: #a33417; display: none; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #c0492a; }
.field.has-error .field__err { display: block; }

.bookbar .btn { height: 3rem; }

/* ---------- 10b. Trust strip, under the booking bar ---------- */
.trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.trust > div {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-left: clamp(1rem, 2.5vw, 2rem);
  border-left: 1px solid var(--line);
}
.trust > div:first-child { padding-left: 0; border-left: 0; }
.trust i { font-size: 1.55rem; color: var(--terra); flex-shrink: 0; }
.trust b {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.trust span { display: block; font-size: .84rem; color: var(--body); line-height: 1.35; margin-top: .15rem; }

/* ---------- 11. Stat / editorial split ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}
.split--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line-terra);
}
.stat__n {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.3rem);
  font-weight: 400;
  color: var(--terra);
  letter-spacing: -.045em;
  line-height: 1;
}
.stat__l { font-size: .84rem; color: var(--body); margin-top: .55rem; line-height: 1.4; }

/* ---------- 12. Room rail. Horizontal scroll-snap, not three equal cards. ---------- */
.rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.rail-ctrl { display: flex; gap: .55rem; }
.rail-ctrl button {
  width: 46px; height: 46px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .4s var(--ease), color .4s var(--ease),
              background-color .4s var(--ease), transform .4s var(--spring);
}
.rail-ctrl button:hover:not(:disabled) { border-color: var(--terra); color: var(--terra); transform: scale(1.07); }
.rail-ctrl button:active:not(:disabled) { transform: scale(.94); }
.rail-ctrl button:disabled { opacity: .32; cursor: not-allowed; }

.rail {
  display: grid;
  grid-auto-flow: column;
  /* Under 100% of four cards, so the fourth peeks and the rail reads as scrollable. */
  grid-auto-columns: minmax(300px, 29%);
  gap: 1.35rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 1.25rem;
  margin-inline: calc(var(--pad-x) * -1);
  padding-inline: var(--pad-x);
  scrollbar-width: thin;
  scrollbar-color: var(--terra-soft) transparent;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-thumb { background: var(--terra-soft); border-radius: 99px; }
.rail::-webkit-scrollbar-track { background: var(--line); }

.room { display: flex; flex-direction: column; gap: 1.15rem; }
.room .fig { aspect-ratio: 4 / 5; }
.room__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.room__rate { text-align: right; flex-shrink: 0; }
.room__rate b {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--terra);
}
.room__rate span { font-size: .72rem; color: var(--faint); }
.room__floor {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: .3rem;
}
.room p { font-size: .93rem; color: var(--body); }

/* ---------- 13. Full-bleed feature. The one dark surface on the site, because
     the text sits directly on the photograph. ---------- */
.bleed {
  position: relative;
  min-height: clamp(32rem, 64vw, 46rem);
  display: grid;
  /* The scroll-linked parallax scales the photograph past the section box.
     Without this it escapes top and bottom, where the scrim does not reach it
     and it lands on the cream as two bright unmasked bands. */
  overflow: hidden;
}
.bleed__img { position: absolute; inset: 0; }
.bleed__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.02) contrast(1.05) brightness(.92);
}
/* The scrim buys the copy its contrast down the left, then gets out of the way,
   so the photograph is still the reason the section exists. Measured at the far
   edge of the text column against the brightest thing in frame (a lit
   tablecloth): 7.3:1, so it holds even where the picture works against it. */
.bleed__img::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg,
      rgba(38, 20, 12, .94) 0%,
      rgba(38, 20, 12, .90) 30%,
      rgba(38, 20, 12, .72) 46%,
      rgba(38, 20, 12, .30) 66%,
      rgba(38, 20, 12, .08) 88%,
      rgba(38, 20, 12, .04) 100%),
    radial-gradient(135% 115% at 24% 45%, transparent 40%, rgba(20, 10, 5, .55) 100%);
}
.bleed__wrap { position: relative; align-self: center; width: 100%; }
.bleed__body { max-width: 38rem; padding-block: clamp(4.5rem, 10vw, 8rem); }
/* Everything inside the bleed inverts, since it sits on a photograph. */
.bleed__body,
.bleed__body h2 { color: #fff; }
.bleed__body .lede { color: rgba(255, 255, 255, .88); }
.bleed__body .body-muted { color: rgba(255, 255, 255, .74); }
.bleed__body .sec-ix { color: rgba(255, 255, 255, .6); }
.bleed__body .sec-ix b { color: var(--terra-light); }
.bleed__body .sec-ix::after { background: linear-gradient(90deg, rgba(255, 255, 255, .4), transparent); }

/* .facts appears both inside the dark bleed and on plain cream sections, so it
   defaults to the light theme and inverts only where it sits on a photograph. */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-terra);
}
.fact__n { font-family: var(--font-mono); font-size: 1.5rem; color: var(--terra); font-weight: 500; }
.fact__l { font-size: .82rem; color: var(--body); margin-top: .25rem; }

.bleed__body .facts { border-top-color: rgba(255, 255, 255, .26); gap: clamp(2.5rem, 5vw, 4rem); }
.bleed__body .fact__n { color: var(--terra-light); font-size: clamp(1.7rem, 1.4rem + .9vw, 2.3rem); line-height: 1; }
.bleed__body .fact__l { color: rgba(255, 255, 255, .78); margin-top: .5rem; }

/* ---------- 14. Bento. Cell count always matches item count. ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.15rem;
}
.bento > a { position: relative; border-radius: var(--r-lg); overflow: hidden; display: block; }
/* 6 destinations, 6 cells, ordered by distance, aspect chosen per photograph */
.bento > a:nth-child(1) { grid-column: span 2; aspect-ratio: 3 / 4; }
.bento > a:nth-child(2) { grid-column: span 2; aspect-ratio: 3 / 4; }
.bento > a:nth-child(3) { grid-column: span 2; aspect-ratio: 3 / 4; }
.bento > a:nth-child(4) { grid-column: span 3; aspect-ratio: 16 / 10; }
.bento > a:nth-child(5) { grid-column: span 3; aspect-ratio: 16 / 10; }
.bento > a:nth-child(6) { grid-column: span 6; aspect-ratio: 21 / 7; }

.bento .fig { border-radius: 0; height: 100%; }
.bento__cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: clamp(1.15rem, 2.2vw, 1.85rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  color: #fff;
}
.bento__cap h3 { font-size: clamp(1.05rem, .95rem + .5vw, 1.45rem); }
.bento__cap p { font-size: .84rem; color: rgba(255, 255, 255, .8); margin-top: .3rem; max-width: 34ch; }
.bento__km {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--terra-light);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ---------- 15. Amenity clusters ---------- */
.clusters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
.cluster > h3 {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terra);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-terra);
  margin-bottom: 1.5rem;
}
.cluster ul { display: grid; gap: 1.05rem; }
.cluster li { display: flex; align-items: flex-start; gap: .85rem; font-size: .96rem; color: var(--body); }
.cluster li i { color: var(--terra); font-size: 1.15rem; flex-shrink: 0; margin-top: .08rem; }

/* ---------- 16. Location list ---------- */
.dist { display: grid; gap: 0; }
.dist li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.05rem 0;
}
.dist li + li { border-top: 1px solid var(--line); }
.dist__name { font-size: 1rem; }
.dist__km { font-family: var(--font-mono); font-size: .88rem; color: var(--terra); white-space: nowrap; }

.map {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 24rem;
  background: var(--cream-300);
}
.map iframe { width: 100%; height: 100%; min-height: 24rem; border: 0; display: block; filter: saturate(.85) contrast(.98); }

/* ---------- 17. Contact tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 2.6vw, 2.25rem); }
.tile {
  border: 1px solid var(--core-line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.6vw, 2.15rem);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tile > i { font-size: 1.5rem; color: var(--terra); margin-bottom: .5rem; }
.tile h3 { font-size: 1.05rem; }
.tile a, .tile p { font-size: .95rem; color: var(--body); line-height: 1.55; }
.tile a:hover { color: var(--terra); }

/* ---------- 18. Gallery ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.filters button {
  padding: .6rem 1.35rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: transparent;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .4s var(--ease), color .4s var(--ease),
              background-color .4s var(--ease), transform .4s var(--spring);
}
.filters button:hover { border-color: var(--terra); color: var(--terra); transform: translateY(-2px); }
.filters button[aria-pressed="true"] { background: var(--terra); border-color: var(--terra); color: #fff; }

.masonry { columns: 3; column-gap: 1.15rem; }
.masonry > figure { break-inside: avoid; margin: 0 0 1.15rem; }
.masonry figcaption { font-size: .82rem; color: var(--body); margin-top: .6rem; }
.masonry > figure[hidden] { display: none; }

.gal-empty { text-align: center; padding: 5rem 1rem; color: var(--body); }
.gal-empty i { font-size: 2.5rem; color: var(--terra); display: block; margin-bottom: 1rem; }

/* ---------- 19. Page header for inner pages ---------- */
.phead { position: relative; overflow-x: clip; padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 5vw, 4.5rem); }
.phead::before {
  content: "";
  position: absolute;
  left: 8%; top: -10%;
  width: 40vw; height: 40vw;
  max-width: 520px; max-height: 520px;
  background: radial-gradient(circle, rgba(158, 76, 51, .09), transparent 68%);
  filter: blur(46px);
  pointer-events: none;
  z-index: -1;
}
.crumb {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.4rem;
}
.crumb a:hover { color: var(--terra); }

/* ---------- 20. Footer. Two bands: the column field over a veiled
     architectural plate, and a dark legal rail. ---------- */
.foot {
  position: relative;
  background: var(--cream-50);
  overflow: hidden;
  isolation: isolate;
}
/* The photograph is the footer's ground, not an element in it: it sits on its
   own layer under a cream veil, so the arch and the fort read as a watermark
   rather than as a picture the copy is fighting. */
.foot__main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--cream-200), rgba(244, 237, 228, 0) 72px),
    linear-gradient(180deg, rgba(251, 247, 241, .74), rgba(251, 247, 241, .82)),
    url("../img/hotel/footer-bg.jpg") center / cover no-repeat;
  background-color: var(--cream-50);
}
.foot__main { position: relative; }
.foot__body {
  padding-block: clamp(4rem, 7vw, 7rem) clamp(3.5rem, 6vw, 6rem);
}

/* The brand column is deliberately wider than the link columns; the last one
   carries the numbers, so it needs room for a display-size line. */
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr) minmax(0, .8fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 3.4vw, 3.25rem);
}
/* Hairlines between the columns, drawn on the gap rather than on the cells. */
.foot__grid > * + * {
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(2rem, 3.4vw, 3.25rem);
}

/* -- brand column -- */
.brand--foot img { width: 54px; }
.brand--foot .brand__name { font-size: 1.02rem; }

.foot__tag {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
}
.foot__tag span {
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-terra));
  flex-shrink: 0;
}
.foot__blurb {
  margin-top: 1.65rem;
  max-width: 34ch;
  font-size: .95rem;
  line-height: 1.72;
  color: var(--body);
}

/* -- link columns -- */
.foot h4 {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 500;
  margin-bottom: 1.6rem;
}
/* A short rule under the label, not a divider spanning the column. */
.foot h4::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 1px;
  margin-top: .95rem;
  background: var(--line-terra);
}
.foot ul { display: grid; gap: .95rem; list-style: none; }
.foot li, .foot p { font-size: .95rem; color: var(--body); line-height: 1.6; }
.foot li a {
  display: inline-block;
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.foot li a:hover { color: var(--terra); transform: translateX(4px); }

/* -- reservations column -- */
.foot__eyebrow {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1rem;
}
.foot__phone {
  display: block;
  font-family: var(--font-display);
  /* Tracks the column, which is at its narrowest just above the 1100px fold.
     A wrapped phone number reads as two numbers, so it never wraps. */
  font-size: clamp(1.2rem, 1.85vw, 1.9rem);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .35s var(--ease);
}
.foot__phone:hover { color: var(--terra); }
.foot__alt {
  margin-top: 1.1rem;
  gap: .6rem !important;
  font-size: .92rem;
}
.foot__place {
  display: flex;
  gap: .75rem;
  margin-top: 1.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
  font-size: .9rem;
}
.foot__place i {
  color: var(--terra);
  font-size: 1.05rem;
  line-height: 1.55;
  flex-shrink: 0;
}

/* -- dark legal rail -- */
.foot__bar {
  position: relative;
  background: #16120F;
  color: rgba(252, 250, 247, .62);
  padding-block: clamp(1.6rem, 2.2vw, 2.25rem);
  font-size: .82rem;
}
.foot__bar-in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
}
.foot__bar-in > :last-child { justify-self: end; }
/* Centre note is set as an ornament: hairline, mono caps, hairline. */
.foot__note {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terra-light);
}
.foot__note::before,
.foot__note::after {
  content: "";
  width: clamp(24px, 4vw, 64px);
  height: 1px;
  background: rgba(217, 138, 100, .38);
}
.foot__credit a {
  color: rgba(252, 250, 247, .82);
  border-bottom: 1px solid transparent;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.foot__credit a:hover { color: var(--terra-light); border-bottom-color: var(--terra-light); }

.social { display: flex; gap: .6rem; margin-top: 2rem; }
.social a {
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--body);
  transition: border-color .35s var(--ease), color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--spring);
}
.social a:hover {
  border-color: var(--terra);
  color: var(--terra);
  background: var(--terra-wash);
  transform: translateY(-3px);
}

/* Persistent call button on small screens, where a tap-to-call matters most. */
.callfab {
  position: fixed;
  right: 1rem; bottom: 1rem;
  z-index: var(--z-sticky);
  display: none;
  box-shadow: var(--sh-lg);
}

/* ---------- 21. Motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(12px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform, filter;
}
.reveal.is-in { opacity: 1; transform: none; filter: blur(0); will-change: auto; }

/* Photographs come in from further away and settle a beat behind their copy,
   so the image reads as the thing the text was introducing. */
.reveal--plate { transform: translateY(46px) scale(.965); }

/* Hero lines rise out of a mask on load. Sequence = reading order. */
.rise { display: block; overflow: hidden; padding-bottom: .06em; }
.rise > span {
  display: block;
  transform: translateY(105%);
  animation: rise .95s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rise { to { transform: translateY(0); } }

.fade-up {
  opacity: 0;
  animation: fadeUp .85s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Slow drift on the hero plate. Communicates depth, nothing else. */
.kenburns { animation: kb 26s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .rise > span { transform: none; }
  .fade-up { opacity: 1; }
  .kenburns { animation: none; }
  .progress { display: none; }
  .drawer__links a, .drawer__foot { opacity: 1; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck .nav__in { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .drawer { background: var(--cream-100); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .btn--scrim { background: rgba(25, 21, 18, .9); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- 22. Responsive. Explicit collapse for every multi-column block. ---------- */
/* Nav fit, measured rather than guessed. With the full lockup the bar needs
   about 1130px of track; the shell only supplies that past ~1300. So the phone
   pill (which is also in the drawer, the footer and the fixed call button)
   drops first, and the links fold into the burger while there is still slack. */
@media (max-width: 1300px) {
  .nav__cta .btn--ghost { display: none; }
}
@media (max-width: 1180px) {
  .nav__links { display: none; }
  .burger { display: flex; }
}

@media (max-width: 1100px) {
  /* Four columns need ~1100px before the reservations line starts to break;
     below that they fold to two, with the dividers kept only on the
     right-hand cells. */
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2.75rem, 5vw, 3.75rem); }
  .foot__grid > * + * { border-left: 0; padding-left: 0; }
  .foot__grid > *:nth-child(2) { border-left: 1px solid var(--line-soft); padding-left: clamp(2rem, 4vw, 3rem); }
  .foot__grid > *:nth-child(4) { border-left: 1px solid var(--line-soft); padding-left: clamp(2rem, 4vw, 3rem); }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
  .trust > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 980px) {
  /* The plate's cream half is on its left, so hold the crop there and let the
     copy sit on it rather than on the photograph. */
  .hero { min-height: clamp(32rem, 76vh, 40rem); }
  .hero__plate img { object-position: 26% 50%; }
  .hero__plate::after { width: 62%; background: linear-gradient(90deg, var(--cream-200) 40%, rgba(244, 237, 228, 0)); }
  .hero__copy { max-width: 30rem; }
  .bookbar__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bookbar__in > .btn { grid-column: 1 / -1; }
  .split, .split--wide { grid-template-columns: 1fr; gap: 2.5rem; }
  .clusters { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr; }
  .masonry { columns: 2; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > a:nth-child(1),
  .bento > a:nth-child(2) { grid-column: span 1; aspect-ratio: 3 / 4; }
  .bento > a:nth-child(3) { grid-column: span 1; aspect-ratio: 3 / 4; }
  .bento > a:nth-child(4) { grid-column: span 1; aspect-ratio: 3 / 4; }
  .bento > a:nth-child(5),
  .bento > a:nth-child(6) { grid-column: span 2; aspect-ratio: 16 / 9; }
  .rail { grid-auto-columns: minmax(260px, 62%); }
  .callfab { display: inline-flex; }
  /* Clearance so the fixed call button never sits on top of the last line of
     the footer. It goes on the dark rail rather than on the body, or the page
     ground shows as a cream strip below the footer. */
  .foot__bar { padding-bottom: 5.5rem; }
}

@media (max-width: 640px) {
  :root { --sec-y: clamp(3.5rem, 12vw, 5rem); }
  /* Brand + pill + burger will not fit on one line at phone widths, and a
     wrapped nav is broken. The booking CTA lives in the drawer and in the
     fixed call button, so the bar keeps only the burger. */
  .nav__cta .btn { display: none; }
  .hero { min-height: 0; padding-bottom: clamp(2.5rem, 8vw, 4rem); }
  /* Hold the crop on the seam so the copy still lands on clean cream while the
     room itself stays legible down the right edge, rather than a ghost of it. */
  .hero__plate img { object-position: 58% 50%; }
  .hero__plate::after {
    width: 100%;
    background: linear-gradient(90deg, var(--cream-200) 60%, rgba(244, 237, 228, 0) 96%);
  }
  .hero__copy { max-width: 22rem; }
  .bookbar { margin-top: clamp(-2.5rem, -5vw, -1.5rem); }
  .bookbar__in { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; gap: 1.25rem; }
  .trust > div { padding-left: 0; border-left: 0; }
  .stats { grid-template-columns: 1fr; gap: 1.5rem; text-align: left; }
  .masonry { columns: 1; }
  .bento { grid-template-columns: 1fr; }
  .bento > a { grid-column: span 1 !important; aspect-ratio: 4 / 3 !important; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__grid > *:nth-child(n) { border-left: 0; padding-left: 0; }
  /* The plate is 2.6:1 and the footer is taller than it is wide here, so cover
     would blow it up to a sliver of arch. Serve the small file, hold the crop
     on the quiet middle of the wall, and veil it harder for the longer copy. */
  .foot__main::before {
    background:
      linear-gradient(180deg, var(--cream-200), rgba(244, 237, 228, 0) 48px),
      linear-gradient(180deg, rgba(251, 247, 241, .76), rgba(251, 247, 241, .86)),
      url("../img/hotel/footer-bg-sm.jpg") 70% center / cover no-repeat;
    background-color: var(--cream-50);
  }
  .foot__bar-in { grid-template-columns: 1fr; justify-items: start; gap: .9rem; }
  .foot__bar-in > :last-child { justify-self: start; }
  /* The ornament rules only read as an ornament when the note is centred; left
     aligned and full width they look like a broken divider, so drop them. */
  .foot__note::before, .foot__note::after { display: none; }
  .rail { grid-auto-columns: minmax(240px, 84%); }
  .rail-ctrl { display: none; }
  .facts { gap: 1.5rem; }
  .bleed__body { padding-block: 4rem; }
  .drawer__links a { font-size: 1.5rem; }
}

@media print {
  .nav, .drawer, .callfab, .grain, .bookbar, .progress { display: none; }
  body { background: #fff; color: #000; }
}

/* =========================================================================
   23. Inner-page components
   ========================================================================= */

/* Room and destination entries. A wide plate, then the detail beneath it, so
   the page never becomes four identical side-by-side splits in a row. */
.entry + .entry { margin-top: clamp(3.5rem, 7vw, 6rem); }
.entry > .fig { aspect-ratio: 21 / 9; }
.entry__info {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-terra);
}
.entry__info h2, .entry__info h3 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem); }
.entry__info p { font-size: .95rem; color: var(--body); margin-top: .75rem; max-width: 46ch; }
.entry__label {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: .9rem;
}
.entry__list { display: grid; gap: .6rem; }
.entry__list li { font-size: .93rem; color: var(--body); display: flex; gap: .6rem; align-items: flex-start; }
.entry__list li i { color: var(--terra); font-size: 1rem; margin-top: .12rem; flex-shrink: 0; }
.entry__price { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; }
.entry__price b {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  color: var(--terra);
  line-height: 1;
}
.entry__price span { font-size: .8rem; color: var(--faint); }
.entry__price .btn { margin-top: .9rem; }
.entry__km { font-family: var(--font-mono); font-size: .95rem; color: var(--terra); }
/* `.entry__price span` outranks `.entry__km` on specificity, which was turning
   the distance grey. Restate it so the distance stays the accent. */
.entry__price .entry__km { color: var(--terra); font-size: .95rem; }

/* Services and event types. Image-led cells, four items, four cells. */
.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; }
.quad article { display: flex; flex-direction: column; gap: 1.1rem; }
.quad .fig { aspect-ratio: 16 / 10; }
.quad h3 { font-size: 1.2rem; }
.quad p { font-size: .93rem; color: var(--body); margin-top: .5rem; max-width: 44ch; }

/* Policies. Grouped into a few chunks instead of a hairline under every row. */
.policy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 2.4rem); }
.policy > div {
  border: 1px solid var(--core-line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: var(--paper);
}
.policy h3 {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 1rem;
  font-weight: 500;
}
.policy p { font-size: .93rem; color: var(--body); }
.policy b { font-family: var(--font-mono); color: var(--ink); font-weight: 500; }

/* Enquiry form on the inner pages */
.formcard {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--paper);
}
.formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.formgrid .span-2 { grid-column: 1 / -1; }
.formgrid textarea { resize: vertical; min-height: 6.5rem; font-family: var(--font-body); }

@media (max-width: 980px) {
  .entry__info { grid-template-columns: 1fr; gap: 1.75rem; }
  .entry > .fig { aspect-ratio: 16 / 10; }
  .quad { grid-template-columns: 1fr; }
  .policy { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .formgrid { grid-template-columns: 1fr; }
}

/* Some location photographs are bright midday shots. This settles them into
   the same warm register as the rest of the set. */
.fig--dim img { filter: saturate(.85) contrast(1.06) brightness(.96) sepia(.2); }

/* =========================================================================
   24. Premium layer
   Bezelled surfaces, cursor-aware light, scroll-linked depth.
   Everything here is additive: remove the block and the site still works.
   ========================================================================= */

/* ---------- 24.1 Reading progress. Scroll-driven, so no scroll listener. ---------- */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: var(--z-progress);
  background: linear-gradient(90deg, var(--terra-deep), var(--terra) 55%, var(--terra-soft));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation: progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes progress { to { transform: scaleX(1); } }
}

/* ---------- 24.2 Double-bezel plates ----------
   The tray is drawn with box-shadow spread rather than a wrapper element:
   spread grows the radius with it, so the curves stay concentric for free. */
.tile,
.policy > div,
.formcard,
.bookbar__in {
  box-shadow:
    0 0 0 var(--bezel) var(--shell-bg),
    0 0 0 calc(var(--bezel) + 1px) var(--shell-line),
    var(--sh-lg),
    var(--inner-hi);
}

/* Media gets a hairline and a grounded shadow, never a tray. */
.room .fig,
.quad .fig,
.entry > .fig {
  box-shadow: 0 0 0 1px var(--core-line), var(--sh-md);
}

/* ---------- 24.3 Cursor-aware edge light ----------
   A gradient ring masked to the 1px border. Fades in on hover, tracks the
   pointer via --mx/--my which site.js writes. */
.spot { position: relative; }
.spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
              rgba(158, 76, 51, .55), rgba(158, 76, 51, 0) 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
  z-index: 2;
}
.spot:hover::before { opacity: 1; }

.tile:hover {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 var(--bezel) rgba(158, 76, 51, .045),
    0 0 0 calc(var(--bezel) + 1px) var(--line-terra),
    var(--sh-lg),
    var(--inner-hi);
}

/* ---------- 24.4 Scroll-linked depth ----------
   Native scroll-driven animation. No JS, no scroll listener, and it simply
   does not run where the browser has not shipped it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bleed__img img {
      animation: bleed-par linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes bleed-par {
      from { transform: translate3d(0, -7%, 0) scale(1.17); }
      to   { transform: translate3d(0,  7%, 0) scale(1.17); }
    }

    .entry > .fig img {
      animation: fig-par linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes fig-par {
      from { transform: translate3d(0, -4.5%, 0) scale(1.11); }
      to   { transform: translate3d(0,  4.5%, 0) scale(1.11); }
    }
  }
}

/* ---------- 24.5 Ambient ground ----------
   One soft warm field behind the page so the flat cream never reads as a
   solid fill. Fixed and behind everything, so it costs nothing on scroll. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(80vw 60vh at 84% 4%,  rgba(158, 76, 51, .05), transparent 62%),
    radial-gradient(70vw 55vh at 6% 94%, rgba(184, 103, 74, .06), transparent 64%);
}