#nav-menu-btn {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 44px;
   height: 44px;
   margin-right: -10px;
   padding: 0;
   background: none;
   border: none;
   cursor: pointer;
}

#nav-menu-btn span {
   display: block;
   width: 22px;
   height: 2px;
   margin: 0 auto;
   border-radius: 2px;
   background: var(--text-muted);
   transition: transform .25s cubic-bezier(.22, 1, .36, 1), opacity .2s, background .15s;
}

#nav.is-menu-open #nav-menu-btn span { background: var(--text-bright); }

#nav.is-menu-open #nav-menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav.is-menu-open #nav-menu-btn span:nth-child(2) { opacity: 0; }
#nav.is-menu-open #nav-menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 700px) {
   #nav-menu-btn { display: flex; }

   #nav-links {
      display: none;
      position: absolute;
      top: var(--nav-height);
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      padding: 10px 16px 16px;
      background: color-mix(in srgb, var(--purple) 4%, rgba(9, 9, 11, 0.97));
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
   }

   #nav.is-menu-open #nav-links { display: flex; }

   .nav-link {
      font-size: 14px;
      padding: 13px 14px;
      border-radius: 8px;
   }
}

@media (min-width: 641px) {
   .hero-meta > span:nth-child(1) { order: 1; }
   .hero-meta > span:nth-child(3) { order: 2; }
   .hero-meta > span:nth-child(2) { order: 3; }
   .hero-meta > .available { order: 4; }
}

@media (max-width: 640px) {
   #hero { padding: 112px 24px 64px; }

   .hero-meta { gap: 8px 16px; }

   #hero-name-svg { max-width: none; }

   .hero-role .value { font-size: 16px; min-width: 0; }

   #hero-bio { font-size: 16px; }

   .hero-actions {
      gap: 10px;
      flex-wrap: nowrap;
      align-items: stretch;
   }

   .btn-primary,
   .btn-secondary {
      flex: 1;
      min-width: 0;
      padding: 0 14px;
      justify-content: center;
      font-size: 15px;
   }

   .btn-icon {
      flex: 0 0 48px;
      width: 48px;
      padding: 0;
      margin-left: 0;
   }

   .scroll-hint { margin-top: 56px; }

   .content-section { padding: 56px 24px; }

   .tag { padding: 10px 14px; }

   .skills-grid {
      display: flex;
      flex-direction: column;
   }

   .skills-grid > div:last-child { order: 1; }
   .skills-grid > div:first-child { order: 2; }

   .exp-card {
      grid-template-columns: 1fr;
      gap: 14px;
      padding: 22px 20px;
   }

   .projects-grid { grid-template-columns: 1fr; }

   .project-card { padding: 22px 20px; }

   .project-date { top: 22px; right: 20px; }

   .edu-card { padding: 22px 20px; }

   .edu-dates { top: 22px; right: 20px; }

   #contact { padding-top: 64px; }

   .contact-card { padding: 36px 24px; }

   .contact-status { display: none; }

   .contact-sub { max-width: 100%; }

   .contact-inner {
      display: flex;
      flex-direction: column;
   }

   .contact-actions { display: contents; }

   .contact-buttons {
      display: flex;
      gap: 10px;
      align-items: stretch;
   }

   .contact-buttons .btn-cta {
      flex: 1;
      min-width: 0;
      justify-content: center;
      text-align: center;
      padding: 14px;
      font-size: 14px;
   }

   .contact-buttons .btn-cta-secondary {
      flex: 0 0 52px;
      width: 52px;
      height: auto;
      align-self: stretch;
      margin-top: 0;
      padding: 0;
      justify-content: center;
   }

   .contact-meta {
      flex-direction: column;
      align-items: center;
      gap: 4px;
   }

   .contact-trust { text-align: center; }

   .contact-email {
      text-align: center;
      padding: 14px 0 0;
      margin: 4px 0 0;
   }

   #contact:not(.is-revealed) .btn-cta,
   #contact:not(.is-revealed) .btn-cta-secondary,
   #contact:not(.is-revealed) .contact-email {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity .55s ease-out, transform .6s cubic-bezier(.22, 1, .36, 1);
   }

   #contact.is-revealed .btn-cta,
   #contact.is-revealed .btn-cta-secondary,
   #contact.is-revealed .contact-email {
      opacity: 1;
      transform: none;
      transition-delay: 0.34s;
   }

   .card-fx { animation: none; opacity: 0.6; }

   .project-card.is-featured .project-flag::before { animation: none; }

   .contact-card-glow { animation: none; opacity: 0.8; }

   .btn-cta span { animation: none; }

   #terminal-window.is-sheet {
      left: 0;
      right: 0;
      bottom: 0;
      top: auto;
      width: auto;
      height: 72dvh;
   }

   #terminal-window.is-sheet #terminal-card {
      height: 100%;
      border-radius: 14px 14px 0 0;
   }

   #terminal-window.is-sheet.is-min {
      height: auto;
   }

   #terminal-window.is-sheet.is-min #terminal-card {
      height: auto;
   }

   #terminal-window.is-sheet #term-titlebar { cursor: default; }

   #terminal-window.is-sheet #term-grip { display: none; }

   #terminal-window.is-sheet #term-body { height: auto; }

   .term-traffic { gap: 14px; }

   .traffic-btn { position: relative; }

   .traffic-btn::after {
      content: "";
      position: absolute;
      inset: -9px;
      border-radius: 50%;
   }
}

@media (hover: none) {
   .tag:active {
      border-color: var(--purple);
      color: var(--lilac);
      background: rgba(var(--purple-rgb), 0.08);
   }

   .exp-card:active {
      border-color: color-mix(in srgb, var(--purple) 34%, var(--bg-card));
      background-color: var(--bg-card-alt);
   }

   .exp-card:active::before,
   .edu-card:active::before {
      opacity: 1;
      width: 3px;
      transform: scaleY(1);
   }

   .exp-card:active::after,
   .edu-card:active::after { opacity: 1; }

   .exp-card:active .exp-points li::before { opacity: 1; }

   .project-card:active {
      border-color: var(--purple);
      box-shadow: 0 14px 34px -20px rgba(var(--purple-rgb), 0.36);
   }

   .edu-card:active {
      border-color: color-mix(in srgb, var(--purple) 34%, var(--bg-card));
      background-color: var(--bg-card-alt);
   }

   .edu-card:active .edu-name::after {
      opacity: 1;
      transform: translate(0, 0);
   }

   .chip-btn:active {
      border-color: var(--purple);
      color: #fff;
   }

   .btn-primary:active {
      background: color-mix(in srgb, var(--purple) 82%, #fff);
      transform: translateY(1px);
      box-shadow: 0 0 24px rgba(var(--purple-rgb), 0.25);
   }

   .btn-secondary:active {
      color: var(--lilac);
      border-color: var(--purple);
      background: rgba(var(--purple-rgb), 0.14);
   }

   .contact-email:active {
      color: var(--lilac);
      text-decoration: underline;
      text-underline-offset: 4px;
   }

   .btn-cta:active span { transform: translateX(3px); }

   .btn-icon:active {
      color: var(--lilac);
      border-color: var(--purple);
      background: rgba(var(--purple-rgb), 0.14);
   }

   .nav-link:active {
      color: var(--text-bright);
      background: rgba(255, 255, 255, 0.04);
   }
}