/* Yana Lagoon — concept site for Island Garden City of Samal.
   Ported from the "Modern Filipino tropical resort" design.

   The source design branched on a JS `isMobile` flag at 860px to decide
   between the desktop nav and the hamburger. That is done here with media
   queries instead, so the correct one is painted on the first frame rather
   than after React hydrates. 860px stays the single breakpoint. */

:root {
  --sand: #faf7f1;
  --sand-2: #f5f0e6;
  --line: #e6ddcd;
  --field-line: #d8cfbc;
  --ink: #26302f;
  --deep: #1b3a4b;
  --deep-2: #14303f;
  --teal: #3e8b96;
  --teal-light: #7fc4cc;
  --muted: #57605e;
  --muted-2: #6b7472;
  --stone: #a89d87;

  --display: 'Prata', Georgia, serif;
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(72px, 9vw, 130px);
  --shell: 1440px;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--deep); }
a:hover { color: var(--teal); }
::selection { background: var(--teal); color: var(--sand); }
input, select, textarea, button { font-family: var(--sans); }

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

/* Every photo in the design sat in a fixed-ratio box, so the ratio lives on
   the wrapper and the image just fills it. */
.ph { position: relative; overflow: hidden; background: #dfe7e6; }
.ph img { width: 100%; height: 100%; object-fit: cover; }

:is(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.shell { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sand); color: var(--deep); padding: 14px 20px;
  font: 600 13px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- type ---------- */

.eyebrow {
  margin: 0 0 16px;
  font: 600 12px var(--sans);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--teal);
}
.eyebrow--light { color: var(--teal-light); }
.eyebrow--stone { margin-bottom: 10px; font-size: 11px; color: var(--stone); }

.h1 {
  margin: 0;
  font: 400 clamp(44px, 7.5vw, 96px)/1.04 var(--display);
  color: var(--sand);
}
.h2 {
  margin: 0 0 20px;
  font: 400 clamp(32px, 4.2vw, 54px)/1.12 var(--display);
  color: var(--deep);
  text-wrap: pretty;
}
.h2--light { color: var(--sand); }
.lede { margin: 0; font: 400 17px/1.75 var(--sans); color: var(--muted); }
.lede--light { color: rgba(250, 247, 241, .85); }

.note {
  margin: 36px 0 0;
  font: 500 11px var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone);
}
.note--light { color: rgba(250, 247, 241, .55); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  text-decoration: none;
  font: 600 13px var(--sans);
  letter-spacing: .16em; text-transform: uppercase;
  padding: 17px 32px;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn--solid { background: var(--deep); color: var(--sand); }
.btn--solid:hover { background: var(--deep-2); color: var(--sand); }
.btn--light { background: var(--sand); color: var(--deep); }
.btn--light:hover { background: #fff; color: var(--deep); }
.btn--outline { border-color: var(--deep); color: var(--deep); }
.btn--outline:hover { background: var(--deep); color: var(--sand); }
.btn--ghost { border-color: rgba(250, 247, 241, .7); color: var(--sand); }
.btn--ghost:hover { background: rgba(250, 247, 241, .12); color: var(--sand); }
.btn--sm { font-size: 12px; padding: 14px 26px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* ---------- header ---------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  background: transparent;
  transition: background .35s ease, box-shadow .35s ease;
}
.site-header--scrolled {
  background: rgba(20, 48, 63, .96);
  box-shadow: 0 1px 0 rgba(250, 247, 241, .08);
}
/* Interior pages never sit under a photo, so their bar is opaque from the top. */
.site-header--solid { position: sticky; background: rgba(20, 48, 63, .97); }

.site-header__inner {
  max-width: var(--shell); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px var(--gutter);
}

.brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--sand);
}
.brand:hover { color: var(--sand); }
.brand__mark {
  width: 34px; height: 34px;
  border: 1px solid rgba(250, 247, 241, .7); border-radius: 50%;
  display: grid; place-items: center;
  font: 600 11px var(--sans); letter-spacing: .05em;
  flex: none;
}
.brand__name {
  font-family: var(--display); font-size: 17px;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 32px); }
.nav a {
  color: var(--sand); text-decoration: none;
  font: 500 13px var(--sans);
  letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}
.nav a:hover { color: var(--teal-light); }
.nav a[aria-current="page"] { color: var(--teal-light); }
.nav .btn { color: var(--deep); }

.menu-btn {
  display: none;
  background: none; border: 1px solid rgba(250, 247, 241, .5); border-radius: 2px;
  color: var(--sand); padding: 10px 14px;
  font: 600 12px var(--sans);
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}

.menu {
  position: fixed; inset: 0; z-index: 70;
  background: var(--deep-2);
  display: flex; flex-direction: column; padding: 24px;
}
.menu[hidden] { display: none; }
.menu__top { display: flex; justify-content: space-between; align-items: center; }
.menu__title {
  font-family: var(--display); font-size: 16px; color: var(--sand);
  letter-spacing: .06em; text-transform: uppercase;
}
.menu__nav { display: flex; flex-direction: column; gap: 26px; margin-top: 64px; }
.menu__nav a {
  color: var(--sand); text-decoration: none;
  font-family: var(--display); font-size: 28px;
}
.menu__cta { margin-top: auto; text-align: center; padding: 18px; }

/* The nav's seven links plus the CTA need about 1100px before they stop
   crowding the brand, so the hamburger takes over well above the 860px
   layout breakpoint rather than at it. */
@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-btn { display: block; }
}

/* ---------- hero ---------- */

.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 48, 63, .45) 0%, rgba(20, 48, 63, .05) 35%,
    rgba(20, 48, 63, .55) 82%, rgba(20, 48, 63, .55) 92%,
    rgba(20, 48, 63, .2) 100%);
}
.hero__body {
  position: relative; pointer-events: none;
  width: 100%; max-width: var(--shell); margin: 0 auto;
  padding: 0 var(--gutter) clamp(72px, 10vh, 120px);
}
.hero__eyebrow {
  margin: 0 0 18px;
  font: 600 12px var(--sans);
  letter-spacing: .32em; text-transform: uppercase;
  color: #e9e0d1;
}
.hero__sub {
  margin: 14px 0 0;
  font-family: var(--display); font-size: clamp(20px, 2.6vw, 32px);
  color: #e9e0d1; font-style: italic;
}
.hero__copy {
  margin: 22px 0 0; max-width: 520px;
  font: 400 clamp(15px, 1.4vw, 18px)/1.7 var(--sans);
  color: rgba(250, 247, 241, .92);
}
.hero .btn-row { margin-top: 34px; pointer-events: auto; }

/* Shorter full-bleed photo bands: the "island time" line and the closing CTA. */
.band { position: relative; display: grid; place-items: center; }
.band--story { min-height: 72vh; }
.band--cta { min-height: 64vh; }
.band__media { position: absolute; inset: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 48, 63, .4), rgba(20, 48, 63, .45) 85%, rgba(20, 48, 63, .15));
}
/* The dusk photo behind this one is bright where the sky reflects in the
   water, which is exactly where the sub-line sits — so this scrim is a little
   heavier through the middle than the design's flat 35%. */
.band--story .band__scrim {
  background: linear-gradient(180deg,
    rgba(20, 48, 63, .38), rgba(20, 48, 63, .5) 55%,
    rgba(20, 48, 63, .42) 80%, rgba(20, 48, 63, .15));
}
.band__body {
  position: relative; pointer-events: none;
  text-align: center; padding: clamp(80px, 12vw, 140px) 24px;
}
.band__body .btn-row { pointer-events: auto; }
.band__title {
  margin: 0;
  font: 400 clamp(36px, 5.5vw, 68px)/1.15 var(--display);
  color: var(--sand);
  text-wrap: pretty;
}
.band--cta .band__title { font-size: clamp(34px, 5vw, 62px); }
.band__copy {
  margin: 18px 0 0;
  font: 400 17px/1.7 var(--sans);
  color: rgba(250, 247, 241, .95);
}
/* These two lines sit directly on the brightest part of their photos. A
   shadow carries them without pushing the scrim dark enough to flatten the
   image behind it. */
.band__title, .band__copy { text-shadow: 0 1px 14px rgba(20, 48, 63, .55); }
.hero__copy, .hero__sub, .hero__eyebrow { text-shadow: 0 1px 14px rgba(20, 48, 63, .45); }

/* ---------- sections ---------- */

.section { padding-block: var(--section-y); scroll-margin-top: 80px; }
.section--tint { background: var(--sand-2); border-top: 1px solid var(--line); }
.section--deep { background: var(--deep); }
.section--rule { border-block: 1px solid var(--line); }

.section__intro { max-width: 640px; }
.section__intro--wide { max-width: 1440px; }

/* welcome */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split__media { aspect-ratio: 4 / 5; min-height: 0; }
.split__copy { margin: 0 0 32px; max-width: 46ch; font: 400 17px/1.75 var(--sans); color: var(--muted); }

/* info strip */
.strip { border-block: 1px solid var(--line); background: var(--sand-2); }
.strip__list {
  max-width: var(--shell); margin: 0 auto;
  padding: 26px var(--gutter);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px;
  list-style: none;
}
.strip__list li {
  display: flex; align-items: center; gap: 10px;
  font: 500 12px var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
}
.strip__list li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal); flex: none;
}

/* room cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(40px, 5vw, 64px);
}
.card { display: flex; flex-direction: column; }
.card__media { aspect-ratio: 4 / 3; }
.card__kicker {
  margin: 22px 0 8px;
  font: 600 11px var(--sans);
  letter-spacing: .28em; text-transform: uppercase; color: var(--stone);
}
.card__title { margin: 0 0 10px; font: 400 26px var(--display); color: var(--deep); }
.card__copy { margin: 0 0 16px; font: 400 15px/1.7 var(--sans); color: var(--muted); }
.card__price {
  margin: 0 0 18px;
  font: 600 13px var(--sans);
  letter-spacing: .12em; text-transform: uppercase; color: var(--deep);
}
.card__price span { color: var(--stone); font-weight: 500; }
.card .btn { margin-top: auto; align-self: flex-start; }

/* island life rail */
.rail-head {
  max-width: var(--shell); margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex; justify-content: flex-end; gap: 12px;
}
.rail-btn {
  width: 48px; height: 48px;
  border: 1px solid var(--deep); border-radius: 50%;
  background: none; color: var(--deep);
  font-size: 18px; cursor: pointer;
  margin-top: clamp(24px, 3vw, 40px);
  transition: background .2s ease, color .2s ease;
}
.rail-btn:hover { background: var(--deep); color: var(--sand); }
.rail {
  display: flex; gap: clamp(16px, 2vw, 28px);
  overflow-x: auto; scrollbar-width: none;
  padding: clamp(20px, 2.5vw, 32px) var(--gutter) 12px;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail__card {
  position: relative; flex: 0 0 clamp(260px, 26vw, 340px);
  aspect-ratio: 3 / 4; scroll-snap-align: start; overflow: hidden;
}
.rail__cap, .tile__cap-block {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  padding: 56px 24px 24px;
  background: linear-gradient(180deg, rgba(20, 48, 63, 0) 0%, rgba(20, 48, 63, .72) 100%);
}
.rail__cap h3 {
  margin: 0 0 10px 60px;
  font: 600 13px var(--sans);
  letter-spacing: .24em; text-transform: uppercase; color: var(--sand);
}
.rail__cap p { margin: 0 0 0 60px; font: 400 14px/1.7 var(--sans); color: rgba(250, 247, 241, .85); }

/* gallery mosaic */
.gallery-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 20px;
}
.link-underline {
  border-bottom: 1px solid var(--deep); color: var(--deep); text-decoration: none;
  font: 600 12px var(--sans);
  letter-spacing: .18em; text-transform: uppercase; padding-bottom: 6px;
}
.mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  grid-auto-rows: 180px; grid-auto-flow: dense; gap: 12px;
  margin-top: clamp(36px, 5vw, 56px);
}
/* The eight tiles occupy twelve cells once the large and spanning ones are
   counted, so pinning six columns on desktop makes them tile into two full
   rows. Left on auto-fit the column count drifts with the viewport and the
   mosaic ends on a ragged half-empty row. */
@media (min-width: 1100px) {
  .mosaic { grid-template-columns: repeat(6, 1fr); }
}
.mosaic > * { position: relative; }
.mosaic__lg { grid-column: span 2; grid-row: span 2; }
.mosaic__tall { grid-row: span 2; }
.mosaic__wide { grid-column: span 2; }
.tag {
  position: absolute; left: 14px; bottom: 12px; pointer-events: none;
  font: 600 10px var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--sand);
  background: rgba(20, 48, 63, .55); padding: 6px 10px; border-radius: 2px;
}

/* rates */
.rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(44px, 6vw, 72px);
}
.rate {
  background: var(--sand); padding: 40px 34px;
  display: flex; flex-direction: column; border-radius: 2px;
}
.rate--feature { box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.rate__label {
  margin: 0 0 14px;
  font: 600 12px var(--sans);
  letter-spacing: .24em; text-transform: uppercase; color: var(--teal);
}
.rate__price { margin: 0; font: 400 44px var(--display); color: var(--deep); }
.rate__unit {
  margin: 6px 0 24px;
  font: 500 11px var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--stone);
}
.rate__inc-label {
  margin: 0 0 6px;
  font: 600 11px var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
}
.rate__inc { margin: 0 0 30px; font: 400 15px/1.9 var(--sans); color: var(--muted); }
.rate .btn { margin-top: auto; text-align: center; }

/* celebrate */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 14px; margin-top: clamp(36px, 5vw, 56px);
}
.tile { position: relative; aspect-ratio: 3 / 4; }
.tile .tag { letter-spacing: .2em; }

/* book direct */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin: clamp(44px, 6vw, 64px) 0 48px;
  text-align: left;
}
.pillar { border-top: 2px solid var(--teal); padding-top: 20px; }
.pillar h3 {
  margin: 0 0 8px;
  font: 600 13px var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: var(--deep);
}
.pillar p { margin: 0; font: 400 15px/1.7 var(--sans); color: var(--muted); }

/* getting here */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.route {
  background: #eef3f2; border: 1px solid #dde6e4; border-radius: 2px;
  padding: clamp(28px, 4vw, 48px);
}
.route__list { list-style: none; margin: 0; padding: 0; }
.route__list li { display: flex; align-items: center; gap: 16px; }
.route__list li + li { margin-top: 52px; position: relative; }
.route__list li + li::before {
  content: ''; position: absolute; left: 5px; top: -52px; height: 52px;
  border-left: 2px dashed var(--teal);
}
.route__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--teal); flex: none; }
.route__dot--start { background: var(--deep); }
.route__dot--end {
  border: 2px solid var(--deep); background: var(--sand); box-sizing: border-box;
}
.route__list span:last-child {
  font: 600 13px var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--deep);
}
.fineprint { margin: 28px 0 0; font: 400 13px/1.6 var(--sans); color: var(--muted-2); }

.steps { display: flex; flex-direction: column; gap: 28px; }
.step { display: flex; gap: 22px; align-items: flex-start; }
.step__n { font-family: var(--display); font-size: 28px; color: var(--teal); }
.step h3 {
  margin: 2px 0 6px;
  font: 600 14px var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: var(--deep);
}
.step p { margin: 0; font: 400 15px/1.7 var(--sans); color: var(--muted); }

/* testimonials */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(36px, 5vw, 56px);
}
.quote {
  margin: 0; background: var(--sand);
  border: 1px solid var(--line); border-radius: 2px; padding: 36px 32px;
}
.quote__mark { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--teal); }
.quote p { margin: 8px 0 20px; font: 400 16px/1.75 var(--sans); color: var(--muted); font-style: italic; }
.quote footer {
  font: 600 11px var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: var(--stone);
}

/* booking form */
.contact-list { display: flex; flex-direction: column; gap: 18px; list-style: none; margin: 0; padding: 0; }
.contact-list a {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: var(--deep);
  font: 600 15px var(--sans);
}
.contact-list__icon {
  width: 42px; height: 42px;
  border: 1px solid var(--field-line); border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; letter-spacing: .08em; color: var(--teal); flex: none;
}

.form {
  background: var(--sand-2); border: 1px solid var(--line); border-radius: 2px;
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field > span {
  font: 600 11px var(--sans);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2);
}
.field :is(input, select, textarea) {
  border: 1px solid var(--field-line); border-radius: 2px;
  background: var(--sand); padding: 14px 16px;
  font-size: 15px; color: var(--ink);
}
.field textarea { resize: vertical; }
.form button { grid-column: 1 / -1; padding: 18px; border: none; }
.form__sent {
  grid-column: 1 / -1; margin: 0; text-align: center;
  font: 500 14px var(--sans); color: var(--teal);
}
.form__sent[hidden] { display: none; }

/* faq */
.faq { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter) var(--section-y); }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0;
  font: 600 16px var(--sans); color: var(--deep);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--teal); font-size: 20px; font-weight: 400; }
.faq details[open] summary::after { content: '\2013'; }
.faq details p { margin: 0 0 22px; font: 400 15px/1.75 var(--sans); color: var(--muted); }

/* footer */
.site-footer {
  background: var(--deep-2); color: var(--sand);
  padding: clamp(56px, 7vw, 96px) var(--gutter) 40px;
}
.site-footer__cols {
  max-width: var(--shell); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(32px, 4vw, 64px);
}
.site-footer__name {
  margin: 0 0 14px;
  font-family: var(--display); font-size: 20px;
  letter-spacing: .06em; text-transform: uppercase;
}
.site-footer address {
  margin: 0; font: 400 14px/1.8 var(--sans); font-style: normal;
  color: rgba(250, 247, 241, .7);
}
.site-footer__group { display: flex; flex-direction: column; gap: 12px; }
.site-footer__group > span {
  font: 600 11px var(--sans);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--teal-light); margin-bottom: 4px;
}
.site-footer__group a {
  color: rgba(250, 247, 241, .85); text-decoration: none;
  font: 400 14px var(--sans);
}
.site-footer__group a:hover { color: var(--teal-light); }
.site-footer__legal {
  max-width: var(--shell); margin: 56px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(250, 247, 241, .15);
  font: 400 12px/1.8 var(--sans); color: rgba(250, 247, 241, .5);
}
.site-footer__legal a { color: rgba(250, 247, 241, .65); }

/* The source design gave the interior pages a thin one-line footer and a
   shortened nav. That is dropped: all three pages carry the same header and
   footer, because a sub-page that loses two thirds of the navigation reads as
   a different site. */

/* sticky mobile action bar */
.actionbar, .actionbar-spacer { display: none; }

@media (max-width: 860px) {
  .actionbar-spacer { display: block; height: 68px; }
  .actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    display: flex; background: var(--sand);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(20, 48, 63, .12);
  }
  .actionbar a {
    flex: 1; text-align: center; padding: 20px 8px;
    text-decoration: none; color: var(--deep);
    font: 600 12px var(--sans);
    letter-spacing: .14em; text-transform: uppercase;
  }
  .actionbar a + a { border-left: 1px solid var(--line); }
  .actionbar a:last-child {
    flex: 1.2; background: var(--deep); color: var(--sand); border-left: none;
  }
}

/* ---------- stay ---------- */

.page-head { background: var(--deep-2); padding: clamp(64px, 8vw, 110px) var(--gutter); }
.page-head__inner { max-width: var(--shell); margin: 0 auto; }
.page-head h1 {
  margin: 0 0 18px;
  font: 400 clamp(38px, 5.5vw, 72px)/1.08 var(--display);
  color: var(--sand); text-wrap: pretty;
}
.page-head p { max-width: 560px; }

.rooms {
  max-width: var(--shell); margin: 0 auto;
  padding: clamp(64px, 8vw, 110px) var(--gutter);
  display: flex; flex-direction: column; gap: clamp(64px, 8vw, 110px);
}
.room {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(28px, 4vw, 72px); align-items: center;
}
.room__media { aspect-ratio: 4 / 3; }
.room--flip .room__media { order: 2; }
.room--flip .room__body { order: 1; }
.room h2 { margin: 0 0 16px; font: 400 clamp(28px, 3.4vw, 44px) var(--display); color: var(--deep); }
.room__copy { margin: 0 0 22px; max-width: 46ch; font: 400 16px/1.75 var(--sans); color: var(--muted); }
.room__specs {
  margin: 0 0 24px; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  font: 500 13px var(--sans); color: var(--muted-2);
}
.room__price {
  margin: 0 0 24px;
  font: 600 13px var(--sans);
  letter-spacing: .12em; text-transform: uppercase; color: var(--deep);
}
.room__price span { color: var(--stone); font-weight: 500; }

.closer { text-align: center; padding: clamp(64px, 8vw, 100px) var(--gutter); }
.closer h2 { margin: 0 0 14px; font: 400 clamp(28px, 3.6vw, 44px) var(--display); }
.closer p { margin: 0 0 30px; font: 400 16px/1.7 var(--sans); color: var(--muted); }
.closer--deep { background: var(--deep); padding-block: clamp(56px, 7vw, 90px); }
.closer--deep h2 { color: var(--sand); }
.closer--deep p { color: rgba(250, 247, 241, .85); }

/* ---------- room details ---------- */

.room-hero { position: relative; min-height: 56vh; }
.room-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.detail {
  max-width: 1200px; margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(40px, 6vw, 88px); align-items: start;
}
/* "← All Rooms" lived in the nav on this page in the source design, which is
   why that nav was two items long. It belongs here instead. */
.breadcrumb { margin: 0 0 14px; font: 500 13px var(--sans); }
.breadcrumb a {
  color: var(--muted-2); text-decoration: none;
  letter-spacing: .1em; text-transform: uppercase;
}
.breadcrumb a:hover { color: var(--teal); }

.detail h1 {
  margin: 0 0 20px;
  font: 400 clamp(34px, 4.5vw, 58px)/1.1 var(--display); color: var(--deep);
}
.detail__copy { margin: 0 0 28px; max-width: 52ch; font: 400 17px/1.8 var(--sans); color: var(--muted); }
.specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px;
  border-block: 1px solid var(--line); padding: 24px 0; margin-bottom: 32px;
}
.specs dt {
  margin: 0 0 4px;
  font: 600 10px var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: var(--stone);
}
.specs dd { margin: 0; font: 500 15px var(--sans); color: var(--deep); }
.subhead {
  margin: 0 0 16px;
  font: 600 13px var(--sans);
  letter-spacing: .24em; text-transform: uppercase; color: var(--deep);
}
.amenities {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 24px; font: 400 15px/1.6 var(--sans); color: var(--muted);
}
.booking-box {
  background: var(--sand-2); border: 1px solid var(--line); border-radius: 2px;
  padding: clamp(28px, 3vw, 40px); position: sticky; top: 96px;
}
.booking-box__label {
  margin: 0 0 6px;
  font: 600 11px var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--teal);
}
.booking-box__price { margin: 0; font: 400 42px var(--display); color: var(--deep); }
.booking-box__unit {
  margin: 4px 0 24px;
  font: 500 12px var(--sans);
  letter-spacing: .14em; text-transform: uppercase; color: var(--stone);
}
.booking-box .btn { display: block; text-align: center; padding: 17px; }
.booking-box .btn + .btn { margin-top: 12px; }
.booking-box__note { margin: 20px 0 0; font: 400 13px/1.6 var(--sans); color: var(--muted-2); }

.room-gallery {
  max-width: 1200px; margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 8vw, 110px);
}
.room-gallery__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px;
}
.room-gallery__grid .ph { aspect-ratio: 4 / 3; }