/* Homepage-only rounded surfaces, preserving the existing layout and motion. */
.info-frame {
 width: calc(100% - 56px);
 margin-left: auto;
 margin-right: auto;
 border-radius: 24px;
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 align-items: stretch;
 padding: 28px 20px;
}
.info-frame > .location-group,
.info-frame > .hours-group,
.info-frame > .contact-group {
 margin: 0;
 padding: 6px 20px;
 max-width: none;
 min-width: 0;
 justify-content: center;
}
.info-frame > div + div { border-left: 1px solid rgba(59,42,24,.18); }
.home-instagram-links { display: flex; flex-direction: column; gap: 10px; }
.home-instagram-links a { display: flex; align-items: center; gap: 9px; color: #201810; text-decoration: none; font: 12px/1.4 Arial,sans-serif; letter-spacing: 1px; }
.home-instagram-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-instagram-links a:focus-visible { outline: 2px solid #201810; outline-offset: 4px; border-radius: 4px; }
.home-instagram-links img { width: 17px; height: 17px; }
.artist-card { border-radius: 24px 24px 0 0; overflow: hidden; }
.person-k, .person-y, .person-n, .person-g { border-radius: 0 0 24px 24px; }
.banner-container { width: calc(100% - 56px); margin-left: auto; margin-right: auto; border-radius: 24px; }
.map-container { width: calc(100% - 56px); margin-left: auto; margin-right: auto; border-radius: 24px; overflow: hidden; }
@media (max-width: 768px) {
 .info-frame { width: calc(100% - 32px); grid-template-columns: 1fr; padding: 16px 24px; border-radius: 20px; }
 .info-frame > .location-group, .info-frame > .hours-group, .info-frame > .contact-group { width: 100%; padding: 22px 0; }
 .info-frame > div + div { border-left: 0; border-top: 1px solid rgba(59,42,24,.18); }
 .banner-container, .map-container { width: calc(100% - 32px); border-radius: 20px; }
 .artist-card { border-radius: 20px 20px 0 0; }
 .person-k, .person-y, .person-n, .person-g { border-radius: 0 0 20px 20px; }
}

/* Keep the original 400px map viewport; put footer spacing outside its clip. */
.faq-section { box-sizing: border-box; width: calc(100% - 56px); margin-inline: auto; padding: 32px; border-radius: 24px; }
.faq-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.map-container { height: 400px; margin-bottom: 10rem; isolation: isolate; }
.map-container #map { height: 100%; margin-bottom: 0; border-radius: inherit; }
@media (max-width: 768px) {
 .faq-section { width: calc(100% - 32px); padding: 24px 16px; border-radius: 20px; }
 .faq-container { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Keep the horizontal artist swipe seamless on mobile. */
@media (max-width: 768px) {
 .artist-card, .artist-card img, .person-k, .person-y, .person-n, .person-g { border-radius: 0; }
}

/* Brief wiggle every three seconds, without shifting the navigation layout. */
@keyframes appointment-wiggle {
 0%, 20%, 100% { rotate: 0deg; }
 4% { rotate: -3deg; }
 8% { rotate: 3deg; }
 12% { rotate: -2deg; }
 16% { rotate: 2deg; }
}
@media (prefers-reduced-motion: no-preference) {
 .home-navigation-book {
  transform-origin: center;
  animation: appointment-wiggle 3s ease-in-out 3s infinite;
 }
}

/* Intro transforms must not expand the mobile layout viewport. */
@media (max-width: 760px) {
 html { scrollbar-gutter: stable; overflow-x: clip; }
 body, .home-hero { overflow-x: clip; }
}

.home-hero .logo-container[role="button"]:focus-visible { outline: 2px solid #201810; outline-offset: 6px; border-radius: 12px; }

/* Matching columns keep each desktop portrait and biography together. */
@media (min-width: 769px) {
 .artist-frame, .artist-bios {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 12px; width: calc(100% - 56px); max-width: 1272px;
  margin-left: auto; margin-right: auto;
 }
 .artist-frame > .artist-card,
 .artist-bios > .person-k, .artist-bios > .person-y,
 .artist-bios > .person-n, .artist-bios > .person-g {
  width: 100%; min-width: 0; margin-left: 0; margin-right: 0;
 }
 .artist-bios > div { padding-left: 20px; padding-right: 20px; }
}

@media (min-width: 769px) { .artist-frame > .dots-container2 { display: none; } }