/* Responsive breakpoints */
@media (max-width: 1024px) {
  :root { --text-3xl: 2.5rem; --text-2xl: 1.75rem; }
  .hero-title { font-size: var(--text-3xl); }
  .nav-menu { position: fixed; top: calc(var(--space-4) + 56px); left: var(--space-3); right: var(--space-3); background: var(--glass-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); flex-direction: column; align-items: stretch; padding: var(--space-3); gap: var(--space-1); border: 1px solid var(--border-glass); border-radius: var(--border-radius-lg); box-shadow: 0 20px 50px rgba(2, 6, 16, 0.6); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal); }
  .nav-menu.open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-link { padding: var(--space-3) var(--space-4); width: 100%; text-align: center; border-radius: 999px; }
  .nav-link.active { box-shadow: none; }
  .nav-toggle { display: block; }
  .nav-chat { display: none; }
  .projects-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .case-study-body { grid-template-columns: 1fr; }
  .case-study-sidebar { order: -1; }
  .hero-container { flex-direction: column; justify-content: flex-start; padding: 14vh var(--space-6) 0 var(--space-14); }
  .hero-content { max-width: none; text-align: left; }
  .hero-actions { justify-content: flex-start; }
  .skill-line { grid-template-columns: 1fr; gap: var(--space-2); }
  .about-grid { grid-template-columns: 1fr; }
  .desk-grid { grid-template-columns: 1fr; }
  .experiments-grid { grid-template-columns: 1fr 1fr; }
  .ideas-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .loading-panel { grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
  .contact-hero { grid-template-columns: 1fr; align-items: start; }
  .footer-status { grid-template-columns: repeat(2, auto); }
}

@media (max-width: 768px) {
  :root { --space-10: 3rem; --space-8: 2rem; --text-3xl: 2rem; --text-2xl: 1.5rem; }
  .section { padding: var(--space-8) 0; }
  .hero-content { padding: var(--space-4); }
  .hero-subtitle { font-size: var(--text-base); }
  .hero-actions .btn { flex: 1 1 auto; min-height: 48px; }
  .about-grid { gap: var(--space-5); }
  .about-stats { justify-content: center; gap: var(--space-5); }
  .projects-grid { grid-template-columns: 1fr; }
  .footer-grid { flex-direction: column; text-align: center; }

  /* contact stacks: aside cards above the form panel */
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-6); }
  .contact-form { padding: var(--space-4); }
  .contact-note { display: none; }
  .case-study-container { width: 100%; max-width: none; max-height: 100vh; border-radius: 0; height: 100vh; height: 100dvh; }
  .case-study-content { max-height: calc(100dvh - 100px); padding: var(--space-4); -webkit-overflow-scrolling: touch; }
  .case-study-title { font-size: var(--text-2xl); }
  .case-study-nav { padding: var(--space-2) var(--space-3); }
  .progress-bar { width: 80px; }

  /* compact rows stack gracefully */
  .ach-row { flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-3); }
  .ach-main { order: 1; flex-basis: 100%; }
  .ach-icon { order: 0; }
  .ach-description { padding-left: 0; }

  /* journey: vertical timeline stacks */
  .timeline-entry { grid-template-columns: 2.6rem 1fr; gap: var(--space-3); }
  .timeline-node { width: 2.6rem; height: 2.6rem; margin-left: -3.1rem; font-size: 0.44rem; }
  .timeline { padding-left: 3.1rem; }

  /* filter bar: horizontal scroll instead of wrapping mess */
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; }
  .project-search { flex: 0 0 10.5rem; }
  .project-search { flex: 0 0 10.5rem; }

  /* chat panel takes most of the viewport on small screens */
  .chat-panel { right: 0.6rem; left: 0.6rem; width: auto; bottom: 4.4rem; max-height: min(30rem, calc(100dvh - 6rem)); }
  .chat-fab { right: 0.8rem; bottom: 0.8rem; }

  /* experiments + desk collapse to single columns */
  .experiments-grid { grid-template-columns: 1fr; }
  .desk-surface { grid-template-columns: 1fr 1fr; }
  .desk-item { min-height: 7rem; }
  .loading-chips { grid-template-columns: 1fr; }
  .ideas-cards { grid-template-columns: 1fr; }
  .about-notes { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hero-container { padding-left: var(--space-4); }
}

@media (max-width: 480px) {
  :root { --text-base: 0.9375rem; --space-14: 5.25rem; }
  .btn { padding: var(--space-3) var(--space-4); min-height: 48px; font-size: var(--text-sm); }
  .nav-logo { font-size: var(--text-base); }
  .nav-chat { padding: var(--space-2) var(--space-3); font-size: 0.6rem; }
  /* corner music toggle tucks tighter into the corner on phones */
  .bgm-toggle { top: 0.6rem; right: 0.6rem; }
  .filter-btn { padding: var(--space-2) var(--space-3); font-size: 0.7rem; min-height: 40px; }
  .project-card-inner { border-radius: var(--border-radius); }
  .project-card-content { padding: var(--space-3); }
  .stat-value { font-size: var(--text-2xl); }
  .case-study-title { font-size: var(--text-xl); }
  .spec-grid { grid-template-columns: 1fr; gap: var(--space-1); }
  .spec-grid dt { margin-bottom: var(--space-1); }

  /* iOS zoom-on-focus: inputs must be >= 16px */
  .form-group input, .form-group textarea { font-size: 16px; }

  /* robot bookend mode only: dim slightly, never cover content */
  .bg-scene { opacity: 0.85; }

  /* scroll cue re-added (hero-visibility driven); place it above the buttons */
  .scroll-indicator { display: block; bottom: 110px; }

  /* the fixed rail is redundant with mobile nav; free the edge */
  .journey-rail { display: none; }

  /* boot shell tightens up */
  .boot-lines { min-height: 9.5rem; }

  /* desk tiles become single column, detail panel breathes */
  .desk-surface { grid-template-columns: 1fr; }
  .desk-item { min-height: 6rem; }
  .contact-form { padding: var(--space-4); }
  .footer-status { gap: var(--space-5); }
}

/* Touch devices: hover-only affordances become always-visible */
@media (hover: none) {
  .project-card-border { opacity: 0.5; }
  .explore-btn .arrow { transform: translateX(4px); }
}

/* Low performance / reduced motion handled in variables.css */
@media (prefers-reduced-motion: reduce) {
  .project-card-inner { transition: none !important; transform: none !important; }
  .project-card:hover .project-card-inner { transform: none !important; }
  .case-study-overlay { transition: none !important; }
  .conn-path { stroke-dashoffset: 0 !important; transition: none !important; }
  .diagram-node { transform: none !important; animation: none !important; }
}