.site-root {
  width: 100%;
  min-height: 100%;
}
.site-wrapper {
  width: 100%;
}
.site-frame {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;
  min-height: 100vh;
}
.daily-bridge {
  grid-area: header;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 4%;
}
.daily-main {
  grid-area: main;
  min-width: 0;
}
.daily-wake {
  grid-area: footer;
  min-width: 0;
}
.main-wrapper {
  width: 100%;
}
.main-content {
  width: 100%;
}

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3000;
  padding: 12px 16px;
  transform: translateX(-100%);
}
.skip-link:focus {
  transform: none;
}

.daily-nav {
  margin-left: auto;
}
.menu-toggle {
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
}
.menu-close {
  min-width: 44px;
  min-height: 44px;
}

.daily-view {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
}
.daily-view::before {
  content: "";
  position: absolute;
  inset: 0;
}
.daily-view > * {
  position: relative;
  padding: 32px 4% 72px;
}
.view-wrapper {
  width: 100%;
}
.view-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 54% 38%;
  grid-template-areas:
    "lead figure"
    "detail figure";
  grid-template-rows: 1fr auto;
  justify-content: space-between;
  row-gap: 16px;
}
.view-lead {
  grid-area: lead;
  align-self: end;
  min-width: 0;
}
.view-detail {
  grid-area: detail;
  min-width: 0;
}
.view-figure {
  grid-area: figure;
  align-self: end;
  justify-self: end;
  position: relative;
  min-width: 0;
}
.view-frame {
  position: relative;
  padding: 12px;
}
.view-photo {
  height: 540px;
  width: auto;
  max-width: none;
}
.decoration {
  position: absolute;
  width: 130%;
  height: 70%;
  left: -15%;
  top: 15%;
}
.view-facts {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 16px;
}
.view-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 0;
}

.content-band {
  border-radius: 40px 40px 0 0;
  margin-top: -40px;
  position: relative;
  padding: 32px 16px 72px;
}
.band-wrapper {
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
}
.band-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.band-container > * {
  min-width: 0;
}
.band-lead {
  max-width: 75%;
}

.miles-grid {
  display: grid;
  grid-template-columns: 18.4% 18.4% 18.4% 18.4% 18.4%;
  justify-content: space-between;
  row-gap: 16px;
}
.makeup-grid {
  display: grid;
  grid-template-columns: 32% 32% 32%;
  justify-content: space-between;
  row-gap: 16px;
}
.miles-grid > *,
.makeup-grid > * {
  min-width: 0;
}

.intake-row,
.booking-row,
.signal-row {
  display: flex;
  gap: 32px;
  padding: 16px 0;
}
.intake-row > *,
.booking-row > *,
.signal-row > * {
  min-width: 0;
}
.intake-dose {
  flex: 0 0 34%;
}
.intake-notices {
  flex: 1 1 60%;
}
.booking-text {
  flex: 1 1 62%;
}
.booking-action {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.signal-item {
  flex: 1 1 30%;
}

.chat-thread {
  display: flex;
  flex-direction: column;
  max-width: 880px;
}

.daily-landing {
  text-align: center;
  padding: 48px 16px;
}
.wake-row {
  padding: 24px 16px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
}
.wake-row > * {
  min-width: 0;
}
.wake-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: center;
}
.wake-notice {
  flex: 1 1 100%;
}
.daily-landing ~ .wake-row {
  padding-bottom: 96px;
}

.daily-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
}
.bar-content {
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 68px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.bar-text {
  margin: 0;
  min-width: 0;
}

.daily-booking-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-shade {
  position: absolute;
  inset: 0;
}
.modal-panel {
  position: relative;
  width: 100%;
  max-width: 470px;
  max-height: 94%;
  overflow-y: auto;
  padding: 28px;
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
}

.daily-charter {
  padding: 32px 16px 48px;
}
.charter-wrapper {
  width: 92%;
  max-width: 820px;
  margin: 0 auto;
}
.charter-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.charter-container > * {
  min-width: 0;
}

@media (max-width: 1024px) {
  .view-photo {
    height: 460px;
  }
  .miles-grid {
    grid-template-columns: 32% 32% 32%;
  }
  .makeup-grid {
    grid-template-columns: 48.5% 48.5%;
  }
  .band-lead {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .daily-bridge {
    padding: 8px 4%;
  }
  .daily-view {
    min-height: 0;
  }
  .daily-view > * {
    padding: 16px 4% 64px;
  }
  .view-container {
    grid-template-columns: 100%;
    grid-template-areas:
      "lead"
      "figure"
      "detail";
    grid-template-rows: auto;
    row-gap: 12px;
  }
  .view-figure {
    justify-self: center;
  }
  .view-frame {
    padding: 8px;
  }
  .view-photo {
    height: 360px;
  }
  .secondary-content {
    display: none;
  }
  .decoration {
    display: none;
  }
  .content-band {
    border-radius: 28px 28px 0 0;
    margin-top: -28px;
    padding: 24px 16px 52px;
  }
  .band-wrapper,
  .charter-wrapper {
    width: 100%;
  }
  .miles-grid {
    grid-template-columns: 48.5% 48.5%;
  }
  .makeup-grid {
    grid-template-columns: 100%;
  }
  .intake-row,
  .booking-row,
  .signal-row {
    flex-direction: column;
    gap: 12px;
  }
  .intake-dose,
  .intake-notices,
  .booking-text,
  .booking-action,
  .signal-item {
    flex: 0 0 auto;
  }
  .booking-action {
    justify-content: flex-start;
  }
  .wake-row {
    width: 100%;
    flex-direction: column;
  }
  .bar-content {
    min-height: 64px;
  }
  .modal-panel {
    padding: 24px 16px;
  }
  .daily-charter {
    padding: 24px 16px 40px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .daily-bridge .brand-link {
    flex-shrink: 0;
  }
  .daily-nav .daily-nav-link {
    padding: 8px;
    white-space: nowrap;
  }
}