/* ==========================================================================
   MIGOMBANI HOMESTAY — PAGE LAYOUTS
   ========================================================================== */

/* ==========================================================================
   PAGE HEADER (every page except home)
   ========================================================================== */

.page-hero {
  position: relative;
  min-height: clamp(22rem, 52svh, 34rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  padding-block: calc(var(--header-h) + 3rem) clamp(2.5rem, 6vw, 4.5rem);
}
.page-hero-media { position: absolute; inset: 0; z-index: -2; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(4 20 14 / .9), rgb(4 20 14 / .5) 55%, rgb(4 20 14 / .35));
}
.page-hero h1 { font-size: var(--fs-4xl); margin-bottom: var(--sp-4); }
.page-hero .lead { color: rgb(255 255 255 / .84); max-width: 46ch; }
.page-hero .eyebrow { color: var(--banana-300); }

.crumbs {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgb(255 255 255 / .6);
  margin-bottom: var(--sp-5);
}
.crumbs a:hover { color: #fff; }
.crumbs svg { width: .8rem; height: .8rem; opacity: .5; }

/* ==========================================================================
   HOME — split intro
   ========================================================================== */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; } }
.split.is-wide-left  { grid-template-columns: 1fr; }
@media (min-width: 56rem) { .split.is-wide-left { grid-template-columns: 1.15fr .85fr; } }
@media (min-width: 56rem) { .split.is-wide-right { grid-template-columns: .85fr 1.15fr; } }
.split-media { position: relative; }

/* Two photographs, offset — the editorial pairing.
   Uses :nth-of-type so the floating stat card does not steal the selector. */
.photo-pair {
  position: relative;
  padding-bottom: clamp(3.5rem, 9vw, 6.5rem);
  padding-right: clamp(2rem, 7vw, 4.5rem);
}
.photo-pair > figure:nth-of-type(1) {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 5;
}
.photo-pair > figure:nth-of-type(2) {
  position: absolute;
  right: 0; bottom: 0;
  width: clamp(9rem, 42%, 15rem);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 7px solid var(--bg);
  box-shadow: var(--sh-lg);
}
.photo-pair img { width: 100%; height: 100%; object-fit: cover; }
.photo-pair img[data-parallax] { height: 116%; margin-top: -8%; }
@media (prefers-reduced-motion: reduce) {
  .photo-pair img[data-parallax] { height: 100%; margin-top: 0; }
}

/* Floating stat card on a photo */
.float-card {
  position: absolute; z-index: 3;
  left: clamp(-0.75rem, -2vw, -1.75rem);
  bottom: clamp(4.5rem, 11vw, 8rem);
  padding: 1.1rem 1.4rem;
  border-radius: var(--r-lg);
  min-width: 10rem;
  background: var(--glass-bg-2);
}
@media (max-width: 34rem) {
  .float-card { left: 0; bottom: 0.5rem; }
  .photo-pair > figure:nth-of-type(1) { aspect-ratio: 1 / 1; }
}
.float-card b { display: block; font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; }
.float-card span { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3); }

/* ==========================================================================
   HOME — rooms showcase
   ========================================================================== */

.room-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 42rem) { .room-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .room-grid { grid-template-columns: repeat(3, 1fr); } }

.room-card { display: flex; flex-direction: column; height: 100%; }
.room-card .card-media { aspect-ratio: 4 / 3; }
.room-card-body { padding: clamp(1.15rem, 2.2vw, 1.6rem); display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.room-card h3 { font-size: var(--fs-lg); }
.room-card p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; flex: 1; }
.room-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.room-meta span { display: flex; align-items: center; gap: .35rem; }
.room-meta svg { width: .9rem; height: .9rem; }
.room-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: .85rem; border-top: 1px solid var(--line); }
/* Price: the "from" label sits above so the mono caps never crowd the
   serif numerals, whatever the currency or digit count. */
.room-price { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: .4rem; }
.room-price .from {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  line-height: 1; margin-bottom: .3rem;
}
.room-price .amount { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1; }
.room-price .per { font-family: var(--font-mono); font-size: var(--fs-3xs); color: var(--ink-3); }

/* Feature room — first card spans wide on large screens */
@media (min-width: 68rem) {
  .room-grid.has-feature > .room-card:first-child { grid-column: span 2; }
  .room-grid.has-feature > .room-card:first-child .card-media { aspect-ratio: 16 / 9; }
  .room-grid.has-feature > .room-card:first-child h3 { font-size: var(--fs-2xl); }
}

/* ==========================================================================
   ROOMS PAGE — filter rail
   ========================================================================== */

.rooms-layout { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) { .rooms-layout { grid-template-columns: 17rem 1fr; } }

.filter-panel { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 62rem) { .filter-panel { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.filter-group + .filter-group { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.filter-group > .field-label { display: block; margin-bottom: .7rem; }
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Range slider */
/* 3px of visible track, 25px of grabbable element — background-clip keeps the
   padding transparent so the bar still looks like a hairline. */
.range {
  width: 100%; appearance: none; outline: none;
  height: 3px; padding-block: 11px; box-sizing: content-box;
  border-radius: 3px;
  background: var(--line-strong);
  background-clip: content-box;
  margin-block: .5rem 0;
  cursor: pointer;
}
.range::-webkit-slider-thumb {
  appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--surface);
  box-shadow: var(--sh-sm); cursor: pointer;
  transition: transform var(--t-fast) var(--e-spring);
}
.range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); border: 3px solid var(--surface);
  box-shadow: var(--sh-sm); cursor: pointer;
}
.range-out { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-3); }
.range-out b { color: var(--ink); font-weight: 500; }

.results-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.results-count { font-family: var(--font-mono); font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.results-count b { color: var(--ink); }

.rooms-results { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 42rem) { .rooms-results { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 78rem) { .rooms-results { grid-template-columns: repeat(3, 1fr); } }

.filter-toggle { display: flex; }
@media (min-width: 62rem) { .filter-toggle { display: none; } }
@media (max-width: 61.99rem) {
  .filter-panel { display: none; }
  .filter-panel.is-open { display: block; }
}

/* ==========================================================================
   ROOM DETAIL
   ========================================================================== */

.room-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) { .room-layout { grid-template-columns: 1fr 22rem; } }

.room-gallery { display: grid; gap: .6rem; grid-template-columns: 1fr; }
.room-gallery-main { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 3 / 2; background: var(--surface-sunk); cursor: zoom-in; }
.room-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--e-out); }
.room-gallery-main:hover img { transform: scale(1.03); }
.room-thumbs { display: flex; gap: .6rem; }
.room-thumbs button {
  flex: 1; border-radius: var(--r-md); overflow: hidden;
  border: 2px solid transparent; padding: 0; background: none; cursor: pointer;
  aspect-ratio: 3 / 2;
  transition: border-color var(--t-fast) var(--e-soft), opacity var(--t-fast) var(--e-soft);
  opacity: .62;
}
.room-thumbs button:hover { opacity: 1; }
.room-thumbs button[aria-current='true'] { border-color: var(--brand); opacity: 1; }
.room-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.book-card { padding: clamp(1.25rem, 2.4vw, 1.75rem); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--sh-md); }
@media (min-width: 62rem) { .book-card { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.book-card-price { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.book-card-price .amount { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1; letter-spacing: -.02em; }
.book-card-price .per { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-3); }

/* ==========================================================================
   EXPERIENCES
   ========================================================================== */

.exp-grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 44rem) { .exp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .exp-grid { grid-template-columns: repeat(3, 1fr); } }

.exp-card { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 26rem; overflow: hidden; border-radius: var(--r-lg); isolation: isolate; color: #fff; }
.exp-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1000ms var(--e-out); }
/* Two stacked scrims: a heavy foot so the copy always clears 4.5:1 against
   bright skies, plus a light wash so the chips at the top stay legible. */
.exp-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgb(3 16 11 / .96) 0%, rgb(3 16 11 / .88) 26%, rgb(3 16 11 / .55) 52%, rgb(3 16 11 / .18) 78%, rgb(3 16 11 / .30) 100%);
}
.exp-card:hover > img, .exp-card:focus-within > img { transform: scale(1.07); }
.exp-body { margin-top: auto; padding: clamp(1.25rem, 2.4vw, 1.75rem); display: flex; flex-direction: column; gap: .75rem; }
.exp-body h3 { font-size: var(--fs-xl); }
.exp-body p { font-size: var(--fs-sm); color: rgb(255 255 255 / .82); line-height: 1.6; }
.exp-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.exp-head { position: absolute; top: 1rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; gap: .5rem; z-index: 1; }
.exp-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: .85rem; border-top: 1px solid rgb(255 255 255 / .18); }
.exp-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.exp-price .amount { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1; }
.exp-price .per { font-family: var(--font-mono); font-size: var(--fs-3xs); opacity: .8; letter-spacing: .06em; }

/* ==========================================================================
   GALLERY — masonry
   ========================================================================== */

.gal-filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: clamp(2rem, 4vw, 3rem); }

.masonry { columns: 1; column-gap: clamp(.75rem, 1.6vw, 1.25rem); }
@media (min-width: 34rem) { .masonry { columns: 2; } }
@media (min-width: 60rem) { .masonry { columns: 3; } }
@media (min-width: 88rem) { .masonry { columns: 4; } }

.masonry figure {
  break-inside: avoid;
  margin-bottom: clamp(.75rem, 1.6vw, 1.25rem);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  background: var(--surface-sunk);
  transform: translateZ(0);
}
.masonry img { width: 100%; height: auto; display: block; transition: transform 800ms var(--e-out), filter 400ms var(--e-soft); }
.masonry figure:hover img { transform: scale(1.05); }
.masonry figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.5rem .95rem .95rem;
  font-size: var(--fs-2xs);
  color: #fff;
  background: linear-gradient(to top, rgb(4 20 14 / .88), transparent);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-base) var(--e-soft), transform var(--t-base) var(--e-out);
}
.masonry figure:hover figcaption, .masonry figure:focus-within figcaption { opacity: 1; transform: none; }
.masonry figure.is-hidden { display: none; }

/* ==========================================================================
   ABOUT
   ========================================================================== */

.story-block { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .story-block { grid-template-columns: 1fr 1fr; }
  .story-block:nth-child(even) .story-media { order: -1; }
}
.story-media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); }
.story-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.story-block h2 { font-size: var(--fs-2xl); margin-bottom: var(--sp-4); }
.story-num {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: var(--ls-label); color: var(--accent-ink);
  margin-bottom: var(--sp-3); display: block;
}

/* Values list */
.value-list { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; counter-reset: v; }
@media (min-width: 48rem) { .value-list { grid-template-columns: repeat(2, 1fr); } }
.value { display: flex; gap: var(--sp-4); align-items: flex-start; }
.value::before {
  counter-increment: v; content: counter(v, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--accent-ink); flex: none; padding-top: .35rem;
  letter-spacing: .08em;
}
.value h4 { font-size: var(--fs-md); margin-bottom: .35rem; }
.value p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.65; }

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-layout { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 62rem) { .contact-layout { grid-template-columns: 1fr 1.15fr; } }

.contact-list { display: flex; flex-direction: column; }
.contact-item { display: flex; gap: var(--sp-4); padding-block: var(--sp-5); border-top: 1px solid var(--line); align-items: flex-start; }
.contact-item:last-child { border-bottom: 1px solid var(--line); }
.contact-item-icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--brand) 12%, transparent);
  color: var(--brand);
}
.contact-item-icon svg { width: 1.25rem; height: 1.25rem; }
.contact-item h3 { font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: .3rem; }
.contact-item p, .contact-item a { font-size: var(--fs-md); color: var(--ink); }
.contact-item a:hover { color: var(--brand); }
.contact-item small { display: block; font-size: var(--fs-2xs); color: var(--ink-3); margin-top: .2rem; }

.form-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 34rem) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
.form-grid .span-2 { grid-column: 1 / -1; }

/* The map lives in components.css now. The Google iframe it used to hold
   was blocked by our own CSP (frame-src), so it never rendered in
   production; Leaflet + OpenStreetMap replaced it, and the consent gate
   went with it because no third-party cookie is set any more. */

/* ==========================================================================
   BOOKING
   ========================================================================== */

.bk-layout { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 68rem) { .bk-layout { grid-template-columns: 1fr 21rem; } }

.bk-panel { display: none; }
.bk-panel.is-active { display: block; animation: panel-in var(--t-slow) var(--e-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(14px); } }

.bk-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.bk-actions .btn { flex: 1; min-width: 9rem; }

.bk-room-list { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .bk-room-list { grid-template-columns: repeat(2, 1fr); } }
.bk-room { display: flex; flex-direction: column; height: 100%; }
.bk-room-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-sunk); }
.bk-room-media img { width: 100%; height: 100%; object-fit: cover; }
.bk-room-body { padding: 1.1rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.bk-room-name { display: block; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 400; line-height: 1.2; }
.bk-room-foot { margin-top: auto; padding-top: .7rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.bk-room .room-meta { display: flex; }
.bk-room .chip { display: inline-flex; width: fit-content; }
.bk-room-total { font-size: var(--fs-2xs); color: var(--ink-3); }
.bk-room .room-price { display: flex; }

.extra-row {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--e-soft);
  cursor: pointer;
}
.extra-row:hover { border-color: var(--line-strong); }
.extra-row:has(input:checked) { border-color: var(--brand); background: color-mix(in oklab, var(--brand) 5%, var(--surface)); }
.extra-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.extra-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: color-mix(in oklab, var(--brand) 12%, transparent); color: var(--brand); }
.extra-icon svg { width: 1.2rem; height: 1.2rem; }
.extra-body { flex: 1; min-width: 0; }
.extra-body b { display: block; font-weight: 500; font-size: var(--fs-sm); }
.extra-body small { color: var(--ink-3); font-size: var(--fs-2xs); }
.extra-price { font-family: var(--font-mono); font-size: var(--fs-sm); white-space: nowrap; }
.extra-tick {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 1px solid var(--line-strong); display: grid; place-items: center;
  transition: all var(--t-base) var(--e-spring);
}
.extra-row:has(input:checked) .extra-tick { background: var(--brand); border-color: var(--brand); }
.extra-tick svg { width: .8rem; height: .8rem; color: var(--on-brand); opacity: 0; }
.extra-row:has(input:checked) .extra-tick svg { opacity: 1; }

/* Success state */
.bk-done { text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 0; }
.bk-done-mark {
  width: 88px; height: 88px; margin: 0 auto var(--sp-5);
  border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--ok) 15%, transparent);
  color: var(--ok);
  animation: pop var(--t-slow) var(--e-spring);
}
.bk-done-mark svg { width: 2.4rem; height: 2.4rem; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.bk-done h2 { margin-bottom: var(--sp-4); }

.bk-recap {
  text-align: left;
  max-width: 32rem; margin: var(--sp-6) auto 0;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.9;
  white-space: pre-wrap;
  color: var(--ink-2);
  max-height: 18rem; overflow-y: auto;
}

/* ==========================================================================
   404
   ========================================================================== */

.page-404 {
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 4rem;
  position: relative; overflow: hidden;
}
.page-404 .big {
  font-family: var(--font-display);
  font-size: clamp(6rem, 26vw, 18rem);
  line-height: .82;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-strong);
  margin-bottom: var(--sp-5);
}

/* ==========================================================================
   PHOTO BAND — full-bleed panorama between sections
   ========================================================================== */

.band {
  position: relative;
  min-height: clamp(20rem, 46svh, 32rem);
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.band-media { position: absolute; inset: 0; z-index: -2; }
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgb(4 20 14 / .30), rgb(4 20 14 / .62)),
    radial-gradient(80% 70% at 50% 55%, rgb(4 20 14 / .55), transparent 75%);
}
.band h2 { max-width: 22ch; margin-inline: auto; }
.band .lead { color: rgb(255 255 255 / .82); max-width: 46ch; margin-inline: auto; }
.band .eyebrow { color: var(--banana-300); }

/* Parallax layer — moved by app.js, transform only.
   The image is over-sized so a ±10% translate never exposes the container. */
.parallax { will-change: transform; }
.band-media img[data-parallax],
.page-hero-media img[data-parallax] {
  position: absolute;
  inset: -14% 0 auto 0;
  width: 100%;
  height: 128%;
}
@media (prefers-reduced-motion: reduce) {
  .band-media img[data-parallax],
  .page-hero-media img[data-parallax] { inset: 0; height: 100%; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .header, .drawer, .fab-stack, .progress, .searchbar, .hero-dots, .scroll-cue,
  .footer-mark, .social, .newsletter { display: none !important; }
  body { background: #fff; color: #000; }
  body::after { display: none; }
  .hero, .page-hero, .band { min-height: auto; color: #000; padding-block: 1rem; }
  .hero-media, .page-hero-media, .band-media { display: none; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: .8em; }
}

/* ==========================================================================
   BOOKING — real-booking additions (server-backed flow)
   ========================================================================== */

/* Error banner above the submit button. role="alert", so it is announced. */
.bk-error {
  background: var(--bloom-100);
  color: var(--bloom-700);
  border: 1px solid color-mix(in oklab, var(--bloom-500) 25%, transparent);
  border-radius: 12px;
  padding: .85rem 1.05rem;
  margin-bottom: 1rem;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
:root[data-theme='dark'] .bk-error {
  background: color-mix(in oklab, var(--bloom-500) 18%, var(--surface));
  color: var(--bloom-300);
}

/* The quiet reassurance under the submit button: no card is charged yet. */
.bk-assure {
  margin: .9rem 0 0;
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  line-height: 1.6;
  max-width: 44ch;
}

/* Booking reference on the confirmation screen — the one thing a guest
   might write down, so it is big, monospaced and selectable. */
.bk-ref {
  display: inline-flex;
  flex-direction: column;
  gap: .25rem;
  align-items: center;
  margin: 1.5rem auto 0;
  padding: .9rem 1.6rem;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
}
.bk-ref span {
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.bk-ref b {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  letter-spacing: .06em;
  user-select: all;
}

/* A room the server says is already taken. Dimmed rather than removed, so
   the guest can see it exists and come back for other dates. */
.bk-room.is-taken { opacity: .55; }
.bk-room.is-taken .bk-room-media img { filter: grayscale(1); }
.chip-taken {
  background: var(--bloom-100);
  color: var(--bloom-700);
}
:root[data-theme='dark'] .chip-taken {
  background: color-mix(in oklab, var(--bloom-500) 22%, var(--surface));
  color: var(--bloom-300);
}