/* ==========================================================================
   RESPONSIVE — consolidated breakpoints
   Mobile-first content stays intact; only layout/scale changes here.
   ========================================================================== */

/* ---- ≤ 1360px : keep the hero medallion inside the viewport ----
   At narrower widths the term card reaches closer to the page edge,
   so the badge's right overhang is pulled in to avoid clipping.
   Must precede the ≤980 left-flip rule. */
@media (max-width: 1360px){
  .scene-badge{ right: -20px; }
}

/* ---- ≤ 980px : two-column layouts collapse, nav still desktop ---- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; gap: 40px; }
  .doodle-2{ display: none; }
  .scene-badge{ left: -18px; right: auto; bottom: -38px; }
  .project-grid{ grid-template-columns: 1fr 1fr; }
  .project-card:nth-child(2), .project-card:nth-child(3){ margin-top: 0; }
  .wid-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ---- ≤ 860px : header switches to mobile nav ---- */
@media (max-width: 860px){
  .nav-links, .header-github{ display: none; }
  .menu-toggle{ display: flex; }
  .mobile-nav{ display: block; }
}

/* ---- ≤ 900px : about grid stacks ---- */
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; gap: 36px; }
}

/* ---- ≤ 720px : container padding, project cards single column ---- */
@media (max-width: 720px){
  .wrap{ padding: 0 20px; }
  .hero{ padding: 44px 20px 40px; }
  .projects, .whatido, .about, .contact{ padding-left: 20px; padding-right: 20px; }
  /* keep the floating pill's own padding (it is also a .wrap) */
  .header-inner{ padding: 10px 14px; }
  .site-header.scrolled .header-inner{ padding-top: 8px; padding-bottom: 8px; }
}

/* ---- ≤ 700px : project grid single column, status pill compact, annotations hide ---- */
@media (max-width: 700px){
  .project-grid{ grid-template-columns: 1fr; }
  .project-annot{ display: none; }
  .annot-hero{ display: none; }
  .card-status{ font-size: 10px; padding: 3px 8px 3px 6px; }
  /* with 20px gutters the flipped badge's left overhang would clip;
     pull it in so the medallion stays fully visible */
  .scene-badge{ left: -2px; }
}

/* ---- ≤ 640px : stats row, contact banana ---- */
@media (max-width: 640px){
  .stats-row{ grid-template-columns: repeat(3, 1fr); }
  .contact-banana{ display: none; }
}

/* ---- ≤ 600px : sticky note & three-mount scale down ---- */
@media (max-width: 600px){
  .sticky-note{ top: -16px; right: 0; width: 108px; font-size: 13.5px; }
}

/* ---- ≤ 560px : hero scene badge smaller ---- */
@media (max-width: 560px){
  .scene-badge{ width: 108px; height: 108px; }
  .three-mount{ width: 78px; height: 78px; }
  .scene-badge-label{ font-size: 9px; padding: 2px 7px; }
}

/* ---- ≤ 520px : what-i-do single column ---- */
@media (max-width: 520px){
  .wid-grid{ grid-template-columns: 1fr; }
}

/* ---- ≤ 480px : compact brand so the floating pill fits ----
   Victor Mono's wide metrics make the full brand + hamburger exceed
   the pill at ~360–390px, so the tagline hides and the name tightens. */
@media (max-width: 480px){
  .brand-sub{ display: none; }
  .brand-name{ font-size: 16px; }
  .brand{ min-width: 0; }
  .header-inner{ gap: 12px; padding: 8px 12px; }
  .site-header{ padding: 0 10px; }
  .site-header.scrolled .header-inner{ padding-top: 7px; padding-bottom: 7px; }
}