/* ============================================================
   responsive.css — Media queries
   ============================================================ */

@media (hover:none){.cglow{display:none}}

/* ============================================================
   ≤ 1200px
   ============================================================ */
@media (max-width:1200px){
  :root{--wrap-max:1100px;--wrap-x:1.75rem}
}

/* ============================================================
   ≤ 1000px
   ============================================================ */
@media (max-width:1000px){
  :root{--wrap-x:1.5rem}

  .burger{display:grid}

  .links{
    position:fixed;inset:68px 0 auto 0;flex-direction:column;gap:.15rem;
    padding:1rem 1.5rem 1.5rem;background:var(--bg);border-bottom:1px solid var(--line);
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .25s,transform .25s;margin:0;
  }
  .nav.open .links{opacity:1;transform:none;pointer-events:auto}
  .links a{font-size:1.05rem;padding:.8rem 1rem}
  .nav-in{justify-content:space-between}
  .actions{margin-inline-start:auto}

  .about{grid-template-columns:1fr;gap:2rem}
  .portrait{position:relative;top:0;max-width:420px;margin-inline:auto}

  .contact{grid-template-columns:1fr;gap:2.5rem}
}

/* ============================================================
   ≤ 900px
   ============================================================ */
@media (max-width:900px){
  :root{--wrap-x:1.25rem}

  .hero{padding:100px 0 70px}
  .hero-name{font-size:clamp(1.6rem,5.5vw,2.8rem)}
  .hero-tag{font-size:.7rem;letter-spacing:.18em}

  .skills-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.85rem}
  .skill-card{padding:1rem 1.15rem;gap:1rem}
  .skill-ring{width:64px;height:64px}
  .sr-num{font-size:1.05rem}
  .skill-text h4{font-size:.95rem}

  .projects-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .research-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .certs-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
}

/* ============================================================
   ≤ 768px
   ============================================================ */
@media (max-width:768px){
  .hero{padding:95px 0 60px}
  .hero-name{font-size:clamp(1.4rem,6vw,2.4rem);gap:.03em;min-height:2.1em}
  .hero-tag-row{margin-top:.9rem}
  .hero-in .status,.hero-in .hero-name,.hero-in .hero-tag-row,.hero-in .role,.hero-in .sub,.hero-in .lede,.hero-in .cta,.hero-in .socials{max-width:100%}

  .roadmap{max-width:100%}
  .roadmap::before{left:20px;transform:none}
  .rm-item{grid-template-columns:40px 1fr;padding:1rem 0}
  .rm-marker{grid-column:1;justify-self:start;margin-inline-start:12px}
  .rm-content,.rm-content-left,.rm-content-right{grid-column:2;padding:0 0 0 1.25rem}
  [dir="rtl"] .rm-content,[dir="rtl"] .rm-content-left,[dir="rtl"] .rm-content-right{padding:0 1.25rem 0 0}
  .rm-content::after{display:none}
  .rm-content-center{grid-column:1 / -1;padding-inline-start:3rem}
  [dir="rtl"] .rm-content-center{padding-inline-start:0;padding-inline-end:3rem}

  .am-content{padding:1.4rem 1rem 2rem;font-size:.96rem}
  .am-content h4{font-size:1.08rem;margin-top:1.6rem}
  .am-lead{font-size:1rem}
  .am-table{font-size:.82rem;min-width:520px}
  .am-table th,.am-table td{padding:.55rem .75rem}
}

/* ============================================================
   ≤ 600px
   ============================================================ */
@media (max-width:600px){
  :root{--wrap-x:1rem}

  .hero{padding:90px 0 50px}
  .hero-name{font-size:clamp(1.2rem,6.5vw,2rem);letter-spacing:-.025em}
  .cursor{min-width:2px}
  .hero-tag{font-size:.66rem;letter-spacing:.15em;padding:.32rem .75rem;padding-inline-start:1.35rem}
  .hero-tag::before{width:5px;height:5px;inset-inline-start:.6rem}
  .role{font-size:1rem}
  .sub{font-size:.94rem}
  .lede{font-size:.96rem}
  .cta{gap:.55rem;margin-top:1.5rem}
  .btn{padding:.68rem 1.1rem;font-size:.88rem}
  .icon-btn{width:40px;height:40px}
  .socials{gap:.5rem;margin-top:1.25rem}
  .toggle-btn{padding:.35rem .7rem;min-width:40px;height:32px}
  .theme-btn{width:32px}
  .brand span{font-size:.95rem}

  .facts{grid-template-columns:1fr}
  .rm-card{padding:1.1rem 1.2rem}
  .rm-card h3{font-size:1rem}
  .rm-list li{font-size:.88rem}

  .skills-grid{grid-template-columns:1fr;gap:.75rem}
  .skill-card{padding:.9rem 1rem;gap:.85rem}
  .skill-ring{width:56px;height:56px}
  .sr-track,.sr-fill{stroke-width:2.5}
  .sr-num{font-size:1rem}
  .sr-pct{font-size:.58rem}
  .skill-text h4{font-size:.92rem}
  .skill-text p{font-size:.68rem;letter-spacing:.1em}

  .projects-grid{grid-template-columns:1fr}
  .project-card{padding:1.35rem}
  .project-icon{width:46px;height:46px;font-size:1.35rem}
  .project-body h3{font-size:1.1rem}
  .project-body p{font-size:.88rem}

  .project-modal{padding:0}
  .pm-dialog{width:100%;max-height:100vh;height:100vh;border-radius:0;border:none}
  .pm-header{padding:.9rem 1rem}
  .pm-toolbar{padding:.55rem 1rem}
  .pm-code-wrap{font-size:.76rem;padding:.9rem 0}
  .pm-line{padding-inline:1rem}
  .pm-line::before{width:2rem;margin-inline-end:.75rem}
  .pm-icon{width:38px;height:38px;font-size:1.15rem}
  .pm-title-wrap h3{font-size:.95rem}

  .research-grid{grid-template-columns:1fr}
  .research-card{padding:1.35rem}
  .research-icon{width:46px;height:46px;font-size:1.3rem}
  .research-body h3{font-size:1.05rem}
  .research-body p{font-size:.88rem}

  .article-modal{padding:0}
  .am-dialog{width:100%;height:100vh;max-height:100vh;border-radius:0;border:none}
  .am-header{padding:.9rem 1rem}
  .am-icon{width:38px;height:38px;font-size:1.15rem}
  .am-title-wrap h3{font-size:.92rem}
  .am-kicker{font-size:.66rem}

  .certs-grid{grid-template-columns:1fr}
  .cert-lightbox{padding:0}
  .cl-dialog{width:100%;height:100vh;max-height:100vh;border-radius:0;border:none}
  .cl-image-wrap img{max-height:calc(100vh - 7rem)}
  .cl-header{padding:.8rem 1rem}
  .cl-header h3{font-size:.92rem}
  .cl-btn{width:32px;height:32px}
  .cert-info{padding:.85rem 1rem}
  .cert-info h3{font-size:.95rem}

  .contact-info h2{font-size:clamp(1.9rem,6.5vw,2.8rem)}
  .cl-row{padding:.8rem 1rem;gap:.85rem}
  .cl-row .ib{width:36px;height:36px}
  .cl-row .v{font-size:.88rem}
  .contact-form{padding:1.3rem;gap:1rem}
  .cf-field input,.cf-field textarea{padding:.75rem .9rem;font-size:.94rem}
  .cf-submit{width:100%;justify-self:stretch;justify-content:center}
}

/* ============================================================
   ≤ 420px
   ============================================================ */
@media (max-width:420px){
  :root{--wrap-x:.85rem}

  .hero-name{font-size:clamp(1.1rem,7vw,1.7rem)}
  .hero-tag-row{margin-top:.8rem}
  .actions{gap:.4rem}
  .brand svg{width:26px;height:26px}

  .roadmap::before{left:14px}
  .rm-item{grid-template-columns:32px 1fr}
  .rm-marker{margin-inline-start:6px}
  .rm-dot{width:14px;height:14px}
  .rm-dot-start{width:17px;height:17px}
  .rm-dot-final{width:19px;height:19px}

  .skill-ring{width:52px;height:52px}
  .sr-num{font-size:.92rem}
  .sr-pct{font-size:.55rem}
  .skill-text h4{font-size:.86rem}
  .skill-text p{font-size:.62rem}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .up{opacity:1;transform:none}
  .hero-tag-row{opacity:1}
  .js .rv{opacity:1;transform:none}
}