@import url('/assets/fonts/fonts.css');

/* ==========================================================================
   The Haus Collection — design system

   Colour is taken from the logo file itself: the navy of the wordmark and the
   gold of the roofline and palm. Type pairs Cormorant Garamond, which shares
   the lockup's high-contrast serif, with Jost, whose wide-tracked capitals
   echo "CURATED HOMES. ELEVATED EXPERIENCES."

   The signature device is the gable rule — a hairline broken by a shallow roof
   peak, lifted from the mark and used to open every section.
   ========================================================================== */

:root {
  /* Brand ------------------------------------------------------------------ */
  --ink: #103048; /* sampled from the logo wordmark */
  --ink-deep: #0b2033; /* dark sections */
  --ink-soft: #405b74; /* 6.3:1 on sand */
  --ink-muted: #56718a; /* 4.6:1 on sand — AA for body text */
  --gold: #b89050; /* sampled from the logo roofline and palm */
  --gold-deep: #8a6829; /* AA-compliant gold for small text on sand */
  --gold-soft: #d8c39a;
  --sand: #f7f3ec;
  --sand-deep: #ede5d8;
  --paper: #fffdf9;
  --line: #ded3c2;
  --line-dark: #24405a;

  /* Semantic --------------------------------------------------------------- */
  --bg: var(--sand);
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --focus: var(--gold-deep);

  /* Type ------------------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0: clamp(1rem, 0.96rem + 0.19vw, 1.11rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.34vw, 1.42rem);
  --step-2: clamp(1.44rem, 1.32rem + 0.58vw, 1.82rem);
  --step-3: clamp(1.73rem, 1.54rem + 0.94vw, 2.33rem);
  --step-4: clamp(2.07rem, 1.78rem + 1.46vw, 2.99rem);
  --step-5: clamp(2.49rem, 2.03rem + 2.28vw, 3.82rem);
  --step-6: clamp(2.99rem, 2.3rem + 3.43vw, 4.9rem);

  /* Space (spacious scale) --------------------------------------------------*/
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --measure: 62ch;
  --wrap: 78rem;
  --wrap-narrow: 46rem;

  /* Height of the fixed header. Pages without a full-bleed hero clear it. */
  --header-h: 5rem;

  --radius: 2px;
  --radius-lg: 3px;
  --shadow-sm: 0 1px 2px rgb(16 48 72 / 6%), 0 4px 14px rgb(16 48 72 / 6%);
  --shadow-md: 0 2px 6px rgb(16 48 72 / 8%), 0 18px 44px rgb(16 48 72 / 10%);

  --ease: cubic-bezier(0.2, 0.6, 0.25, 1);
  --dur: 220ms;
}

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

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset in-page anchors so the fixed header never covers a heading. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 350;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Nothing on the site may cause a sideways scroll on a phone. */
  overflow-x: hidden;
}

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

img {
  height: auto;
  /* Keeps the space reserved while a photo decodes, so layout does not jump. */
  background-color: var(--sand-deep);
}

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

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

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

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

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

/* Skip link ---------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--sand);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-sm);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.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--tight {
  padding-block: calc(var(--section-y) * 0.66);
}

.section--dark {
  background: var(--ink-deep);
  color: var(--sand);
}

.section--sand {
  background: var(--sand-deep);
}

.section--paper {
  background: var(--paper);
}

/* Signature: the gable rule ------------------------------------------------ */
/* A hairline interrupted by the roof peak from the logo. It opens each
   section and replaces the usual decorative divider. */

.gable-rule {
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--gold);
}

.gable-rule__line {
  flex: 1;
  height: 1px;
  background: currentcolor;
  opacity: 0.55;
}

.gable-rule__peak {
  flex: none;
  width: 34px;
  height: 12px;
  overflow: visible;
}

.gable-rule__peak path {
  fill: none;
  stroke: currentcolor;
  stroke-width: 1;
}

.gable-rule--short {
  width: 108px;
}

.gable-rule--short .gable-rule__line {
  opacity: 0.75;
}

/* Eyebrow ------------------------------------------------------------------ */

.eyebrow {
  display: block;
  margin-bottom: var(--space-sm);
  color: var(--gold-deep);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.section--dark .eyebrow,
.hero .eyebrow {
  color: var(--gold-soft);
}

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

.section-head {
  max-width: var(--measure);
  margin-bottom: var(--space-xl);
}

.section-head__title {
  font-size: var(--step-4);
}

.section-head__lede {
  margin-top: var(--space-md);
  color: var(--fg-muted);
  font-size: var(--step-1);
  line-height: 1.55;
}

.section--dark .section-head__lede {
  color: #c3d2df;
}

.section-head--split {
  display: grid;
  gap: var(--space-lg);
  max-width: none;
  align-items: end;
}

@media (min-width: 56em) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .section-head--split .section-head__aside {
    padding-bottom: 0.35rem;
  }
}

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

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--sand);
  --btn-border: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:hover {
  --btn-bg: #1a4059;
  --btn-border: #1a4059;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--gold {
  --btn-bg: var(--gold);
  --btn-fg: #22160a;
  --btn-border: var(--gold);
}

.btn--gold:hover {
  --btn-bg: #c9a266;
  --btn-border: #c9a266;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--line);
}

.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-border: var(--ink);
}

.section--dark .btn--ghost,
.hero .btn--ghost {
  --btn-fg: var(--sand);
  --btn-border: rgb(247 243 236 / 45%);
}

.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover {
  --btn-bg: rgb(247 243 236 / 10%);
  --btn-fg: var(--sand);
  --btn-border: var(--sand);
}

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

.btn__icon {
  flex: none;
  width: 0.85em;
  height: 0.85em;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.6;
}

/* Text link with a rule that draws in on hover ----------------------------- */

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.25rem;
  color: var(--gold-deep);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.link-more::after {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentcolor;
  transition: width var(--dur) var(--ease);
}

.link-more:hover::after {
  width: 2.75rem;
}

.section--dark .link-more {
  color: var(--gold-soft);
}

/* Terrain glyphs ----------------------------------------------------------- */
/* Each destination carries its own line drawing, in the same stroke language
   as the logo: a ridge for Georgia, a wave for the Gulf coast. */

.glyph {
  flex: none;
  width: 1.75rem;
  height: 0.9rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

/* The bar is fixed in every state. It used to switch between sticky and fixed
   when the page scrolled, which pulled it in and out of flow and jumped the
   whole page by its own height at that moment. */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  transition:
    background-color 320ms var(--ease),
    border-color 320ms var(--ease),
    color 320ms var(--ease);
  view-transition-name: site-header;
}

@supports (backdrop-filter: blur(2px)) {
  .site-header {
    background: rgb(247 243 236 / 86%);
    backdrop-filter: blur(14px) saturate(1.1);
  }
}

/* Over a hero photograph the bar is invisible until the page is scrolled. */
.site-header[data-overlay='true']:not([data-scrolled='true']) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--sand);
}

.site-header[data-overlay='true']:not([data-scrolled='true']) .brand__wordmark {
  color: var(--sand);
}

.site-header[data-overlay='true']:not([data-scrolled='true']) .brand__mark {
  filter: brightness(0) invert(1);
}

.site-header[data-overlay='true']:not([data-scrolled='true']) .nav-toggle__bar {
  background: var(--sand);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  /* Kept in step with --header-h, which interior pages and anchor scrolling
     both use to clear the fixed bar. */
  min-height: var(--header-h);
  padding-block: 0.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.brand__mark {
  width: auto;
  height: 3.25rem;
  background: none;
  transition: filter var(--dur) var(--ease);
}

.brand__wordmark {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--ink);
  font-family: var(--font-display);
  /* Scaled with the emblem so the lockup keeps its proportions. */
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}

.brand__wordmark small {
  font-family: var(--font-body);
  font-size: 0.52rem;
  font-weight: 400;
  letter-spacing: 0.34em;
  opacity: 0.72;
}

@media (max-width: 26em) {
  .brand__wordmark {
    font-size: 0.95rem;
    letter-spacing: 0.24em;
  }
}

/* Navigation --------------------------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.6rem;
  border: 0;
  background: none;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
  transition:
    transform var(--dur) var(--ease),
    opacity 120ms linear,
    background-color var(--dur) var(--ease);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(6.5px) 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(-6.5px) rotate(-45deg);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 0.4rem + 1.6vw, 2.25rem);
  margin: 0;
}

.site-nav__link {
  position: relative;
  display: inline-block;
  /* Generous vertical padding keeps the tap target at 44px without pushing the
     underline away from the text — see the offset on ::after below. */
  padding-block: 0.68rem;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0.5rem;
  height: 1px;
  background: currentcolor;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0.7;
  transition: transform var(--dur) var(--ease);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

@media (max-width: 59.999em) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    place-items: center;
    padding: var(--space-2xl) var(--gutter);
    background: var(--ink-deep);
    color: var(--sand);
    visibility: hidden;
    opacity: 0;
    transition:
      opacity var(--dur) var(--ease),
      visibility 0s linear var(--dur);
  }

  .site-nav[data-open='true'] {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s, 0s;
  }

  .site-nav__list {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  .site-nav__link {
    font-family: var(--font-display);
    font-size: var(--step-3);
    letter-spacing: 0.08em;
    text-transform: none;
  }

  .site-nav__close {
    position: absolute;
    top: 1.15rem;
    right: max(var(--gutter), 1.25rem);
  }

  .site-nav__close .nav-toggle__bar {
    background: var(--sand);
  }
}

@media (min-width: 60em) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: block;
  }
}

/* Body scroll lock while the mobile menu is open. */
body[data-nav-open='true'] {
  overflow: hidden;
}

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

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(88svh, 48rem);
  padding-top: 8rem;
  padding-bottom: var(--space-2xl);
  background: var(--ink-deep);
  color: var(--sand);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* <picture> is inline by default, so it has to be told to fill the media box —
   otherwise the photograph sizes to its own ratio and leaves a gap. */
.hero__media picture,
.hero__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  object-fit: cover;
  background: var(--ink-deep);
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* A wash from the left carries the headline, so the water on the right stays
     clear instead of the whole photograph being dimmed to make text readable. */
  background:
    linear-gradient(to right, rgb(6 18 30 / 55%) 0%, rgb(6 18 30 / 32%) 32%, rgb(6 18 30 / 0%) 66%),
    linear-gradient(
      to top,
      rgb(6 18 30 / 60%) 0%,
      rgb(6 18 30 / 24%) 40%,
      rgb(6 18 30 / 12%) 76%,
      rgb(6 18 30 / 30%) 100%
    );
}

.hero__content {
  max-width: 40ch;
}

.hero__title {
  font-size: var(--step-6);
  line-height: 1.02;
}

.hero__title em {
  display: block;
  font-style: italic;
  color: var(--gold-soft);
}

.hero__lede {
  max-width: 46ch;
  margin-top: var(--space-md);
  font-size: var(--step-1);
  line-height: 1.5;
  color: #e6ded2;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* The headline is deliberately narrow, but the buttons should still sit on one
   row once there is space, so they are allowed past the text measure. */
@media (min-width: 40em) {
  .hero__actions {
    width: max-content;
    max-width: min(38rem, 100vw - var(--gutter) * 2);
  }
}

.hero__rule {
  width: 9rem;
  margin-bottom: var(--space-md);
  color: var(--gold-soft);
}

/* Page hero (smaller, for interior pages) ---------------------------------- */

/* Its own padding plus the height of the fixed header, so the navy block starts
   flush beneath the bar rather than leaving a strip of page background. */
.page-hero {
  padding-top: calc(var(--header-h) + var(--section-y) * 0.75);
  padding-bottom: calc(var(--section-y) * 0.6);
  background: var(--ink-deep);
  color: var(--sand);
}

/* For a page that opens with a plain section rather than a page hero. */
.section--first {
  padding-top: calc(var(--header-h) + var(--section-y));
}

.page-hero__title {
  font-size: var(--step-5);
}

.page-hero__lede {
  max-width: 54ch;
  margin-top: var(--space-md);
  color: #c8d5e0;
  font-size: var(--step-1);
  line-height: 1.55;
}

.page-hero__rule {
  width: 108px;
  margin-bottom: var(--space-md);
  color: var(--gold-soft);
}

/* Property cards ----------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--space-xl) var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 40em) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68em) {
  .card-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* For sets of four, so the last card never sits alone on its own row. */
@media (min-width: 62em) {
  .card-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg) var(--space-md);
  }
}

.stay-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.stay-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sand-deep);
}

/* <picture> is block-level but sizes to the image's own ratio, so it has to be
   told to fill the fixed-ratio frame or the photo leaves a strip of background. */
.stay-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.stay-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.stay-card:hover .stay-card__media img {
  transform: scale(1.035);
}

.stay-card__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: 0.4rem 0.85rem;
  background: var(--sand);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stay-card__badge--soon {
  background: var(--gold);
  color: #22160a;
}

.stay-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: var(--space-md);
}

.stay-card__place {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--gold-deep);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.section--dark .stay-card__place {
  color: var(--gold-soft);
}

.stay-card__title {
  margin-top: 0.55rem;
  font-size: var(--step-2);
}

.stay-card__title a {
  text-decoration: none;
}

/* The whole card is clickable, but only the title is a real link, so the
   accessible name and tab order stay correct. */
.stay-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.stay-card__summary {
  margin-top: 0.65rem;
  color: var(--fg-muted);
  font-size: var(--step--1);
  line-height: 1.65;
}

.section--dark .stay-card__summary {
  color: #b8c8d6;
}

.stay-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
}

.section--dark .stay-card__facts {
  border-top-color: var(--line-dark);
  color: #b8c8d6;
}

.stay-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-md);
}

/* Sits above the card's full-bleed link overlay so it stays clickable. */
.stay-card__actions > * {
  position: relative;
  z-index: 2;
}

.stay-card--soon .stay-card__media {
  aspect-ratio: 4 / 3;
}

/* Coming-soon placeholder -------------------------------------------------- */
/* Deliberately a branded panel, never a stock photograph, so a future home is
   never misrepresented by an unrelated image. */

.placeholder {
  display: grid;
  place-content: center;
  gap: var(--space-sm);
  height: 100%;
  padding: var(--space-lg);
  background:
    repeating-linear-gradient(-45deg, transparent 0 11px, rgb(184 144 80 / 7%) 11px 12px),
    var(--ink-deep);
  color: var(--sand);
  text-align: center;
}

.placeholder__peak {
  width: 46px;
  height: 22px;
  margin-inline: auto;
  color: var(--gold);
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.25;
}

.placeholder__text {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* Destination panels ------------------------------------------------------- */

.destination-grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 48em) {
  .destination-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.destination-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 22rem;
  padding: var(--space-lg);
  overflow: hidden;
  color: var(--sand);
  isolation: isolate;
}

.destination-card picture {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.destination-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.destination-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(6 18 30 / 84%) 8%, rgb(6 18 30 / 22%) 70%);
}

.destination-card:hover img {
  transform: scale(1.04);
}

.destination-card__title {
  font-size: var(--step-3);
}

.destination-card__title a {
  text-decoration: none;
}

.destination-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.destination-card__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--gold-soft);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.destination-card__count {
  margin-top: 0.5rem;
  color: #d8e1e9;
  font-size: var(--step--1);
}

/* Prose -------------------------------------------------------------------- */

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: var(--space-md);
}

.prose p {
  font-size: var(--step-0);
  line-height: 1.75;
}

.prose--lead p:first-child {
  font-size: var(--step-1);
  line-height: 1.6;
}

/* Property page ------------------------------------------------------------ */

.stay-hero {
  position: relative;
  background: var(--ink-deep);
}

.stay-hero picture {
  display: block;
}

.stay-hero__img {
  width: 100%;
  height: clamp(21rem, 56vw, 42rem);
  object-fit: cover;
}

/* Keeps the floating header legible over a bright photograph. */
.stay-hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 13rem;
  background: linear-gradient(to bottom, rgb(6 18 30 / 58%), rgb(6 18 30 / 0%));
  pointer-events: none;
}

.stay-intro {
  padding-block: var(--section-y) 0;
}

.stay-intro__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 62em) {
  .stay-intro__grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

.stay-title {
  font-size: var(--step-5);
}

.stay-place {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--gold-deep);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.stay-tagline {
  max-width: 34ch;
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-soft);
}

/* Key facts ---------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-lg);
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 34em) {
  .facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.facts__item {
  padding: var(--space-md) var(--space-sm);
  background: var(--bg);
  text-align: center;
}

.facts__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1;
}

.facts__label {
  display: block;
  margin-top: 0.45rem;
  color: var(--fg-muted);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Booking panel ------------------------------------------------------------ */

.booking {
  padding: var(--space-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

@media (min-width: 62em) {
  .booking {
    position: sticky;
    top: 6rem;
  }
}

.booking__title {
  font-size: var(--step-2);
}

.booking__note {
  margin-top: var(--space-xs);
  color: var(--fg-muted);
  font-size: var(--step--1);
  line-height: 1.6;
}

.booking__actions {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

.booking__disclosure {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.booking__platform {
  font-weight: 500;
  color: var(--ink);
}

/* Mobile sticky booking bar ------------------------------------------------ */

.book-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--sand);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgb(16 48 72 / 10%);
  transform: translateY(110%);
  transition: transform 260ms var(--ease);
}

.book-bar[data-visible='true'] {
  transform: translateY(0);
}

.book-bar__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
}

.book-bar__meta {
  display: block;
  color: var(--fg-muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.book-bar .btn {
  flex: none;
  min-height: 2.75rem;
  padding-inline: 1.1rem;
}

@media (min-width: 62em) {
  .book-bar {
    display: none;
  }
}

/* Keep the end of the page clear of the fixed bar on small screens. */
@media (max-width: 61.999em) {
  body.has-book-bar {
    padding-bottom: 5rem;
  }
}

/* Amenities ---------------------------------------------------------------- */

.amenity-groups {
  display: grid;
  gap: var(--space-xl) var(--space-lg);
}

@media (min-width: 44em) {
  .amenity-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 72em) {
  .amenity-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.amenity-group__title {
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.amenity-group__list {
  margin-top: var(--space-sm);
  display: grid;
  gap: 0.5rem;
  color: var(--fg-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}

.amenity-group__list li {
  display: flex;
  gap: 0.6rem;
}

.amenity-group__list li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 0.55em;
  background: var(--gold);
  transform: rotate(45deg);
}

/* Highlights --------------------------------------------------------------- */

.highlight-list {
  display: grid;
  gap: var(--space-sm);
}

@media (min-width: 40em) {
  .highlight-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.highlight-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line);
  font-size: var(--step-0);
}

.section--dark .highlight-list li {
  border-bottom-color: var(--line-dark);
}

.highlight-list svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.34em;
  color: var(--gold);
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.4;
}

/* Sleeping / nearby lists -------------------------------------------------- */

.detail-list {
  display: grid;
  gap: 0.65rem;
  color: var(--fg-muted);
  font-size: var(--step-0);
}

.detail-list li {
  display: flex;
  gap: 0.7rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--line);
}

.detail-list li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 0.6em;
  background: var(--gold);
  transform: rotate(45deg);
}

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

.gallery-grid {
  display: grid;
  gap: var(--space-2xs);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48em) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 72em) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.gallery-item {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

.gallery-item picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 500ms var(--ease),
    opacity var(--dur) var(--ease);
}

.gallery-item:hover img {
  transform: scale(1.05);
  opacity: 0.92;
}

/* Lightbox ----------------------------------------------------------------- */

/* A closed <dialog> is display:none by default; the grid below would override
   that, so the closed state has to be restated explicitly. */
.lightbox:not([open]) {
  display: none;
}

.lightbox[open] {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto;
  max-width: 100vw;
  max-height: 100svh;
  width: 100%;
  height: 100%;
  padding: var(--space-sm);
  background: rgb(6 18 30 / 96%);
  color: var(--sand);
  border: 0;
}

.lightbox::backdrop {
  background: rgb(6 18 30 / 90%);
}

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.lightbox__count {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
}

.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: none;
}

.lightbox__caption {
  padding-top: var(--space-sm);
  color: #c8d5e0;
  font-size: var(--step--1);
  line-height: 1.55;
  text-align: center;
}

.lightbox__btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(247 243 236 / 30%);
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.lightbox__btn:hover {
  background: rgb(247 243 236 / 12%);
  border-color: var(--sand);
}

.lightbox__btn svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.5;
}

.lightbox__nav {
  display: flex;
  gap: var(--space-2xs);
}

/* Related stays ------------------------------------------------------------ */

.related-grid {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 44em) {
  .related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Contact ------------------------------------------------------------------ */

.contact-grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 52em) {
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
  }
}

.contact-card {
  padding: var(--space-lg);
  background: var(--paper);
  border: 1px solid var(--line);
}

.contact-card__title {
  font-size: var(--step-2);
}

.contact-list {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.contact-list a {
  font-size: var(--step-1);
  text-decoration-color: var(--gold);
  text-underline-offset: 0.28em;
}

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

.site-footer {
  padding-block: var(--section-y) var(--space-xl);
  background: var(--ink-deep);
  color: #c3d2df;
}

.footer-grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 52em) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
  }
}

.footer-lockup {
  width: 13rem;
  height: auto;
  background: none;
}

.footer-tagline {
  margin-top: var(--space-md);
  max-width: 32ch;
  font-size: var(--step--1);
  line-height: 1.7;
}

.footer-heading {
  margin-bottom: var(--space-sm);
  color: var(--sand);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.footer-list {
  display: grid;
  gap: 0.6rem;
  font-size: var(--step--1);
}

.footer-list a {
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.footer-list a:hover {
  color: var(--gold-soft);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  justify-content: space-between;
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line-dark);
  font-size: 0.78rem;
}

.footer-disclosure {
  display: flex;
  gap: 0.6rem;
  max-width: 70ch;
  color: #9fb3c4;
  line-height: 1.7;
}

.footer-disclosure__icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.28em;
  color: var(--gold);
}

/* Notice / disclosure banner ----------------------------------------------- */

.notice {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--sand-deep);
  border-left: 2px solid var(--gold);
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.65;
}

.notice svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15em;
  color: var(--gold-deep);
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.4;
}

.section--dark .notice {
  background: rgb(247 243 236 / 6%);
  color: #c3d2df;
}

/* Filter (destination) ----------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xl);
}

.filter-bar__btn {
  min-height: 2.75rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: none;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.filter-bar__btn:hover {
  border-color: var(--ink);
}

.filter-bar__btn[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--sand);
}

/* Cross-document view transitions ------------------------------------------ */
/* Turns a normal multi-page site into a smooth, app-like navigation in browsers
   that support it. Everywhere else, links behave exactly as before. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 140ms var(--ease) both;
}

::view-transition-new(root) {
  animation: rise-in 320ms var(--ease) both;
}

/* The bar is named so it stays put across a navigation instead of cross-fading
   with the rest of the page. */
::view-transition-group(site-header) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease);
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

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

@media (prefers-reduced-motion: no-preference) {
  .hero__content > * {
    animation: rise-in 780ms var(--ease) backwards;
  }

  .hero__content > *:nth-child(1) {
    animation-delay: 80ms;
  }
  .hero__content > *:nth-child(2) {
    animation-delay: 150ms;
  }
  .hero__content > *:nth-child(3) {
    animation-delay: 220ms;
  }
  .hero__content > *:nth-child(4) {
    animation-delay: 320ms;
  }
  .hero__content > *:nth-child(5) {
    animation-delay: 420ms;
  }
}

/* Scroll reveal ------------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 560ms var(--ease),
    transform 560ms var(--ease);
  /* Set per-item by the reveal script so grid children arrive in sequence. */
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal][data-revealed='true'] {
  opacity: 1;
  transform: none;
}

/* If JavaScript never runs, content must still be visible. */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

/* Reduced motion ----------------------------------------------------------- */

@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;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  /* Browsers cross-fade view transitions by default; opt out entirely. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .stay-card:hover .stay-card__media img,
  .destination-card:hover img,
  .gallery-item:hover img {
    transform: none;
  }
}

/* Print -------------------------------------------------------------------- */

@media print {
  .site-header,
  .book-bar,
  .site-footer,
  .gallery-item,
  .btn {
    display: none;
  }
}