/* =====================================================
   RESPONSIVE  (stacked layout)
===================================================== */
@media (max-width: 960px) {
  .about-grid { grid-template-columns: 1fr; }

  .about-media { max-width: 460px; }

  .chip-float.a { left: -3%; }
 .chip-float.b { right: -3%; }

  .spin-badge { right: -2%; }

  .c3 { grid-column: span 2; }
 .c2 { grid-column: span 1; }

  .t-item { grid-template-columns: 22px minmax(0, 1fr); gap: 0 16px; }

  .links { display: none; }

  .nav { padding: 18px 20px; }

  .brand { font-size: 1rem; }
 .brand svg { width: 34px; height: 34px; }

  .btn-outline { padding: 10px 18px; font-size: .9rem; }


  .hero { height: auto; min-height: 100svh; display: flex; flex-direction: column; }

  .hero::before { left: 85%; top: 52%; width: 260vw; height: 260vw; }

  .stage { position: relative; inset: auto; flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 92px; }


  .role { position: relative; top: auto; letter-spacing: .4em; font-size: .64rem; gap: 14px; }

  .role::before,.role::after { width: 28px; }

  .title { position: relative; top: auto; margin-top: 18px; width: 100%; padding: 0 5vw; }

  .photo-wrap { position: relative; margin-top: 8px; }

  .photo img { height: auto; width: min(76vw, 400px); max-width: none; }

  .copy { position: relative; left: auto; bottom: auto; max-width: none; text-align: center; padding: 0 24px; margin-top: -46px; z-index: 3; }

  .lede { max-width: 330px; margin-left: auto; margin-right: auto; padding-left: 0; }

  .lede::before { display: none; }


  .skills { position: relative; padding: 26px 0 30px; }

  .skill { padding: 6px 22px; font-size: .85rem; }

  .skill svg { width: 24px; height: 24px; }

}

@media (max-width: 600px) {
  .c3,.c2 { grid-column: span 1; }

  .about h2 { font-size: 1.45rem; }

  .watermark { font-size: 34vw; }

}