/* Keep the approved owner portrait complete at every viewport width. */
/* Seven navigation links need the compact menu on smaller laptops as well. */
@media (max-width: 1100px) {
  .header { height: 80px; padding: 0 24px; gap: 15px; }
  .header .brand { width: 122px; flex-shrink: 0; }
  .header-cta { margin-left: auto; min-height: 42px; padding: 11px 16px; font-size: 12px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; flex-shrink: 0; gap: 7px; background: transparent; width: 44px; height: 44px; padding: 10px; }
  .menu-toggle span { height: 1px; background: #fff; width: 23px; transition: transform .2s; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .navigation { display: none; position: absolute; top: 80px; left: 0; right: 0; background: var(--ink); padding: 20px 28px 30px; border-top: 1px solid #3b3d33; box-shadow: 0 20px 40px #0005; max-height: calc(100svh - 80px); overflow-y: auto; overscroll-behavior: contain; }
  .navigation.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .navigation a { padding: 14px 0; border-bottom: 1px solid #2f3227; font-size: 16px; }
}
@media (max-width: 580px) {
  .header { padding: 0 16px; gap: 10px; }
  .header .brand { width: 110px; }
  .header-cta { padding: 11px 12px; }
}

.owner-photo,
.nutrition-people figure {
  aspect-ratio: auto;
  width: 100%;
  min-width: 0;
}
.nutrition-people figure {
  max-width: 420px;
}
.owner-photo img,
.nutrition-people figure > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center;
  transform: none;
}
.owner-photo::after {
  display: none;
}
.owner-photo figcaption,
.nutrition-people figcaption {
  position: static;
  inset: auto;
  padding: 18px 22px;
  background: #111210;
  color: #fff;
}
.people-layout > *,
.nutrition-people > * {
  min-width: 0;
}

@media (max-width: 820px) {
  .navigation.is-open {
    max-height: calc(100vh - 80px);
    max-height: calc(100svh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 760px) {
  .people-layout {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 32px;
  }
  .owner-photo {
    align-self: center;
    max-width: 360px;
  }
  .nutrition-people {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .nutrition-people figure {
    max-width: 360px;
    justify-self: center;
  }
}

@media (max-width: 380px) {
  .nutrition-hero h1 {
    font-size: clamp(40px, 13vw, 49px);
  }
  .hero-proof {
    gap: 6px;
    font-size: 10px;
  }
  .photo-dialog-controls {
    gap: 8px;
  }
  .photo-dialog-controls button {
    padding: 8px 10px;
  }
}