/* ─────────────────────────────────────────────────────────────
   Mobile Overrides — phones only (≤640px). Desktop unaffected.
   Linked from every page; uses !important sparingly to win over
   high-specificity inline styles and existing @980 rules.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

  /* ===== Globals ===== */
  html, body { overflow-x: hidden !important; }
  body {
    cursor: auto !important;
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
  }
  .cursor { display: none !important; }
  a, button, [role="button"] { cursor: pointer !important; }
  img, svg, video, canvas, iframe { max-width: 100%; }

  /* Kill any custom cursor follower */
  body > .cursor { display: none !important; }

  /* ===== Top Nav (shared) ===== */
  nav.top {
    height: 56px !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
    padding: 0 16px !important;
  }
  nav.top .rule,
  nav.top .links {
    display: none !important;
  }
  nav.top .brand,
  nav.top .back,
  nav.top > .mono {
    font-size: 10px !important;
    letter-spacing: 0.15em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  nav.top .back .arr { margin-right: 4px; }

  /* ===== INDEX — Hero (light) ===== */
  .hero-light {
    padding: 96px 16px 48px !important;
    min-height: auto !important;
  }
  .hero-light h1 {
    font-size: clamp(40px, 13vw, 64px) !important;
    line-height: 0.95 !important;
    margin-left: 0 !important;
  }
  .hero-light .label,
  .hero-light .meta { font-size: 10px !important; }
  .hero-light .meta { flex-wrap: wrap; gap: 10px !important; }
  .float-1, .float-2, .float-3,
  .float-img { display: none !important; }

  /* ===== INDEX — Hero (dark) ===== */
  .hero-dark {
    padding: 72px 16px 56px !important;
    min-height: auto !important;
  }
  .hero-dark h2 {
    font-size: clamp(36px, 11vw, 64px) !important;
    line-height: 0.95 !important;
  }
  .hero-dark .grid { gap: 24px !important; }
  .hero-dark .below .stat { font-size: 40px !important; }
  .hero-dark .stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 0 !important;
  }
  .hero-dark .stats .cell {
    padding: 10px 12px !important;
    border-left: 0.5px solid var(--rule) !important;
  }
  .hero-dark .stats .cell:nth-child(odd) {
    border-left: none !important;
    padding-left: 0 !important;
  }

  /* ===== Section heads ===== */
  .section-head {
    grid-template-columns: 1fr !important;
    padding: 56px 16px 16px !important;
    gap: 10px !important;
  }
  .section-head h2,
  .section-head h2 .outline {
    font-size: clamp(40px, 11vw, 64px) !important;
    line-height: 0.95 !important;
    white-space: normal !important;
  }
  .section-head .kicker { font-size: 10px !important; }

  /* ===== INDEX — Mac SYS-1 project grid ===== */
  .proj-grid {
    grid-template-columns: 1fr !important;
    padding: 24px 16px 48px !important;
    gap: 20px !important;
  }
  .span-4, .span-5, .span-6, .span-7 {
    grid-column: span 1 !important;
  }
  .proj-card .proj-art,
  .proj-card.tall .proj-art { height: 160px !important; }
  .proj-body { padding: 16px !important; gap: 10px !important; }
  .proj-body h3 { font-size: 26px !important; }
  .proj-body .desc { font-size: 13px !important; }
  .proj-body .proj-meta { gap: 8px !important; }
  .proj-tb .title { font-size: 9px !important; padding: 2px 8px !important; }
  .sys-menubar { padding: 0 10px !important; font-size: 10px !important; }
  .sys-menubar .now { display: none !important; }
  .sys-menubar .m { margin-right: 10px !important; }

  /* ===== INDEX — Legacy .card grid (if any) ===== */
  .projects {
    grid-template-columns: 1fr !important;
    padding: 16px 16px 48px !important;
    gap: 14px !important;
  }
  .card,
  .card.c-1, .card.c-2, .card.c-3, .card.c-4, .card.c-5,
  .card.c-6, .card.c-7, .card.c-8, .card.c-9 {
    grid-column: span 1 !important;
    min-height: 260px !important;
    padding: 22px !important;
  }
  .card h3 { font-size: 28px !important; }
  .card .desc { font-size: 13px !important; }
  .card .stat-anchor { position: static !important; text-align: left !important; margin-top: 14px !important; }
  .card .stat-anchor .figure { font-size: 52px !important; }

  /* ===== INDEX — About ===== */
  .about { grid-template-columns: 1fr !important; }
  .about .left {
    padding: 48px 16px !important;
    border-right: none !important;
    border-bottom: 0.5px solid var(--rule) !important;
  }
  .about .right { padding: 48px 16px !important; }
  .about .left h2 { font-size: clamp(48px, 14vw, 80px) !important; }
  .about .left p { font-size: 15.5px !important; line-height: 1.6 !important; margin-top: 24px !important; }
  .pill { padding: 12px 14px !important; font-size: 11px !important; }

  /* ===== INDEX — Process ===== */
  .process { grid-template-columns: 1fr !important; }
  .process .step {
    border-left: none !important;
    border-top: 0.5px solid var(--rule) !important;
    padding: 28px 16px !important;
    min-height: auto !important;
  }
  .process .step:nth-child(2),
  .process .step:nth-child(odd) { border-left: none !important; }
  .process .step h4 { font-size: 28px !important; }

  /* ===== INDEX — Contact strip ===== */
  .contact {
    padding: 80px 16px 40px !important;
    min-height: auto !important;
  }
  .contact h2 {
    font-size: clamp(56px, 17vw, 96px) !important;
    line-height: 0.85 !important;
  }
  .contact p { font-size: 15.5px !important; margin-top: 28px !important; }
  .contact .mailto { font-size: 11px !important; flex-wrap: wrap !important; gap: 12px !important; }
  .contact .links { flex-wrap: wrap !important; gap: 14px !important; font-size: 10px !important; }

  /* ===== INDEX — Timeline (kept horizontal-scroll, narrower cols) ===== */
  .timeline .tl-head {
    grid-template-columns: 1fr !important;
    padding: 40px 16px 20px !important;
    gap: 8px !important;
  }
  .timeline .tl-head h2 { font-size: clamp(40px, 12vw, 64px) !important; }
  .tl-row { grid-template-columns: repeat(6, 200px) !important; }
  .tl-node { padding: 32px 16px 40px !important; }
  .tl-node .year { font-size: 36px !important; }
  .tl-node h4 { font-size: 18px !important; }
  .tl-foot { padding: 12px 16px !important; }

  /* ===== Footer ===== */
  footer {
    padding: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 9px !important;
  }

  /* ─────────────────────────────────────────────
     PROJECT DETAIL PAGES (.ph-* shared structure)
     ───────────────────────────────────────────── */

  .ph-hero { padding: 88px 16px 40px !important; }
  .ph-hero .kicker { font-size: 10px !important; gap: 8px !important; flex-wrap: wrap; }
  .ph-hero h1 {
    font-size: clamp(48px, 16vw, 84px) !important;
    line-height: 0.9 !important;
    margin-left: 0 !important;
  }
  .ph-hero .lede {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-top: 28px !important;
  }
  .ph-hero .role { font-size: 10px !important; margin-top: 24px !important; }

  .ph-stats { grid-template-columns: 1fr 1fr !important; }
  .ph-stats .cell {
    padding: 24px 16px !important;
    border-left: 0.5px solid var(--rule) !important;
  }
  .ph-stats .cell:nth-child(odd) { border-left: none !important; }
  .ph-stats .stat { font-size: 32px !important; }
  .ph-stats .lbl { font-size: 9px !important; }

  .ph-body { grid-template-columns: 1fr !important; }
  .ph-body .side {
    border-right: none !important;
    border-bottom: 0.5px solid var(--rule) !important;
    padding: 32px 16px !important;
  }
  .ph-body .main { padding: 32px 16px !important; max-width: 100% !important; }
  .ph-body .main p { font-size: 15.5px !important; line-height: 1.65 !important; }

  /* Generic ph-visual placeholder height */
  .ph-visual {
    min-height: 280px !important;
    padding: 40px 16px !important;
  }

  .ph-related { padding: 48px 16px !important; }
  .ph-related h3 { font-size: clamp(40px, 11vw, 60px) !important; margin-bottom: 24px !important; }
  .rgrid {
    grid-template-columns: 1fr !important;
    border: 0.5px solid var(--rule);
  }
  .rcard {
    border-left: none !important;
    border-top: 0.5px solid var(--rule) !important;
    padding: 24px 16px !important;
    min-height: auto !important;
  }
  .rcard:first-child { border-top: none !important; }
  .rcard h4 { font-size: 26px !important; }

  .ph-nav { grid-template-columns: 1fr !important; }
  .ph-nav a {
    padding: 28px 16px !important;
  }
  .ph-nav a:last-child {
    border-left: none !important;
    border-top: 0.5px solid var(--rule) !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .ph-nav h5 { font-size: 32px !important; }
  .ph-nav .lbl { font-size: 10px !important; }

  /* Interactive section (.ix used on phone-repair and others) */
  .ix { padding: 48px 16px !important; }
  .ix-head {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
  }
  .ix-head h3 { font-size: clamp(36px, 10vw, 56px) !important; }
  .ix .tabs { flex-wrap: wrap !important; }

  /* ─────────────────────────────────────────────
     PHONE-REPAIR specifics
     ───────────────────────────────────────────── */

  /* Repair video stage — keep phone visible, hide HUDs */
  #repair-stage.ph-visual {
    min-height: 600px !important;
    padding: 60px 16px !important;
  }
  .stage-hud { display: none !important; }
  .iphone {
    width: 220px !important;
    height: 450px !important;
    border-radius: 40px !important;
    padding: 8px !important;
  }
  .iphone .screen { border-radius: 32px !important; }
  .iphone .island { width: 78px !important; height: 24px !important; top: 8px !important; }
  .vmeta-tl, .vmeta-tr { font-size: 8px !important; gap: 6px !important; }
  .vmeta-tr { right: 16px !important; top: 18px !important; max-width: 50%; text-align: right; }
  .vmeta-tl { left: 16px !important; top: 18px !important; }
  .stage-progress { left: 16px !important; right: 16px !important; bottom: 44px !important; }
  .stage-progress .label { font-size: 8px !important; }
  .stage-progress .time { font-size: 9px !important; }

  /* Teardown disperse stage — 2 cols × 4 rows on mobile */
  .tear-stage { min-height: 760px !important; }
  .tear-stage .parts-layer { inset: 48px 0 44px 0 !important; }
  .tear-stage .stage-bar { padding: 10px 12px !important; }
  .tear-stage .stage-bar .bar-l,
  .tear-stage .stage-bar .bar-state { font-size: 9px !important; }
  .tear-stage .stage-bar .bar-l .sep,
  .tear-stage .stage-bar .bar-l span:last-child { display: none; }
  .tear-stage .stage-bar button { padding: 6px 10px !important; font-size: 9px !important; }
  .tear-stage .stage-foot { padding: 10px 12px !important; font-size: 9px !important; flex-direction: row !important; gap: 8px !important; }
  .tear-stage .stage-foot > div { font-size: 9px !important; }

  /* Shrink part visuals to fit */
  .tear-stage .part-vis { transform: scale(0.62); transform-origin: center center; }

  /* Re-position dispersed parts into a 2-col grid */
  .tear-stage[data-state="dispersed"] .part[data-id="glass"]  { left: 28% !important; top: 14% !important; }
  .tear-stage[data-state="dispersed"] .part[data-id="oled"]   { left: 72% !important; top: 14% !important; }
  .tear-stage[data-state="dispersed"] .part[data-id="frame"]  { left: 28% !important; top: 36% !important; }
  .tear-stage[data-state="dispersed"] .part[data-id="back"]   { left: 72% !important; top: 36% !important; }
  .tear-stage[data-state="dispersed"] .part[data-id="battery"]{ left: 28% !important; top: 58% !important; }
  .tear-stage[data-state="dispersed"] .part[data-id="logic"]  { left: 72% !important; top: 58% !important; }
  .tear-stage[data-state="dispersed"] .part[data-id="camera"] { left: 28% !important; top: 82% !important; }
  .tear-stage[data-state="dispersed"] .part[data-id="taptic"] { left: 72% !important; top: 82% !important; }

  /* Callouts: render as compact card below the tapped part, full width */
  .tear-stage .part-callout {
    position: fixed !important;
    left: 12px !important; right: 12px !important;
    bottom: 12px !important; top: auto !important;
    width: auto !important;
    transform: none !important;
    z-index: 500;
  }
  .tear-stage .part-callout::before { display: none !important; }
  .tear-stage .part.active .part-callout {
    transform: none !important;
  }
  .tear-stage .part-callout h5 { font-size: 22px !important; }
  .tear-stage .part-callout p { font-size: 12px !important; }

  /* ─────────────────────────────────────────────
     COCO LABS / contact page specifics
     ───────────────────────────────────────────── */
  footer.cf {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px !important;
  }
}

/* Tighter overrides for very narrow screens (≤380px) */
@media (max-width: 380px) {
  .ph-hero h1 { font-size: 44px !important; }
  .hero-light h1 { font-size: 40px !important; }
  .hero-dark h2 { font-size: 36px !important; }
  .section-head h2 { font-size: 38px !important; }
  .contact h2 { font-size: 56px !important; }
  .iphone { width: 200px !important; height: 410px !important; }
  .tear-stage .part-vis { transform: scale(0.55); }
}