/* ==========================================================================
   MOBILE ELITE — Premium Mobile-First Override System
   ─────────────────────────────────────────────────────────────────────────
   ⚠️  CRITICAL EXCLUSION ZONE RESPECTED:
   ALL rules in this file are scoped to max-width: 1024px or below.
   ZERO desktop layout changes. ZERO global resets outside media queries.
   GPU-accelerated properties only (transform, opacity).
   ========================================================================== */


/* ==========================================================================
   §1 · PREMIUM BOTTOM-SHEET NAV DRAWER — Linear × Vercel Grade
   ─────────────────────────────────────────────────────────────────────────
   GPU-accelerated slide-up from bottom. Clean, minimal, intentional.
   ========================================================================== */
@media (max-width: 1024px) {

  /* ── Backdrop ── */
  .mob-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1998;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mob-nav-backdrop.active {
    opacity: 1;
    pointer-events: all;
  }

  /* ── The Drawer Shell ── */
  .mob-menu {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    max-height: 90dvh;
    /* NO min-height — let content dictate the size naturally */
    z-index: 1999;
    background: #13151a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px 20px 0 0;
    box-shadow:
      0 -32px 80px rgba(0, 0, 0, 0.7),
      0 -1px 0 rgba(255, 255, 255, 0.06) inset;
    transform: translateY(100%) !important;
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.44s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
    overflow: hidden;
  }

  html.light .mob-menu {
    background: #FFFFFF !important;
    border-top-color: rgba(9, 30, 66, 0.10);
    box-shadow: 0 -32px 80px rgba(9,30,66,0.18), 0 -1px 0 rgba(0,0,0,0.05) inset;
  }

  .mob-menu.open {
    transform: translateY(0) !important;
    opacity: 1;
    pointer-events: all;
  }

  /* ── Drag Handle ── */
  .mob-drag-handle {
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    margin: 12px auto 0;
    flex-shrink: 0;
  }

  html.light .mob-drag-handle {
    background: rgba(9, 30, 66, 0.12);
  }

  /* ── Header: Identity Block ── */
  .mob-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    gap: 12px;
  }

  html.light .mob-menu-header {
    border-bottom-color: rgba(9, 30, 66, 0.07);
  }

  .mob-header-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }

  /* Monogram Avatar */
  .mob-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0052CC, #579DFF);
    color: #fff;
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(0, 82, 204, 0.4);
  }

  .mob-identity-text {
    flex: 1;
    min-width: 0;
  }

  .mob-identity-name {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.85rem;
    color: #FFFFFF;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  html.light .mob-identity-name {
    color: #172B4D;
  }

  .mob-identity-role {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
    margin-top: 2px;
  }

  html.light .mob-identity-role {
    color: #5E6C84;
  }

  /* Live status dot */
  .mob-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #36B37E;
    box-shadow: 0 0 6px rgba(54, 179, 126, 0.6);
    animation: mob-dot-pulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
  }

  @keyframes mob-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
  }

  /* Close button */
  .mob-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.12s ease;
  }

  html.light .mob-close-btn {
    background: rgba(9, 30, 66, 0.05);
    border-color: rgba(9, 30, 66, 0.10);
    color: #6B778C;
  }

  .mob-close-btn:active {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: scale(0.9);
  }

  /* ── Scrollable Body ── */
  .mob-menu-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0;
  }

  /* ── Nav List Container ── */
  .mob-nav-list {
    padding: 6px 0;
  }

  /* ── Accordion Sections ── */
  .mob-menu-section {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  html.light .mob-menu-section {
    border-bottom-color: rgba(9, 30, 66, 0.06);
  }

  /* Nav row trigger button */
  #mob-menu .mob-menu-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 16px !important;
    min-height: 42px !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-align: left !important;
    transition: background 0.14s ease !important;
    background: transparent !important;
    border: none !important;
    letter-spacing: -0.01em !important;
  }

  html.light #mob-menu .mob-menu-title {
    color: #172B4D !important;
  }

  #mob-menu .mob-menu-title:active {
    background: rgba(255, 255, 255, 0.05) !important;
  }

  html.light #mob-menu .mob-menu-title:active {
    background: rgba(9, 30, 66, 0.04) !important;
  }

  /* Left side: icon + label */
  #mob-menu .mob-nav-row-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Category icon badge */
  #mob-menu .mob-nav-icon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
  }

  #mob-menu .mob-nav-label {
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    letter-spacing: -0.01em !important;
  }

  /* Chevron — right-pointing, rotates down on open */
  #mob-menu .mob-nav-caret {
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.25) !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease !important;
    flex-shrink: 0 !important;
  }

  html.light #mob-menu .mob-nav-caret {
    color: rgba(9, 30, 66, 0.25) !important;
  }

  #mob-menu .mob-menu-section.active .mob-nav-caret {
    transform: rotate(90deg) !important;
    color: #579DFF !important;
  }

  /* ── Accordion Expand/Collapse ── */
  #mob-menu .mob-menu-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ── Sub-Group: category label + list of links (mirrors desktop mega-cols) ── */
  #mob-menu .mob-sub-group {
    padding: 6px 16px 2px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  }

  #mob-menu .mob-sub-group:last-child {
    border-bottom: none !important;
  }

  html.light #mob-menu .mob-sub-group {
    border-bottom-color: rgba(9, 30, 66, 0.05) !important;
  }

  /* Category label — same as desktop .mega-label */
  #mob-menu .mob-sub-label {
    font-family: var(--font-mono) !important;
    font-size: 0.56rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 255, 255, 0.3) !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
    padding: 4px 0 2px !important;
  }

  html.light #mob-menu .mob-sub-label {
    color: rgba(9, 30, 66, 0.38) !important;
  }

  /* Individual sub-link row */
  #mob-menu .mob-sub-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    color: rgba(255, 255, 255, 0.65) !important;
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    min-height: 34px !important;
    border-bottom: none !important;
    transition: background 0.14s ease, color 0.14s ease, transform 0.1s ease !important;
    margin-bottom: 1px !important;
    letter-spacing: -0.005em !important;
  }

  html.light #mob-menu .mob-sub-link {
    color: #42526E !important;
  }

  #mob-menu .mob-sub-link:active {
    background: rgba(255, 255, 255, 0.07) !important;
    transform: scale(0.98) !important;
    color: #579DFF !important;
  }

  html.light #mob-menu .mob-sub-link:active {
    background: rgba(9, 30, 66, 0.05) !important;
    color: #0052CC !important;
  }

  /* Kill global arrow on sub-links */
  #mob-menu .mob-sub-link::before,
  #mob-menu .mob-sub-link *::before {
    content: none !important;
    display: none !important;
  }

  /* Icon container in sub-link */
  #mob-menu .mob-sub-icon {
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    font-size: 0.6rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
    flex-shrink: 0 !important;
  }

  html.light #mob-menu .mob-sub-icon {
    background: #F4F5F7 !important;
    border-color: rgba(9, 30, 66, 0.08) !important;
    color: #5E6C84 !important;
  }

  /* Expand max-height for sections with grouped content */
  #mob-menu .mob-menu-section.active .mob-menu-content {
    max-height: 600px !important;
  }


  /* ── App Grid (iOS-style icon grid) ── */
  .mob-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 8px 16px 16px;
  }

  .app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 10px 4px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-body);
    font-size: 0.62rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    min-height: 68px;
    transition: background 0.14s ease, transform 0.1s ease;
  }

  html.light .app-item {
    color: #5E6C84;
  }

  .app-item:active {
    background: rgba(255, 255, 255, 0.07) !important;
    transform: scale(0.93);
  }

  html.light .app-item:active {
    background: rgba(9, 30, 66, 0.06) !important;
  }

  .app-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.07);
    font-size: 1rem;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background 0.14s ease;
  }

  html.light .app-icon {
    background: #F4F5F7;
    border-color: rgba(9, 30, 66, 0.08);
  }

  /* ── Social Strip ── */
  .mob-social-strip {
    display: flex;
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 2px;
  }

  html.light .mob-social-strip {
    border-top-color: rgba(9, 30, 66, 0.06);
  }

  .mob-social-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.55);
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.14s ease, transform 0.1s ease;
  }

  html.light .mob-social-btn {
    background: #F4F5F7;
    border-color: rgba(9, 30, 66, 0.08);
    color: #5E6C84;
  }

  .mob-social-btn i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
  }

  html.light .mob-social-btn i {
    color: #42526E;
  }

  .mob-social-btn:active {
    background: rgba(255, 255, 255, 0.10) !important;
    transform: scale(0.94);
  }

  /* ── Sticky Bottom Action Bar ── */
  .mob-action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: #13151a;
    flex-shrink: 0;
  }

  html.light .mob-action-bar {
    background: #FFFFFF;
    border-top-color: rgba(9, 30, 66, 0.07);
  }

  /* Theme toggle button */
  .mob-theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background 0.14s ease, transform 0.1s ease;
  }

  html.light .mob-theme-btn {
    background: #F4F5F7;
    border-color: rgba(9, 30, 66, 0.10);
    color: #42526E;
  }

  .mob-theme-btn:active {
    background: rgba(255, 255, 255, 0.14) !important;
    transform: scale(0.93);
  }

  /* Recruiter Mode CTA — the hero button */
  .mob-recruiter-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #0052CC, #579DFF);
    border: none;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 16px rgba(0, 82, 204, 0.35);
    transition: opacity 0.14s ease, transform 0.1s ease, box-shadow 0.14s ease;
    cursor: pointer;
  }

  .mob-recruiter-btn:active {
    opacity: 0.88;
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(0, 82, 204, 0.25);
  }

  /* Legacy class compat */
  .mob-theme-toggle-square { display: none !important; }
  .mob-recruiter-cta { display: none !important; }

  /* ── Remove the ::before pseudo-handle since we added a real element ── */
  .mob-menu::before {
    display: none !important;
  }

  /* ══════════════════════════════════════════════════
     FIX 1: Kill global.css arrow rule for mob-menu links
     global.css line 158: .mob-menu a::before { content:'→ '; }
     This bleeds into app-items and social buttons.
  ══════════════════════════════════════════════════ */
  .mob-menu .mob-social-btn::before,
  .mob-menu .mob-social-btn *::before,
  .mob-menu .app-item::before,
  .mob-menu .app-item *::before,
  .mob-menu a.mob-social-btn::before,
  .mob-menu a.app-item::before {
    content: '' !important;
    display: none !important;
  }

  /* Kill the global rule entirely inside the new drawer */
  #mob-menu a::before {
    content: none !important;
    display: none !important;
  }

  /* ══════════════════════════════════════════════════
     FIX 2: Eliminate empty whitespace gap
     The mob-menu-body should not grow beyond its content.
     Use flex layout to push action bar to bottom naturally.
  ══════════════════════════════════════════════════ */
  .mob-menu {
    height: auto;
  }

  .mob-menu-body {
    /* Don't let it inflate past its content */
    flex-shrink: 1;
    flex-basis: auto;
  }

  /* Social strip sits right after content with no extra space */
  .mob-social-strip {
    margin-top: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* ══════════════════════════════════════════════════
     FIX 3: Prevent "Recruiter Mode" text from truncating
     The action bar needs to be overflow-visible.
  ══════════════════════════════════════════════════ */
  .mob-action-bar {
    overflow: visible;
  }

  .mob-recruiter-btn {
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    /* Ensure the full label fits */
    padding: 0 16px;
    font-size: 0.75rem;
  }

  .mob-recruiter-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ══════════════════════════════════════════════════
     FIX 4: Theme icon — make sun icon clearly readable
     Replace gear-looking sun with text label "THEME" on tiny button
     or make icon bigger and clearer
  ══════════════════════════════════════════════════ */
  .mob-theme-btn i {
    font-size: 1.05rem;
  }

  /* Ensure the drawer's global link style is overridden */
  #mob-menu a {
    display: block; /* reset but handled by flex in children */
    border-bottom: none;
    padding: 0;
    color: inherit;
  }

  #mob-menu .mob-social-btn,
  #mob-menu .app-item {
    display: flex;
    border-bottom: none;
  }
}


/* ==========================================================================
   §2 · HAMBURGER → ANIMATED X MORPHING
   ========================================================================== */
@media (max-width: 1024px) {

  .mobile-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    border-radius: 8px;
    background: none;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease;
  }

  .mobile-toggle:active {
    background: var(--border) !important;
    transform: scale(0.94);
  }

  .hamburger-line {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text-secondary);
    border-radius: 2px;
    transform-origin: center;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, width 0.2s ease;
  }

  /* Morphs to X when active */
  .mobile-toggle.is-active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .mobile-toggle.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .mobile-toggle.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ==========================================================================
   §3 · TOUCH ERGONOMICS — Eliminate Sticky Hover, Enforce 48px Targets
   ========================================================================== */

/* Wrap ALL hover states in pointer:hover so they don't stick on touch */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: scale(1.03) translateY(-1px);
  }

  .cert:hover {
    transform: translateY(-5px) scale(1.02) !important;
  }

  .infra-widget:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.15);
  }

  .tl-card:hover {
    transform: translateY(-2px);
  }

  .obs-metric:hover {
    transform: translateY(-2px) !important;
  }

  .sk:hover,
  .feat-proj:hover {
    transform: translateY(-3px);
  }

  .certs-grid .cert:hover {
    transform: translateY(-5px) scale(1.02) !important;
  }

  .nav-link:hover,
  .mega-link:hover {
    color: var(--text-primary);
  }
}

/* Touch tap states — GPU-accelerated active feedback */
@media (max-width: 1024px) {

  .btn:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
  }

  .cert:active,
  .infra-widget:active,
  .tl-card:active,
  .sk:active,
  .feat-proj:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }

  /* Minimum 48px × 48px touch targets on all interactive elements */
  .btn,
  .cert-link,
  .mega-link,
  .app-item,
  .nav-link {
    min-height: 44px;
  }

  a.btn,
  button.btn {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Prevent hover transforms on touch devices */
  .btn:hover,
  .cert:hover,
  .infra-widget:hover,
  .tl-card:hover,
  .obs-metric:hover,
  .sk:hover,
  .feat-proj:hover,
  .certs-grid .cert:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   §4 · FLUID TYPOGRAPHY — Adaptive Scaling with clamp()
   ========================================================================== */
@media (max-width: 1024px) {

  /* Hero H1 — fluid scale from 375px to 1024px viewports */
  .hero-title,
  .hero-title-elite {
    font-size: clamp(2rem, 8vw, 3.2rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* Hero subtitle */
  .hero-subtitle {
    font-size: clamp(1rem, 4vw, 1.4rem) !important;
    line-height: 1.35 !important;
  }

  /* Section titles */
  .s-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
  }

  /* Section descriptions */
  .s-desc {
    font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
    line-height: 1.6 !important;
  }

  /* Body paragraphs for thumb-scroll readability */
  .h-sub,
  .about-text p,
  .tl-summary,
  .prose-reveal {
    font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
    line-height: 1.7 !important;
  }

  /* Timeline role titles */
  .tl-role {
    font-size: clamp(0.9rem, 3.5vw, 1.1rem) !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  /* Hero name badge */
  .h-name {
    font-size: clamp(0.65rem, 2.5vw, 0.85rem) !important;
    letter-spacing: 0.12em !important;
  }
}

/* ==========================================================================
   §5 · HERO SECTION — Mobile Layout Rearchitecture
   ========================================================================== */
@media (max-width: 1024px) {

  /* Stack hero grid vertically — content first, photo second */
  .hero-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 40px !important;
  }

  .hero-content {
    max-width: 100% !important;
    width: 100% !important;
    order: 1;
  }

  .h-photo {
    order: 2;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Photo wrapper — contained size on mobile */
  .pw {
    max-width: 240px !important;
    width: 100% !important;
  }

  .pw picture img {
    width: 100% !important;
    height: auto !important;
  }

  /* Hero section padding */
  #hero,
  .domain-hero {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }

  /* Hero stats row — 2-col grid on small screens */
  .hero-stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 24px !important;
    flex-wrap: unset !important;
    white-space: normal !important;
  }

  /* Hero buttons — vertical stack on very small screens */
  .h-actions,
  .hero-btns {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }

  .h-actions .btn,
  .hero-btns .btn,
  .h-actions a.btn,
  .hero-btns a.btn,
  .h-actions button.btn,
  .hero-btns button.btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px !important;
    font-size: 0.9rem !important;
  }

  /* Reduce blueprint image noise on mobile */
  .hero-visual-blueprint {
    opacity: 0.12 !important;
  }

  /* Hero photo glow — reduce on mobile for perf */
  .hero-photo-glow {
    width: 200px !important;
    height: 200px !important;
    opacity: 0.5 !important;
  }

  /* Badge pills on the photo */
  .pb {
    font-size: 0.6rem !important;
    padding: 4px 8px !important;
    max-width: 85% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* Extra small — iPhone SE / 375px */
@media (max-width: 420px) {
  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .hero-stats-row > div {
    padding: 12px !important;
    background: var(--bg-2) !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    text-align: center !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   §6 · CARD & GRID INTELLIGENCE — Single Column Stacking
   ========================================================================== */
@media (max-width: 1024px) {

  /* Certs — 2 col tablet, 1 col phone */
  .certs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Skills grid */
  .skills-grid,
  .sk-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Infra / writing widgets — single col */
  .infra-dashboard-grid,
  .writing-grid,
  .articles-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Projects grid */
  .projects-grid,
  .proj-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Education / about highlights — 2 col */
  .edu-grid,
  .about-hl {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Testimonial slider — prevent overflow */
  .tslider,
  .testimonials-slider {
    padding: 0 16px !important;
  }

  /* Vision / how-i-think cards */
  .phi-grid,
  .how-think-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Community metrics */
  .comm-metric-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Safe horizontal margin — prevent edge bleed */
  .container {
    padding-left: clamp(16px, 4vw, 32px) !important;
    padding-right: clamp(16px, 4vw, 32px) !important;
  }

  /* Card inner padding — comfortable on touch */
  .cert,
  .sk,
  .infra-widget,
  .feat-proj,
  .tl-card,
  .phi-card,
  .obs-metric,
  .ac {
    padding: 16px !important;
  }
}

/* Phones — single column everywhere */
@media (max-width: 600px) {
  .certs-grid {
    grid-template-columns: 1fr !important;
  }

  .skills-grid,
  .sk-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .edu-grid,
  .about-hl,
  .comm-metric-grid {
    grid-template-columns: 1fr !important;
  }

  /* Section label wrapping */
  .s-label {
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
  }
}

/* ==========================================================================
   §7 · NAVIGATION BAR — Mobile-Specific Refinements
   ========================================================================== */
@media (max-width: 1024px) {

  /* Nav inner height */
  .nav-inner {
    height: 56px !important;
    padding: 0 clamp(12px, 4vw, 24px) !important;
  }

  /* Show mobile elements */
  .mobile-only {
    display: flex !important;
  }

  /* Nav system status — hide on mobile to save space */
  .nav-sys-status {
    display: none !important;
  }

  /* Mobile recruiter button sizing */
  .mob-nav-recruiter-btn {
    min-height: 36px !important;
    font-size: 0.65rem !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
  }

  /* Mobile logo refinement */
  .atlassian-logo .atlassian-brand {
    font-size: 0.95rem !important;
  }
}

/* ==========================================================================
   §8 · MOTION RESTRAINT — Reduce Non-GPU Animations on Mobile
   ========================================================================== */
@media (max-width: 1024px) {

  /* Disable heavy parallax animations — major perf boost on mid-range Android */
  .liquid-orb,
  .parallax-container {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* Disable background grid scroll animation — cosmetic, not worth the CPU cost */
  body::after {
    animation: none !important;
  }

  /* Disable floating blueprint animations */
  .hero-visual-blueprint,
  .edu-visual-blueprint,
  .skills-visual-blueprint,
  .community-visual-blueprint,
  .projects-architecture-visual {
    animation: none !important;
    transform: none !important;
  }

  /* Scale back AOS animations — keep opacity only, remove Y translate */
  .aos {
    transition: opacity 0.5s var(--ease, cubic-bezier(0.22,1,0.36,1)) !important;
    transform: none !important;
  }
  .aos.on {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Kill 3D card tilt from main.js on touch devices */
  .sk,
  .proj,
  .cert,
  .obs-metric,
  .tl-card,
  .feat-proj,
  .bento-card {
    transform: none !important;
    transition:
      opacity 0.3s ease,
      border-color 0.3s ease,
      box-shadow 0.3s ease !important;
    will-change: opacity;
  }

  /* Reduce orb glow opacity — cleaner on small screens */
  .hero-orb {
    opacity: 0.08 !important;
    animation: none !important;
  }

  /* Disable background mesh noise on mobile — unnecessary texture rendering */
  #vercel-noise {
    display: none !important;
  }

  /* Keep background canvas but reduce opacity for perf */
  #bg-canvas {
    opacity: 0.3 !important;
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   §9 · SECTION SPACING — Calibrated Vertical Rhythm for Mobile
   ========================================================================== */
@media (max-width: 1024px) {
  .section {
    padding: 72px 0 !important;
  }

  .section-header {
    margin-bottom: 36px !important;
  }
}

@media (max-width: 600px) {
  .section {
    padding: 56px 0 !important;
  }

  .section-header {
    margin-bottom: 28px !important;
  }
}

/* ==========================================================================
   §10 · EXPERIENCE TIMELINE — Mobile Reflow
   ========================================================================== */
@media (max-width: 1024px) {

  .experience-timeline {
    padding-left: 16px !important;
  }

  .timeline-event {
    gap: 12px !important;
    margin-bottom: 20px !important;
  }

  .timeline-node {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.7rem !important;
    flex-shrink: 0 !important;
  }

  .timeline-card {
    padding: 16px !important;
    border-left-width: 2px !important;
  }

  .tl-card-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }

  .timeline-tech-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .t-tag {
    font-size: 0.65rem !important;
    padding: 2px 8px !important;
  }

  /* Key achievements — hide on smallest screens for brevity */
  @media (max-width: 420px) {
    .tl-achievements {
      display: none !important;
    }
  }
}

/* ==========================================================================
   §11 · SCROLLBAR — Thinner on Mobile
   ========================================================================== */
@media (max-width: 1024px) {
  ::-webkit-scrollbar {
    width: 3px !important;
    height: 3px !important;
  }
}

/* ==========================================================================
   §12 · SAFE AREA INSETS — iPhone & Notch Devices
   ========================================================================== */
@media (max-width: 1024px) {
  .footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }

  #hero,
  .domain-hero {
    padding-top: max(80px, calc(60px + env(safe-area-inset-top))) !important;
  }
}

/* ==========================================================================
   §13 · SKILL TAGS — Readable on Mobile
   ========================================================================== */
@media (max-width: 1024px) {
  .tech-stack-row {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }

  .skill-tag {
    font-size: 0.7rem !important;
    padding: 4px 10px !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ==========================================================================
   §14 · OBSERVABILITY / SRE DASHBOARD — Mobile Reflow
   ========================================================================== */
@media (max-width: 1024px) {

  .obs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .obs-chart-card {
    grid-column: 1 / -1 !important;
  }

  .obs-val {
    font-size: 1.4rem !important;
  }
}

@media (max-width: 600px) {
  .obs-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   §15 · BENTO COMMUNITY COLLAGE — Mobile Grid Reset
   ========================================================================== */
@media (max-width: 1024px) {

  .community-collage-container {
    margin-top: 32px !important;
  }

  .collage-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 8px !important;
    max-height: none !important;
  }

  /* All cards — auto grid placement, no complex bento spans */
  .collage-card {
    grid-column: auto !important;
    grid-row: auto !important;
    height: 160px !important;
    border-radius: 10px !important;
    aspect-ratio: auto !important;
  }

  /* First card spans full width */
  .collage-card:first-child {
    grid-column: 1 / -1 !important;
    height: 180px !important;
  }
}

@media (max-width: 480px) {
  .collage-grid {
    grid-template-columns: 1fr !important;
  }

  .collage-card {
    height: 140px !important;
  }

  .collage-card:first-child {
    height: 160px !important;
  }
}

/* ==========================================================================
   §16 · CONTACT SECTION — Mobile Form Layout
   ========================================================================== */
@media (max-width: 1024px) {

  .contact-grid,
  .cta-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
    min-height: 48px !important;
  }
}

/* ==========================================================================
   §17 · INLINE STYLE OVERRIDES — Force Correct Mobile Stacking
   ──────────────────────────────────────────────────────────────────────────
   Some sections use inline styles with high specificity.
   These overrides use !important to win where needed, strictly within
   mobile media queries.
   ========================================================================== */
@media (max-width: 1024px) {

  /* Hero h1 inline font-size override */
  #hero h1[style],
  .hero-title[style],
  .hero-title-elite[style] {
    font-size: clamp(2rem, 8vw, 3.2rem) !important;
    line-height: 1.15 !important;
  }

  /* Hero subtitle inline font-size override */
  #hero p[style].hero-subtitle {
    font-size: clamp(1rem, 4vw, 1.4rem) !important;
  }

  /* Force section hero padding despite inline style */
  section#hero[style] {
    padding-top: max(80px, calc(60px + env(safe-area-inset-top))) !important;
  }
}

/* ==========================================================================
   §18 · EVOLUTION & JOURNEY PAGE (`journey.astro`) OVERRIDES
   ========================================================================== */
@media (max-width: 1024px) {
  .journey-container {
    padding-top: 100px !important;
    padding-bottom: 60px !important;
  }

  .editorial-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .editorial-content h2 {
    font-size: 1.8rem !important;
    margin: 40px 0 20px 0 !important;
  }

  .philosophy-block {
    padding: 24px !important;
    margin: 32px 0 !important;
  }

  .philosophy-block p {
    font-size: 1.3rem !important;
    line-height: 1.4 !important;
  }

  .narrative-svg-wrapper {
    margin: 32px 0 !important;
    padding: 24px 16px !important;
    border-radius: 12px !important;
  }

  .narrative-svg-wrapper svg {
    width: 100% !important;
    height: auto !important;
  }

  .terminal-block {
    margin: 32px 0 !important;
  }

  .terminal-body {
    padding: 20px !important;
    font-size: 0.85rem !important;
  }

  .mission-statement-block {
    margin-top: 60px !important;
    padding: 40px 20px !important;
  }

  .sidebar {
    position: relative !important;
    top: 0 !important;
    margin-top: 32px !important;
  }

  .sidebar-widget {
    padding: 24px !important;
  }
}

/* ==========================================================================
   §19 · STRATEGIC RADAR PAGE (`radar.astro`) OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
  .radar-blueprint .container {
    padding-top: 100px !important;
    padding-bottom: 60px !important;
  }

  .radar-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-top: 40px !important;
  }

  .radar-quadrant {
    padding: 20px !important;
  }
}

/* ==========================================================================
   §20 · SRE WORKBENCH (`uses.astro`) OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
  .uses-blueprint #main {
    padding-top: 100px !important;
    padding-bottom: 60px !important;
  }

  .uses-header {
    margin-bottom: 40px !important;
  }

  .inventory-section {
    margin-bottom: 40px !important;
  }

  .inventory-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .item-card {
    padding: 20px !important;
  }
}

/* ==========================================================================
   §21 · ECOSYSTEM LEDGER (`speaking.astro`) OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
  .ledger-year-title {
    font-size: 2.5rem !important;
  }

  .ledger-year-header {
    padding: 16px 0 !important;
    gap: 16px !important;
  }

  .ledger-year-stats {
    gap: 12px !important;
  }
}

@media (max-width: 600px) {
  .ledger-year-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .ledger-year-stats {
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: space-between !important;
  }

  .ledger-year-section.expanded .ledger-year-content {
    padding: 24px 0 !important;
  }

  .ledger-month-label {
    font-size: 0.95rem !important;
    margin-bottom: 12px !important;
  }

  .ledger-month-group {
    margin-bottom: 32px !important;
  }
}

/* ==========================================================================
   §22 · INCIDENT POST-MORTEMS (`incident.astro` & `incident-rca-01.astro`) OVERRIDES
   ========================================================================== */
@media (max-width: 900px) {
  .incident-page div[style*="display:grid"],
  .incident-page div[style*="display: grid"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .incident-ticket-header {
    padding: 24px !important;
    margin-bottom: 32px !important;
  }

  .meta-grid-elite {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
    padding-top: 24px !important;
  }

  .resolution-body {
    padding: 20px !important;
    gap: 20px !important;
  }

  .rca-point {
    gap: 8px !important;
  }

  .rca-text {
    font-size: 0.95rem !important;
  }
}

/* ==========================================================================
   §23 · ENGINEERING COLLECTIONS (`projects.astro`) OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
  #projects-container[style] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 32px !important;
  }
}

/* ==========================================================================
   §24 · API REFERENCE DOCS (`api-docs.astro`) OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
  .sre-dashboard {
    grid-template-columns: 1fr 1fr !important;
    padding: 16px !important;
    gap: 12px !important;
    margin-bottom: 32px !important;
  }

  .metric-card {
    padding: 12px !important;
  }

  .metric-value {
    font-size: 1.2rem !important;
  }

  .hero-subpage {
    padding: 60px 0 30px !important;
    margin-bottom: 24px !important;
  }

  .hero-subpage h1 {
    font-size: 2rem !important;
  }

  #swagger-ui {
    padding: 0 12px !important;
  }

  .swagger-ui .wrapper {
    padding: 0 !important;
  }

  .swagger-ui .opblock-section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .swagger-ui .opblock .opblock-summary {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
}

/* ==========================================================================
   §25 · OPEN SOURCE COMMUNITY (`community.astro`) OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
  .term-filter-bar > div:nth-child(2) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  .focus-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .focus-card.infra-widget {
    padding: 20px !important;
  }
}

/* ==========================================================================
   §26 · INCIDENT SIMULATOR (`404.astro`) OVERRIDES
   ========================================================================== */
@media (max-width: 768px) {
  .main-404 {
    padding: 80px 16px 40px 16px !important;
  }

  .terminal-panel {
    max-width: 100% !important;
    border-radius: 12px !important;
  }

  .terminal-panel > div:nth-child(2) {
    padding: 20px !important;
    gap: 16px !important;
  }

  .sys-header h1 {
    font-size: 1.4rem !important;
  }

  .k8s-log {
    padding: 12px !important;
    font-size: 0.75rem !important;
  }

  .recovery-cta {
    padding: 14px 16px !important;
  }

  .recovery-cta span {
    font-size: 0.85rem !important;
  }
}