@media(min-width:821px){
  .about-grid{align-items:start}
  .about h2{font-size:clamp(58px,5.8vw,92px);line-height:.82;align-self:start}
  .about-photo{margin:0;align-self:start}
  .about-copy{align-self:start;padding-top:0}
}

@media(max-width:820px){
  :root{--pad:16px}
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  header{padding:14px 16px;align-items:flex-start;gap:10px}
  .brand{min-width:0;flex:0 1 auto}
  .brand strong{font-size:16px;line-height:1.05;white-space:nowrap}
  .brand small{font-size:8px;line-height:1.2;white-space:nowrap}
  .nav{gap:8px;flex:0 0 auto;align-items:center;min-width:0}
  .nav a{font-size:8px;letter-spacing:.05em;white-space:nowrap}

  .hero{min-height:100svh;padding:118px 16px 28px;grid-template-rows:auto 1fr auto}
  .hero:before{inset:98px 16px 28px;background-size:80px 80px}
  .hero-top{flex-direction:column;align-items:flex-start;gap:7px;max-width:78%;font-size:8px;line-height:1.35}
  .hero-status{font-size:8px;line-height:1.35;white-space:normal}
  .dot{width:6px;height:6px;flex:0 0 6px}
  .hero-title{font-size:clamp(46px,15.2vw,62px);line-height:.84;letter-spacing:-.075em;margin:5vh 0 3vh;max-width:100%;min-width:0}
  .hero-rotator{height:.96em;max-width:100%}
  .hero-word{max-width:100%}
  .hero-bottom{gap:18px}
  .hero-copy{max-width:100%;font-size:15px;line-height:1.5}
  .hero-cta{font-size:9px;justify-self:start}

  .section{padding:64px 16px}
  .section-head{align-items:flex-start;gap:12px;margin-bottom:30px;font-size:8px;line-height:1.35}
  .section-head>span{min-width:0}
  .section-head .muted{text-align:right}
  .projects{gap:34px}
  .visual{border-radius:10px}
  .project-info{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:12px}
  .project-title{font-size:30px;line-height:1;letter-spacing:-.045em;max-width:100%}
  .project-meta{text-align:left;font-size:8px;line-height:1.45;max-width:100%}

  .about-grid{gap:30px}
  .about h2,.contact h2{font-size:clamp(42px,12.7vw,58px);line-height:.88;letter-spacing:-.06em;overflow-wrap:anywhere}
  .about-photo{width:100%;max-width:100%;margin:0}
  .about-copy p{font-size:17px;line-height:1.5}
  .skills{margin-top:24px;gap:6px}
  .skills span{font-size:8px;padding:8px 9px}

  .contact-body{gap:28px}
  .contact-links{width:100%;font-size:26px;line-height:1.1;gap:10px;justify-self:start;align-items:flex-start}
  .contact-links a{max-width:100%;overflow-wrap:anywhere}

  footer{padding:22px 16px;font-size:8px;line-height:1.4;gap:10px}

  .modal-top{padding:14px 16px}
  .modal-content{padding:48px 16px 72px}
  .modal-content h2{font-size:clamp(44px,13.5vw,62px);line-height:.86;letter-spacing:-.065em;overflow-wrap:anywhere}
  .modal-meta{gap:10px}
  .case-copy{margin:38px 0}
  .case-copy p{font-size:18px;line-height:1.3}
  .stats{font-size:26px;margin:36px 0}
  .case-label{margin:48px 0 14px}
  .case-grid{gap:10px}
  .compare-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .compare-tag{font-size:8px}

  .special-text-chunk{min-width:0!important;max-width:100%!important;white-space:normal!important;display:inline!important;overflow-wrap:anywhere}

  .home-glitch-bg{opacity:.68}
  .home-glitch-bg::after{width:160px;top:35%}
  .tech-burst{max-width:58vw!important;white-space:normal!important;line-height:1.3}
  .tech-ascii-band{font-size:9px;letter-spacing:.1em}
}

@media(max-width:380px){
  header{padding:12px 12px;gap:7px}
  .brand strong{font-size:15px}
  .brand small{font-size:7px}
  .nav{gap:6px}
  .nav a{font-size:7.5px;letter-spacing:.025em}
  .hero{padding:108px 14px 26px}
  .hero-title{font-size:clamp(44px,14.7vw,56px)}
  .hero-copy{font-size:14px}
  .section{padding:56px 14px}
  .project-title{font-size:28px}
  .about h2,.contact h2{font-size:clamp(40px,12.2vw,52px)}
  .contact-links{font-size:23px}
  .modal-content{padding-left:14px;padding-right:14px}
}