/* TABLET */
@media (max-width: 1024px) {
  .navbar { padding: 0 5%; }
  .home-content, .about-content, .proj-detail { padding-left: 5%; padding-right: 5%; }
  .triptych { grid-template-columns: 1fr; }
  .triptych-col--int { border-left: none; border-right: none; border-top: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border); }
  .sh-map-grid { height: 300px; }
  .ml-charts { grid-template-columns: 1fr; }
  .cm-wrap { grid-template-columns: 1fr; }
}

/* MOBILE */
@media (max-width: 768px) {
  body, html { overflow-x: hidden; max-width: 100%; }
  .page { overflow-x: hidden; }

  .navbar { padding: 0 18px; }
  .home-content, .about-content, .proj-detail { padding-left: 18px; padding-right: 18px; max-width: 100%; }

  /* Project cards — JS skips positioning, CSS takes over */
  .cards-grid { position: static; height: auto !important; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
  .proj-card { position: relative; width: 100% !important; left: auto; top: auto; transform: none; }
  .proj-card:hover { transform: none; }

  /* About cards — JS skips positioning, CSS takes over */
  .about-cards-wrap { position: static; height: auto !important; display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
  .about-card { position: relative; width: 100% !important; left: auto; top: auto; transform: none; height: 420px; }

  /* Journey map — 3-column grid on mobile */
  .journey-map { padding: 24px 18px; }
  .journey-stages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .journey-stage:not(:last-child)::after { display: none; }
  .journey-stage-label { font-size: 10px; }
  .journey-stage-note { display: none; }
  .journey-emotion-row { display: none; }

  /* Detail page */
  .about-row, .two-col, .artifact-two { grid-template-columns: 1fr; }
  .detail-meta { grid-template-columns: 1fr 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .persona-card { grid-template-columns: 1fr; }
  .persona-sections { grid-template-columns: 1fr; }
  .sh-register { overflow-x: auto; }
  .sh-table { min-width: 600px; }
  .sq-grid { grid-template-columns: 1fr 1fr; }
  .sq-card { border-right: none; border-bottom: 1px solid var(--border); }
  .sq-card:last-child { border-bottom: none; }
  .survey-table { min-width: 700px; }
  .survey-wrap { overflow-x: auto; }
  .hero-video-wrap { width: 70%; }

  /* Footer */
  .footer { position: static; width: 100%; box-sizing: border-box; }

  /* Nav */
  .nav-cta { display: none; }
  .nav-logo-first, .nav-logo-last { font-size: 13px; }

  /* Misc */
  .illus-wrap { width: 100%; }
  .brochure-wrap img { max-width: 100%; }
  .sh-map-grid { height: 260px; }
  .sq-grid { grid-template-columns: 1fr; }
  .cm-grid { grid-template-columns: 80px 1fr 1fr; }
  .pie-wrap { flex-direction: column; align-items: flex-start; }
  .pie-svg { width: 120px; height: 120px; }
  .hero-video-wrap { width: 90%; }
}