/* ==========================================================================
   Hotel Labels — main stylesheet
   Design language: emerald + antique gold + ivory, serif display type over
   a light sans body, generous whitespace, slow hover transitions.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------- */
:root {
  --ivory: #f8f5ee;
  --gold: #c6a15b;
  --gold-soft: #d9c08f;
  --emerald-deep: #1f3a32;

  --color-background: var(--ivory);
  --color-foreground: #16241f;
  --color-card: #faf8f3;
  --color-primary: var(--emerald-deep);
  --color-primary-foreground: var(--ivory);
  --color-secondary: #ede6d8;
  --color-secondary-foreground: var(--emerald-deep);
  --color-muted: #ede6d8;
  --color-muted-foreground: #4b5d56;
  --color-accent: var(--gold);
  --color-accent-foreground: #16241f;
  --color-border: #ddd4c0;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --shadow-elegant: 0 30px 60px -30px rgba(22, 36, 31, 0.35);
  --container-max: 1400px;
}
/* =========================================
   HERO VIDEO BACKGROUND
   ========================================= */

.hero {
    position: relative;
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: #000;
}

/* Video wrapper */
.hero__videos {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    overflow: hidden;
}

/* Individual videos */
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    /* Makes video fill the entire banner */
    object-fit: cover;
    object-position: center center;

    opacity: 0;
    visibility: hidden;

    /* Smooth transition between videos */
    transform: scale(1.02);

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease,
        transform 8s ease;
}

/* Currently playing video */
.hero__video.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1.06);
}

/* Dark overlay for readability */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.48) 42%,
            rgba(0, 0, 0, 0.20) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.18) 0%,
            rgba(0, 0, 0, 0.30) 100%
        );

    pointer-events: none;
}

/* Keep content above video */
.hero__content,
.hero__scroll {
    position: relative;
    z-index: 2;
}

/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 1200px) {

    .hero__video {
        object-position: center center;
    }

}

/* =========================================
   TABLET
   ========================================= */

@media (min-width: 768px) and (max-width: 1199px) {

    .hero {
        min-height: 100svh;
        height: 100svh;
    }

    .hero__video {
        object-position: center center;
    }

    .hero__scrim {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.70) 0%,
                rgba(0, 0, 0, 0.42) 100%
            ),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.20),
                rgba(0, 0, 0, 0.35)
            );
    }

}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .hero {
        min-height: 100svh;
        height: 100svh;
        max-height: none;
    }

    .hero__video {
        /*
         * Cover keeps the banner completely filled.
         * Nothing will stretch or look distorted.
         */
        object-fit: cover;
        object-position: center center;
    }

    .hero__scrim {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.28) 0%,
                rgba(0, 0, 0, 0.48) 45%,
                rgba(0, 0, 0, 0.76) 100%
            );
    }

}

/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    .hero {
        min-height: 100svh;
        height: 100svh;
    }

    .hero__video {
        object-position: center center;
    }

}

/* =========================================
   REDUCE MOTION ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .hero__video {
        transition: none;
        transform: none;
    }

}
/* ---- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-primary);
  margin: 0;
}
p { margin: 0; }
::selection { background: var(--gold); color: var(--emerald-deep); }

/* Accessibility helpers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--color-primary); color: var(--color-primary-foreground);
  padding: 0.75rem 1.25rem; font-size: 0.8rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---- Layout helpers ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
@media (min-width: 1024px) { .container { padding-inline: 3rem; } }

.section { padding-block: 5rem; }
@media (min-width: 1024px) { .section { padding-block: 7rem; } }
.section--tight { padding-block: 4rem; }
.section--secondary { background: rgba(237, 230, 216, 0.4); }
.section--primary { background: var(--color-primary); color: var(--color-primary-foreground); }
.section--primary h1, .section--primary h2, .section--primary h3 { color: var(--color-primary-foreground); }
.section--center { text-align: center; }

/* ---- Type utilities ------------------------------------------------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
}
.eyebrow--gold { color: var(--gold); }
.gold-rule { display: inline-block; width: 2.5rem; height: 1px; background: var(--gold); vertical-align: middle; }

.btn-ghost-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.8rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  background: transparent;
  transition: all 0.4s ease;
}
.btn-ghost-gold:hover, .btn-ghost-gold:focus-visible { background: var(--gold); color: var(--color-primary); }
.btn-ghost-gold .gold-rule { background: var(--gold); }
.btn-ghost-gold:hover .gold-rule { background: var(--color-primary); }

/* ---- Animations -------------------------------------------------------- */
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.08); } }
.animate-fade-up { animation: fade-up 1.1s ease forwards; }
.animate-fade-in { animation: fade-in 0.6s ease forwards; }
.animate-ken-burns { animation: ken-burns 14s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .animate-fade-up, .animate-fade-in, .animate-ken-burns, html { animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background-color 0.5s ease, border-color 0.5s ease;
  background: transparent;
}
.site-header.is-scrolled,
.site-header.is-open {
  background-color: rgba(248, 245, 238, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.25rem;
}
.brand { display: flex; flex-direction: column; line-height: 1; gap: 0.25rem; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ivory);
  transition: color 0.4s ease;
}
.brand__eyebrow { font-size: 0.55rem; color: var(--gold-soft); transition: color 0.4s ease; }
.site-header.is-scrolled .brand__name,
.site-header.is-open .brand__name { color: var(--color-primary); }
.site-header.is-scrolled .brand__eyebrow,
.site-header.is-open .brand__eyebrow { color: var(--gold); }

.nav-desktop { display: none; align-items: center; gap: 2rem; }
@media (min-width: 1024px) { .nav-desktop { display: flex; } }
.nav-desktop__link {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ivory);
  transition: color 0.3s ease;
  padding-block: 0.25rem;
}
.site-header.is-scrolled .nav-desktop__link { color: var(--color-primary); }
.nav-desktop__link:hover, .nav-desktop__link.active { color: var(--gold); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ivory);
}
.site-header.is-scrolled .nav-toggle,
.site-header.is-open .nav-toggle { color: var(--color-primary); }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle__icon::before { top: -7px; }
.nav-toggle__icon::after { top: 7px; }
.site-header.is-open .nav-toggle__icon { background: transparent; }
.site-header.is-open .nav-toggle__icon::before { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle__icon::after { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.5rem;
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
}
.site-header.is-open .nav-mobile { display: flex; }
@media (min-width: 1024px) { .nav-mobile { display: none !important; } }
.nav-mobile__link {
  padding-block: 0.75rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-primary);
}
.nav-mobile__link:hover, .nav-mobile__link.active { color: var(--gold); }

/* ==========================================================================
   Hero (homepage) & page hero (inner pages)
   ========================================================================== */
.hero {
  position: relative;
  height: 85vh;
  min-height: 520px;
  width: 100%;
  overflow: hidden;
}
@media (min-width: 640px) { .hero { height: 100vh; min-height: 680px; } }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(31,58,50,0.4), rgba(31,58,50,0.2) 45%, rgba(31,58,50,0.8));
}
.hero__content { position: absolute; inset: 0; display: flex; align-items: center; }
.hero__inner { max-width: 42rem; }
.hero__title { margin-top: 1.5rem; font-size: 3rem; line-height: 1.02; color: var(--ivory); }
@media (min-width: 768px) { .hero__title { font-size: 5.5rem; } }
.hero__body { margin-top: 2rem; max-width: 32rem; font-size: 1.125rem; font-weight: 300; line-height: 1.6; color: rgba(248,245,238,0.85); }
.hero__actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__link-secondary { display: inline-flex; align-items: center; gap: 0.6rem; padding: 1rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--ivory); transition: color 0.3s ease; }
.hero__link-secondary:hover { color: var(--gold); }
.hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: rgba(248,245,238,0.6); }
.hero__scroll span:first-child { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.3em; }
.hero__scroll span:last-child { height: 2.5rem; width: 1px; background: rgba(248,245,238,0.4); }

.page-hero { position: relative; height: 60vh; min-height: 420px; width: 100%; overflow: hidden; }
@media (min-width: 640px) { .page-hero { height: 65vh; } }
@media (min-width: 1024px) { .page-hero { height: 70vh; min-height: 520px; } }
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim { position: absolute; inset: 0; background: rgba(31,58,50,0.55); }
.page-hero__content { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.page-hero__inner { max-width: 42rem; padding-bottom: 3.5rem; }
@media (min-width: 1024px) { .page-hero__inner { padding-bottom: 7rem; } }
.page-hero__title { margin-top: 1.25rem; font-size: 2.5rem; line-height: 1.05; color: var(--ivory); }
@media (min-width: 640px) { .page-hero__title { font-size: 3.5rem; } }
@media (min-width: 768px) { .page-hero__title { font-size: 4.5rem; } }
.page-hero__body { margin-top: 1.5rem; max-width: 34rem; font-size: 0.95rem; line-height: 1.7; color: rgba(248,245,238,0.8); }
@media (min-width: 640px) { .page-hero__body { font-size: 1rem; } }

/* ==========================================================================
   Homepage sections
   ========================================================================== */
.intro { max-width: 1200px; margin-inline: auto; padding: 7rem 1.5rem; text-align: center; }
@media (min-width: 1024px) { .intro { padding-block: 10rem; padding-inline: 3rem; } }
.intro__quote { margin: 2rem auto 0; max-width: 48rem; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.35; color: var(--color-primary); }
@media (min-width: 768px) { .intro__quote { font-size: 2.25rem; } }
.intro__divider { margin-top: 2.5rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.intro__divider span.label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--color-muted-foreground); }

.split { background: rgba(237,230,216,0.4); }
.split__grid { display: grid; max-width: var(--container-max); margin-inline: auto; }
@media (min-width: 1024px) { .split__grid { grid-template-columns: 1fr 1fr; } }
.split__image { position: relative; height: 60vh; min-height: 420px; }
@media (min-width: 1024px) { .split__image { height: 70vh; min-height: 520px; } }
.split__image img { width: 100%; height: 100%; object-fit: cover; }
.split__copy { display: flex; align-items: center; background: var(--color-background); padding: 3rem 1.5rem; }
@media (min-width: 1024px) { .split__copy { padding: 5rem 4rem; } }
.split__copy-inner { max-width: 30rem; }
.split__copy h2 { margin-top: 1rem; font-size: 2.5rem; line-height: 1.15; }
.split__copy p { margin-top: 1.25rem; font-size: 1rem; line-height: 1.75; color: var(--color-muted-foreground); }

.pillars-head { margin-bottom: 3.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .pillars-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.pillars-head h2 { margin-top: 0.75rem; font-size: 2.75rem; line-height: 1.15; max-width: 34rem; }
.pillars-head p { max-width: 26rem; font-size: 0.9rem; line-height: 1.7; color: var(--color-muted-foreground); }

.pillars-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pillars-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pillars-grid { grid-template-columns: repeat(4, 1fr); } }
.pillar { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.pillar img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.pillar:hover img, .pillar:focus-visible img { transform: scale(1.06); }
.pillar__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(31,58,50,0.75), transparent 60%); }
.pillar__caption { position: absolute; inset-inline: 0; bottom: 0; padding: 1.5rem; }
.pillar__tag { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--gold-soft); }
.pillar__title { margin-top: 0.5rem; font-family: var(--font-display); font-size: 1.4rem; color: var(--ivory); }

.parallax-quote { position: relative; min-height: 400px; height: 60vh; display: flex; align-items: center; overflow: hidden; }
@media (min-width: 768px) { .parallax-quote { height: 70vh; min-height: 480px; } }
.parallax-quote img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.parallax-quote__scrim { position: absolute; inset: 0; background: rgba(31,58,50,0.7); }
.parallax-quote__inner { position: relative; max-width: 48rem; margin-inline: auto; padding-inline: 1.5rem; text-align: center; color: var(--ivory); }
.parallax-quote blockquote { margin: 2rem 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.75rem; line-height: 1.5; }
@media (min-width: 768px) { .parallax-quote blockquote { font-size: 2.25rem; } }
.parallax-quote cite { display: block; margin-top: 2rem; font-style: normal; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.28em; color: rgba(248,245,238,0.7); }

.journal-head { margin-bottom: 3.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.journal-head h2 { margin-top: 0.75rem; font-size: 2.75rem; }
.journal-head a { display: none; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--gold); }
@media (min-width: 768px) { .journal-head a { display: block; } }
.journal-head a:hover { color: var(--color-primary); }
.journal-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .journal-grid { grid-template-columns: repeat(3, 1fr); } }
.journal-card { border-top: 1px solid var(--color-border); padding-top: 2rem; }
.journal-card__date { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--gold); }
.journal-card h3 { margin-top: 1rem; font-size: 1.5rem; line-height: 1.3; }
.journal-card p { margin-top: 1rem; font-size: 0.9rem; line-height: 1.7; color: var(--color-muted-foreground); }
.journal-card a.read-more { margin-top: 1.5rem; display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.24em; color: rgba(31,58,50,0.7); }
.journal-card a.read-more:hover { color: var(--gold); }

/* ==========================================================================
   About page
   ========================================================================== */
.manifesto { max-width: 48rem; margin-inline: auto; padding: 6rem 1.5rem; text-align: center; }
@media (min-width: 1024px) { .manifesto { padding-block: 8rem; } }
.manifesto p { margin-top: 2rem; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.4; color: var(--color-primary); }
@media (min-width: 768px) { .manifesto p { font-size: 2.25rem; } }

.timeline-head { text-align: center; margin-bottom: 3.5rem; }
.timeline-head h2 { margin-top: 1rem; font-size: 2.75rem; }
.timeline { position: relative; }
.timeline__rail { position: absolute; left: 1rem; top: 0; height: 100%; width: 1px; background: rgba(198,161,91,0.4); }
@media (min-width: 768px) { .timeline__rail { left: 50%; } }
.timeline__list { display: flex; flex-direction: column; gap: 3.5rem; }
.timeline__row { position: relative; display: grid; gap: 1.5rem; padding-left: 3rem; }
@media (min-width: 768px) { .timeline__row { grid-template-columns: 1fr 1fr; gap: 4rem; padding-left: 0; } }
.timeline__row--reverse .timeline__text { }
@media (min-width: 768px) {
  .timeline__row--reverse .timeline__text { order: 2; text-align: left; padding-left: 4rem; }
  .timeline__row:not(.timeline__row--reverse) .timeline__text { text-align: right; padding-right: 4rem; }
}
.timeline__year { font-family: var(--font-display); font-size: 2.75rem; color: var(--gold); }
.timeline__text h3 { margin-top: 0.5rem; font-size: 1.5rem; }
.timeline__text p { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.7; color: var(--color-muted-foreground); white-space: pre-line; }
.timeline__dot { position: absolute; left: 0.65rem; top: 0.2rem; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--color-background); }
@media (min-width: 768px) { .timeline__dot { left: 50%; transform: translateX(-50%); } }

.values-grid { display: grid; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .values-grid { grid-template-columns: 1fr 1.2fr; } }
.values-image { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.values-image img { width: 100%; height: 100%; object-fit: cover; }
.values-list { margin-top: 2.5rem; display: grid; gap: 2rem; }
.value-item { border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
.value-item h3 { font-size: 1.5rem; }
.value-item p { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.7; color: var(--color-muted-foreground); }

/* ==========================================================================
   Rooms page
   ========================================================================== */
.room-list { display: flex; flex-direction: column; gap: 6rem; }
.room { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .room { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.room__image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.room__image img { width: 100%; height: 100%; object-fit: cover; }
.room--reverse .room__image { order: 2; }
.room__name { margin-top: 1rem; font-size: 2.75rem; line-height: 1.15; }
.room__meta { margin-top: 1.5rem; display: flex; gap: 2rem; border-block: 1px solid var(--color-border); padding-block: 1rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-muted-foreground); }
.room__meta-label { font-size: 0.6rem; color: var(--gold); }
.room__meta-value { margin-top: 0.25rem; color: var(--color-primary); }
.room__body { margin-top: 2rem; font-size: 1rem; line-height: 1.75; color: var(--color-muted-foreground); }
.room__features { margin-top: 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; font-size: 0.9rem; color: rgba(31,58,50,0.8); }
.room__features li { display: flex; align-items: center; gap: 0.5rem; }
.room__features li::before { content: ""; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* ==========================================================================
   Dining / Experiences card grids
   ========================================================================== */
.venue-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .venue-grid { grid-template-columns: repeat(3, 1fr); } }
.venue-card__image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.venue-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.venue-card:hover .venue-card__image img { transform: scale(1.05); }
.venue-card__kind { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--gold); margin-top: 1.5rem; }
.venue-card__name { margin-top: 0.5rem; font-size: 1.75rem; }
.venue-card__hours { margin-top: 0.25rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-muted-foreground); }
.venue-card__body { margin-top: 1rem; font-size: 0.9rem; line-height: 1.7; color: var(--color-muted-foreground); }

.founders-table { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .founders-table { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.founders-table h2 { margin-top: 1rem; font-size: 2.75rem; line-height: 1.15; }
.founders-table p { margin-top: 1.5rem; font-size: 1rem; line-height: 1.75; color: var(--color-muted-foreground); }
.founders-table__image { aspect-ratio: 4 / 5; overflow: hidden; }
.founders-table__image img { width: 100%; height: 100%; object-fit: cover; }

.experience-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .experience-grid { grid-template-columns: 1fr 1fr; } }
.experience-card:nth-child(even) { }
@media (min-width: 768px) { .experience-card:nth-child(even) { margin-top: 6rem; } }
.experience-card__image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.experience-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.experience-card:hover .experience-card__image img { transform: scale(1.05); }
.experience-card__scrim { position: absolute; inset-inline: 0; bottom: 0; padding: 2rem; background: linear-gradient(to top, rgba(31,58,50,0.8), transparent); }
.experience-card__tag { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--gold-soft); }
.experience-card__title { margin-top: 0.5rem; font-size: 1.75rem; color: var(--ivory); }
.experience-card__body { margin-top: 1.5rem; max-width: 28rem; font-size: 0.9rem; line-height: 1.7; color: var(--color-muted-foreground); }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem;
  border-block: 1px solid var(--color-border); padding-block: 1.5rem;
}
.gallery-filters button {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.28em;
  color: rgba(31,58,50,0.6); transition: color 0.3s ease;
}
.gallery-filters button:hover { color: var(--color-primary); }
.gallery-filters button.active { color: var(--gold); }

.gallery-grid {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 220px;
  gap: 0.75rem;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; } }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; } }
@media (min-width: 1280px) { .gallery-grid { grid-auto-rows: 260px; } }

.gallery-item {
  position: relative; display: block; width: 100%; height: 100%;
  overflow: hidden; background: var(--color-secondary);
}
.gallery-item--wide { grid-column: span 1; }
@media (min-width: 768px) {
  .gallery-item--big { grid-column: span 2; grid-row: span 2; }
  .gallery-item--wide { grid-column: span 2; }
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.06); }
.gallery-item__scrim { position: absolute; inset: 0; background: rgba(31,58,50,0); transition: background-color 0.5s ease; }
.gallery-item:hover .gallery-item__scrim { background: rgba(31,58,50,0.4); }
.gallery-item__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
}
.gallery-item__play span {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  border: 1px solid rgba(248,245,238,0.7); background: rgba(31,58,50,0.4); color: var(--ivory);
  font-size: 1.1rem;
}
.gallery-item__caption {
  position: absolute; inset-inline: 0; bottom: 0; padding: 1rem;
  background: linear-gradient(to top, rgba(31,58,50,0.9), transparent);
  text-align: left;
}
.gallery-item__cat { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--gold-soft); }
.gallery-item__title { margin-top: 0.25rem; font-family: var(--font-display); font-size: 1.05rem; color: var(--ivory); }
.gallery-item[hidden] { display: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center;
  background: rgba(31,58,50,0.95); padding: 1rem;
}
.lightbox.is-open { display: flex; }
.lightbox__close {
  position: absolute; top: 1rem; right: 1rem; color: var(--ivory); font-size: 1.75rem; line-height: 1;
}
.lightbox__close:hover { color: var(--gold); }
.lightbox__body { width: 100%; max-width: 90vw; text-align: center; }
.lightbox__media { margin-inline: auto; max-height: 75vh; max-width: 100%; object-fit: contain; }
.lightbox__caption { margin-top: 1rem; }
.lightbox__cat { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--gold-soft); }
.lightbox__title { margin-top: 0.25rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--ivory); }
.lightbox__video-wrap { position: relative; max-width: 56rem; margin-inline: auto; aspect-ratio: 16/9; }
.lightbox__video-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-grid { display: grid; gap: 4rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1.2fr; } }
.directory h2 { margin-top: 1rem; font-size: 2.5rem; }
.directory-item { border-top: 1px solid var(--color-border); padding-top: 1.5rem; margin-top: 2rem; }
.directory-item:first-of-type { margin-top: 2.5rem; }
.directory-item__label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--gold); }
.directory-item div, .directory-item address { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.7; color: rgba(31,58,50,0.8); }
.directory-item a:hover { color: var(--gold); }

.contact-form-wrap { background: rgba(237,230,216,0.4); padding: 2rem; }
@media (min-width: 1024px) { .contact-form-wrap { padding: 3.5rem; } }
.contact-form-wrap h2 { margin-top: 1rem; font-size: 2.5rem; }

.form-grid { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.form-row { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field label {
  display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.28em; color: var(--gold);
}
.field input, .field select, .field textarea {
  margin-top: 0.5rem; width: 100%; border: none; border-bottom: 1px solid rgba(31,58,50,0.3);
  background: transparent; padding-block: 0.75rem; font: inherit; color: var(--color-primary);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.field textarea { resize: vertical; min-height: 8rem; }
.field-error { margin-top: 0.4rem; font-size: 0.78rem; color: #a13a2c; }
.form-success { margin-top: 2.5rem; border: 1px solid var(--gold); padding: 2rem; text-align: center; }
.form-success h3 { font-size: 1.75rem; }
.form-success p { margin-top: 0.75rem; font-size: 0.9rem; color: var(--color-muted-foreground); }
.form-alert { margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid #a13a2c; color: #a13a2c; font-size: 0.85rem; }

/* Honeypot field — hidden from sighted users, still reachable by bots */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-primary); color: var(--ivory); }
.footer-grid { display: grid; gap: 3rem; padding-block: 5rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); padding-block: 5rem; } }
.footer-brand { font-family: var(--font-display); font-size: 1.9rem; }
.footer-about { margin-top: 1.5rem; font-size: 0.9rem; line-height: 1.7; color: rgba(248,245,238,0.7); }
.footer-col__title { margin-bottom: 1.25rem; }
.footer-list li { margin-bottom: 0.75rem; font-size: 0.9rem; color: rgba(248,245,238,0.8); }
.footer-list a:hover { color: var(--gold); }
.footer-address { font-size: 0.9rem; line-height: 1.7; color: rgba(248,245,238,0.8); }
.footer-address a:hover { color: var(--gold); }

.newsletter-form { margin-top: 1rem; display: flex; border-bottom: 1px solid rgba(248,245,238,0.3); }
.newsletter-form input {
  flex: 1; border: none; background: transparent; padding-block: 0.5rem;
  font: inherit; color: var(--ivory);
}
.newsletter-form input::placeholder { color: rgba(248,245,238,0.4); }
.newsletter-form input:focus { outline: none; }
.newsletter-form button {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.24em; color: var(--gold);
}
.newsletter-form button:hover { color: var(--ivory); }
.newsletter-message { margin-top: 0.75rem; font-size: 0.8rem; color: var(--gold-soft); min-height: 1.2em; }

.footer-bottom {
  display: flex; flex-direction: column; gap: 1rem;
  border-top: 1px solid rgba(248,245,238,0.15); padding-block: 2rem;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(248,245,238,0.5);
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ==========================================================================
   404 page
   ========================================================================== */
.error-page {
  min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 2rem;
}
.error-page h1 { margin-top: 1rem; font-size: 4rem; }
.error-page p { margin-top: 1rem; font-size: 0.9rem; color: var(--color-muted-foreground); }