/* ============================================================
   SEVEROOS PORTFOLIO — RESPONSIVE
   ============================================================ */

/* ---------- large desktop tune-down ---------- */
@media (max-width: 1180px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- tablet ---------- */
@media (max-width: 980px){
  main > section, .footer{ padding: 100px var(--gutter); }

  .nav-links{ display: none; }
  .nav-burger{ display: block; }
  .nav-cta{ display: none; }

  .about-grid{ grid-template-columns: 1fr; gap: 32px; }
  .about-stats{ gap: 32px; }

  .notes-list{ grid-template-columns: repeat(2, 1fr); }
  .notes-list .note-card:last-child{ grid-column: span 2; }
  .note-card:last-child .note-media{ aspect-ratio: 21/9; }

  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .gallery-item.wide{ grid-column: span 2; }

  .contact-grid{ grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- mobile menu overlay ---------- */
@media (max-width: 980px){
  .nav-links.open{
    display: flex; flex-direction: column;
    position: fixed; inset: 0; top: 0;
    padding: 110px var(--gutter) 40px;
    background: var(--bg);
    gap: 22px; z-index: 400;
  }
  .nav-links.open a{ font-size: 22px; font-family: var(--font-display); color: var(--text); }
  .nav-burger.open span:first-child{ transform: translateY(8px) rotate(45deg); }
  .nav-burger.open span:last-child{ transform: translateY(-1px) rotate(-45deg); }
}

/* ---------- small tablet / large phone ---------- */
@media (max-width: 720px){
  .services-grid{ grid-template-columns: 1fr; }
  .notes-list{ grid-template-columns: 1fr; }
  .notes-list .note-card:last-child{ grid-column: span 1; }
  .note-card:last-child .note-media{ aspect-ratio: 4/3; }

  .gallery-grid{ grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .gallery-item.wide, .gallery-item.tall{ grid-column: span 1; grid-row: span 1; }

  .about-stats{ gap: 26px; }
  .stat-num{ font-size: 32px; }

  .hero-marquee{ margin-top: 56px; }
}

/* ---------- phone ---------- */
@media (max-width: 560px){
  main > section, .footer{ padding: 80px 22px; }

  .hero-inner{ padding-top: 70px; }
  .hero-title{ font-size: clamp(38px, 12vw, 56px); }
  .hero-sub{ font-size: 15.5px; }
  .btn{ font-size: 13.5px; padding: 13px 22px; }

  .project-link{ grid-template-columns: 40px 1fr; row-gap: 10px; }
  .project-meta{ grid-template-columns: 1fr; gap: 4px; justify-items: start; }

  .footer-top{ flex-direction: column; align-items: flex-start; }
  .footer-bottom{ flex-direction: column; }

  .cursor-dot, .cursor-ring{ display: none; }
}