/* responsive — every media query, kept together and loaded last so the
   cascade is identical to the single-file stylesheet this replaced. */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .gallery-grid--4col { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .bio-section { grid-template-columns: 1fr; }
  .facts-card { position: static; }
}

@media (max-width: 767px) {
  /* On mobile the hero falls back to the vertical portrait, so the subject fills the
     frame and sits directly under the copy. Weight the scrim harder for legibility. */
  .hero__bg { filter: brightness(0.5); }
  .hero__overlay {
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--bg) 96%, transparent) 0%,
      color-mix(in srgb, var(--bg) 75%, transparent) 45%,
      color-mix(in srgb, var(--bg) 35%, transparent) 100%
    );
  }
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    top: var(--nav-h);
    background: var(--bg);
    align-items: center;
    justify-content: center;
    gap: 2rem;
    z-index: 99;
  }
  .nav__links.open a {
    font-size: 1rem;
    letter-spacing: 0.2em;
  }
  .nav__toggle { display: flex; }

  .about-teaser { grid-template-columns: 1fr; }
  .gallery-grid--4col,
  .gallery-grid--3col { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 480px) {
  .gallery-grid--4col,
  .gallery-grid--3col { grid-template-columns: 1fr 1fr; }
  .about-teaser__facts { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 1rem; text-align: center; }
}