/* ============================================================================
   Safari Heirloom — Section styles (mobile-first, fluid). Depends on the
   tokens/base/materials layers.
   ========================================================================== */

/* ---------- Header (glass chrome) ----------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  padding-top: env(safe-area-inset-top);
}
/* Glass lives on a pseudo-element, NOT on .site-header itself. A backdrop-filter
   on the header would establish a containing block for its fixed descendants,
   trapping the mobile nav drawer in a ~65px box so its links spill over the page
   unreadable. On ::before the header element stays filter-free and the fixed
   drawer escapes to the viewport (full-height, opaque, legible). */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-glass);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header::before { background: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header::before { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.site-header__inner { display: flex; align-items: center; gap: var(--space-md);
  min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand__mark { border-radius: 8px; }
/* one confident single-line wordmark on phone AND desktop (never a mid-phrase wrap) */
.brand__name { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 0.86rem + 0.6vw, 1.3rem);
  letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.brand__name em { color: var(--brand); font-style: normal; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: clamp(0.75rem, 2vw, 1.75rem); list-style: none; }
.nav__list a { color: var(--ink-soft); text-decoration: none; font-weight: 500; padding: 0.5rem 0; }
.nav__list a:hover { color: var(--brand); }
.site-header__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.nav + .site-header__actions { margin-left: var(--space-md); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill);
  background: transparent; border: 1px solid transparent; color: var(--ink-soft); cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-settle),
              color var(--dur-base) var(--ease-settle),
              transform var(--dur-micro) var(--ease-settle);
}
.icon-btn:hover { background: var(--sunk); color: var(--ink); }
.icon-btn:active { transform: scale(0.92); }
.theme-toggle-icons { position: relative; }
#theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] #theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] #theme-toggle .icon-moon { display: block; }
.menu-btn { display: none; }
.nav__cta { display: none; }   /* drawer-only CTA; the header nav__book serves desktop */

/* ---------- Hero ---------------------------------------------------------- */
.hero { position: relative; min-height: 92svh; display: flex; align-items: flex-end;
  overflow: clip; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
/* slow one-shot ken-burns settle — cinematic "arrival"; transform-only, no CLS */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  transform-origin: 50% 32%; animation: hero-settle 26s var(--ease-settle) both; }
@keyframes hero-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; transform: none; } }
/* regraded scrim: eased multi-stop + soft bottom-centre vignette — grades the
   photo like film; top stays clear so Kilimanjaro reads */
.hero__scrim { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(125% 85% at 50% 108%, rgba(18,12,7,0.55), rgba(18,12,7,0) 60%),
    linear-gradient(to top,
      rgba(18,12,7,0.88) 0%, rgba(18,12,7,0.72) 14%, rgba(18,12,7,0.46) 32%,
      rgba(18,12,7,0.22) 52%, rgba(18,12,7,0.07) 74%, rgba(18,12,7,0) 100%); }
/* whisper of film grain — sits above the scrim (z:-1), below content; hides banding */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px; opacity: 0.06; mix-blend-mode: overlay; }
@media (prefers-reduced-transparency: reduce) { .hero::after { display: none; } }
.hero__content { padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 8vw, 6rem); color: #fff; }
.hero__eyebrow { color: var(--gold-lifted); text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.hero__title { color: #fff; font-size: var(--fs-5); font-weight: 700; max-width: 16ch;
  line-height: var(--lh-display); letter-spacing: var(--tracking-display);
  text-shadow: 0 2px 24px rgba(0,0,0,0.35); }
.hero__lead { color: rgba(255,255,255,0.94); font-size: var(--fs-1); max-width: 40ch;
  line-height: var(--lh-lead); margin-top: var(--space-md);
  text-shadow: 0 1px 12px rgba(0,0,0,0.4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-lg); }
.hero__cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 10px rgba(0,0,0,0.45); }
.hero__cta .btn-ghost:hover { background: rgba(255,255,255,0.14); color: #fff;
  border-color: rgba(255,255,255,0.8); }
.hero__trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none;
  margin-top: var(--space-lg); font-size: var(--fs--1); color: rgba(255,255,255,0.9); }
.hero__trust li { display: flex; align-items: center; gap: 0.4rem; }
.hero__trust li:first-child span[aria-hidden] { color: var(--gold-lifted); }
@media (min-width: 48rem) {
  .hero__trust li + li::before { content: ""; flex: none; width: 3px; height: 3px;
    border-radius: 50%; background: currentColor; opacity: 0.55; margin-right: 0.5rem; }
}

/* ---------- Section heads ------------------------------------------------- */
.section-head { margin-bottom: clamp(var(--space-xl), 5vw, var(--space-2xl)); }
.section-head.center { max-width: 44rem; margin-inline: auto; }
.section-head .lead { margin-top: var(--space-md); }

/* ---------- About / Location (2-col) -------------------------------------- */
.about { display: grid; gap: var(--space-xl); align-items: center; }
.about__copy .lead { margin-top: var(--space-sm); }
.about__copy p + p, .about__copy .lead + p { margin-top: var(--space-md); }
.about__copy .btn { margin-top: var(--space-lg); }
.about__media img { border-radius: var(--r-sheet);
  box-shadow: var(--shadow-raised), 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
  width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.facts { margin-top: var(--space-md); display: grid; gap: 0.75rem; }
.facts > div { display: grid; gap: 0.1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.facts dt { font-size: var(--fs--1); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.facts dd { font-weight: 500; }

/* ---------- Carousel ------------------------------------------------------ */
.carousel { position: relative; }
.carousel__viewport { display: flex; gap: var(--space-md); overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding-bottom: 0.5rem; border-radius: var(--r-sheet); }
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__slide { position: relative; flex: 0 0 92%; scroll-snap-align: center; margin: 0; }
.carousel__slide img { width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--r-sheet);
  box-shadow: var(--shadow-raised), 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.carousel__slide figcaption { position: absolute; left: 1rem; bottom: 1rem;
  background: var(--glass-tint); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink); padding: 0.4rem 0.9rem; border-radius: var(--r-pill);
  font-size: var(--fs--1); font-weight: 600;
  border: 1px solid var(--glass-edge);
  box-shadow: 0 1px 0 var(--glass-edge) inset, 0 6px 16px -6px rgba(28,23,20,0.40); }
.carousel__btn { position: absolute; top: 40%; transform: translateY(-50%);
  width: 3rem; height: 3rem; border-radius: var(--r-pill); border: none; cursor: pointer;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow-raised);
  display: none; align-items: center; justify-content: center; }
.carousel__btn:hover { background: var(--brand-tint); color: var(--brand); }
.carousel__btn--prev { left: -1rem; }
.carousel__btn--next { right: -1rem; }
.carousel__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--space-md); }
.carousel__dots button { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: none; cursor: pointer;
  background: var(--line); padding: 0;
  transition: width var(--dur-base) var(--ease-luxe), background-color var(--dur-base) var(--ease-settle); }
.carousel__dots button[aria-selected="true"] { background: var(--brand); width: 1.5rem; border-radius: var(--r-pill); }

/* ---------- Amenities ----------------------------------------------------- */
.amenities { list-style: none; display: grid; gap: var(--space-lg);
  grid-template-columns: 1fr; }
.amenity { text-align: left; }
/* enamel-tile emboss — lit top edge + hairline, warm amber gradient */
.amenity__icon { display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-bottom: 0.85rem; border-radius: var(--r-input);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--brand-tint) 88%, #ffffff),
    color-mix(in srgb, var(--brand-tint) 78%, var(--brand)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand); }
.amenity__icon svg { width: 1.6rem; height: 1.6rem; }
.amenity h3 { font-size: var(--fs-2); font-weight: 500; margin-bottom: 0.25rem; }
.amenity p { color: var(--ink-soft); }

/* ---------- Gallery ------------------------------------------------------- */
.gallery { list-style: none; display: grid; gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr); }
.gallery button { display: block; width: 100%; padding: 0; border: none; cursor: pointer;
  border-radius: var(--r-card); overflow: clip; background: var(--sunk);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover;
  transition: transform var(--dur-base) var(--ease-settle); }
.gallery button:hover img { transform: scale(1.05); }
.gallery li:first-child { grid-column: span 2; }
.gallery li:first-child img { aspect-ratio: 16/10; }

/* ---------- Reviews (hung pull-quotes) ------------------------------------ */
.reviews { list-style: none; display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.review blockquote { font-family: var(--font-accent); font-style: italic;
  font-size: var(--fs-2); line-height: 1.3; letter-spacing: 0.005em;
  color: var(--ink); text-wrap: pretty; text-indent: -0.4em; }
.review__by { margin-top: var(--space-md); font-weight: 600; color: var(--brand); font-size: var(--fs--1); }

/* ---------- Contact CTA --------------------------------------------------- */
.contact { background: var(--brand-tint); }
.contact__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: var(--space-lg); }

/* ---------- Footer -------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.86);
  padding-top: var(--space-2xl); margin-top: var(--space-2xl); }
:root[data-theme="dark"] .site-footer { background: #050505; border-top: 1px solid var(--line); }
.site-footer__grid { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.site-footer .brand__name--footer { color: #fff; font-size: var(--fs-2); display: inline-block; margin-bottom: 0.5rem; }
.site-footer .muted { color: rgba(255,255,255,0.6); }
.site-footer__h { font-size: var(--fs--1); text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6); margin-bottom: 0.75rem; font-family: var(--font-body); font-weight: 600; }
.site-footer ul { list-style: none; display: grid; gap: 0.5rem; }
.site-footer a { color: rgba(255,255,255,0.86); text-decoration: none; }
.site-footer a:hover { color: var(--brand-on-dark); }
.site-footer__base { border-top: 1px solid rgba(255,255,255,0.12); margin-top: var(--space-xl);
  padding-block: var(--space-lg); }

/* ---------- Modal (booking) ----------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center;
  padding: var(--gutter); }
.modal__scrim { position: absolute; inset: 0; background: var(--scrim);
  animation: fade-in var(--dur-base) var(--ease-settle); }
.modal__panel { position: relative; width: min(38rem, 100%); max-height: 90svh; overflow-y: auto;
  padding: clamp(1.25rem, 4vw, 2rem); animation: pop var(--dur-slow) var(--ease-luxe); }
.modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
.modal__head h2 { font-size: var(--fs-3); }
.grid-2 { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
@keyframes pop { from { opacity: 0; transform: translateY(1rem) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal__panel { animation: none; } }

/* ---------- Lightbox ------------------------------------------------------ */
.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem;
  background: rgba(10, 8, 6, 0.92); padding: clamp(0.5rem, 3vw, 2rem);
  animation: fade-in var(--dur-base) var(--ease-settle); }
.lightbox__figure { grid-column: 2; margin: 0; display: grid; place-items: center; gap: 0.75rem; }
.lightbox__img { max-width: 100%; max-height: 82svh; width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-card); animation: lb-in var(--dur-slow) var(--ease-luxe); }
@keyframes lb-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
.lightbox__cap { color: rgba(255,255,255,0.85); font-size: var(--fs--1); text-align: center; }
.lightbox .icon-btn { color: #fff; background: rgba(255,255,255,0.1); }
.lightbox .icon-btn:hover { background: rgba(255,255,255,0.22); }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; }
.lightbox__nav--prev { grid-column: 1; }
.lightbox__nav--next { grid-column: 3; }

/* ==========================================================================
   Responsive — desktop enhancements
   ========================================================================== */
@media (min-width: 48rem) {
  .amenities { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery li:first-child { grid-column: span 2; grid-row: span 2; }
  .gallery li:first-child img { aspect-ratio: auto; height: 100%; }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .carousel__slide { flex-basis: 46rem; max-width: 88%; }
}

/* staggered reveal for grid rows (desktop only; specificity 0,0,3 beats
   .reveal.is-visible so the delay lands; mobile reveals one-by-one on scroll) */
@media (min-width: 48rem) {
  .amenities .reveal:nth-child(2), .reviews .reveal:nth-child(2) { animation-delay: var(--reveal-stagger); }
  .amenities .reveal:nth-child(3), .reviews .reveal:nth-child(3) { animation-delay: calc(var(--reveal-stagger) * 2); }
  .amenities .reveal:nth-child(4) { animation-delay: calc(var(--reveal-stagger) * 3); }
  .amenities .reveal:nth-child(5) { animation-delay: calc(var(--reveal-stagger) * 4); }
  .amenities .reveal:nth-child(6) { animation-delay: calc(var(--reveal-stagger) * 5); }
}

@media (min-width: 62rem) {
  .about {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: clamp(var(--space-xl), 4vw, var(--space-2xl));
  }
  .about--reverse { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .about--reverse .about__copy { order: 2; }
  .amenities { grid-template-columns: repeat(3, 1fr); }
  .carousel__btn { display: inline-flex; }
}

/* Mobile nav drawer (< 62rem) */
@media (max-width: 61.999rem) {
  .menu-btn { display: inline-flex; }
  .nav { position: fixed; inset: 0 0 0 auto; width: min(20rem, 82vw);
    background: var(--paper); box-shadow: var(--shadow-raised); margin: 0;
    transform: translateX(100%);
    /* visibility flips to hidden only AFTER the slide-out finishes, so the closed
       drawer is inert (unfocusable) yet still animates. */
    visibility: hidden; pointer-events: none;
    transition: transform var(--dur-base) var(--ease-settle), visibility 0s linear var(--dur-base);
    padding: calc(env(safe-area-inset-top) + 5rem) var(--gutter) var(--gutter); z-index: var(--z-modal); }
  .nav.is-open { transform: none; visibility: visible; pointer-events: auto;
    transition: transform var(--dur-base) var(--ease-settle), visibility 0s; }
  .nav__list { flex-direction: column; gap: 0.25rem; }
  .nav__list a { display: block; padding: 0.85rem 0; font-size: var(--fs-1); border-bottom: 1px solid var(--line); }
  /* below the header (drawer is confined to the header's stacking context, so a
     modal-level backdrop would paint OVER the drawer); above all page content. */
  .nav-backdrop { position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--z-nav) - 1);
    animation: fade-in var(--dur-base) var(--ease-settle); }
  .nav__book { display: none; }   /* the Inquire CTA lives in the drawer + hero on mobile */
  .nav__list li:last-child a { border-bottom: none; }
  .nav__list .nav__cta { display: block; margin-top: var(--space-md); }
  .nav__list .nav__cta a { border-bottom: none; width: 100%; justify-content: center;
    padding: 0.9rem 1rem; color: var(--on-brand); font-size: var(--fs-0); }
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* Small phones — stack CTAs edge-to-edge, calm the hero density */
@media (max-width: 30rem) {
  .hero__cta, .contact__cta { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .hero__cta .btn, .contact__cta .btn { width: 100%; }
  .hero__content { padding-block: clamp(1.75rem, 6vw, 3rem) clamp(2.25rem, 8vw, 4rem); }
  .hero__lead { font-size: var(--fs-0); max-width: 34ch; margin-top: var(--space-sm); }
  .hero__trust { margin-top: var(--space-md); gap: 0.35rem 1.1rem; }
}