/* ==========================================================================
   BUILT IN SILENCE — RESPONSIVE / MEDIA QUERIES
   ==========================================================================
   Every @media rule in the site lives here, ordered from largest to
   smallest breakpoint, plus the accessibility rule at the end.

   Do not add breakpoints to styles.css or animations.css — if it starts
   with "@media", it belongs in this file.
   ========================================================================== */


/* ---------- tablet / small desktop (<= 900px) ---------- */
@media (max-width: 900px) {
  #page-home .page-inner { flex-direction: column-reverse; }
  .home-visual { flex: none; height: 46vh; }
  .home-content { padding: 40px clamp(22px, 6vw, 60px) 20px; }
  .emotion-figure { width: 60vw; margin-bottom: 2vh; }
  #page-contact .page-inner { grid-template-columns: 1fr; gap: 36px; }
  .preview-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ---------- mobile nav swap: desktop links -> hamburger (<= 640px) ---------- */
@media (max-width: 640px) {
  .nav-links-desktop { display: none; }
  .hamburger { display: flex; }
}


/* ---------- small phones (<= 560px) ---------- */
@media (max-width: 560px) {
  nav {
    padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
  }
  .nav-links { gap: 16px; font-size: 9px; }
  .page-inner { padding-left: 22px; padding-right: 22px; padding-top: 84px; }
  .stat-row { gap: 32px; }
  .hero-mark { font-size: clamp(36px, 11vw, 60px); }
}


/* ---------- accessibility: respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .page.active { opacity: 1; transform: none; }
}