/* ==========================================================================
   Nature's Fold
   Single stylesheet. No framework, no build step, no external requests.

   Palette is sampled from the property's own view: hazy blue ridges, deodar
   sage, warm Garhwal sand, cream paper. Pine ink is reserved for text and the
   logo so the brand mark stays the darkest thing on the page.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Approved pastel palette */
  --mist:        #A8C4DC;
  --sky:         #CFE0EF;
  --haze:        #B9C3D3;
  --sage:        #8FA48C;
  --sand:        #E8DCC8;
  --cream:       #FAF7F0;
  --terracotta:  #C89B7B;
  --pine:        #23372B;

  /* Derived tints, used for washes and borders */
  --cream-deep:  #F2ECE1;
  --sage-pale:   #DDE4DC;
  --sky-pale:    #EAF1F8;
  --line:        rgba(35, 55, 43, 0.13);
  --line-strong: rgba(35, 55, 43, 0.24);

  /* Text */
  --ink:         #23372B;
  --ink-soft:    #4A5B50;
  --ink-mute:    #74847A;
  --on-dark:     #FAF7F0;
  --on-dark-mute:rgba(250, 247, 240, 0.76);

  /* Type. System stacks only, so there is nothing to fetch and nothing to
     leak. The display serif is the one open brand decision left. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                  "Times New Roman", serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale */
  --t-hero:  clamp(2.75rem, 1.6rem + 5.2vw, 6rem);
  --t-h1:    clamp(2.1rem,  1.4rem + 2.9vw, 3.6rem);
  --t-h2:    clamp(1.6rem,  1.2rem + 1.7vw, 2.5rem);
  --t-h3:    clamp(1.15rem, 1rem   + 0.6vw, 1.45rem);
  --t-body:  clamp(1rem,    0.96rem + 0.2vw, 1.09rem);
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  /* Spacing */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);

  --measure: 62ch;
  --wrap: 1240px;
  --wrap-narrow: 760px;
  /* One source of truth for the page gutter. Anything that breaks out of
     .wrap to run edge to edge (the room strip, the review marquee) pulls back
     by exactly this, so nothing ever overhangs the viewport. */
  --gutter: 1.25rem;

  --radius: 3px;
  --radius-lg: 6px;

  --shadow-sm: 0 1px 3px rgba(35, 55, 43, 0.07);
  --shadow:    0 6px 24px -8px rgba(35, 55, 43, 0.16);
  --shadow-lg: 0 24px 60px -22px rgba(35, 55, 43, 0.30);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-h: 72px;
}

/* --- Reset ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

@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;
  }
}

/* --- Typography ----------------------------------------------------------- */

.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; }

p { max-width: var(--measure); text-wrap: pretty; }

.lede {
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Small uppercase label that sits above a heading. Used to orient the reader
   without adding another heading level. */
.eyebrow {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-3);
}
.eyebrow--light { color: var(--on-dark-mute); }

.muted { color: var(--ink-mute); }
.small { font-size: var(--t-small); }

/* --- Layout --------------------------------------------------------------- */

@media (min-width: 48rem) { :root { --gutter: 2.5rem; } }

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.wrap-narrow {
  width: min(100% - (var(--gutter) * 2), var(--wrap-narrow));
  margin-inline: auto;
}

.section { padding-block: var(--section-y); }
.section--tint   { background: var(--cream-deep); }
.section--sage   { background: var(--sage-pale); }
.section--sky    { background: var(--sky-pale); }
.section--pine   { background: var(--pine); color: var(--on-dark); }
.section--pine p, .section--pine .lede { color: var(--on-dark-mute); }

.section-head { margin-bottom: var(--s-7); max-width: var(--measure); }
.section-head p { margin-top: var(--s-4); }

.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* A thin rule that reads as a fold in the paper. Recurring brand motif. */
.rule {
  border: 0;
  height: 1px;
  background: var(--line);
  margin-block: var(--s-6);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pine);
  color: var(--on-dark);
  padding: var(--s-3) var(--s-5);
  z-index: 200;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.85rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--pine); color: var(--on-dark); }
.btn--primary:hover { background: #2E4838; }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--pine); border-color: var(--pine); color: var(--on-dark); }

.btn--on-dark { border-color: rgba(250, 247, 240, 0.55); color: var(--on-dark); background: transparent; }
.btn--on-dark:hover { background: var(--on-dark); color: var(--pine); border-color: var(--on-dark); }

.btn--wide { width: 100%; }

/* Text link with an underline that grows on hover. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 2px;
  transition: border-color 0.25s var(--ease), gap 0.25s var(--ease);
}
.link:hover { border-color: var(--ink); gap: 0.75em; }
.link::after { content: "\2192"; }

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

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* Over the hero the bar is invisible; once scrolled it becomes solid cream. */
.header--solid {
  background: rgba(250, 247, 240, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 var(--line);
}

.header__inner {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.brand { display: flex; align-items: center; gap: 0.7rem; }
.brand__mark { width: 30px; height: 34px; flex: none; }
.brand__mark path { fill: currentColor; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.22rem;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.brand__tag {
  display: none;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
@media (min-width: 62rem) { .brand__tag { display: block; } }

/* Light treatment while the bar floats over the hero image. */
.header:not(.header--solid) .brand,
.header:not(.header--solid) .nav__link { color: var(--on-dark); }
.header:not(.header--solid) .brand__tag { color: var(--on-dark-mute); }
.header:not(.header--solid) .brand,
.header:not(.header--solid) .nav__link { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }

.nav { display: none; }
@media (min-width: 62rem) {
  .nav { display: flex; align-items: center; gap: var(--s-6); }
}
.nav__link {
  font-size: var(--t-small);
  letter-spacing: 0.03em;
  position: relative;
  padding-block: 4px;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--s-4); }
.header__cta { display: none; }
@media (min-width: 62rem) { .header__cta { display: inline-flex; padding: 0.7rem 1.4rem; } }

/* Mobile menu toggle: three lines that fold into a cross. */
.menu-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
}
@media (min-width: 62rem) { .menu-btn { display: none; } }
.menu-btn__bars { position: relative; width: 22px; height: 14px; }
.menu-btn__bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.menu-btn__bars span:nth-child(1) { top: 0; }
.menu-btn__bars span:nth-child(2) { top: 6.25px; }
.menu-btn__bars span:nth-child(3) { top: 12.5px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }

/* Full-screen mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--cream);
  padding: calc(var(--nav-h) + var(--s-6)) var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  overflow-y: auto;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.drawer a {
  font-family: var(--font-display);
  font-size: 1.7rem;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.drawer .btn { margin-top: var(--s-5); }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  color: var(--on-dark);
  overflow: hidden;
  background: var(--pine);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Very slow drift. Reads as air moving, not as an animation. */
  animation: drift 32s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(0, -1.5%, 0); }
}
/* Scrim. The snow massif is the brightest thing in the photograph and the
   headline crosses it, so the lower two thirds carry enough weight to hold
   white type no matter where the peaks fall on a given screen size. The sky
   above is left alone. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(20, 32, 25, 0.82) 0%,
      rgba(20, 32, 25, 0.62) 28%,
      rgba(20, 32, 25, 0.38) 52%,
      rgba(20, 32, 25, 0.12) 74%,
      transparent 92%),
    linear-gradient(to bottom, rgba(20, 32, 25, 0.34) 0%, transparent 26%);
}

.hero__body {
  position: relative;
  z-index: 1;
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  padding-bottom: clamp(3.5rem, 9vh, 7rem);
  padding-top: calc(var(--nav-h) + var(--s-6));
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 15ch;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
.hero__sub {
  margin-top: var(--s-5);
  max-width: 46ch;
  font-size: clamp(1rem, 0.94rem + 0.4vw, 1.2rem);
  color: var(--on-dark-mute);
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.4);
}
.hero__actions {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Location + rating strip pinned under the hero copy. */
.hero__meta {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(250, 247, 240, 0.24);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  font-size: var(--t-small);
  color: var(--on-dark-mute);
}
.hero__meta strong { color: var(--on-dark); font-weight: 600; }

/* --- Cards ---------------------------------------------------------------- */

.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sage-pale);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }

/* Small floating label, e.g. room size */
.card__badge {
  position: absolute;
  left: var(--s-4); bottom: var(--s-4);
  background: rgba(250, 247, 240, 0.94);
  color: var(--ink);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}
.card__body p { font-size: var(--t-small); color: var(--ink-soft); }
.card__foot { margin-top: auto; padding-top: var(--s-3); }

/* Compact fact row inside a room card: sleeps, bed, view */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-small);
  color: var(--ink-mute);
}
.facts li { display: flex; align-items: center; gap: 0.4em; }
.facts li + li::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--haze);
  margin-right: 0.4em;
}

/* --- Feature list (amenities, at-a-glance) -------------------------------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--s-4) var(--s-6);
}
.features li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-block: var(--s-2);
  font-size: var(--t-small);
  border-bottom: 1px solid var(--line);
}
.features li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--sage);
}

/* --- Split section (image beside text) ------------------------------------ */

.split {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
  .split--reverse > :first-child { order: 2; }
}
.split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow);
}
@media (min-width: 56rem) { .split__media { aspect-ratio: 3 / 4; } }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Accordion (progressive disclosure) ----------------------------------- */
/* Used for full amenity lists, house rules, and the FAQ. The page stays calm
   and the detail is one tap away rather than absent. */

.accordion { border-top: 1px solid var(--line); }

.acc {
  border-bottom: 1px solid var(--line);
}
.acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  transition: color 0.2s var(--ease);
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { color: var(--sage); }

/* Plus that rotates into a minus */
.acc > summary::after {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  background:
    linear-gradient(var(--ink-mute), var(--ink-mute)) center/100% 1.5px no-repeat,
    linear-gradient(var(--ink-mute), var(--ink-mute)) center/1.5px 100% no-repeat;
  transition: transform 0.3s var(--ease);
}
.acc[open] > summary::after { transform: rotate(135deg); }

.acc__body { padding-bottom: var(--s-5); }
.acc__body > * + * { margin-top: var(--s-4); }

/* --- Quotes --------------------------------------------------------------- */

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  height: 100%;
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.45;
  margin: 0;
}
.quote figcaption {
  margin-top: auto;
  font-size: var(--t-small);
  color: var(--ink-mute);
}
.quote figcaption strong { color: var(--ink); font-weight: 600; }

.stars { color: var(--terracotta); letter-spacing: 0.15em; font-size: var(--t-small); }

/* --- Gallery -------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-3);
}
.gallery button {
  padding: 0;
  border: 0;
  background: var(--sage-pale);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 2;
}
.gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), opacity 0.3s var(--ease);
}
.gallery button:hover img { transform: scale(1.05); opacity: 0.94; }
/* Every fourth tile spans two columns so the grid does not read as a spreadsheet. */
@media (min-width: 56rem) {
  .gallery > :nth-child(6n + 1) { grid-column: span 2; aspect-ratio: 3 / 2; }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(18, 28, 22, 0.94);
  display: grid;
  place-items: center;
  padding: var(--s-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s;
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 86svh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(250, 247, 240, 0.12);
  border: 1px solid rgba(250, 247, 240, 0.3);
  color: var(--on-dark);
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  transition: background-color 0.2s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(250, 247, 240, 0.26); }
.lightbox__close { top: var(--s-5); right: var(--s-5); }
.lightbox__nav--prev { left: var(--s-4); }
.lightbox__nav--next { right: var(--s-4); }
.lightbox__count {
  position: absolute;
  bottom: var(--s-5);
  left: 50%;
  transform: translateX(-50%);
  color: var(--on-dark-mute);
  font-size: var(--t-small);
  letter-spacing: 0.1em;
}

/* --- Sticky mobile booking bar -------------------------------------------- */

.bookbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
  background: rgba(250, 247, 240, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 0.35s var(--ease);
}
.bookbar[data-visible="true"] { transform: none; }
.bookbar .btn { flex: 1; padding-inline: var(--s-3); }
@media (min-width: 62rem) { .bookbar { display: none; } }

/* --- Footer --------------------------------------------------------------- */

.footer {
  background: var(--pine);
  color: var(--on-dark);
  padding-block: var(--s-8) var(--s-6);
  /* Clears the sticky mobile booking bar. */
  padding-bottom: calc(var(--s-6) + 72px);
}
@media (min-width: 62rem) { .footer { padding-bottom: var(--s-6); } }

.footer a { color: var(--on-dark-mute); transition: color 0.2s var(--ease); }
.footer a:hover { color: var(--on-dark); }

.footer__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__title {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.55);
  margin-bottom: var(--s-4);
}
.footer__list li + li { margin-top: var(--s-3); }
.footer__list { font-size: var(--t-small); }

.footer__bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(250, 247, 240, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  font-size: var(--t-micro);
  color: rgba(250, 247, 240, 0.55);
}

/* --- Carousel ------------------------------------------------------------- */
/* Horizontal scroll-snap strip. Touch and trackpad swiping is native browser
   behaviour; the arrows are an enhancement JS adds on top. Without JS the
   strip still holds the lead photo, so nothing is lost. */

.carousel {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sage-pale);
}

.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__track > * {
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 4 / 3;
}
.carousel__track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Arrows are always visible. Swiping works, but plenty of people will never
   try it, so the control is on screen rather than hidden behind a hover. */
.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(250, 247, 240, 0.92);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), opacity 0.2s var(--ease);
  box-shadow: var(--shadow-sm);
}
.carousel__nav:hover { background: var(--cream); }
/* At the ends the arrow fades rather than vanishing, so the control does not
   jump around as you move through the set. */
.carousel__nav[disabled] { opacity: 0.35; pointer-events: none; }
.carousel__nav--prev { left: var(--s-3); }
.carousel__nav--next { right: var(--s-3); }

.carousel__count {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  background: rgba(35, 55, 43, 0.72);
  color: var(--on-dark);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  pointer-events: none;
}

/* Rooms strip: the five room cards scroll sideways on narrow screens rather
   than stacking into an endless column. */
.rooms-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(19rem, 22rem);
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--s-4);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.rooms-strip > * { scroll-snap-align: start; }
@media (min-width: 90rem) {
  .rooms-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

/* Explicit prev/next for any horizontally scrolling strip. Swiping already
   works; these exist because not everyone realises that. */
.scroller-nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.scroller-nav__hint {
  font-size: var(--t-small);
  color: var(--ink-mute);
  margin-right: auto;
}
.scroller-btn {
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.scroller-btn:hover { background: var(--pine); border-color: var(--pine); color: var(--on-dark); }
.scroller-btn[disabled] { opacity: 0.3; pointer-events: none; }

/* Once the room strip becomes a plain grid there is nothing left to scroll. */
@media (min-width: 90rem) {
  .scroller-nav--strip { display: none; }
}

/* --- Review marquee ------------------------------------------------------- */
/* Drifts on its own, can be grabbed and scrolled, and stops when a visitor
   is reading or tabbing through it. */

.marquee {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}
.marquee::-webkit-scrollbar { display: none; }
.marquee:active { cursor: grabbing; }

.marquee__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 21rem);
  gap: var(--s-5);
  align-items: stretch;
  width: max-content;
  padding-bottom: var(--s-3);
}

/* --- Amenity list with icons ---------------------------------------------- */

.amenities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s-1) var(--s-6);
}
.amenities li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding-block: var(--s-3);
  font-size: var(--t-small);
  border-bottom: 1px solid var(--line);
}
.amenities .icon {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 0.15em;
  color: var(--sage);
}
.amenities small { display: block; color: var(--ink-mute); }

.icon { display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.6;
        stroke-linecap: round; stroke-linejoin: round; }

/* --- Distance list -------------------------------------------------------- */
/* Name on the left, distance flush right, so the eye reads down one column
   instead of hunting through ragged separators. */

.distances { border-top: 1px solid var(--line); }
.distances li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.distances .place { font-weight: 600; }
.distances .note { display: block; font-size: var(--t-small); color: var(--ink-mute); font-weight: 400; }
.distances .dist {
  flex: none;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
  text-align: right;
}

/* --- Map ------------------------------------------------------------------ */
/* Google's iframe is only loaded if the visitor asks for it. Until then no
   request leaves the page and no cookie is set. */

.map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--sage-pale);
  aspect-ratio: 16 / 10;
}
@media (min-width: 56rem) { .map { aspect-ratio: 16 / 7; } }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Safety callout ------------------------------------------------------- */

.callout {
  border-left: 3px solid var(--sage);
  padding: var(--s-5) var(--s-6);
  background: var(--cream);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.callout h3 { margin-bottom: var(--s-3); }

/* --- Ratings row ---------------------------------------------------------- */

.ratings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}
.ratings li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--cream);
  min-width: 9rem;
}
.ratings .score { font-family: var(--font-display); font-size: 1.7rem; line-height: 1; }
.ratings .src { font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }

/* --- Menu page ------------------------------------------------------------ */

.menu-group { break-inside: avoid; margin-bottom: var(--s-7); }
.menu-group h3 {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: var(--s-2);
}
.menu-list li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: var(--s-2);
  font-size: var(--t-small);
  border-bottom: 1px solid var(--line);
}
.menu-list .name { flex: 1; }
.menu-list .qual { color: var(--ink-mute); font-size: var(--t-micro); }
.menu-list .price {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
.menu-cols { columns: 1; column-gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 48rem) { .menu-cols { columns: 2; } }
@media (min-width: 76rem) { .menu-cols { columns: 3; } }

/* --- Reveal on scroll ----------------------------------------------------- */
/* Opt-in via [data-reveal]. JS adds .is-in. Without JS everything is visible,
   which is the point of doing it this way round. */

/* Scoped to .js, which an inline script in <head> adds. Without JavaScript
   the class is never set, so nothing is ever hidden and the whole page reads
   normally. Hiding content by default and relying on script to reveal it is
   how a blank page happens. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}