/* Refined editorial scale shared by every page. */
.split-title {
  font-size: clamp(58px, 7.6vw, 112px);
  line-height: .9;
}

.display {
  font-size: clamp(48px, 5.6vw, 82px);
  line-height: .98;
}

.hero-text,
.intro-copy p,
.lead,
.content-panel p,
.story-copy p,
.experience-copy p,
.room-detail p,
.map-copy p,
.contact-main p,
.faq-intro > p {
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.7;
}

.experience-copy h2,
.room-detail h2 {
  font-size: clamp(44px, 4.5vw, 68px);
  line-height: 1.02;
}

.final-cta h2 {
  font-size: clamp(52px, 7vw, 96px);
}

.reservation-band h2,
.social-band h2 {
  font-size: clamp(38px, 4vw, 58px);
}

.reference-hero-copy h1 {
  font-size: clamp(46px, 5.4vw, 76px);
}

.reference-intro h2,
.reference-feature h2,
.reference-section-head h2,
.reference-location h2 {
  font-size: clamp(42px, 4.7vw, 68px);
}

.reference-feature-copy p:not(.reference-kicker),
.reference-intro-copy,
.reference-location p:not(.reference-kicker) {
  font-size: 16px;
  line-height: 1.75;
}

.room-info h3,
.reference-cards span,
.food-grid h3,
.amenities-grid h3,
.values-grid h3,
.contact-cards h3 {
  font-size: clamp(24px, 2.2vw, 34px);
}

@media (max-width: 720px) {
  .split-title { font-size: clamp(50px, 15vw, 70px); }
  .display { font-size: clamp(42px, 12vw, 60px); }
  .reference-hero-copy h1 { font-size: clamp(42px, 12vw, 60px); }
  .reference-intro h2,
  .reference-feature h2,
  .reference-section-head h2,
  .reference-location h2 { font-size: clamp(38px, 10vw, 54px); }
  .experience-copy h2,
  .room-detail h2 { font-size: clamp(38px, 10vw, 52px); }
}

/* Interaction quality: visible focus and comfortable touch targets. */
:where(a, button, input, select, [tabindex]):focus-visible {
  outline: 3px solid #e6c781;
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  z-index: 3000;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 12px 16px;
  background: #fff;
  color: #07131f;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.whatsapp-float {
  transition: opacity .2s ease, transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease;
}
.whatsapp-float.is-booking-obscured,
.whatsapp-float.is-notice-obscured {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

@media (pointer: coarse), (max-width: 720px) {
  .menu-button { width: 44px; height: 44px; }
  .reference-booking input,
  .reference-booking select { min-height: 44px; font-size: 16px; }
  .reference-scroll,
  .reference-text-link,
  .text-link,
  .experience-copy a,
  .footer-col a,
  .reservation-band a,
  .contact-cards a,
  .google-review-footer a,
  .review-feed-note a,
  .reference-section-head > a,
  .tropikana-handle,
  .tropikana-instagram-cta { min-height: 44px; display: inline-flex; align-items: center; }
  .footer-col { gap: 4px; }
}

/* A quiet, non-blocking reservation concierge shown after a considered pause. */
.stay-notice {
  position: fixed;
  z-index: 1800;
  inset-inline-start: clamp(16px, 2.5vw, 40px);
  inset-block-end: max(22px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 44px;
  gap: 14px;
  align-items: start;
  width: min(408px, calc(100vw - 32px));
  padding: 18px 12px 18px 18px;
  color: #10202a;
  background: #fbfaf6;
  border-radius: 14px;
  box-shadow: 0 18px 54px rgba(4, 16, 25, .2);
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  clip-path: inset(18% 0 0 0 round 14px);
  transition: opacity .32s ease, transform .42s cubic-bezier(.16, 1, .3, 1), clip-path .42s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.stay-notice.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  clip-path: inset(0 round 14px);
  pointer-events: auto;
}
.stay-notice-mark {
  display: grid;
  place-items: center;
  width: 48px;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #f7e5b6;
  background: #0a1a24;
  font: 500 12px/1 Arial, sans-serif;
  letter-spacing: .13em;
}
.stay-notice-copy { min-width: 0; }
.stay-notice-copy strong {
  display: block;
  padding-inline-end: 4px;
  font: 500 19px/1.2 Georgia, serif;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.stay-notice-copy p {
  margin: 6px 0 12px;
  color: #536069;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.stay-notice-copy a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #8a681f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}
.stay-notice-copy a::after {
  content: '';
  width: 24px;
  height: 1px;
  margin-inline-start: 10px;
  background: currentColor;
  transform-origin: left center;
  transition: transform .2s ease;
}
.stay-notice-copy a:hover::after { transform: scaleX(1.4); }
.stay-notice-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #6a7378;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.stay-notice-close:hover { color: #10202a; background: #f0ede4; }
.stay-notice-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }

@media (max-width: 560px) {
  .stay-notice {
    inset-inline: 12px;
    inset-block-end: max(12px, env(safe-area-inset-bottom));
    width: auto;
    grid-template-columns: 38px minmax(0, 1fr) 40px;
    gap: 10px;
    padding: 12px 6px 10px 12px;
  }
  .stay-notice-mark { width: 38px; font-size: 10px; }
  .stay-notice-copy strong { font-size: 16px; line-height: 1.22; }
  .stay-notice-copy p {
    display: -webkit-box;
    margin: 4px 0 2px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .stay-notice-copy a { min-height: 40px; font-size: 10px; }
  .stay-notice-close { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .stay-notice { transition-duration: .01ms; transform: none; clip-path: none; }
  .stay-notice-copy a::after { transition: none; }
}

/* Consistent, optically stronger editorial hierarchy. Italiana ships as a
   single weight, so the hairline stroke adds clarity without changing its
   elegant proportions or relying on browser-specific synthetic bolding. */
.reference-hero-copy h1,
.subhero-copy .split-title span,
.subhero-copy .split-title em,
.display,
.reference-intro h2,
.reference-feature h2,
.reference-section-head h2,
.reference-location h2,
.experience-copy h2,
.room-detail h2,
.final-cta h2,
.reservation-band h2,
.social-band h2,
.room-info h3,
.reference-cards span,
.food-grid h3,
.amenities-grid h3,
.values-grid h3,
.contact-cards h3,
.fact-cards strong,
.welcome-modal-brand,
.welcome-modal h2,
.guest-proof-heading h2,
.review-feed-heading h3 {
  font-weight: 500;
  -webkit-text-stroke: .2px currentColor;
  text-rendering: optimizeLegibility;
}

.reference-hero-copy > span,
.hero-text,
.lead,
.reference-intro-copy,
.reference-feature-copy p:not(.reference-kicker),
.reference-location p:not(.reference-kicker),
.guest-proof-heading > p,
.review-feed-heading p,
.story-copy > p:first-child,
.contact-main > p:first-of-type,
.faq-intro > p {
  font-weight: 500;
}

/* Homepage display title: a deliberate stronger weight against photography. */
body[data-page="home"] .reference-hero-copy h1 {
  font-weight: 600;
  -webkit-text-stroke-width: .55px;
  paint-order: stroke fill;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}

.section-label > span { display: none; }
.section-label::before,
.section-marker::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .62;
}
.section-marker { display: inline-flex; margin-bottom: 18px; color: #a7844c; }

.footer-brand img {
  width: 112px;
  height: 78px;
  object-fit: contain;
  object-position: left center;
}

.reservation-phone-list {
  display: grid;
  gap: 3px;
  margin-bottom: 8px;
}
.reservation-phone-list a { width: fit-content; }

@media (max-width: 720px) {
  .reference-hero-copy h1,
  .subhero-copy .split-title span,
  .subhero-copy .split-title em,
  .display,
  .reference-intro h2,
  .reference-feature h2,
  .reference-section-head h2,
  .reference-location h2,
  .experience-copy h2,
  .room-detail h2,
  .room-info h3,
  .amenities-grid h3,
  .values-grid h3,
  .contact-cards h3,
  .guest-proof-heading h2,
  .review-feed-heading h3 {
    -webkit-text-stroke-width: .18px;
  }
  .reservation-phone-list { gap: 6px; }
  body[data-page="home"] .reference-hero-copy h1 {
    -webkit-text-stroke-width: .45px;
  }
}