/* ============================================================
   The Uncommon Stay — Main Stylesheet
   103½ E. Main St., West Branch, Iowa 52358
   Sonder LLC · 2026
   ============================================================

   TABLE OF CONTENTS
   1.  CSS Custom Properties (Brand Tokens)
   2.  Reset & Base
   3.  Parallax Background
   4.  Typography
   5.  Layout & Site Shell
   6.  Navigation
   7.  Gold Rule Dividers
   8.  Hero Section
   9.  Property Highlights Strip
   10. The Space Section
   11. Amenities Grid
   12. The Building Section
   13. Location Section
   14. Book Direct CTA Section
   15. About Page
   16. Book Page
   17. Contact Page
   18. Footer
   19. Utility Classes
   20. Responsive — Mobile First
   ============================================================ */

/* ── 1. Brand Tokens ─────────────────────────────────────────── */
:root {
  /* Palette */
  --us-studio-green:       #464C49;
  --us-studio-green-deep:  #363D3A;
  --us-deco-gold:          #C8973A;
  --us-hoover-ivory:       #F4EED8;
  --us-prairie-bronze:     #8B6343;
  --us-parchment:          #EDE3CC;
  --us-vault-charcoal:     #1E2220;
  --us-sky-blue-gray:      #8BAFC0;
  --us-stone-limestone:    #C8B898;
  --us-warm-brick:         #B76B4E;

  /* Semantic aliases */
  --us-page-bg:    var(--us-studio-green-deep);
  --us-surface:    var(--us-studio-green);
  --us-text:       var(--us-hoover-ivory);
  --us-muted-text: var(--us-parchment);
  --us-accent:     var(--us-deco-gold);
  --us-border:     rgba(200, 151, 58, 0.55);

  /* Parallax CSS var (updated by JS) */
  --parallax-y: 0px;

  /* Spacing */
  --us-section-pad: clamp(3rem, 6vw, 5.5rem);
  --us-content-max: 1100px;
  --us-content-narrow: 720px;

  /* Typography */
  --us-font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --us-font-body:    Georgia, 'Times New Roman', serif;
  --us-font-label:  'Cormorant Garamond', Georgia, serif;

  /* Transitions */
  --us-transition: 0.22s ease;
}

/* ── 2. Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--us-studio-green-deep);
  font-size: 16px;
}

body {
  font-family: var(--us-font-body);
  color: var(--us-hoover-ivory);
  background: var(--us-studio-green);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--us-deco-gold);
  text-decoration: none;
  transition: color var(--us-transition), opacity var(--us-transition);
}

a:hover,
a:focus-visible {
  color: var(--us-hoover-ivory);
  text-decoration: underline;
}

/* Focus styles — keyboard accessible */
:focus-visible {
  outline: 2px solid var(--us-deco-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── 3. Parallax Background ──────────────────────────────────── */
/* Fixed viewport container — overflow hidden clips the oversized pattern */
.deco-parallax {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--us-studio-green);
}

/* Pattern layer extends -30vh above/below viewport so it has travel room.
   JS drives transform: translate3d(0, Ypx, 0) — the ONLY thing iOS Safari
   composites during momentum scroll. backgroundPosition updates don't fire. */
.deco-parallax__pattern {
  position: absolute;
  inset: -30vh 0;
  background-color: var(--us-studio-green);
  background-image: url('/static/assets/patterns/deco-pattern-single.png');
  background-repeat: repeat;
  background-size: clamp(220px, 22vw, 340px) auto;
  will-change: transform;
}

/* Green overlay sits on top of the pattern */
.deco-parallax__overlay {
  position: absolute;
  inset: 0;
  background: rgba(56, 66, 59, 0.87);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .deco-parallax__pattern {
    will-change: auto;
  }
}

/* Site shell sits above the parallax layer */
.site-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── 4. Typography ────────────────────────────────────────────── */
/* Google Fonts loaded in base template — Cormorant Garamond */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--us-font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--us-deco-gold);
}

/* Section headings */
.section-heading {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: 0.12em;
  color: var(--us-deco-gold);
  margin-bottom: 1.5rem;
}

/* Light-bg sections: heading in Studio Green */
.section--light .section-heading,
.section--parchment .section-heading {
  color: var(--us-studio-green-deep);
}

.section-subheading {
  font-family: var(--us-font-body);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--us-deco-gold);
  margin-bottom: 0.75rem;
}

.section--light .section-subheading,
.section--parchment .section-subheading {
  color: var(--us-prairie-bronze);
}

p {
  margin-bottom: 1.2rem;
  color: inherit;
}

p:last-child {
  margin-bottom: 0;
}

/* Small-caps label */
.label-smallcaps {
  font-family: var(--us-font-label);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--us-stone-limestone);
}

/* ── 5. Layout & Site Shell ──────────────────────────────────── */
.section {
  padding: var(--us-section-pad) 1.5rem;
  position: relative;
}

.section--dark {
  background: rgba(54, 61, 58, 0.92);
  color: var(--us-hoover-ivory);
}

.section--studio-green {
  background: rgba(70, 76, 73, 0.94);
  color: var(--us-hoover-ivory);
}

.section--parchment {
  background: var(--us-parchment);
  color: var(--us-studio-green-deep);
}

.section--light {
  background: rgba(244, 238, 216, 0.96);
  color: var(--us-studio-green-deep);
}

.section--charcoal {
  background: rgba(30, 34, 32, 0.96);
  color: var(--us-hoover-ivory);
}

.container {
  max-width: var(--us-content-max);
  margin: 0 auto;
  padding: 0 1rem;
}

.container--narrow {
  max-width: var(--us-content-narrow);
  margin: 0 auto;
  padding: 0 1rem;
}

/* ── 6. Navigation ────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(30, 34, 32, 0.97);
  border-bottom: 1px solid var(--us-border);
  transition: background var(--us-transition);
}

.nav-inner {
  max-width: var(--us-content-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}

.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 88px;
}

.nav-logo img {
  height: 130px;
  width: auto;
  margin-top: 0;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--us-font-label);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--us-hoover-ivory);
  transition: color var(--us-transition);
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.active {
  color: var(--us-deco-gold);
  text-decoration: none;
}

/* Reserve button in nav */
.nav-cta {
  font-family: var(--us-font-label);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--us-deco-gold);
  color: var(--us-vault-charcoal) !important;
  padding: 0.55rem 1.2rem;
  border-radius: 2px;
  transition: background var(--us-transition), color var(--us-transition);
  white-space: nowrap;
  text-decoration: none !important;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--us-hoover-ivory);
  color: var(--us-studio-green-deep) !important;
}

/* Mobile hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: 5px;
}

.nav-hamburger span {
  display: block;
  height: 2px;
  background: var(--us-hoover-ivory);
  border-radius: 2px;
  transition: transform var(--us-transition), opacity var(--us-transition);
}

.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav dropdown */
.nav-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(30, 34, 32, 0.99);
  border-top: 1px solid var(--us-border);
  border-bottom: 1px solid var(--us-border);
  padding: 1rem 1.5rem 1.5rem;
  list-style: none;
}

.nav-mobile-menu.is-open {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.nav-mobile-menu li a {
  display: block;
  font-family: var(--us-font-label);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--us-hoover-ivory);
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(200, 151, 58, 0.15);
  text-decoration: none;
}

.nav-mobile-menu li:last-child a {
  border-bottom: none;
  color: var(--us-deco-gold);
}

.nav-mobile-menu li a:hover,
.nav-mobile-menu li a:focus-visible {
  color: var(--us-deco-gold);
}

/* ── 7. Gold Rule Dividers ────────────────────────────────────── */
.gold-rule {
  border: none;
  border-top: 1px solid var(--us-border);
  margin: 0;
}

.gold-rule--thick {
  border-top-width: 2px;
}

.deco-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
}

.deco-divider::before,
.deco-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--us-border);
}

.deco-divider span {
  color: var(--us-deco-gold);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.1em;
}

/* Section on parchment/light backgrounds */
.section--parchment .deco-divider::before,
.section--parchment .deco-divider::after,
.section--light .deco-divider::before,
.section--light .deco-divider::after {
  background: rgba(70, 76, 73, 0.3);
}

.section--parchment .deco-divider span,
.section--light .deco-divider span {
  color: var(--us-prairie-bronze);
}

/* ── 8. Hero Section ──────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 4rem;
  overflow: hidden;
}

/* Hero background photo */
.hero-bg {
  position: absolute;
  inset: 0;
  background-color: var(--us-studio-green-deep);
  background-image: none;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Gradient overlay: dark bottom, lighter top to read logo */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(30, 34, 32, 0.55) 0%,
    rgba(30, 34, 32, 0.30) 30%,
    rgba(30, 34, 32, 0.70) 70%,
    rgba(30, 34, 32, 0.88) 100%
  );
}

/* Deco pattern overlay on hero (very subtle) */
.hero-pattern-overlay {
  position: absolute;
  inset: 0;
  background-image: url('/static/assets/patterns/deco-pattern-single.png');
  background-repeat: repeat;
  background-size: 420px auto;
  opacity: 0.07;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.hero-logo {
  width: clamp(260px, 45vw, 420px);
  height: auto;
  margin: 0 auto 2rem;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.35));
}

.hero-location {
  font-family: var(--us-font-label);
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--us-stone-limestone);
  margin-bottom: 2.5rem;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--us-font-label);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background var(--us-transition), color var(--us-transition), border-color var(--us-transition);
  cursor: pointer;
  border: none;
}

.btn--gold {
  background: var(--us-deco-gold);
  color: var(--us-vault-charcoal);
  padding: 0.85rem 2.2rem;
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background: var(--us-hoover-ivory);
  color: var(--us-studio-green-deep);
  text-decoration: none;
}

.btn--outline {
  background: transparent;
  color: var(--us-deco-gold);
  padding: 0.75rem 1.8rem;
  border: 1px solid var(--us-deco-gold);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--us-deco-gold);
  color: var(--us-vault-charcoal);
  text-decoration: none;
}

.btn--outline-ivory {
  background: transparent;
  color: var(--us-hoover-ivory);
  padding: 0.75rem 1.8rem;
  border: 1px solid rgba(244, 238, 216, 0.5);
}

.btn--outline-ivory:hover,
.btn--outline-ivory:focus-visible {
  border-color: var(--us-hoover-ivory);
  background: rgba(244, 238, 216, 0.1);
  text-decoration: none;
}

/* ── 9. Property Highlights Strip ────────────────────────────── */
.highlights-strip {
  background: rgba(70, 76, 73, 0.97);
  border-top: 1px solid var(--us-border);
  border-bottom: 1px solid var(--us-border);
  padding: 1rem 1.5rem;
}

.highlights-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1px;
  max-width: 900px;
  margin: 0 auto;
}

.highlight-tile {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.5rem;
  border-right: 1px solid rgba(200, 151, 58, 0.2);
  text-align: center;
}

.highlight-tile:last-child {
  border-right: none;
}

.highlight-tile svg,
.highlight-tile img {
  width: 36px;
  height: 36px;
  color: var(--us-deco-gold);
  fill: var(--us-deco-gold);
}

.highlight-tile .tile-label {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--us-hoover-ivory);
  line-height: 1.3;
}

/* ── 10. The Space Section ────────────────────────────────────── */
.space-section {
  background: var(--us-parchment);
  color: var(--us-studio-green-deep);
}

/* ── Photo Carousel ─────────────────────────────────────────── */
/* Full-bleed breakout from .container */
.photo-carousel {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 2.5rem;
  /* Break out of the container to full viewport width */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.carousel-track-wrap {
  flex: 1;
  overflow: hidden;
  height: 540px;
}

.carousel-track {
  display: flex;
  gap: 0.5rem;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel-slide {
  /* Desktop: 3 visible */
  flex: 0 0 calc((100% - 2 * 0.5rem) / 3);
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.carousel-slide:hover img {
  transform: scale(1.03);
}

.carousel-arrow {
  flex-shrink: 0;
  width: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 34, 32, 0.75);
  border: none;
  color: var(--us-deco-gold);
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s;
}

.carousel-arrow:hover { background: rgba(30, 34, 32, 0.95); }
.carousel-arrow:disabled { opacity: 0.2; cursor: default; }

/* Mobile: 1 photo + peek of next */
@media (max-width: 600px) {
  .carousel-track-wrap {
    height: 380px;
  }
  .carousel-slide {
    flex: 0 0 calc(90% - 0.5rem);
  }
  .carousel-arrow {
    width: 40px;
    font-size: 1.1rem;
  }
}

.space-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

.space-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.space-photo-placeholder {
  aspect-ratio: 4/3;
  background: rgba(70, 76, 73, 0.12);
  border: 1px dashed rgba(70, 76, 73, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: rgba(70, 76, 73, 0.5);
  font-family: var(--us-font-label);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

.space-photo-placeholder svg {
  width: 28px;
  height: 28px;
  opacity: 0.4;
}

.space-photo {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 2px;
}

.space-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.space-photo img:hover {
  transform: scale(1.03);
}

/* View all photos link */
.space-gallery-link {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

.space-gallery-link .btn--outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-color: var(--us-prairie-bronze);
  color: var(--us-studio-green-deep);
  font-size: 0.82rem;
}

/* ── Lightbox gallery modal ──────────────────────────────────── */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-modal[hidden] { display: none; }

.gallery-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 28, 20, 0.93);
  cursor: pointer;
}

.gallery-modal__content {
  position: relative;
  z-index: 1;
  width: min(92vw, 900px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.gallery-modal__img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  background: #0a1c14;
  border: 1px solid rgba(182, 141, 64, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.gallery-modal__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gallery-modal__caption {
  color: var(--us-stone-limestone);
  font-family: var(--us-font-display);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.gallery-modal__close {
  position: absolute;
  top: -2.5rem;
  right: 0;
  background: none;
  border: none;
  color: var(--us-hoover-ivory);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}

.gallery-modal__prev,
.gallery-modal__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10, 28, 20, 0.7);
  border: 1px solid rgba(182, 141, 64, 0.3);
  color: var(--us-deco-gold);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  z-index: 2;
  transition: background 0.2s;
}

.gallery-modal__prev { left: -3rem; }
.gallery-modal__next { right: -3rem; }
.gallery-modal__prev:hover,
.gallery-modal__next:hover { background: rgba(10, 28, 20, 0.95); }

.gallery-modal__thumbs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.gallery-thumb {
  width: 72px;
  height: 54px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: 0.65;
  transition: opacity 0.2s, border-color 0.2s;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-thumb.active,
.gallery-thumb:hover {
  opacity: 1;
  border-color: var(--us-deco-gold);
}

/* ── Gallery modal — mobile fixes ──────────────────────────────── */
@media (max-width: 600px) {
  .gallery-modal__content {
    width: 96vw;
    gap: 0.75rem;
  }

  /* Pull arrows inside the viewport — position them inside the img-wrap */
  .gallery-modal__prev,
  .gallery-modal__next {
    font-size: 1.1rem;
    padding: 0.35rem 0.65rem;
  }
  .gallery-modal__prev { left: 0.25rem; }
  .gallery-modal__next { right: 0.25rem; }

  /* Tighten caption */
  .gallery-modal__caption {
    font-size: 0.8rem;
  }

  /* Smaller thumbnails on mobile — 4 per row, fluid width */
  .gallery-thumb {
    width: calc((96vw - 1.5rem) / 4);
    height: auto;
    aspect-ratio: 4/3;
  }
}

.space-copy--full {
  grid-column: 1 / -1;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.space-copy--full .btn { margin: 0 auto; }


  margin-bottom: 1.25rem;
}

.space-copy p {
  color: var(--us-studio-green-deep);
  font-size: 1.05rem;
  line-height: 1.75;
}

/* ── 11. Amenities Grid ───────────────────────────────────────── */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

.amenity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.amenity-item img,
.amenity-item svg {
  width: 36px;
  height: 36px;
}

/* On parchment/light sections — icons in Studio Green */
.section--parchment .amenity-item img,
.section--light .amenity-item img {
  filter: brightness(0) saturate(100%)
          invert(26%) sepia(11%) saturate(371%) hue-rotate(93deg) brightness(97%) contrast(91%);
}

/* On dark sections — icons in Deco Gold */
.section--dark .amenity-item img,
.section--studio-green .amenity-item img,
.section--charcoal .amenity-item img {
  filter: brightness(0) saturate(100%)
          invert(65%) sepia(33%) saturate(700%) hue-rotate(3deg) brightness(95%) contrast(90%);
}

.amenity-label {
  font-family: var(--us-font-label);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--us-studio-green-deep);
  line-height: 1.3;
}

.section--dark .amenity-label,
.section--studio-green .amenity-label,
.section--charcoal .amenity-label {
  color: var(--us-hoover-ivory);
}

/* ── 12. The Building Section ────────────────────────────────── */
.building-section {
  background: rgba(244, 238, 216, 0.96);
  color: var(--us-studio-green-deep);
}

.building-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

.building-poster {
  margin-bottom: 2.5rem;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}

.building-poster img {
  width: 100%;
  height: auto;
  display: block;
}

.building-photo {
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.building-photo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.building-photo-placeholder {
  aspect-ratio: 3/4;
  background: rgba(70, 76, 73, 0.1);
  border: 1px dashed rgba(70, 76, 73, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: rgba(70, 76, 73, 0.5);
  font-family: var(--us-font-label);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem;
}

.building-copy p {
  color: var(--us-studio-green-deep);
  font-size: 1.05rem;
  line-height: 1.8;
}

/* ── 13. Location Section ─────────────────────────────────────── */
.location-section {
  background: rgba(54, 61, 58, 0.96);
  color: var(--us-hoover-ivory);
}

.location-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.location-card {
  border: 1px solid var(--us-border);
  padding: 1.5rem 1.25rem;
  background: rgba(30, 34, 32, 0.35);
  transition: background var(--us-transition), border-color var(--us-transition);
}

.location-card:hover {
  background: rgba(30, 34, 32, 0.6);
  border-color: rgba(200, 151, 58, 0.8);
}

.location-card-name {
  font-family: var(--us-font-display);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--us-deco-gold);
  margin-bottom: 0.5rem;
}

.location-card-detail {
  font-size: 0.88rem;
  color: var(--us-stone-limestone);
  line-height: 1.5;
}

/* ── 14. Book Direct CTA Section ─────────────────────────────── */
.book-cta-section {
  background: rgba(30, 34, 32, 0.97);
  color: var(--us-hoover-ivory);
  text-align: center;
}

.book-cta-section .section-heading {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 1rem;
}

.book-cta-section p {
  color: var(--us-stone-limestone);
  max-width: 480px;
  margin: 0 auto 2.5rem;
}

.book-cta-platforms {
  margin-top: 1.5rem;
  font-family: var(--us-font-label);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--us-stone-limestone);
}

.book-cta-platforms a {
  color: var(--us-deco-gold);
}

/* ── 15. About Page ───────────────────────────────────────────── */
.about-hero {
  background: rgba(30, 34, 32, 0.95);
  padding: 8rem 1.5rem 4rem;
  text-align: center;
}

.about-hero .seal-logo {
  width: clamp(100px, 20vw, 160px);
  height: auto;
  margin: 0 auto 2rem;
  opacity: 0.9;
}

.about-body {
  max-width: 720px;
  margin: 0 auto;
}

.about-body p {
  font-size: 1.05rem;
  line-height: 1.85;
  margin-bottom: 1.5rem;
}

.about-body blockquote {
  border-left: 2px solid var(--us-deco-gold);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: rgba(200, 151, 58, 0.06);
}

.about-body blockquote p {
  font-style: italic;
  color: var(--us-hoover-ivory);
  margin-bottom: 0;
}

.about-body .quote-source {
  font-family: var(--us-font-label);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--us-stone-limestone);
  margin-top: 0.5rem;
}

/* ── 16. Book Page ────────────────────────────────────────────── */
.book-page-hero {
  background: rgba(30, 34, 32, 0.95);
  padding: 7rem 1.5rem 3.5rem;
  text-align: center;
}

/* ── 16b. Booking Section (simple, no frame) ──────────────────── */
.booking-section {
  background: var(--us-studio-green-deep);
  padding: 2rem 0 4rem;
}

.booking-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Simple Art Deco header */
.booking-header {
  text-align: center;
  margin-bottom: 2rem;
}

.booking-header-title {
  font-family: var(--us-font-display);
  color: var(--us-deco-gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  /* trailing letter-spacing compensation for optical centering */
  text-indent: 0.18em;
  font-weight: 600;
  font-size: clamp(1.75rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

.booking-header-divider {
  display: flex;
  justify-content: center;
  align-items: center;
}

.booking-header-divider svg {
  max-width: 240px;
  width: 60%;
  height: auto;
}

/* Widget well — sized to match Hospitable widget's natural 320px content width */
.booking-widget-well {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.booking-widget-well iframe {
  width: 100%;
  height: 520px !important;
  min-height: 520px;
  border: none;
  display: block;
  background: transparent;
  border-radius: 4px;
}

/* Platform booking buttons */
.book-platforms {
  text-align: center;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(200, 151, 58, 0.25);
}

.book-platforms--primary {
  margin-top: 3rem;
  padding-top: 0;
  border-top: none;
}

.book-platforms--primary .btn-row {
  gap: 1.5rem;
  flex-wrap: wrap;
}

.book-platforms p {
  color: var(--us-hoover-ivory);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
}

@media (max-width: 767px) {
  .booking-inner {
    padding: 0 1rem;
  }
  .booking-header-divider svg {
    width: 70%;
  }
  .book-platforms {
    padding: 1.5rem 1rem 0;
  }
}

/* ── 17. Contact Page ─────────────────────────────────────────── */
.contact-page-hero {
  background: rgba(30, 34, 32, 0.95);
  padding: 7rem 1.5rem 3.5rem;
  text-align: center;
}

.contact-section {
  background: var(--us-parchment);
  color: var(--us-studio-green-deep);
  padding: var(--us-section-pad) 1.5rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: var(--us-content-max);
  margin: 0 auto;
  align-items: start;
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-group label {
  font-family: var(--us-font-label);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--us-studio-green-deep);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(70, 76, 73, 0.35);
  background: rgba(255, 255, 255, 0.7);
  color: var(--us-studio-green-deep);
  font-family: var(--us-font-body);
  font-size: 0.95rem;
  border-radius: 2px;
  transition: border-color var(--us-transition);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--us-deco-gold);
  background: rgba(255, 255, 255, 0.9);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}

/* Honeypot — hidden from humans */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
  tab-index: -1;
}

.form-errors {
  background: rgba(183, 107, 78, 0.12);
  border: 1px solid var(--us-warm-brick);
  border-radius: 2px;
  padding: 1rem 1.25rem;
}

.form-errors li {
  color: var(--us-warm-brick);
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
  list-style: none;
}

.form-success {
  background: rgba(70, 76, 73, 0.12);
  border: 1px solid var(--us-deco-gold);
  border-radius: 2px;
  padding: 1.5rem;
  text-align: center;
}

.form-success p {
  color: var(--us-studio-green-deep);
  margin: 0;
}

/* Contact info sidebar */
.contact-info {
  padding-top: 0.5rem;
}

.contact-info-block {
  margin-bottom: 2rem;
}

.contact-info-block h3 {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--us-prairie-bronze);
  margin-bottom: 0.6rem;
}

.contact-info-block p,
.contact-info-block address {
  font-style: normal;
  font-size: 0.95rem;
  color: var(--us-studio-green-deep);
  line-height: 1.6;
}

/* ── 18. Footer ───────────────────────────────────────────────── */
.site-footer {
  background: rgba(30, 34, 32, 0.99);
  border-top: 1px solid var(--us-border);
  padding: 1.25rem 1.5rem;
  margin-top: auto;
}

.footer-inner {
  max-width: var(--us-content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.footer-address-inline {
  font-size: 0.75rem;
  color: var(--us-stone-limestone);
  letter-spacing: 0.06em;
  margin: 0;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  align-items: center;
  justify-content: center;
}

.footer-nav a {
  font-family: var(--us-font-label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--us-stone-limestone);
  transition: color 0.2s;
}

.footer-nav a:hover {
  color: var(--us-deco-gold);
}

.footer-copyright {
  font-size: 0.7rem;
  color: rgba(200, 184, 152, 0.45);
  letter-spacing: 0.08em;
  margin: 0;
}

@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
}



/* ── 19. Utility Classes ─────────────────────────────────────── */
.text-gold    { color: var(--us-deco-gold); }
.text-ivory   { color: var(--us-hoover-ivory); }
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.btn-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.btn-row--center { justify-content: center; }

/* ── 20. Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Nav: switch to hamburger */
  .nav-links {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }

  /* Grids → single column */
  .space-grid,
  .building-inner,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

}



@media (max-width: 600px) {
  :root {
    --us-section-pad: 2.5rem;
  }

  .highlights-grid {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
  }

  .highlight-tile {
    flex: 1 1 45%;
    border-right: 1px solid rgba(200, 151, 58, 0.2);
    border-bottom: 1px solid rgba(200, 151, 58, 0.2);
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    text-align: center;
    align-items: center;
  }

  .highlight-tile:last-child {
    border-bottom: none;
  }

  .space-photos {
    grid-template-columns: 1fr 1fr;
  }

  .amenities-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .deco-parallax__layer {
    background-size: 460px auto;
    opacity: 0.11;
  }

  .contact-grid {
    gap: 2.5rem;
  }

  #hospitable-booking-widget {
    padding: 2rem 1.25rem;
  }
}

@media (max-width: 400px) {
  .amenities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-logo {
    width: 85vw;
  }
}

/* Print styles */
@media print {
  .deco-parallax,
  .site-nav,
  .nav-hamburger {
    display: none;
  }
  .site-shell {
    position: static;
  }
}