/* =========================================================
   THE STUFF OF LEGENDS — MOBILE SYSTEM
   Loaded after tsol.css / tsol-inner.css.
   Desktop remains unchanged; these rules activate at <= 760px.
   ========================================================= */

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }

  /* ---------- HOME HEADER / VAMP ---------- */
  .topbar.topbar-architectural {
    position: sticky;
    top: 0;
    z-index: 30;
    height: auto;
    min-height: 82px;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    grid-template-areas:
      "identity menu"
      "nav nav";
    gap: 0 12px;
    align-items: center;
    background: rgba(1,6,12,.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .topbar-architectural .identity-row {
    grid-area: identity;
    min-width: 0;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .topbar-architectural .wordmark {
    min-width: 0;
    font-size: clamp(15px,4.4vw,20px);
    line-height: .92;
    white-space: normal;
  }

  .topbar-architectural .wordmark small {
    font-size: 7px;
    margin-top: 7px;
    letter-spacing: .13em;
  }

  .tsol-vamp-seal {
    position: static !important;
    inset: auto !important;
    margin: 0;
    padding: 0;
    display: block;
    width: 52px;
    min-width: 52px;
    max-width: 52px;
    height: 52px;
    min-height: 52px;
    max-height: 52px;
    flex: 0 0 52px;
    aspect-ratio: 1 / 1;
    overflow: visible;
  }

  .tsol-vamp-ring {
    display: block;
    width: 52px !important;
    min-width: 52px;
    max-width: 52px;
    height: 52px !important;
    min-height: 52px;
    max-height: 52px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(120,205,255,.72);
    background: #030b15;
    box-shadow: 0 0 0 3px rgba(40,130,210,.05),0 0 18px rgba(45,150,255,.16);
    position: relative;
  }

  .tsol-vamp-ring img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
  }

  .tsol-vamp-ring::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    right: 4px;
    bottom: 7px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 7px rgba(255,48,40,.8);
  }

  .tsol-vamp-id,
  .tsol-vamp-seal::before,
  .topbar-architectural .nav-row { display: none !important; }

  .topbar-architectural .menu {
    grid-area: menu;
    display: grid;
    min-width: 48px;
    min-height: 48px;
    align-content: center;
    gap: 6px;
    padding: 7px 2px;
    justify-items: end;
  }

  .topbar-architectural + .mobile-nav,
  .inner-topbar + .mobile-nav {
    inset: auto 0 auto 0;
    top: 82px;
    max-height: calc(100dvh - 82px);
    overflow-y: auto;
    padding: 12px 14px 18px;
    grid-template-columns: 1fr;
    gap: 0;
    background: rgba(1,6,12,.985);
    border-bottom: 1px solid var(--line);
  }

  .mobile-nav a {
    min-height: 52px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    border-bottom: 1px solid rgba(151,185,214,.14);
  }

  /* ---------- HOME HERO ---------- */
  .hero {
    padding: 28px 16px 22px;
    gap: 24px;
  }

  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(52px,17vw,72px); }
  .kicker { line-height: 1.55; }
  .lede { max-width: 34em; font-size: 10px; line-height: 1.8; }
  .cta { min-height: 44px; align-items: center; }

  .archive-frame {
    width: 100%;
    aspect-ratio: auto;
    padding: 6px;
  }

  .archive-frame img {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: 72dvh;
    aspect-ratio: auto;
    object-fit: contain;
  }

  .art-meta {
    position: static;
    width: 100%;
    margin-top: 6px;
    padding: 11px 12px;
    background: rgba(1,7,14,.86);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
  }
  .art-meta small { grid-column: 1 / -1; }

  .spectrum { margin-inline: 16px; }

  /* ---------- HOME PANELS ---------- */
  .panel-grid { padding: 10px 10px 16px; }
  .panel { padding: 18px; margin-bottom: 10px; }
  .panel-head { gap: 10px; }
  .view-switch { gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
  .view-switch button { min-height: 36px; padding-inline: 3px; }

  .shop-grid { grid-template-columns: 1fr; }
  .product { font-size: 10px; }
  .product-image { aspect-ratio: 1.45; }

  .bio-layout { grid-template-columns: 82px 1fr; gap: 16px; }
  .portrait { min-height: 120px; }
  .abstract-mark span { font-size: 56px; }

  .archive-row {
    min-height: 50px;
    grid-template-columns: 36px minmax(0,1fr) 20px;
    gap: 10px;
    padding: 9px 3px;
  }
  .archive-row .year,
  .archive-row .path { display: none; }
  .archive-row .title { overflow-wrap: anywhere; }

  .footer {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom));
  }
  .barcode { display: none; }

  /* ---------- INNER PAGE HEADER ---------- */
  .inner-topbar {
    min-height: 78px;
    height: auto;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    align-items: center;
  }

  .inner-topbar .wordmark {
    min-width: 0;
    font-size: clamp(15px,4.4vw,20px);
    line-height: .94;
  }
  .inner-topbar .wordmark small { font-size: 7px; margin-top: 7px; }
  .inner-topbar .nav { display: none; }
  .inner-topbar .menu {
    display: grid;
    min-width: 48px;
    min-height: 48px;
    align-content: center;
    gap: 6px;
    padding: 7px 2px;
    justify-items: end;
  }

  /* ---------- BIO MOBILE ---------- */
  .inner-main { padding: 0 16px 18px; }
  .inner-hero { padding: 30px 0 24px; }
  .inner-overline { margin-bottom: 18px; font-size: 8px; line-height: 1.55; }
  .inner-hero-grid,
  .contact-hero-grid { gap: 26px; }
  .inner-hero h1 { font-size: clamp(58px,19vw,80px); line-height: .78; }
  .inner-intro {
    max-width: 35em;
    font-size: 11px;
    line-height: 1.85;
    text-transform: none;
    letter-spacing: .035em;
  }

  .bio-identity-card {
    grid-template-columns: 88px minmax(0,1fr);
    gap: 16px;
    padding: 20px 18px;
    min-height: 0;
  }
  .omega-mark { font-size: 76px; }
  .identity-lines { margin: 0; gap: 9px; }
  .identity-lines span { font-size: 8px; padding-bottom: 8px; }

  .bio-story-grid { display: block; padding-top: 14px; }
  .bio-timeline {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 8px;
    padding: 10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .bio-timeline div {
    flex: 0 0 142px;
    min-height: 92px;
    padding: 12px;
    border: 1px solid rgba(151,185,214,.12);
    scroll-snap-align: start;
  }
  .bio-timeline b { font-size: 17px; }
  .bio-timeline span { font-size: 8px; }

  .bio-copy { padding: 20px 18px; }
  .bio-copy > p {
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: .01em;
    color: #b9c4ce;
  }
  .bio-copy .panel-head { display: block; }
  .bio-copy .panel-head > span { display: block; margin-top: 10px; }
  .bio-contact-strip { margin-top: 24px; }
  .bio-contact-strip .cta { width: 100%; justify-content: space-between; }

  /* ---------- CONTACT MOBILE ---------- */
  .contact-hero { min-height: 0; }
  .contact-hero-grid { display: block; }
  .contact-hero .signal-orb {
    width: min(72vw,260px);
    margin: 30px auto 4px;
  }

  .contact-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding-top: 16px; }
  .contact-card {
    min-height: 190px;
    margin: 0;
    padding: 20px 18px;
    touch-action: manipulation;
  }
  .contact-card h2 {
    margin: 28px 0 18px;
    font-size: clamp(28px,9vw,42px);
    line-height: .95;
  }
  .contact-card p { font-size: 9px; }
  .contact-arrow { right: 18px; top: 18px; }
  .contact-crosshair { right: 18px; bottom: 18px; font-size: 38px; }

  .contact-footer-band {
    margin-bottom: 18px;
    padding: 16px;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .contact-footer-band .cta {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 48px;
    justify-content: space-between;
  }
}

@media (max-width: 390px) {
  .topbar.topbar-architectural,
  .inner-topbar { padding-inline: 12px; }
  .topbar-architectural .wordmark,
  .inner-topbar .wordmark { font-size: 15px; }
  .tsol-vamp-seal,
  .tsol-vamp-ring { width: 46px !important; min-width: 46px; max-width: 46px; height: 46px !important; min-height: 46px; max-height: 46px; }
  .hero { padding-inline: 14px; }
  .panel-grid { padding-inline: 8px; }
  .inner-main { padding-inline: 14px; }
  .bio-identity-card { grid-template-columns: 70px minmax(0,1fr); padding-inline: 14px; }
  .omega-mark { font-size: 62px; }
  .bio-copy > p { font-size: 14px; }
  .contact-footer-band { grid-template-columns: 1fr; }
  .contact-footer-band .cta { grid-column: auto; }
}


/* ===== CONTACT VAMP CODA MOBILE ===== */
@media (max-width:760px){
  .contact-vamp-mini{justify-self:start;margin-top:24px;gap:11px}.contact-vamp-mini-ring{width:72px;height:72px;min-width:72px;min-height:72px}.contact-vamp-mini-meta small{font-size:6px}.contact-vamp-mini-meta strong{font-size:9px}
  .contact-vamp-coda{min-height:480px;margin:8px -16px 20px;padding:60px 20px 46px}.contact-vamp-coda:before{left:0;right:0}.contact-coda-axis{top:8%;bottom:13%}.contact-vamp-coda-seal{width:min(70vw,270px)}.contact-vamp-coda-ring{padding:7px;box-shadow:0 0 0 1px rgba(172,222,255,.18),0 0 0 6px rgba(31,118,214,.05),0 0 35px rgba(24,130,255,.28),0 0 80px rgba(16,94,203,.14)}.contact-coda-title{margin-top:22px;font-size:14px;letter-spacing:.24em}.contact-coda-location{font-size:7px;letter-spacing:.25em}.contact-coda-index{gap:10px;font-size:7px;letter-spacing:.12em}.contact-coda-meta{left:18px;bottom:14px;font-size:7px}.contact-coda-status{width:8px;height:8px}
}
@media (max-width:390px){
  .contact-vamp-coda{margin-left:-14px;margin-right:-14px;min-height:430px}.contact-vamp-coda-seal{width:min(73vw,245px)}.contact-coda-title{font-size:12px;letter-spacing:.2em}.contact-coda-index{gap:8px}.contact-coda-meta{display:none}
}