/* Vespella: proportional desktop refinement of the two secondary pages.
   All titles, headers and section top offsets follow the shared site system.
   Pictures keep their intrinsic 16:9 / 4:3 proportions. */
@media (min-width: 980px) {
  body[data-page="how"] .how-grid,
  body[data-page="how"] .how-grid.is-compact-session {
    grid-template-columns: minmax(0, 1.30fr) minmax(0, 1fr);
    gap: clamp(28px, 3vw, 55px);
  }
  body[data-page="how"] .how-photo,
  body[data-page="how"] .how-grid.is-viewport-fit .how-photo {
    aspect-ratio: 1672 / 941;
    width: 100%;
    height: auto;
    align-self: center;
  }
  body[data-page="how"] .how-photo > img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  body[data-page="how"] .meeting-steps h2 {
    font-size: clamp(26px, 1.7vw, 28px);
  }
  body[data-page="how"] .meeting-steps p {
    font-size: 12.25px;
  }
  body[data-page="contacts"] .contacts-grid.is-viewport-fit {
    grid-template-columns:
      minmax(0, min(46%, calc(var(--contacts-panel-height) * 1.38)))
      minmax(0, 1fr);
  }
  body[data-page="contacts"] .contacts-portrait {
    aspect-ratio: 4 / 3;
  }
  body[data-page="contacts"] .contacts-portrait > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  body[data-page="contacts"] .contact-value {
    font-size: clamp(14px, 1.24vw, 18.5px);
  }
}
/* Mobile/tablet pages use their original proven stacking and spacing. */