/*
  17 August 2026 menu/mobile revision.
  Keep Inner Light Healing Group and Book visible at the top at every width.
*/
.explicit-menu-header {
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.explicit-menu-header .explicit-top-nav {
  flex: 1 1 32rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

@media (max-width: 900px) {
  .explicit-menu-header { align-items: flex-start; }
  .explicit-menu-header .explicit-top-nav {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .explicit-menu-header {
    gap: .8rem 1rem;
  }
  .explicit-menu-header .explicit-top-nav {
    display: flex;
    width: 100%;
    gap: .7rem 1.1rem;
    padding: 0;
    background: transparent;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .explicit-menu-header .explicit-top-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-family: var(--font-body);
    font-size: clamp(.63rem, 2.65vw, .72rem);
    font-weight: 600;
    letter-spacing: .065em;
    line-height: 1.35;
    text-transform: uppercase;
  }
  .explicit-menu-header .explicit-top-nav a:not(.book-link) {
    max-width: min(72vw, 17rem);
  }
  .explicit-menu-header .book-link {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: .55rem .8rem;
  }
}

@media (max-width: 360px) {
  .explicit-menu-header .explicit-top-nav {
    align-items: center;
    gap: .6rem .75rem;
  }
  .explicit-menu-header .explicit-top-nav a {
    font-size: .6rem;
    letter-spacing: .045em;
  }
}

/*
  17 August 2026 image correction.
  Preserve source proportions and align the two main photographs to the content grid.
*/
.hero-image,
.portrait {
  min-width: 0;
}

.hero-image picture,
.portrait picture {
  display: block;
  width: 100%;
}

.hero-image img,
.portrait img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
}

.hero-image img {
  object-fit: contain;
}

.portrait img {
  object-fit: contain;
  object-position: center;
}

@media (max-width: 760px) {
  .hero-image,
  .portrait {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}