/* ==========================================================================
   MOBILE — gothic single-column layout for < 860px / touch
   The desktop WM is hidden; a curated scroll site is shown instead.
   ========================================================================== */

#mobile { display: none; }

@media (max-width: 860px) {
  body { overflow: auto; cursor: auto; }
  #desktop, #bar, #dock, #launcher, #keybinds, #boot-skip { display: none !important; }
  #mobile { display: block; position: relative; z-index: 50; padding-bottom: 96px; }
}

.m-hero {
  text-align: center;
  padding: 90px 22px 40px;
  background: radial-gradient(600px 400px at 50% -10%, rgba(217,118,43,0.12), transparent 70%);
}
.m-avatar {
  width: 116px; height: 116px; border-radius: 50%;
  border: 2px solid var(--ember);
  box-shadow: 0 0 40px var(--ember-glow);
  object-fit: cover;
}
.m-name { font-family: var(--font-display); font-size: 2.6rem; letter-spacing: 0.1em; margin: 18px 0 4px; text-shadow: 0 0 26px var(--ember-glow); }
.m-role { color: var(--ember); font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; }
.m-bio { color: var(--dust); line-height: 1.6; margin-top: 16px; font-size: 0.9rem; }

.m-section { padding: 30px 22px; opacity: 0; transform: translateY(18px); transition: all 0.6s ease; }
.m-section.in { opacity: 1; transform: translateY(0); }
.m-section h3 { color: var(--ember); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }

.m-card {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-tile { text-align: center; }
.m-tile .ic { font-size: 1.8rem; margin-bottom: 8px; display: block; }
.m-tile .ic img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; display: inline-block; }
.m-tile b { font-size: 0.86rem; color: var(--bone); }
.m-tile p { font-size: 0.72rem; color: var(--faint); margin-top: 4px; }

.m-track { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.m-track:last-child { border-bottom: none; }
.m-track i { color: var(--ember); }
.m-track .mt-info b { display: block; color: var(--bone); font-size: 0.88rem; }
.m-track .mt-info span { font-size: 0.74rem; color: var(--faint); }

.m-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: space-around;
  padding: 16px;
  background: var(--glass-solid);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.m-nav a { color: var(--dust); font-size: 1.25rem; }
.m-nav a.active { color: var(--ember); }