/* ============================================================
   Villa Clover — site styles
   Ported from the Claude Design prototype "Villa Clover Site".
   The prototype was desktop-only inline styles; the values below
   match it exactly, with a responsive layer added from 1080px down.
   ============================================================ */

:root {
  /* Surfaces */
  --cream: #FBF7EF;
  --sand: #F4EAD7;

  /* Ink */
  --ink: #2A2420;
  --ink-soft: #4A4239;
  --muted: #6E6459;

  /* Gold */
  --gold: #B8942F;
  --gold-light: #C9A94A;
  --gold-pale: #D9BC6A;
  --on-gold: #35270A;

  /* Green */
  --green: #1F5D3A;
  --green-deep: #16402A;

  /* Hairlines */
  --rule: rgba(184, 148, 47, 0.22);
  --rule-strong: rgba(184, 148, 47, 0.3);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --header-h: 83px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: 12px 20px;
  background: var(--green);
  color: var(--sand);
  font-size: 14px;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

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

/* ── Shared type ─────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 42px;
  color: var(--ink);
}
/* Every section after "Rooms" runs the heading a shade smaller, in green. */
.section-title.on-sand {
  font-size: 40px;
  color: var(--green);
}

.in-green { color: var(--green); }

/* ── Buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 14px 32px;
  border: 0;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }

.btn-gold {
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  color: var(--on-gold);
}
.btn-green {
  padding: 13px 30px;
  background: var(--green);
  color: var(--sand);
  font-weight: 600;
}
.btn-outline {
  background: transparent;
  border: 1px solid rgba(244, 234, 215, 0.5);
  color: var(--sand);
  font-weight: 600;
}
.btn-outline:hover { background: rgba(244, 234, 215, 0.1); filter: none; }

.btn-sm { padding: 12px 26px; }
.btn-lg { padding: 16px 40px; font-size: 14px; }

/* ── Header ──────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 48px;
  background: rgba(251, 247, 239, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}
.brand-mark { height: 50px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}
.brand-tag {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--green);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.site-nav a {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color 0.18s ease;
}
.site-nav a:hover { color: var(--gold); }
.site-nav a.btn:hover { color: var(--on-gold); }
.nav-nowrap { white-space: nowrap; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--ink-soft);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: max(640px, 86vh);
}
/* <picture> wrapper: clips the slow drift applied to the image inside. */
.hero-photo {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* On a short, wide viewport the crop eats the bottom first — biasing
     upward keeps the palm and the mountain rather than the gate rails. */
  object-position: center 45%;
  display: block;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 16, 10, 0.45) 0%, rgba(22, 16, 10, 0.22) 40%, rgba(22, 16, 10, 0.62) 100%);
  pointer-events: none;
}
.hero-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  text-align: center;
  pointer-events: none;
}
.hero-lockup {
  display: flex;
  align-items: center;
  gap: 24px;
}
.hero-mark {
  height: 124px;
  width: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}
.hero-wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 52px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}
.hero-title {
  margin: 24px 0 0;
  max-width: 800px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1.06;
  color: var(--cream);
  text-wrap: balance;
}
.hero-sub {
  margin: 18px 0 0;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: rgba(251, 247, 239, 0.9);
}

/* ── Welcome ─────────────────────────────────────────────── */

.welcome {
  max-width: 880px;
  margin: 0 auto;
  padding: 100px 40px 72px;
  text-align: center;
}
.welcome .eyebrow { margin-bottom: 16px; }
.welcome-title {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.15;
  color: var(--ink);
}
.welcome-copy {
  margin: 0;
  font-size: 17px;
  line-height: 1.85;
  color: var(--muted);
}

/* 404 page reuses the welcome block. */
.error-actions { margin: 32px 0 0; }

/* ── Three features ──────────────────────────────────────── */

.features {
  max-width: 1220px;
  margin: 0 auto 104px;
  padding: 0 40px;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.feature {
  padding: 42px 34px;
  text-align: center;
  border-right: 1px solid var(--rule);
}
.feature:last-child { border-right: 0; }
.feature-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 30px;
  color: var(--green);
}
.feature-copy {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── Rooms ───────────────────────────────────────────────── */

.rooms { scroll-margin-top: 100px; }

.section-head {
  margin-bottom: 56px;
  text-align: center;
}

.rooms-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 40px;
}

.room {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  padding-bottom: 84px;
}
.room-reverse {
  grid-template-columns: 1fr 1.1fr;
  padding-bottom: 104px;
}
.room-reverse .gallery { order: 2; }
.room-reverse .room-copy { order: 1; }

.room-title {
  margin: 10px 0 16px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 38px;
  color: var(--green);
}
/* The 10px above used to separate the heading from a label that is no
   longer there, so it only applies when something precedes it. */
.room-copy > :first-child { margin-top: 0; }
.room-desc {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.chip {
  padding: 8px 14px;
  background: var(--sand);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--ink-soft);
}

.room-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.room-enquire {
  margin: 0;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}

.room-copy-right { text-align: right; }
.room-copy-right .chips,
.room-copy-right .room-actions { justify-content: flex-end; }

/* ── Room gallery (carousel) ─────────────────────────────── */

.gallery {
  position: relative;
  height: 460px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--sand);
}
.gallery-slides {
  position: absolute;
  inset: 0;
}
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.slide.is-active { opacity: 1; }

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 247, 239, 0.92);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(22, 16, 10, 0.25);
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.gallery-arrow:hover { background: var(--cream); }
.gallery-prev { left: 14px; }
.gallery-next { right: 14px; }

.gallery-dots {
  position: absolute;
  bottom: 20px;
  left: 18px;
  display: flex;
  gap: 8px;
}
.dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(251, 247, 239, 0.7);
  box-shadow: 0 1px 4px rgba(22, 16, 10, 0.4);
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.dot.is-active { background: var(--gold-light); }

.gallery-badge {
  position: absolute;
  bottom: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 40px;
  background: rgba(22, 16, 10, 0.62);
  color: var(--sand);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.gallery-badge:hover { background: rgba(22, 16, 10, 0.8); }

/* ── Amenities ───────────────────────────────────────────── */

.amenities {
  padding: 84px 40px;
  background: var(--sand);
  text-align: center;
  scroll-margin-top: 80px;
}
.amenities .section-title { margin-bottom: 44px; }

.amenity-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 20px;
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.amenity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  background: var(--cream);
  border: 1px solid rgba(184, 148, 47, 0.35);
  border-radius: 40px;
  font-size: 15px;
  color: var(--ink);
}
.amenity::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

/* ── Good to know ────────────────────────────────────────── */

.good-to-know {
  max-width: 1120px;
  margin: 0 auto;
  padding: 100px 40px 8px;
  text-align: center;
  scroll-margin-top: 80px;
}
.good-to-know .section-title { margin-bottom: 46px; }

.gtk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  text-align: left;
}
.card {
  padding: 34px 36px;
  background: var(--sand);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
}
.card-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.card-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 25px;
  line-height: 1.25;
  color: var(--green);
}

.rules-card {
  margin-top: 24px;
  text-align: left;
}
.rules-card .card-label { margin-bottom: 20px; }
.rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rules li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.rules li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--gold);
}

/* ── Location ────────────────────────────────────────────── */

.location {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1220px;
  margin: 0 auto;
  padding: 96px 40px;
  scroll-margin-top: 80px;
}
.location .section-title { margin-bottom: 20px; }

.location-address {
  margin: 0 0 26px;
  font-size: 17px;
  font-style: normal;
  line-height: 1.7;
  color: var(--ink-soft);
}
.nearby-intro {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.nearby {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.nearby li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
/* Same gold dot as the amenity pills and house rules. */
.nearby li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--gold);
}

/* The gradient sits behind the iframe, so the panel reads as brand green
   while the map is still loading rather than flashing white. */
.location-map {
  min-height: 400px;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--green), var(--green-deep));
}
.location-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
}

/* ── Closing CTA ─────────────────────────────────────────── */

.cta {
  padding: 84px 40px;
  background: linear-gradient(135deg, var(--green-deep), var(--green));
  text-align: center;
}
.cta-title {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 46px;
  color: var(--cream);
}
.cta-sub {
  margin: 0 0 32px;
  font-size: 16px;
  color: rgba(244, 234, 215, 0.85);
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.cta-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
  margin: 34px 0 0;
  font-size: 15px;
}
.cta-contact a {
  color: var(--gold-pale);
  text-decoration: none;
}
.cta-contact a:hover { text-decoration: underline; }

/* ── Footer ──────────────────────────────────────────────── */

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 44px 48px;
  background: var(--ink);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-brand img { height: 58px; width: auto; }
.footer-name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-pale);
}
.footer-meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  text-align: right;
  color: rgba(244, 234, 215, 0.6);
}
.footer-meta a {
  color: inherit;
  text-decoration: none;
}
.footer-meta a:hover { text-decoration: underline; }

/* ── Lightbox ────────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 100px;
  background: rgba(22, 16, 10, 0.93);
}
.lightbox[hidden] { display: none; }

.lb-img {
  max-width: min(1200px, 80vw);
  max-height: 76vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.lb-close,
.lb-arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  color: var(--sand);
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.lb-close {
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid rgba(244, 234, 215, 0.4);
}
.lb-arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(251, 247, 239, 0.1);
  border: 1px solid rgba(244, 234, 215, 0.35);
}
.lb-close:hover,
.lb-arrow:hover { background: rgba(251, 247, 239, 0.22); }
.lb-prev { left: 28px; }
.lb-next { right: 28px; }

.lb-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 18px;
  margin: 22px 0 0;
  color: var(--sand);
}
.lb-name {
  font-family: var(--serif);
  font-size: 24px;
}
.lb-counter {
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--gold-light);
}

body.is-locked { overflow: hidden; }

/* ============================================================
   Responsive — the prototype stopped at desktop, so everything
   below this line is new.
   ============================================================ */

/* Stacking at 1000 rather than 1080 keeps the alternating two-column room
   layout on a landscape tablet (1024), which has the width for it. */
@media (max-width: 1000px) {
  .room,
  .room-reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 72px;
  }
  /* Stacked, the photo always leads. */
  .room-reverse .gallery { order: 0; }
  .room-reverse .room-copy { order: 0; }
  .room-copy-right { text-align: left; }
  .room-copy-right .chips,
  .room-copy-right .room-actions { justify-content: flex-start; }

  .location {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px 40px;
  }
  .location-map,
  .location-map iframe { min-height: 320px; }

  .gtk-grid { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .site-header { padding: 14px 24px; }

  .nav-toggle { display: flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 24px rgba(22, 16, 10, 0.08);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .site-nav a {
    padding: 16px 4px;
    border-bottom: 1px solid var(--rule);
  }
  .site-nav a.btn {
    margin-top: 16px;
    border-bottom: 0;
    text-align: center;
  }

  .features-grid { grid-template-columns: 1fr; }
  .feature {
    padding: 30px 24px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .feature:last-child { border-bottom: 0; }

  .hero { height: max(560px, 78vh); }
  .hero-mark { height: 84px; }
  .hero-wordmark { font-size: 36px; }
  .hero-title { font-size: clamp(34px, 6vw, 48px); }
  .hero-sub { font-size: 16px; }

  .welcome { padding: 72px 24px 56px; }
  .welcome-title { font-size: 34px; }
  .welcome-copy { font-size: 16px; line-height: 1.75; }

  .features { margin-bottom: 72px; padding: 0 24px; }

  .section-title { font-size: 34px; }
  .section-title.on-sand { font-size: 32px; }

  .section-head { margin-bottom: 36px; }
  .rooms-inner { padding: 0 24px; }
  .gallery { height: 340px; }
  .room-title { font-size: 32px; }

  .amenities { padding: 64px 24px; }
  .good-to-know { padding: 72px 24px 8px; }
  .card { padding: 26px 24px; }
  .location { padding: 64px 24px; }

  .cta { padding: 64px 24px; }
  .cta-title { font-size: 36px; }

  .site-footer {
    padding: 32px 24px;
    justify-content: center;
    text-align: center;
  }
  .footer-meta { text-align: center; }

  .lightbox { padding: 72px 16px 24px; }
  .lb-img { max-width: 92vw; max-height: 66vh; }
  .lb-arrow { width: 44px; height: 44px; }
  .lb-prev { left: 10px; }
  .lb-next { right: 10px; }
  .lb-close { top: 14px; right: 14px; }
}

@media (max-width: 560px) {
  .site-header { padding: 12px 18px; }
  .brand-mark { height: 40px; }
  .brand-name { font-size: 19px; letter-spacing: 0.12em; }
  .brand-tag { font-size: 9px; letter-spacing: 0.22em; }

  .hero-lockup { flex-direction: column; gap: 12px; }
  .hero-mark { height: 72px; }
  .hero-wordmark { font-size: 28px; }
  .hero-title { font-size: 32px; margin-top: 18px; }
  .hero-inner { padding: 0 22px; }

  .welcome { padding: 56px 22px 44px; }
  .features { padding: 0 22px; }
  .rooms-inner { padding: 0 22px; }
  .gallery { height: 260px; }
  .gallery-arrow { width: 38px; height: 38px; }
  .gallery-badge { padding: 8px 12px; font-size: 11px; }

  .room-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .room-copy-right .room-actions { align-items: flex-start; }
  .btn { width: auto; }

  .amenities { padding: 56px 22px; }
  .amenity { font-size: 14px; padding: 10px 18px; }

  .good-to-know { padding: 56px 22px 8px; }
  .location { padding: 56px 22px; }
  /* "La Rochelle Girls' High School" has nowhere to go in half of 331px. */
  .nearby { grid-template-columns: 1fr; }

  .cta { padding: 56px 22px; }
  .cta-title { font-size: 30px; }
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-contact { flex-direction: column; gap: 10px; }

  .lb-caption { margin-top: 16px; gap: 10px; }
  .lb-name { font-size: 19px; }
}

/* ============================================================
   Motion

   House style: slow, low-amplitude, one direction. Everything eases on
   the same curve so the page reads as one system rather than a pile of
   effects. Nothing here is load-bearing — with motion or scripting off,
   the page is simply the static layout above.
   ============================================================ */

:root { --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1); }

/* ── Hero ────────────────────────────────────────────────── */

/* A very slow drift across the frame. 28s and 6% is deliberately below
   the threshold where it reads as "animation" — it should feel like the
   photo is breathing, not panning. */
@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.hero-photo img {
  animation: hero-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}

/* The lockup, headline, strapline and button arrive in sequence. The
   animation self-completes, so it needs no JS and can't strand content
   at opacity 0 if scripting is unavailable. */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
[data-hero-step] {
  opacity: 0;
  animation: hero-in 0.9s var(--ease-out) forwards;
}
[data-hero-step="1"] { animation-delay: 0.15s; }
[data-hero-step="2"] { animation-delay: 0.3s; }
[data-hero-step="3"] { animation-delay: 0.45s; }

/* A thread of gold falling down a hairline — a scroll hint that doesn't
   shout. */
@keyframes hero-cue {
  0%        { transform: translateY(-100%); }
  60%, 100% { transform: translateY(260%); }
}
.hero-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 1px;
  height: 54px;
  overflow: hidden;
  background: rgba(251, 247, 239, 0.28);
  transform: translateX(-50%);
  pointer-events: none;
}
.hero-cue span {
  display: block;
  width: 100%;
  height: 40%;
  background: var(--gold-light);
  animation: hero-cue 2.6s ease-in-out infinite;
}

/* ── Scroll reveals ─────────────────────────────────────────
   Gated on `scripting: enabled` because `.is-visible` comes from JS.
   A browser without JS — or without support for the query — never
   applies the hidden state, so content can't get stuck invisible. */

@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  }
  .reveal-l { transform: translateX(-24px); }
  .reveal-r { transform: translateX(24px); }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* Children of a .stagger group cascade in rather than landing together. */
  .stagger .reveal:nth-child(2) { transition-delay: 0.07s; }
  .stagger .reveal:nth-child(3) { transition-delay: 0.14s; }
  .stagger .reveal:nth-child(4) { transition-delay: 0.21s; }
  .stagger .reveal:nth-child(5) { transition-delay: 0.28s; }
  .stagger .reveal:nth-child(6) { transition-delay: 0.35s; }
  .stagger .reveal:nth-child(7) { transition-delay: 0.42s; }
}

/* Stacked layouts are full-bleed, so a sideways offset would push the
   page wider than the viewport. Drop back to vertical. */
@media (scripting: enabled) and (max-width: 1000px) {
  .reveal-l, .reveal-r { transform: translateY(26px); }
}

/* ── Header ──────────────────────────────────────────────── */

.site-header { transition: padding 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; }
.brand-mark { transition: height 0.3s ease; }

.site-header.is-scrolled {
  padding-top: 9px;
  padding-bottom: 9px;
  background: rgba(251, 247, 239, 0.98);
  box-shadow: 0 6px 24px rgba(22, 16, 10, 0.09);
}
.site-header.is-scrolled .brand-mark { height: 40px; }

/* Nav underline wipes in from the left and out to the right. */
.site-nav a:not(.btn) { position: relative; }
.site-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.site-nav a:not(.btn):hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── Hover polish ────────────────────────────────────────────
   After the reveal rules on purpose: both are two-class selectors, so
   document order is what lets :hover beat `.reveal.is-visible`. */

/* A sheen crossing the gold buttons. */
.btn-gold {
  position: relative;
  overflow: hidden;
}
.btn-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.42) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 0.75s var(--ease-out);
  pointer-events: none;
}
.btn-gold:hover::after { transform: translateX(130%); }

.card {
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(22, 16, 10, 0.1);
}

.amenity {
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease, box-shadow 0.3s ease;
}
.amenity:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(184, 148, 47, 0.18);
}

/* The live photo pushes in slightly under the cursor; the crossfade
   between slides is unchanged. */
.slide { transition: opacity 0.45s ease, transform 0.9s var(--ease-out); }
.gallery-slides:hover .slide.is-active { transform: scale(1.045); }

.feature { transition: background-color 0.35s ease; }
.feature:hover { background: rgba(184, 148, 47, 0.05); }

.gallery-arrow { transition: background-color 0.18s ease, transform 0.25s var(--ease-out); }
.gallery-prev:hover { transform: translateY(-50%) translateX(-3px); }
.gallery-next:hover { transform: translateY(-50%) translateX(3px); }

/* Underlines and lifts are pointer affordances; on a touch layout the
   nav is a stacked drawer where a sweeping rule just looks wrong. */
@media (max-width: 900px) {
  .site-nav a:not(.btn)::after { display: none; }
  .site-header.is-scrolled { padding-top: 8px; padding-bottom: 8px; }
}

/* ============================================================
   Device adaptations

   Width alone doesn't describe a device. These three queries cover what
   it misses: viewports that are short rather than narrow, screens
   between the tablet and desktop layouts, and touch instead of a mouse.
   ============================================================ */

/* Between stacking and the full desktop measure, the columns are real
   but tight — pull the gutters in rather than let the text crowd. */
@media (min-width: 1001px) and (max-width: 1140px) {
  .room,
  .room-reverse { gap: 36px; }
  .location { gap: 40px; }
  .rooms-inner,
  .features,
  .location { padding-left: 32px; padding-right: 32px; }
}

/* Landscape phones. The hero is sized off `vh` with a floor under it,
   and on a 390px-tall screen that floor (560px) is taller than the whole
   viewport — you'd scroll before reaching the headline. Everything here
   trades vertical space back. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { height: max(340px, 92vh); }
  .hero-lockup {
    flex-direction: row;
    gap: 16px;
  }
  .hero-mark { height: 52px; }
  .hero-wordmark { font-size: 24px; letter-spacing: 0.12em; }
  .hero-title { font-size: 26px; margin-top: 12px; }
  .hero-sub { font-size: 14px; margin-top: 8px; }
  .hero-cue { display: none; }

  /* Same problem in the lightbox: fixed padding plus a 66vh photo
     doesn't fit in 390px. */
  .lightbox { padding: 54px 64px 12px; }
  .lb-img { max-height: 62vh; }
  .lb-caption { margin-top: 10px; gap: 12px; }
  .lb-name { font-size: 17px; }
}

/* Touch. The carousel dots are 9px by design and a 9px target is not
   reachable with a finger — WCAG 2.2 wants 24px, or spacing that keeps
   24px circles from overlapping. Widening the gap to 15px puts the
   centres 24px apart and an invisible pad gives each dot the area,
   so the dots still *look* 9px. Pointer devices are untouched. */
@media (pointer: coarse) {
  .gallery-dots { gap: 15px; }
  .dot { position: relative; }
  .dot::after {
    content: "";
    position: absolute;
    inset: -7.5px;
  }
  .gallery-arrow {
    width: 44px;
    height: 44px;
  }
}

@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;
  }
  /* Reveals still land (the transition just collapses to nothing), but the
     ambient motion has no end state worth keeping, so switch it off. */
  .hero-photo img { animation: none !important; transform: none !important; }
  .hero-cue { display: none; }
  .btn-gold::after { display: none; }
}