/* ============================================================
   MOBILE PASS — phone & small-tablet layer.
   Loaded last on every page; desktop above 1024px is untouched.
   Measured at 390px (iPhone) and 834px (iPad).
   ============================================================ */

/* 01 · Fluid display scale --------------------------------------
   tokens.css pins the display sizes in px (96 / 52 / 28), so a bare
   <h1> rendered at 96px on a 390px screen. Make them fluid below
   the max content width; they still resolve to the authored size
   at 1280px and up.                                              */
@media (max-width: 1024px) {
  :root {
    --display-xl-size: clamp(38px, 8.4vw, 96px);
    --display-l-size:  clamp(28px, 5vw, 52px);
    --display-m-size:  clamp(21px, 3vw, 28px);
  }
  h1, h2, h3, .h1, .h2, .h3, .display-xl, .display-l, .display-m,
  .hero-title, .sec-title { overflow-wrap: break-word; }
}

/* 02 · Sticky topbar — compact two-line header ------------------
   Was 113–120px tall on a phone (13% of the viewport). Brand on
   line one, the full nav on line two, separated by a hairline so
   it reads as a deliberate masthead rather than a wrapped row.   */
@media (max-width: 680px) {
  .topbar { padding: 6px 20px; flex-wrap: wrap; row-gap: 0; column-gap: 12px; }
  .brand { font-size: 11.5px; letter-spacing: 0.14em; padding-block: 8px; display: inline-block; }
  .topbar-cta { display: none; }
  .nav {
    width: 100%; gap: 4px; justify-content: space-between; align-items: stretch;
    border-top: 1px solid var(--line-soft); margin-top: 2px;
  }
  .nav a, .nav-link {
    font-size: 11.5px; letter-spacing: 0.01em;
    padding-block: 12px; display: inline-flex; align-items: center;
  }
  /* anchors clear the taller masthead */
  .block[id], section[id], [id] { scroll-margin-top: 96px; }
}

/* 03 · Vertical rhythm — tighter but still on the 24px grid ----- */
@media (max-width: 680px) {
  .section { padding-block: 48px; }
  .section + .section { padding-top: 24px; }
  .block { padding: 24px 0; }
}

/* 04 · Reading sizes --------------------------------------------
   Nothing that carries meaning drops below 11.5px on a phone;
   prose sits at 15px.                                            */
@media (max-width: 680px) {
  :root { --fs-body: 15px; --fs-body-lg: 15.5px; }
  .body, .lede, .prose p { font-size: 15px; line-height: 1.68; }
  .eyebrow, .status-pill, .section-num, .num, .n, .k, .tag,
  .frame-label, .frame-num, .work-tag, .ph-num, .ph-cap, .arch-num,
  .pl-lbl, .glance .k, .poster-foot { font-size: 11.5px; }
  .insight p, .pillar p, .reflect-card p, .demo-card p, .why p,
  .ia-box .subs li { font-size: 13.5px; line-height: 1.62; }
  .orbit-txt { font-size: 10.5px; }
  .orbit-hint { font-size: 11px; }
}

/* 05 · Final-solution galleries — swipe row ---------------------
   Six 205px mocks stacked two-up ran the section past 4,000px and
   left each screen too small to read. On a phone the row becomes a
   snap-scrolling strip at near-device size: fewer pixels of page,
   larger screens.                                                */
@media (max-width: 680px) {
  .final-stage { align-items: stretch; }
  .final-row.final-phones,
  .final-responsive .final-phones {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    gap: 14px; padding: 4px 20px 12px; margin-inline: -20px;
    scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: var(--accent-soft) transparent;
    /* the row is a flex item inside a centred column: without this it sizes
       to max-content and hangs off both edges instead of scrolling */
    width: 100%; max-width: 100%; align-self: stretch; box-sizing: border-box;
  }
  .final-row.final-phones::-webkit-scrollbar,
  .final-responsive .final-phones::-webkit-scrollbar { height: 5px; }
  .final-row.final-phones::-webkit-scrollbar-thumb,
  .final-responsive .final-phones::-webkit-scrollbar-thumb { background: var(--accent-soft); }
  .final-row.final-phones .phone,
  .final-responsive .final-phones .phone {
    --pw: 208px !important; flex: 0 0 auto;
    scroll-snap-align: center; animation: none !important;
  }
  .final-stage::after {
    content: "swipe \2192"; align-self: flex-end;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute);
  }
}

/* 06 · Touch targets -------------------------------------------- */
@media (max-width: 680px) {
  .poster-foot a, .footer a, .contact-list a, .work-cta {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .btn { min-height: 46px; }
}

/* 07 · No sideways drift ---------------------------------------- */
@media (max-width: 680px) {
  html, body { overflow-x: clip; }
}