/* css/responsive.css — Tablet and mobile adjustments for the first screen. */

/* =============================================================
   6. RESPONSIVE — tablet and mobile use the full width
   ============================================================= */
@media(min-width:1025px) and (max-height:720px){.bio,.meta{display:none}}
@media(max-width:1024px){
  :root{--h1-size:clamp(2.4rem,11.5vw,5rem);--photo-size:min(52vw,320px)}
  .ico{left:var(--mx);top:var(--my)}
  .slot{left:50%;top:84%}
  .badge{font-size:.78rem}
  .hero{width:100%;padding:4.8rem 5vw 34svh}
  .bio{margin-top:1.1rem;font-size:.95rem}.meta{display:none}
  .hero .btn{margin-top:1.2rem;padding:.8rem 1.4rem}
  .bg-code{right:auto;left:5vw;opacity:.11}
  .about{align-items:flex-end;justify-content:flex-start;padding-bottom:5vh}
  .about div{width:100%}.about h2{font-size:1.9rem}.about p{font-size:.95rem}
}
@media(max-width:1024px) and (max-height:700px){.bio{display:none}.about p+p{display:none}}
@media(max-width:760px){:root{--menu-size:30px}.menu-grid{grid-template-columns:1fr}.menu-side{margin-top:1.5rem;text-align:left}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}