/* responsive.css — breakpoints for the "WB Monogram" variant.
   Loaded last so these rules override the desktop defaults. The texture
   and depth effects all still hold down to 390px. */

/* ----- Tablet / small laptop ----- */
@media (max-width: 980px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-watermark { width: 280px; }
}

/* ----- Mobile ----- */
@media (max-width: 720px) {
  /* collapse the desktop nav, show the hamburger */
  .nav-toggle { display: flex; }

  .site-header__nav {
    position: fixed;
    inset: 78px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(15, 14, 12, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--elev-2);
    padding: 1rem var(--gutter) 1.5rem;
    transform: translateY(-130%);
    transition: transform 260ms ease;
  }
  .site-header__nav.is-open { transform: translateY(0); }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-link {
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-link::after { display: none; }
  .nav-link:hover,
  .nav-link[aria-current="page"] { color: var(--accent); }
  .site-header__nav .btn { margin-top: 1rem; }

  /* single-column everything */
  .grid--4,
  .grid--3,
  .grid--2,
  .split,
  .form-grid,
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }

  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
  .cta-band .btn { width: 100%; }
  .cta-band__watermark { opacity: 0.04; max-width: 70%; }

  .btn-row .btn { width: 100%; }

  .site-footer__bottom { flex-direction: column; }

  /* hero copy was capped narrow — let it use the column on small screens */
  .hero__inner { max-width: 100%; }
}

/* ----- Small phones (390px target) ----- */
@media (max-width: 460px) {
  .gallery-grid,
  .gallery-strip { grid-template-columns: 1fr; }
  .logo__name { font-size: 1.12rem; }
  .logo__mark { width: 58px; height: 38px; }
  .logo__sub { letter-spacing: 0.26em; }
  .logo__sub::before,
  .logo__sub::after { width: 9px; }
  .pillar { padding: 1.6rem 1.4rem; }
  .pillar__icon { width: 56px; height: 56px; }
  .pillar__icon svg { width: 26px; height: 26px; }
  .cta-band { padding: 2rem 1.5rem; }
  .scroll-cue { display: none; }
}