/* ============================================
   Hotel Lumen — shared stylesheet
   All pages link this file.
   ============================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul { list-style: none; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; overflow-x: hidden; }

/* ---------- Design tokens ---------- */
:root {
  /* Color */
  --color-ivory: #F6F1E7;
  --color-charcoal: #26221D;
  --color-brass: #B08D57;
  --color-bottle-green: #3F4A3D;
  --color-stone: #E4DCC9;
  --color-white: #FFFFFF;
  --color-terracotta: #B0573F; /* in-palette, non-red accent for form errors / unavailable dates */
  --color-terracotta-soft: rgba(176, 87, 63, 0.12);

  --color-brass-soft: rgba(176, 141, 87, 0.25);
  --color-charcoal-soft: rgba(38, 34, 29, 0.65);
  --color-stone-soft: rgba(228, 220, 201, 0.45); /* stone, tinting through the ivory page beneath it */

  /* Type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Layout */
  --max-width: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-space: clamp(4rem, 9vw, 7.5rem);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Base typography ---------- */
body {
  background: var(--color-ivory);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 24;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3 { font-size: 1.25rem; font-weight: 500; }

em {
  font-style: italic;
  font-variation-settings: "opsz" 9;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: 0.75rem;
}
.eyebrow::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--color-brass);
  margin-bottom: 0.65rem;
}

.mono { font-family: var(--font-mono); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-brass);
  padding-bottom: 0.15em;
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.text-link:hover { color: var(--color-brass); gap: 0.65em; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-brass);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Layout helpers ---------- */
.section-heading {
  max-width: 640px;
  padding-inline: var(--gutter);
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.9rem 1.85rem;
  border-radius: 3px;
  border: 1px solid var(--color-brass);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  white-space: nowrap;
}

.btn-brass {
  background: var(--color-brass);
  color: var(--color-white);
}
.btn-brass:hover { background: transparent; color: var(--color-brass); }

.btn-brass-outline {
  background: transparent;
  color: var(--color-brass);
  border-color: var(--color-brass);
}
.btn-brass-outline:hover { background: var(--color-brass); color: var(--color-charcoal); }

.btn-brass-inverse {
  background: var(--color-ivory);
  color: var(--color-bottle-green);
  border-color: var(--color-ivory);
}
.btn-brass-inverse:hover { background: transparent; color: var(--color-ivory); }

.btn-lg { padding: 1.1rem 2.4rem; font-size: 1rem; }

/* ============================================
   Header
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-ivory);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease);
}

.header-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 1.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Scrolled state is a color-only change (no size/layout change) — the
   header's height stays fixed so it can never shift the page under
   itself while sticky-pinned at the viewport top. */
.site-header.is-scrolled { border-bottom-color: rgba(38, 34, 29, 0.08); }

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.logo-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  overflow: visible;
}
.logo-mark polygon,
.logo-mark line {
  fill: none;
  stroke: var(--color-brass);
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-width 0.3s var(--ease), opacity 0.3s var(--ease);
}
.logo-mark line.facet-line {
  stroke-width: 1.2;
  opacity: 0.6;
}
.wordmark:hover .logo-mark polygon,
.wordmark:hover .logo-mark line { stroke-width: 2; }
.wordmark:hover .logo-mark line.facet-line { stroke-width: 1.5; }

/* Header logo assemble-in — plays on every page load (this is a plain
   multi-page site, so a refresh, a navigation, or clicking the logo
   itself all trigger a full document load, which is when this runs; no
   JS needed). Header only, not the footer's copy of the same markup —
   scoped via .header-inner so .footer-brand .wordmark is untouched.
   Transform/opacity only, so the settled state is pixel-identical to the
   normal resting layout — no reflow. */
.header-inner .wordmark .logo-mark {
  animation: logoMarkIn 0.6s var(--ease) both;
}
@keyframes logoMarkIn {
  from { transform: translateX(20px); }
  to { transform: translateX(0); }
}
/* Text rolls in letter by letter (see the splitter in js/script.js,
   which wraps each character of the wordmark text in a .logo-char span
   with a --i index; the plain text node is left untouched if JS never
   runs or motion is reduced, so there's no JS-dependent hidden state to
   worry about). Each letter travels a short, letter-sized distance —
   the left-to-right "roll" comes from the staggered delay below, not a
   big per-letter jump — and stays hidden through its first 30% so it
   pops in rather than fading in place. 0.08s base delay keeps the gem
   leading; ~35ms between successive letters. */
.header-inner .wordmark .logo-char {
  display: inline-block;
  animation: logoCharIn 0.4s var(--ease) both;
  animation-delay: calc(0.08s + var(--i, 0) * 0.035s);
}
@keyframes logoCharIn {
  0% { transform: translateX(-14px); opacity: 0; }
  30% { opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.nav-desktop { display: none; }
.nav-desktop ul { display: flex; gap: 2rem; }
.nav-desktop a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  padding-bottom: 0.3rem;
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-desktop a:hover::after,
.nav-desktop a.active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 1.25rem; }
.header-cta { display: none; }

/* Hamburger */
.nav-toggle {
  width: 32px;
  height: 22px;
  position: relative;
  flex-shrink: 0;
}
.nav-toggle span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--color-charcoal);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease), top 0.35s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 50%; margin-top: -0.75px; }
.nav-toggle span:nth-child(3) { top: 100%; margin-top: -1.5px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 50%; margin-top: -0.75px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 50%; margin-top: -0.75px; transform: rotate(-45deg); }

/* Mobile nav — a compact dropdown anchored under the header
   (not a full-page takeover). `top: 100%` positions it against
   .site-header's own box, so it always sits flush beneath the
   header at its current (scrolled or not) height. */
.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  background: var(--color-bottle-green);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2.25rem var(--gutter) 2.75rem;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 20px 40px rgba(38, 34, 29, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0s;
}
.mobile-nav ul { display: flex; flex-direction: column; align-items: center; gap: 1.15rem; }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-ivory);
}
.mobile-nav a[aria-current="page"] { color: var(--color-brass); }

/* Scrim — dims the rest of the page behind the dropdown and closes
   it on click. Sits outside .site-header so it never overlaps the
   header bar itself (header's z-index already paints above it). */
.mobile-nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(38, 34, 29, 0.45);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.mobile-nav-scrim.is-open { opacity: 1; pointer-events: auto; }

body.nav-open { overflow: hidden; }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 60%;
  animation: heroZoom 12s ease-out forwards;
}
/* One-way drift-in, not a loop or bounce-back — .hero has overflow: hidden,
   so the extra scale stays clipped. 22s/1.06 was too subtle to actually
   notice; 12s/1.1 reads clearly in the first few seconds on load. */
@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
.hero-gradient {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(38,34,29,0.88) 0%, rgba(38,34,29,0.5) 42%, rgba(38,34,29,0.12) 70%),
    radial-gradient(ellipse at 75% 20%, rgba(176,141,87,0.3), transparent 55%);
}
.hero-content {
  position: relative;
  z-index: 1;
  color: var(--color-ivory);
  max-width: 780px;
  padding: 0 var(--gutter) clamp(3rem, 8vw, 6rem);
}

.hero-content h1 {
  color: var(--color-white);
  text-shadow: 0 2px 20px rgba(38,34,29,0.5), 0 1px 4px rgba(38,34,29,0.55);
}
.hero-content em {
  color: var(--color-brass);
  text-shadow: 0 2px 10px rgba(38,34,29,0.9), 0 1px 3px rgba(38,34,29,0.95);
}
.hero-subhead {
  font-size: clamp(1rem, 2vw, 1.2rem);
  max-width: 46ch;
  margin: 1.5rem 0 2.25rem;
  color: rgba(246, 241, 231, 0.92);
  text-shadow: 0 1px 10px rgba(38,34,29,0.5);
}

/* ============================================
   Stats strip (hotel signage detail)
   ============================================ */
.stats-strip {
  background: var(--color-ivory);
  border-top: 1px solid rgba(176, 141, 87, 0.35);
  border-bottom: 1px solid rgba(176, 141, 87, 0.35);
}
.stats-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  row-gap: 0.5rem;
}
.stat {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  padding: 0 1rem;
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--color-brass);
}
/* Third stat (location) wraps to its own centered line on narrow
   screens, so it shouldn't inherit the "preceded by a stat" bar. */
.stat:nth-child(3)::before { content: none; }

/* ============================================
   Story teaser
   ============================================ */
.story {
  background: var(--color-stone);
  padding: var(--section-space) var(--gutter);
  position: relative;
  overflow: hidden;
}
.story::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 90% 0%, var(--color-brass-soft), transparent 60%);
  pointer-events: none;
}
.story-grid {
  position: relative;
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
.story-inner { max-width: 560px; }
.story-text {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.45;
  margin-bottom: 1.75rem;
}
.story-media.card-image {
  aspect-ratio: 1 / 1;
  max-width: 420px;
}

/* ============================================
   Amenities
   ============================================ */
.amenities { padding: var(--section-space) 0; }
.amenities-grid {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
}

/* Card surface — a translucent tint of stone (the site's other
   background, already used to alternate section backgrounds elsewhere)
   tinting through the ivory page beneath it, same convention as
   --color-brass-soft/--color-charcoal-soft. Softer than solid stone,
   but still separates each card from the page enough for the tilt hover
   to read as an actual surface lifting, not a bare photo floating. */
.amenity-card {
  background: var(--color-stone-soft);
  border-radius: 8px;
  padding: 1.25rem 1.25rem 1.75rem;
}
.amenity-card h3 { margin: 1.1rem 0 0.4rem; }
.amenity-card p { color: var(--color-charcoal-soft); }

.card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-stone);
}
.card-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.amenity-card:hover .card-image img,
.room-card:hover .card-image img,
.room-tier-media:hover img,
.about-story-media:hover img { transform: scale(1.04); }

/* Floating/tilt hover (amenity cards only — see attachTilt() in
   js/script.js). Deliberately excludes .room-card and .story-media: on
   room cards it fought with the room-teaser's dark background/imagery,
   and on the single large story photo it read as an unwanted zoom rather
   than a card lifting — both keep only their plain hover-zoom above.
   JS sets the live rotate/lift transform on mousemove; this just supplies
   the shadow ramp and the settle-back transition on mouseleave. Transform
   itself is intentionally NOT transitioned while `.is-tilting` is active,
   so the tilt tracks the cursor instantly rather than lagging behind it. */
.amenity-card {
  box-shadow: 0 2px 10px rgba(38, 34, 29, 0.05);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.amenity-card.is-tilting {
  transition: box-shadow 0.4s var(--ease);
  box-shadow: 0 24px 44px rgba(38, 34, 29, 0.22);
}

/* ============================================
   Editorial break
   ============================================ */
.editorial-break {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.editorial-media { position: absolute; inset: 0; z-index: 0; }
.editorial-media img { width: 100%; height: 100%; object-fit: cover; }
.editorial-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(38,34,29,0.8) 0%, rgba(38,34,29,0.4) 45%, rgba(38,34,29,0.08) 72%);
}
.editorial-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-inline: var(--gutter) auto;
  padding: clamp(3rem, 8vw, 5rem) 0;
}
.editorial-content .quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.4;
  color: var(--color-white);
  text-shadow: 0 2px 20px rgba(38,34,29,0.5), 0 1px 4px rgba(38,34,29,0.55);
}

/* ============================================
   Rooms teaser
   ============================================ */
.rooms-teaser {
  padding: var(--section-space) 0;
  background: var(--color-charcoal);
  color: var(--color-ivory);
}
.rooms-teaser .eyebrow { color: var(--color-brass); }
.rooms-grid {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem 2rem;
}
.room-card h3 { margin: 1.1rem 0 0.35rem; color: var(--color-ivory); }
.room-card p { color: rgba(246, 241, 231, 0.7); margin-bottom: 0.5rem; }
.room-card .price,
.room-tier-content .price {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-brass);
}
.room-card .card-image { background: var(--color-charcoal); border: 1px solid rgba(176,141,87,0.25); }

/* ============================================
   Page intro — text-only opener used by rooms.html
   and about.html in place of a hero image (eyebrow +
   left-aligned headline + one-line intro, on a soft
   brass gradient wash). Reuses .section-heading, .price,
   .btn-brass, .eyebrow from shared components above.
   ============================================ */
.page-intro {
  padding: var(--section-space) var(--gutter) calc(var(--section-space) * 0.6);
  position: relative;
  overflow: hidden;
}
.page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--color-brass-soft), transparent 60%);
  pointer-events: none;
}
.page-intro .section-heading { position: relative; margin-bottom: 0; max-width: 720px; }
.page-intro h1 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); }
.page-intro-text {
  font-size: 1.05rem;
  color: var(--color-charcoal-soft);
  margin-top: 1.25rem;
}

.room-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin: 1rem 0 1.5rem;
}
.room-specs span { padding: 0 1rem; position: relative; }
.room-specs span:first-child { padding-left: 0; }
.room-specs span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: currentColor;
  opacity: 0.5;
}

.room-tier { padding: var(--section-space) var(--gutter); }
.room-tier-grid {
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
/* Some tiers put the content div before the media div in markup, so
   the image lands on the right at desktop (see the 900px+ breakpoint
   below). On mobile — a single stacked column — force the image to
   always lead regardless of that markup order. */
.room-tier-media { order: 1; }
.room-tier-content { order: 2; }
/* Each room tier's media is a 3-photo carousel — reuses the exact
   .carousel-arrow/.carousel-dot components built for the testimonials
   carousel below, just laid out for an image viewport (arrows
   overlaid on the photo) instead of a full-width text slide. */
.room-gallery {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
}
.room-gallery .carousel-viewport { height: 100%; }
.room-gallery .carousel-track { height: 100%; }
.room-gallery .carousel-slide { height: 100%; padding: 0; }
.room-gallery .carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.room-gallery .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: rgba(246, 241, 231, 0.85);
}
.room-gallery .carousel-arrow-prev { left: 0.75rem; }
.room-gallery .carousel-arrow-next { right: 0.75rem; }
.room-tier-media .carousel-dots { margin-top: 0.85rem; }
.room-tier-content h2 { margin-bottom: 0; }
.room-tier-content > p { color: var(--color-charcoal-soft); }

.room-tier-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 1.75rem;
}

.room-tier--stone { background: var(--color-stone); }

.room-tier--dark {
  background: var(--color-charcoal);
  color: var(--color-ivory);
  position: relative;
  overflow: hidden;
}
.room-tier--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 15% 100%, rgba(176,141,87,0.18), transparent 55%);
  pointer-events: none;
}
.room-tier--dark .room-tier-grid { position: relative; }
.room-tier--dark .room-tier-content h2 { color: var(--color-ivory); }
.room-tier--dark .room-tier-content > p:not(.price) { color: rgba(246, 241, 231, 0.75); }
.room-tier--dark .room-gallery { border: 1px solid rgba(176,141,87,0.25); }

/* ============================================
   Testimonials
   ============================================ */
.testimonials { padding: var(--section-space) 0; }

.testimonials-carousel {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 3vw, 2rem);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.carousel-viewport { flex: 1; min-width: 0; overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.5s var(--ease); }
.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  text-align: center;
  padding: 0 0.5rem;
}
.carousel-slide p {
  max-width: 620px;
  margin-inline: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.55;
  color: var(--color-charcoal);
  margin-bottom: 1rem;
}
.carousel-slide cite {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--color-charcoal-soft);
}

.carousel-arrow {
  flex-shrink: 0;
  width: clamp(32px, 8vw, 40px);
  height: clamp(32px, 8vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(176, 141, 87, 0.4);
  border-radius: 50%;
  color: var(--color-brass);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.carousel-arrow svg { width: 18px; height: 18px; }
.carousel-arrow:hover { background: var(--color-brass); color: var(--color-white); border-color: var(--color-brass); }

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.25rem;
}
.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(176, 141, 87, 0.3);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.carousel-dot:hover { background: var(--color-brass); }
.carousel-dot.is-active { background: var(--color-brass); transform: scale(1.35); }

/* ============================================
   Testimonials CTA — sits directly with the reviews,
   not folded into the footer below.
   ============================================ */
.testimonials-cta {
  max-width: var(--max-width);
  margin-inline: auto;
  margin-top: clamp(2.75rem, 6vw, 4.5rem);
  padding: clamp(2.75rem, 6vw, 4rem) var(--gutter) 0;
  border-top: 1px solid rgba(176, 141, 87, 0.35);
  text-align: center;
}
.testimonials-cta h2,
.rooms-cta h2 {
  color: var(--color-charcoal);
  max-width: 22ch;
  margin: 0 auto 2rem;
}

/* Standalone closing CTA for pages where it follows a full section
   with its own background (e.g. rooms.html's dark Penthouse tier),
   rather than sitting inside a shared-background section like
   .testimonials-cta above — so it gets full section padding on both
   sides instead of a dividing hairline (the hard color change above
   already separates it from what precedes it). */
.rooms-cta {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: var(--section-space) var(--gutter);
  text-align: center;
}

/* about.html's closing CTA follows a plain quote block, not a
   background-color change like rooms.html's dark Penthouse tier — so
   it needs the same brass hairline .testimonials-cta uses on the home
   page to read as a deliberate break, not a jump-cut. */
.welcome-note + .rooms-cta {
  border-top: 1px solid rgba(176, 141, 87, 0.35);
}

/* ============================================
   About page (about.html)
   ============================================ */

.about-story { background: var(--color-stone); padding: var(--section-space) var(--gutter); }
.about-story-grid {
  max-width: var(--max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
.about-story-inner p { margin-bottom: 1.5rem; }
.about-story-inner p:last-child { margin-bottom: 0; }
.about-story-media {
  order: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 3px;
}
.about-story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.about-story-inner { order: 2; }

.pillars { padding: var(--section-space) 0; }
.pillars-grid {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
}
.pillar-icon { margin-bottom: 1.25rem; }
.pillar-icon svg { width: 36px; height: 36px; }
.pillar-icon svg path,
.pillar-icon svg polygon,
.pillar-icon svg line {
  fill: none;
  stroke: var(--color-brass);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pillar h3 { margin-bottom: 0.5rem; }
.pillar p { color: var(--color-charcoal-soft); }

.location { background: var(--color-stone); padding: var(--section-space) 0; }
.location-grid {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
.location-inner { max-width: 480px; }
.location-address { margin: 1.25rem 0 1rem; }
.location-address p { margin-bottom: 0.2rem; }
.location-text { color: var(--color-charcoal-soft); margin-bottom: 1.5rem; }

/* Real Google Maps embed of the hotel's address (Via dello Sprone,
   Oltrarno, Firenze). Desaturated via filter so it sits quietly next
   to the site's ivory/brass palette instead of clashing with it. */
.map-embed {
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(176, 141, 87, 0.25);
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  filter: grayscale(0.35) sepia(0.12) contrast(1.02);
}

.welcome-note { padding: var(--section-space) var(--gutter); text-align: center; }
.welcome-note-inner { max-width: 600px; margin-inline: auto; }
.welcome-note blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.6;
  color: var(--color-charcoal);
}
.welcome-note cite {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--color-charcoal-soft);
}

/* Kept for reuse on other pages that want a bottle-green closing band. */
.cta-band {
  background: var(--color-bottle-green);
  color: var(--color-ivory);
  text-align: center;
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(176,141,87,0.25), transparent 65%);
}
.cta-band h2 {
  position: relative;
  color: var(--color-white);
  max-width: 20ch;
  margin: 0 auto 2rem;
}
.cta-band .btn { position: relative; }

/* ============================================
   Contact page (contact.html)
   Form primitives, inquiry form, confirmation
   panel, location. (The availability widget below
   now lives on rooms.html, but its CSS stays here
   since these rules are page-agnostic by class
   selector — no need to physically relocate them.)
   ============================================ */

/* --- Shared form primitives (first form on the site) --- */
.form-field { display: flex; flex-direction: column; text-align: left; }
.form-field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: 0.5rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--color-white);
  border: 1px solid rgba(176, 141, 87, 0.35);
  border-radius: 3px;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.form-field textarea { resize: vertical; min-height: 8rem; }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-brass);
  box-shadow: 0 0 0 3px var(--color-brass-soft);
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--color-terracotta);
}
.form-error {
  font-size: 0.8rem;
  color: var(--color-terracotta);
  margin-top: 0.4rem;
}
.form-error:empty { display: none; }

/* --- Date field + calendar popup (used on rooms.html) ---
   The check-in/check-out fields are plain text inputs (forced GG/MM/AAAA
   formatting — see rooms.html for why), so the browser's native calendar
   picker had to be rebuilt by hand rather than reattached. */
.date-input { position: relative; }
.date-input input { width: 100%; padding-right: 2.75rem; }
.date-input-icon {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.35rem;
  height: 1.35rem;
  color: var(--color-brass);
  pointer-events: none; /* clicks fall through to the input, which opens the picker */
}
.date-input-icon svg { width: 100%; height: 100%; }

.datepicker {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  width: 280px;
  max-width: calc(100vw - 2 * var(--gutter));
  background: var(--color-white);
  border: 1px solid var(--color-brass-soft);
  border-radius: 4px;
  box-shadow: 0 20px 40px rgba(38, 34, 29, 0.22);
  padding: 1rem;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
}
.datepicker.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0s;
}

.datepicker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.datepicker-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: capitalize;
}
.datepicker-nav {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brass);
  border-radius: 50%;
  transition: background 0.2s var(--ease);
}
.datepicker-nav:hover { background: var(--color-stone); }
.datepicker-nav svg { width: 1rem; height: 1rem; }

.datepicker-weekdays,
.datepicker-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.datepicker-weekdays span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-align: center;
  color: var(--color-charcoal-soft);
  padding-bottom: 0.5rem;
}
.datepicker-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  border-radius: 50%;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.datepicker-day:not(.datepicker-day--empty):not(.is-disabled):hover { background: var(--color-stone); }
.datepicker-day.is-today { color: var(--color-brass); font-weight: 600; }
.datepicker-day.is-selected { background: var(--color-brass); color: var(--color-white); }
.datepicker-day.is-disabled,
.datepicker-day--empty { color: var(--color-charcoal-soft); opacity: 0.35; cursor: default; }

/* --- Availability widget (used on rooms.html) --- */
.availability { background: var(--color-stone); padding: var(--section-space) var(--gutter); }
.availability-inner { max-width: var(--max-width); margin-inline: auto; }
.availability-form { max-width: 880px; margin-inline: auto; text-align: center; }
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
.availability-submit { width: 100%; }

.availability-result {
  max-width: 880px;
  margin-inline: auto;
  margin-top: 2rem;
  padding: 1.75rem;
  border-radius: 3px;
  border-left: 3px solid var(--color-brass);
  background: var(--color-white);
}
.availability-result h3 { margin-bottom: 0.5rem; font-size: 1.35rem; }
.availability-result p { color: var(--color-charcoal-soft); margin-bottom: 1.25rem; }
.availability-result--unavailable { border-left-color: var(--color-terracotta); }

/* --- Section B: Inquiry form --- */
.inquiry { padding: var(--section-space) var(--gutter); }
.inquiry-inner { max-width: var(--max-width); margin-inline: auto; }
.inquiry-form {
  max-width: 640px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
/* The `hidden` attribute (used to swap this form for .confirmation-panel
   on submit) is normally display:none via the UA stylesheet, but that
   loses to this rule's own `display: grid` since author styles always
   beat UA styles regardless of specificity — so it needs restating here. */
.inquiry-form[hidden] { display: none; }
.inquiry-form .btn { justify-self: start; margin-top: 0.5rem; }

/* --- Confirmation panel (swaps in for .inquiry-form on submit) --- */
.confirmation-panel {
  max-width: 640px;
  margin-inline: auto;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(2.5rem, 5vw, 3.5rem);
  border: 1px solid rgba(176, 141, 87, 0.35);
  border-radius: 3px;
  background: var(--color-stone);
  text-align: left;
}
.confirmation-icon { width: 44px; height: 44px; margin-bottom: 1.25rem; }
.confirmation-icon circle { fill: none; stroke: var(--color-brass); stroke-width: 1.5; }
.confirmation-icon path { fill: none; stroke: var(--color-brass); stroke-width: 2; }
.confirmation-panel h3 { margin-bottom: 0.75rem; }
.confirmation-panel p { color: var(--color-charcoal-soft); margin-bottom: 1.5rem; }

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background: var(--color-bottle-green);
  color: var(--color-ivory);
}
.footer-inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: clamp(2.25rem, 4.5vw, 3.25rem) var(--gutter) 2.25rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  justify-items: center;
  align-items: center;
  text-align: center;
}

/* Shared column heading — Contattaci / Menu / Social all match.
   (.footer-inner prefix needed so this beats ".footer-contact p" below.) */
.footer-inner .footer-heading {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: 0.85rem;
}

.footer-brand .wordmark { color: var(--color-ivory); margin-bottom: 0.75rem; justify-content: center; }
.footer-brand p, .footer-contact p { color: rgba(246, 241, 231, 0.75); margin-bottom: 0.4rem; }
.footer-brand .footer-tagline { max-width: 26ch; margin-inline: auto; margin-bottom: 1rem; line-height: 1.5; }
.footer-contact a, .footer-nav a, .footer-legal a { transition: color 0.3s var(--ease); }
.footer-contact a:hover, .footer-nav a:hover { color: var(--color-brass); }
.footer-nav ul { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.footer-nav a { color: rgba(246, 241, 231, 0.85); }

.footer-social-icons { display: flex; justify-content: center; gap: 1rem; }
.social-icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(176,141,87,0.5);
  border-radius: 50%;
  color: var(--color-brass);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.social-icon svg { width: 18px; height: 18px; }
.social-icon:hover { background: var(--color-brass); color: var(--color-bottle-green); }

.footer-bottom {
  border-top: 1px solid rgba(246,241,231,0.15);
  padding: 1.25rem var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.footer-bottom p { color: rgba(246, 241, 231, 0.6); font-size: 0.85rem; }
.footer-legal ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.25rem; }
.footer-legal a { font-size: 0.8rem; color: rgba(246, 241, 231, 0.55); }
.footer-legal a:hover { color: var(--color-brass); }

/* ============================================
   Scroll reveal
   ============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Result/confirmation panels — same fade-up recipe as [data-reveal], but
   triggered manually by JS (adding .is-visible) since they appear on form
   submit rather than on scroll. See rooms.html / contact.html. */
.availability-result,
.confirmation-panel {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.availability-result.is-visible,
.confirmation-panel.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { transform: none; transition: opacity 0.4s ease; }
  .availability-result,
  .confirmation-panel { transform: none; transition: opacity 0.3s ease; }
  .card-image img { transition: none; }
  .about-story-media img { transition: none; }
  .amenity-card:hover .card-image img,
  .room-card:hover .card-image img,
  .room-tier-media:hover img,
  .about-story-media:hover img { transform: none; }
  .amenity-card { transition: none; }
  .nav-toggle span, .mobile-nav, .header-inner { transition: none; }
  .carousel-track { transition: none; }
  .hero-media img { animation: none; }
  .header-inner .wordmark .logo-mark,
  .header-inner .wordmark .logo-char { animation: none; }
}

/* ============================================
   Breakpoints
   ============================================ */
@media (min-width: 600px) {
  .room-tier-footer { flex-direction: row; align-items: center; justify-content: space-between; }

  .stats-inner { flex-wrap: nowrap; row-gap: 0; }
  .stat { padding: 0 1.75rem; }
  .stat + .stat::before { height: 14px; }
  .stat:nth-child(3)::before { content: ""; }

  .inquiry-form { grid-template-columns: 1fr 1fr; }
  .inquiry-form .form-field--full { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .nav-desktop { display: block; }
  .nav-toggle { display: none; }
  .header-cta { display: inline-block; }
  .mobile-nav { display: none; }

  .amenities-grid,
  .rooms-grid,
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .story-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
  .story-media { margin-top: 3rem; }

  .room-tier-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
  /* Revert the mobile "image always first" override so tiers alternate
     left/right again, following each tier's markup order. */
  .room-tier-media, .room-tier-content { order: initial; }

  .location-grid { grid-template-columns: 0.9fr 1.1fr; gap: 4rem; }

  .about-story-grid { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; }
  /* Revert the mobile "image always first" override — at desktop the
     text leads (left) and the image follows (right), matching the
     home page's own "La Nostra Storia" story section. */
  .about-story-media, .about-story-inner { order: initial; }
}

@media (min-width: 700px) {
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }

  .availability-form .form-row { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .availability-submit { width: auto; }
}

@media (min-width: 1000px) {
  .footer-inner { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 700px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 1200px) {
  .amenities-grid { grid-template-columns: repeat(3, 1fr); }
  .rooms-grid { grid-template-columns: repeat(4, 1fr); }
}