/* ============================================================
   Responsive layers — 1200 / 1024 / 820 / 480 breakpoints.
   ============================================================ */

@media (max-width:1200px){
  .social-rail,.hero-rail{display:none!important}          /* reclaim the gutter before the grid squeezes */
  .hero-copy{padding-left:0}
}

@media (max-width:1024px){
  .hero{min-height:auto;padding:calc(var(--nav-h) + 20px) 0 44px}
  .hero-inner{grid-template-columns:1fr;gap:32px}
  .hero-copy{order:1;margin-top:0;padding-left:0}
  .hero-title{font-size:2.35rem}
  .hero-portrait-wrap{
    order:2;margin-left:0;margin-top:16px;min-height:auto;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .hero-portrait{width:min(360px,85%);max-height:460px}
  .hero-code-bg{width:min(430px,94%);top:6%}
  .bio-card{
    position:relative!important;left:auto!important;bottom:auto!important;
    margin:18px auto 0!important;width:100%!important;max-width:380px!important;
    transform:none!important;animation:none!important;
  }

  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-visual{order:-1}
  .orbit-wrap{width:min(380px,88%)}
  .about-lower{grid-template-columns:minmax(0,260px) 1fr;gap:26px;margin-top:52px}

  .toolbox-grid{grid-template-columns:repeat(4,1fr)}
  .toolbox-card{grid-column:span 2}
  .toolbox-card.is-wide{grid-column:span 2}

  .contact-grid{grid-template-columns:1fr}
  .section{padding:84px 0}
}

@media (max-width:820px){
  :root{--nav-h:64px}

  .main-nav{justify-content:space-between;gap:.5rem}
  .brand{gap:.55rem}
  .brand-text{display:inline-block;font-size:.95rem;font-weight:700}
  
  .nav-actions{margin-left:auto;gap:.5rem}
  .nav-actions .nav-talk-btn{display:none}
  .nav-palette{display:none}
  .nav-burger{display:inline-flex}

  /* mobile drawer */
  .nav-links{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;gap:.35rem;margin:0;
    padding:1.2rem var(--gutter) 1.8rem;
    background:color-mix(in srgb,var(--bg-alt) 97%,transparent);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border);box-shadow:var(--shadow);
    transform:translateY(-145%);opacity:0;pointer-events:none;
    transition:transform var(--dur) var(--ease-out),opacity var(--dur-fast);
  }
  .nav-links.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav-link{padding:.8rem 1.1rem;font-size:1.02rem;border-radius:12px}
  .nav-drawer-cta{display:block;margin-top:.8rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.08)}
  .nav-drawer-talk-btn{display:flex;width:100%;justify-content:center;padding:.8rem 1.2rem;font-size:.92rem}
  .nav-resume{display:none}

  .section{padding:56px 0}
  .section-head{margin-bottom:34px}
  .hero{min-height:auto;padding:calc(var(--nav-h) + 16px) 0 38px}
  .hero-desc{font-size:.97rem}
  .hero-statrow{gap:1.6rem}
  .hero-stat + .hero-stat{padding-left:1.6rem}
  .hero-stat-num{font-size:1.85rem}
  .scroll-hint{display:none}

  /* Compact mobile About section */
  .about-grid{display:flex;flex-direction:column;gap:22px}
  .about-visual{order:-1;margin-bottom:0;display:flex;justify-content:center}
  .orbit-wrap{width:240px;height:240px;aspect-ratio:1;margin:0 auto}
  .orbit-hub{width:44px;height:44px;border-radius:13px;font-size:.98rem}
  .orbit-node{width:34px;height:34px;border-radius:10px;font-size:.8rem}
  
  .about-text .pill-badge{margin-bottom:.75rem}
  .about-text .display-heading{font-size:clamp(1.85rem,7.5vw,2.15rem);line-height:1.16;margin-bottom:1.1rem}
  .about-text p{font-size:.95rem;line-height:1.7;color:var(--text-dim);margin:0}
  .about-text p + p{margin-top:18px}
  .about-tags{margin-top:1.2rem;gap:.5rem}
  .tag{padding:.35rem .75rem;font-size:.8rem}

  .about-lower{grid-template-columns:1fr;gap:28px;margin-top:44px}
  .portrait{max-width:320px;margin-inline:auto}
  .about-stats{grid-template-columns:1fr 1fr;gap:12px}
  .stat-card{padding:1.3rem .9rem}
  .stat-num{font-size:1.75rem}

  .toolbox-grid{grid-template-columns:1fr;gap:14px}
  .toolbox-card,.toolbox-card.is-wide{grid-column:span 1}
  .proficiency{padding:1.3rem}
  .proficiency-grid{gap:24px}

  .marquee{transform:rotate(-2deg) scaleX(1.1)}
  .marquee-track span{font-size:.9rem}

  .projects-grid{grid-template-columns:1fr}
  .project-toolbar{flex-direction:column;align-items:stretch}
  .search-wrap{max-width:none}
  .filter-group{overflow-x:auto;padding-bottom:.3rem;flex-wrap:nowrap}
  .filter-btn{flex:none}

  .field-row{grid-template-columns:1fr}
  .contact-form{padding:1.4rem}
  .timeline{padding-left:26px}
  .timeline-card{padding:1.3rem}
  .timeline-card:hover{transform:none}
  .footer-inner{flex-direction:column;text-align:center}
  .modal-panel{padding:1.5rem;max-height:90vh}
  .modal-head{flex-direction:column;align-items:flex-start;padding-right:2rem}
  .back-to-top{bottom:18px;right:18px;width:44px;height:44px}
  .cursor-glow{display:none}

  /* Tilt is pointer-driven; neutralise the 3D offset on touch. */
  .tilt-inner{transform:none}
}

@media (max-width:480px){
  :root{--gutter:16px}
  .hero{padding:calc(var(--nav-h) + 12px) 0 32px}
  .hero-title{font-size:clamp(1.72rem,7.4vw,2.15rem);line-height:1.22;margin-bottom:1.4rem}
  .hero-title-inline{gap:.75rem;margin-top:.35rem}
  .hero-success-pill{margin-left:0;padding:.26rem .72rem .26rem .32rem}
  .hero-statrow{gap:1.4rem}
  .hero-stat + .hero-stat{padding-left:1.4rem}
  .hero-stat-num{font-size:1.75rem}
  
  .hero-portrait-wrap{margin-top:14px}
  .hero-portrait{width:min(290px,88%);max-height:380px}
  .hero-code-bg{width:min(340px,96%);top:2%}
  .bio-card{
    position:relative!important;margin:14px auto 0!important;
    padding:1rem 1.15rem!important;border-radius:16px!important;
    max-width:100%!important;
  }
  .bio-card p{font-size:.8rem;line-height:1.55;margin-bottom:.75rem}
  .bio-cta{padding:.48rem 1.1rem;font-size:.78rem}

  /* Orbital graphic sized ~220px on small screens */
  .about-grid{gap:18px}
  .orbit-wrap{width:220px;height:220px}
  .orbit-node{width:30px;height:30px;font-size:.72rem;border-radius:8px}
  .orbit-hub{width:40px;height:40px;font-size:.9rem;border-radius:11px}
  .about-text .display-heading{font-size:2rem;line-height:1.15}
  .about-text p{font-size:.92rem;line-height:1.68}
  .about-text p + p{margin-top:16px}

  .stat-num{font-size:1.55rem}
  .stat-card{padding:1.15rem .75rem}
  .modal-actions .btn{width:100%}
  .footer-links{flex-wrap:wrap;justify-content:center;gap:.9rem}
}