:root {
  --lux-bg: #f3f0ea;        /* bone */
  --lux-bg-alt: #e9e4d9;    /* linen */
  --lux-ink: #262320;       /* near-black umber */
  --lux-ink-soft: #6d675c;  /* stone */
  --lux-accent: #756e5b;    /* dry moss */
  --lux-line: #d8d1c2;
  --lux-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --lux-sans: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --lux-space-1: .5rem;  --lux-space-2: 1rem;   --lux-space-3: 2rem;
  --lux-space-4: 3.5rem; --lux-space-5: 6rem;   --lux-space-6: 9rem;
  --lux-space-7: 14rem;
  --lux-measure: 38rem;
}

/* luxury skin — Aman-grade: whitespace-first, editorial serif display,
   quiet sans detail. Hierarchy from type and air, never from boxes. */

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

html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--lux-sans);
  font-size: 1rem;
  color: var(--lux-ink);
  background: var(--lux-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--lux-serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 var(--lux-space-2);
}

p { margin: 0 0 var(--lux-space-2); }

a { color: var(--lux-ink); text-decoration: none; transition: color .25s ease; }
a:hover { color: var(--lux-accent); }
a:focus-visible, button:focus-visible {
  outline: 1px solid var(--lux-accent);
  outline-offset: 4px;
}

img { display: block; }

/* ── Nav — a quiet line, brand in serif, links in tracked small caps ──────── */

.lux-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lux-space-2) var(--lux-space-3);
  padding: var(--lux-space-2) var(--lux-space-4);
  border-bottom: 1px solid var(--lux-line);
  background: var(--lux-bg);
}

.lux-brand {
  font-family: var(--lux-serif);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--lux-ink);
}

.lux-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lux-space-2) var(--lux-space-3);
}

.lux-nav-links a {
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lux-ink-soft);
}

.lux-nav-links a:hover { color: var(--lux-ink); }

/* ── Display type ─────────────────────────────────────────────────────────── */

.lux-display {
  font-family: var(--lux-serif);
  font-weight: 300;
  font-size: clamp(3rem, 5.5vw, 4.25rem);
  letter-spacing: .01em;
  line-height: 1.05;
  color: var(--lux-ink);
  margin: 0 0 var(--lux-space-2);
}

.lux-sub {
  font-family: var(--lux-sans);
  font-size: .8125rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--lux-ink-soft);
  margin: 0;
}

/* ── Hero — full-bleed, copy held low, legible over a soft ink scrim ──────── */

.hero { position: relative; }

.hero:not(.has-media) {
  background: var(--lux-bg-alt);
  text-align: center;
  padding: var(--lux-space-6) var(--lux-space-4);
}

.hero.has-media {
  min-height: 84vh;
  display: flex;
  align-items: flex-end;
}

.hero.has-media .hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero.has-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(38, 35, 32, .58),
    rgba(38, 35, 32, .10) 55%,
    rgba(38, 35, 32, 0));
}

.hero-copy {
  position: relative;
  z-index: 1;
  padding: var(--lux-space-5) var(--lux-space-4);
}

.hero.has-media .lux-display {
  font-size: clamp(3rem, 7vw, 5.25rem);
  color: var(--lux-bg);
}

.hero.has-media .lux-sub { color: var(--lux-bg); opacity: .82; }

/* ── Home sections ────────────────────────────────────────────────────────── */

.photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lux-space-2);
  max-width: 80rem;
  margin: 0 auto;
  padding: var(--lux-space-6) var(--lux-space-4) 0;
}

.photos figure { margin: 0; }

.photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.photos figcaption,
.lux-figure figcaption {
  padding-top: var(--lux-space-1);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--lux-ink-soft);
}

.reviews { padding: var(--lux-space-6) var(--lux-space-3); }

.reviews blockquote,
.lux-quotes blockquote {
  max-width: var(--lux-measure);
  margin: 0 auto;
  text-align: center;
}

.reviews blockquote p,
.lux-quotes blockquote p {
  font-family: var(--lux-serif);
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1.55;
  margin: 0 0 var(--lux-space-2);
}

.reviews cite,
.lux-quotes cite {
  font-style: normal;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lux-ink-soft);
}

.posts { padding: 0 var(--lux-space-3) var(--lux-space-6); }

.posts article {
  max-width: var(--lux-measure);
  margin: 0 auto;
  padding-top: var(--lux-space-5);
  border-top: 1px solid var(--lux-line);
  text-align: center;
}

.posts time,
.lux-journal time,
main article > time {
  display: block;
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lux-ink-soft);
  margin-bottom: var(--lux-space-1);
}

.posts h2 {
  font-size: 1.75rem;
  font-weight: 400;
  margin-bottom: var(--lux-space-2);
}

.posts p { color: var(--lux-ink-soft); margin: 0; }

/* ── Page titles ──────────────────────────────────────────────────────────── */

main h1 {
  font-family: var(--lux-serif);
  font-weight: 300;
  font-size: clamp(2.75rem, 5vw, 3.5rem);
  letter-spacing: .01em;
  line-height: 1.1;
  text-align: center;
  margin: var(--lux-space-5) auto var(--lux-space-4);
  padding: 0 var(--lux-space-3);
}

/* ── Card grid — no boxes; image, then type, aligned to one grid ──────────── */

.index-rates,
.index-experiences,
.index-dining {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--lux-space-4) var(--lux-space-6);
}

.lux-cards {
  display: grid;
  gap: var(--lux-space-4) var(--lux-space-3);
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.lux-card { display: block; color: inherit; }

.lux-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: var(--lux-space-2);
}

.lux-card h2 {
  font-size: 1.375rem;
  font-weight: 400;
  margin: 0 0 var(--lux-space-1);
  transition: color .25s ease;
}

.lux-card:hover h2 { color: var(--lux-accent); }

.lux-card-sum {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--lux-ink-soft);
  margin: 0;
}

.lux-price {
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lux-ink-soft);
  margin: 0 0 var(--lux-space-1);
}

.lux-price span { color: var(--lux-ink-soft); }

.lux-meta {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lux-ink-soft);
  margin: 0 0 var(--lux-space-1);
}

.lux-season {
  font-family: var(--lux-serif);
  font-style: italic;
  font-size: .9375rem;
  color: var(--lux-ink-soft);
  margin: 0 0 var(--lux-space-1);
}

/* ── Gallery ──────────────────────────────────────────────────────────────── */

.index-photos {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--lux-space-4) var(--lux-space-6);
}

.lux-gallery {
  display: grid;
  gap: var(--lux-space-3) var(--lux-space-2);
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}

.lux-figure { margin: 0; }

.lux-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ── Reading-measure pages: journal, reviews, policies ────────────────────── */

.index-posts,
.index-reviews,
.index-policies {
  max-width: var(--lux-measure);
  margin: 0 auto;
  padding: 0 var(--lux-space-3) var(--lux-space-6);
}

.lux-journal .lux-entry { display: block; color: inherit; }

.lux-journal .lux-entry + .lux-entry,
.lux-journal article.lux-entry + article.lux-entry { margin-top: var(--lux-space-5); }

.lux-journal h2 {
  font-size: 1.75rem;
  font-weight: 400;
  margin: 0 0 var(--lux-space-2);
  transition: color .25s ease;
}

a.lux-entry:hover h2 { color: var(--lux-accent); }

.lux-journal p { color: var(--lux-ink-soft); margin: 0; }

.lux-quotes blockquote { margin: 0 0 var(--lux-space-5); }

.lux-policy + .lux-policy { margin-top: var(--lux-space-5); }

.lux-policy h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0 0 var(--lux-space-2);
}

/* ── Detail pages — full-bleed image, then prose at measure ───────────────── */

.detail-rates,
.detail-experiences,
.detail-dining {
  max-width: var(--lux-measure);
  margin: 0 auto;
  padding: 0 var(--lux-space-3) var(--lux-space-6);
}

.detail-rates > img,
.detail-experiences > img,
.detail-dining > img {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 62vh;
  object-fit: cover;
  margin-bottom: var(--lux-space-5);
}

.detail-rates .lux-display,
.detail-experiences .lux-display,
.detail-dining .lux-display {
  font-size: clamp(2.5rem, 4.5vw, 3.25rem);
  margin-bottom: var(--lux-space-2);
}

/* ── Journal post (article page) ──────────────────────────────────────────── */

main > article {
  max-width: var(--lux-measure);
  margin: 0 auto;
  padding: 0 var(--lux-space-3) var(--lux-space-6);
}

main > article h1 { margin-top: var(--lux-space-5); }

main > article > time { text-align: center; margin-bottom: var(--lux-space-4); }

main > article .body { white-space: pre-line; }

/* ── Find us ──────────────────────────────────────────────────────────────── */

.static-find-us {
  max-width: var(--lux-measure);
  margin: 0 auto;
  padding: 0 var(--lux-space-3) var(--lux-space-6);
}

.findus-address {
  font-family: var(--lux-serif);
  font-size: 1.375rem;
  text-align: center;
  margin: 0 0 var(--lux-space-1);
}

.findus-phone, .findus-email, .findus-hours {
  text-align: center;
  color: var(--lux-ink-soft);
  margin: 0 0 var(--lux-space-1);
}

.findus-hours { margin-bottom: var(--lux-space-4); }

.static-find-us a { border-bottom: 1px solid var(--lux-line); }

/* ── Contact ──────────────────────────────────────────────────────────────── */

.static-contact {
  max-width: var(--lux-measure);
  margin: 0 auto;
  padding: 0 var(--lux-space-3) var(--lux-space-6);
}

.static-contact label {
  display: block;
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lux-ink-soft);
  margin: var(--lux-space-3) 0 var(--lux-space-1);
}

.static-contact input,
.static-contact textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--lux-line);
  border-radius: 0;
  background: transparent;
  padding: var(--lux-space-1) 0;
  font: inherit;
  color: var(--lux-ink);
}

.static-contact input:focus,
.static-contact textarea:focus {
  outline: none;
  border-bottom-color: var(--lux-ink);
}

.static-contact textarea { min-height: 10rem; resize: vertical; }

.static-contact button {
  margin-top: var(--lux-space-4);
  padding: var(--lux-space-2) var(--lux-space-4);
  background: transparent;
  border: 1px solid var(--lux-ink);
  color: var(--lux-ink);
  font-family: var(--lux-sans);
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}

.static-contact button:hover {
  background: var(--lux-ink);
  color: var(--lux-bg);
}

/* ── Footer — a whisper ───────────────────────────────────────────────────── */

footer {
  padding: var(--lux-space-4);
  border-top: 1px solid var(--lux-line);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--lux-ink-soft);
  text-align: center;
}

/* ── Small screens ────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .lux-nav { padding: var(--lux-space-2); }
  .hero-copy { padding: var(--lux-space-4) var(--lux-space-2); }
  .photos {
    grid-template-columns: 1fr;
    padding: var(--lux-space-5) var(--lux-space-2) 0;
  }
  .index-rates, .index-experiences, .index-dining, .index-photos {
    padding-left: var(--lux-space-2);
    padding-right: var(--lux-space-2);
  }
  .index-posts, .index-reviews, .index-policies,
  .detail-rates, .detail-experiences, .detail-dining,
  .static-find-us, .static-contact {
    padding-left: var(--lux-space-2);
    padding-right: var(--lux-space-2);
  }
  .detail-rates > img, .detail-experiences > img, .detail-dining > img {
    height: 48vh;
  }
  main h1 { margin: var(--lux-space-4) auto var(--lux-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}