/* ══════════════════════════════════════════
   MOBILE — ≤ 768px
══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Nav: no padding-jump animation when returning to top ── */
  #nav.nav--dismissing { animation: none !important; }

  /* ── Hero overflow clip ── */
  #scene { overflow: hidden; }


  /* ── Nav ── */
  #nav { padding: 4.5vw 4vw; }
  .nav-name { font-size: clamp(12px,3.2vw,18px); }
  .nav-links { gap: 3.5vw; }
  .nav-links li a { font-size: clamp(12px,3.2vw,18px); }

  /* ── Contact overlay ── */
  .contact-links {
    flex-direction: column;
    align-items: flex-start;
    width: 80vw;
    gap: 4.5vh;
  }

  /* ── Proficiency ── */
  #proficiency .inner { width: 90vw; padding: 10vh 0; }
  .proficiency-content { flex-direction: column; gap: 5vh; }
  .skill-row { flex-direction: column; align-items: flex-start; gap: 1.5vw; }
  .skill-label { width: auto; text-align: left; font-size: 13px; }
  .dot { width: 5.5vw; height: 5.5vw; }
  .dots { gap: 2vw; flex-wrap: wrap; }
  .prof-stats { flex-direction: row; flex-wrap: wrap; gap: 6vw; }

  /* ── Highlights ── */
  #highlights .inner { width: 90vw; padding: 12vh 0 8vh; }
  .hl-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 58vw 45vw 54vw 54vw;
    grid-auto-rows: unset;
    gap: 8px;
  }
  .hl-headline-block { grid-column: 1/3; grid-row: 1; align-items: flex-start; }
  .hl-card-1 { grid-column: 1/3; grid-row: 2; }
  .hl-card-2 { grid-column: 1/2; grid-row: 3; }
  .hl-card-3 { grid-column: 2/3; grid-row: 3; }
  .hl-card-4 { grid-column: 1/3; grid-row: 4; }
  .hl-card-5 { grid-column: 1/3; grid-row: 5; }

  /* ── Work page ── */
  #work-page { width: 90vw; padding: 20vw 0 8vw; }
  #filters { gap: 5vw; margin-bottom: 3.5vh; }
  .project-row { grid-template-columns: 72px 1fr; gap: 4vw; padding: 2.5vh 0; }
  .project-right { display: none; }
  .proj-thumb { width: 72px; height: 72px; }

  /* ── About ── */
  .about-page { height: auto; min-height: 100vh; padding-top: 20vw; }
  .bio { width: 90vw; }
  .about-main { flex-direction: column; width: 90vw; gap: 0; }
  .about-left { width: 100%; }
  .about-visual { display: block; position: relative; }
  .about-img { width: 100%; height: auto; object-fit: unset; }
  .who-me {
    position: absolute; top: 0; left: 0;
    margin-left: 0; padding: 3vw;
    font-size: clamp(36px,9vw,60px);
  }
  .about-right { width: 100%; padding: 3vh 0 2vh; }
  .about-footer { width: 90vw; }

  /* ── Project pages ── */
  .proj-hero-accent { height: 100%; }
  .proj-hero { padding: 0 5vw calc(12vh + 4vw); }
  .proj-content { width: 90vw; }
  .stats-row { gap: 6vw; padding-bottom: 4vh; margin-bottom: 4vh; }
  .details { grid-template-columns: 1fr; gap: 4vh; }
  .project-nav { width: 90vw; flex-direction: column; gap: 4vh; }
  .proj-nav-next { align-items: flex-start; text-align: left; }
  .proj-nav-next .proj-nav-title::after { transform-origin: left; }
  #view-project-3 .project-gallery,
  #view-project-4 .project-gallery { width: 90vw; }

  /* ── Footer ── */
  .page-footer-simple { width: 90vw; }
}

/* ── Extra small (≤ 420px) ── */
@media (max-width: 420px) {
  .dot { width: 6.5vw; height: 6.5vw; }
}