/* Keep the original typography. Containers grow when enlarged text needs room. */
html {
  scroll-padding-top: max(104px, calc(var(--header-height, 94px) + 10px));
}

.header-inner { height: auto; min-height: 94px; }
.brand, .brand > span, .header nav { min-width: 0; }
.brand { flex-shrink: 1; }
.brand img, #nav-toggle { flex-shrink: 0; }
.brand > span { overflow-wrap: anywhere; }
.header nav { flex-wrap: wrap; }

.hero-grid > *, .about-grid > *, .ritual-grid > *, .faq-grid > *,
.service-group > *, .service-item summary > *, .section-heading > * {
  min-width: 0;
}

.hero-actions, .menu-meta, .menu-meta label, .service-detail,
.ritual-price, .closing-inner, .footer-main nav, .footer-bottom {
  flex-wrap: wrap;
}

.button, .copy-service {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.button > span, .quiet-link > span, .text-link > span,
.tiny-sun, .small-line { flex-shrink: 0; }
.quiet-link, .text-link, .filter { min-width: 0; max-width: 100%; }
.quiet-link, .text-link { overflow-wrap: anywhere; }
.eyebrow { flex-wrap: wrap; }
.hero-copy h1, .section-heading h2, .about-copy h2,
.closing h2, .dialog-heading h2 { overflow-wrap: anywhere; }

.menu-meta label { flex-shrink: 1; max-width: 100%; }
.menu-meta select { min-width: 0; max-width: 100%; }
.menu-meta > p { max-width: 100%; }
.service-detail > div { min-width: 0; }
.service-title, .group-label h3, .faq-list summary { overflow-wrap: anywhere; }

.rail-inner a { min-width: 0; }
.rail-inner a > .rail-label {
  min-width: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  overflow-wrap: anywhere;
}
.rail-inner a > .rail-number, .rail-inner a > i { flex-shrink: 0; }

.ritual-steps > div { flex-wrap: wrap; }
.ritual-steps > div > div { flex: 1 1 9em; min-width: 0; }
.step-time { flex-shrink: 0; max-width: 100%; }
.footer-main nav { min-width: 0; max-width: 100%; }
.footer-main nav a, .footer-bottom > * { overflow-wrap: anywhere; }
.footer-brand { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }

.image-stamp {
  width: max-content;
  height: auto;
  min-width: 101px;
  min-height: 101px;
  max-width: calc(100% - 20px);
  aspect-ratio: 1;
  padding: 8px;
  text-align: center;
}
.dialog-heading h2 { min-width: 0; }
.dialog-heading button {
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-width: 44px;
  min-height: 44px;
}
.dialog-content { min-height: 0; }
.toast { overflow-wrap: anywhere; }

@media (max-width: 850px) {
  html { scroll-padding-top: max(90px, calc(var(--header-height, 80px) + 10px)); }
  .header-inner { min-height: 80px; }
  .image-stamp { min-width: 80px; min-height: 80px; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: max(84px, calc(var(--header-height, 76px) + 8px)); }
  .header-inner { min-height: 76px; }
  .header nav {
    top: 100%;
    max-height: calc(100vh - var(--header-height, 76px));
    max-height: calc(100dvh - var(--header-height, 76px));
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-wrap: nowrap;
  }
  .header nav a { flex-shrink: 0; }
  .hero-actions { flex-wrap: wrap; }
  .image-stamp { min-width: 83px; min-height: 83px; }

}