/* Shared section window and small heading label; About is the reference.
   Load after section styles. Home, the 3D scene and dialogs stay independent. */
:root {
  --section-panel-top: 14.2vh;
  --section-panel-right: 2vw;
  --section-panel-bottom: 20px;
  --section-panel-radius: 34px;
  --section-panel-surface: #fffffc;
  --section-label-color: #477515;
  --section-heading-color: #086624;
  --section-label-size: 14px;
}
/* Offer/contact descriptions match About rather than the old muted lead text. */
body:is([data-view="promotions"], [data-view="contacts"]) #content-view > .page-intro {
  font-family: "Nunito", "Trebuchet MS", sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 1vw, 16px);
  font-synthesis: none;
  line-height: 1.6;
  letter-spacing: normal;
  color: #343434;
}
@media (max-width:600px) {
  body:is([data-view="promotions"], [data-view="contacts"]) #content-view > .page-intro { font-size: 15px; }
}
body[data-view]:not([data-view="home"]) #content-view {
  background: var(--section-panel-surface);
  padding: 20px 18px;
  border-radius: var(--section-panel-radius);
  margin: 0;
}
body[data-view]:not([data-view="home"]) #content-view h1 {
  color: var(--section-heading-color);
}
body[data-view]:not([data-view="home"]) #content-view h1 span {
  color: inherit;
}
body[data-view]:not([data-view="home"]) #content-view :is(
  .about-kicker,
  .attractions-eyebrow,
  .media-page-heading .eyebrow,
  .birthday-hero .birthday-eyebrow
),
body[data-view]:not([data-view="home"]) #content-view > .eyebrow {
  display: block;
  margin: 0 0 12px;
  color: var(--section-label-color);
  font: 900 var(--section-label-size)/normal var(--font-heading);
  font-synthesis: none;
  letter-spacing: 0;
  text-transform: uppercase;
}
@media (min-width:1101px), (min-width:1025px) and (min-height:551px) {
  body[data-view]:not([data-view="home"]) {
    --panel-top: var(--section-panel-top);
    --panel-bottom: var(--section-panel-bottom);
  }
  body[data-view]:not([data-view="home"]) #content-view {
    top: var(--section-panel-top);
    left: calc(var(--gutter) + var(--sidebar-width) + 32px);
    right: var(--section-panel-right);
    bottom: auto;
    width: auto;
    max-width: none;
    height: calc(100dvh - var(--section-panel-top) - var(--section-panel-bottom));
    max-height: calc(100dvh - var(--section-panel-top) - var(--section-panel-bottom));
  }
}
@media (max-width:1024px), (max-width:1100px) and (max-height:550px) {
  body[data-view]:not([data-view="home"]) #content-view {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: calc(100dvh - 88px - env(safe-area-inset-top, 0px));
    max-height: none;
    padding: 16px max(var(--mobile-page-inset), env(safe-area-inset-right, 0px))
      calc(var(--bottom-nav-clearance) + 24px)
      max(var(--mobile-page-inset), env(safe-area-inset-left, 0px));
    border-radius: 0;
  }
}